Jupyter Notebook support

[rodja]

It would be great if NiceGUI could be used in Jupyter notebooks. Pull-request are more than welcome!

[falkoschindler]

Currently it fails because "asyncio.run() cannot be called from a running event loop".

Install and start jupyter:

pip install jupyter
jupyter notebook

Example code:

from nicegui import ui
ui.label('Hello')
ui.run(reload=False)

Output:

---------------------------------------------------------------------------
RuntimeError                              Traceback (most recent call last)
/var/folders/cx/bsyfm6hx3vq3jj0t9rzzn3t40000gn/T/ipykernel_5797/1869946484.py in <cell line: 5>()
      3 ui.label('Hello')
      4 
----> 5 ui.run(reload=False)

~/Projects/nicegui/nicegui/run.py in run(host, port, title, viewport, favicon, dark, binding_refresh_interval, show, native, window_size, fullscreen, reload, uvicorn_logging_level, uvicorn_reload_dirs, uvicorn_reload_includes, uvicorn_reload_excludes, exclude, tailwind, **kwargs)
    124         Multiprocess(config, target=globals.server.run, sockets=[sock]).run()
    125     else:
--> 126         globals.server.run()
    127     if config.uds:
    128         os.remove(config.uds)  # pragma: py-win32

/opt/homebrew/lib/python3.10/site-packages/uvicorn/server.py in run(self, sockets)
     58     def run(self, sockets: Optional[List[socket.socket]] = None) -> None:
     59         self.config.setup_event_loop()
---> 60         return asyncio.run(self.serve(sockets=sockets))
     61 
     62     async def serve(self, sockets: Optional[List[socket.socket]] = None) -> None:

/opt/homebrew/Cellar/[email protected]/3.10.9/Frameworks/Python.framework/Versions/3.10/lib/python3.10/asyncio/runners.py in run(main, debug)
     31     """
     32     if events._get_running_loop() is not None:
---> 33         raise RuntimeError(
     34             "asyncio.run() cannot be called from a running event loop")
     35 

RuntimeError: asyncio.run() cannot be called from a running event loop

[rodja]

Ah that looks like a FastAPI/uvicorn problem. Maybe https://stackoverflow.com/a/74071421/364388 helps?

[falkoschindler]

Great, this works:

from nicegui import ui
import nest_asyncio

ui.label('Hello')

nest_asyncio.apply()
ui.run(reload=False)

However, starting and stopping the app or kernel is a bit weird. Actually I'm not sure what to expect. What would you even use NiceGUI for within a Jupyter notebook?

[gexahedron]

Oh, that's nice that this works!

The request kind of comes from me originally. My motivation was to easily and interactively share variables between UI (preferably in js, not tkinter) and any of the python live-coding environments for music composition. So, we run live-coding environment inside jupyter notebook, and in theory, if NiceGUI would be non-blocking, we could also have a nice UI for graphical user interaction with music parameters.

So the original motivation also would ask for something like this (and this works! which is great, thanks to you everyone <3):

import threading

def get_ioloop():
    import IPython, zmq
    ipython = IPython.get_ipython()
    if ipython and hasattr(ipython, 'kernel'):
        return zmq.eventloop.ioloop.IOLoop.instance()


count = 0
def button_function():
    global count
    count += 1
    print(count)

#The IOloop is shared
ioloop = get_ioloop()


class MyThread(threading.Thread):
    def __init__(self):
        super().__init__()

        self._quit = threading.Event()
        self.start()

    def run(self):
        from nicegui import ui

        def my_click():
            ui.notify('button was pressed')
            button_function()

        ui.label('Hello NiceGUI!')
        ui.button('BUTTON', on_click=my_click)
        ui.run(reload=False)

def run_progress():
    thread = MyThread()
    return thread

t1 = run_progress()

[clueple]

Thanks to this great piece of info.

I was trying to replicate this (tweaked a bit for my case) on Jupyerlab
and I got the error message that says the 'zmq.eventloop' has no attribute 'ioloop'

Checked that such error can be fixed by updating conda. But what if I don't use conda, what package can include that 'ioloop' attribute?

I've included my code and the error message. Basically it's the same as @gexahedron 's code (but removing the count button).

I'm not sure if my understanding is correct (regarding @gexahedron 's approach):

1. He first create the ioloop instance as 'the whole task to be run'
2. Then, embed a class of thread object in that ioloop (in (1))
3. Run the ioloop (in (1))

What I wanna achieve is:
a) view my change to the python script (inside Jupyterlab) realtime in the browser side by side to my code.

It would be great for coding tutorials.

Thanks in advance for any help.

[NickCrews]

@clueple after a little poking around, I got this much simpler version working (running in jupyter in VScode, IDK if that is important, ie if other environments require more massaging with the event loop as @gexahedron did above)

import threading

from nicegui import ui

ui_thread = threading.Thread(target=lambda: ui.run(reload=False)).start()
# NiceGUI ready to go on http://localhost:8080/, and http://192.168.0.55:8080/


count = 0


def my_click():
    ui.notify("button was pressed")
    global count
    count += 1
    print(count)


ui.label("Hello NiceGUI!")
button = ui.button("BUTTON", on_click=my_click)

# now you can do stuff here in jupyter, eg
# button.text = "smile :)"
# and the button will update in the background

[NickCrews]

hmm, this seems to be susceptible to race conditions, if I do

import threading
import time

from nicegui import ui

ui_thread = threading.Thread(target=lambda: ui.run(reload=False)).start()
time.sleep(1)
ui.label("Hello world!")

then I get both NiceGUI ready to go on http://localhost:8080/, and http://192.168.0.55:8080/ but also

RuntimeError: The current slot cannot be determined because the slot stack for this task is empty.
This may happen if you try to create UI from a background task.
To fix this, enter the target slot explicitly using `with container_element:`.

when the label is created

[rodja]

Thats soo cool. Would you like to create a small pull-request which adds this example in https://github.com/zauberzeug/nicegui/tree/main/examples, @gexahedron? That way your contribution would be "official" in the commit history :-)

[NickCrews]

@falkoschindler What would it take so that I could have an experience like solara, where I can see the element right under the code cell? ie not in a separate browser

from nicegui import UI

ui.label("hi")

and then that element was displayed a la a jupyterwidget underneath the cell?

very rough idea of how it could work?

• all elements define a _repr_mimebundle_(self, **kwargs) method. When jupyter sees that, it calls that before trying the default __repr__(self)
• this tells nicegui that we are running in a notebook context. This triggers creating and starting some default runtime in the background.
• [some magic happens, I don't understand the internals of nicegui, and] the element is compiled to some HTML which is handed back to jupyter
• I think we could/need to ignore any @ui.pages. There is only one user.

Probably some architectural things in the way, but I love using the tight feedback loop of a notebook for prototyping components and the data that they depend on/modify.

[falkoschindler]

That's an interesting idea, @NickCrews. I didn't know about _repr_mimebundle_ to define the element representation in Jupyter cells. But I don't have much experience with Jupyter in general, so it's hard to tell how hard it would be to implement - if possible at all. Maybe our pytest fixtures can serve as a starting point for what is needed to get a NiceGUI system up and running without calling ui.run:
https://github.com/zauberzeug/nicegui/blob/b0bc2078fb1e70607879d82ce96e3a488bc41f69/nicegui/testing/conftest.py