Hosting interactive jupyter HTML file (with ipywidgets) on github as web page?

Hello,

Do I was wondering if it is possible to host an interactive application that includes ipywidgets in the exported HTML document as a webserver and what additional elements do you need to make it happen?

Basic markdown, matplotlib and HTML seem to work fine but the ipywidgets don’t seem to show up @ deployments…

Any idea what needs to be done to make it work?

ipywidgets aren’t going to work as they need the active kernel.

“Jupyter interactive widgets are interactive elements, think sliders, text boxes, buttons, that have representations both in the kernel (place where code is executed) and the front-end (the Notebook web interface). To do this, a clean, well-abstracted communication layer must exist.” - Source

You can though actually host the notebooks on Github and launch them via MyBinder without deploying a server yourself, even without the notebook showing if you use the Voila dashboard as a display choice. You can see several examples of this here at the Voila Gallery. Click on any many part of the tiles representing any of the examples and they will launch via MyBInder for free. The repositories you can get by clicking ‘Source’ below each tile at the Gallery show what is necessary to archive those notebooks on Github and have them be launchable. There is no need to export the HTML to do this.

Alternatively, check out the nbinteract package.

" nbinteract is a Python package that provides a command-line tool to generate interactive web pages from Jupyter notebooks. It allows Jupyter widgets to remain interactive even when the notebook is converted to static HTML by using Binder servers as the computational backend."

Given your description, nbinteract indeed may be what you seek; however, I don’t have experience with it and so I naturally lean towards Voila.
Plus:

" Currently, nbinteract is in an alpha stage because of its quickly-changing API." - Source.



Panel is related to the dashboarding option I first discussed. Different developers. It also has the similar issues regarding the widgets needing Python backing though, as you can gather from this text:

“If your development environment offers embedded Python processes but does not support ipywidgets or Jupyter “comms” (communication channels), you will notice that some or all interactive functionality is missing. Some widgets that operate only in JavaScript will work fine, but others require communication channels between JavaScript and Python. In such cases you can either request ipywidgets or Panel support from the editor or environment, or else use the Editor + Server approach above.” - Source

2 Likes

There’s also containds dashboards which offers a single point of entry to several different dashboarding solutions.

In the R universe, there appears to be a mechanism for linking R generated htmlwidgets (which I think work in Jupyter classic notebook UI at least) using the crosstalk package. This appears to allow one widget to interact with another, but presumably requires each widget to contain all the state it needs to allow it it react to changes made to linked widgets.

Well first of all thanks for the extended answer in the topic well appreciated.

nbinteract seem like the right direction sins I realy don’t like all the other freemium methods that are either unsably slow and unreliable or slowly pushes you to buy a product / service.

And are you saying that nbinteract doesn’t support python to javascript variable interaction and convertion?
after all if you can’t link a slider to an actual function or operation written in python and just displays the widget it’s quite useless correct me if I’m wrong.

How comes such a smooth transition from jupyter to web HTML doesn’t exist?
like that jupyter is similar to R both having the same friction complications…

More to go along with this discussion:

1 Like

Just wondering

How does Jupyter inject the python output content of lets say

widgets.FloatText()

to HTML from first principles?

What does that function actually output and how is it interpreted by what until in lands in the vanila HTML? Does displaying that widget require any javascript library or modules?

Also what does

display()

Do? what exactly is the “WIDGET MODEL” and “WIDGET VIEW” ?

Yeah so according to this

which is better illustrated with VS code intelesense:

what is that manager state attribute mean anyway?

The code in “this” basically concatinates and embeds the widgets into an HTML template and exports this to a functional export.HTML file which defeats the whole purpose of Jupyter notebooks but that’s a getting started point.

And say I wanted to link and add an interactive matplotly graph to a slider how’d you do that?

and how’d you achive this function of Jupyter notebooks?:

a = widgets.FloatText()
b = widgets.FloatSlider()

display(a,b)

mylink = widgets.jslink((a, 'value'), (b, 'value'))

I guess such example could explain the whole independent HTML hosting and considered a solution.