Blocking function awaiting response from widget

[psychemedia]

Running in a notebook pyhton kernel, is there a pattern for a blocking wait on a response from the widget js?

import threading
from anywidget import AnyWidget
from traitlets import Unicode, observe
from IPython.display import display

class BlockingMessageWidget(AnyWidget):
    message = Unicode('').tag(sync=True)
    reply = Unicode('').tag(sync=True)
    
    def __init__(self):
        super().__init__()

    def sendMessage(self, msg):
        self.reply = ''
        self.message = msg

    def blocking_reply(self, timeout=None):
        # something
        return self.reply
        
    async def await_blocking_reply(self, timeout=None):
        # something
        return self.reply

    _esm = """
    export function render({ model, el }) {
        const processMessage = (msg) => {
            // Simulate some processing
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(`Processed: ${msg}`);
                }, 2000);
            });
        };

        model.on('change:message', async () => {
            const msg = model.get('message');
            if (msg) {
              const reply = await processMessage(msg);
              model.set('reply', reply);
              model.save_changes();
            }
        });

        el.textContent = 'Blocking Message Widget';
    }
    """

and then:

w = BlockingMessageWidget()

display(w)

w.sendMessage("Hello?")

And either:

r = blocking_reply()

or:

r = await await_blocking_reply()

[gereleth]

I was surprised by how tricky this is.

There are libraries like ipython_blocking and jupyter-ui-poll that aim to implement "wait for widget input in python" and they have to get rather hacky about it.

Some relevant discussion and links can be found in this ipywidgets issue: jupyter-widgets/ipywidgets#3039

[psychemedia]

Ah, thanks for that.

The jupyter_ui_poll approach appears to work in a jupyter served browser environment:

# %pip install jupyter_ui_poll

from anywidget import AnyWidget
from traitlets import Unicode, Float
from jupyter_ui_poll import ui_events

import time

class BlockingMessageWidget(AnyWidget):
    message = Unicode('').tag(sync=True)
    reply = Unicode('').tag(sync=True)
    progress = Float(0.0).tag(sync=True)
    
    def __init__(self):
        super().__init__()

    def send_message(self, msg):
        self.reply = ''
        self.progress = 0.0
        self.message = '' # So we state change the message
        self.message = msg

    def blocking_reply(self, timeout=None):
        start_time = time.time()
        with ui_events() as ui_poll:
            while not self.reply:
                ui_poll(10)
                if timeout and time.time() - start_time > timeout:
                    raise TimeoutError("Reply not received within the specified timeout.")
                time.sleep(0.1)
            return self.reply


    _esm = """
    export function render({ model, el }) {
        el.innerHTML = `
            <div>
                <p>Message: <span id="message"></span></p>
                <p>Reply: <span id="reply"></span></p>
                <progress id="progress" value="0" max="100"></progress>
            </div>
        `;

        const messageEl = el.querySelector('#message');
        const replyEl = el.querySelector('#reply');
        const progressEl = el.querySelector('#progress');

        const processMessage = (msg) => {
            return new Promise(resolve => {
                let progress = 0;
                const interval = setInterval(() => {
                    progress += 10;
                    model.set('progress', progress / 100);
                    model.save_changes();
                    if (progress >= 100) {
                        clearInterval(interval);
                        resolve(`Processed: ${msg}`);
                    }
                }, 200);
            });
        };

        model.on('change:message', async () => {
            const msg = model.get('message');
            if (msg) {
                messageEl.textContent = msg;
                replyEl.textContent = 'Processing...';
                const reply = await processMessage(msg);
                model.set('reply', reply);
                model.save_changes();
            }
        });

        model.on('change:reply', () => {
            replyEl.textContent = model.get('reply');
        });

        model.on('change:progress', () => {
            progressEl.value = model.get('progress') * 100;
        });
    }
    """

widget = BlockingMessageWidget()
display(widget)

Then:

widget.send_message("Are we there yet???")
reply = widget.blocking_reply(timeout=10)
print(f"Received reply: {reply}")

I haven't tried it in a JupyterLite or VSCode environment though, so I'm not sure how well the usage scales across other deployments.

[psychemedia]

I note that there is now JavaScript Promise Integration in Pyodide, with a from pyodide.ffi import run_sync function that allows Python to generate a blocking function that awaits an async py function response.

from pyodide.ffi import run_sync
from js import fetch

async def async_http_request(url):
    resp = await fetch(url)
    return await resp.text()

def make_http_request(url):
    # make_http_request is a synchronous function that will block until
    # async_http_request() completes
    return run_sync(async_http_request(url))

# Use make_http_request in a non-async function 🎉
def do_something_with_request(url):
    result = make_http_request(url)
    do_something_with(result)

So.. does that help?