Gradio Lite

Run Gradio entirely in the browser with WebAssembly

Gradio Lite (@gradio/lite) allows you to run Gradio applications entirely in the browser using WebAssembly and Pyodide. This means you can create interactive machine learning demos without any server infrastructure.

Overview

Gradio Lite runs Python code directly in the browser using Pyodide, a Python distribution compiled to WebAssembly. This enables:

• Serverless demos: No backend infrastructure needed
• Static hosting: Deploy to GitHub Pages, Netlify, or any static host
• Privacy: All computation happens client-side
• Instant loading: No server cold starts

Gradio Lite is ideal for lightweight demos and educational content. For production apps with heavy computation or external dependencies, consider regular Gradio deployed to Hugging Face Spaces.

Quick start

Create an HTML file with your Gradio app embedded:

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
import gradio as gr

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

gr.Interface(
    fn=greet,
    inputs=gr.Textbox(label="Name"),
    outputs=gr.Textbox(label="Greeting")
).launch()
  </gradio-lite>
</body>
</html>

That’s it! Open this HTML file in a browser to see your Gradio app running entirely client-side.

Installation

Via CDN (recommended)

Include Gradio Lite from a CDN:

<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />

Via npm

For bundled applications:

npm install @gradio/lite

Writing Gradio Lite apps

Basic structure

Write your Gradio Python code inside <gradio-lite> tags:

<gradio-lite>
import gradio as gr

def double(x):
    return x * 2

gr.Interface(
    fn=double,
    inputs=gr.Number(label="Input"),
    outputs=gr.Number(label="Output")
).launch()
</gradio-lite>

Multiple files

Organize code across multiple files using <gradio-file> tags:

<gradio-lite>
<gradio-file name="app.py">
import gradio as gr
from utils import process_data

def greet(name):
    return process_data(name)

gr.Interface(
    fn=greet,
    inputs="text",
    outputs="text"
).launch()
</gradio-file>

<gradio-file name="utils.py">
def process_data(text):
    return f"Processed: {text.upper()}"
</gradio-file>
</gradio-lite>

Install dependencies

Specify Python packages to install:

<gradio-lite>
<gradio-requirements>
numpy
pandas
matplotlib
</gradio-requirements>

<gradio-file name="app.py">
import gradio as gr
import numpy as np
import pandas as pd

def analyze(data):
    df = pd.DataFrame(data)
    return df.describe()

gr.Interface(
    fn=analyze,
    inputs=gr.Dataframe(),
    outputs=gr.Dataframe()
).launch()
</gradio-file>
</gradio-lite>

Only packages available in Pyodide can be installed. Check the Pyodide package list for available packages.

Examples

Image processing

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
<gradio-requirements>
pillow
numpy
</gradio-requirements>

import gradio as gr
from PIL import Image, ImageFilter
import numpy as np

def blur_image(image):
    img = Image.fromarray(image)
    blurred = img.filter(ImageFilter.GaussianBlur(radius=5))
    return np.array(blurred)

gr.Interface(
    fn=blur_image,
    inputs=gr.Image(label="Upload Image"),
    outputs=gr.Image(label="Blurred Image"),
    title="Image Blur Demo"
).launch()
  </gradio-lite>
</body>
</html>

Data visualization

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
<gradio-requirements>
matplotlib
numpy
</gradio-requirements>

import gradio as gr
import matplotlib.pyplot as plt
import numpy as np

def plot_sine(frequency, amplitude):
    x = np.linspace(0, 2 * np.pi, 100)
    y = amplitude * np.sin(frequency * x)
    
    fig, ax = plt.subplots()
    ax.plot(x, y)
    ax.set_xlabel('x')
    ax.set_ylabel('y')
    ax.set_title(f'Sine Wave: f={frequency}, A={amplitude}')
    ax.grid(True)
    
    return fig

gr.Interface(
    fn=plot_sine,
    inputs=[
        gr.Slider(1, 10, value=1, label="Frequency"),
        gr.Slider(0.1, 2, value=1, label="Amplitude")
    ],
    outputs=gr.Plot(label="Sine Wave"),
    title="Interactive Sine Wave"
).launch()
  </gradio-lite>
</body>
</html>

Text processing

<!DOCTYPE html>
<html>
<head>
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
  <link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
</head>
<body>
  <gradio-lite>
import gradio as gr
import re
from collections import Counter

def analyze_text(text):
    # Word count
    words = re.findall(r'\w+', text.lower())
    word_count = len(words)
    
    # Character count
    char_count = len(text)
    
    # Most common words
    common = Counter(words).most_common(5)
    common_str = "\n".join([f"{word}: {count}" for word, count in common])
    
    return {
        "Word Count": word_count,
        "Character Count": char_count,
        "Most Common Words": common_str
    }

gr.Interface(
    fn=analyze_text,
    inputs=gr.Textbox(lines=5, label="Enter text"),
    outputs=gr.JSON(label="Analysis"),
    title="Text Analyzer",
    description="Analyze text for word count, character count, and common words"
).launch()
  </gradio-lite>
</body>
</html>

Deployment

Gradio Lite apps are just HTML files, so you can deploy them anywhere:

GitHub Pages

1. Create an index.html file with your Gradio Lite app
2. Push to a GitHub repository
3. Enable GitHub Pages in repository settings
4. Your app will be live at https://username.github.io/repo-name

Netlify

1. Create an index.html file
2. Drag and drop to Netlify Drop
3. Get an instant deployment URL

Any static host

Deploy to:

• Vercel
• Cloudflare Pages
• AWS S3 + CloudFront
• Google Cloud Storage
• Or any web server

Limitations

Gradio Lite has some limitations compared to regular Gradio:

• Package availability: Only Pyodide-compatible packages work
• Performance: WebAssembly is slower than native Python for heavy computation
• File size: Large dependencies increase initial load time
• Browser compatibility: Requires modern browsers with WebAssembly support
• No server features: No server-side APIs, databases, or external services

Best practices

1. Keep dependencies minimal

   Only include packages you actually need. Fewer dependencies = faster load times.

2. Optimize for client-side

   Gradio Lite works best for lightweight processing. For heavy models, use regular Gradio.

3. Test in multiple browsers

   Verify your app works in Chrome, Firefox, Safari, and Edge.

4. Add loading indicators

   The initial load can take time. Consider adding a loading message.

When to use Gradio Lite

Good use cases ✅

• Educational demos and tutorials
• Simple data visualizations
• Text processing tools
• Mathematical calculators
• Image filters and transformations
• Static portfolio projects

Not recommended ❌

• Large ML models (use Hugging Face Spaces)
• Heavy computation (use server-side Gradio)
• Real-time data from APIs (needs backend)
• Production applications (needs reliability)
• Apps requiring authentication (needs server)

Next steps

Sharing apps

Learn about sharing regular Gradio apps

Hugging Face Spaces

Deploy full Gradio apps to Spaces