配置你的自定义组件

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

包名称

默认情况下，所有自定义组件包都称为 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 中的 import 语句！

顶层 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 目录必须位于同一个公共目录下！

结论

坚持默认设置将使其他人更容易理解和贡献你的自定义组件。 毕竟，开源的美妙之处在于任何人都可以帮助改进你的代码！ 但是，如果你需要偏离默认设置，你就知道该怎么做了！