Export to html doesn't work

[srdecny]

Hello,

this projects looks really nice and is useful to us. However, we're able to see the widget only when the notebook is opened inside VSCode/jupyter server. When we attempt to convert the notebook to html via jupyter nbconvert --to html, we get something like this:

Basically, instead of the widget, there's some "SpectrogramPlayer(...)" truncated string. I believe this is the textual representation of the Python class providing the widget. It would be nice we we were able to export the notebook to html.

Nevertheless, thanks for the widget!

[srdecny]

oh, and versions:

IPython          : 8.16.1
ipykernel        : 6.25.2
ipywidgets       : 8.0.2
jupyter_client   : 8.4.0
jupyter_core     : 5.4.0
jupyter_server   : 2.9.1
jupyterlab       : 4.0.7
nbclient         : 0.8.0
nbconvert        : 7.9.2
nbformat         : 5.9.2
notebook         : 7.0.6
qtconsole        : not installed
traitlets        : 5.11.2

speechwidgets                 1.0.1

[nicolvisser]

Hey!

Thanks for the feedback.

This toy project is not really under active development and should probably be in an archived state. However, I played around with it and managed to get the HTML export working.

In Jupyter, ensure that Settings > Save Widget State Automatically is checked. See the image below for reference:

Then, when exporting to HTML, I used the following command:

jupyter nbconvert --to html --EmbedWidgetsPreprocessor.embed_widgets=True test.ipynb

The widget then rendered properly when I opened the HTML file in Chrome:

Please let me know if you are able to get it to work or if you find any other issues.

[nicolvisser]

@srdecny Did you manage to get it working?

[janvainer]

Hi I tried to od the export but I am getting the following error (After I install jupyter_nbextensions)

python3.10/site-packages/jupyter_nbextensions_configurator/__init__.py", line 18, in <module>
    from notebook.base.handlers import APIHandler, IPythonHandler
ModuleNotFoundError: No module named 'notebook.base'

[nicolvisser]

Hey @janvainer

I've attempted to replicate the issue you're experiencing without success. Here's the detailed process I followed to mimic your environment:

1. Based on the package versions listed by @srdecny , I created a requirements.txt file in a new directory:

   IPython==8.16.1
   ipykernel==6.25.2
   ipywidgets==8.0.2
   jupyter_client==8.4.0
   jupyter_core==5.4.0
   jupyter_server==2.9.1
   jupyterlab==4.0.7
   nbclient==0.8.0
   nbconvert==7.9.2
   nbformat==5.9.2
   notebook==7.0.6
   traitlets==5.11.2
   speechwidgets==1.0.1

2. I created and activated a new virtual environment, then installed the required packages:

   python -m venv env

   source ./env/bin/activate

   pip install -r requirements.txt

3. I initiated a Jupyter server using the command:

   jupyter notebook

4. I created a new notebook named test.ipynb.

5. In the first cell, I inserted the code snippet provided by @srdecny:

   from speechwidgets import SpectrogramPlayer
   word_intervals = [['0.54', '0.84', 'this'],
       ['0.84', '1.1', 'little'],
       ['1.1', '1.4', 'work']]
   s = SpectrogramPlayer(
   wav_file_path="/Users/nicolvisser/Datasets/LibriSpeech/dev-clean/652/130726/652-130726-0000.flac",
   win_length=400,
   hop_length=160,
   f_min=50,
   n_mels=80,
   power=1.0
   )
   #s.annotate(data=word_intervals, title="Word Intervals")
   import IPython.display as ipd
   ipd.display(s)

6. After running the cell, which took some time to import initially, I proceeded with the following steps.

7. I ensured that the Settings > Save Widget State Automatically was checked.

   

8. I manually saved the notebook via File > Save Notebook.

9. I terminated the Jupyter server by pressing Ctrl+C in the terminal.

10. I converted the notebook to an HTML file with embedded widgets using the command:

jupyter nbconvert --to html --EmbedWidgetsPreprocessor.embed_widgets=True test.ipynb

11. Upon opening the generated test.html file in Google Chrome, the result appeared as follows:

Unfortunately, I was unable to reproduce the error following these steps.

The error you get indicates that Python is unable to find the module named 'notebook.base', which should be a part of the Jupyter notebook package.

It might be worth checking your Jupyter notebook installation.

I really hope you can get this working. I'm curious to see what you are working on and am eager to assist. If you could provide any additional details or specific circumstances under which the error occurs, it would be very helpful.

[nicolvisser]

test.html.zip

See if you can download and open this file. This is the exported HTML