Streamlit 详细教程

原创

IT蜗壳-Tango

发布于 2025-04-04 20:57:06

3.9K0

一、引言

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

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

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

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

2.1 核心理念

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

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

2.2 架构原理

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

其基本结构如下：

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

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

三、安装 Streamlit

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

pip install streamlit

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

streamlit hello

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

四、第一个 Streamlit 应用

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

import streamlit as st

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

保存为 app.py，运行：

streamlit run app.py

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

五、常用组件介绍

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

5.1 文本组件

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 输入组件

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 图像和媒体展示

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 图表展示

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`

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）使用

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 栅格布局（列）

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

7.2 侧边栏布局

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

八、与机器学习模型结合

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

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 本地运行

streamlit run app.py

9.2 使用 Streamlit Cloud

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

9.3 使用 Docker 部署

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"]

构建并运行：

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 官方文档：https://docs.streamlit.io/

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S12#AI进化论

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S12#AI进化论

登录后参与评论

0 条评论

热度