Streamlit 快速上手

30 天学 Streamlit(官方教程):https://30days.streamlit.app/

  • 如何搭建一个编程环境用于构建 Streamlit 应用
  • 构建你的第一个 Streamlit 应用
  • 学习所有好玩的、能用在 Streamlit 应用里的输入输出组件

1 设置本地开发环境

安装conda+Streamlit库

启动示例Streamlit应用:streamlit hello

2 构建你的第一个 Streamlit 应用

# streamlit_app.py
import streamlit as st

st.write('Hello world!')

启动应用:streamlit run streamlit_app.py

3 按钮组件 st.button

import streamlit as st # streamlit 库导入

st.header('st.button') # 标题文字 

if st.button('Say hello'):
     st.write('Why hello there') # 按下按钮时显示
else: 
     st.write('Goodbye') # 默认情况下显示

4 视频推荐(略)

5 输出内容 st.write

内容类型:

  • 输出字符串,类似于 st.markdown()
  • 输出 Python 的 dict 字典对象
  • 输出 pandas DataFrame,将数据框显示为表格
  • 输出用 matplotlibplotly、等库所作的图表
import numpy as np
import altair as alt
import pandas as pd
import streamlit as st

st.header('st.write')

st.write('Hello, *World!* :sunglasses:') # 输出文字

st.write(1234) # 输出数字

df = pd.DataFrame({
     'first column': [1, 2, 3, 4],
     'second column': [10, 20, 30, 40]
     })
st.write(df) # 输出表格

# 输出文字+表格
st.write('Below is a DataFrame:', df, 'Above is a dataframe.')

# 输出altair的可视化绘图
df2 = pd.DataFrame(
     np.random.randn(200, 3),
     columns=['a', 'b', 'c'])
c = alt.Chart(df2).mark_circle().encode(
     x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])
st.write(c)

除了 <code>st.write</code>,你还可以探索一下其他显示文本的方法:

<code>st.markdown</code><code>st.header</code><code>st.subheader</code><code>st.caption</code><code>st.text</code><code>st.latex</code><code>st.code</code>

6 上传 GitHub(略)

7 应用部署至 Streamlit Community Cloud

Streamlit Community Cloud 是一项用于轻松部署 Streamlit 应用的托管服务

按照以下步骤来部署 Streamlit 应用:

  1. 使用 GitHub 或 Gmail 认证登录
  2. 选择一个仓库、分支以及文件
  3. 点击部署(Deploy),完成部署
  4. git push 时会立刻更新所部署的应用

8 滑条输入 st.slider

支持的数据类型:int、float、date、time 和 datetime

import streamlit as st
from datetime import time, datetime

st.header('st.slider')

# 基础滑条:最小值,最大值,默认值
st.subheader('Slider')
age = st.slider('How old are you?', 0, 130, 25)
st.write("I'm ", age, 'years old') 

# 范围滑条:最小值,最大值,默认下界,默认上界
st.subheader('Range slider')
values = st.slider(
     'Select a range of values',
     0.0, 100.0, (25.0, 75.0))
st.write('Values:', values) 

# 时间范围滑条:默认时间下界,默认时间上界
st.subheader('Range time slider')
appointment = st.slider(
     "Schedule your appointment:",
     value=(time(11, 30), time(12, 45)))
st.write("You're scheduled for:", appointment)

# 日期时间滑条:允许设定一个日期时间
st.subheader('Datetime slider')
start_time = st.slider(
     "When do you start?",
     value=datetime(2020, 1, 1, 9, 30),
     format="MM/DD/YY - hh:mm")
st.write("Start time:", start_time)

示例效果

9 折线图 st.line_chart

根据数据自动确定图标参数,简单易用,但较难调整样式和选项

必要时,可使用 st.altair_chart 手动指定参数来定制更灵活的图表

10 选择组件 st.selectbox

import streamlit as st

st.header('st.selectbox')

option = st.selectbox(
     'What is your favorite color?',
     ('Blue', 'Red', 'Green')) # 三个选项

st.write('Your favorite color is ', option)

11 多选组件 st.multiselect

import streamlit as st

st.header('st.multiselect')

options = st.multiselect(
     'What are your favorite colors',
     ['Green', 'Yellow', 'Red', 'Blue'],
     ['Yellow', 'Red'])

st.write('You selected:', options)

12 勾选组件 st.checkbox

import streamlit as st

st.header('st.checkbox')

st.write ('What would you like to order?')
icecream = st.checkbox('Ice cream')
coffee = st.checkbox('Coffee')
cola = st.checkbox('Cola')

if icecream:
     st.write("Great! Here's some more")
if coffee:
     st.write("Okay, here's some coffee")
if cola:
     st.write("Here you go")

13 配置云端开发环境

使用 GitPod 配置云端开发环境

其他云端开发环境,如:GitHub CodespacesReplitCloud9

14 Streamlit 组件

Streamlit 组件 是第三方的 Python 模块,对 Streamlit 进行拓展

精选 Streamlit 组件常见Streamlit 组件列表

15 数学公式 st.latex

import streamlit as st

st.header('st.latex')

st.latex(r'''
     a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
     \sum_{k=0}^{n-1} ar^k =
     a \left(\frac{1-r^{n}}{1-r}\right)
     ''')

更多Latex语法:LaTex快速入门

16 主题自定义

  • 通过调整 config.toml 中的选项来自定义应用的主题
  • 配置文件应当被放在与应用并行的 .streamlit 文件夹内
  • HTML 色彩码 是一个能够帮助选择目标颜色的工具

17 存储私密信息 st.secrets

import streamlit as st

st.title('st.secrets')
st.write(st.secrets['message'])

18 上传文件 st.file_uploader

  • 默认情况下,上传的文件大小不能超过 200MB
  • 可以通过 server.maxUploadSize 选项对其进行配置
import streamlit as st
import pandas as pd

st.title('st.file_uploader')

st.subheader('Input CSV')
uploaded_file = st.file_uploader("Choose a file")

if uploaded_file is not None:
  df = pd.read_csv(uploaded_file)
  st.subheader('DataFrame')
  st.write(df)
  st.subheader('Descriptive Statistics')
  st.write(df.describe())
else:
  st.info('Upload a CSV file')

19 应用布局

  • st.set_page_config(layout="wide") - 将应用的内容以宽屏模式呈现(默认情况下是固定宽度的)
  • st.sidebar - 将组件/文字/图片显示在侧边栏中
  • st.expander - 将组件/文字/图片显示在一个可折叠的容器中
  • st.columns - 创建表格布局(或列布局)来容纳内容

应用示例

20 视频推荐(略)

21 进度条组件 st.progress

st.progress 显示一个随着循环进度更新的进度条。

import streamlit as st
import time

st.title('st.progress')

with st.expander('About this app'):
     st.write('You can now display the progress of your calculations in a Streamlit app with the `st.progress` command.')

my_bar = st.progress(0)

for percent_complete in range(100):
     time.sleep(0.05)
     my_bar.progress(percent_complete + 1)

st.balloons()

22 表单组件 st.form

st.form 创建一个将内容组合起来的表单,并且带有一个 "Submit" 提交按钮。

表单的局限性:

  • 所有表单都应当包含一个 st.form_submit_button 对象
  • st.button 和 st.download_button 将无法在表单中使用
  • 表单能够出现侧边栏、列等地方,但不能嵌入另一个表单之中

应用示例

23 解析链接中的查询参数

st.experimental_get_query_params 允许获取用户当前链接中的查询参数

应用示例

24 性能优化 st.cache

st.cache 提供了一个缓存机制,使应用在加载数据或进行大开销的计算时仍可以保持高性能

用 @st.cache 装饰器标记函数时,它将告诉 Streamlit 在该函数执行前需要做如下一些检查:

  1. 函数的输入参数是否发生了变化
  2. 函数中使用的外部变量是否发生了变化
  3. 函数的主体是否发生了变化
  4. 函数中用到的所有函数的主体是否发生了变化

局限性:

  • Streamlit 只会检查当前工作目录中的更改
  • 当函数依赖外部数据时,使用缓存是不明智的
  • Lastly, you should avoid mutating the output of a function cached with st.cache_data since cached values are stored by reference.(没太懂,避免随意改动已缓存函数的输出?)

25 会话状态 st.session_state

会话状态(Session State)

  • 是一个在同一会话的不同次重新运行间共享变量的方法
  • 能够存储和保留状态,Streamlit 还支持使用回调函数更改状态

26 在 Streamlit 应用内使用 API

直接使用request模块解析API,把结果传给Streamlit 组件就行

应用示例

27 可拖拽放缩的仪表盘

Streamlit Elements 是一个由 okld 制作的第三方组件,够让你用 Material UI 组件、Monaco 编辑器(Visual Studio Code)和 Nivo charts 等等搭建出精美的应用和仪表盘。

应用示例

需要额外安装streamlit-elements==0.1.*

进阶参考: Streamlit Elements 的深度用法指南

28 SHAP显示 streamlit-shap

<code>streamlit-shap</code> 是一个提供了在 Streamlit 中显示 SHAP 图表的功能的 Streamlit 组件。

这个库由Streamlit团队内的成员 Snehan Kekre 所开发,他也负责维护 Streamlit 文档 网页

应用示例(打开后发现报错了)

需要额外安装streamlit-shap

29 搭建零样本学习文本分类器

使用 Hugging Face 和 Streamlit 开发一个零样本学习的文本分类器的流程

阅读完整博客

30 创建 Streamlit 应用实战

搭建一个 yt-img-app,它将是一个能够从 YouTube 视频提取缩略图的 Streamlit 应用

具体步骤:

  1. 接收用户输入的 YouTube 链接
  2. 对链接进行文本处理,提取出 YouTube 视频独特的标识 ID
  3. 将 ID 作为一个函数的输入,获取然后显示 YouTube 视频的缩略图

应用示例

恭喜你完成了Streamlit 的基础教程~

往年同期文章