1

I'm building a Gradio app.

The server-side processing may take a long time so I'd like to be able to implement a messaging paradigm to update the user-interface based on the processing status.

Something like dynamically setting a Component's value does not work (no error, just no update)

from time import sleep

import gradio as gr
import numpy as np
from gradio.components import Button, Image, Markdown, Textbox


def transform(component):
    def _transform(text):
        for i in range(5):
            component.update(value=str(i))
            sleep(1)
        return np.random.randint(0, 230, (100, 100, 3))

    return _transform


with gr.Blocks() as app:
    inp = Textbox(label="Your message")
    out = Image(label="Your transformed message")
    feedback = Markdown(value="Initial")
    btn = Button("See for yourself!", label="Run")
    btn.click(transform(feedback), inputs=inp, outputs=out)
app.launch()

Here you can see that "Initial" is still there instead of "4".

gradio no update

ted
  • 13,596
  • 9
  • 65
  • 107

1 Answers1

2

You can do this by converting your function into a generator. Basically just change the return keyword to yield. You will also need to enable the .queue().

This code should work:

import gradio as gr
from gradio.components import Markdown, Textbox, Button
from time import sleep


def transform(component):
    for i in range(5):
        yield str(i)
        sleep(3)
    yield f"text -- {i}"


with gr.Blocks() as app:
    inp = Textbox(label="Your message")
    out = Textbox(label="Your transformed message")
    feedback = Markdown("Initial")
    btn = Button("See for yourself!", label="Run")
    btn.click(transform, inputs=inp, outputs=out)

app.queue()
app.launch()
Curious Student
  • 61
  • 4
  • Thanks! The question was an over simplification of my issue and this solution does not solve it directly. I have updated – ted Oct 26 '22 at 21:08
  • The `yield` idea works well if it's the same type, but I'm not sure how to make it work with either 2 components or different data types in the updated question. – ted Oct 26 '22 at 21:13