一、基础组件简介(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()
总结
本章介绍了基础组件和事件的概念,并介绍了一些基础组件的使用方法,大家根据实际开发需求,查阅文档进行使用,没有必要记忆。下一节我们继续介绍组件的使用。