Gradio 的用户月活突破 100 万！
阅读更多
- 自定义组件
- 五分钟自定义组件
5 分钟自定义组件
Gradio 允许开发者创建自己的自定义组件并在 Gradio 应用中使用它们。你可以将你的组件作为 Python 包发布，以便其他用户也可以使用。
用户将能够将 Gradio 的所有现有功能，如 gr.Blocks、gr.Interface、API 使用、主题等与自定义组件一起使用。本指南将介绍如何开始制作自定义组件。
安装%20Copyright%202022%20Fonticons,%20Inc.%20--%3e%3cpath%20d='M172.5%20131.1C228.1%2075.51%20320.5%2075.51%20376.1%20131.1C426.1%20181.1%20433.5%20260.8%20392.4%20318.3L391.3%20319.9C381%20334.2%20361%20337.6%20346.7%20327.3C332.3%20317%20328.9%20297%20339.2%20282.7L340.3%20281.1C363.2%20249%20359.6%20205.1%20331.7%20177.2C300.3%20145.8%20249.2%20145.8%20217.7%20177.2L105.5%20289.5C73.99%20320.1%2073.99%20372%20105.5%20403.5C133.3%20431.4%20177.3%20435%20209.3%20412.1L210.9%20410.1C225.3%20400.7%20245.3%20404%20255.5%20418.4C265.8%20432.8%20262.5%20452.8%20248.1%20463.1L246.5%20464.2C188.1%20505.3%20110.2%20498.7%2060.21%20448.8C3.741%20392.3%203.741%20300.7%2060.21%20244.3L172.5%20131.1zM467.5%20380C411%20436.5%20319.5%20436.5%20263%20380C213%20330%20206.5%20251.2%20247.6%20193.7L248.7%20192.1C258.1%20177.8%20278.1%20174.4%20293.3%20184.7C307.7%20194.1%20311.1%20214.1%20300.8%20229.3L299.7%20230.9C276.8%20262.1%20280.4%20306.9%20308.3%20334.8C339.7%20366.2%20390.8%20366.2%20422.3%20334.8L534.5%20222.5C566%20191%20566%20139.1%20534.5%20108.5C506.7%2080.63%20462.7%2076.99%20430.7%2099.9L429.1%20101C414.7%20111.3%20394.7%20107.1%20384.5%2093.58C374.2%2079.2%20377.5%2059.21%20391.9%2048.94L393.5%2047.82C451%206.731%20529.8%2013.25%20579.8%2063.24C636.3%20119.7%20636.3%20211.3%20579.8%20267.7L467.5%20380z'/%3e%3c/svg%3e)
你需要拥有
- Python 3.10+ ( 在此安装 )
- pip 21.3+ (
python -m pip install --upgrade pip) - Node.js 20+ ( 在此安装 )
- npm 9+ ( 在此安装 )
- Gradio 5+ (
pip install --upgrade gradio)
工作流程
自定义组件工作流程包含 4 个步骤：创建、开发、构建和发布。
- 创建：创建一个模板，供你开始开发自定义组件。
- 开发：启动一个带有示例应用和热重载的开发服务器，让你轻松开发自定义组件
- 构建：构建一个包含自定义组件的 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。
用你可以使用任何 Gradio 组件作为模板替换 SimpleTextbox。 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. 构建
当你对自定义组件的实现感到满意时，你可以 构建 它以便在开发服务器外部使用。
从你的组件目录中，运行
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。这是可选的。如果你决定上传到 PyPi，你将需要一个 PyPI 用户名和密码。你可以在 此处 获取一个。
- 将你的组件的演示上传到 hugging face spaces。这也是可选的。
这是一个发布外观的示例
结论
既然您已经了解了创建自定义组件的高级工作流程，您可以在接下来的指南中深入了解！阅读指南后，查看 HuggingFace Hub 上的自定义组件集合，以便您可以从其他人的代码中学习。
提示： 如果你想从别人的自定义组件开始，请查看本指南。