快速搭建Web前端（streamlit使用指南）

1 什么是 Streamlit？

Streamlit 是一个用于快速搭建Web应用的Python 框架，语法简单，内置多种数据可视化组件，几行代码就可以实现美观的web界面，可以用于交互式数据应用和包装模型部署，而不必担心 Web 开发的技术细节。

2 安装与快速开始

安装

bash

pip install streamlit

创建web界面 python

%%writefile web_example.py

import streamlit as st

st.title("我的第一个 Streamlit 应用")

st.write("Hello, World!")

运行应用

bash

streamlit run web_example.py
请注意：Streamlit是流失设计，必须使用bash命令执行。如果是在notebook里执行，!streamlit run web_example.py，加个感叹号就是bash命令了。

3 核心组件与功能

3.1 文本显示

python 复制代码

import streamlit as st
# 标题和文本
st.title("📊 数据分析仪表板")
st.header("数据集概况")
st.subheader("数据统计信息")
st.text("这是一段普通文本")
st.markdown("**加粗文本** 和 *斜体文本*")
st.latex(r''' e^{i\pi} + 1 = 0 ''')  # 数学公式

# 代码展示
code = '''def hello():
    print("Hello, Streamlit!")'''
st.code(code, language='python')

效果如下：

3.2 数据展示

python 复制代码

import pandas as pd
import streamlit as st
df = pd.DataFrame({
    '姓名': ['张三', '李四', '王五'],
    '年龄': [25, 30, 35],
    '城市': ['北京', '上海', '广州']
})

# 显示数据
st.dataframe(df)  # 交互式表格
st.table(df)      # 静态表格
st.json({'name': 'John', 'age': 30})  # JSON数据

效果如下：

3.3 图表和可视化

python 复制代码

import matplotlib.pyplot as plt
import plotly.express as px
import streamlit as st

# Streamlit 内置图表
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['A', 'B', 'C']
)

st.line_chart(chart_data)
st.bar_chart(chart_data)
st.area_chart(chart_data)

# Matplotlib 图表
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [1, 4, 2, 3])
st.pyplot(fig)

# Plotly 图表
fig = px.scatter(df, x='年龄', y='城市', size='年龄')
st.plotly_chart(fig)

效果如下：

3.4 交互式组件

3.4.1 输入组件

python 复制代码

# 按钮
if st.button("点击我"):
    st.write("按钮被点击了！")

# 复选框
agree = st.checkbox("我同意")
if agree:
    st.write("感谢您的同意！")

# 单选按钮
genre = st.radio(
    "您喜欢什么类型的电影？",
    ('喜剧', '动作', '爱情')
)
st.write(f"您选择了: {genre}")

# 下拉选择
option = st.selectbox(
    "请选择一个选项",
    ['选项1', '选项2', '选项3']
)

# 滑动条
age = st.slider("您的年龄", 0, 100, 25)
st.write(f"您的年龄是: {age}")

# 文本输入
name = st.text_input("请输入您的姓名")
if name:
    st.write(f"您好, {name}!")

# 文件上传
uploaded_file = st.file_uploader("选择一个文件")
if uploaded_file is not None:
    bytes_data = uploaded_file.getvalue()
    st.write(f"文件大小: {len(bytes_data)} 字节")

效果如下：

3.4.2 布局组件

python 复制代码

# 侧边栏
st.sidebar.title("设置")
sidebar_option = st.sidebar.selectbox("选项", ["A", "B", "C"])

# 列布局
col1, col2, col3 = st.columns(3)
with col1:
    st.header("列1")
    st.write("这是第一列")
with col2:
    st.header("列2")
    st.write("这是第二列")
with col3:
    st.header("列3")
    st.write("这是第三列")

# 扩展器
with st.expander("点击查看详情"):
    st.write("这里是详细信息...")

效果如下：

3.4.3 媒体显示

python 复制代码

# 图片
st.image("https://streamlit.io/images/brand/streamlit-mark-color.png", 
         caption="Streamlit Logo")

# 音频
st.audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")

# 视频
st.video("https://www.youtube.com/watch?v=3JZ_D3ELwOQ")

3.5 状态管理

因为streamlit是流式执行，即用户每次与web按钮进行交互时，都会触发重新执行整个py文件。为了提高加载效率，有些无需每次执行都重新加载的内容，可以放在状态管理器st.session_state中。

python 复制代码

# 会话状态 - 跨重新运行保持数据
if 'counter' not in st.session_state:
    st.session_state.counter = 0

if st.button("增加计数"):
    st.session_state.counter += 1

st.write(f"当前计数: {st.session_state.counter}")

# 表单 - 批量提交
with st.form("my_form"):
    username = st.text_input("用户名")
    password = st.text_input("密码", type="password")
    submitted = st.form_submit_button("提交")
    
    if submitted:
        st.write(f"用户名: {username}")

效果如下：

3.6 缓存机制

3.6.1 缓存数据

@st.cache_data装饰器用于记忆函数的历史执行结果。当使用@st.cache装饰一个函数时，Streamlit 会将该函数的结果存储在一个缓存中，以便在后续调用中直接返回缓存的结果，而不是重新计算。使用st.cache_data.clear()清空缓存后，则需要重新运行和读取。参数如下：

func:要缓存的函数。如果提供了函数，则会对该函数的计算结果进行缓存。如果为None，则返回一个可以接受函数作为参数的装饰器。
ttl(int or None):必需。缓存的生存时间，以秒为单位。在缓存的生存时间内，对函数的调用将返回缓存的结果而不是重新计算。如果设置为None，缓存将永不过期。
max_entries(int or None):可选。缓存的最大条目数。当达到指定的最大条目数时，新的计算结果将替换最早的计算结果。
show_spinner(bool):可选。当进行缓存计算时，是否显示加载指示器。默认为True。
persist(bool):可选。是否将缓存数据持久化到磁盘。如果为True，数据将在应用程序重新启动时仍然存在。默认为False。
experimental_allow_widgets(bool):可选。是否允许在被缓存的函数中使用Streamlit小部件。默认为False。启用此选项时，可以在被缓存的函数中使用小部件。
hash_funcs(dictorNone):可选。用于指定自定义哈希函数的字典。键是参数名称，值是哈希函数。如果为None，将使用默认哈希函数。

python 复制代码

@st.cache_data
def load_data(url):
    return pd.read_csv(url)

# 只有第一次会执行load_data，后续会使用缓存
data = load_data("https://raw.githubusercontent.com/vega/vega/master/docs/data/penguins.csv")
st.write(data)

3.6.2 缓存资源（例如模型文件）

python 复制代码

@st.cache_resource
def get_model():
    # 缓存资源（如模型）
    return SomeLargeModel()

#示例
#加载模型
@st.cache_resource
def load_model():
    return joblib.load('model.pkl')

model = load_model()

st.title("🏠 房价预测")

# 输入特征
col1, col2 = st.columns(2)

with col1:
    sqft = st.number_input("房屋面积 (平方英尺)", min_value=500, max_value=5000, value=1500)
    bedrooms = st.number_input("卧室数量", min_value=1, max_value=10, value=3)

with col2:
    bathrooms = st.number_input("卫生间数量", min_value=1, max_value=5, value=2, step=0.5)
    year_built = st.number_input("建造年份", min_value=1900, max_value=2023, value=2000)

# 预测按钮
if st.button("预测房价"):
    features = np.array([[sqft, bedrooms, bathrooms, year_built]])
    prediction = model.predict(features)
    st.success(f"预测房价: ${prediction[0]:,.2f}")

3.7 执行状态

python 复制代码

import streamlit as st
import time

progress_bar = st.empty()

for i in range(10):
    progress_bar.progress(i / 10, '进度')
    time.sleep(0.5)

with st.spinner('加载中...'):
    time.sleep(2)

效果如下：

3.8 提示信息

python 复制代码

import streamlit as st

st.error('错误信息') #红色字体和背景
st.warning('警告信息') #黄色
st.info('提示信息') #蓝色
st.success('成功信息') #绿色
st.exception('异常信息') #红色

4 学习资源

官方文档: https://docs.streamlit.io/

示例库: https://streamlit.io/gallery

社区论坛: https://discuss.streamlit.io/

GitHub: https://github.com/streamlit/streamlit