PythonMLOpsTools

Gradio Basics: Ship ML Demos Without Building a Frontend

2 min read

Gradio lets you wrap any Python function in a browser UI in under 10 lines. Here's how the Interface class works, what components are available, and why it's the fastest way to build an ML proof of concept.

Gradio Basics: Ship ML Demos Without Building a Frontend
Contents

The gap between a working ML model and a demo you can show someone is surprisingly large. You have a function that returns predictions — but non-technical stakeholders can’t run Python scripts. Building a proper web app takes time you don’t have.

Gradio solves this. It wraps any Python function in a browser-based UI with a few lines of code. No frontend knowledge required.

Installation

pip install gradio

The Core Abstraction: Interface

Everything in Gradio starts with the Interface class. It takes three parameters:

import gradio as gr

demo = gr.Interface(
    fn=your_function,       # the function to wrap
    inputs="text",          # input component type
    outputs="text"          # output component type
)

demo.launch()  # runs on localhost:7860

That’s it. demo.launch() starts a local server and opens the UI in your browser.

Input and Output Components

Gradio has built-in components for the most common ML I/O types:

ComponentUse Case
"text"Text input/output
"image"Image upload and display
"number"Numerical input
"audio"Audio upload and playback
"dataframe"Tabular data
"label"Classification output with confidence scores

For a text classifier:

gr.Interface(
    fn=classify_text,
    inputs=gr.Textbox(placeholder="Enter text here..."),
    outputs=gr.Label(num_top_classes=3)
)

Multiple Inputs and Outputs

Real models often take multiple inputs. Gradio handles this by passing a list:

gr.Interface(
    fn=predict_house_price,
    inputs=[
        gr.Number(label="Square Footage"),
        gr.Dropdown(["Gurgaon", "Noida", "Delhi"], label="Location"),
        gr.Slider(1, 10, label="Bedrooms"),
    ],
    outputs=gr.Number(label="Predicted Price (INR)")
)

Image Processing

For computer vision models, the Image component has built-in editing tools — crop, zoom, rotate — before the image is passed to your function:

gr.Interface(
    fn=classify_image,
    inputs=gr.Image(tool="editor", type="pil"),
    outputs=gr.Label()
)

Why This Matters for ML Teams

The traditional workflow for sharing a model:

  1. Train model
  2. Write Flask/FastAPI app
  3. Build HTML/CSS frontend
  4. Deploy to server

The Gradio workflow:

  1. Train model
  2. gr.Interface(fn=predict, inputs=..., outputs=...).launch()

For proof-of-concept work, stakeholder demos, and internal tools, Gradio eliminates steps 2-4 entirely. It’s become the default framework for ML demos — Hugging Face Spaces runs on it.

The limitation is customisation — Gradio UIs are functional, not beautiful. For production applications, you’ll want a proper frontend. But for everything up to that point, Gradio is the fastest path from model to demo.

Original post published on Medium.

← All writing