Render decorator 2

[aliabid94]

Round 2 with the render decorator! See demo/render_split, and demo/render_merge for examples. Will support event listeners involving rendered elements in next PR.

demo/blocks_split

Demonstrates the ability to render elements dynamically based on logic:

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
    def show_split(text, mode):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                if mode == "textbox":
                    gr.Textbox(letter)
                else:
                    gr.Button(letter, mode)

demo.launch()

demo/blocks_merge

Demonstrates the ability to render input elements dynamically while preserving values using key= arg:

import gradio as gr

with gr.Blocks() as demo:
    text_count = gr.Slider(1, 10, step=1, label="Textbox Count")

    @gr.render(inputs=[text_count], triggers=[text_count.change])
    def render_count(count):
        for i in range(count):
            gr.Textbox(key=i)

    gr.Button("Merge")

demo.launch()

[abidlabs]

@aliabid94 very cool PR! I'm testing this out and will let you know about any issues I find.

One issue I noticed so far is that if I have two Blocks defined in the same Python session, this does not work. I originally noticed this in the context of running multiple demos in different cells in a jupyter notebook, but you can reproduce with this example:

import gradio as gr

with gr.Blocks() as demo:
    pass


with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
    def show_split(text, mode):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                if mode == "textbox":
                    gr.Textbox(letter)
                else:
                    gr.Button(letter, mode)

demo.launch()

If I remove the first Blocks, it works fine, with the first Blocks, I get infinite loading after submitting the textbox:

[abidlabs]

I noticed that you got rid of the behavior where if a triggers was not provided, then any .change() of the inputs automatically triggered the render function. I thought that was a handy shortcut, was there a reason you got rid of that?

[abidlabs]

Otherwise working quite well in my tests @aliabid94! So the plan is to publicize / document this after the next PR is in?

[hannahblair]

We could use these types from js/app/src/types.ts

Suggested change

	data: {
	components: any[];
	layout: any;
	};
	data: {
	components: ComponentMeta[];
	layout: LayoutNode;
	};

[aliabid94]

I don't think we can import from js/app into client, because that would be a circular dependency given we import client into js/app? At least that's why I've assumed that we redefined Dependency and Config in both js/app/src/types.ts and client/js/src/types.ts. We also marked Config.components as an any type in client/js/src/types.ts instead of using ComponentMeta.
Agree that these definitions should all be merged at some point.

[pngwn]

Just one small comment, but otherwise looks good! Thanks @aliabid94!

[freddyaboulton]

Very clever PR @aliabid94 ! I tested some demos and its working well. I have two comments based on my tests:

1. Be able to replace the contents of an existing context. Right now, the output of render is always appended to the current context where it's defined but I think it will be useful to be able to replace the contents of the context completely. For example, I wanted to modify the render_split demo to add a placeholder Markdown component explaining what would happen. I can't get the render to replace that placeholder text.

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    with gr.Tabs():
        with gr.Tab("Tab 1"):
            gr.Markdown("# Input some text in the textbox and see the text split into individual components")
            @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
            def show_split(text, mode):
                if len(text) == 0:
                    return
                else:
                    for letter in text:
                        if mode == "textbox":
                            gr.Textbox(letter)
                        else:
                            gr.Button(letter)

if __name__ == "__main__":
    demo.launch()

3. You can't update a component and render. I can imagine use cases where you would want to render some new components and update existing ones. I can't get that to work. render has no outputs parameter so I tried defining a separate event trigger with the same trigger as the render. But the render will not be reflected in the UI in that case.

For the first point, maybe we can add a parameter to render to control that behavior? For the second point, I think it's fine if render has no outputs parameter and it's only for declaring UI. But we should respect both the render and any additional triggers.

EDIT: Made a mistake in my first comment

[aliabid94]

One issue I noticed so far is that if I have two Blocks defined in the same Python session, this does not work

Fixed

I noticed that you got rid of the behavior where if a triggers was not provided, then any .change() of the inputs automatically triggered the render function. I thought that was a handy shortcut, was there a reason you got rid of that?

Sure I can add this support in another PR, I'm going to add all convenient shorthands in another PR.

Be able to replace the contents of an existing context...
You can't update a component and render...

Both of could be handled by putting the "existing context" inside the render block, right? Will add support for allowing render context to be run on load (e.g. triggers=[demo.load, btn.click...]), so your code block code be written as:

            @gr.render(inputs=[input_text, mode], triggers=[demo.load, input_text.submit])
            def show_split(text, mode):
                if len(text) == 0:
                    gr.Markdown("# Input some text in the textbox and see the text split into individual components")
                else:
                    for letter in text:
                        if mode == "textbox":
                            gr.Textbox(letter)
                        else:
                            gr.Button(letter)

If you really want to update other components outside the render context, just create a separate event listener. I think combining these into one API function is kinda messy.

[freddyaboulton]

If you really want to update other components outside the render context, just create a separate event listener. I think combining these into one API function is kinda messy.

Yea agreed. I tried that yesterday and it didn't work though. I had a separate textbox.submit event defined outside the render and the render did not run.

[aliabid94]

@freddyaboulton can you provide a repro? This works for me:

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    with gr.Tabs():
        with gr.Tab("Tab 1"):
            md = gr.Markdown("# Input some text in the textbox and see the text split into individual components")
            @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
            def show_split(text, mode):
                if len(text) == 0:
                    return
                else:
                    for letter in text:
                        if mode == "textbox":
                            gr.Textbox(letter)
                        else:
                            gr.Button(letter)

        input_text.submit(lambda: gr.Markdown(visible=False), None, md)

demo.launch()

[freddyaboulton]

LGTM @aliabid94 !!

[jameszhou02]

Reproduced myself (it's working). Just wanted to say this stuff is amazing and so, so timely :)

Will this go in the next major release and if so, what's the timeline for when that will be released? Would be happy to write docs etc. if that will speed it up.

[abidlabs]

Very cool!! Everything looks good on my side

[abidlabs]

Will this go in the next major release and if so, what's the timeline for when that will be released? Would be happy to write docs etc. if that will speed it up.

Thanks @jameszhou02! This is actually the first of a two-part PR, we are planning on adding this to the docs after the second PR is in.

In the meantime, if you'd like to use it, you can install directly from this PR:

pip install https://gradio-builds.s3.amazonaws.com/f9f8adbb2146a3642c793743490dbba29f45baea/gradio-4.29.0-py3-none-any.whl

[jameszhou02]

This code raises errors for me. It prevents rendering entirely. Wrapping a block around it doesn't seem to change anything.

import gradio as gr

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="input")
    mode = gr.Radio(["textbox", "button"], value="textbox")

    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
    def show_split(text, mode):
        if len(text) == 0:
            gr.Markdown("## No Input Provided")
        else:
            for letter in text:
                if mode == "textbox":
                    gr.Textbox(letter)
                else:
                    btn = gr.Button(letter, mode)
                    btn.click(lambda: print(letter), inputs=[], outputs=[])

demo.launch()

AttributeError: Cannot call click outside of a gradio.Blocks context.

[aliabid94]

This code raises errors for me. It prevents rendering entirely. Wrapping a block around it doesn't seem to change anything

Support for adding event listeners inside render contexts is coming up in a follow up PR!