Gradio 月活用户突破 100 万！

阅读更多
Gradio logo
  1. 自定义组件
  2. 关键组件概念
←

五分钟自定义组件入门

配置

→

Gradio 组件：关键概念

在本节中，我们将讨论 Gradio 组件的一些重要概念。在开发自己的组件时，理解这些概念非常重要。否则，你的组件行为可能与其他 Gradio 组件非常不同！

提示： 如果你熟悉 Gradio 库的内部原理，例如每个组件的 preprocess 和 postprocess 方法，则可以跳过本节。

交互式与静态

Gradio 中的每个组件都有一个 static 变体，大多数组件也有一个 interactive 版本。static 版本用于组件显示值，用户不能通过与之交互来更改该值。interactive 版本用于用户能够通过与 Gradio UI 交互来更改值。

让我们看一些例子

import gradio as gr

with gr.Blocks() as demo:
   gr.Textbox(value="Hello", interactive=True)
   gr.Textbox(value="Hello", interactive=False)

demo.launch()

这将显示两个文本框。唯一的区别是：你将能够编辑顶部 Gradio 组件的值，而你将无法编辑底部变体的值（即文本框将被禁用）。

也许更有趣的例子是 Image 组件

import gradio as gr

with gr.Blocks() as demo:
   gr.Image(interactive=True)
   gr.Image(interactive=False)

demo.launch()

组件的交互式版本要复杂得多——你可以上传图像或从网络摄像头拍照——而静态版本只能用于显示图像。

并非每个组件都有明显的交互式版本。例如，gr.AnnotatedImage 仅作为静态版本出现，因为无法以交互方式更改注释或图像的值。

你需要记住的内容

  • 如果组件用作任何事件的输入，Gradio 将使用组件的交互式版本（如果可用）；否则，将使用静态版本。

  • 当你设计自定义组件时，你必须在 Python 类的构造函数中接受布尔关键字 interactive。在前端，你可以接受 interactive 属性，一个 bool 值，表示组件应该是静态的还是交互式的。如果你在前端不使用此属性，则组件在交互式或静态模式下看起来相同。

值以及如何预处理/后处理

组件最重要的属性是它的 value。每个组件都有一个 value。该值通常由前端的用户设置（如果组件是交互式的）或显示给用户（如果是静态的）。当用户触发事件时，或者在预测结束时由用户的函数返回时，也会将此值发送到后端函数。

因此，这个值会被传递很多次，但有时值的格式需要在前端和后端之间更改。看这个例子

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(width=200, height=200), "image")
demo.launch()

这将创建一个 Gradio 应用，该应用具有 Image 组件作为输入和输出。在前端，Image 组件实际上会将文件上传到服务器并发送文件路径，但这会在发送到用户的函数之前转换为 numpy 数组。相反，当用户从其函数返回 numpy 数组时，numpy 数组将转换为文件，以便可以发送到前端并由 Image 组件显示。

提示： 默认情况下，`Image` 组件将 numpy 数组发送到 python 函数，因为它是机器学习工程师的常见选择，尽管 Image 组件也支持使用 `type` 参数的其他格式。阅读 `Image` 文档 以了解更多信息。

每个组件都执行两个转换

  1. preprocess：将来自前端的 value 格式转换为 python 函数期望的格式。这通常涉及从 Web 友好的 JSON 结构转换为 python 原生数据结构，例如 numpy 数组或 PIL 图像。Audio、Image 组件是 preprocess 方法的很好的例子。

  2. postprocess：将 python 函数返回的值转换为前端期望的格式。这通常涉及从 python 原生数据结构（如 PIL 图像）转换为 JSON 结构。

需要记住的内容

  • 每个组件都必须实现 preprocess 和 postprocess 方法。在极少数情况下，如果不需要进行转换，只需按原样返回值即可。Textbox 和 Number 就是这样的例子。

  • 作为组件作者，您可以控制前端显示的数据格式以及使用您组件的人员将接收的数据格式。考虑一下 python 开发者会觉得直观的人体工程学数据结构，并使用 preprocess 和 postprocess 控制从 Web 友好的 JSON 数据结构到 Python 数据结构的转换（反之亦然）。

组件的“示例版本”

Gradio 应用程序支持提供示例输入——这些示例输入对于帮助用户开始使用您的 Gradio 应用程序非常有用。在 gr.Interface 中，您可以使用 examples 关键字提供示例，在 Blocks 中，您可以使用特殊的 gr.Examples 组件提供示例。

在此屏幕截图的底部，我们展示了一个猎豹的微型示例图像，当单击该图像时，它将在输入图像组件中填充相同的图像

img

要启用示例视图，您必须在 frontend 目录的顶部拥有以下两个文件

  • Example.svelte：这对应于组件的“示例版本”
  • Index.svelte：这对应于“常规版本”

在后端，通常不需要执行任何操作。用户提供的示例 value 使用前面描述的相同 .postprocess() 方法进行处理。如果您想以不同的方式处理数据（例如，如果 .postprocess() 方法计算量很大），那么您可以为您的自定义组件编写自己的 .process_example() 方法，这将代替使用 .postprocess() 方法。

Example.svelte 文件和 process_example() 方法将在专门的 前端 和 后端 指南中更深入地介绍。

需要记住的内容

  • 如果您希望您的组件用作输入，则定义“示例”视图非常重要。
  • 如果您不这样做，Gradio 将使用默认视图，但它不会像它可以达到的那样信息丰富！

结论

现在您已经了解了关于 Gradio 组件最需要记住的重要部分，您可以开始设计和构建自己的组件了！

←

五分钟自定义组件入门

配置

→