Gradio — Build ML Demos and Web UIs in Python

Introduction

Gradio makes it effortless to create web interfaces for machine learning models, APIs, or any Python function. In as few as three lines, you define your function, specify the input and output types, and Gradio generates a beautiful, interactive web UI — complete with examples, flagging, and a shareable public link.

With over 42,000 GitHub stars and deep integration with Hugging Face, Gradio has become the standard tool for ML researchers and engineers to share their models. Every Hugging Face Space with a UI is powered by Gradio, making it the most widely deployed ML demo framework.

What Gradio Does

Gradio wraps any Python function into a web interface. You specify input components (text boxes, image uploaders, sliders, audio recorders) and output components (text, images, plots, audio, video), and Gradio handles the web server, UI rendering, file processing, and state management.

Architecture Overview

[Python Function]
  def predict(image, text):
      return model(image, text)
        |
  [gr.Interface or gr.Blocks]
  Maps inputs/outputs to
  UI components
        |
  +-----+-----+
  |           |
[Frontend]  [Backend]
Svelte UI   FastAPI server
Auto-generated  File handling
Responsive    Queue system
  |           |
  +-----+-----+
        |
  [Shareable Link]
  Local: localhost:7860
  Public: *.gradio.live
  HF Spaces: huggingface.co/spaces

Self-Hosting & Configuration

import gradio as gr
from transformers import pipeline

# Load ML model
classifier = pipeline("sentiment-analysis")

# Using Blocks for custom layout
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# Sentiment Analysis")

    with gr.Row():
        with gr.Column():
            text_input = gr.Textbox(
                label="Enter text",
                placeholder="Type something...",
                lines=3
            )
            submit_btn = gr.Button("Analyze", variant="primary")

        with gr.Column():
            label_output = gr.Label(label="Result")

    submit_btn.click(
        fn=lambda text: {r["label"]: r["score"] for r in classifier(text)},
        inputs=text_input,
        outputs=label_output
    )

    gr.Examples(
        examples=["I love this product!", "This is terrible."],
        inputs=text_input
    )

demo.launch(server_name="0.0.0.0", server_port=7860)

Key Features

• 3-Line Demos — wrap any function into a web UI with minimal code
• 40+ Components — text, image, audio, video, file, dataframe, plot, chatbot, and more
• Blocks API — custom layouts with rows, columns, tabs, and accordions
• Public Sharing — generate temporary public URLs with share=True
• Hugging Face Integration — deploy directly to HF Spaces for free hosting
• Queuing — built-in queue system for handling concurrent requests
• API Generation — every Gradio app automatically gets a REST API
• Streaming — real-time streaming for audio, video, and text generation

Comparison with Similar Tools

FAQ

Q: Gradio vs Streamlit — which should I choose? A: Gradio for ML model demos, input/output interfaces, and sharing with non-technical users. Streamlit for data dashboards, multi-page analytics apps, and apps with complex state management.

Q: How do I deploy a Gradio app permanently? A: The easiest way is Hugging Face Spaces — push your code to a Space and it runs for free. For self-hosting, run behind Nginx with the Gradio app as a systemd service.

Q: Can Gradio handle real-time streaming? A: Yes. Gradio supports streaming for text generation (like ChatGPT), audio processing, and video feeds. Use the streaming parameter in your interface definition.

Q: How do I add authentication? A: Use demo.launch(auth=("username", "password")) for basic auth, or integrate with Hugging Face OAuth for Spaces deployment.

Sources

• GitHub: https://github.com/gradio-app/gradio
• Documentation: https://www.gradio.app
• Created by Abubakar Abid, acquired by Hugging Face
• License: Apache-2.0