Gradio

Gradio vs Streamlit

Both Gradio and Streamlit build interactive ML demos from Python, but they have different mental models:

Gradio: Component-based and function-oriented. You define a Python function (input → output) and Gradio wraps it in a UI. The gr.ChatInterface is particularly strong — one function call creates a complete chatbot with history, streaming, and retry buttons. Deep HuggingFace integration means deploying to Spaces is trivial. Better for: model demos, HuggingFace-centric workflows, sharing via Spaces links.

Streamlit: Script-based and imperative. You write a script that builds the UI procedurally. More flexible for complex layouts, dashboards, and multi-page apps. Better for: internal tools, dashboards, apps with complex state management.

For LLM chatbots specifically: Gradio's ChatInterface requires less boilerplate and includes more features out of the box (retry, undo, like/dislike buttons). Streamlit gives more layout control.

gr.ChatInterface in 10 lines

import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat(message: str, history: list) -> str:
    messages = [{"role": "system", "content": "You are a helpful assistant."}]
    for user_msg, assistant_msg in history:
        messages.append({"role": "user", "content": user_msg})
        messages.append({"role": "assistant", "content": assistant_msg})
    messages.append({"role": "user", "content": message})

    response = client.chat.completions.create(model="gpt-4o-mini", messages=messages)
    return response.choices[0].message.content

demo = gr.ChatInterface(
    fn=chat,
    title="My LLM Chatbot",
    description="Powered by GPT-4o-mini",
    examples=["Tell me a joke", "Explain attention in transformers"],
    retry_btn=True,
    undo_btn=True,
)
demo.launch()

Gradio auto-generates: chat bubbles, conversation history display, submit/clear/retry/undo buttons, and example prompts. The history parameter is automatically managed by Gradio — your function receives the current conversation history on each call.

Gradio Blocks for custom layouts

import gradio as gr
from openai import OpenAI

client = OpenAI()

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# RAG-Powered Q&A")
    with gr.Row():
        with gr.Column(scale=3):
            chatbot = gr.Chatbot(height=500)
            msg = gr.Textbox(placeholder="Ask about your documents...", show_label=False)
            with gr.Row():
                submit_btn = gr.Button("Send", variant="primary")
                clear_btn = gr.Button("Clear")
        with gr.Column(scale=1):
            gr.Markdown("### Settings")
            model = gr.Dropdown(["gpt-4o", "gpt-4o-mini"], value="gpt-4o-mini", label="Model")
            top_k = gr.Slider(1, 10, value=5, label="Retrieved chunks")
            show_sources = gr.Checkbox(value=True, label="Show sources")

    def respond(message, history, model_choice, k, show_src):
        # Your RAG pipeline here
        response, sources = rag_pipeline(message, model=model_choice, top_k=k)
        if show_src:
            response += f"

**Sources**: {', '.join(sources)}"
        history.append((message, response))
        return "", history

    submit_btn.click(respond, [msg, chatbot, model, top_k, show_sources], [msg, chatbot])
    clear_btn.click(lambda: [], outputs=chatbot)

demo.launch(share=True)  # share=True creates a public tunnel URL

Streaming and async

import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat_stream(message: str, history: list):
    messages = [{"role": "system", "content": "You are helpful."}]
    for user, assistant in history:
        messages += [{"role": "user", "content": user},
                     {"role": "assistant", "content": assistant}]
    messages.append({"role": "user", "content": message})

    # Yield partial responses for streaming
    partial = ""
    stream = client.chat.completions.create(
        model="gpt-4o-mini", messages=messages, stream=True
    )
    for chunk in stream:
        if chunk.choices[0].delta.content:
            partial += chunk.choices[0].delta.content
            yield partial  # Gradio renders each yielded string as the current response

demo = gr.ChatInterface(
    fn=chat_stream,
    title="Streaming Chat",
)
demo.launch()

For generator functions (using yield), Gradio automatically detects streaming and updates the UI token-by-token. No special configuration needed.

HuggingFace Spaces integration

# Deploy to HuggingFace Spaces in minutes
# 1. Create a Space at huggingface.co/new-space (select Gradio SDK)
# 2. Clone the Space repo
git clone https://huggingface.co/spaces/your-username/your-space
cd your-space

# 3. Add your app files
cp app.py requirements.txt .

# 4. Add secrets via HF Space settings (Settings → Repository secrets)
# OPENAI_API_KEY=sk-...

# 5. Push to deploy
git add . && git commit -m "Initial deploy" && git push

# Your app is live at: huggingface.co/spaces/your-username/your-space

HuggingFace Spaces is free for public demos (with compute limits). CPU spaces run Gradio apps fine for non-GPU tasks. For GPU-accelerated demos, GPU spaces are available (paid). Each Space gets a public URL that you can embed in your blog, portfolio, or share directly.

Custom themes and styling

import gradio as gr

# Built-in themes
demo = gr.Blocks(theme=gr.themes.Base())    # minimal
demo = gr.Blocks(theme=gr.themes.Soft())    # rounded, friendly
demo = gr.Blocks(theme=gr.themes.Monochrome())  # professional

# Custom theme
custom_theme = gr.themes.Default(
    primary_hue=gr.themes.colors.blue,
    secondary_hue=gr.themes.colors.sky,
    font=gr.themes.GoogleFont("Inter"),
)

# Custom CSS
with gr.Blocks(css=".gradio-container {max-width: 900px; margin: auto}") as demo:
    gr.Markdown("## My App")

# Programmatic theme builder
theme = gr.themes.Soft().set(
    body_background_fill="#0f1117",     # dark background
    block_background_fill="#1a1c23",
    button_primary_background_fill="#7c3aed",
)

Gotchas

History format: Gradio's ChatInterface passes history as a list of (user_message, assistant_message) tuples. When converting to OpenAI message format, flatten this carefully — it's easy to accidentally skip the assistant's last message or duplicate messages.

State between requests: Like Streamlit, Gradio is stateless by default. Use gr.State for per-session state: state = gr.State([]). Global Python variables ARE shared across sessions — don't use them for per-user state.

Queue for concurrent users: Enable the queue for multi-user deployments: demo.queue(max_size=10).launch(). Without the queue, concurrent requests can interfere with streaming output.

Large file uploads: Gradio's file upload component has a default 100MB limit. Increase via: gr.File(max_size=500). For very large files, stream them directly rather than uploading through Gradio's UI.