Complete Gradio Tutorial: Build ML Demos in Minutes
Gradio is a Python library that allows you to quickly create web interfaces for machine learning models. With just a few lines of code, you can build interactive demos, share them with others, and even deploy to Hugging Face Spaces.
Why Gradio?
Gradio Advantages:- Simple API: Build UIs with minimal code
- No frontend knowledge: Python-only development
- Shareable links: Instant public URLs
- Hugging Face integration: Easy deployment to Spaces
- Multiple input/output types: Text, images, audio, video
- ML model demos
- Data science prototypes
- Internal tools
- Educational applications
- API testing interfaces
Installation
pip install gradio
With additional features
pip install gradio[oauth] # For authentication
Verify installation
python -c "import gradio; print(gradio.version)"
Quick Start
1. Hello World
import gradio as gr
def greet(name):
return f"Hello, {name}!"
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()
2. Multiple Inputs/Outputs
import gradio as gr
def process(name, age, isstudent):
status = "student" if isstudent else "professional"
return f"{name} is a {age}-year-old {status}.", age 12
demo = gr.Interface(
fn=process,
inputs=[
gr.Textbox(label="Name"),
gr.Number(label="Age"),
gr.Checkbox(label="Is Student?")
],
outputs=[
gr.Textbox(label="Description"),
gr.Number(label="Age in Months")
],
title="User Info Processor",
description="Enter your information"
)
demo.launch()
Input Components
1. Text Inputs
import gradio as gr
def textdemo(text, textarea, password):
return f"Text: {text}, Area: {textarea[:20]}..., Pass length: {len(password)}"
demo = gr.Interface(
fn=textdemo,
inputs=[
gr.Textbox(label="Short Text", placeholder="Enter text..."),
gr.Textbox(label="Long Text", lines=5, maxlines=10),
gr.Textbox(label="Password", type="password")
],
outputs="text"
)
demo.launch()
2. Numeric Inputs
import gradio as gr
def numericdemo(number, slider, rangeval):
return f"Number: {number}, Slider: {slider}, Range: {rangeval}"
demo = gr.Interface(
fn=numericdemo,
inputs=[
gr.Number(label="Number", value=10),
gr.Slider(minimum=0, maximum=100, value=50, step=1, label="Slider"),
gr.Slider(minimum=0, maximum=100, value=[20, 80], label="Range")
],
outputs="text"
)
demo.launch()
3. Selection Inputs
import gradio as gr
def selectiondemo(dropdown, radio, checkboxes):
return f"Dropdown: {dropdown}, Radio: {radio}, Checks: {checkboxes}"
demo = gr.Interface(
fn=selectiondemo,
inputs=[
gr.Dropdown(choices=["Option A", "Option B", "Option C"], label="Dropdown"),
gr.Radio(choices=["Choice 1", "Choice 2", "Choice 3"], label="Radio"),
gr.CheckboxGroup(choices=["Item 1", "Item 2", "Item 3"], label="Checkboxes")
],
outputs="text"
)
demo.launch()
4. Media Inputs
import gradio as gr
from PIL import Image
import numpy as np
def mediademo(image, audio, video):
result = []
if image is not None:
result.append(f"Image shape: {np.array(image).shape}")
if audio is not None:
sr, data = audio
result.append(f"Audio: {sr}Hz, {len(data)} samples")
if video is not None:
result.append(f"Video received")
return "\n".join(result) if result else "No media provided"
demo = gr.Interface(
fn=mediademo,
inputs=[
gr.Image(label="Upload Image", type="pil"),
gr.Audio(label="Upload Audio"),