Gradio 与 Streamlit：Python 快速构建 Web 应用的双子星-Day28

关键词：Gradio, Streamlit, Python Web App, ML Demo, 数据应用, 交互式界面

一、引言：不写 HTML/CSS/JS，也能做 Web 应用？

在传统 Web 开发中，构建一个交互式应用需要掌握 HTML、CSS、JavaScript，甚至 React/Vue 等前端框架。但对于数据科学家、机器学习工程师和 Python 开发者来说，这往往是一道难以跨越的门槛。

Gradio 和 Streamlit 的出现彻底改变了这一局面。它们都是基于 Python 的开源框架，核心理念完全一致------"用纯 Python 代码，几行就能生成一个可交互的 Web 应用" 。你不需要懂前端技术，不需要配置服务器，甚至不需要写 if __name__ == '__main__' 之外的任何 Web 代码。

虽然目标相似，但两者的设计哲学和最佳使用场景截然不同。本文将带你全面了解它们。

二、Gradio：AI 模型的"橱窗"

2.1 背景

Gradio 由 Abubakar Abid 等人在斯坦福大学 AI 实验室开发，最初的目标很简单：让机器学习研究者能够快速创建模型演示界面，方便与同行、审稿人和公众分享研究成果。

2021 年，Gradio 被 Hugging Face 收购，成为其生态系统的核心组件之一。如今，Gradio 已深度集成到 Hugging Face Spaces 中，是发布和分享 AI 模型的首选工具。

2.2 核心特点

特性	说明
极简 API	一个 `gr.Interface()` 函数即可包装任意 Python 函数
ML 专用组件	内置 Audio、Image、Video、3D Model、Plot 等多媒体输入输出组件
自动分享	生成临时公共链接，一键分享给他人体验
内置队列	自动管理并发请求，适合长推理任务（如文生图、大模型推理）
Hugging Face 集成	一键部署到 Spaces，与模型 Hub 无缝对接
主题适配	自动适配深色/浅色模式，与 VS Code、Hugging Face 风格一致

2.3 代码示例

示例 1：最简单的文本分类 Demo

python 复制代码

import gradio as gr

def greet(name):
    return f"Hello, {name}! Welcome to Gradio."

demo = gr.Interface(
    fn=greet,           # 要包装的函数
    inputs="text",      # 输入组件
    outputs="text"      # 输出组件
)

demo.launch()  # 启动本地服务器，自动生成 http://localhost:7860

示例 2：图像分类（热狗检测器）

python 复制代码

import gradio as gr
from transformers import pipeline

# 加载预训练模型
classifier = pipeline("image-classification", model="julien-c/hotdog-not-hotdog")

def predict(image):
    result = classifier(image)
    return {r["label"]: r["score"] for r in result}

demo = gr.Interface(
    fn=predict,
    inputs=gr.Image(type="pil"),           # 图像输入
    outputs=gr.Label(num_top_classes=2),    # 标签概率输出
    title="🌭 Hot Dog Classifier",
    description="Upload an image to see if it's a hot dog!"
)

demo.launch()

示例 3：语音转文字

python 复制代码

import gradio as gr

def transcribe(audio):
    # 这里接入真实的语音识别模型
    return "Transcription result would appear here."

demo = gr.Interface(
    fn=transcribe,
    inputs=gr.Audio(type="filepath", source="microphone"),  # 麦克风输入
    outputs="text",
    title="Speech to Text"
)

demo.launch()

示例 4：Blocks API（更灵活的布局）

python 复制代码

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# 文生图应用")
    
    with gr.Row():
        with gr.Column():
            prompt = gr.Textbox(label="提示词", placeholder="输入描述...")
            btn = gr.Button("生成")
        with gr.Column():
            output = gr.Image(label="生成结果")
    
    btn.click(fn=generate_image, inputs=prompt, outputs=output)

demo.launch()

2.4 Gradio 的独特优势

零配置分享 ：share=True 参数可生成 72 小时有效的公共链接
python 复制代码
```
demo.launch(share=True)  # 生成 https://xxxx.gradio.live 链接
```
Flagging 自动收集反馈：用户点击"Flag"按钮，输入输出自动保存到本地，用于持续改进模型
与 Hugging Face Spaces 原生集成：推送到 Git 仓库即可自动部署，零运维成本

三、Streamlit：数据应用的"瑞士军刀"

3.1 背景

Streamlit 由 Adrien Treuille 、Thiago Teixeira 和 Amanda Kelly 于 2018 年创立，总部位于旧金山。与 Gradio 专注 ML Demo 不同，Streamlit 的定位更加宽泛------"让数据科学家用 Python 快速构建和分享数据应用"。

2022 年，Streamlit 被云数据仓库巨头 Snowflake 以 8 亿美元 收购，随后推出了 Streamlit in Snowflake (SiS)，让用户可以直接在 Snowflake 数据云内部构建和部署应用，无需将数据移出平台。

3.2 核心特点

特性	说明
脚本式开发	整个应用就是一个 Python 脚本，从上到下顺序执行
丰富的小部件	按钮、滑块、单选框、文件上传、数据编辑器等 30+ 组件
数据可视化	原生支持 Matplotlib、Plotly、Altair、Bokeh、PyDeck 等图表库
状态管理	`st.session_state` 支持跨交互保持状态
缓存机制	`@st.cache_data` / `@st.cache_resource` 大幅提升性能
多页面应用	`st.navigation` 支持构建复杂的多页面应用
主题定制	支持自定义配色、字体、布局，可打造品牌化产品

3.3 代码示例

示例 1：最简单的数据展示

python 复制代码

import streamlit as st
import pandas as pd

st.title("我的第一个 Streamlit 应用")
st.write("Hello, Streamlit!")

# 展示数据框
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Score': [85, 92, 78]
})
st.dataframe(df)  # 可交互的数据表格

# 绘制图表
st.line_chart(df.set_index('Name')['Score'])

示例 2：交互式数据筛选

python 复制代码

import streamlit as st
import pandas as pd

st.title("销售数据看板")

# 上传 CSV 文件
uploaded_file = st.file_uploader("上传销售数据", type="csv")

if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)
    
    # 侧边栏筛选器
    st.sidebar.header("筛选条件")
    min_sales = st.sidebar.slider("最低销售额", 0, int(df['sales'].max()), 1000)
    category = st.sidebar.selectbox("产品类别", df['category'].unique())
    
    # 筛选数据
    filtered = df[(df['sales'] >= min_sales) & (df['category'] == category)]
    
    # 展示结果
    st.subheader(f"筛选结果：{len(filtered)} 条记录")
    st.dataframe(filtered)
    
    # 可视化
    st.bar_chart(filtered.set_index('product')['sales'])

示例 3：与 Snowflake 集成（Streamlit in Snowflake）

python 复制代码

import streamlit as st
from snowflake.snowpark.context import get_active_session

st.title("Snowflake 数据看板")

# 自动获取当前 Snowflake 会话
session = get_active_session()

# 直接查询 Snowflake 数据
df = session.table("SALES_DATA").to_pandas()

st.metric("总销售额", f"${df['amount'].sum():,.0f}")
st.line_chart(df.set_index('date')['amount'])

示例 4：多页面应用

python 复制代码

# pages/1_📊_Dashboard.py
import streamlit as st

st.title("数据仪表盘")
st.write("这是首页")

# pages/2_🤖_AI_Chat.py
import streamlit as st

st.title("AI 聊天助手")
prompt = st.text_input("输入你的问题")
if prompt:
    st.write(f"AI 回答：这是一个关于 '{prompt}' 的模拟回答。")

3.4 Streamlit 的独特优势

脚本即应用 ：整个应用就是一个 .py 文件，没有复杂的项目结构
自动重载：保存代码后浏览器自动刷新，开发体验极佳
与 Snowflake 原生集成：数据不离开 Snowflake 平台，安全性极高
丰富的生态 ：社区贡献了数百个自定义组件（streamlit-extras、streamlit-aggrid 等）

四、Gradio vs Streamlit：核心对比

维度	Gradio	Streamlit
定位	ML 模型演示与分享	数据应用与内部工具
学习曲线	极低（5分钟上手）	较低（30分钟上手）
UI 灵活性	中等（组件固定，布局有限）	高（支持复杂布局、自定义 CSS）
ML 专用组件	⭐⭐⭐⭐⭐（Audio、Image、Video、3D、Plot）	⭐⭐⭐（基础图表，需借助外部库）
数据可视化	⭐⭐（基础支持）	⭐⭐⭐⭐⭐（原生支持多种图表库）
状态管理	简单（函数式）	强大（`st.session_state`）
并发处理	⭐⭐⭐⭐⭐（内置队列，适合长推理）	⭐⭐⭐（需自行处理或外包到 API）
分享方式	临时链接 / Hugging Face Spaces	Streamlit Cloud / 自托管 / Snowflake
部署难度	极低（Spaces 一键部署）	低（Streamlit Cloud 免费托管）
多页面支持	有限	原生支持（`st.navigation`）
社区规模	活跃（Hugging Face 生态）	非常活跃（更大用户基数）
背后的公司	Hugging Face	Snowflake

五、如何选择？场景化建议

选 Gradio，如果你：

✅ 需要快速展示一个机器学习模型的效果
✅ 应用的核心是"输入 → 模型推理 → 输出"的流水线
✅ 需要处理多媒体输入/输出（图像、音频、视频）
✅ 希望一键分享到 Hugging Face Spaces
✅ 需要内置队列来处理并发推理请求
✅ 正在写论文，需要给审稿人一个可交互的 Demo

典型场景：文生图 Demo、语音合成工具、图像分类器、大模型聊天界面

选 Streamlit，如果你：

✅ 需要构建复杂的数据仪表盘或内部运营工具
✅ 应用包含大量数据筛选、图表展示、表单交互
✅ 需要多页面导航和复杂的状态管理
✅ 希望深度定制 UI 样式（品牌色、布局等）
✅ 数据存储在 Snowflake 中，希望原生集成
✅ 团队中有非技术人员需要使用应用

典型场景：销售数据看板、BI 报表工具、内部 CRM 系统、LLM 应用原型

两者结合使用

在真实的 AI 工程项目中，两者往往不是竞争关系，而是各司其职：

复制代码

研究阶段 → Gradio 快速包装模型 → 分享给团队评审
    ↓
需求确认 → Streamlit 构建内部运营工具 + 数据看板
    ↓
业务扩大 → Dash / React 重构生产级企业仪表盘

六、快速上手指南

安装

bash 复制代码

# 安装 Gradio
pip install gradio

# 安装 Streamlit
pip install streamlit

运行

bash 复制代码

# Gradio
python app.py        # 代码中已包含 demo.launch()
# 自动打开浏览器访问 http://localhost:7860

# Streamlit
streamlit run app.py
# 自动打开浏览器访问 http://localhost:8501

部署到云端

平台	Gradio	Streamlit
Hugging Face Spaces	⭐ 原生支持，推代码即部署	✅ 支持，选择 Streamlit SDK
Streamlit Cloud	❌ 不支持	⭐ 原生支持，连接 GitHub 自动部署
Vercel / Heroku	✅ 支持	✅ 支持
Docker	✅ 支持	✅ 支持

七、总结

	Gradio	Streamlit
一句话定义	"让 ML 模型秒变 Web Demo"	"让 Python 脚本秒变数据应用"
最佳类比	AI 模型的"橱窗"	数据应用的"瑞士军刀"
核心用户	ML 研究者、AI 开发者	数据科学家、数据分析师、产品经理
设计哲学	极简、专注、即开即用	灵活、强大、可扩展

最终建议 ：如果你是 AI/ML 从业者，先从 Gradio 开始------它让你在最短时间内看到模型跑起来的样子。当你需要构建更复杂的数据应用时，再转向 Streamlit。两者都是 Python 生态中不可或缺的工具，掌握它们将极大提升你的开发效率和成果展示能力。
参考资源

Gradio 官网：https://www.gradio.app

Gradio 文档：https://www.gradio.app/docs

Streamlit 官网：https://streamlit.io

Streamlit 文档：https://docs.streamlit.io

Hugging Face Spaces 文档：https://huggingface.co/docs/hub/spaces