【Gradio】Custom Components | 5分钟内自定义组件

5分钟内完成自定义组件

Gradio 4.0 引入了自定义组件 -- 开发者可以创建自己的自定义组件并将其用于 Gradio 应用程序中。您可以将组件发布为 Python 包，以便其他用户也可以使用它们。用户将能够使用 Gradio 的所有现有功能，例如 gr.Blocks、gr.Interface、API 使用、主题等与自定义组件。该指南将涵盖如何开始创建自定义组件。

安装

您需要：

Python 3.8+（安装这里）

pip 21.3+（python -m pip install --upgrade pip）

Node.js v16.14+（安装这里）

npm 9+（安装这里）

Gradio 4.0+（pip install --upgrade gradio）

工作流程

自定义组件工作流程由 4 个步骤组成：create、dev、build 和 publish。

1. create：为您创建一个模板，以便开始开发自定义组件。

2. dev：启动一个带有热重新加载的开发服务器，以便轻松开发自定义组件。

3. build：生成一个包含自定义组件的 Python 和 JavaScript 代码的 Python 包 -- 这使事情变得正式！

4. publish：将您的包上传到 PyPi 和/或将示例应用程序上传到 HuggingFace Spaces。

每个步骤都是通过自定义组件 CLI 完成的。您可以使用 gradio cc 或 gradio component 调用它。

 1.创建

创建一个新的模板通过在任何工作目录中运行以下命令：

gradio cc create MyComponent --template SimpleTextbox

为您的组件指定任意名称，而不是 MyComponent 。

您可以使用任何 Gradio 组件作为模板，而不是 SimpleTextbox 。 SimpleTextbox 实际上是一个特殊的组件，它是 Textbox 组件的精简版本，这使得它在创建第一个自定义组件时特别有用。如果您刚开始使用，其他一些组件也不错： SimpleDropdown 、 SimpleImage 或 File 。

✍️ 提示：运行 gradio cc show 以获取可用的组件模板列表。

  create 命令将：

1. 创建一个以小写形式命名的目录，具有以下结构：

- 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.

1. 在开发模式下安装组件

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

 2. 开发 

一旦创建了新的组件，您可以通过 entering the directory 启动开发服务器并运行

gradio cc dev

您将看到控制台上打印的几行。最重要的一行是说：

前端服务器（去这里）：http://localhost:7861/

端口号可能对您不同。单击该链接以在热重新加载模式下启动演示应用程序。现在，您可以开始对后端和前端进行更改，您将实时看到示例应用程序中的结果！我们将在后面的指南中逐步进行实例。

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

 3. 构建 

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

从您的组件目录中，运行：

gradio cc build

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

build 命令还将为自定义组件生成文档。它以交互式空间和静态 README.md 的形式出现。你可以通过传递 --no-generate-docs 来禁用它。你可以在专门的指南中阅读关于文档生成器的更多信息https://www.gradio.app/guides/documenting-custom-components。

4. 发布

当前，您的软件包只能在计算机上的.whl文件中找到。您可以使用publish命令与世界分享该文件！

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

gradio cc publish

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

将发行文件上传到PyPi。这是可选的。如果您决定上传到PyPi，您将需要PyPI用户名和密码。您可以在这里获取https://pypi.org/account/register/。

将组件的演示上传到hugging face spaces。这也是可选的。

以下是发布的示例：

 结论 

现在您已经了解了创建自定义组件的高级工作流程，可以深入了解下一指南！阅读指南后，请查看 HuggingFace Hub 上的自定义组件集合https://huggingface.co/collections/gradio/custom-components-65497a761c5192d981710b12，以便从他人的代码中学习。

✍️ 提示：如果您想从别人的自定义组件开始，请查看本指南。https://www.gradio.app/guides/frequently-asked-questions#do-i-always-need-to-start-my-component-from-scratch