python系列&deep_study系列：Gradio中文教程（四）The Interface class

---

Gradio中文教程（四）The Interface class

接口类

在快速入门中提到的，<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()

我们看到 <gr.Interface> 类被初始化时需要三个必需的参数：

• • ：要围绕其创建用户界面（UI）的函数。
• • ：用于输入的 Gradio 组件。组件的数量应该与你的函数参数数量相匹配。
• • ：用于输出的 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组件作为输入时，你的函数将接收一个形状为(height, width, 3)的NumPy数组，其中最后一个维度代表RGB值。我们也将以NumPy数组的形式返回图像。

你还可以使用type=关键字参数来设置组件使用的数据类型。例如，如果你想让你的函数接受一个图像文件路径而不是NumPy数组，输入的Image组件可以写成：

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

还要注意的是，我们的输入Image组件带有一个编辑按钮 ，允许对图像进行裁剪和缩放。以这种方式操作图像可以帮助揭示机器学习模型中的偏差或隐藏的缺陷！

你可以在Gradio文档中阅读更多关于许多组件以及如何使用它们的信息

示例输入

你可以提供示例数据，用户可以轻松加载到Interface中。这有助于展示模型期望的输入类型，并提供一种探索数据集与模型结合的方式。要加载示例数据，你可以向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浏览和与数据集交互。示例将自动分页（你可以通过Interface的examples_per_page=参数来配置这一点）。

继续在“More On Examples”指南中学习有关示例的内容。

描述性内容

在前面的示例中，你可能已经注意到Interface构造函数中的title=和description=关键字参数，这些参数帮助用户理解你的应用。

Interface构造函数中有三个参数来指定这些内容应该放在哪里：

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

如果你使用的是Blocks API，你可以使用gr.Markdown(...)或gr.HTML(...)组件在任何地方插入文本、Markdown或HTML，其中描述性内容位于Component构造函数内部。

另一个有用的关键字参数是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将有一个“标记”按钮。当测试你的Interface的用户看到有趣的输出输入时，例如错误或意外的模型行为，他们可以标记输入供你审查。在Interface构造函数的flagging_dir=参数提供的目录中，一个CSV文件将记录被标记的输入。如果界面涉及文件数据，例如Image和Audio组件，也会创建文件夹来存储那些被标记的数据。

例如，对于上面显示的计算器界面，我们将在下面显示的标记目录中存储被标记的数据：

+-- calculator.py
+-- flagged/
|   +-- logs.csv
flagged/logs.csv

num1,operation,num2,Output
5,add,7,12
6,subtract,1.5,4.5

对于之前显示的棕褐色界面，我们将在下面显示的标记目录中存储被标记的数据：

+-- sepia.py
+-- flagged/
|   +-- logs.csv
|   +-- im/
|   |   +-- 0.png
|   |   +-- 1.png
|   +-- Output/
|   |   +-- 0.png
|   |   +-- 1.png
flagged/logs.csv

im,Output
im/0.png,Output/0.png
im/1.png,Output/1.png

如果你希望用户提供标记的原因，你可以将一个字符串列表传递给Interface的flagging_options参数。用户在标记时必须选择其中一个字符串，这将作为CSV的额外列保存。

---

老刘

Gradio中文教程（四）The Interface class