import gradio as gr def greet(name): return "Hello " + name + "!" with gr.Blocks() as demo: gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.") gr.Textbox("A") gr.Number(3) gr.Button() gr.Image() gr.Slider() gr.Markdown("### This is the same set put in a gr.Group.") with gr.Group(): gr.Textbox("A") gr.Number(3) gr.Button() gr.Image() gr.Slider() gr.Markdown("### Now in a Row, no group.") with gr.Row(): gr.Textbox("A") gr.Number(3) gr.Button() gr.Image() gr.Slider() gr.Markdown("### Now in a Row in a group.") with gr.Group(): with gr.Row(): gr.Textbox("A") gr.Number(3) gr.Button() gr.Image() gr.Slider() gr.Markdown("### Several rows grouped together.") with gr.Group(): with gr.Row(): gr.Textbox("A") gr.Number(3) gr.Button() with gr.Row(): gr.Image() gr.Audio() gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.") with gr.Group(): with gr.Row(): with gr.Column(): name = gr.Textbox(label="Name") btn = gr.Button("Hello") gr.Dropdown(["a", "b", "c"], interactive=True) gr.Number() gr.Textbox() with gr.Column(): gr.Image() gr.Dropdown(["a", "b", "c"], interactive=True) with gr.Row(): gr.Number(scale=2) gr.Textbox() gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.") gr.Radio([1,2,3], container=False) gr.Textbox(container=False) gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200) gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.") with gr.Group(): name = gr.Textbox(label="Name") output = gr.Textbox(show_label=False, container=False) greet_btn = gr.Button("Greet") with gr.Row(): gr.Dropdown(["a", "b", "c"], interactive=True, container=False) gr.Textbox(container=False) gr.Number(container=False) gr.Image(height=100) greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet") gr.Markdown("### More examples") with gr.Group(): gr.Chatbot() with gr.Row(): name = gr.Textbox(label="Prompot", container=False) go = gr.Button("go", scale=0) with gr.Column(): gr.Radio([1,2,3], container=False) gr.Slider(0, 20, container=False) with gr.Group(): with gr.Row(): gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2") gr.Number(container=False) gr.Textbox(container=False) with gr.Row(): with gr.Column(): gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2") with gr.Column(): gr.Number(container=False) with gr.Column(): gr.Textbox(container=False) if __name__ == "__main__": demo.launch()