- 自定义组件
- 常见问题解答
常见问题解答
使用自定义组件前需要安装什么？%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+、Node.js v18+、npm 9+ 和 Gradio 4.0+（最好是 Gradio 5.0+）。
自定义组件在 Gradio 4.0 和 5.0 之间兼容吗？
使用 Gradio 5.0 构建的自定义组件应该与 Gradio 4.0 兼容。如果您使用 Gradio 4.0 构建了自定义组件，则必须重建组件以使其与 Gradio 5.0 兼容。只需执行以下步骤：
- 更新
@gradio/preview包。cd进入frontend目录并运行npm update。 - 修改
pyproject.toml中的dependencies键，将允许的 Gradio 版本上限固定为版本 5，例如dependencies = ["gradio>=4.0,<6.0"]。 - 运行构建和发布命令
可以使用哪些模板来创建自定义组件？
运行 gradio cc show 查看内置模板列表。您也可以从其他人的自定义组件开始！只需 git clone 他们的仓库并进行修改即可。
什么是开发服务器？
当您运行 gradio cc dev 时，开发服务器将加载并运行您选择的 Gradio 应用程序。这就像您运行 python <app-file>.py 一样，但 gradio 命令会热重载，因此您可以即时看到更改。
开发服务器对我不起作用
1. 检查您的终端和浏览器控制台
确保您的代码中没有语法错误或其他明显问题。Python 触发的异常将显示在终端中。Javascript 异常将显示在浏览器控制台和/或终端中。
2. 您是在 Windows 上开发吗？
Windows 上的 Chrome 会出于安全原因阻止本地编译的 svelte 文件。在团队解决此问题期间，我们建议您在 Windows Subsystem for Linux (WSL) 中开发自定义组件。
3. 检查 window.GRADIO_CC 变量
在浏览器控制台中，打印 window.__GRADIO__CC 变量（只需将其输入控制台）。如果它是一个空对象，则表示 CLI 找不到您的自定义组件源代码。通常，当自定义组件安装在与运行 dev 命令所用的虚拟环境不同的虚拟环境中时，会发生这种情况。请使用 --python-path 和 gradio-path CLI 参数指定安装组件的环境的 python 和 gradio 可执行文件路径。例如，如果您使用的是位于 /Users/mary/venv 的虚拟环境，请分别传入 /Users/mary/bin/python 和 /Users/mary/bin/gradio。
如果 window.__GRADIO__CC 变量不为空（示例如下所示），则开发服务器应该正常工作。
4. 确保您使用的是虚拟环境 强烈建议您使用虚拟环境，以防止与系统中安装的其他 python 依赖项发生冲突。
我总是需要从头开始创建组件吗？
不需要！您可以从现有的 Gradio 组件开始作为模板，请参阅五分钟指南。如果您想进一步调整，也可以从现有的自定义组件开始。找到您喜欢的自定义组件源代码后，将其克隆到您的计算机并运行 gradio cc install。然后您可以运行开发服务器进行更改。如果您遇到任何问题，请通过在其仓库中提出 issue 来联系组件作者。图库是查找已发布组件的好地方。例如，要从 PDF 组件开始，请使用 git clone https://hugging-face.cn/spaces/freddyaboulton/gradio_pdf 克隆 space，cd 进入 src 目录，然后运行 gradio cc install。
我需要将自定义组件托管在 HuggingFace Spaces 上吗？
您可以在不托管或不连接到 HuggingFace 的情况下开发和构建自定义组件。如果您想与 Gradio 社区共享您的组件，建议将您的包发布到 PyPi 并在 HuggingFace 上托管一个演示，以便任何人都可以安装或试用它。
在 Gradio 中实现自定义组件需要哪些方法？
您必须实现 preprocess、postprocess、example_payload 和 example_value 方法。如果您的组件不使用数据模型，您还必须定义 api_info、flag 和 read_from_flag 方法。在后端指南中阅读更多内容。
Gradio 自定义组件中的 data_model 有什么作用？
data_model 定义了组件预期的数据格式，从而简化了组件开发过程并为您的代码提供了自文档功能。它简化了 API 使用和示例缓存。
对于处理文件上传的组件，为什么使用 FileData 很重要？
对于需要文件上传的组件，使用 FileData 至关重要。它确保了安全的文件处理、自动缓存和简化的客户端库功能。
如何为我的 Gradio 自定义组件添加事件触发器？
您可以通过在 EVENTS 类属性中列出所需的事件名称来定义事件触发器，这会自动为您的组件添加相应的方法。
我可以不定义 data_model 来实现 Gradio 自定义组件吗？
是的，可以创建没有 data_model 的自定义组件，但您必须手动实现 api_info、flag 和 read_from_flag 方法。
有没有可以学习的自定义组件示例？
我们整理了这个自定义组件集合在 HuggingFace Hub 上，您可以从中开始学习！
如何找到 Gradio 社区创建的自定义组件？
我们正在努力创建一个图库，以便轻松发现新的自定义组件。在此期间，您可以在此处搜索标记为 gradio-custom-component 的 HuggingFace Spaces