4

I have a Jupyter notebook with the following cell:

from ipywidgets import widgets, interact
slider = widgets.IntSlider()
def print_val(v):
  print(v)
interact(print_val,v=slider)

This works fine in the notebook - when I change the slider the printed output changes. But when I use nbconvert to convert the notebook into HTML, the slider still renders fine in the output HTML, but has no effect on the printed output.
Any idea how to get this to work? Maybe ipywidgets is not the right library for this kind of stuff?
Thanks!

soungalo
  • 1,106
  • 2
  • 19
  • 34
  • A lot of the interaction won't work without an active kernel running the Python side where your code is specifying interaction. The information box [here](https://jupyterbook.org/en/stable/interactive/interactive.html#ipywidgets) is pretty good about giving you a sense of the issue. One option that doesn't require an active kernel on a remote server, yet allows you to share your notebooks in an active way is JupyterLite. JupyterLite runs a pyolite kernel inside the browser of the viewing computer. [Try it here](https://jupyterlite.readthedocs.io/en/latest/). Inside `pyolite` directory is ... – Wayne Jun 12 '22 at 17:30
  • ... examples and one is named `interactive-widgets.ipynb`. It's 'ipywidgets Interactive Demo'. You can sever your content yourself from a GitHub repo using Github pages since it can be static content being served. The active nature comes from the browser it is being viewed in via web assembly. – Wayne Jun 12 '22 at 17:32
  • A discussion on the issue you are facing is [here](https://community.plotly.com/t/export-plotly-and-ipywidgets-as-an-html-file/18579/10) and some of the options, many of which have already been suggested here, are mentioned. It may help to have things stated differently though and so I linked to it. – Wayne Jun 12 '22 at 17:40

2 Answers2

7

I think you miss what nbconvert does. This utility is needed for converting notebooks to other formats, such as PDF, LATEX, etc. It is used for sharing and presentation. One loses the interactivity option once the notebook is converted.

The interactivity of the Jupyter notebook is provided by the Jupyter server that is started when you invoke jupyter notebook from command line.

So when you save notebook as a web page or convert it to HTML, you don't have the server back end part that processes all the changes. It is a static web page. Because the slider is a standard element it is rendered correctly, but nothing happens when you slide it: there is nothing "attached" to it to handle the events.

At the end, in order to be able to interact with Jupyter notebook, you need the some kind of Jupyter server to be running. It can be a local server if you need it only for yourself, or you can use Google Colab (or Jupyter Hub) if you want to collaborate with others.

Also, there are several solutions that allow one to have some interactivity on the graphs, like Bokeh and Plotly. They also require you to run some kind of server.

Of course, all that is relevant only if you need Python to process your data. If your needs are simple as showing the slider value you better off with a simple Javascript, that can handle the slider changes right in the browser, without the need to run any server at the back end.

igrinis
  • 12,398
  • 20
  • 45
  • 1
    Thanks for the answer. I'm completely aware of the difference between an interactive notebook and a static HTML page. My goal is to create an interactive graphical report (I use plotly - works great) that can be handed out to people, who can explore the report without the need to run a jupyter server. It looks like this is just not the best way to go about it. – soungalo Aug 25 '20 at 18:37
  • If you are already using `plotly`, you may try to run following on your figure:`plotly.offline.plot(my_fig, filename=’my_example.html’)`. You might get what you look for, if the figure is not too complicated. Plotly is built around Javascript, so it will take care of most of the plumbing. – igrinis Aug 26 '20 at 07:44
  • See more info [here](https://plotly.com/python/sliders/) – igrinis Aug 26 '20 at 07:52
0

An interesting option, although not a direct solution: voila.

soungalo
  • 1,106
  • 2
  • 19
  • 34
  • And you can use Voila via MyBinder.org to serve app versions / dashboard versions of your notebooks without the code showing. Why the connection is active in the ones served via MyBinder.org, they'll work. They can time out after more than 10 minutes of inactivity. You can try some examples from the first sections (about eight `launch binder` buttons) [here](https://github.com/fomightez/communication_voila). – Wayne Jun 12 '22 at 17:21