当前位置:   article > 正文

Gradio从入门到精通(7)---基础组件与事件介绍_gradio 单选

gradio 单选


一、基础组件简介(Component)

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

该类有三个核心参数:Interface

fn:将用户界面 (UI) 包裹起来的函数
inputs:用于输入的 Gradio 组件。组件数应与函数中的参数数匹配。
outputs:用于输出的 Gradio 组件。组件数应与函数的返回值数匹配。
  • 1
  • 2
  • 3
  • 4
  • 5

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述
为了绑定事件,我们把上面的程序改一下,通过事件触发,这样就不需要每次输入之后,点击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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这里插入图片描述

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

该处使用的url网络请求的数据。

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述


总结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/898128
推荐阅读
相关标签
  

闽ICP备14008679号