Project showcase: Convert Jupyter notebooks to interactive dashboards with Voici/WASM

Widgets
1

Hey Jupyter community! I’ve been working on a tool that lets you easily convert Jupyter notebooks into interactive dashboards, and I’d love to get your feedback.

https://nb2dash.ploomberapp.io

You can see a sample dashboard here: https://nb2dash.ploomberapp.io/notebook/c928b71b

What it does

  • Upload your Jupyter notebook (.ipynb file)

  • Get back a link to an interactive dashboard version of your notebook

Tech stack

  • Flask for the web app (receive uploads and process notebook)

  • NGINX for rendering processed notebooks

  • Voici for converting notebooks into standalone WASM pages

  • Redis and rq for task queueing

I’d really appreciate it if you could try it out and let me know what you think. Any feedback, feature requests, or bug reports are welcome!

(Note: This is a side project, so please be patient if there are any hiccups. I’m actively working on improvements!)

3 Likes
2

I have installed the package in my jupyter notebook but interactive dashboard shows module not found error.

jup
jup1453×795 90.1 KB

how should I deal with it?

3

I’m a bit confused, your post seems unrelated to mine. Are you using my tool to convert your notebook into a dashboard?

4

I am facing the issue after I submitted my .ipynb file for the interactive dashboard.Yes I am using your tool to convert notebook into dashboard.

5

But your line #3 refers to a local file in your machine’s file storage system. That type of thing won’t work was Voici/WASM.

6

as @fomightez mentioned, your notebook has a reference to a local file, that’ll break the conversion.

Also, it seems like your notebook is trying to run .system() which isn’t available in the WASM environment.

7

But there is a valid point in there. import cv2 as a single cell in a notebook causes your conversion tool to fail though with ModuleNotFoundError: No module named 'cv2'. I think “If missing, packages will be inferred from the notebook’s content”, may be misleading.

Furthermore, if I add opencv-python to requirements.txt and upload that along with the notebook with just that cell, then it still fails it seems with 404 error. opencv-python is in pyodide and so I don’t see why that would not work. … Oh wait, that may not be unusual…

Maybe more indicative of deeper problems, and explaining above, I submit the following…

If I take your test notebook code & the requirements.txt file and upload those myself to your tool, that doesn’t work. It just links to 404 Not Found. That code came from here

Example URL of one of my attempts at that:

https://nb2dash.ploomberapp.io/notebook/0848d835/lab/index.html

I do note that doesn’t look like the voici render URL your example uses, which is:

https://nb2dash.ploomberapp.io/notebook/bb8086c0/voici/render/notebook.html

Note the voici/render/ vs what you link gives of /lab? Not the same pattern.

I probably should also mention to help you in maybe troubleshooting:
If I left out the requirements.txt for your demo notebook and just uploaded it. It works to launch a voici render. And the link provided by the tool matches the pattern of your demo, too.

Demo URL result from not including requirements.txt.

https://nb2dash.ploomberapp.io/notebook/bb500a66/voici/render/notebook.html

Of course, without the requirements.txt though, it errors out when it does try to run.

Wait, I think you give the first part and it adds later part:

https://nb2dash.ploomberapp.io/notebook/269fe9e4

forwards to https://nb2dash.ploomberapp.io/notebook/269fe9e4/voici/render/notebook.html

So I don’t get why including a requirements.txt changes that forwarding for your provided demo example when I try it? And changing the URL doesn’t help if I do it by hand when I included a requirements.txt.

8

thanks a lot for the detailed feedback! let me dive into this and figure out what’s going on. This is my first time using Voici so I did a lot of stuff by trial and error, I probably overlooked something.

I’ll post an update!

1 Like
9

https://nb2dash.ploomberapp.io/notebook/69e2004a this is my link for the .ipynb file submitted.This used to work with binder the same code I tried.

10

MyBinder uses a typical full Python kernel running on a temporary remote machine. Voila is the dashboard associated with notebooks in a typical remote server situation. (The Voila Gallery examples use MyBinder with typical Python kernels running on temporary remote machines.)

Here Voici is involved. It is using Pyodide that runs deep in your browser on your local machine using Web Assembly. There is no remote machine running the kernel. At this time a Pyodide-based kernel has a lot of differences with how things work and/or limits of what is possible. (Oh wait, you’ve been using Pyscript, and so you are probably definitely aware of some of that.) So the more proper comparison is if your notebook ran in JupyterLite. And even then Voici has some rough edges on its own as the project is still firmly in development mode. And therefore the even better way to make a comparison would be if you knew your notebook worked if you deployed Voici with your notebook to be served via GitHub pages or some other static serving site.

Summary: Just because something works well in a MyBinder session, doesn’t mean it will work with Voici.

11

Thank you for such detailed description.Just another doubt in this case how to install packages? Pyscript installs packages using .toml file.

12

For Voici, you can pre-install packages as described here using enivronment.yml.
The tool here seems to use requirements.txt. I don’t know how that is implemented.

For Voici, at one time you could, I believe you can also run %pip install matplotlib -q in the notebook but maybe that doesn’t work now with the emphasis on the xeus kernel and using environment.yml. I haven’t tested recently to know the status of support for in notebook installs of late.

Aside…
In case others find this note about pyscript:

That is one way pyscript installs packages. You can also use a json file. Or in a single HTML file, you can use the <py-config> tag, see here. Example here. (Demo pyscript here for that code.)

13

I got a change to investigate these issues. most of them are voici errors. I’ll see if I can find some time this weekened to show more meaningful errors to users and make it more robust by using the pyodide kernel.

notebook with import cv2 and no requirements.txt failure

I’m using pipreqs to infer dependencies. Sadly, it has some issues when the imported package doesnt match the pip install command, I saw this in the logs:


WARNING:root:Import named "cv2" not found locally. Trying to resolve it at the PyPI server.

WARNING:root:Package "cv2" does not exist or network problems

notebook with import cv2 and requirements.txt with opencv-python failure

Voici uses the jupyterlite-xeus kernel by default and it fails when trying to install opencv-python. Since Pyodide includes opencv-python, it could work. I spent some time trying to get voici to work with the Pyodide kernel but encountered errors, I’ll try again later.

The previous version of nb2dash was throwing a 404 because I wasn’t capturing voici errors, hence, even though the conversion failed, the app was redirecting the user as if it had been successful. I’ve now fixed it to show an error message if the voici command fails.

sample notebook with requirements.txt failure

Trying to convert notebook with this requirements file breaks voici, because it attempts to install voila. These are the requirements I used to successfully convert it:

numpy>=1.21.6,<1.28.0
scipy
ipywidgets
bqplot

redirection to lab/index.html vs voici/render/notebook.html

I was unable to reproduce this, I’d appreciate if you can share instructions on how to create a notebook that ends up redirecting to lab/index.html

1 Like
14

I suspect the steps are outlined right after I write, “I submit the following…” in my long post about the issues. I detail what I was using from your repo there.

I’d like to try it again so I could write it out more, but now when I use your test notebook and any requirements.txt, I just get ‘An error occurred during upload.’

I tried in incognito mode then with the same input, and got ‘Error: An error occurred while processing your notebook.’