`Interface` 类

正如快速入门中所述，gr.Interface 类是 Gradio 中的一个高级抽象，允许您通过简单地指定输入类型和输出类型，为任何 Python 函数快速创建一个演示。回顾我们的第一个演示

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

我们看到 Interface 类通过三个必需参数进行初始化

fn：用于包装用户界面 (UI) 的函数
inputs：用于输入的 Gradio 组件。组件的数量应与函数中的参数数量匹配。
outputs：用于输出的 Gradio 组件。组件的数量应与函数的返回值数量匹配。

在本指南中，我们将深入探讨 gr.Interface 及其多种自定义方式，但在此之前，让我们先更好地了解 Gradio 组件。

Gradio 组件

Gradio 包含 30 多个预置组件（以及许多社区构建的自定义组件），可作为您演示的输入或输出。这些组件对应于机器学习和数据科学中的常见数据类型，例如，gr.Image 组件用于处理输入或输出图像，gr.Label 组件显示分类标签和概率，gr.LinePlot 组件显示折线图等。

组件属性

我们使用了 gr.Textbox 和 gr.Slider 的默认版本，但是如果您想改变 UI 组件的外观或行为呢？

假设您想自定义滑块，使其值范围从 1 到 10，默认值为 2。并且您还想自定义输出文本字段 — 您希望它更大并带有一个标签。

如果您使用 gr.Textbox 和 gr.Slider 的实际类而不是字符串快捷方式，您可以通过组件属性获得更多的可定制性。

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * intensity

demo = gr.Interface(
    fn=greet,
    inputs=["text", gr.Slider(value=2, minimum=1, maximum=10, step=1)],
    outputs=[gr.Textbox(label="greeting", lines=3)],
)

demo.launch()

多输入和输出组件

假设您有一个更复杂的函数，它也有多个输出。在下面的示例中，我们定义了一个接受字符串、布尔值和数字，并返回字符串和数字的函数。

import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
demo.launch()

正如 inputs 列表中的每个组件依次对应函数的每个参数一样，outputs 列表中的每个组件也依次对应函数返回的每个值。

一个图像示例

Gradio 支持多种类型的组件，例如 Image、DataFrame、Video 或 Label。让我们尝试一个图像到图像的函数来感受一下这些组件！

import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()

当使用 Image 组件作为输入时，您的函数将接收一个形状为 (height, width, 3) 的 NumPy 数组，其中最后一个维度表示 RGB 值。我们也将以 NumPy 数组的形式返回图像。

Gradio 处理图像转换为 NumPy 数组以及反向转换的预处理和后处理。您还可以使用 type= 关键字参数来控制执行的预处理。例如，如果您希望您的函数接受图像的文件路径而不是 NumPy 数组，输入 Image 组件可以写成

gr.Image(type="filepath")

您可以在 Gradio 文档中了解更多关于内置 Gradio 组件以及如何自定义它们的信息。

示例输入

您可以提供示例数据，用户可以轻松将其加载到 Interface 中。这有助于演示模型期望的输入类型，并提供一种结合您的模型探索数据集的方式。要加载示例数据，您可以向 Interface 构造函数的 examples= 关键字参数提供一个嵌套列表。外部列表中的每个子列表表示一个数据样本，子列表中的每个元素表示每个输入组件的一个输入。每个组件的示例数据格式在文档中指定。

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        if num2 == 0:
            raise gr.Error("Cannot divide by zero!")
        return num1 / num2

demo = gr.Interface(
    calculator,
    [
        "number",
        gr.Radio(["add", "subtract", "multiply", "divide"]),
        "number"
    ],
    "number",
    examples=[
        [45, "add", 3],
        [3.14, "divide", 2],
        [144, "multiply", 2.5],
        [0, "subtract", 1.2],
    ],
    title="Toy Calculator",
    description="Here's a sample toy calculator.",
)

demo.launch()

您可以将大型数据集加载到示例中，以便通过 Gradio 浏览和与数据集进行交互。示例将自动分页（您可以通过 Interface 的 examples_per_page 参数配置此项）。

继续在更多示例指南中了解示例。

描述性内容

在前面的示例中，您可能已经注意到 Interface 构造函数中的 title= 和 description= 关键字参数，它们有助于用户理解您的应用。

Interface 构造函数中有三个参数用于指定这些内容的显示位置

title：接受文本，可在界面顶部显示，并成为页面标题。
description：接受文本、Markdown 或 HTML，并将其放置在标题正下方。
article：也接受文本、Markdown 或 HTML，并将其放置在界面下方。

annotated

另一个有用的关键字参数是 label=，它存在于每个 Component 中。这会修改每个 Component 顶部的标签文本。您还可以向 Textbox 或 Radio 等表单元素添加 info= 关键字参数，以提供关于其用法的更多信息。

gr.Number(label='Age', info='In years, must be greater than 0')

折叠面板内的附加输入

如果您的预测函数接收许多输入，您可能希望将其中一些输入隐藏在一个折叠面板内，以避免用户界面混乱。Interface 类接受一个 additional_inputs 参数，它类似于 inputs，但其中包含的任何输入组件默认是不可见的。用户必须点击折叠面板才能显示这些组件。附加输入将在标准输入之后，按顺序传递给预测函数。

您可以通过使用可选的 additional_inputs_accordion 参数来自定义折叠面板的外观，该参数接受一个字符串（在这种情况下，它成为折叠面板的标签），或者一个 gr.Accordion() 类的实例（例如，这允许您控制折叠面板默认是打开还是关闭）。

这是一个示例

import gradio as gr

def generate_fake_image(prompt, seed, initial_image=None):
    return f"Used seed: {seed}", "https://dummyimage.com/300/09f.png"

demo = gr.Interface(
    generate_fake_image,
    inputs=["textbox"],
    outputs=["textbox", "image"],
    additional_inputs=[
        gr.Slider(0, 1000),
        "image"
    ]
)

demo.launch()

Interface 类