AIGC之gradio系列学习教程（二）Components

简述：

        让我们继续了解一下 Gradio 的一些主要功能。本指南旨在对构建演示时应注意的各种事项进行高级概述。

Components

Gradio 包含 30 多个预构建组件（以及许多用户构建的自定义组件），只需一行代码即可在演示中用作输入或输出。这些组件对应于机器学习和数据科学中的常见数据类型，例如，gr.Image组件被设计为处理输入或输出图像、组件gr.Label显示分类标签和概率、gr.Plot组件显示各种类型的图等等。

每个组件都包含控制组件属性的各种构造函数属性。例如，您可以gr.Textbox使用lines构造函数中的参数（采用正整数）来控制 a 中的行数。或者，您可以gr.Image使用sources参数（采用类似 的列表）来控制用户在组件中提供图像的方式["webcam", "upload"]。

静态和交互组件

每个组件都有一个旨在显示数据的静态版本，大多数组件还有一个旨在让用户输入或修改数据的交互式版本。通常，您不需要考虑这种区别，因为当您构建 Gradio 演示时，Gradio 会根据组件是用作输入还是输出来自动确定该组件应该是静态的还是交互式的。但是，您可以使用每个组件支持的参数手动设置它。interactive

预处理和后处理

当组件用作输入时，Gradio 会自动处理所需的预处理，将数据从用户浏览器发送的类型（例如上传的图像）转换为函数可以接受的形式（例如数组numpy） 。

类似地，当组件用作输出时，Gradio 会自动处理所需的后处理，将数据从函数返回的数据（例如图像路径列表）转换为可以在用户浏览器中显示的形式（图像库）。

考虑一个示例演示，其中包含三个输入组件（gr.Textbox、gr.Number和gr.Image）和两个输出（gr.Number和gr.Gallery），它们用作图像到图像生成模型的 UI。下面是我们的预处理将发送到模型的内容以及我们的后处理将需要的内容的图表。

在此图中，以下预处理步骤将数据从浏览器发送到您的函数：

图像被转换为​​ NumPy 数组，因为它们是机器学习工作流程的常见格式。您可以在构造组件时使用组件的参数来控制预处理。例如，如果您使用Image以下参数实例化组件，它会将图像预处理为以下PIL格式：

img = gr.Image(type="pil")

后处理更简单！ Gradio 自动识别返回数据的格式（例如，用户的函数是否返回组件的numpy数组或str文件路径gr.Image？）并将其适当地后处理为浏览器可以显示的格式。

因此，在上图中，发生了以下后处理步骤将从用户函数返回的数据发送到浏览器：

Interface

描述 

Interface 是 Gradio 的主要高级类，允许您用几行代码围绕机器学习模型（或任何 Python 函数）创建基于 Web 的 GUI/演示。您必须指定三个参数：(1) 为 (2) 所需输入组件和 (3) 所需输出组件创建 GUI 的函数。其他参数可用于控制演示的外观和行为。

用法示例 

import gradio as gr

def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}

demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()

参数介绍

可调用

必需的

包装接口的函数。通常是机器学习模型的预测函数。函数的每个参数对应于一个输入组件，并且函数应返回单个值或值的元组，元组中的每个元素对应于一个输出组件。

STR |组件|列表[字符串|组件]|没有任何

必需的

单个 Gradio 组件或 Gradio 组件列表。组件可以作为实例化对象传递，也可以通过其字符串快捷方式引用。输入组件的数量应与 fn 中参数的数量相匹配。如果设置为 None，则仅显示输出组件。

STR |组件|列表[字符串|组件]|没有任何

必需的

单个 Gradio 组件或 Gradio 组件列表。组件可以作为实例化对象传递，也可以通过其字符串快捷方式引用。输出组件的数量应与 fn 返回的值的数量相匹配。如果设置为 None，则仅显示输入组件。

列表[任意] |列表[列表[任意]] | STR |没有任何

默认值：无

函数的示例输入；如果提供，则显示在 UI 组件下方，并且可以单击以填充界面。应该是嵌套列表，其中外部列表​​由样本组成，每个内部列表由与每个输入组件相对应的输入组成。还可以提供示例目录的字符串路径，但它应该位于运行 gradio 应用程序的 python 文件所在的目录中。如果有多个输入组件并提供了目录，则目录中必须存在 log.csv 文件以链接相应的输入。

布尔 |没有任何

默认值：无

如果为 True，则将示例缓存在服务器中以实现示例的快速运行。如果fn是生成器函数，则最后生成的值将用作输出。 HuggingFace Spaces 中的默认选项是 True。其他地方的默认选项是 False。

整数

默认值：10

如果提供示例，则每页显示多少个。

布尔值

默认值：假

如果任何输入发生更改，界面是否应自动重新运行。

STR |没有任何

默认值：无

界面的标题；如果提供，将以大字体显示在输入和输出组件上方。在浏览器窗口中打开时也用作选项卡标题。

STR |没有任何

默认值：无

接口的描述；如果提供，则以常规字体显示在输入和输出组件上方以及标题下方。接受 Markdown 和 HTML 内容。

STR |没有任何

默认值：无

解释界面的扩展文章；如果提供，将以常规字体显示在输入和输出组件下方。接受 Markdown 和 HTML 内容。如果它是指向可下载远程文件的 HTTP(S) 链接，则会显示该文件的内容。

STR |没有任何

默认值：无

在社交媒体上共享 Web 演示时用作显示图像的图像的字符串路径或 URL。

主题 | STR |没有任何