Mesop doesn't support concurrent UI event handling

[luaygharz]

Describe the bug Mesop doesn't support Async, despite being a UI framework. The UI blocks when performing time consuming tasks e.g. streaming LLM tokens to the UI.

To Reproduce Execute any time consuming task and the UI will become unresponsive.

Expected behavior For Mesop to support the Async paradigm.

Desktop System Info

• OS: Fedora Linux
• Browser: Brave
• Version: [Version 1.67.123 Chromium: 126.0.6478.126 (Official Build) (64-bit)

[wwwillchen]

See this guide https://google.github.io/mesop/guides/interactivity/#streaming on how to do a streaming UI - let me know if you're still running into an issue.

[richard-to]

I think even with streaming (which does help the issue), there is still an issue with how the events are synchronously ordered. So if I click a button and it goes into a long running operation, any subsequent events will get queued until the long running operation has completed.

[lianggecm]

With regard to this, is it possible to have an external process programmatically send an event to the frontend? I'm using a task manager to run some long-running tasks and would like to have the task manager to be able to tell the frontend when the task ends.

[richard-to]

I don't think it's currently possible in the core framework since we don't have web socket support or any APIs for this functionality.

However, I do think you could create a web component to set up a web socket connection (or you could just do polling with timeout).

This web component would then hit a non-mesop server that could talk your external process. If using a web socket, it would listen for events from the server. Or if polling, you could just ask the non-mesop server if there's any data every X interval.

Once your custom web component receives a response it can send an event to the Mesop Server and then the Mesop server can trigger state and UI updates based on the new info received.

Haven't tried this out myself, but I think it should work.

[malmaud]

@wwwillchen +1ing this request. The 'yield' paradigm solves the issue of streaming in results to the UI from a slow-running event handler but does nothing IIUC to help with running multiple IO-bound event handlers in parallel. The async system was exactly created with use cases like this in mind.

Some use cases:

• Have two buttons in your UI to generate responses from two different models, which could run in parallel.
• Be able to click a click a button multiple times to draw multiple samples from a model in parallel.
• Have a button to cancel an LLM model call, which could be implemented by the 'cancel' event handler setting some sentinel that the model generator event handler detects between yield statements if its streaming in the model response.

[wwwillchen]

Thanks @malmaud with bringing up those use cases.

I'm going to investigate how we can support async await with Mesop.

I want to see whether it's possible to support async-await in Flask (it should be possible based on https://flask.palletsprojects.com/en/3.0.x/async-await/) or whether Mesop needs to migrate to an async-first framework like Quart or Starlette