GitHub Pages – How to Run Pyodide on Website

github-pagespython

I have a GitHub pages website on which I'd like to run commands from SciPy. The user will input three values (A, B, C), and a python code will find the optimal nontrivial values: X, Y, Z such that X^A+Y^B=Z^C holds.

Pyodide sounds like my best chance to do so. But, I am not sure how I can get input from the user and how to let Pyodide compute the optimization process to find the values of X, Y, Z.

Edit: this is possible (see the accepted answer), however, I used streamlit which was much easier to work with.

Best Answer

The answer is yes. All you need to do is to include Pyodide to your web page:

<head>
  <script type="text/javascript">
    window.languagePluginUrl = 'https://pyodide-cdn2.iodide.io/v0.15.0/full/';
  </script>
  <script src="https://pyodide-cdn2.iodide.io/v0.15.0/full/pyodide.js"></script>
</head>

load required packages and, finally, run your python code

languagePluginLoader
  .then(()=>pyodide.loadPackage(['numpy', 'scipy', 'matplotlib']))
  .then(()=>{
          console.log(pyodide.runPython(`
              import sys
              sys.version
          `));
          console.log(pyodide.runPython('print(1 + 2)'));
      });

Here is the official documentation and an article about it

I also created a simple live demo

Update 1: Here is an extended demo deployed on Github pages (source code). I'm also going to write a small guide, so stay tuned.

Update 2: Here is a tutorial

Related Topic