What is the easiest way to create a webapp from an interactive Jupyter Notebook?

Question

I have a Jupyter Notebook that plots some data and lets the user interact with it via a slider.

What would be the easiest way to make a web app with a similar functionality? (reusing as much of the code...)

Answer 1

I believe the easiest way is to use voilà.

After installing you just have to run:

voila <path-to-notebook> <options>

And you will have a server running your notebook as a web app, with all the input code omitted.

Answer 2

AppMode is "A Jupyter extension that turns notebooks into web applications".

From the README:

Appmode consist of a server-side and a notebook extension for Jupyter. Together these two extensions provide the following features:

• One can view any notebook in appmode by clicking on the Appmode button in the toolbar. Alternatively one can change the url from baseurl/notebooks/foo.ipynb to baseurl/apps/foo.ipynb. This also allows for direct links into appmode.

• When a notebook is opened in appmode, all code cells are automatically executed. In order to present a clean UI, all code cells are hidden and the markdown cells are read-only.

• A notebook can be opened multiple times in appmode without interference. This is achieved by creating temporary copies of the notebook for each active appmode view. Each appmode view has its dedicated ipython kernel. When an appmode page is closed the kernel is shutdown and the temporary copy gets removed.

• To allow for passing information between notebooks via url parameters, the current url is injected into the variable jupyter_notebook_url.

Answer 3

To be complete - there exists also https://www.streamlit.io/ .

I still dont understand the exact difference between voila and streamlit. At the moment I just struggle with the possibility to re-run everything with new parameters... I have bad luck with voila still.

Edit: I see that streamlit requires a raw python, not .ipynb, this fact would mean that this answer is completely wrong, I will search a bit more on streamlit before further action/comment.

Edit2: Voila looks great. However, I found few things that uncover the underlying complexity and thus a troubles that may arise.

• callbacks. Widgets work great in jupyter, but since it is not possible to re-run one cell, sometimes the logic must be modified to work in Voila.
• interactive java objects need a special treatment, e.g. matplotlib has a cheap solution, but there was nothing for e.g. jsroot
• links. It is easy to create (a file and) a download link in jupyter, Voila can also serve a file, but it needs another extra treatment.

After all, I pose myself a question - is it better to learn many tricks and modifications to jupyter or to use some other system? I am going to see if streamlit can give em some answer.

Answer 4

The Jupyter Dashboards Bundlers extension from the Jupyter Incubator is one way to do it while retaining interactivity.

EDIT: While pip installing this package will also install the cms package dependency, like dashboard_bundlers, cms needs to be explicitly enabled/quick-setup as a notebook extension for the dashboard tools to work.

Answer 5

@raphaelts has the right idea and should be the accepted answer. As of Dec 2019, Voila is the most appropriate method to deploy Jupyter notebooks to production as a stand alone webapp. Think internal datascience teams sharing their analytics workload with internal C-Suite teams using SPA stlye Notebooks with all the code hidden and custom GUI/interactions thrown in. Recently discussed on HN https://news.ycombinator.com/item?id=20160634 and the official announcement from the Jupyter maintainer https://blog.jupyter.org/and-voil%C3%A0-f6a2c08a4a93enter link description here

Answer 6

The easiest way is to use the Mercury framework. You can reuse all your code. To convert the notebook to web app you will need to add the YAML header in the first cell of the notebook (very similar to R Markdown). The widgets are generated based on YAML. The end-user can tweak widgets values and click the Run button to execute the notebook from the top to the bottom. You can easily hide the notebook's code (if you want) by setting the show-code: False in the YAML. The example notebook and corresponding web app are below.

Example of the notebook with YAML header

Example web app generated from notebook with Mercury

Answer 7

As mentioned above, voilà is a very powerful tool which hides the input cells from your notebooks and therefore provides a clean interface. In order to deploy your notebook with voilà you need to follow the specific steps of your organization. But if you want to quickly run it on your machine, simply install it with pip install voila. Then you can enter start from the command-line: voila my_notebook.ipynb or use the "Voila" button which should have appeared in your Jupyter notebook.

Note, however, that using voilà is only one part of the story. You also need to build the required interactivity, ie. to set up how to respond to input changes. There are quite a few frameworks for this.

• The simplest one is to use the interact function or the observe method from the Ipywidgets library. This is very direct, but things can easily get out of control as you start having more and more widgets and complexity.

• There are complete frameworks, some of them mentioned above. E.g. streamlit, dash and holoviz. These are very powerful and suited for larger projects.

• But if you want to keep it simple, I also recommend to check out autocalc. It is a very easy-to-use library, which lets you define the dependencies between your widgets/variables and let all the recalculation be triggered automatically. A tutorial can be found here.

Disclaimer: I am the author of the autocalc package.