app.py

# A sample Gradio demo that showcases the usual server round trips when updating component properties
import gradio as gr

# 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],
        )
        
        button2.click(
            fn=transform_step2,
            inputs=None,
            outputs=[text_box, row1, text_output],
        )
        
        button3.click(
            fn=transform_step3,
            inputs=None,
            outputs=[row1, row2],
        )
        
        button4.click(
            fn=reset_ui,
            inputs=None,
            outputs=[text_box, row1, row2, image1, text_output, slider, number],
        )
    
    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():
            return [
                gr.Accordion(open=False),
                gr.Accordion(open=False),
                gr.Accordion(open=False),
                gr.Accordion(open=False),
            ]
            
        def expand_all():
            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],
        )
        
        expand_btn.click(
            fn=expand_all,
            inputs=None,
            outputs=[acc1, acc2, acc3, acc4],
        )
    
    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()