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()

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)

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)

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()

5.Dataframe

用途： Dataframe 组件是一个强大的工具，允许用户通过类似于电子表格的界面进行数据输入和显示

初始化参数：

• value: list

  • 描述: 默认值，作为一个二维值列表。如果是可调用对象，该函数将在应用加载时被调用，用于设置组件的初始值。

• headers: list

  • 描述: 字符串列表，用于指定列的标题名称。如果为 None，则不显示列标题。

• datatype: list

  • 描述: 指定每列数据的类型，例如 ["str", "number", "str"]。

• row_count: int

  • 描述: 表格的行数。

• col_count: int

  • 描述: 表格的列数。

• editable: bool

  • 描述: 是否允许用户编辑表格内容。

• wrap: bool

  • 描述: 是否允许文本换行。

• height: int

  • 描述: 表格的高度。

• line_breaks: bool

  • 描述: 是否允许在表格中显示换行符。

• column_widths: list

  • 描述: 指定每列的宽度。

事件监听器

Dataframe 组件 支持以下事件监听器，允许你响应用户交互：

• change: 当表格的值发生变化时触发。这可以是由于用户输入或函数更新导致的。
• input: 仅当用户更改表格的值时触发。
• select: 当用户选择或取消选择表格时触发。使用事件数据 gradio.SelectData 来传递信息。

示例代码：

import gradio as gr
import pandas as pd

# 创建一个示例数据框
df = pd.DataFrame({
    "A": [1, 2, 3],
    "B": [4, 5, 6],
    "C": [7, 8, 9]
})

# 应用样式
styler = df.style.highlight_max(color='lightgreen', axis=0)

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            gr.Dataframe(value=df, headers=["A", "B", "C"], datatype=["number", "number", "number"])
            gr.Button("Update")
        with gr.Column():
            gr.Dataframe(styler)

    def update_dataframe():
        return df + 1

    gr.Button.click(update_dataframe, inputs=gr.Button, outputs=gr.Dataframe)

demo.launch()

---

总结

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