I want to run Python code from a text-area in HTML and save the output in a div. I am using pyodide.js https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js to run Python. I would also like to use a worker which does not affect the main JS thread.
I have a working code that logs the output to the JavaScript console in the browser, and I can’t figure out a way to get the result in a string.
Can you help me get the code output saved to a variable?
The main function runPythonCode outputs the result to the console instead of returning an output to the variable result (result=undefined) in main-worker.js.
Find the detailed code below.
//test-code
import { runPythonCode } from "./main-worker.js";
$(element).find(".run-code:first").click(
async function() {
let current_code = "print('Hello, World!')"
let result = await runPythonCode(current_code)
console.log("Run clicked", result)
}
)
// main-worker.js
// main-worker.js
import { asyncRun } from "./py-worker.js";
console.log("Python main worker started.")
async function runPythonCode(pythonCode, context) {
try {
const { result, error } = await asyncRun(pythonCode, context);
if (result) {
return result.toString()
} else if (error) {
return error
}
} catch (e) {
console.error("Error communicating with the worker:", e);
}
}
export {runPythonCode}
// py-worker.js
// py-worker.js
const pyodideWorker = new Worker("./worker.js");
const callbacks = {};
pyodideWorker.onmessage = (event) => {
const { id, result, error } = event.data;
const onSuccess = callbacks[id];
delete callbacks[id];
if (onSuccess) {
if (result) {
onSuccess({ result });
} else if (error) {
onSuccess({ error });
}
}
};
const asyncRun = (pythonCode, context = {}) => {
const id = Date.now().toString(); // Unique identifier for each run
return new Promise((resolve) => {
callbacks[id] = resolve;
pyodideWorker.postMessage({ id, pythonCode, context });
});
};
export { asyncRun };
// worker.js
// worker.js
importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
async function loadPyodideAndPackages() {
self.pyodide = await loadPyodide({
"indexURL" : "https://cdn.jsdelivr.net/pyodide/v0.25.0/full/",
});
// Add any necessary packages here
// await self.pyodide.loadPackage(["numpy"]);
}
let pyodideReadyPromise = loadPyodideAndPackages();
self.onmessage = async (event) => {
await pyodideReadyPromise;
const { id, pythonCode, context } = event.data;
// Copy the context variables to the worker's scope
for (const key in context) {
self[key] = context[key];
}
try {
// Load packages and run Python code
await self.pyodide.runPythonAsync(pythonCode);
postMessage({ id, result: "Execution complete" });
} catch (error) {
postMessage({ id, error: error.message });
}
};
