5分钟内创建自定义组件

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

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

安装

你需要具备：

Python 3.10+ (install here)
pip 21.3+ (python -m pip install --upgrade pip)
Node.js 20+ (install here)
npm 9+ (安装这里)
Gradio 5+ (pip install --upgrade gradio)

工作流程

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

create: 创建一个模板，供您开始开发自定义组件。
dev: 启动一个带有示例应用的开发服务器，并支持热重载，使您可以轻松开发自定义组件
build: 构建一个包含自定义组件的Python和JavaScript代码的Python包——这使事情正式化！
发布：将您的包上传到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

您将看到打印到控制台的几行内容。最重要的一行是显示为：

前端服务器（前往此处）：http://localhost:7861/

端口号可能对您来说是不同的。点击该链接以在热重载模式下启动演示应用程序。现在，您可以开始对后端和前端进行更改，您将看到结果实时反映在示例应用程序中！我们将在后续指南中通过一个实际示例进行讲解。

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

3. 构建

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

从您的组件目录中运行：

gradio cc build

这将在dist/子目录中创建一个tar.gz和.whl文件。如果你或任何人安装那个.whl文件（pip install ），他们将能够在任何gradio应用中使用你的自定义组件！

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

4. 发布

目前，您的包仅在您计算机上的.whl文件中可用。您可以使用publish命令与世界分享该文件！

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

gradio cc publish

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

将您的分发文件上传到PyPi。这是可选的。如果您决定上传到PyPi，您将需要一个PyPI用户名和密码。您可以在这里获取。
将您的组件演示上传到hugging face spaces。这也是可选的。

以下是发布内容的示例：

结论

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

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