0
# Input/Output Components
1
2
Comprehensive set of UI components for handling different data types including text input, media files, form controls, data display, and specialized interfaces for various use cases.
3
4
## Capabilities
5
6
### Text Components
7
8
Components for text input, display, and manipulation with support for various text formats and interaction patterns.
9
10
```python { .api }
11
class Textbox:
12
def __init__(
13
self,
14
value=None,
15
lines=1,
16
max_lines=None,
17
placeholder=None,
18
label=None,
19
info=None,
20
every=None,
21
show_label=None,
22
container=True,
23
scale=None,
24
min_width=160,
25
interactive=None,
26
visible=True,
27
elem_id=None,
28
elem_classes=None,
29
render=True,
30
type="text",
31
text_align=None,
32
rtl=False,
33
show_copy_button=False,
34
autofocus=False,
35
autoscroll=True,
36
max_length=None,
37
**kwargs
38
):
39
"""
40
Text input component for single or multi-line text.
41
42
Parameters:
43
- value: Default text value (None for empty)
44
- lines: Number of lines (1 for single-line, >1 for multi-line)
45
- max_lines: Maximum number of lines for auto-expansion (None for unlimited)
46
- placeholder: Placeholder text
47
- label: Component label
48
- info: Additional info text
49
- type: Input type ("text", "password", "email")
50
- text_align: Text alignment ("left", "center", "right")
51
- rtl: Whether to use right-to-left text direction
52
- show_copy_button: Whether to show copy button
53
- autofocus: Whether to automatically focus on component
54
- autoscroll: Whether to automatically scroll to bottom
55
- max_length: Maximum number of characters allowed
56
"""
57
58
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
59
def input(self, fn, inputs=None, outputs=None, **kwargs): ...
60
def focus(self, fn, inputs=None, outputs=None, **kwargs): ...
61
def blur(self, fn, inputs=None, outputs=None, **kwargs): ...
62
def submit(self, fn, inputs=None, outputs=None, **kwargs): ...
63
64
class MultimodalTextbox:
65
def __init__(
66
self,
67
value="",
68
lines=1,
69
max_lines=20,
70
placeholder=None,
71
label=None,
72
info=None,
73
every=None,
74
show_label=None,
75
container=True,
76
scale=None,
77
min_width=160,
78
interactive=None,
79
visible=True,
80
elem_id=None,
81
elem_classes=None,
82
render=True,
83
file_types=None,
84
file_count="multiple",
85
**kwargs
86
):
87
"""
88
Text input with file attachment support.
89
90
Parameters:
91
- file_types: Allowed file types (list of extensions)
92
- file_count: Number of files ("single" or "multiple")
93
"""
94
95
# Template aliases
96
Text = Textbox # Alias for Textbox
97
TextArea = Textbox # Pre-configured with lines=7
98
```
99
100
### HTML Components
101
102
Components for displaying and rendering HTML content.
103
104
```python { .api }
105
class HTML:
106
def __init__(
107
self,
108
value=None,
109
label=None,
110
every=None,
111
inputs=None,
112
show_label=False,
113
visible=True,
114
elem_id=None,
115
elem_classes=None,
116
render=True,
117
key=None,
118
preserved_by_key="value",
119
min_height=None,
120
max_height=None,
121
container=False,
122
padding=True,
123
autoscroll=False,
124
**kwargs
125
):
126
"""
127
Displays arbitrary HTML content.
128
129
Parameters:
130
- value: HTML content string or callable
131
- label: Component label
132
- show_label: Whether to show the label
133
- min_height: Minimum height in pixels
134
- max_height: Maximum height in pixels
135
- padding: Whether to add padding
136
- autoscroll: Whether to auto-scroll content
137
"""
138
139
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
140
def click(self, fn, inputs=None, outputs=None, **kwargs): ...
141
```
142
143
### Text Highlighting Components
144
145
Components for displaying text with highlights and annotations.
146
147
```python { .api }
148
class HighlightedText:
149
def __init__(
150
self,
151
value=None,
152
color_map=None,
153
show_legend=False,
154
show_inline_category=True,
155
combine_adjacent=False,
156
adjacent_separator="",
157
label=None,
158
info=None,
159
every=None,
160
inputs=None,
161
show_label=None,
162
container=True,
163
scale=None,
164
min_width=160,
165
interactive=None,
166
visible=True,
167
elem_id=None,
168
elem_classes=None,
169
render=True,
170
key=None,
171
preserved_by_key="value",
172
**kwargs
173
):
174
"""
175
Displays text with highlighted spans by category or confidence.
176
177
Parameters:
178
- value: List of tuples (text, category/confidence) or callable
179
- color_map: Dictionary mapping categories to colors
180
- show_legend: Whether to show color legend
181
- show_inline_category: Show category names inline
182
- combine_adjacent: Combine adjacent tokens with same category
183
- adjacent_separator: Separator for combined tokens
184
"""
185
186
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
187
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
188
189
# Template aliases
190
Highlight = HighlightedText
191
Highlightedtext = HighlightedText # Case variant
192
```
193
194
### Dialogue Components
195
196
Components for multi-speaker conversation display and input.
197
198
```python { .api }
199
class Dialogue:
200
def __init__(
201
self,
202
value=None,
203
type="text",
204
speakers=None,
205
formatter=None,
206
unformatter=None,
207
tags=None,
208
separator="\n",
209
color_map=None,
210
label="Dialogue",
211
info=None,
212
every=None,
213
inputs=None,
214
show_label=None,
215
container=True,
216
scale=None,
217
min_width=160,
218
interactive=None,
219
visible=True,
220
elem_id=None,
221
elem_classes=None,
222
render=True,
223
key=None,
224
preserved_by_key="value",
225
**kwargs
226
):
227
"""
228
Component for displaying or collecting multi-speaker conversations.
229
230
Parameters:
231
- value: List of dialogue lines with speaker and text
232
- type: Output format ("list" or "text")
233
- speakers: List of speaker names
234
- formatter: Function to format dialogue output
235
- unformatter: Function to parse dialogue input
236
- tags: List of available tags for messages
237
- separator: Separator for text format
238
- color_map: Speaker name to color mapping
239
"""
240
241
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
242
def input(self, fn, inputs=None, outputs=None, **kwargs): ...
243
def submit(self, fn, inputs=None, outputs=None, **kwargs): ...
244
```
245
246
### Parameter Display Components
247
248
Components for displaying structured parameter information.
249
250
```python { .api }
251
class ParamViewer:
252
def __init__(
253
self,
254
value=None,
255
language="python",
256
linkify=None,
257
every=None,
258
inputs=None,
259
render=True,
260
key=None,
261
preserved_by_key="value",
262
header="Parameters",
263
anchor_links=False,
264
**kwargs
265
):
266
"""
267
Displays interactive parameter table with syntax highlighting.
268
269
Parameters:
270
- value: Dictionary of parameter definitions
271
- language: Programming language for syntax ("python" or "typescript")
272
- linkify: List of strings to convert to links
273
- header: Table header text
274
- anchor_links: Whether to create anchor links
275
"""
276
277
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
278
def upload(self, fn, inputs=None, outputs=None, **kwargs): ...
279
```
280
281
Usage examples:
282
283
```python
284
# Single-line text input
285
name_input = gr.Textbox(label="Name", placeholder="Enter your name")
286
287
# Multi-line text area
288
description = gr.Textbox(lines=5, label="Description")
289
290
# Multimodal input with file attachments
291
multimodal = gr.MultimodalTextbox(
292
label="Message with files",
293
file_types=[".txt", ".pdf", ".jpg"]
294
)
295
```
296
297
### Button Components
298
299
Interactive button components for triggering actions and user interactions with various styles and specialized functionality.
300
301
```python { .api }
302
class Button:
303
def __init__(
304
self,
305
value="Run",
306
variant="secondary",
307
size="lg",
308
icon=None,
309
link=None,
310
visible=True,
311
interactive=True,
312
elem_id=None,
313
elem_classes=None,
314
render=True,
315
scale=None,
316
min_width=None,
317
**kwargs
318
):
319
"""
320
Clickable button component.
321
322
Parameters:
323
- value: Button text/label
324
- variant: Button style ("primary", "secondary", "stop")
325
- size: Button size ("sm", "lg")
326
- icon: Icon name or URL
327
- link: URL to open when clicked
328
"""
329
330
def click(self, fn, inputs=None, outputs=None, **kwargs): ...
331
332
class ClearButton(Button):
333
def __init__(self, components=None, **kwargs):
334
"""
335
Button that clears specified components.
336
337
Parameters:
338
- components: List of components to clear
339
"""
340
341
class DownloadButton(Button):
342
def __init__(self, label="Download", **kwargs):
343
"""Button for downloading files."""
344
345
class UploadButton(Button):
346
def __init__(
347
self,
348
label="Upload a File",
349
file_types=None,
350
file_count="single",
351
**kwargs
352
):
353
"""
354
Button for uploading files.
355
356
Parameters:
357
- file_types: Allowed file types
358
- file_count: "single" or "multiple"
359
"""
360
361
class DuplicateButton(Button):
362
def __init__(self, **kwargs):
363
"""Button for duplicating Hugging Face Spaces."""
364
365
class LoginButton(Button):
366
def __init__(self, **kwargs):
367
"""OAuth login button."""
368
369
class DeepLinkButton(Button):
370
def __init__(self, **kwargs):
371
"""Deep linking navigation button."""
372
```
373
374
### Media Components
375
376
Components for handling various media types including images, audio, video with upload, display, and processing capabilities.
377
378
```python { .api }
379
class Image:
380
def __init__(
381
self,
382
value=None,
383
height=None,
384
width=None,
385
image_mode="RGB",
386
sources=None,
387
type="numpy",
388
label=None,
389
every=None,
390
show_label=None,
391
show_download_button=True,
392
container=True,
393
scale=None,
394
min_width=160,
395
interactive=None,
396
visible=True,
397
elem_id=None,
398
elem_classes=None,
399
render=True,
400
show_share_button=None,
401
show_fullscreen_button=True,
402
**kwargs
403
):
404
"""
405
Image upload and display component.
406
407
Parameters:
408
- value: Default image
409
- height/width: Component dimensions
410
- image_mode: Color mode ("RGB", "RGBA", "L")
411
- sources: Input sources ("upload", "webcam", "clipboard")
412
- type: Return type ("numpy", "pil", "filepath")
413
- show_download_button: Whether to show download button
414
- show_share_button: Whether to show share button
415
- show_fullscreen_button: Whether to show fullscreen button
416
"""
417
418
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
419
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
420
def upload(self, fn, inputs=None, outputs=None, **kwargs): ...
421
422
class Audio:
423
def __init__(
424
self,
425
value=None,
426
sources=None,
427
type="numpy",
428
label=None,
429
every=None,
430
show_label=None,
431
container=True,
432
scale=None,
433
min_width=160,
434
interactive=None,
435
visible=True,
436
elem_id=None,
437
elem_classes=None,
438
render=True,
439
format="wav",
440
autoplay=False,
441
show_download_button=None,
442
show_share_button=None,
443
editable=True,
444
**kwargs
445
):
446
"""
447
Audio upload, recording, and playback component.
448
449
Parameters:
450
- sources: Input sources ("upload", "microphone")
451
- type: Return type ("numpy", "filepath")
452
- format: Audio format ("wav", "mp3")
453
- autoplay: Whether to autoplay audio
454
- editable: Whether audio is editable
455
"""
456
457
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
458
def play(self, fn, inputs=None, outputs=None, **kwargs): ...
459
def pause(self, fn, inputs=None, outputs=None, **kwargs): ...
460
461
class Video:
462
def __init__(
463
self,
464
value=None,
465
format=None,
466
sources=None,
467
height=None,
468
width=None,
469
label=None,
470
every=None,
471
show_label=None,
472
container=True,
473
scale=None,
474
min_width=160,
475
interactive=None,
476
visible=True,
477
elem_id=None,
478
elem_classes=None,
479
render=True,
480
mirror_webcam=True,
481
include_audio=True,
482
autoplay=False,
483
show_share_button=None,
484
show_download_button=None,
485
**kwargs
486
):
487
"""
488
Video upload and display component.
489
490
Parameters:
491
- sources: Input sources ("upload", "webcam")
492
- format: Video format
493
- mirror_webcam: Whether to mirror webcam
494
- include_audio: Whether to include audio
495
- autoplay: Whether to autoplay video
496
"""
497
498
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
499
def play(self, fn, inputs=None, outputs=None, **kwargs): ...
500
def pause(self, fn, inputs=None, outputs=None, **kwargs): ...
501
```
502
503
### Form Components
504
505
Form control components for user input including sliders, dropdowns, checkboxes, and other interactive form elements.
506
507
```python { .api }
508
class Slider:
509
def __init__(
510
self,
511
minimum=0,
512
maximum=100,
513
value=None,
514
step=None,
515
label=None,
516
info=None,
517
every=None,
518
show_label=None,
519
container=True,
520
scale=None,
521
elem_id=None,
522
elem_classes=None,
523
render=True,
524
interactive=None,
525
visible=True,
526
**kwargs
527
):
528
"""
529
Numeric slider input component.
530
531
Parameters:
532
- minimum: Minimum value
533
- maximum: Maximum value
534
- value: Default value
535
- step: Step size for increments
536
"""
537
538
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
539
def input(self, fn, inputs=None, outputs=None, **kwargs): ...
540
def release(self, fn, inputs=None, outputs=None, **kwargs): ...
541
542
class Number:
543
def __init__(
544
self,
545
value=None,
546
label=None,
547
info=None,
548
every=None,
549
show_label=None,
550
container=True,
551
scale=None,
552
elem_id=None,
553
elem_classes=None,
554
render=True,
555
interactive=None,
556
visible=True,
557
minimum=None,
558
maximum=None,
559
step=1,
560
**kwargs
561
):
562
"""
563
Numeric input field with validation.
564
565
Parameters:
566
- minimum/maximum: Value bounds
567
- step: Increment step size
568
"""
569
570
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
571
def input(self, fn, inputs=None, outputs=None, **kwargs): ...
572
def focus(self, fn, inputs=None, outputs=None, **kwargs): ...
573
def blur(self, fn, inputs=None, outputs=None, **kwargs): ...
574
def submit(self, fn, inputs=None, outputs=None, **kwargs): ...
575
576
class Checkbox:
577
def __init__(
578
self,
579
value=False,
580
label=None,
581
info=None,
582
every=None,
583
show_label=None,
584
container=True,
585
scale=None,
586
elem_id=None,
587
elem_classes=None,
588
render=True,
589
interactive=None,
590
visible=True,
591
**kwargs
592
):
593
"""Boolean checkbox input."""
594
595
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
596
597
class CheckboxGroup:
598
def __init__(
599
self,
600
choices=None,
601
value=None,
602
type="value",
603
label=None,
604
info=None,
605
every=None,
606
show_label=None,
607
container=True,
608
scale=None,
609
elem_id=None,
610
elem_classes=None,
611
render=True,
612
interactive=None,
613
visible=True,
614
**kwargs
615
):
616
"""
617
Multiple checkbox selection.
618
619
Parameters:
620
- choices: List of options
621
- value: Default selected values
622
- type: Return type ("value" or "index")
623
"""
624
625
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
626
627
class Radio:
628
def __init__(
629
self,
630
choices=None,
631
value=None,
632
type="value",
633
label=None,
634
info=None,
635
every=None,
636
show_label=None,
637
container=True,
638
scale=None,
639
elem_id=None,
640
elem_classes=None,
641
render=True,
642
interactive=None,
643
visible=True,
644
**kwargs
645
):
646
"""
647
Single selection radio buttons.
648
649
Parameters:
650
- choices: List of options
651
- value: Default selected value
652
- type: Return type ("value" or "index")
653
"""
654
655
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
656
657
class Dropdown:
658
def __init__(
659
self,
660
choices=None,
661
value=None,
662
type="value",
663
multiselect=False,
664
max_choices=None,
665
label=None,
666
info=None,
667
every=None,
668
show_label=None,
669
container=True,
670
scale=None,
671
elem_id=None,
672
elem_classes=None,
673
render=True,
674
interactive=None,
675
visible=True,
676
allow_custom_value=False,
677
**kwargs
678
):
679
"""
680
Dropdown selection menu.
681
682
Parameters:
683
- choices: List of options
684
- multiselect: Whether to allow multiple selections
685
- max_choices: Maximum number of selections
686
- allow_custom_value: Whether to allow custom values
687
"""
688
689
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
690
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
691
def input(self, fn, inputs=None, outputs=None, **kwargs): ...
692
def focus(self, fn, inputs=None, outputs=None, **kwargs): ...
693
def blur(self, fn, inputs=None, outputs=None, **kwargs): ...
694
695
class ColorPicker:
696
def __init__(
697
self,
698
value=None,
699
label=None,
700
info=None,
701
every=None,
702
show_label=None,
703
container=True,
704
scale=None,
705
elem_id=None,
706
elem_classes=None,
707
render=True,
708
interactive=None,
709
visible=True,
710
**kwargs
711
):
712
"""Color selection input widget."""
713
714
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
715
716
class DateTime:
717
def __init__(
718
self,
719
value=None,
720
label=None,
721
info=None,
722
every=None,
723
show_label=None,
724
container=True,
725
scale=None,
726
elem_id=None,
727
elem_classes=None,
728
render=True,
729
interactive=None,
730
visible=True,
731
**kwargs
732
):
733
"""Date and time picker component."""
734
735
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
736
```
737
738
### File Components
739
740
Components for file handling including upload, download, and file system navigation with support for various file types and operations.
741
742
```python { .api }
743
class File:
744
def __init__(
745
self,
746
value=None,
747
file_count="single",
748
file_types=None,
749
type="filepath",
750
label=None,
751
every=None,
752
show_label=None,
753
container=True,
754
scale=None,
755
elem_id=None,
756
elem_classes=None,
757
render=True,
758
interactive=None,
759
visible=True,
760
height=None,
761
**kwargs
762
):
763
"""
764
File upload and download component.
765
766
Parameters:
767
- file_count: "single" or "multiple"
768
- file_types: List of allowed extensions
769
- type: Return type ("filepath", "binary")
770
"""
771
772
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
773
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
774
def upload(self, fn, inputs=None, outputs=None, **kwargs): ...
775
776
class FileExplorer:
777
def __init__(
778
self,
779
root_dir=".",
780
glob="**/*.*",
781
value=None,
782
file_count="single",
783
label=None,
784
every=None,
785
show_label=None,
786
container=True,
787
scale=None,
788
elem_id=None,
789
elem_classes=None,
790
render=True,
791
interactive=None,
792
visible=True,
793
height=None,
794
**kwargs
795
):
796
"""
797
File system navigation interface.
798
799
Parameters:
800
- root_dir: Root directory to explore
801
- glob: File pattern to match
802
- file_count: "single" or "multiple"
803
"""
804
805
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
806
```
807
808
### Display Components
809
810
Components for displaying various types of data including formatted text, structured data, and visualization outputs.
811
812
```python { .api }
813
class Label:
814
def __init__(
815
self,
816
value=None,
817
num_top_classes=None,
818
label=None,
819
every=None,
820
show_label=None,
821
container=True,
822
scale=None,
823
elem_id=None,
824
elem_classes=None,
825
render=True,
826
visible=True,
827
color=None,
828
**kwargs
829
):
830
"""
831
Display classification results with confidence scores.
832
833
Parameters:
834
- num_top_classes: Number of top classes to show
835
- color: Color scheme for labels
836
"""
837
838
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
839
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
840
841
class JSON:
842
def __init__(
843
self,
844
value=None,
845
label=None,
846
every=None,
847
show_label=None,
848
container=True,
849
scale=None,
850
elem_id=None,
851
elem_classes=None,
852
render=True,
853
visible=True,
854
**kwargs
855
):
856
"""Interactive JSON data display."""
857
858
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
859
860
class Html:
861
def __init__(
862
self,
863
value="",
864
label=None,
865
every=None,
866
show_label=None,
867
visible=True,
868
elem_id=None,
869
elem_classes=None,
870
render=True,
871
**kwargs
872
):
873
"""Raw HTML content renderer."""
874
875
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
876
877
class Markdown:
878
def __init__(
879
self,
880
value="",
881
label=None,
882
every=None,
883
show_label=None,
884
visible=True,
885
elem_id=None,
886
elem_classes=None,
887
render=True,
888
latex_delimiters=None,
889
sanitize_html=True,
890
line_breaks=False,
891
header_links=False,
892
**kwargs
893
):
894
"""
895
Markdown content renderer with formatting.
896
897
Parameters:
898
- latex_delimiters: LaTeX delimiter configuration
899
- sanitize_html: Whether to sanitize HTML
900
- line_breaks: Whether to convert line breaks
901
- header_links: Whether to add header links
902
"""
903
904
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
905
906
class Code:
907
def __init__(
908
self,
909
value="",
910
language=None,
911
label=None,
912
every=None,
913
show_label=None,
914
container=True,
915
scale=None,
916
elem_id=None,
917
elem_classes=None,
918
render=True,
919
visible=True,
920
interactive=None,
921
**kwargs
922
):
923
"""
924
Syntax-highlighted code display.
925
926
Parameters:
927
- language: Programming language for syntax highlighting
928
"""
929
930
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
931
932
class Dataframe:
933
def __init__(
934
self,
935
value=None,
936
headers=None,
937
datatype=None,
938
row_count=None,
939
col_count=None,
940
label=None,
941
every=None,
942
show_label=None,
943
container=True,
944
scale=None,
945
elem_id=None,
946
elem_classes=None,
947
render=True,
948
interactive=None,
949
visible=True,
950
wrap=False,
951
**kwargs
952
):
953
"""
954
Interactive tabular data display and editing.
955
956
Parameters:
957
- headers: Column headers
958
- datatype: Data types for columns
959
- row_count: Number of rows
960
- col_count: Number of columns
961
- wrap: Whether to wrap cell content
962
"""
963
964
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
965
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
966
967
class Gallery:
968
def __init__(
969
self,
970
value=None,
971
format="webp",
972
label=None,
973
every=None,
974
show_label=None,
975
container=True,
976
scale=None,
977
elem_id=None,
978
elem_classes=None,
979
render=True,
980
visible=True,
981
allow_preview=True,
982
preview=None,
983
selected_index=None,
984
columns=2,
985
rows=None,
986
height=None,
987
object_fit="cover",
988
show_share_button=None,
989
show_download_button=True,
990
**kwargs
991
):
992
"""
993
Image gallery with thumbnail navigation.
994
995
Parameters:
996
- format: Image format for thumbnails
997
- allow_preview: Whether to allow image preview
998
- columns: Number of columns in grid
999
- rows: Number of rows in grid
1000
- object_fit: CSS object-fit property
1001
"""
1002
1003
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1004
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
1005
```
1006
1007
### Specialized Components
1008
1009
Advanced components for specific use cases including chat interfaces, image editing, 3D models, and custom visualizations.
1010
1011
```python { .api }
1012
class Chatbot:
1013
def __init__(
1014
self,
1015
value=None,
1016
label=None,
1017
every=None,
1018
show_label=None,
1019
container=True,
1020
scale=None,
1021
elem_id=None,
1022
elem_classes=None,
1023
render=True,
1024
visible=True,
1025
height=None,
1026
latex_delimiters=None,
1027
rtl=False,
1028
show_share_button=None,
1029
show_copy_button=False,
1030
avatar_images=None,
1031
sanitize_html=True,
1032
render_markdown=True,
1033
bubble_full_width=True,
1034
line_breaks=True,
1035
likeable=False,
1036
layout="bubble",
1037
**kwargs
1038
):
1039
"""
1040
Chat conversation display with message history.
1041
1042
Parameters:
1043
- avatar_images: User and bot avatar images
1044
- layout: Chat layout ("bubble" or "panel")
1045
- likeable: Whether to show like/dislike buttons
1046
- bubble_full_width: Whether bubbles fill width
1047
"""
1048
1049
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1050
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
1051
def like(self, fn, inputs=None, outputs=None, **kwargs): ...
1052
1053
class AnnotatedImage:
1054
def __init__(
1055
self,
1056
value=None,
1057
height=None,
1058
width=None,
1059
label=None,
1060
every=None,
1061
show_label=None,
1062
container=True,
1063
scale=None,
1064
elem_id=None,
1065
elem_classes=None,
1066
render=True,
1067
visible=True,
1068
**kwargs
1069
):
1070
"""
1071
Image display with overlay annotations and interactive regions.
1072
1073
Parameters:
1074
- value: Image with annotations data
1075
- height/width: Component dimensions
1076
"""
1077
1078
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1079
def select(self, fn, inputs=None, outputs=None, **kwargs): ...
1080
1081
class ImageSlider:
1082
def __init__(
1083
self,
1084
value=None,
1085
label=None,
1086
every=None,
1087
show_label=None,
1088
container=True,
1089
scale=None,
1090
elem_id=None,
1091
elem_classes=None,
1092
render=True,
1093
visible=True,
1094
position=0.5,
1095
**kwargs
1096
):
1097
"""
1098
Before/after image comparison slider.
1099
1100
Parameters:
1101
- value: Tuple of (before_image, after_image)
1102
- position: Initial slider position (0.0 to 1.0)
1103
"""
1104
1105
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1106
1107
class ImageEditor:
1108
def __init__(
1109
self,
1110
value=None,
1111
height=None,
1112
width=None,
1113
image_mode="RGB",
1114
sources=None,
1115
type="numpy",
1116
label=None,
1117
every=None,
1118
show_label=None,
1119
container=True,
1120
scale=None,
1121
elem_id=None,
1122
elem_classes=None,
1123
render=True,
1124
interactive=None,
1125
visible=True,
1126
brush=None,
1127
eraser=None,
1128
**kwargs
1129
):
1130
"""
1131
Interactive image editing interface.
1132
1133
Parameters:
1134
- brush: Brush tool configuration
1135
- eraser: Eraser tool configuration
1136
"""
1137
1138
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1139
1140
class Model3D:
1141
def __init__(
1142
self,
1143
value=None,
1144
clear_color=None,
1145
label=None,
1146
every=None,
1147
show_label=None,
1148
container=True,
1149
scale=None,
1150
elem_id=None,
1151
elem_classes=None,
1152
render=True,
1153
visible=True,
1154
camera_position=None,
1155
**kwargs
1156
):
1157
"""
1158
3D model viewer and display.
1159
1160
Parameters:
1161
- clear_color: Background color
1162
- camera_position: Initial camera position
1163
"""
1164
1165
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1166
1167
class Plot:
1168
def __init__(
1169
self,
1170
value=None,
1171
label=None,
1172
every=None,
1173
show_label=None,
1174
container=True,
1175
scale=None,
1176
elem_id=None,
1177
elem_classes=None,
1178
render=True,
1179
visible=True,
1180
**kwargs
1181
):
1182
"""Matplotlib/Plotly plot display and interaction."""
1183
1184
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1185
1186
class BarPlot:
1187
def __init__(
1188
self,
1189
value=None,
1190
x=None,
1191
y=None,
1192
color=None,
1193
vertical=True,
1194
group=None,
1195
title=None,
1196
tooltip=None,
1197
x_title=None,
1198
y_title=None,
1199
color_legend_title=None,
1200
group_title=None,
1201
color_legend_position=None,
1202
height=None,
1203
width=None,
1204
x_lim=None,
1205
y_lim=None,
1206
caption=None,
1207
interactive=None,
1208
label=None,
1209
show_label=None,
1210
container=True,
1211
scale=None,
1212
elem_id=None,
1213
elem_classes=None,
1214
render=True,
1215
visible=True,
1216
**kwargs
1217
):
1218
"""
1219
Native bar chart component for categorical data visualization.
1220
1221
Parameters:
1222
- value: Plot data (pandas DataFrame or compatible format)
1223
- x: Column name for x-axis values
1224
- y: Column name for y-axis values
1225
- color: Column name for color grouping
1226
- vertical: Whether bars are vertical (True) or horizontal (False)
1227
- group: Column name for grouping bars
1228
- title: Plot title
1229
- tooltip: Columns to show in tooltip
1230
- x_title: X-axis label
1231
- y_title: Y-axis label
1232
"""
1233
1234
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1235
1236
class LinePlot:
1237
def __init__(
1238
self,
1239
value=None,
1240
x=None,
1241
y=None,
1242
color=None,
1243
stroke_dash=None,
1244
overlay_point=False,
1245
title=None,
1246
tooltip=None,
1247
x_title=None,
1248
y_title=None,
1249
color_legend_title=None,
1250
stroke_dash_legend_title=None,
1251
color_legend_position=None,
1252
height=None,
1253
width=None,
1254
x_lim=None,
1255
y_lim=None,
1256
caption=None,
1257
interactive=None,
1258
label=None,
1259
show_label=None,
1260
container=True,
1261
scale=None,
1262
elem_id=None,
1263
elem_classes=None,
1264
render=True,
1265
visible=True,
1266
**kwargs
1267
):
1268
"""
1269
Native line chart component for continuous data visualization.
1270
1271
Parameters:
1272
- value: Plot data (pandas DataFrame or compatible format)
1273
- x: Column name for x-axis values
1274
- y: Column name for y-axis values
1275
- color: Column name for color grouping of lines
1276
- stroke_dash: Column name for line dash pattern grouping
1277
- overlay_point: Whether to show points on lines
1278
- title: Plot title
1279
- tooltip: Columns to show in tooltip
1280
- x_title: X-axis label
1281
- y_title: Y-axis label
1282
"""
1283
1284
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1285
1286
class ScatterPlot:
1287
def __init__(
1288
self,
1289
value=None,
1290
x=None,
1291
y=None,
1292
color=None,
1293
size=None,
1294
shape=None,
1295
title=None,
1296
tooltip=None,
1297
x_title=None,
1298
y_title=None,
1299
color_legend_title=None,
1300
size_legend_title=None,
1301
shape_legend_title=None,
1302
color_legend_position=None,
1303
height=None,
1304
width=None,
1305
x_lim=None,
1306
y_lim=None,
1307
caption=None,
1308
interactive=None,
1309
label=None,
1310
show_label=None,
1311
container=True,
1312
scale=None,
1313
elem_id=None,
1314
elem_classes=None,
1315
render=True,
1316
visible=True,
1317
**kwargs
1318
):
1319
"""
1320
Native scatter plot component for correlation visualization.
1321
1322
Parameters:
1323
- value: Plot data (pandas DataFrame or compatible format)
1324
- x: Column name for x-axis values
1325
- y: Column name for y-axis values
1326
- color: Column name for color grouping of points
1327
- size: Column name for point size scaling
1328
- shape: Column name for point shape grouping
1329
- title: Plot title
1330
- tooltip: Columns to show in tooltip
1331
- x_title: X-axis label
1332
- y_title: Y-axis label
1333
"""
1334
1335
def change(self, fn, inputs=None, outputs=None, **kwargs): ...
1336
```
1337
1338
### Utility Components
1339
1340
Helper components for state management, timing, examples, and specialized functionality.
1341
1342
```python { .api }
1343
class State:
1344
def __init__(self, value=None, **kwargs):
1345
"""
1346
Persistent state storage across sessions.
1347
1348
Parameters:
1349
- value: Initial state value
1350
"""
1351
1352
class Timer:
1353
def __init__(self, value=1, **kwargs):
1354
"""
1355
Periodic event trigger for animations.
1356
1357
Parameters:
1358
- value: Timer interval in seconds
1359
"""
1360
1361
def tick(self, fn, inputs=None, outputs=None, **kwargs): ...
1362
1363
class Dataset:
1364
def __init__(
1365
self,
1366
components,
1367
samples,
1368
headers=None,
1369
type="values",
1370
samples_per_page=10,
1371
label=None,
1372
every=None,
1373
show_label=None,
1374
container=True,
1375
scale=None,
1376
elem_id=None,
1377
elem_classes=None,
1378
render=True,
1379
visible=True,
1380
**kwargs
1381
):
1382
"""
1383
Example dataset display and selection.
1384
1385
Parameters:
1386
- components: List of component types
1387
- samples: List of example data
1388
- headers: Column headers
1389
- type: Data type ("values" or "index")
1390
- samples_per_page: Pagination size
1391
"""
1392
1393
def click(self, fn, inputs=None, outputs=None, **kwargs): ...
1394
1395
class BrowserState:
1396
def __init__(self, value=None, **kwargs):
1397
"""
1398
Browser-specific state management for client-side persistence.
1399
Data persists across page reloads within the same browser session.
1400
1401
Parameters:
1402
- value: Initial browser state value
1403
"""
1404
```
1405
1406
## Template Components
1407
1408
Pre-configured component variants with common settings for specific use cases.
1409
1410
```python { .api }
1411
# Text input templates
1412
TextArea = Textbox # Multi-line text input (lines=7)
1413
1414
# File handling templates
1415
Files = File # Multiple file upload
1416
Numpy = File # NumPy array file handling
1417
1418
# Media templates
1419
Mic = Audio # Microphone recording
1420
Microphone = Audio # Alternative microphone
1421
PlayableVideo = Video # Video with controls
1422
1423
# Drawing templates
1424
Paint = Image # Drawing canvas
1425
Sketchpad = Image # Sketching interface
1426
ImageMask = Image # Image masking
1427
1428
# Data templates
1429
List = JSON # List data display
1430
Matrix = Dataframe # Matrix data display
1431
```
1432
1433
## Types
1434
1435
```python { .api }
1436
class FileData:
1437
"""File metadata and path information."""
1438
path: str
1439
size: int
1440
orig_name: str
1441
1442
class ImageData:
1443
"""Image data with metadata."""
1444
path: str
1445
url: str
1446
size: tuple
1447
orig_name: str
1448
1449
class MessageDict:
1450
"""Chat message structure."""
1451
role: str # "user" or "assistant"
1452
content: str
1453
metadata: dict
1454
1455
class InputHTMLAttributes:
1456
"""HTML input attributes configuration."""
1457
# Standard HTML input attributes
1458
1459
class WaveformOptions:
1460
"""Waveform display options for Audio component."""
1461
waveform_color: str | None = None
1462
waveform_progress_color: str | None = None
1463
trim_region_color: str | None = None
1464
show_recording_waveform: bool = True
1465
skip_length: int | float = 5
1466
sample_rate: int = 44100
1467
1468
class Brush:
1469
"""Brush tool configuration for ImageEditor."""
1470
default_size: int | str = "auto"
1471
colors: list[str] = None
1472
default_color: str = "black"
1473
1474
class Eraser:
1475
"""Eraser tool configuration for ImageEditor."""
1476
default_size: int | str = "auto"
1477
1478
class LayerOptions:
1479
"""Layer management options for ImageEditor."""
1480
visible: bool = True
1481
position: tuple[int, int] = (0, 0)
1482
1483
class WebcamOptions:
1484
"""Webcam configuration for ImageEditor."""
1485
mirror: bool = True
1486
constraints: dict = None
1487
```