Gradio从入门到精通（7）---基础组件与事件介绍

---

一、基础组件简介（Component）

还记得我们第一节的示例代码吗？还记得我们上一节说的接口类吗？在接口类里面有输出，输出组件，Gradio内置类多种组件，当然你也可以自定义组件，本节开始，我们分别认识这些组件，在实际应用中，可以查阅文档进行使用

该类有三个核心参数：Interface

fn：将用户界面 （UI） 包裹起来的函数
inputs：用于输入的 Gradio 组件。组件数应与函数中的参数数匹配。
outputs：用于输出的 Gradio 组件。组件数应与函数的返回值数匹配。

Gradio支持多种类型的组件，包括但不限于：

**输入组件：**如Textbox（文本框）、Number（数字输入框）、Image（图像上传）、Audio（音频上传/播放）、Checkbox（复选框）、Radio（单选按钮）、Dropdown（下拉菜单）等。这些组件用于接收用户的输入。

**输出组件：**如Label（标签，用于显示文本）、Image（图像显示）、Audio（音频播放）、Markdown（Markdown格式文本显示）、Gallery（图像画廊）等。这些组件用于展示处理结果或信息。

**其他组件：**如Button（按钮，用于触发事件）、Slider（滑动条，用于选择数值）、State（不可见组件，用于在后台存储变量）等。

二、事件（Event）

组件往往还附带它们支持的某些事件，在Gradio中，事件是用户与组件交互时触发的动作。通过定义事件处理函数，可以响应用户的交互行为，并执行相应的操作。Gradio中的事件类型主要包括：

按钮点击事件：当用户点击按钮时触发。可以通过为按钮设置click事件处理函数来响应点击操作。

其他组件交互事件：虽然Gradio的官方文档可能不直接列出所有组件的交互事件，但许多组件（如滑块、下拉菜单等）在交互时都会触发相应的事件。这些事件的处理通常通过组件的回调函数来实现。

三、基础组件详解

1.Textbox

用途： 接收单行文本输入。

初始化参数：
gr.Textbox 组件创建了一个文本区域，用户可以在其中输入文本或者显示输出结果。它提供了多种初始化参数，包括：

value： 文本框的默认文本，可以是一个字符串或者一个在应用加载时调用的函数来设置初始值。

lines： 文本框的最小行数，默认为 1。

max_lines： 文本框的最大行数，默认为 20。

placeholder： 文本框的占位符提示文本。

label： 组件在界面中的名称。

info： 组件的附加描述信息。

show_label： 是否显示标签，默认为 True。

container： 是否在容器中放置该组件，提供一些额外的边框填充，默认为 True。

scale： 相对于相邻组件在一行中的宽度比例，默认为 None。

min_width： 组件的最小像素宽度，默认为 160。

interactive： 是否渲染为可编辑的文本框，默认根据组件是用作输入还是输出来推断。

visible： 组件是否可见，默认为 True。

elem_id： 组件在 HTML DOM 中的 id，可用于 CSS 定位。

elem_classes： 组件在 HTML DOM 中的类，可用于 CSS 定位。

type： 文本框的类型，可以是 ‘text’, ‘password’, ‘email’，默认为 ‘text’。

show_copy_button： 是否显示复制按钮以复制文本框中的文本，默认为 False 。

gr.Textbox 组件还提供了多个事件监听方法，允许在用户与组件交互时执行操作，包括：

change 方法： 当组件的值发生变化时触发。

input 方法： 仅在用户输入时触发。

submit 方法： 当用户在文本框聚焦时按下 Enter 键触发。

blur 方法： 当组件失去焦点时触发。

select 方法： 当用户选择文本框中的文本时触发

import gradio as gr  

def process_text(input_text):  
    return "You entered: " + input_text  

with gr.Interface(fn=process_text, inputs="text", outputs="text") as app:  
    app.launch()

为了绑定事件，我们把上面的程序改一下，通过事件触发，这样就不需要每次输入之后，点击submit了，上面的事件监听使用方法都比较类似，大家可以尝试着使用。

import gradio as gr  

def process_text(input_text):  
    return "You entered: " + input_text  

with gr.Blocks() as demo:
    text_input = gr.Textbox(lines=2, placeholder="输入文本，然后修改它看看...")
    output = gr.Textbox()
    # 使用 change 方法绑定 process_text 函数到 Textbox 的变化事件
    text_input.change(process_text, inputs=text_input, outputs=output)

# 启动应用
demo.launch()

2.Textarea

用途： 接收多行文本输入。

初始化参数：

lines: 这个参数用来指定文本框的最小行数。如果用户输入的文本超过了这个行数，文本框会自动增加行数以适应文本内容。

max_lines: 这个参数用来指定文本框的最大行数。即使用户输入的文本很多，文本框也不会超过这个最大行数。

placeholder: 这是一个占位符文本，当文本框为空时显示，用来提示用户可以输入什么样的文本。

value: 这是文本框的初始值，可以是一个字符串或者一个在应用加载时调用的函数。

interactive: 如果设置为 True，文本框将是可编辑的；如果设置为 False，文本框将被禁用，用户不能编辑里面的内容。

type: 虽然 gr.Textbox 默认是文本输入 (‘text’)，但也可以设置为密码输入 (‘password’) 或电子邮件输入 (‘email’)。

show_copy_button: 如果设置为 True，将显示一个复制按钮，允许用户复制文本框中的内容。

elem_id 和 elem_classes: 这些参数可以用来指定 HTML 元素的 id 和 class，方便进行 CSS 样式定制。

代码如下（示例）：在这个示例中，gr.Textbox 组件被设置为有 4 行的最小高度，用户可以输入多行文本，这与 HTML 中的 元素类似。当用户提交表单时，process_text 函数将被调用，并处理用户输入的文本。

import gradio as gr

# 定义一个处理函数，该函数可以处理多行文本输入
def process_text(input_text):
    # 这里可以添加处理文本的逻辑
    # 例如，统计输入文本的行数
    num_lines = input_text.count('\n') + 1
    return f"您输入了 {num_lines} 行文本。"

# 创建一个 Gradio 接口，使用 Textbox 组件来模拟 Textarea
iface = gr.Interface(
    fn=process_text,
    inputs=gr.Textbox(lines=4, placeholder="在这里输入多行文本..."),
    outputs="text"
)

# 启动应用
iface.launch()

3.Number

用途： 接收数字输入。

import gradio as gr  
 
def process_number(x):  
    return x * 2  
 
with gr.Interface(fn=process_number, inputs="number", outputs="number") as app:  
    app.launch()

4.Slider

用途： 通过滑动条选择数值。

初始化参数：

label: 为滑动条设置一个标签，说明滑动条的用途。

value: 初始值，用户开始滑动前显示的值。

minimum: 滑动条的最小值。

maximum: 滑动条的最大值。

step: 滑动条的步长，即用户每次滑动变化的数值。

info: 提供关于滑动条的额外信息或描述。

interactive: 是否允许用户与滑动条交云，默认为 True。

visible: 控制滑动条是否可见，默认为 True。

elem_id 和 elem_classes: 用于指定 HTML 元素的 id 和 class，方便进行 CSS 定制。

事件监听方法

change: 当滑动条的值发生变化时触发。

input: 当用户拖动滑动条时触发，提供实时反馈。

import gradio as gr  
 
def process_slider(value):  
    return f"You selected: {value}"  
 
with gr.Interface(fn=process_slider, inputs=gr.Slider(minimum=0, maximum=100, label="Select a value"), outputs="text") as app:  
    app.launch()

5.Checkbox

用途： 提供复选框选项。

初始化参数：

label: 为复选框设置的标签，说明其用途。

value: 复选框的初始值，可以是单个值或值的列表。

options: 复选框的选项列表，用户可以从中选择。

info: 提供关于复选框的额外信息或描述。

interactive: 是否允许用户与复选框交互，默认为 True。

visible: 控制复选框是否可见，默认为 True。

elem_id 和 elem_classes: 用于指定 HTML 元素的 id 和 class，方便进行 CSS 定制。

事件监听方法

change: 当复选框的选中状态发生变化时触发。

示例代码：在这个示例中，gr.Checkbox 组件被用来让用户从预定义的选项中选择。用户可以选择一个或多个选项，然后 process_selections 函数将根据用户的选择来执行相应的操作，并返回选择的结果。

import gradio as gr  
 
def process_checkboxes(options):  
    return "You selected: " + ", ".join(options)  
 
with gr.Interface(fn=process_checkboxes, inputs=gr.CheckboxGroup(["Option 1", "Option 2", "Option 3"]), outputs="text") as app:  
    app.launch()

6.Radio

用途： 提供单选按钮选项。

初始化参数：

status_tracker： 状态跟踪器，用于监控界面的状态。

scroll_to_output： 如果设置为True，则在操作完成后会自动滚动到输出组件。

show_progress： 控制等待时是否显示进度动画，可以设置为’full’、‘minimal’或’hidden’。

queue： 如果设置为True，并且启用了队列，请求将被放入队列中。

batch： 如果设置为True，函数应该能够处理一批输入，即接受每个参数的输入值列表，并返回一个元组列表。

max_batch_size： 定义批量处理的最大输入数目，仅在batch=True时相关。

preprocess和postprocess： 控制是否在运行函数前后对组件数据进行预处理和后处理。

cancels： 定义触发此监听器时要取消的其他事件列表。

every： 定义在客户端连接打开时每隔多少秒运行此事件，以秒为单位。

Radio组件的方法：

change方法： 当组件的值发生变化时触发，可以用于创建界面并响应用户的选择。

input方法： 当用户更改组件的值时触发，参数与change方法相同。

select方法： 当用户选择某个选项时触发，使用gradio.SelectData作为事件数据，包含所选选项的值和索引。

示例代码如下：

import gradio as gr  
 
def process_radio(option):  
    return f"You selected: {option}"  
 
with gr.Interface(fn=process_radio, inputs=gr.Radio(["Option A", "Option B", "Option C"]), outputs="text") as app:  
    app.launch()

---

总结

本章介绍了基础组件和事件的概念，并介绍了一些基础组件的使用方法，大家根据实际开发需求，查阅文档进行使用，没有必要记忆。下一节我们继续介绍组件的使用。