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 函数会处理这些值并生成输出，这些输出将显示在输出组件中。

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

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

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

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

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

集成实例UI

总结

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

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

参考：

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/132486