Home
audio_debugger
blocks_essay
blocks_group
blocks_js_methods
blocks_layout
blocks_multiple_event_triggers
blocks_update
calculator
cancel_events
chatbot_multimodal
chatinterface_streaming_echo
clear_components
code
diff_texts
fake_diffusion_with_gif
fake_gan
file_explorer_component_events
gradio_pdf_demo
iframe_resizer
image_editor_events
image_mod_default_image
image_segmentation
interface_random_slider
kitchen_sink
kitchen_sink_random
login_with_huggingface
matrix_transpose
mini_leaderboard
model3D
native_plots
reverse_audio
stream_audio
stream_audio_out
stream_frames
stt_or_tts
video_component
zip_files
This is a couple of elements without any gr.Group. Form elements naturally group together anyway.
Textbox
Number
Run
Image
Drop Image Here
- or -
Click to Upload
Slider
↺
0
100
This is the same set put in a gr.Group.
Textbox
Number
Run
Image
Drop Image Here
- or -
Click to Upload
Slider
↺
0
100
Now in a Row, no group.
Textbox
Number
Run
Image
Drop Image Here
- or -
Click to Upload
Slider
↺
0
100
Now in a Row in a group.
Textbox
Number
Run
Image
Drop Image Here
- or -
Click to Upload
Slider
↺
0
100
Several rows grouped together.
Textbox
Number
Run
Image
Drop Image Here
- or -
Click to Upload
Audio
Drop Audio Here
- or -
Click to Upload
Several columns grouped together. If columns are uneven, there is a gray group background.
Name
Hello
Dropdown
Number
Textbox
Image
Drop Image Here
- or -
Click to Upload
Dropdown
Number
Textbox
container=False removes label, padding, and block border, placing elements 'directly' on background.
Radio
1
2
3
Textbox
Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.
Name
Textbox
Greet
Dropdown
Textbox
Number
Image
Drop Image Here
- or -
Click to Upload
More examples
Chatbot
Prompot
go
Radio
1
2
3
Slider
↺
0
20
Dropdown
Number
Textbox
Dropdown
Number
Textbox