Python을 JS 파일에서?

#pyodide, #웹어셈블리, #WebAssembly

by 유윤식

Nov 9. 2021

왜 자바스크립트에서 파이썬을 사용할까?

그건 나도 모른다.

근데,

사용할 수 있다. 그럼 파이썬의 장점을 살릴 수 있다는 뜻인데.

https://pyodide.org/en/stable/

Pyodide — Version 0.18.1

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>