配置您的自定义组件

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

包名

默认情况下，所有自定义组件包的名称均为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

顶级 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"]

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

结论

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