How to dynamically update the widget?

šŸ”’ Gradio
1

Iā€™m new to gradio and working on a project.

My requirement is as following.

  1. I have a dropdown. It has option A, B and C
  2. Just below this dropdown I have created an accordion Advanced Controls and it has some controls.
    Based on selected value of option from dropdown these controls will change. But how do I achieve this?

Iā€™m trying to do something like this:

 model_dropdown = gr.Dropdown(
                    choices=list(...),
                    label="Label",
                    show_label=True,
                    interactive=True,
                )

# advanced_control_inputs = None

with gr.Accordion(
    label="Advanced Controls", open=False, visible=True
) as advanced_control_accordion:
    with gr.Row():
        advanced_control_inputs = stable_diffusion_input_ui()

def update_dropdown(dropdown_value):
    if dropdown_value is not None:
        # Update the advanced controls based on the selected value
        if dropdown_value == "Option_A":
            advanced_control_inputs = UI_option_A()
        else:
            advanced_control_inputs = UI_option_B()

        # advanced_control_accordion.update(advanced_control_inputs)

        gr.Info(f"Updated the Advanced Controls UI!")                                

        return [
            gr.Dropdown.update(
                choices=list(
                    ...
                ),
                label="Label",
                show_label=True,
                interactive=True,
            ),
            *advanced_control_inputs
        ]


dropdown.change(
    fn=update_dropdown,
    inputs=dropdown,
    outputs=[dropdown, *advanced_control_inputs],
)

UI_option_A look something like:

def ui_option_A():
    text = gr.Textbox(label="Negative Prompt", show_label=True)

    with gr.Column():
        height = gr.Slider(
            minimum=64,
            maximum=1024,
            step=1,
            value=512,
            label="Height",
            show_label=True,
        )
    with gr.Column():
        width = gr.Slider(
            minimum=64,
            maximum=1024,
            step=1,
            value=512,
            label="Width",
            show_label=True,
        )
    return [text, height, width]
2

Thank you for sharing.

3

Did you finally made it work?