`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 顶部的标签文本。你还可以添加 info= 关键字参数到表单元素（如 Textbox 或 Radio）中，以提供有关其用法的更多信息。

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

折叠面板内的附加输入

如果你的预测函数需要很多输入，你可能希望将其中一些隐藏在折叠面板中，以避免UI界面过于杂乱。 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 类