Spaces:
Running
Running
| import gradio as gr | |
| from gradio_coolcanvas import CoolCanvas | |
| def greet(name): | |
| return "Hello " + name + "!" | |
| with gr.Blocks() as demo: | |
| with CoolCanvas(): | |
| 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() |