AIGC之gradio系列学习教程（二）Components_gr.interface(fn=image_class,inputs = "image",outpu

简述：

        让我们继续了解一下 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。下面是我们的预处理将发送到模型的内容以及我们的后处理将需要的内容的图表。

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

• 文本框中的文本转换为Python str（本质上没有预处理）
• 将输入的数字中的数字转换为Python float（本质上没有预处理）
• 最重要的是，用户提供的图像被转换为numpy.array​​图像中 RGB 值的表示形式

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

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

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

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

• 显示float为数字并直接显示给用户
• 字符串文件路径列表 ( list[str]) 被解释为图像文件路径列表并在浏览器中显示为图库

Interface

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

参数介绍