Progress example is slow during reload in browser because of Manager().Queue(). How to speed up?

[luciferz2021]

Question

I run the progress example in windows and it takes about 5 seconds to reload in browser.

I tried to simplify the code to speed up and found that Manager().Queue() made the code slow.

I replaced it with FastApi for a faster reload as below. Is there a better way to speed up?

#!/usr/bin/env python3
import time

from httpx import Client
from nicegui import app, run, ui

progress_dict = {}
progress_time_dict = {}
progress_clear_time = 0.0


@app.put("/api/progress/{key}/{value}")
def _put_progress(key: str, value: float):
    progress_dict[key] = value
    t = time.time()
    progress_time_dict[key] = t
    clear_timeout_progress(t - 60)
    return t


def put_progress(key: str, value: float, client: Client):
    client.put(f"http://localhost:8080/api/progress/{key}/{value}")


def clear_timeout_progress(time: float, interval=60):
    global progress_clear_time
    if time < progress_clear_time:
        return
    progress_clear_time = time + interval
    to_del = [k for k, v in progress_time_dict.items() if v < time]
    for k in to_del:
        print("del", k)
        del progress_time_dict[k]
        del progress_dict[k]


def heavy_computation(key: str) -> str:
    """Run some heavy computation that updates the progress bar through the queue."""
    n = 50

    with Client() as client:
        for i in range(n):
            # Perform some heavy computation
            time.sleep(0.1)

            # Update the progress bar through the queue
            # q.put_nowait(i / n)
            put_progress(key, i / n, client)
    return "Done!"


@ui.page("/")
def main_page():
    async def start_computation():
        progressbar.visible = True
        result = await run.cpu_bound(heavy_computation, key)
        ui.notify(result)
        progressbar.visible = False

    # Create a queue to communicate with the heavy computation process
    # queue = Manager().Queue()
    key = str(time.time())

    # Update the progress bar on the main process
    ui.timer(
        0.1,
        callback=lambda: progressbar.set_value(
            progress_dict.get(key, progressbar.value)
        ),
    )

    # Create the UI
    ui.button("compute", on_click=start_computation)
    progressbar = ui.linear_progress(value=0).props("instant-feedback")
    progressbar.visible = False


ui.run()

[rodja]

What do you mean with "I run the progress example in windows and it takes about 5 seconds to reload in browser."? Is your auto-reload taking too long?

Using http for inter-process communication instead of a Queue is certainly possible -- but a bit ugly because you publicly expose an internal API. I would rather like to understand why the Queue is not working for you. This is standard Python and should work.

[luciferz2021]

UI loading (including auto-reload during development) takes 5 seconds. For normal users, it's strange why a simple webpage takes such a long time to load.

[rodja]

I still not understand what exactly is slow. There are two options:

1. server startup: the time until you see "NiceGUI ready to go on" on the console, or
2. page loading: the time until the page appears in the browser after you entered the address or hit reload in the browser

And what is your operating system, browser etc? Can anyone else reproduce this?

[luciferz2021]

windows 10 + chrome 124

I test it with chrome DevTools as shown below:

[falkoschindler]

@luciferz2021 Does the problem also occur when running with ui.run(reload=False)?

[luciferz2021]

Yes, it occurs when running with ui.run(reload=False)

[falkoschindler]

Can anyone else reproduce the problem? Maybe it's Windows-related?