Streamlit 详细教程

admin管理员组

文章数量:1442038

Streamlit 详细教程

一、引言

在当今人工智能和数据科学快速发展的时代，构建一个简单、直观且功能强大的交互式应用程序变得越来越重要。Streamlit 是一个专为数据科学家和机器学习工程师设计的开源 Python 库，用于快速创建 Web 应用程序。它的最大特点是：无需 HTML、CSS 或 JavaScript 知识，只需用 Python 编写代码，即可构建漂亮的用户界面。

Streamlit 天然适配数据可视化、机器学习模型展示、实验平台构建等场景，被广泛用于构建原型、内部工具和数据应用。

本教程将从理论到实践，详细介绍 Streamlit 的功能、架构原理、组件使用、进阶技巧及部署方法，帮助你从零构建专业的数据 Web 应用。

---

二、Streamlit 的设计理念和架构原理

2.1 核心理念

Streamlit 的设计哲学是“用最少的代码构建最强大的数据应用”。其核心特点包括：

• 声明式语法：通过函数调用而不是事件监听或模板来控制界面。
• 即时反馈：修改代码后可自动刷新页面。
• 原生支持数据结构：如 Pandas、Matplotlib、Plotly、Altair 等可直接渲染。

2.2 架构原理

Streamlit 是一个运行在本地的 Python 脚本，通过启动一个本地服务器，将 Python 脚本的执行结果以可视化方式呈现在浏览器中。

其基本结构如下：

代码语言：javascript代码运行次数：0运行复制

+--------------+         +------------------+
| Python 脚本  | ----->  | Streamlit 后端   |
+--------------+         +--------+---------+
                                    |
                                    v
                         +----------+---------+
                         |  Web 前端 (React)  |
                         +--------------------+

Streamlit 会在每次用户交互（如滑块调整、按钮点击）时重新运行整个脚本，并根据组件状态自动保留上下文。这种架构虽然简单，但在实践中非常高效。

---

三、安装 Streamlit

Streamlit 支持 Python 3.7 及以上版本，可以通过 pip 快速安装：

代码语言：javascript代码运行次数：0运行复制

pip install streamlit

安装成功后可以通过命令行启动：

代码语言：javascript代码运行次数：0运行复制

streamlit hello

该命令会运行 Streamlit 提供的示例应用，验证安装成功。

---

四、第一个 Streamlit 应用

以下是一个最基础的示例应用：

代码语言：javascript代码运行次数：0运行复制

import streamlit as st

st.title("我的第一个 Streamlit 应用")
st.write("你好，欢迎使用 Streamlit！")

保存为 app.py，运行：

代码语言：javascript代码运行次数：0运行复制

streamlit run app.py

会自动在浏览器中打开一个 Web 页面，显示标题和内容。

---

五、常用组件介绍

Streamlit 提供了丰富的 UI 组件，用于展示文本、图像、图表和接收用户输入。

5.1 文本组件

代码语言：javascript代码运行次数：0运行复制

st.title("主标题")
st.header("副标题")
st.subheader("小标题")
st.text("普通文本")
st.markdown("**Markdown 支持**")
st.code("print('Hello')", language='python')
st.latex(r"a^2 + b^2 = c^2")

5.2 输入组件

代码语言：javascript代码运行次数：0运行复制

name = st.text_input("请输入你的名字")
age = st.number_input("年龄", min_value=0, max_value=120)
agree = st.checkbox("我已阅读协议")
status = st.radio("性别", ["男", "女"])
option = st.selectbox("城市", ["北京", "上海", "广州"])
slider_val = st.slider("选择数值", 0, 100)
file = st.file_uploader("上传文件")

5.3 图像和媒体展示

代码语言：javascript代码运行次数：0运行复制

from PIL import Image
img = Image.open("cat.jpg")
st.image(img, caption="小猫", use_column_width=True)

st.audio("example.mp3")
st.video("example.mp4")

5.4 图表展示

代码语言：javascript代码运行次数：0运行复制

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

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)

fig, ax = plt.subplots()
ax.plot(chart_data['A'])
st.pyplot(fig)

---

六、交互逻辑与状态管理

由于 Streamlit 会在每次交互时重新运行脚本，因此需要使用特定方式保存状态。

6.1 使用 st.session_state

代码语言：javascript代码运行次数：0运行复制

if 'count' not in st.session_state:
    st.session_state.count = 0

if st.button("加一"):
    st.session_state.count += 1

st.write("当前值:", st.session_state.count)

6.2 表单（Form）使用

代码语言：javascript代码运行次数：0运行复制

with st.form("my_form"):
    name = st.text_input("姓名")
    age = st.slider("年龄", 0, 120)
    submitted = st.form_submit_button("提交")
    if submitted:
        st.write(f"你好，{name}，你今年 {age} 岁了！")

---

七、页面布局与结构

7.1 栅格布局（列）

代码语言：javascript代码运行次数：0运行复制

col1, col2 = st.columns(2)
col1.write("这是第一列")
col2.write("这是第二列")

7.2 侧边栏布局

代码语言：javascript代码运行次数：0运行复制

st.sidebar.title("侧边栏标题")
st.sidebar.slider("滑块", 0, 100)

---

八、与机器学习模型结合

Streamlit 非常适合展示和部署模型。例如：

代码语言：javascript代码运行次数：0运行复制

import joblib
import streamlit as st

model = joblib.load("model.pkl")

st.title("房价预测")
rooms = st.slider("房间数", 1, 10)
age = st.slider("房屋年龄", 0, 100)

if st.button("预测"):
    result = model.predict([[rooms, age]])
    st.success(f"预测房价: {result[0]:.2f} 万元")

---

九、部署方式

9.1 本地运行

代码语言：javascript代码运行次数：0运行复制

streamlit run app.py

9.2 使用 Streamlit Cloud

1. 注册 Streamlit Cloud
2. 上传 GitHub 仓库
3. 点击“New App”并部署即可

9.3 使用 Docker 部署

代码语言：javascript代码运行次数：0运行复制

FROM python:3.9
WORKDIR /app
COPY . /app
RUN pip install -r requirements.txt
EXPOSE 8501
CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

构建并运行：

代码语言：javascript代码运行次数：0运行复制

docker build -t streamlit-app .
docker run -p 8501:8501 streamlit-app

---

十、总结与推荐实践

Streamlit 是构建数据类 Web 应用的利器，尤其适合数据科学家快速开发原型和实验工具。以下是一些使用建议：

• 保持代码简洁，每个功能模块尽量封装成函数。
• 利用 st.session_state 进行状态控制，避免变量混乱。
• 合理使用 st.form、st.columns 和 st.sidebar 提升界面交互性。
• 结合模型、数据库或 API 提供更强大功能。
• 最终部署时使用 Docker 或 Streamlit Cloud 保证可复现和分享性。

通过本教程，相信你已经掌握了使用 Streamlit 从零开始构建应用的全过程。如果你想进一步提升，可以结合 FastAPI、Gradio、LlamaIndex 等工具构建更完整的 AI 系统。

---

如需获取更多资料，可以访问 Streamlit 官方文档：/

本文标签： Streamlit 详细教程