Layouts

Runnable examples for the frozen Gradio Lite 5.45.0 browser runtime.

Compose Gradio rows, columns, tabs, and an accordion in one app.

This coding playground demonstrates Gradio component layout inside the app. Click Run, try the image and text tabs, and open the accordion. This layout is separate from the editor and preview arrangement controlled by gr-layout.

import numpy as np
import gradio as gr
from sklearn.datasets import load_sample_images


def flip_text(x):
    return x[::-1]


def flip_image(x):
    return np.fliplr(x)


with gr.Blocks() as demo:
    gr.Markdown("Flip image files or text using this demo.")
    
    with gr.Tab("Flip Image"):
        with gr.Row():
            sample_images = load_sample_images().images
            image_input = gr.Image(value=sample_images[0])
            image_output = gr.Image()
        image_button = gr.Button("Flip")
    
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")

    with gr.Accordion("Open for More!", open=False):
        gr.Markdown("Look at me...")
        temp_slider = gr.Slider(
            0,
            1,
            value=0.1,
            step=0.1,
            interactive=True,
            label="Slide me",
        )

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)


demo.launch()

import numpy as np import gradio as gr from sklearn.datasets import load_sample_images def flip_text(x): return x[::-1] def flip_image(x): return np.fliplr(x) with gr.Blocks() as demo: gr.Markdown("Flip image files or text using this demo.") with gr.Tab("Flip Image"): with gr.Row(): sample_images = load_sample_images().images image_input = gr.Image(value=sample_images[0]) image_output = gr.Image() image_button = gr.Button("Flip") with gr.Tab("Flip Text"): text_input = gr.Textbox() text_output = gr.Textbox() text_button = gr.Button("Flip") with gr.Accordion("Open for More!", open=False): gr.Markdown("Look at me...") temp_slider = gr.Slider( 0, 1, value=0.1, step=0.1, interactive=True, label="Slide me", ) text_button.click(flip_text, inputs=text_input, outputs=text_output) image_button.click(flip_image, inputs=image_input, outputs=image_output) demo.launch()