The world’s leading publication for data science, AI, and ML professionals.

PyScript – unleash the power of Python in your browser

A sneak peek at how to run Python from HTML code

Source: source: pyscript.net
Source: source: pyscript.net

During a keynote speech at PyCon US 2022, Anaconda’s CEO Peter Wang unveiled quite a surprising project – PyScript. It is a JavaScript framework that allows users to create Python applications in the browser using a mix of Python and standard HTML. The project’s ultimate goal is to allow a much wider audience (for example, front-end developers) to benefit from the power of Python and its various libraries (statistical, ML/DL, etc.).

The key things to know about PyScript

  • Allows us to use Python and its vast ecosystem of libraries (including numpy, pandas, scikit-learn) from within the browser.
  • By using environment management **** users can decide which packages and files are available when running the page’s code.
  • We can use some of the curated UI components out-of-the-box, for example: buttons, containers, text boxes, etc.
  • We do not have to worry about deployment as with PyScript everything will happen in our web browsers. As data scientists, we could share HTML files containing dashboards and/or models with our stakeholders, who will be able to run those in their browsers without any complicated setup.

How does it work?

PyScript is built on Pyodide. I hope I am not in the vast minority of data scientists who were not really familiar with what Pyodide actually is. So it is a Python distribution (port of CPython) for the browser and Node.js based on WebAssembly. Which brings the next question: what is WebAssembly?

WebAssembly is the technology that makes it possible to write websites in Python. It uses a human readable .wat text format language, which then gets converted to a binary .wasm format that browsers can run. Thanks to this, we can write code in any language, compile it to WebAssembly, and then run in a web browser.

In the following image presenting the tech stack, we can also see Emscripten, which is an open-source compiler toolchain. It allows any portable C/C++ codebase to be compiled into WebAssembly.

Thankfully, as end users we do not have to fully understand what is happening under the hood. However, it is definitely important, for example, for security reasons.

Source: https://anaconda.cloud/pyscript-python-in-the-browser
Source: https://anaconda.cloud/pyscript-python-in-the-browser

For the time being, PyScript supports writing and running Python code in a browser. The goal for the future is that it will also provide support for other languages.

This is also where a potential limitation comes into play. Currently, when using PyScript we can only use the libraries that are supported by Pyodide. You can find the entire list here.

Taking it for a spin

PyScript it currently in the alpha stage, but we can already give it a go and potentially suggest any improvements on its GitHub repo. We can download a zipped folder containing all the code and assets directly from PyScript’s website.

The most basic example provided on PyScript’s website is the following:

As we can see, Python code is embedded in the <py-script> block. Opening the file in the browser (or using VS Code’s Life Saver extension) results in the following output:

Image by author
Image by author

In the second example, we will do a bit more. We will use numpy to generate numbers coming from Standard Normal distribution and then plot them using matplotlib. We do so using the following code:

This time, we also did the following:

  • we defined the libraries we wanted to use in our Python environment by listing them in the <py-env> block,
  • we indicated that we will be outputting a plot by specifying it in the <py-script> block: <py-script output="plot">.
Image by author
Image by author

Naturally, as our codebase grows bigger, we do not have to embed it entirely in the HTML file. We can use the following block structure to load any .py script:

<py-script src="/our_script.py"> </py-script>

You can find quite a lot of examples of using PyScript [here](https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples) (already running in the browser) and here (code on GitHub).

Wrapping up

  • with PyScript we will be able to run Python (and not only) code straight from our browsers,
  • the project is developed by Anaconda,
  • the project is still in the alpha stage, but we can already play around with a selection of libraries supported by Pyodide.

Personally, I am not sure what to think about PyScript at this point in time. It seems promising, but it can potentially open quite a lot of new security issues. And at this time, we can also see that even running some simple scripts already generates a significant overhead in terms of execution time. So I am not sure how practical it will be to run larger chunks of code from within the browser.

I am curious to hear what are your thoughts about this new piece of technology! Please let me know in the comments or on Twitter.

Liked the article? Become a Medium member to continue learning by reading without limits. If you use this link to become a member, you will support me at no extra cost to you. Thanks in advance and see you around!

You might also be interested in one of the following:

Pandas Is Not Enough? A Comprehensive Guide To Alternative Data Wrangling Solutions

Preview your Jupyter Notebooks in the terminal with nbpreview

pur – the easiest way to keep your requirements file up to date


Related Articles