Before using Custom Components, make sure you have Python 3.8+, Node.js v16.14+, npm 9+, and Gradio 4.0+ installed.
gradio cc show to see the list of built-in templates.
You can also start off from other’s custom components!
git clone their repository and make your modifications.
When you run
gradio cc dev, a development server will load and run a Gradio app of your choosing.
This is like when you run
python <app-file>.py, however the
gradio command will hot reload so you can instantly see your changes.
Make sure you have your package installed along with any dependencies you have added by running
gradio cc install.
You can develop and build your custom component without hosting or connecting to HuggingFace. If you would like to share your component with the gradio community, it is recommended to publish your package to PyPi and host a demo on HuggingFace so that anyone can install it or try it out.
You must implement the
read_from_flag methods. Read more in the backend guide.
data_model defines the expected data format for your component, simplifying the component development process and self-documenting your code. It streamlines API usage and example caching.
FileData is crucial for components that expect file uploads. It ensures secure file handling, automatic caching, and streamlined client library functionality.
You can define event triggers in the
EVENTS class attribute by listing the desired event names, which automatically adds corresponding methods to your component.
Yes, it is possible to create custom components without a
data_model, but you are going to have to manually implement
We have prepared this collection of custom components on the HuggingFace Hub that you can use to get started!
We’re working on creating a gallery to make it really easy to discover new custom components.
In the meantime, you can search for HuggingFace Spaces that are tagged as a