{"guide": {"name": "configuration", "category": "custom-components", "pretty_category": "Custom Components", "guide_index": 3, "absolute_index": 18, "pretty_name": "Configuration", "content": "# Configuring Your Custom Component\n\nThe custom components workflow focuses on [convention over configuration](https://en.wikipedia.org/wiki/Convention_over_configuration) to reduce the number of decisions you as a developer need to make when developing your custom component.\nThat being said, you can still configure some aspects of the custom component package and directory.\nThis guide will cover how.\n\n## The Package Name\n\nBy default, all custom component packages are called `gradio_<component-name>` where `component-name` is the name of the component's python class in lowercase.\n\nAs an example, let's walkthrough changing the name of a component from `gradio_mytextbox` to `supertextbox`. \n\n1. Modify the `name` in the `pyproject.toml` file. \n\n```bash\n[project]\nname = \"supertextbox\"\n```\n\n2. Change all occurrences of `gradio_<component-name>` in `pyproject.toml` to `<component-name>`\n\n```bash\n[tool.hatch.build]\nartifacts = [\"/backend/supertextbox/templates\", \"*.pyi\"]\n\n[tool.hatch.build.targets.wheel]\npackages = [\"/backend/supertextbox\"]\n```\n\n3. Rename the `gradio_<component-name>` directory in `backend/` to `<component-name>`\n\n```bash\nmv backend/gradio_mytextbox backend/supertextbox\n```\n<p class='tip'><strong>\u270d\ufe0f Tip:</strong> Remember to change the import statement in `demo/app.py`!</p>\n\n## Top Level Python Exports\n\nBy default, only the custom component python class is a top level export. \nThis means that when users type `from gradio_<component-name> import ...`, the only class that will be available is the custom component class.\nTo add more classes as top level exports, modify the `__all__` property in `__init__.py`\n\n```python\nfrom .mytextbox import MyTextbox\nfrom .mytextbox import AdditionalClass, additional_function\n\n__all__ = ['MyTextbox', 'AdditionalClass', 'additional_function']\n```\n\n## Python Dependencies\n\nYou can add python dependencies by modifying the `dependencies` key in `pyproject.toml`\n\n```bash\ndependencies = [\"gradio\", \"numpy\", \"PIL\"]\n```\n<p class='tip'><strong>\u270d\ufe0f Tip:</strong> Remember to run `gradio cc install` when you add dependencies!</p>\n\n## Javascript Dependencies\n\nYou can add JavaScript dependencies by modifying the `\"dependencies\"` key in `frontend/package.json`\n\n```json\n\"dependencies\": {\n    \"@gradio/atoms\": \"0.2.0-beta.4\",\n    \"@gradio/statustracker\": \"0.3.0-beta.6\",\n    \"@gradio/utils\": \"0.2.0-beta.4\",\n    \"your-npm-package\": \"<version>\"\n}\n```\n\n## Directory Structure\n\nBy default, the CLI will place the Python code in `backend` and the JavaScript code in `frontend`.\nIt is not recommended to change this structure since it makes it easy for a potential contributor to look at your source code and know where everything is.\nHowever, if you did want to this is what you would have to do:\n\n1. Place the Python code in the subdirectory of your choosing. Remember to modify the `[tool.hatch.build]` `[tool.hatch.build.targets.wheel]` in the `pyproject.toml` to match!\n\n2. Place the JavaScript code in the subdirectory of your choosing.\n\n2. Add the `FRONTEND_DIR` property on the component python class. It must be the relative path from the file where the class is defined to the location of the JavaScript directory.\n\n```python\nclass SuperTextbox(Component):\n    FRONTEND_DIR = \"../../frontend/\"\n```\n\nThe JavaScript and Python directories must be under the same common directory!\n\n## Conclusion\n\n\nSticking to the defaults will make it easy for others to understand and contribute to your custom component.\nAfter all, the beauty of open source is that anyone can help improve your code!\nBut if you ever need to deviate from the defaults, you know how!", "tags": [], "spaces": [], "url": "/guides/configuration/", "contributor": null}}