Gradio 月活用户突破 100 万！
阅读更多
- 自定义组件
- 常见问题
常见问题
使用自定义组件前需要安装什么？%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 linux 子系统 (WSL) 中开发您的自定义组件，同时团队正在研究此问题。
3. 检查 window.GRADIO_CC 变量
在浏览器控制台中，打印 window.__GRADIO__CC 变量（只需在控制台中键入即可）。如果它是一个空对象，则意味着 CLI 找不到您的自定义组件源代码。通常，当自定义组件安装在与用于运行 dev 命令的虚拟环境不同的虚拟环境中时，会发生这种情况。请使用 --python-path 和 gradio-path CLI 参数来指定组件安装环境的 python 和 gradio 可执行文件的路径。例如，如果您使用的是位于 /Users/mary/venv 的 virtualenv，请分别传入 /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。
我需要在 Hugging Face 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