配置你的自定义组件

自定义组件的工作流程侧重于约定优于配置，以减少你作为开发者在开发自定义组件时需要做出的决策数量。话虽如此，你仍然可以配置自定义组件包和目录的某些方面。本指南将介绍如何进行配置。

包名

默认情况下，所有自定义组件包都命名为 gradio_<component-name>，其中 component-name 是组件 Python 类的名称（小写）。

例如，让我们演示如何将组件名称从 gradio_mytextbox 更改为 supertextbox。

1. 修改 pyproject.toml 文件中的 name。

[project]
name = "supertextbox"

2. 将 pyproject.toml 中所有 gradio_<component-name> 的出现更改为 <component-name>

[tool.hatch.build]
artifacts = ["/backend/supertextbox/templates", "*.pyi"]

[tool.hatch.build.targets.wheel]
packages = ["/backend/supertextbox"]

3. 将 backend/ 目录中的 gradio_<component-name> 目录重命名为 <component-name>

mv backend/gradio_mytextbox backend/supertextbox

提示： 请记住更改 `demo/app.py` 中的导入语句！

顶级 Python 导出

默认情况下，只有自定义组件的 Python 类是顶级导出。这意味着当用户输入 from gradio_<component-name> import ... 时，唯一可用的类是自定义组件类。要添加更多类作为顶级导出，请修改 __init__.py 中的 __all__ 属性。

from .mytextbox import MyTextbox
from .mytextbox import AdditionalClass, additional_function

__all__ = ['MyTextbox', 'AdditionalClass', 'additional_function']

Python 依赖项

你可以通过修改 pyproject.toml 中的 dependencies 键来添加 Python 依赖项。

dependencies = ["gradio", "numpy", "PIL"]

提示： 添加依赖项后，请记住运行 gradio cc install！

JavaScript 依赖项

你可以通过修改 frontend/package.json 中的 "dependencies" 键来添加 JavaScript 依赖项。

"dependencies": {
    "@gradio/atoms": "0.2.0-beta.4",
    "@gradio/statustracker": "0.3.0-beta.6",
    "@gradio/utils": "0.2.0-beta.4",
    "your-npm-package": "<version>"
}

目录结构

默认情况下，CLI 会将 Python 代码放置在 backend 目录中，将 JavaScript 代码放置在 frontend 目录中。不建议更改此结构，因为它使得潜在贡献者可以轻松查看你的源代码并了解所有内容的位置。但是，如果你确实想更改，则需要执行以下操作：

1. 将 Python 代码放置在你选择的子目录中。请记住修改 pyproject.toml 中的 [tool.hatch.build] [tool.hatch.build.targets.wheel] 以匹配！

2. 将 JavaScript 代码放置在你选择的子目录中。

3. 在组件 Python 类上添加 FRONTEND_DIR 属性。它必须是从定义类的文件到 JavaScript 目录位置的相对路径。

class SuperTextbox(Component):
    FRONTEND_DIR = "../../frontend/"

JavaScript 和 Python 目录必须位于同一个公共目录下！

总结

坚持默认设置将使其他人更容易理解并为你的自定义组件做出贡献。毕竟，开源的魅力在于任何人都可以帮助改进你的代码！但如果你确实需要偏离默认设置，现在你知道该怎么做了！