Create app.py

app.py

@@ -0,0 +1,175 @@
+# 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():
+            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],
+            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()