Beginner

Introduction to Gradio

Gradio is an open-source Python library that lets you build interactive web-based demos for machine learning models, APIs, or any Python function — with just a few lines of code.

What is Gradio?

Gradio is developed by Hugging Face and is the fastest way to create and share ML demos. Instead of building a full web application, Gradio lets you wrap any Python function with a web UI that supports text, images, audio, video, files, and more.

Gradio in 3 Lines 
import gradio as gr

def greet(name):
    return f"Hello, {name}!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

Key Features

⚡

Quick Prototyping

Build a complete UI with gr.Interface() in one line. Supports 30+ input/output component types out of the box.

🛠

Custom Layouts

Use gr.Blocks() for full control over layout, styling, event handling, and multi-page apps.

🌐

Instant Sharing

Set share=True to get a public URL. Deploy permanently on Hugging Face Spaces for free.

🔌

Built-in API

Every Gradio app automatically exposes a REST API. Use it from JavaScript, cURL, or other Python code.

Gradio vs Streamlit

Both are popular Python UI frameworks, but they serve different purposes:

Feature Gradio Streamlit
Primary Use ML model demos Data dashboards
Sharing One-click public URLs Streamlit Cloud
API Auto-generated REST API No built-in API
HF Integration Native (HF Spaces) Supported but not native
Components ML-focused (Image, Audio, Video) Data-focused (charts, tables)
Layout Interface (simple) + Blocks (custom) Script-based top-to-bottom
✅
When to choose Gradio: Pick Gradio when you want to demo ML models, need instant sharing, want a built-in API, or plan to deploy on Hugging Face Spaces. Choose Streamlit for data exploration dashboards and analytics apps.

The Gradio Ecosystem

  1. gr.Interface()

    High-level API for quick demos. Specify a function, inputs, and outputs — Gradio builds the entire UI automatically.

  2. gr.Blocks()

    Low-level API for custom layouts. Full control over component placement, event handling, state, and theming.

  3. Gradio Components

    30+ built-in components: Textbox, Number, Slider, Image, Audio, Video, File, DataFrame, Chatbot, Code, and more.

  4. Hugging Face Spaces

    Free hosting platform for Gradio apps. Git-based deployment with GPU support available.

Use Cases

  • Image classification: Upload an image, get predicted labels and confidence scores.
  • Text generation: Interactive chatbot or text completion demo.
  • Audio processing: Speech-to-text, text-to-speech, or music generation.
  • Model comparison: Side-by-side comparison of multiple models on the same input.
  • API prototyping: Quickly test and demo any Python function with a web UI.

What's Next?

In the next lesson, we will install Gradio, set up a development environment, and build our first interactive demo.

← Previous Course Home