Gradio Spaces Intermediate

Gradio is the most popular framework for building ML demos on Hugging Face Spaces. It provides two APIs: Interface for simple input-output demos and Blocks for complex, custom layouts. This lesson covers both, with practical examples you can deploy immediately.

Interface API

The Interface API is perfect for simple function-based demos with a single input and output:

Python 
import gradio as gr
from transformers import pipeline

summarizer = pipeline("summarization", model="facebook/bart-large-cnn")

def summarize(text, max_length):
    result = summarizer(text, max_length=max_length, min_length=30)
    return result[0]["summary_text"]

demo = gr.Interface(
    fn=summarize,
    inputs=[
        gr.Textbox(lines=10, label="Text to Summarize"),
        gr.Slider(50, 300, value=130, label="Max Length")
    ],
    outputs=gr.Textbox(label="Summary"),
    title="Text Summarizer",
    description="Paste text and get a concise summary using BART.",
    examples=[
        ["Artificial intelligence has transformed many industries...", 130],
        ["The latest developments in quantum computing...", 100]
    ]
)

demo.launch()

Blocks API

The Blocks API gives you full control over the layout and interactivity of your app:

Python 
import gradio as gr
from transformers import pipeline

# Load models
sentiment = pipeline("sentiment-analysis")
ner = pipeline("ner", grouped_entities=True)

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# NLP Analysis Tool")
    gr.Markdown("Analyze text for sentiment and named entities.")

    with gr.Row():
        with gr.Column(scale=2):
            text_input = gr.Textbox(lines=5, label="Enter Text")
            with gr.Row():
                sentiment_btn = gr.Button("Analyze Sentiment", variant="primary")
                ner_btn = gr.Button("Extract Entities")

        with gr.Column(scale=1):
            sentiment_output = gr.Label(label="Sentiment")
            ner_output = gr.HighlightedText(label="Entities")

    sentiment_btn.click(
        fn=lambda t: {r["label"]: r["score"] for r in sentiment(t)},
        inputs=text_input,
        outputs=sentiment_output
    )
    ner_btn.click(
        fn=lambda t: [{"entity": e["entity_group"], "word": e["word"]} for e in ner(t)],
        inputs=text_input,
        outputs=ner_output
    )

demo.launch()

Adding Examples

Examples make your demo immediately usable. Users can click on an example to pre-fill the inputs:

Python 
# Add examples to Interface
demo = gr.Interface(
    fn=my_function,
    inputs=gr.Image(type="pil"),
    outputs=gr.Label(),
    examples=[
        ["examples/cat.jpg"],
        ["examples/dog.jpg"],
        ["examples/bird.jpg"]
    ],
    cache_examples=True  # Pre-compute results for faster loading
)

Gradio Components Reference

Component Input/Output Use Case
gr.Textbox Both Text input/output, prompts
gr.Image Both Upload/display images
gr.Audio Both Audio recording/playback
gr.Slider Input Numeric parameter controls
gr.Dropdown Input Selection from options
gr.Label Output Classification results
gr.Chatbot Output Chat-style conversations
gr.DataFrame Both Tabular data display
Performance Tip: Use cache_examples=True to pre-compute example outputs during build time. This makes your demo load faster and gives users instant results when clicking examples.

Gradio Demo Built!

You can now build rich ML demos with Gradio. Next, learn how to deploy Streamlit apps on Spaces.

Next: Streamlit Spaces →
← Creating Spaces Streamlit Spaces →

Ready to Go Deeper?

Live instructor-led courses from our partners. Affiliate disclosure.

🧠

AI & ML Courses - 30% Off

Live instructor-led AI, machine learning, data science, and cloud courses for working professionals. Use code Limited30 at checkout.

Edureka
📊

DataCamp - AI & Data Science

Hands-on Python, machine learning, and AI courses with interactive exercises and real projects.

DataCamp
🎓

edX - Top AI Courses

University-level AI courses from MIT, Harvard, Stanford. Earn certificates that employers recognize.

edX