%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 5.0构建的自定义组件应与Gradio 4.0兼容。如果您在Gradio 4.0中构建了自定义组件，则需要重新构建您的组件以使其与Gradio 5.0兼容。只需按照以下步骤操作：
@gradio/preview 包。进入 frontend 目录并运行 npm update。pyproject.toml中的dependencies键，将允许的最大Gradio版本固定在版本5，例如dependencies = ["gradio>=4.0,<6.0"]。运行 gradio cc show 查看内置模板列表。
你也可以从其他人的自定义组件开始！
只需 git clone 他们的仓库并进行修改。
当你运行gradio cc dev时，一个开发服务器将加载并运行你选择的Gradio应用程序。
这就像你运行python 时一样，但是gradio命令会热重载，这样你可以立即看到你的更改。
1. 检查您的终端和浏览器控制台
确保你的代码中没有语法错误或其他明显的问题。从python触发的异常将显示在终端中。从javascript触发的异常将显示在浏览器控制台和/或终端中。
2. 您是在Windows上开发吗？
出于安全原因，Windows 上的 Chrome 会阻止本地编译的 svelte 文件。我们建议在团队解决此问题时，在适用于 Linux 的 Windows 子系统 (WSL) 中开发您的自定义组件。
3. 检查窗口。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。然后你可以运行开发服务器来进行更改。如果你遇到任何问题，通过在他们的仓库中打开一个问题来联系组件的作者。画廊是寻找已发布组件的好地方。例如，要从PDF组件开始，使用git clone https://huggingface.co/spaces/freddyaboulton/gradio_pdf克隆空间，cd进入src目录，并运行gradio cc install。
您可以在不托管或连接到HuggingFace的情况下开发和构建您的自定义组件。 如果您希望与gradio社区分享您的组件，建议将您的包发布到PyPi并在HuggingFace上托管一个演示，以便任何人都可以安装或试用它。
你必须实现preprocess、postprocess、example_payload和example_value方法。如果你的组件不使用数据模型，你还必须定义api_info、flag和read_from_flag方法。更多信息请参阅后端指南。
data_model的目的是什么？一个data_model定义了组件的预期数据格式，简化了组件开发过程并自动记录代码。它简化了API的使用和示例缓存。
FileData很重要？利用FileData对于期望文件上传的组件至关重要。它确保了安全的文件处理、自动缓存和简化的客户端库功能。
你可以在EVENTS类属性中通过列出所需的事件名称来定义事件触发器，这会自动将相应的方法添加到你的组件中。
data_model的情况下实现自定义Gradio组件吗？是的，可以在没有data_model的情况下创建自定义组件，但您将需要手动实现api_info、flag和read_from_flag方法。
我们已经在HuggingFace Hub上准备了这组collection自定义组件，你可以用来开始使用！
我们正在努力创建一个画廊，以便更容易发现新的自定义组件。
在此期间，您可以搜索标记为gradio-custom-component的HuggingFace Spaces 这里