Spaces:
Running
Running
| # Examples of Gradio demos that showcase server round trips when updating component properties | |
| import gradio as gr | |
| import time | |
| import numpy as np | |
| import matplotlib.pyplot as plt | |
| from PIL import Image | |
| import random | |
| # Example 1: Interface Transformation - Components change their properties with each click | |
| def create_transformation_demo(): | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# UI Transformation Demo") | |
| gr.Markdown("Each button click transform the interface and use to cause server round trips (SLOW Updates)") | |
| # Initial components | |
| text_box = gr.Textbox(placeholder="I will change shape and size...", label="Morphing Textbox", lines=2) | |
| with gr.Row(visible=True) as row1: | |
| image1 = gr.Image(value=None, label="Appearing Image", scale=4) | |
| text_output = gr.Textbox(value="I'll move around", label="Moving Textbox", scale=6) | |
| with gr.Row(visible=False) as row2: | |
| slider = gr.Slider(minimum=0, maximum=100, value=50, label="Hidden Slider") | |
| number = gr.Number(value=42, label="Magic Number") | |
| button1 = gr.Button("Transform UI - Step 1") | |
| button2 = gr.Button("Transform UI - Step 2") | |
| button3 = gr.Button("Transform UI - Step 3") | |
| button4 = gr.Button("Reset") | |
| # Step 1: First transformation | |
| def transform_step1(): | |
| # Artificial delay to make the server round trip obvious | |
| return [ | |
| gr.Textbox(label="Expanding Textbox", lines=10, ), #placeholder="I now have a new placeholder and label"), # textbox changes | |
| gr.Row(visible=False), # row1 hides | |
| gr.Row(visible=True), # row2 appears | |
| ] | |
| # Step 2: Second transformation | |
| def transform_step2(): | |
| return [ | |
| gr.Textbox(label="New-Textbox-Label", lines=1, | |
| container=False, | |
| info="Just added a new info field for the textbox", | |
| placeholder="I changed my label, added info, removed the container, and shrinked the size"), | |
| gr.Row(visible=True), # row1 reappears | |
| gr.Textbox(label="Relocated Textbox",scale=1) # text_output changes | |
| ] | |
| # Step 3: Third transformation | |
| def transform_step3(): | |
| return [ | |
| gr.Row(variant="panel" ), gr.Row(variant="compact" ) | |
| ] | |
| # Reset everything | |
| def reset_ui(): | |
| return [ | |
| gr.Textbox(label="Morphing Textbox", placeholder="I will change shape and size...",lines=2, container=True, info=None), | |
| gr.Row(visible=True, variant ="default"), | |
| gr.Row(visible=False, variant ="default"), | |
| gr.Image(label="Appearing Image"), | |
| gr.Textbox(label="Moving Text"), | |
| gr.Slider(minimum=0, maximum=100,label="Hidden Slider"), | |
| gr.Number(label="Magic Number") | |
| ] | |
| # Set up events | |
| button1.click( | |
| fn=transform_step1, | |
| inputs=None, | |
| outputs=[text_box, row1, row2], | |
| js=True | |
| ) | |
| button2.click( | |
| fn=transform_step2, | |
| inputs=None, | |
| outputs=[text_box, row1, text_output], | |
| js=True | |
| ) | |
| button3.click( | |
| fn=transform_step3, | |
| inputs=None, | |
| outputs=[row1, row2], | |
| js=True | |
| ) | |
| button4.click( | |
| fn=reset_ui, | |
| inputs=None, | |
| outputs=[text_box, row1, row2, image1, text_output, slider, number], | |
| js=True | |
| ) | |
| return demo | |
| # Example 2: Accordion Madness - Components that expand and collapse unpredictably | |
| def create_accordion_demo(): | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# Accordion Madness") | |
| gr.Markdown("Each button click triggers component visibility changes WITHOUT server round trips") | |
| # Initial setup with various accordions | |
| with gr.Accordion("Section 1", open=True) as acc1: | |
| text1 = gr.Textbox(value="Content in section 1") | |
| with gr.Accordion("Section 2", open=False) as acc2: | |
| text2 = gr.Textbox(value="Content in section 2") | |
| with gr.Accordion("Section 3", open=False) as acc3: | |
| text3 = gr.Textbox(value="Content in section 3") | |
| with gr.Accordion("Section 4", open=False) as acc4: | |
| text4 = gr.Textbox(value="Content in section 4") | |
| with gr.Row(): | |
| #shuffle_btn = gr.Button("Shuffle Sections") | |
| #cascade_btn = gr.Button("Cascade Open") | |
| collapse_btn = gr.Button("Collapse All") | |
| expand_btn = gr.Button("Expand All") | |
| # Handlers to collapse or expand all | |
| def collapse_all(): | |
| #time.sleep(1) | |
| return [ | |
| gr.Accordion(open=False), | |
| gr.Accordion(open=False), | |
| gr.Accordion(open=False), | |
| gr.Accordion(open=False), | |
| ] | |
| def expand_all(): | |
| #time.sleep(1) | |
| return [ | |
| gr.Accordion(open=True), | |
| gr.Accordion(open=True), | |
| gr.Accordion(open=True), | |
| gr.Accordion(open=True), | |
| ] | |
| collapse_btn.click( | |
| fn=collapse_all, | |
| inputs=None, | |
| outputs=[acc1, acc2, acc3, acc4], | |
| js=True | |
| ) | |
| expand_btn.click( | |
| fn=expand_all, | |
| inputs=None, | |
| outputs=[acc1, acc2, acc3, acc4], | |
| js=True | |
| ) | |
| return demo | |
| # Create the tabbed interface with all demos | |
| with gr.Blocks(theme=gr.themes.Default()) as demo: | |
| gr.Markdown("# Gradio Server Round Trip Demos") | |
| gr.Markdown(""" | |
| These demos showcase how Gradio now DOES NOT trigger server round trips when updating component properties. | |
| Each button click only updates component properties WITHOUT requiring a full server round trip. | |
| """) | |
| with gr.Tabs(): | |
| with gr.TabItem("UI Transformation"): | |
| transformation_demo = create_transformation_demo() | |
| with gr.TabItem("Accordion Madness"): | |
| accordion_demo = create_accordion_demo() | |
| if __name__ == "__main__": | |
| demo.launch() |