File size: 3,874 Bytes
5ddc4d5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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

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()