File size: 6,276 Bytes
8940cf5 1aa9fbd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
# 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() |