从零开始-与大语言模型对话学技术-gradio篇（2）

前言

本文部分内容来自网上搜集与个人实践。如果任何信息存在错误,欢迎读者批评指正。本文仅用于学习交流,不用作任何商业用途。

目录

前言

概述

常用gradio组件

1. gradio.components.Image ：定义图像输入或输出组件。可以用来上传、显示和处理图像。

2. gr.components.Dropdown：定义下拉选择框控件。可以用来在多个选项中选择一个。

3. gr.components.Textbox：定义文本框控件。可以用来输入和显示文本。

gradio.components.Textbox 类的 __init__ 方法有以下参数：

4. gr.components.Radio：定义单选按钮控件。可以用来在多个选项中选择一个。

5. gr.components.Checkbox：定义复选框控件。可以用来表示是否选中某个选项。

6. gr.components.Slider：定义滑块控件。可以用来在一定范围内选择一个数值。

集成实例代码

集成实例UI

​编辑

总结

---

概述

Gradio是一个开源的Python库，用于构建机器学习和数据科学演示和Web应用程序。使用Gradio，您可以快速地围绕您的机器学习模型或数据科学工作流程创建一个漂亮的用户界面，并让人们通过拖放自己的图像、粘贴文本、录制自己的声音并通过浏览器与您的演示进行交互来“试用”它

点击上方字体可跳转到官方文档

常用gradio组件

1. gradio.components.Image ：定义图像输入或输出组件。可以用来上传、显示和处理图像。

gradio.components.Image 类的 __init__ 方法有以下参数：

• value：PIL Image、numpy 数组、路径或 URL，用于设置 Image 组件的默认值。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。
• shape：(宽度, 高度) 用于裁剪和调整图像大小的形状；如果为 None，则匹配输入图像大小。对于宽度或高度，传递 None 以仅裁剪和调整另一个大小。
• image_mode：如果为彩色，则为 “RGB”；如果为黑白，则为 “L”。
• invert_colors：是否将图像作为预处理步骤进行反转。
• source：图像的来源。“upload” 创建一个框，用户可以在其中放置图像文件；“webcam” 允许用户从其网络摄像头拍摄快照；“canvas” 默认为可编辑并绘制工具的白色图像。
• tool：用于编辑的工具。“editor” 允许全屏编辑器（如果 source 为 “upload” 或 “webcam”，则默认为此），“select” 提供裁剪和缩放工具，“sketch” 允许您创建二进制草图（如果 source=“canvas”，则默认为此），并且 “color-sketch” 允许您创建不同颜色的草图。可以使用 “color-sketch” 和 source=“upload” 或 “webcam” 来允许在图像上绘制草图。也可以使用 “sketch” 和 “upload” 或 “webcam” 在图像上创建遮罩，在这种情况下，图像和遮罩都作为带有键 “image” 和 “mask” 的字典分别传递到函数中。
• type：在传递到预测函数之前将图像转换为的格式。“numpy” 将图像转换为形状为 (height, width, 3)、值从 0 到 255 的 numpy 数组，“pil” 将图像转换为 PIL 图像对象，“filepath” 传递一个包含图像的临时文件的 str 路径。
• label：接口中的组件名称。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则允许用户上传和编辑图像；如果为 False，则只能用于显示图像。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• streaming：如果在实时接口中使用且值为 True，则会自动流式传输网络摄像头源。仅当 source 为 ‘webcam’ 时有效。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。
• mirror_webcam：如果为 True，则镜像网络摄像头。默认值为 True。
• brush_radius：笔刷大小（仅适用于 Sketch）。默认值为 None，选择合理的默认值。

2. gr.components.Dropdown：定义下拉选择框控件。可以用来在多个选项中选择一个。

gradio.components.Dropdown 类的 __init__ 方法有以下参数：

• choices：要从中选择的选项列表。
• value：下拉列表中默认选中的值。如果为 None，则默认情况下不选中任何值。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。
• type：组件返回的值的类型。“value” 返回所选选项的字符串，“index” 返回所选选项的索引。
• multiselect：如果为 True，则可以选择多个选项。
• max_choices：可以选择的最大选项数。如果为 None，则不强制执行任何限制。
• label：接口中的组件名称。
• info：附加组件描述。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则此下拉列表中的选项将可选择；如果为 False，则禁用选择。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。
• allow_custom_value：如果为 True，则允许用户输入不在选项列表中的自定义值。

3. gr.components.Textbox：定义文本框控件。可以用来输入和显示文本。

gradio.components.Textbox 类的 __init__ 方法有以下参数：

• value：文本区域中提供的默认文本。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。
• lines：文本区域中提供的最小行数。
• max_lines：文本区域中提供的最大行数。
• placeholder：在文本区域后面提供的占位符提示。
• label：接口中的组件名称。
• info：附加组件描述。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则将其呈现为可编辑文本框；如果为 False，则禁用编辑。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。
• type：文本框的类型。其中之一：‘text’、‘password’、‘email’。默认值为 ‘text’。

4. gr.components.Radio：定义单选按钮控件。可以用来在多个选项中选择一个。

gradio.components.Radio 类的 __init__ 方法有以下参数：

• choices：要从中选择的选项列表。
• value：默认选中的按钮。如果为 None，则默认情况下不选中任何按钮。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。
• type：组件返回的值的类型。“value” 返回所选选项的字符串，“index” 返回所选选项的索引。
• label：接口中的组件名称。
• info：附加组件描述。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则此单选按钮组中的选项将可选择；如果为 False，则禁用选择。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。

5. gr.components.Checkbox：定义复选框控件。可以用来表示是否选中某个选项。

gradio.components.Checkbox 类的 __init__ 方法有以下参数：

• value：如果为 True，则默认选中。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。
• label：接口中的组件名称。
• info：附加组件描述。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则此复选框可以选中；如果为 False，则禁用选中。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。

6. gr.components.Slider：定义滑块控件。可以用来在一定范围内选择一个数值。

gradio.components.Slider 类的 __init__ 方法有以下参数：

• minimum：滑块的最小值。
• maximum：滑块的最大值。
• value：默认值。如果是可调用的，那么每当应用加载时都会调用该函数以设置组件的初始值。如果 randomized=True，则忽略。
• step：滑块值之间的增量。
• label：接口中的组件名称。
• info：附加组件描述。
• every：如果 value 是可调用的，则在客户端连接打开时每隔 ‘every’ 秒运行一次函数。否则无效。必须启用队列。可以通过此组件的 .load_event 属性访问事件（例如取消它）。
• show_label：如果为 True，则显示标签。
• interactive：如果为 True，则滑块将可调；如果为 False，则禁用调整。如果未提供，则根据组件是作为输入还是输出使用来推断。
• visible：如果为 False，则组件将被隐藏。
• elem_id：一个可选字符串，被分配为 HTML DOM 中此组件的 id。可以用于定位 CSS 样式。
• elem_classes：一个可选字符串列表，被分配为 HTML DOM 中此组件的类。可以用于定位 CSS 样式。
• randomize：如果为 True，则当应用加载时，滑块的值在由最小值和最大值给定的范围内随机取值。

集成实例代码

import gradio as gr

# 定义一个处理多种 Gradio 输入组件值的函数
def greet(textbox, dropdown, radio, checkbox, slider, image, audio, video, file, number, dataframe, color):
    # 创建一个包含用户选择的字符串
    output_text = f"您选择了：{textbox}，{dropdown}，{radio}，{checkbox}，滑块值：{slider}，数字：{number}，颜色：{color}"
    # 创建一个包含用户选择的 Markdown 字符串（加粗文本）
    output_markdown = f"**您选择了**：{textbox}，{dropdown}，{radio}，{checkbox}，滑块值：{slider}，数字：{number}，颜色：{color}"
    # 创建一个包含用户输入选项的 JSON 字典
    output_json = {
        "textbox": textbox,
        "dropdown": dropdown,
        "radio": radio,
        "checkbox": checkbox,
        "slider": slider,
        "number": number,
        "color": color
    }

    # 保存图像（如果提供了输入图像）
    output_image = None
    if image is not None:
        output_image = "output_image.png"
        image.save(output_image)

    # 保存音频（如果提供了输入音频）
    output_audio = None
    if audio is not None:
        output_audio = "output_audio.wav"
        with open(output_audio, "wb") as f:
            f.write(audio)

    # 保存视频（如果提供了输入视频）
    output_video = None
    if video is not None:
        output_video = "output_video.mp4"
        with open(output_video, "wb") as f:
            f.write(video)

    # 保存文件（如果提供了输入文件）
    output_file = None
    if file:
        output_file = 'example_output.txt'
        with open(output_file, 'w') as f:
            f.write(output_text)

    # 处理数据框（如果提供了输入数据框）
    output_dataframe = None
    if dataframe is not None:
        output_dataframe = dataframe.to_html(index=False)

    # 返回颜色
    output_color = "您选择的颜色是：{color}"

    # 返回处理后的各种输出组件值
    return None, output_text, None, output_markdown, output_image, output_audio, output_json, output_file, output_video, output_dataframe, output_color

# 创建一个 Gradio Interface 实例，包含多个输入和输出组件
iface2 = gr.Interface(
    greet,
    [
        gr.components.Textbox(lines=2, placeholder="请输入文本…"),
        gr.components.Dropdown(choices=["选项A", "选项B", "选项C"]),
        gr.components.Radio(choices=["选项1", "选项2", "选项3"]),
        gr.components.Checkbox(label="选择此选项"),
        gr.components.Slider(minimum=10, maximum=90),
        gr.components.Image(shape=(100, 100)),
        gr.components.Audio(),
        gr.components.Video(),
        gr.components.File(),
        gr.components.Number(),
        gr.components.Dataframe(headers=["列A", "列B", "列C"]),
        gr.components.ColorPicker(),  # 添加颜色选择器输入组件
    ],
    outputs=[
        gr.components.Textbox(),
        gr.components.Textbox(),
        gr.components.Textbox(),
        gr.components.Markdown(),
        gr.components.Image(),
        gr.components.Audio(),
        gr.components.Json(),
        gr.components.File(),
        gr.components.Video(),
        gr.components.HTML(),
        gr.components.Textbox(),  # 添加新的输出组件
    ],
    title="Gradio 示例",
    description="这是一个 Gradio 示例应用。",
    examples=[
        [
            "您好",
            "选项A",
            "选项1",
            True,
            25,
            "path/to/image.png",
            "path/to/audio.wav",
            "path/to/video.mp4",
            "path/to/file.txt",
            42,
            [
                ["值A1", "值B1", "值C1"],
                ["值A2", "值B2", "值C2"],
            ],
            "#FF0000",  # 颜色选择器示例值
        ]
    ],
).launch()

请确保使用实际文件路径替换 "path/to/image.png"、"path/to/audio.wav"、"path/to/video.mp4" 和 "path/to/file.txt"。在 Gradio 示例中，用户可以选择各种输入组件值，然后点击“提交”按钮。greet 函数会处理这些值并生成输出，这些输出将显示在输出组件中。

这是每个输入组件的简要说明：

1. Textbox：用户可以输入多行文本。
2. Dropdown：用户可以从下拉菜单中选择一个选项。
3. Radio：用户可以在单选按钮组中选择一个选项。
4. Checkbox：用户可以勾选一个复选框。
5. Slider：用户可以通过滑动滑块选择一个值。
6. Image：用户可以上传一张图片。
7. Audio：用户可以上传一段音频。
8. Video：用户可以上传一个视频。
9. File：用户可以上传一个文件。
10. Number：用户可以输入一个数字。
11. Dataframe：用户可以输入一个数据框。
12. ColorPicker：用户可以选择一种颜色。

在输出组件中，以下内容将显示给用户：

1. 处理后的文本输入值。
2. 以 Markdown 格式显示的处理后的输入值。
3. 用户上传的图像（如果有）。
4. 用户上传的音频（如果有）。
5. 一个包含处理后的输入值的 JSON 字典。
6. 一个包含处理后的输入值的文本文件（如果用户上传了文件）。
7. 用户上传的视频（如果有）。
8. 以 HTML 格式显示的用户输入的数据框（如果有）。
9. 用户选择的颜色。

这个示例展示了如何使用 Gradio 编写一个包含多种输入和输出组件的应用。用户可以通过这个应用与模型交互，提供输入并查看输出。

集成实例UI

总结

从零开始-与大语言模型对话学技术-gradio篇（1）

这篇文章进一步介绍gradio常用API具体用法与实例，希望以上的内容对你有所帮助，喜欢的可以给博主来一个三连，以上还有往期跳转连接，下一章更新我的人脸识别UIdemo。
 

参考：

Gradio官网：https://www.gradio.app/

Gradio官方文档：https://gradio.app/docs