配置您的自定义组件

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

包名称

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

举个例子，让我们逐步将一个组件的名称从gradio_mytextbox更改为supertextbox。

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

[project]
name = "supertextbox"

2. 将pyproject.toml中所有出现的gradio_更改为

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

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

3. 将backend/中的gradio_目录重命名为

mv backend/gradio_mytextbox backend/supertextbox

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

顶级Python导出

默认情况下，只有自定义组件的Python类是顶级导出。 这意味着当用户输入from gradio_ 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 目录必须位于同一个公共目录下！

结论

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