如何使用Gradio构建机器学习Web应用

你好，亲爱的读者们！今天，我将向你们介绍一个强大的Python库，它可以让你在几分钟内构建出令人印象深刻的机器学习Web应用。无需深厚的编程知识，Gradio将成为你的得力助手，助你将机器学习模型和数据科学工作流变成令人愉悦的应用程序。

开篇故事

你是否曾经想要将你的机器学习模型展示给他人，但却发现这个过程充满了繁琐的工作和技术挑战？或者你是否希望快速部署你的模型，并让用户通过浏览器与之互动？如果是的话，那么Gradio正是你需要的工具。

什么是Gradio？

Gradio是一个开源的Python库，用于构建机器学习和数据科学演示和Web应用程序。通过Gradio，你可以快速创建一个漂亮的用户界面，围绕你的机器学习模型或数据科学工作流，并允许人们通过浏览器拖放他们自己的图像、粘贴文本、录制自己的声音，并与你的演示互动。

Gradio的用途广泛，包括：

• 演示 你的机器学习模型，供客户、合作伙伴、用户或学生使用。
• 快速部署 模型，生成可分享的链接，并获得模型性能的反馈。
• 在开发过程中交互式地调试 你的模型，使用内置的操作和解释工具。

快速入门

先决条件：Gradio需要Python 3.8或更高版本，仅此而已！

Gradio的功能

与他人分享你的机器学习模型、API或数据科学工作流的最佳方式之一是创建一个允许用户或同事在其浏览器中尝试演示的交互式应用程序。

Gradio允许你在Python中构建演示并分享它们，通常只需几行代码！那么，让我们开始吧。

Hello，世界

要使用一个简单的“Hello，World”示例运行Gradio，请按照以下三个步骤进行操作：

1. 使用pip安装Gradio：

pip install gradio

2. 将以下代码保存为Python脚本并运行，或在Jupyter Notebook（或Google Colab）中运行：

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

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

demo.launch()

我们将导入的名称缩短为gr，以提高Gradio代码的可读性。这是一种被广泛采用的约定，你应该遵循，以便任何与你的代码一起工作的人都能轻松理解。

3. 在Jupyter Notebook中，演示将自动显示，或者如果在脚本中运行，则会在浏览器中弹出，并在http://localhost:7860上运行：

在本地开发时，如果希望将代码作为Python脚本运行，可以使用Gradio CLI以重新加载模式启动应用程序，这将提供无缝快速的开发。了解有关重新加载的更多信息，请参阅自动重新加载指南。

gradio app.py

注意：也可以使用python app.py，但它不会提供自动重新加载机制。

Interface 类

你会注意到，为了创建演示，我们创建了一个gr.Interface。这个Interface类可以将用户界面包装在任何Python函数周围。在上面的示例中，我们看到了一个简单的基于文本的函数，但该函数可以是任何东西，从音乐生成器到税收计算器再到预训练机器学习模型的预测函数。

核心的Interface类初始化时需要三个必需参数：

• fn：要在其周围包装UI的函数
• inputs：用于输入的组件（例如 "text"、"image" 或 "audio"）
• outputs：用于输出的组件（例如 "text"、"image" 或 "label"）

让我们更详细地看看这些用于提供输入和输出的组件。

组件属性

我们在前面的示例中看到了一些简单的Textbox组件，但如果你想更改UI组件的外观或行为，该怎么办？

假设你想要自定义输入文本字段 - 例如，你希望它更大，并且有一个文本占位符。如果我们使用Textbox的实际类而不是使用字符串快捷方式，你可以通过组件属性获得更多的自定义能力。

import gradio as gr

def greet(name

):
    return "Hello " + name + "!"

demo = gr.Interface(
    fn=greet,
    inputs=gr.Textbox(lines=2, placeholder="在这里输入姓名..."),
    outputs="text",
)
demo.launch()

多个输入和输出组件

假设你有一个更复杂的函数，带有多个输入和输出。在下面的示例中，我们定义了一个函数，该函数接受一个字符串、一个布尔值和一个数字，并返回一个字符串和一个数字。请看如何传递输入和输出组件的列表。

import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "早上好" if is_morning else "晚上好"
    greeting = f"{salutation} {name}。今天气温是{temperature}度"
    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(shape=(200, 200)), "image")
demo.launch()

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

你还可以使用type=关键字参数设置组件使用的数据类型。例如，如果你希望你的函数接受图像文件的文件路径而不是NumPy数组，那么输入的Image组件可以这样写：

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

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

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

聊天机器人

Gradio包括一个高级类gr.ChatInterface，它类似于gr.Interface，但专门设计用于聊天机器人的UI。gr.ChatInterface类也包装一个函数，但这个函数必须具有特定的签名。函数应该接受两个参数：message和history（参数名可以是任何名字，但必须按照这个顺序）

• message：表示用户输入的str
• history：表示到目前为止的会话的list的list。每个内部列表包含两个str，表示一对：[用户输入，机器人回复]。

除此之外，gr.ChatInterface没有必需的参数（尽管有几个用于自定义UI的参数可用）。

以下是一个玩具示例：

import random
import gradio as gr

def random_response(message, history):
    return random.choice(["是的", "不是"])

demo = gr.ChatInterface(random_response)

demo.launch()

你可以在这里阅读更多关于gr.ChatInterface的信息。

Blocks：更灵活和可控

Gradio提供了两种构建应用程序的方法：

1. Interface 和 ChatInterface，为创建演示提供了高级抽象，这是我们到目前为止讨论的内容。

2. Blocks，这是一种低级API，用于设计具有更灵活布局和数据流的Web应用程序。Blocks允许你做一些事情，比如展示多个数据流和演示、控制组件出现在页面的位置、处理复杂的数据流（例如，输出可以作为其他函数的输入），以及根据用户交互更新组件的属性/可见性 - 仍然都是在Python中。如果你需要这种自定义能力，可以尝试使用Blocks！

Hello，Blocks

让我们看一个简单示例。请注意，此处的API与Interface不同。

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

with gr.Blocks() as demo:
    name = gr.Textbox(label="姓名")
    output = gr.Textbox(label="输出框")
    greet_btn = gr.Button("问候")
    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

demo.launch()

需要注意的事项：

• 使用with子句制作Blocks，此子句中创建的任何组件都会自动添加到应用程序中。
• 组件按垂直顺序出现在应用程序中，按照创建的顺序排列。（稍后我们将介绍如何自定义布局！）
• 创建了一个Button，然后为该按钮添加了一个click事件侦听器。这个API看起来应该很熟悉！像Interface一样，click方法接受Python函数、输入组件和输出组件。

更复杂的示例

以下是一个应用程序，让你感受一下使用Blocks可以实现的可能性：

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("使用此演示翻转文本或图像文件。")
    with gr.Tab("翻转文本"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("翻转")
    with gr.Tab("翻转图像"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("翻转")

    with gr.Accordion("展开查看更多！"):
        gr.Markdown("看看我...")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

这里有更多的东西！我们将在使用Blocks构建部分介绍如何创建像这样的复杂Blocks应用程序。

恭喜，你现在已经熟悉了Gradio的基础知识！ ? 转到我们的下一个指南了解更多关于Gradio的关键特性。

许可证

Gradio根据位于此存储库根目录的LICENSE文件中的Apache许可证2.0获得许可。

引用

还请阅读我们的论文Gradio：在野外轻松共享和测试ML模型，ICML HILL 2019，如果您在您的工作中使用了Gradio，请引用它。

@article{abid2019gradio,
  title = {Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
  author = {Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
  journal = {arXiv preprint arXiv:1906.02569},
  year = {2019},
}