Gradio Spaces
Gradio provides an easy and intuitive interface for running a model from a list of inputs and displaying the outputs in formats such as images, audio, 3D objects, and more. Gradio now even has a Plot output component for creating data visualizations with Matplotlib, Bokeh, and Plotly! For more details, take a look at the Getting started guide from the Gradio team.
Selecting Gradio as the SDK when creating a new Space will initialize your Space with the latest version of Gradio by setting the sdk
property to gradio
in your README.md
file’s YAML block. If you’d like to change the Gradio version, you can edit the sdk_version
property.
Visit the Gradio documentation to learn all about its features and check out the Gradio Guides for some handy tutorials to help you get started!
Your First Gradio Space: Hot Dog Classifier
In the following sections, you’ll learn the basics of creating a Space, configuring it, and deploying your code to it. We’ll create a Hot Dog Classifier Space with Gradio that’ll be used to demo the julien-c/hotdog-not-hotdog model, which can detect whether a given picture contains a hot dog 🌭
You can find a completed version of this hosted at NimaBoscarino/hotdog-gradio.
Create a new Gradio Space
We’ll start by creating a brand new Space and choosing Gradio as our SDK. Hugging Face Spaces are Git repositories, meaning that you can work on your Space incrementally (and collaboratively) by pushing commits. Take a look at the Getting Started with Repositories guide to learn about how you can create and edit files before continuing.
Add the dependencies
For the Hot Dog Classifier we’ll be using a 🤗 Transformers pipeline to use the model, so we need to start by installing a few dependencies. This can be done by creating a requirements.txt file in our repository, and adding the following dependencies to it:
transformers
torch
The Spaces runtime will handle installing the dependencies!
Create the Gradio interface
To create the Gradio app, make a new file in the repository called app.py, and add the following code:
import gradio as gr
from transformers import pipeline
pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")
def predict(input_img):
predictions = pipeline(input_img)
return input_img, {p["label"]: p["score"] for p in predictions}
gradio_app = gr.Interface(
predict,
inputs=gr.Image(label="Select hot dog candidate", sources=['upload', 'webcam'], type="pil"),
outputs=[gr.Image(label="Processed Image"), gr.Label(label="Result", num_top_classes=2)],
title="Hot Dog? Or Not?",
)
if __name__ == "__main__":
gradio_app.launch()
This Python script uses a 🤗 Transformers pipeline to load the julien-c/hotdog-not-hotdog model, which is used by the Gradio interface. The Gradio app will expect you to upload an image, which it’ll then classify as hot dog or not hot dog. Once you’ve saved the code to the app.py file, visit the App tab to see your app in action!
![](http://178.128.105.246/content-https-huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-hot-dog-gradio.png)
![](http://178.128.105.246/content-https-huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-hot-dog-gradio-dark.png)
Embed Gradio Spaces on other webpages
You can embed a Gradio Space on other webpages by using either Web Components or the HTML <iframe>
tag. Check out our documentation or the Gradio documentation for more details.