Gradio/Streamlit：快速构建 AI 模型演示界面与交互式 Web 应用

好的，各位AI爱好者、编程达人们，欢迎来到今天的“Gradio/Streamlit：快速构建 AI 模型演示界面与交互式 Web 应用”讲座！

今天咱们要聊的，是两个能让你的AI模型瞬间变得“平易近人”的神器——Gradio和Streamlit。它们就像是AI模型的“化妆师”和“公关”，能让那些深藏闺阁的模型，一下子走到台前，和用户亲密互动。

别担心，咱们不搞那些虚头巴脑的理论，直接上手，用代码说话，让你看完就能立马用起来。

第一部分：Gradio——AI模型的“快速通道”

Gradio，顾名思义，就是“Gradual Interface”，意思是逐步构建界面。它的核心理念是：简单、快速、迭代。就像搭积木一样，几行代码就能搞出一个漂亮的交互界面。

1. Gradio 的“Hello, World!”

咱们先来个最简单的例子，让大家感受一下Gradio的魅力。

import gradio as gr

def greet(name):
  return "Hello, " + name + "!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

这段代码干了啥？

import gradio as gr: 导入Gradio库，并起个别名gr，方便使用。
def greet(name): 定义一个函数，接收一个名字作为输入，返回一句问候语。这个就是咱们的“AI模型”，虽然简单，但它代表了任何你能想到的AI功能。
iface = gr.Interface(...): 创建一个Gradio界面。
- fn=greet: 指定哪个函数是咱们的“AI模型”。
- inputs="text": 指定输入类型是文本框。
- outputs="text": 指定输出类型也是文本框。
iface.launch(): 启动界面！

运行这段代码，你会发现浏览器自动弹出一个网页，上面有个文本框，你输入名字，点击“Submit”，下面就显示出问候语。是不是很神奇？

2. Gradio 的常用组件

Gradio提供了各种各样的组件，让你可以构建更复杂的界面。下面是一些常用的组件：

组件类型	描述	代码示例
`text`	文本框，用于输入和输出文本。	`gr.Interface(fn=..., inputs="text", outputs="text")`
`number`	数字输入框，用于输入数字。	`gr.Interface(fn=..., inputs="number", outputs="number")`
`image`	图片上传和显示。	`gr.Interface(fn=..., inputs="image", outputs="image")`
`audio`	音频上传和播放。	`gr.Interface(fn=..., inputs="audio", outputs="audio")`
`video`	视频上传和播放。	`gr.Interface(fn=..., inputs="video", outputs="video")`
`checkbox`	复选框，用于选择多个选项。	`gr.Interface(fn=..., inputs="checkbox", outputs="text")`
`radio`	单选框，用于选择一个选项。	`gr.Interface(fn=..., inputs="radio", outputs="text")`
`dropdown`	下拉菜单，用于选择一个选项。	`gr.Interface(fn=..., inputs="dropdown", outputs="text")`
`slider`	滑动条，用于选择一个范围内的值。	`gr.Interface(fn=..., inputs="slider", outputs="number")`
`file`	文件上传。	`gr.Interface(fn=..., inputs="file", outputs="text")`
`dataframe`	表格数据输入和输出。	`gr.Interface(fn=..., inputs="dataframe", outputs="dataframe")`
`chatbot`	聊天机器人界面。	`gr.ChatInterface(fn=..., inputs="text", outputs="text")`
`state`	维护对话状态，用于构建有状态的聊天机器人。	(需要结合`gr.State`使用，见后续例子)

3. 一个稍微复杂点的例子：图片分类

假设你训练了一个图片分类模型，想用Gradio做一个演示界面。

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

# 假设你有一个图片分类模型
def classify_image(image):
  # 这里用随机数模拟模型输出
  probabilities = np.random.rand(3)
  labels = ["cat", "dog", "bird"]
  return {labels[i]: probabilities[i] for i in range(3)}

iface = gr.Interface(
    fn=classify_image,
    inputs="image",
    outputs="label", # 使用 label 组件显示分类结果
    examples=["images/cat.jpg", "images/dog.jpg", "images/bird.jpg"] # 添加一些示例图片
)
iface.launch()

这段代码做了什么？

classify_image(image): 模拟一个图片分类模型，接收一张图片，返回每个类别的概率。
inputs="image": 指定输入是图片。
outputs="label": 指定输出是标签（Gradio会自动显示概率）。
examples=["images/cat.jpg", "images/dog.jpg", "images/bird.jpg"]: 添加一些示例图片，用户可以直接点击运行，方便体验。

4. Gradio 的 Block API：更灵活的界面布局

如果你觉得gr.Interface的布局太简单，想自定义界面，可以使用gr.Blocks API。

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

with gr.Blocks() as demo:
    name_input = gr.Textbox(lines=2, placeholder="What is your name?")
    intensity_slider = gr.Slider(minimum=0, maximum=10, value=1, label="Intensity")
    greeting_output = gr.Textbox()

    greet_btn = gr.Button("Greet")

    greet_btn.click(fn=greet, inputs=[name_input, intensity_slider], outputs=greeting_output)

demo.launch()

这段代码做了什么？

with gr.Blocks() as demo:: 创建一个Blocks对象，所有的组件都放在这个对象里。
gr.Textbox(...): 创建一个文本框。
gr.Slider(...): 创建一个滑动条。
gr.Button(...): 创建一个按钮。
greet_btn.click(...): 指定按钮点击后执行的函数，以及输入和输出组件。

Blocks API提供了更灵活的布局方式，你可以自由地排列组件，添加标题、描述等等。

5. Gradio 的 Chatbot：打造你的专属聊天机器人

Gradio还提供了ChatInterface和State组件，让你轻松构建聊天机器人。

import gradio as gr

def echo(message, history):
    return message

demo = gr.ChatInterface(echo)

demo.launch()

这个最简单的聊天机器人只是简单地回复你发的消息。但是，我们可以通过State组件来维护对话历史，让机器人变得更有“记忆”。

import gradio as gr

def chatbot(message, history):
    history = history or []
    response = "Hello! You said: " + message
    history.append((message, response))
    return history, history

demo = gr.ChatInterface(chatbot, chatbot=gr.Chatbot(height=300))

demo.launch()

要构建一个更智能的聊天机器人，你需要使用更复杂的自然语言处理模型，并将模型集成到Gradio界面中。

第二部分：Streamlit——数据科学家的“瑞士军刀”

Streamlit，是为数据科学家量身定制的Web应用框架。它让你用Python脚本就能构建美观、交互性强的Web应用，无需懂HTML、CSS、JavaScript等前端技术。

1. Streamlit 的 “Hello, World!”

import streamlit as st

st.title("My First Streamlit App")

name = st.text_input("What's your name?")

if name:
    st.write("Hello, %s!" % name)

这段代码干了啥？

import streamlit as st: 导入Streamlit库，并起个别名st。
st.title("My First Streamlit App"): 在页面上显示一个标题。
st.text_input("What's your name?"): 创建一个文本输入框，提示用户输入名字。
if name:: 判断用户是否输入了名字。
st.write("Hello, %s!" % name): 如果用户输入了名字，就显示一句问候语。

运行这段代码（streamlit run your_script.py），你会发现浏览器自动弹出一个网页，上面有个文本框，你输入名字，页面上就显示出问候语。

2. Streamlit 的常用组件

Streamlit也提供了丰富的组件，让你可以构建各种各样的应用。

组件类型	描述	代码示例
`st.title()`	显示标题。	`st.title("My App Title")`
`st.header()`	显示二级标题。	`st.header("Section Header")`
`st.subheader()`	显示三级标题。	`st.subheader("Subsection Header")`
`st.text()`	显示文本。	`st.text("This is some text.")`
`st.markdown()`	显示Markdown文本。	`st.markdown("## This is a Markdown header")`
`st.latex()`	显示LaTeX公式。	`st.latex(r"int_{a}^{b} x^2 dx")`
`st.code()`	显示代码。	`st.code("import streamlit as st", language="python")`
`st.image()`	显示图片。	`st.image("image.jpg", caption="My Image")`
`st.audio()`	播放音频。	`st.audio("audio.mp3")`
`st.video()`	播放视频。	`st.video("video.mp4")`
`st.button()`	创建一个按钮。	`if st.button("Click me"): st.write("Button clicked!")`
`st.checkbox()`	创建一个复选框。	`agree = st.checkbox("I agree to the terms")`
`st.radio()`	创建一个单选框。	`option = st.radio("Choose an option", ("Option 1", "Option 2", "Option 3"))`
`st.selectbox()`	创建一个下拉菜单。	`option = st.selectbox("Choose an option", ("Option 1", "Option 2", "Option 3"))`
`st.multiselect()`	创建一个多选菜单。	`options = st.multiselect("Choose options", ("Option 1", "Option 2", "Option 3"))`
`st.slider()`	创建一个滑动条。	`age = st.slider("How old are you?", 0, 100, 25)`
`st.text_input()`	创建一个文本输入框。	`name = st.text_input("What's your name?")`
`st.number_input()`	创建一个数字输入框。	`age = st.number_input("How old are you?", 0, 100, 25)`
`st.date_input()`	创建一个日期输入框。	`date = st.date_input("When's your birthday?")`
`st.time_input()`	创建一个时间输入框。	`time = st.time_input("What time is it?")`
`st.file_uploader()`	创建一个文件上传器。	`uploaded_file = st.file_uploader("Choose a file")`
`st.dataframe()`	显示一个DataFrame。	`st.dataframe(df)`
`st.table()`	显示一个静态表格。	`st.table(df)`
`st.line_chart()`	显示一个折线图。	`st.line_chart(data)`
`st.bar_chart()`	显示一个柱状图。	`st.bar_chart(data)`
`st.map()`	显示一个地图。	`st.map(data)`
`st.progress()`	显示一个进度条。	`my_bar = st.progress(0)`
`st.spinner()`	显示一个加载指示器。	`with st.spinner("Loading..."): time.sleep(2)`
`st.success()`	显示一个成功消息。	`st.success("Success!")`
`st.warning()`	显示一个警告消息。	`st.warning("Warning!")`
`st.error()`	显示一个错误消息。	`st.error("Error!")`
`st.info()`	显示一个信息消息。	`st.info("Information!")`
`st.exception()`	显示一个异常。	`try: 1 / 0 except Exception as e: st.exception(e)`

3. 一个数据分析的例子：房价预测

假设你有一个房价预测模型，想用Streamlit做一个数据分析的Web应用。

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

# 假设你有一个房价预测模型
def predict_price(size, bedrooms, location):
  # 这里用随机数模拟模型输出
  base_price = 100000
  price = base_price + size * 1000 + bedrooms * 50000 - location * 10000
  return price

st.title("House Price Prediction")

size = st.slider("Size (sq ft)", 500, 3000, 1500)
bedrooms = st.slider("Bedrooms", 1, 5, 3)
location = st.selectbox("Location", ["Downtown", "Suburbs", "Rural"])

location_code = {"Downtown": 0, "Suburbs": 1, "Rural": 2}[location]

predicted_price = predict_price(size, bedrooms, location_code)

st.write("Predicted Price: $", predicted_price)

# 数据可视化
data = pd.DataFrame({
    'Size': [size],
    'Bedrooms': [bedrooms],
    'Location': [location],
    'Price': [predicted_price]
})

st.write("Data:")
st.dataframe(data)

st.write("Price Distribution:")
plt.hist(np.random.normal(predicted_price, 50000, 1000))
st.pyplot(plt)

这段代码做了什么？

predict_price(size, bedrooms, location): 模拟一个房价预测模型，接收房屋大小、卧室数量、地理位置作为输入，返回预测价格。
st.slider(...): 创建滑动条，让用户输入房屋大小和卧室数量。
st.selectbox(...): 创建下拉菜单，让用户选择地理位置。
predicted_price = predict_price(...): 调用预测模型，计算预测价格。
st.write(...): 在页面上显示预测价格。
st.dataframe(...): 显示数据表格。
st.pyplot(...): 显示价格分布图。

4. Streamlit 的布局：让你的应用更美观

Streamlit提供了多种布局方式，让你可以更好地组织页面内容。

st.columns(): 将页面分成多个列。
st.sidebar(): 创建一个侧边栏。
st.expander(): 创建一个可折叠的区域。
st.tabs(): 创建多个标签页。

5. Streamlit 的缓存：提升应用性能

Streamlit提供了st.cache_data和st.cache_resource装饰器，可以缓存函数的结果，避免重复计算，提升应用性能。

import streamlit as st
import time

@st.cache_data
def load_data():
    # 模拟加载数据的过程
    time.sleep(5)
    return "Data loaded!"

st.write("Loading data...")
data = load_data()
st.write(data)

第一次运行这段代码时，会等待5秒钟。再次运行，会发现数据瞬间加载完成，因为数据已经被缓存了。

第三部分：Gradio vs Streamlit：如何选择？

Gradio和Streamlit都是优秀的Web应用框架，但它们的设计理念和适用场景有所不同。

特性	Gradio	Streamlit
设计理念	快速构建AI模型演示界面。	为数据科学家打造Web应用。
核心功能	专注于AI模型的输入输出交互。	提供丰富的组件，方便数据展示和分析。
适用场景	快速演示AI模型，收集用户反馈。	构建数据分析、机器学习相关的Web应用。
学习曲线	简单易用，上手快。	稍复杂一些，但功能更强大。
灵活性	相对较低，主要通过 `Blocks` API 提供一定灵活性。	较高，布局和样式自定义程度更高。
交互性	侧重于模型输入输出的交互，适合需要用户实时参与的AI模型。	适合展示数据分析结果，提供用户交互式探索数据的能力。
部署	部署简单，可以分享到Gradio Hub。	部署稍复杂，需要配置服务器。
社区支持	活跃，有丰富的示例和教程。	活跃，社区资源丰富。
典型应用	图片分类、语音识别、文本生成等AI模型的演示。	房价预测、股票分析、用户行为分析等数据科学应用。
状态管理	使用 `State` 组件可以维护简单对话状态。	通过 `st.session_state` 可以更灵活地管理应用状态。
渲染方式	基于 JavaScript 的前端渲染，对复杂交互支持更好。	基于 Python 的后端渲染，代码逻辑更清晰，更适合数据科学家。

总结：

如果你想快速搭建一个AI模型的演示界面，收集用户反馈，Gradio是你的不二之选。
如果你想构建一个数据分析、机器学习相关的Web应用，Streamlit是更好的选择。

当然，你也可以将Gradio和Streamlit结合起来使用，发挥它们各自的优势。

最后，给大家留个小作业：

用Gradio构建一个简单的文本翻译界面。
用Streamlit构建一个简单的股票数据可视化应用。

希望今天的讲座对大家有所帮助！祝大家编程愉快！

发表回复 取消回复

发表回复取消回复