组件

简介

Gradio 包含预构建的组件，可以通过一行代码在你的 Interface 或 Blocks 中用作输入或输出。这些组件包含将通过浏览器提交的用户数据转换为可供 Python 函数使用的预处理步骤，以及将 Python 函数返回的值转换为可在浏览器中显示形式的后处理步骤。

考虑一个具有三个输入（文本框、数字和图像）和两个输出（数字和图库）的示例，下面是一个图表，展示了我们的预处理将发送给函数的内容以及我们的后处理将从中需要的内容。

事件

组件还支持某些事件。这些是用户操作时触发的方法。下表显示了每个组件支持的事件。所有事件（及其参数）也列在组件的文档中。

	释放	上传	复制	提交	点击	播放	编辑	停止录制	结束	开始录制	示例选择	失焦	选项选择	输入	删除	点赞	键盘抬起	双击	清除	暂停录制	聚焦	应用	预览关闭	流式传输	重试	暂停	撤销	下载	预览打开	计时	停止	选择	改变
AnnotatedImage	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
Audio	✕	✓	✕	✕	✕	✓	✕	✓	✕	✓	✕	✕	✕	✓	✕	✕	✕	✕	✓	✓	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✓	✕	✓
BrowserState	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Button	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Chatbot	✕	✕	✓	✕	✕	✕	✓	✕	✕	✕	✓	✕	✓	✕	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✓	✓
Checkbox	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
CheckboxGroup	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
ClearButton	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Code	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
ColorPicker	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Dataframe	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
Dataset	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
DateTime	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
DeepLinkButton	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
DownloadButton	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Dropdown	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
DuplicateButton	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
File	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✓	✓
FileExplorer	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Gallery	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✓	✕	✕	✓	✓
HighlightedText	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
HTML	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
ImageEditor	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
Image	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✓
ImageSlider	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✓
JSON	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Label	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
LoginButton	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Markdown	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Model3D	✕	✓	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
MultimodalTextbox	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓	✓
BarPlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
LinePlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
ScatterPlot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕
Number	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
ParamViewer	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Plot	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Radio	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓
Slider	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
State	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓
Textbox	✕	✕	✓	✓	✕	✕	✕	✕	✕	✕	✕	✓	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✓	✓
Timer	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕
UploadButton	✕	✓	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Video	✕	✓	✕	✕	✕	✓	✕	✓	✓	✓	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✓	✕	✓
SimpleImage	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕	✓

←

Tab

AnnotatedImage

→