Python을 JS 파일에서?
#pyodide, #웹어셈블리, #WebAssembly
왜 자바스크립트에서 파이썬을 사용할까?
그건 나도 모른다.
근데,
사용할 수 있다. 그럼 파이썬의 장점을 살릴 수 있다는 뜻인데.
https://pyodide.org/en/stable/
웹어셈블리 라는 워드를 근래에 자주 볼 수 있다.
그래서 배워봤다.
추천 시스템을 만들면서 가끔 웹 대시보드를 통해서 인퍼런스 결과를 보여주고자 할 때가 있다.
그땐,
(N, 300) dot (250000, 300).T 연산을 해야한다.
아...
이거 자바스크립트로 어떻게 할 수 있지?
그냥 파이썬 서버-사이드에서 전부 연산하고 결과만 Return 해주는 방식을 택하게 된다.
음...
이거 사내-시스템으로 사용하면 심각한 부하는 없을 것 같은데
수많은 트랙픽이 몰린다면 어떻게 될까?
그래서 진짜 Numpy, Pandas 등의 라이브러리를 사용할 수 있는지 확인만 해봤다.
Pyodide Github 참조!
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
</head>
<body>
<p>
You can execute any Python code. Just enter something in the box below and
click the button.
</p>
<input id="code" value="np" />
<button onclick="evaluatePython()">Run</button>
<br />
<br />
<div>Output:</div>
<textarea id="output" style="width: 100%;" rows="6" disabled></textarea>
<script>
const output = document.getElementById("output");
const code = document.getElementById("code");
function addToOutput(s) {
output.value += ">>>" + code.value + "\n" + s + "\n";
}
output.value = "Initializing...\n";
// init Pyodide
async function main() {
let pyodide = await loadPyodide({
indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/",
});
await pyodide.loadPackage('numpy')
await pyodide.loadPackage('pandas')
await pyodide.loadPackage('micropip')
output.value += "Ready!\n";
return pyodide;
}
let pyodideReadyPromise = main();
async function evaluatePython() {
let pyodide = await pyodideReadyPromise;
pyodide.runPython("import numpy as np");
pyodide.runPython("import pandas as pd");
try {
startTime = new Date();
let output = pyodide.runPython(code.value);
addToOutput(code.value + " : " + outdeput);
endTime = new Date();
addToOutput(endTime - startTime);
} catch (err) {
addToOutput(err);
}
}
</script>
</body>
</html>
위 파일을 보면,
코드가 너무... 쉽게 보여서 이게 뭐지? 라는 느낌이 날 수 있다.
실행하면 이런 화면이 보인다.
Run 버튼을 눌러보면,
진짜. numpy 모듈을 사용할 수 있다.
TextField에 np.ones(100) 을 입력하면 아마도 기대하는 그 값을 볼 수 있다.
직접 해보면 좋을 것 같다.
