五分钟创建自定义组件

Gradio 允许开发者创建自己的自定义组件并在 Gradio 应用中使用。您可以将您的组件发布为 Python 包，以便其他用户也可以使用它们。

用户将能够将 Gradio 现有所有功能，例如 gr.Blocks、gr.Interface、API 使用、主题等与自定义组件一起使用。本指南将介绍如何开始创建自定义组件。

安装

您需要安装

Python 3.10+（点击安装）
pip 21.3+（python -m pip install --upgrade pip）
Node.js 20+（点击安装）
npm 9+（点击安装）
Gradio 5+（pip install --upgrade gradio）

工作流程

自定义组件的工作流程包括 4 个步骤：创建、开发、构建和发布。

创建 (create)：为您创建一个模板，以便开始开发自定义组件。
开发 (dev)：启动一个带有示例应用和热重载功能的开发服务器，让您可以轻松开发自定义组件。
构建 (build)：构建一个包含自定义组件 Python 和 JavaScript 代码的 Python 包——这使得组件正式可用！
发布 (publish)：将您的包上传到 PyPi 和/或将示例应用上传到 HuggingFace Spaces。

所有这些步骤都通过自定义组件 CLI 完成。您可以使用 gradio cc 或 gradio component 调用它。

提示： 运行 `gradio cc --help` 获取所有可用命令的帮助菜单。本指南未涵盖某些命令。您也可以在任何命令名称后加上 `--help` 来查看该命令的帮助页面，例如 `gradio cc create --help`。

1. 创建

在任意工作目录下运行以下命令来引导新模板

gradio cc create MyComponent --template SimpleTextbox

将 MyComponent 替换为您的组件的任意名称。

除了 SimpleTextbox，您可以使用任何 Gradio 组件作为模板。SimpleTextbox 实际上是一个特殊的组件，它是 Textbox 组件的简化版本，在创建您的第一个自定义组件时特别有用。其他一些适合初学者的组件包括：SimpleDropdown、SimpleImage 或 File。

提示： 运行 `gradio cc show` 获取可用组件模板列表。

create 命令将

创建一个以组件名称小写命名的目录，其结构如下：

- backend/ <- The python code for your custom component
- frontend/ <- The javascript code for your custom component
- demo/ <- A sample app using your custom component. Modify this to develop your component!
- pyproject.toml <- Used to build the package and specify package metadata.

以开发模式安装组件

每个目录都将包含您开始开发所需的代码！

2. 开发

创建新组件后，您可以进入该目录并运行以下命令启动开发服务器：

gradio cc dev

您会看到控制台打印出几行内容。最重要的一行是：

前端服务器 (访问此处): https://:7861/

您的端口号可能不同。点击该链接以热重载模式启动演示应用。现在，您可以开始修改后端和前端，您将看到结果实时反映在示例应用中！我们将在后续指南中详细介绍一个实际示例。

提示： 您不必从自定义组件目录运行开发模式。`dev` 模式的第一个参数是目录的路径。默认情况下，它使用当前目录。

3. 构建

一旦您对自定义组件的实现感到满意，就可以构建它以在开发服务器之外使用。

在您的组件目录下，运行

gradio cc build

这将在 dist/ 子目录下创建一个 tar.gz 和 .whl 文件。如果您或任何人安装该 .whl 文件（pip install <path-to-whl>），他们将能够在任何 Gradio 应用中使用您的自定义组件！

build 命令还会为您的自定义组件生成文档。文档形式为交互式空间和静态 README.md。您可以通过传递 --no-generate-docs 来禁用此功能。您可以在专用指南中阅读更多关于文档生成器的信息。

4. 发布

目前，您的包只在您电脑上的 .whl 文件中可用。您可以使用 publish 命令将该文件分享给全世界！

只需在您的组件目录下运行以下命令：

gradio cc publish

这将引导您完成以下过程：

将您的分发文件上传到 PyPi。这使得上传演示到 Hugging Face Spaces 变得更容易。否则，您的包必须位于公开可用的 URL 上。如果您决定上传到 PyPi，您将需要一个 PyPI 用户名和密码。您可以在此处获取一个。
将您的组件演示上传到 Hugging Face Spaces。这也是可选的。

以下是发布示例：

结论

现在您已经了解了创建自定义组件的高级工作流程，您可以在接下来的指南中深入学习！阅读这些指南后，查看 HuggingFace Hub 上的这个自定义组件集合，以便您可以从他人的代码中学习。

提示： 如果您想从他人的自定义组件开始，请参阅此[指南](./frequently-asked-questions#do-i-always-need-to-start-my-component-from-scratch)。