Gradio快速入门 — 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.Plot组件显示各种图表，等等。

静态和交互式组件

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

预处理和后处理

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

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

组件属性

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组件作为输入时，您的函数将收到一个形状为 的 NumPy 数组(height, width, 3)，其中最后一个维度代表 RGB 值。我们还将以 NumPy 数组的形式返回一张图片。

如上所述，Gradio 处理预处理和后处理，将图像转换为 NumPy 数组，反之亦然。您还可以使用type=关键字参数控制执行的预处理。例如，如果您希望函数将文件路径转换为图像而不是 NumPy 数组，则输入Image组件可以写成：

gr.Image(type="filepath", shape=...)

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

示例输入

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

import gradio as gr
#from foo import BAR
#
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. Allows you to calculate things like $2+2=4$",
)

demo.launch()

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

继续在“更多示例”指南中了解有关示例。

描述性内容

在前面的例子中，您可能注意到构造函数中的title=和description=关键字参数Interface可以帮助用户理解您的应用程序。

构造函数中有三个参数Interface用于指定内容的存放位置：

• title：接受文本，并可以将其显示在界面的最顶部，同时也成为页面的标题。
• description：接受文本、markdown 或 HTML 并将其放置在标题下方。
• article：它还接受文本、markdown 或 HTML 并将其放置在界面下方。

注意：如果您正在使用该类，则可以使用或组件Blocks在应用程序的任何位置插入文本、markdown 或 HTML 。
gr.Markdown(...)``gr.HTML(...)

另一个有用的关键字参数是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()