Gradio 4.0 introduces Custom Components — the ability for developers to create their own custom components and use them in Gradio apps.
You can publish your components as Python packages so that other users can use them as well.
Users will be able to use all of Gradio’s existing functions, such as
gr.Interface, API usage, themes, etc. with Custom Components.
This guide will cover how to get started making custom components.
You will need to have:
pip install --upgrade gradio)
The Custom Components workflow consists of 4 steps: create, dev, build, and publish.
Each of these steps is done via the Custom Component CLI. You can invoke it with
gradio cc or
✍️ Tip: Run
gradio cc --help to get a help menu of all available commands. You can also append
--help to any command name to bring up a help page for that command, e.g.
gradio cc create --help.
Bootstrap a new template by running the following in any working directory:
gradio cc create MyComponent --template SimpleTextbox
MyComponent, give your component any name.
SimpleTextbox, you can use any Gradio component as a template.
SimpleTextbox is actually a special component that a stripped-down version of the
Textbox component that makes it particularly useful when creating your first custom component.
Some other components that are good if you are starting out:
✍️ Tip: Run
gradio cc show to get a list of available component templates.
create command will:
- backend/ <- The python code for your custom component
- demo/ <- A sample app using your custom component. Modify this to develop your component!
- pyproject.toml <- Used to build the package and specify package metadata.
Each of the directories will have the code you need to get started developing!
Once you have created your new component, you can start a development server by
entering the directory and running
gradio cc dev
You’ll see several lines that are printed to the console. The most important one is the one that says:
Frontend Server (Go here): http://localhost:7861/
The port number might be different for you. Click on that link to launch the demo app in hot reload mode. Now, you can start making changes to the backend and frontend you’ll see the results reflected live in the sample app! We’ll go through a real example in a later guide.
✍️ Tip: You don’t have to run dev mode from your custom component directory. The first argument to
dev mode is the path to the directory. By default it uses the current directory.
Once you are satisfied with your custom component’s implementation, you can
build it to use it outside of the development server.
From your component directory, run:
gradio cc build
This will create a
.whl file in a
If you or anyone installs that
.whl file (
pip install <path-to-whl>) they will be able to use your custom component in any gradio app!
build command will also generate documentation for your custom component. This takes the form of an interactive space and a static
README.md. You can disable this by passing
--no-generate-docs. You can read more about the documentation generator in the dedicated guide.
Right now, your package is only available on a
.whl file on your computer.
You can share that file with the world with the
Simply run the following command from your component directory:
gradio cc publish
This will guide you through the following process:
Here is an example of what publishing looks like:
Now that you know the high-level workflow of creating custom components, you can go in depth in the next guides! After reading the guides, check out this collection of custom components on the HuggingFace Hub so you can learn from other’s code.