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.
在开发模式下安装组件
每个目录都将包含您开始开发所需的代码!
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