Interactive Web Apps

Use this skill for building lightweight web interfaces to ML models, data visualizations, and analytical tools.

When to use this skill

• ML model demos — let stakeholders interact with predictions
• Data exploration tools — filter, visualize, drill down
• Internal dashboards — monitoring, reporting, self-service analytics
• Prototyping — validate UX before full engineering investment
• A/B test interfaces — experiment with different presentations

Tool selection guide

Tool	Best For	Strengths
Streamlit	Rapid ML demos, data apps	Simplest API, large community, great for Python devs
Panel	Complex dashboards, reactive layouts	Jupyter integration, flexible layout, HoloViz ecosystem
Gradio	ML model sharing, Hugging Face	Built-in sharing, model introspection, API generation
Dash (Plotly)	Production dashboards	Fine-grained control, React backend
NiceGUI	Desktop + web apps	Native-like UI, async support

Quick start: Streamlit

# app.py
import streamlit as st
import pandas as pd
import plotly.express as px

st.title("Sales Dashboard")

# Sidebar controls
region = st.sidebar.selectbox("Region", ["All", "North", "South", "East", "West"])

# Load and filter data
df = pd.read_parquet("sales.parquet")
if region != "All":
    df = df[df['region'] == region]

# Display metrics
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", f"${df['sales'].sum():,.0f}")
col2.metric("Orders", len(df))
col3.metric("Avg Order", f"${df['sales'].mean():.2f}")

# Visualization
fig = px.line(df.groupby('date')['sales'].sum().reset_index(), x='date', y='sales')
st.plotly_chart(fig, use_container_width=True)

# Data table
st.dataframe(df.head(100))

Run: streamlit run app.py

Quick start: Gradio

import gradio as gr
from transformers import pipeline

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

def predict(text):
    result = classifier(text)[0]
    return result['label'], result['score']

interface = gr.Interface(
    fn=predict,
    inputs=gr.Textbox(lines=2, placeholder="Enter text..."),
    outputs=[gr.Label(label="Sentiment"), gr.Number(label="Confidence")],
    title="Sentiment Analysis",
    description="Enter text to analyze sentiment"
)

interface.launch()

Quick start: Panel

import panel as pn
import hvplot.pandas
import pandas as pd

pn.extension()

df = pd.read_parquet("data.parquet")

# Widgets
region = pn.widgets.Select(name='Region', options=['All'] + df['region'].unique().tolist())
metric = pn.widgets.RadioBoxGroup(name='Metric', options=['sales', 'profit', 'units'])

# Reactive function
@pn.depends(region, metric)
def plot(region, metric):
    data = df if region == 'All' else df[df['region'] == region]
    return data.hvplot.line(x='date', y=metric, title=f'{metric.title()} by Date')

# Layout
app = pn.Column(
    "# Sales Dashboard",
    pn.Row(region, metric),
    plot
)

app.servable()

Run: panel serve app.py

Core design principles

1) Start simple, iterate

• MVP with one widget + one visualization
• Add complexity only when needed
• Test with real users early

2) Optimize for the audience

Audience	Approach
Executives	Key metrics, simple filters, clean layout
Data scientists	Raw data access, parameter tuning, debug info
Operations	Refresh buttons, alerts, mobile-friendly

3) Handle state carefully

# Streamlit: use session_state for persistence
if 'counter' not in st.session_state:
    st.session_state.counter = 0

st.session_state.counter += 1

4) Never expose secrets

# ✅ Use st.secrets (Streamlit Cloud) or environment variables
api_key = st.secrets["openai_api_key"]

# ❌ Never hardcode
api_key = "sk-..."

Deployment options

Platform	Best For	Notes
Streamlit Community Cloud	Free sharing	GitHub integration, public by default
Hugging Face Spaces	ML demos	Free tier, Gradio/Streamlit/Docker
Panel + Cloud Run/Heroku	Custom hosting	More control, requires setup
Docker + any cloud	Enterprise	Scalable, private, more work

Common anti-patterns

• ❌ Loading data on every interaction (use caching)
• ❌ Blocking the UI with long computations
• ❌ No error handling for edge cases
• ❌ Hardcoded file paths or credentials
• ❌ Too many widgets (cognitive overload)
• ❌ No mobile consideration

Progressive disclosure

• references/streamlit-advanced.md — Caching, custom components, multipage apps
• references/panel-holoviz.md — Linked brushing, geographic visualizations
• references/gradio-ml.md — Model sharing, API generation, Spaces deployment
• references/app-testing.md — Automated testing for interactive apps
• references/production-deployment.md — Docker, authentication, scaling

Related skills

• @data-science-notebooks — Prototype in notebooks, convert to apps
• @data-science-model-evaluation — Present model metrics in apps
• @data-engineering-orchestration — Connect apps to production pipelines

References

• Streamlit Documentation
• Panel Documentation
• Gradio Documentation
• Hugging Face Spaces