Gradio从入门到精通（8）---基础组件介绍2

---

一、基础组件详解

1.Dropdown

用途： 提供下拉菜单选项。

初始化参数：

choices: 可选择的选项列表。

value: 默认选中的值。可以是字符串、列表或是一个可调用对象。

type: 组件返回的值的类型，可以是“value”或“index”。

multiselect: 是否允许多选。

max_choices: 选择的最大选项数。

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

info: 组件的描述信息。

allow_custom_value: 是否允许用户输入不在选项列表中的自定义值。

此外，还有用于布局和样式的参数，如scale、min_width、visible、elem_id和elem_classes等 。

Dropdown组件事件监听器方法

change: 当组件的值发生变化时触发。

input: 当用户改变组件的值时触发。

blur: 当组件失去焦点时触发。

select: 当用户选择下拉菜单的选项时触发。

代码如下（示例）：

import gradio as gr  
 
def process_dropdown(choice):  
    return f"You selected: {choice}"  
 
with gr.Interface(fn=process_dropdown, inputs=gr.Dropdown(["Choice 1", "Choice 2", "Choice 3"]), outputs="text") as app:  
    app.launch()
1
2
3
4
5
6
7

2.Image

**用途：**上传图像文件。
注意：在Blocks API中，Image组件通常与Image输出组件一起使用，但在Interface API中，可以直接用于输入。

初始化参数：

source: 指定图像数据的来源，可以是文件（“upload”）、URL（“url”）或两者（“both”），默认为"upload"。

type: 指定图像的类型，可以是"image"（默认）或"file"。"image"表示组件将接收图像数据，"file"表示组件将接收图像文件路径。

shape: 如果指定，组件将期望图像具有特定的尺寸。例如，(100, 100)表示图像应该是100x100像素。

convert_mode: 指定图像数据的转换模式，可以是"RGB"（默认）、“RGBA”、“L”（灰度）等。

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

info: 组件的描述信息。

代码如下（示例）：

import gradio as gr  
  
def process_image(image):  
    # 这里只是简单地将上传的图片返回，实际中你可以在这里添加图像处理或模型预测的代码  
    return image  
  
with gr.Blocks() as demo:  
    with gr.Row():  
        image_input = gr.Image(label="Upload an image")  
        output = gr.Image(label="Processed Image")  
      
    with gr.Column():  
        process_btn = gr.Button("Process Image")  
          
    process_btn.click(fn=process_image, inputs=image_input, outputs=output)  
  
demo.launch(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.Audio

**用途：**用户可以通过Gradio的Audio组件上传音频文件，或直接从麦克风录制实时音频作为模型的输入

初始化参数：

sources: 指定音频数据的来源，可以是文件上传（“upload”）或URL（“url”）。

type: 指定组件接收的数据类型，可以是"audio"（默认，接收音频文件）或"file"（接收文件路径）。

sample_rate: 音频的采样率（单位：Hz）。如果设置，Gradio将尝试将上传的音频转换为该采样率。

mono: 如果设置为True，Gradio将尝试将音频转换为单声道。

bit_depth: 音频的位深度（单位：bits）。如果设置，Gradio将尝试将上传的音频转换为该位深度。

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

info: 组件的描述信息。

示例代码：该代码演示了如何创建一个简单的音频处理界面，允许用户上传音频文件，并显示处理后的音频（尽管在这个例子中并没有实际的音频处理逻辑）。

import gradio as gr  
  
def process_audio(audio):  
    # 在这里可以添加音频处理逻辑  
    # 但为了示例，我们直接返回上传的音频  
    return audio  
  
demo = gr.Interface(fn=process_audio,  
                    inputs=gr.Audio(sources="upload", label="Upload Audio"),  
                    outputs=gr.Audio(label="Processed Audio"))  
  
demo.launch(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12

4.File

**用途：**上传各种类型的文件

初始化参数：

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

info: 组件的描述信息。

multiple: 如果设置为True，允许用户一次选择多个文件上传。

file_types: 一个字符串列表，指定允许上传的文件类型（例如 [“txt”, “csv”]）。

max_upload_size: 最大上传文件大小限制（单位：MB）。

visible: 如果设置为False，则组件在界面上不可见。

示例代码：上传文件，并读取内容

import gradio as gr

def process_file(file):
    # 检查是否有文件被上传
    if not file:
        return "No file uploaded."
    
    try:
        # 使用read()方法读取文件内容，并使用decode()方法将其解码为字符串
        with open(file,'rb') as w:
            file_content = w.read()
            return file_content
        
    except Exception as e:
        # 如果发生错误，返回错误信息
        return f"An error occurred: {e}"

# 创建Gradio界面
iface = gr.Interface(
    fn=process_file,
    inputs=gr.File(label="Upload a file", file_types=["txt", "pdf", "docx", "xlsx"]),
    outputs="text",
    live=True  # 启用实时更新
)

# 启动应用
iface.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

总结

以上两个章节内容介绍了Gradio 常用基础组件的使用，不需要记忆，大家可以根据日常的开发需求进行查找使用即可。