Gradio Agents & MCP 黑客马拉松
获奖者
- 自定义组件
- 常见问题
常见问题
在使用自定义组件之前需要安装什么？%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 文件。我们建议在团队解决此问题期间，您在适用于 Linux 的 Windows 子系统 (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。然后您可以运行开发服务器进行更改。如果您遇到任何问题，请通过在其仓库中提出问题来联系组件的作者。图库是查找已发布组件的好地方。例如，要从 PDF 组件开始，请使用 git clone https://hugging-face.cn/spaces/freddyaboulton/gradio_pdf 克隆空间，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。