Anvil and Pyodide - an attempt

Show and Tell
1

Dear Fellow Anvilistas,

Please do not read on, unless you’re interested in some a somewhat exotic and mostly failed experiment…

I’ve been looking into Pyodide the past few days…. Like Skuplt, Pyodide seeks to “bring Python to the browser” but unlike Skulpt Pyodide does so with Web Assembly (WASM). My motivation for playing around with Pyodide was NOT as an alternative to Anvil. On the contrary, my ambition was to broaden the use case for Anvil in two ways:

  1. Making any Python package available client-side from within Anvil.

  2. And for me, more importantly, making it possible to run Anvil Uplink (client) Python code from any JavaScript application. Specifically, I would have loved to be able to write an application where all the UI stuff was written in vanilla HTML, CSS and JavaScript, but where all data processing and server communication were handled with client-side Python code using Anvil Uplink (in a Pyodide web worker).

I tried #2 (using Pyodide’s micropip) from both a regular JS script and by using a web worker, but in both cases I got an error message about a ‘missing _ssl’. For me, working with Pyodide is enough black magic as it is, so I’ve (at least for now) given up… But it would have been so sweet to be able to take advantage (in any JS application) of Anvil’s great client-server communication instead of dealing with HTTP endpoints and fetch (I’ve not linked to this failed attempt here).

Concerning #1, I used the Python package, Pint (an excellent package for unit conversion) as a test case. Before a tighter integration into Anvil, I initially attempted to simply call an index.html file from a startup module (‘window.location = …’; essentially using Anvil as a launchpad for a vanilla web application). When I clone the Anvil app repo locally and run the index.html file directly from VS Code, everything actually works: A small Python script (awkwardly placed in an Assets JS file as a JS string) does its magic.

demo
demo528×584 16.2 KB

However, when I do the same thing from Anvil, things break down with a “no native wasm support detected” error in the console. I’m really punching far above my weight here, but perhaps it has got something to do with the way Anvil wraps scripts in service workers(?). Here’s a link to the Anvil app:

https://anvil.works/build#clone:IISGY5LWZOO7UJNR=GT5OEXPMY3QCV5G7FPKYXDYR

Long story short, if you want to run a working version of this experiment, do the following:

  1. Clone the repo locally.

  2. Open the local repo in e.g., VS Code and run the index.html file (e.g., with the Live Server VS Code plugin).

2

One thing I noticed, if you adjust a couple of urls in your index.html it might help

  <link rel="stylesheet" href="_/theme/app.css">
  <script src="_/theme/main.js" type="module"></script>

Changing those two means you can just create a custom html form and change the template to the index.html template.

1 Like
3

Thx and yep - absolutely. Whenever I juggle between running “pure JS” and “from Anvil”, I normally inject stylesheet links from code and control a “path” parameter stored in a JS file, i.e. default is e.g., ‘…/’ but when run from Anvil, it automatically changes to ‘_/theme/’.

My “fist attempt” was to make Pyodide work “in clean JS” before further integration into Anvil (to shield as much as possible from automatically loaded Anvil stuff that could get in the way of Pyodide). In the attempts, I’ve made to make Pyodide work from Anvil, I’ve tried both approaches, i.e. running “the raw index.html” (launched from Anvil as in the demo) and wrapping it in an HtmlTemplate instance - with the same result. But great if I’ve missed something :slight_smile: and it can be made to work.

2 Likes
4

Glad to see I’m not the only person flirting with an Anvil-Pyodide Hybrid! I really hope Pyodide allows Pip packages that aren’t pure Python wheels sooner rather than later – most of the packages I want to use on the Client-side with Anvil turn out to always be impure.

2 Likes