pyodide

  • python distribution for the browser

    • install and run python packages with micropip

  • comes with javascript

  • based on WebAssembly

flowchart LR %% participant pyo(Pyodide) wea(WebAssembly) js(javascript) py(pyscript) jl(jupylite) fl(Flet:app) %% style style pyo font-weight:bold %% arrows subgraph pyodide wea --> pyo end subgraph usecase pyo -->|use| js pyo -->|use| py pyo -->|use| jl pyo -->|use| fl end

try repl

repl as below

Hide code cell source 
from IPython.display import IFrame
IFrame(src='https://pyodide.org/en/stable/console.html', width=700, height=300)

start

  • using hosted distribution

  • serve it with a web server (self hosting)

  • build pyodide from source

using pyodide distribution (option 1)

1. setup

https://cdn.jsdelivr.net/pyodide/v0.23.3/full/pyodide.js

2. running

pyodide.runPython(`
  import sys
  sys.version
`);

3. example

<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.23.3/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="sum([1, 2, 3, 4, 5])" />
    <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();
        output.value += "Ready!\n";
        return pyodide;
      }
      let pyodideReadyPromise = main();

      async function evaluatePython() {
        let pyodide = await pyodideReadyPromise;
        try {
          let output = pyodide.runPython(code.value);
          addToOutput(output);
        } catch (err) {
          addToOutput(err);
        }
      }
    </script>
  </body>
</html>

4. result

Hide code cell source 
from IPython.display import display, HTML
html = HTML('../we/pyo.html')
display(html)

You can execute any Python code. Just enter something in the box below and click the button.



Output: