PyScript: A Useful Abomination?
I’m George, a Stanford-Educated Tech Entrepreneur and A.I. Engineer. Follow me here on medium George Davila Durendal or over on LinkedIn for more tech & code.
Last week the data science team over at Anaconda, the company behind the famous python package management system known as conda, released a library known as PyScript. PyScript preposterously purports to stick python code right into HTML à la
<html> <head>
<title>PyScript Test</title>
<script defer src="https://pyscript.net/alpha/pyscript.js">
</script>
</head> <py-script>
print('Hello world welcome to PyScript')
</py-script></html>
Yes, that is an actual functional webpage.
Why?
Upon seeing the example above you might conclude that the Anaconda data science team has gone crazy. But in reality, PyScript presents quite the useful innovation.
A little-known war has been happening recently. Different frameworks have been fighting it out to be the frontend for Machine Learning and Data Science.
Most data scientists and machine learning engineers are backend engineers. Most model-building ML engineers do their daily work in python, with a smaller contingent using C++. Most data scientists do their daily work in python, R, Julia, or even Excel. Relatively few are fluent in frontend technologies. Even those who are can find it disruptive and time-consuming to construct a proper frontend for their models.
Frameworks like Streamlit, Gradio, and PyWebIO have been trying to bridge the gap. All these frameworks are pythonic frontends, allowing us to write web-interfaces directly in python (and quite importantly, in a python-friendly manner). You can write everything from simple calculators, to image style-transfer demos, using these frameworks without ever leaving python. Each of these has its benefits. Streamlit is extremely pythonic, beautifully designed, and easy to interact with. Gradio automatically tunnels to the web, making it easy to deploy an application from a notebook. But these frameworks have the poignant issue of not being easily deployed and/or integrated into JS frontends. I.e. I can’t just stick a button onto my website that says “Click me to run this python script” in a set-and-forget manner. At the very least you need to host a python script somewhere (Pythonanywhere is quite a nice and simple cloud host for this use-case, but it still requires quite a bit of setup and/or cost).
On the other hand, while the marvelous Tensorflow.js framework is technically a backend framework, it makes it very easy to build ML frontends that run on a users’ device via WASM and WebGL. ML5.js is a particularly wonderful distillation of this frontend simplicity as you can deploy ML models as complex as human segmentation models to the browser in just 70 lines of code. Alas, this still has the issues of 1) being written in javascript and 2) being slower than its python tensorflow counterpart (which uses C rather than JS on the backend). So if a python engineer learned Tensorflow.js just to write a web demo they would still have to deploy the final model in python anyway, wasting time and resources. And many ML models are written in sklearn anyway, so there’s both a language and framework incompatibility problem.
PyScript tackles some of these issues. It runs python in the browser from nothing but a basic server. So you can host your ML/DS demo on your free github.io website, as I show below. Not only that, but you can seamlessly pass inputs and outputs from python to javascript or html or vice versa. In practice this means that you can embed a python model on your website and not have to worry too much about hosting or maintenance.
Coding in PyScript
PyScript purports to be able to run python right in your html. So the following JavaScript
<script>
document.write('Hello World');
</script>And the following PyScript
<py-script>
print('Hello World')
</py-script>Produce equivalent results. If you’re like me you probably assumed pyscript print() would be equivalent to JS console.log(), and indeed that’s what I assumed when first writing the examples above. But apparently that’s not currently the case (this probably should change, as I show below we can assign a python output to a html element anyway so print=console.log is likely a more useful relation).
Here is a working demo of the above hello world example:
For a more complex demo we can look at an example written by Tirthajyoti Sarkar which uses python libraries like numpy and matplotlib to generate random distributions and plots:
We should note the code snippet
<py-env>
- matplotlib
</py-env>This is setting up the environment, effectively acting like “pip install matplotlib” normally would. Numpy is a standard python library, so it would appear that pyscript comes with a default python configuration and we import external libraries by including them in the <py-env>.
We can further observe that the python script is fetching values from the html elements and passing the figures back as outputs using PyScript’s own Element function
<py-script>
import numpy as np
import matplotlib.pyplot as plt out = Element("outputDiv")
input_num = Element("how-many")
dist_type = Element("dist").value
out2 = Element("outputDiv2")...out.write(f"Here are {n} random variates from Normal distribution: {r}") ...out2.write(fig1)
</py-script>
To see how it handles more complex python libraries, I tried deploying the PyScript team’s scikit-learn k-means clustering example on my github.io page:
It will likely take a bit for the above page to load but when it does you can see that the PyScript library is capable of hosting more complicated code. To host that I only needed to upload that one HTML file to github. The simplicity of it is a nice reprieve from the cumbersome environment management typically associated with machine learning.
So there we have it! A way to easily integrate a python script into a frontend. The scikit-learn library, in particular, is an essential pillar of modern machine learning and data science. So the ability to easily host and share sklearn models may very well make PyScript a favorite amongst data scientists, especially those who want to host projects or develop proof of concepts. Whole websites might even be built around this. Suppose, for instance, that you build an sklearn model that tells someone how many push-ups to do based on their height and weight inputs. Rather than deploying the python model to the cloud and accessing it as an API via JQuery — the way you would’ve done it a week ago — you can now use PyScript. PyScript will likely remain the slower of the two options for the foreseeable future; so enterprise-grade models should be properly deployed and orchestrated. But it quite nicely fills out that sweet spot of getting a minimally-viable model out to the world.
Notes
Brython has existed for quite a while. I saw it about a year ago but quickly found it to be maladapted for modern ML/DS use cases. To the contrary, PyScript seems to be built from the ground up with these fields in mind. Its less than a week old and can already be used with sklearn.
From my tests so far, Tensorflow.js seems to be far faster than PyScript when it comes to in-browser inference.
