If you want to run Python code embedded in a HTML file in your browser, one way of doing it is to use something like Brython, Skulpt or Pypy.js, which convert your python code into Javascript and then run that Javascript in the browser.
One of the problems with this approach is the limited availability of Python modules ported into Javascript for use by those packages.
Another route to using Python in the browser is to connect to a remote Python environment. This is the approach taken by online code editors such as PythonAnywhere or repl.it.
A third way to access a Python environment via a web browser is using Jupyter notebooks, but this limits you to using the Jupyter notebook environment, or a display rendered using a Jupyter extension, such as RISE slideshows or appmode.
Several years ago, O’Reilly published a demonstration Jupyter plugin called Thebe that allowed you to write code in an HTML page and then run it against a Jupyter kernel.
I think that example rotted some time ago, but there’s a new candidate in the field in the form of @minrk’s ThebeLab [repo] .
Here’s an example of a live (demo) web page, embedding Python code in the HTML that can be executed against a Jupyter kernel:
The way the code is included in the page is similar to the way it was embedded in the original Thebe demo, via a suitably annotated <pre> tag:
One other thing that’s particularly neat is the way the page invokes the required Jupyter kernel – via a Binderhub container:
(You may note you also need to pull in a thebelab Javascript package to make the whole thing work…)
What this means is that you can embed arbitrary code, for an arbitrary language (or at least, as arbitrary as the language kernels supported by Jupyter), running against an arbitrary environment (as specified by the Binder image definition).
The code cells are also editable, which means you can edit the code and run your own code in them. Obviously:
- this is great for educators and learners alike because it means you can write – and run – interactive code exercises inline in your online course materials;
- rubbish for IT because they’ll be scared about the security implications. (The fact that stuff runs in containers should mitigate some of the “can our network get hacked as a result” concerns, but leave open the opportunity that someone could used the kernel as place from which to mount an attack somewhere else. One way many notebook get round this is block or whitelist the external sites from which requests can be made from inside the kernel. Which can be a pain if you need to access third party sites, eg to download data. But is maybe less of an issue when running a more constrained activity inline within course materials against a custom kernel environment?)
It’d be great to be able to run something like this as a demonstrator activity in TM112… I just need to put a demo together now… (Which shouldn’t be too hard: the current plan is to use notebooks for the demos, running them from a Binderhub launched environment…)
PS I just did the quickest of quick proofs of concept for myself, taking the demo thebelab html file and adding my own bits of ipython-folium-magic demo code, and hey presto…… https://psychemedia.github.io/ipython_magic_folium/ In the demo, try editing the code cell to geolocate your own address, rather the address of the OU, and re-run that code cell. Or look for other things to try out with the magic as described here.
PPS so now I’m wondering about a Thebelab HTML output formatter for nbconvert that runs the code in code input cells that are hidden using the Hide Cell notebook extension, to render the output from those cells, and writes the code from the unhidden code input cells into <pre> tags for use with Thebelab?
PPPS here’s another approach that works to a similar end – nbinteract. This allows you to publish a notebook as an HTML page, with widgets rendered using Javascript, and cell computations run using a Binderhub backend.
PPPPS And another: https://github.com/QuantStack/voila
OUseful.Info, the blog... 