1. 引言

Streamlit是一个用于机器学习、数据可视化的 Python 框架，它能几行代码就构建出一个精美的在线 app 应用。Streamlit 会监视每次保存和更新的更改，并在编码时可视化您的输出。代码从上到下运行，始终从干净状态开始，不需要回调。这是一个简单而强大的应用程序模型，可让您以惊人的速度构建丰富的 UI。

数据分析与机器学习过程中经常遇到过一个需求场景——自己实现了一个算法功能，然后希望团队内的其他成员（都在一个内网中）可以无门槛地直接使用你的算法功能，从而加速整个团队的工作效率。很显然，Web 应用是实现这个需求的一个很好的途径。但是想要实现一个低代码、美观程度尚可、拥有缓存机制的前端应用往往都需要不少的时间。如何在较短时间（5-10分钟内）快速实现一个满足上述要求的 Web 应用呢？

Python 中的 streamlit 和 gradio 给出了答案。这两个框架就是为了给没有前端经验的深度学习算法工程师一个好用的框架工具，能够在极短时间内根据自己的算法快速构建一个 Web 应用。

streamlit 和 gradio 的使用和运行逻辑不太一致。个人更加喜欢 streamlit 的编写方式，更加直观。所以这篇文章只介绍 streamlit 的使用方式，希望使用 gradio 的朋友可以直接移步他们的官方：

• gradio 官网
• streamlit 官网

streamlit UI控件使用大全（快速查询表）

2. 环境准备与快速上手

2.1环境准备

在正式开始前，需要先安装一下streamlit。
为了有一个干净的环境，可以创建一个python虚拟环境来安装。具体代码类似如下：

conda create -n streamlit python=3.11.8
conda activate streamlit
pip install streamlit

(streamlit) C:\streamlit>pip list
Package                   Version
------------------------- -----------
altair                    5.3.0
attrs                     23.2.0
blinker                   1.8.2
cachetools                5.3.3
certifi                   2024.7.4
charset-normalizer        3.3.2
click                     8.1.7
colorama                  0.4.6
fqdn                      1.5.1
gitdb                     4.0.11
GitPython                 3.1.43
idna                      3.7
isoduration               20.11.0
Jinja2                    3.1.4
jsonschema                4.23.0
jsonschema-specifications 2023.12.1
markdown-it-py            3.0.0
MarkupSafe                2.1.5
mdurl                     0.1.2
numpy                     2.0.0
packaging                 24.1
pandas                    2.2.2
pillow                    10.4.0
pip                       24.0
protobuf                  5.27.2
pyarrow                   16.1.0
pydeck                    0.9.1
Pygments                  2.18.0
python-dateutil           2.9.0.post0
pytz                      2024.1
referencing               0.35.1
requests                  2.32.3
rich                      13.7.1
rpds-py                   0.19.0
setuptools                69.5.1
six                       1.16.0
smmap                     5.0.1
streamlit                 1.36.0
tenacity                  8.5.0
toml                      0.10.2
toolz                     0.12.1
tornado                   6.4.1
typing_extensions         4.12.2
tzdata                    2024.1
uri-template              1.3.0
urllib3                   2.2.2
watchdog                  4.0.1
webcolors                 1.13
wheel                     0.43.0

可以看到，除了streamlit包本身外，还安装了大量第三方常用包，如 numpy、pandas、markdown等相关包。

2.2 快速上手

先创建一个简单的app.py：

import streamlit as st 

# 设置全局属性
st.set_page_config(
    page_title='页面标题',
    page_icon='☆☆☆',
    layout='wide'
)
# 正文
st.title('hello world')
st.markdown('> Streamlit 支持通过 st.markdown 直接渲染 markdown')

打开命令行，运行：

$ streamlit run app.py

在虚拟环境的终端上运行上面的代码，类似如下：

(streamlit) PS F:\streamlit> streamlit run app.py
  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.2.23.231:8501

这个命令会自动打开浏览器的一个标签页，该服务默认以8501为端口。

如果8501被占用， streamlit会往后遍历，直到找到可用端口为止。开启的服务默认可以在内网上所有的计算机上访问。
如下，已经将图中的各项说明和代码的对应标注好了：

样例图.png

3. Streamist 运行逻辑

当运行streamlit run app.py时，主程序并不是app.py，而是 streamlit 启动脚本，它负责读取app.py，然后根据其中的内容渲染出页面（HTML）和对应的逻辑（JavaScript），一个简化的模型如下：

逻辑结构图

每当运行 app.py 时，streamlit都会逐行执行app.py中的代码，遇到了streamlit的方法时，streamlit就会将这句话翻译成前端的 HTML + JavaScript 去渲染页面；如果是正常的 python 语句，那么就交给 python 解释器去执行。所以我非常喜欢streamlit的逻辑，因为可以完全按照正常的逻辑去编写可以渲染出前端页面的应用。

需要注意的是，每当网页上发生事件响应，比如有人点击了按钮，上传了文件，修改了单选框的选项等等，streamlit就会去重新执行app.py。在这里app.py显然是以一个静态资源的形式存在的，因此你可以随意修改，毕竟每次触发事件streamlit都会重新运行app.py。因此，从设计上，streamlit就是热更新，这一点与gradio很不一样。

4. Streamlit布局

4.1 columns--列容器

以并列方式插入容器。插入若干并排排列的多元素容器，并返回一个容器对象列表。
要在返回的容器中添加元素，可以使用 with 符号（首选）或直接调用返回对象的方法。请参见下面的示例。
列只能放置在其他列的内部，最多只能嵌套一级。

可以使用 with 符号向列中插入任何元素：

import streamlit as st 
//设定3列
col1, col2, col3 = st.columns(3) 
//设定不同的列标题和展示的内容
with col1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg") 
with col2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg") 
with col3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg")

可以在创建column的同时指定列宽比例，也可以直接调用返回对象的方法而不是使用with：

import streamlit as st
import numpy as np

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)

文末有源码，需要源码文件可以留言发邮箱

通过多次使用同规格的cokumns对象，制作网格：

import streamlit as st
#设置行列
row1 = st.columns(3)
row2 = st.columns(3)
#遍历行列，并设置每一个容器的高度信息，宽度信息没有设定
for col in row1 + row2:
    tile = col.container(height=120)
#插入一个表情
    tile.title(":balloon:")

image.png

4.2 container --多元素容器

container ：多元素容器。在应用程序中插入一个不可见的容器，用于容纳多个元素。例如，这样您就可以在应用程序中不按顺序插入多个元素。

要向返回的容器中添加元素，可以使用 with 符号（首选），或者直接调用返回对象的方法。请看下面的示例。

#导入app包
import streamlit as st
import numpy as np
#对容器进行设定，这个就是用with，
with st.container():
   st.write("This is inside the container")

   # 可用于接受 "类文件 "对象的任何地方：
   st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")

用Chrome浏览器打开

也可以不按顺序插入对象，这时就需要使用命令容器，在需要的任何地方，将指定的容器中插入相应对象。

# 导入app包
import streamlit as st
import numpy as np

# 对容器进行设定，这个就是用with，
c1=st.container()

with c1:
    st.write("This is inside the container")

    # 可用于接受 "类文件 "对象的任何地方：
    st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")
c1.write("This is inside the container the second time!")

用Chrome浏览器打开

这里会遇到报错，如下图：

image.png

这个错误是由于浏览器兼容性问题，如果你用的是chrome，那不会报错，如果像我一样用的搜狗浏览器就会报错。

在设置了容器的高度后，如果是长内容，则显示为带滚动条的容器：

# 选择一个文本信息，用于装入下面的容器
long_text = "Lorem ipsum. " * 1000

# 这里我们设定一个高度为300的容器
with st.container(height=300):
    st.markdown(long_text)

长内容是滚动条形式

4.3 【dialog】---模式对话框容器

st.dialog用于创建模式对话框的函数装饰器。

使用 @st.dialog 装饰的函数将成为对话框函数。调用对话框函数时，Streamlit 会在应用程序中插入一个模式对话框。在对话框函数中调用的 Streamlit 元素命令会在模式对话框中呈现。对话框函数在调用时可以接受参数。需要从更广泛的应用程序中访问的对话框中的任何值通常都应存储在会话状态中。

用户可以通过点击模式对话框外侧、点击右上角的 "X "或按键盘上的 "ESC "键来解除模式对话框。解除模式对话框不会触发应用程序的重新运行。要以编程方式关闭模态对话框，请在对话框函数中明确调用 st.rerun()。

st.dialog 继承了 st.experimental_fragment 的行为。当用户与对话框函数内创建的输入部件交互时，Streamlit 只重新运行对话框函数，而不是整个脚本。

要注意的是，不支持在对话框函数中调用 st.sidebar。

对话框代码可以与会话状态、导入模块以及在对话框外创建的其他 Streamlit 元素交互。请注意，这些交互会在多个对话框重新运行时叠加。您需要负责处理该行为的任何副作用。

下面的示例演示了 @st.dialog 的基本用法。在此应用程序中，点击 "A "或 "B "将打开一个模式对话框，提示您输入投票原因。在模式对话框中，点击 "提交 "将您的投票记录到会话状态并重新运行应用程序。这将关闭模式对话框，因为在重新运行全脚本时不会调用对话框功能。

import streamlit as st
 
#先设定一个标题
#@st.experimental_dialog("Cast your vote")
#Please replace st.experimental_dialog with st.dialog.
#st.experimental_dialog will be removed after 2025-01-01.
@st.dialog("Cast your vote") 
#定义一个投票系统
def vote(item):
#写入问题，
    st.write(f"Why is {item} your favorite?")
    reason = st.text_input("Because...")
#这里如果点击发送就会展示
    if st.button("Submit"):
        st.session_state.vote = {"item": item, "reason": reason}
        st.rerun()
#这里定义初始界面，进行分析
if "vote" not in st.session_state:
    st.write("Vote for your favorite")
    if st.button("A"):
        vote("A")
    if st.button("B"):
        vote("B")
#这里我们将结果输入出你选的内容，并通过输入的的原因展示出来
else:
    f"You voted for {st.session_state.vote['item']} because {st.session_state.vote['reason']}"

选择A或B之后

结果

4.4 empty--单元素容器

【empty】在应用程序中插入一个容器，用于容纳单个元素。这样，您就可以在任意位置移除元素，或同时替换多个元素（使用子多元素容器）。
要在返回的容器中插入/替换/清除元素，可以使用符号或直接调用返回对象的方法。请看下面的示例。

使用符号就地重写元素：

import streamlit as st
import time
 
with st.empty():
    for seconds in range(60):
        st.write(f"⏳ {seconds} seconds have passed")
        time.sleep(1)
    st.write("✔️ 1 minute over!")

容器中元素的替换与清除：

import streamlit as st
import time
placeholder = st.empty() 
# 用一些文本替换占位符：
placeholder.text("Hello")
time.sleep(1)
# 用图表替换文本：(这句好像有点问题，用chrome不报错。是浏览器兼容问题）
placeholder.line_chart({"data": [1, 5, 2, 6]}) 
# 用几个元素替换图表：
with placeholder.container():
    st.write("This is one element")
    st.write("This is another")
    time.sleep(1)
    time.sleep(1)
 
# 清除所有这些元素：
placeholder.empty()

image.png

4.5 expander--可展开/折叠的多元素容器

在应用程序中插入一个可容纳多个元素的容器，用户可以展开或折叠该容器。折叠时，可见的只是提供的标签。

要向返回的容器中添加元素，可以使用 with 符号（首选）或直接调用返回对象的方法。请看下面的示例。

import streamlit as st
#插入一个图表
st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
 
#设定一个扩张器在图表中
with st.expander("See explanation"):
    st.write('''
        The chart above shows some numbers I picked for you.
        I rolled actual dice for these, so they're *guaranteed* to
        be random.
    ''')
    st.image("https://static.streamlit.io/examples/dice.jpg")

image.png

或者，你也可以直接调用返回对象的方法：这种方法比较好，因为不需要担心对齐的问题，可以直接对expender进行写入。下面代码通过命名对象操作，实现同样的效果。

import streamlit as st
 
st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
 
expander = st.expander("See explanation")
expander.write('''
    The chart above shows some numbers I picked for you.
    I rolled actual dice for these, so they're *guaranteed* to
    be random.
''')
expander.image("https://static.streamlit.io/examples/dice.jpg")

可以获得同样的效果

4.6 popover--弹出式容器

popover插入一个多元素容器作为弹出窗口。它由一个类似按钮的元素和一个在点击按钮时打开的容器组成。

打开和关闭弹出窗口不会触发重新运行。与打开的弹出窗口内的部件进行交互将重新运行应用程序，同时保持弹出窗口打开。点击弹出窗口外的部件将关闭弹出窗口。

要在返回的容器中添加元素，可以使用 "with "符号（首选），或者直接调用返回对象的方法。请参阅下面的示例。

import streamlit as st 
#用with 进行写入
with st.popover("Open popover"):
    st.markdown("Hello World  ")
    name = st.text_input("What's your name?")
 
#不在内部写入
st.write("Your name:", name)

输入信息

显示结果

也可以直接调用返回对象的方法：

import streamlit as st
 
popover = st.popover("Filter items")
red = popover.checkbox("Show red items.", True)
blue = popover.checkbox("Show blue items.", True)
 
if red:
    st.write(":red[This is a red item.]")
if blue:
    st.write(":blue[This is a blue item.]")

这里的:red["****"]、:blue["****"]，可以控制文本的颜色

4.7 sidebar--侧边栏

不仅可以使用部件为应用程序添加交互性，还可以将它们组织到侧边栏中。可以使用对象符号和符号将元素传递给 st.sidebar。
以下两个代码段是等价的：

# Object notation
st.sidebar.[element_name]

# "with" notation
with st.sidebar:
    st.[element_name]

传递给 st.sidebar 的每个元素都会固定在左侧，让用户专注于应用程序中的内容。

提示
侧边栏可以调整大小！拖放侧边栏的右边界即可调整其大小！↔️

下面举例说明如何在侧边栏中添加选择框和单选按钮：

import streamlit as st 
# Using object notation
add_selectbox = st.sidebar.selectbox(
    "How would you like to be contacted?",
    ("Email", "Home phone", "Mobile phone")
) 
# Using "with" notation
with st.sidebar:
    add_radio = st.radio(
        "Choose a shipping method",
        ("Standard (5-15 days)", "Express (2-5 days)")
    )

image.png

重要
不支持使用对象符号的元素只有 st.echo、st.spinner 和 st.toast。要使用这些元素，必须使用对象符号。

下面举例说明如何在侧边栏中添加 st.echo 和 st.spinner：

import streamlit as st
 
with st.sidebar:
    with st.echo():
        st.write("This code will be printed to the sidebar.")
 
    with st.spinner("Loading..."):
        time.sleep(5)
    st.success("Done!")

4.8 tabs--多页标签容器

tabs 以标签形式插入多个多元素容器。标签是一种导航元素，可让用户在相关内容组之间轻松移动。

要在返回的容器中添加元素，可以使用 with 符号（首选），或者直接调用返回对象的方法。请看下面的示例。tabs为列表中的每个字符串创建一个选项卡。默认情况下选择第一个标签页。字符串用作标签页的名称，可选择包含 Markdown，支持以下元素：粗体、斜体、删除线、内联代码、表情符号和链接。

import streamlit as st 
#设定三个tab 这个相当于三个界面
tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"]) 
#三个tab的设定
with tab1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg", width=200) 
with tab2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg", width=200) 
with tab3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

点击标签可以切换

也可以直接调用返回对象的方法：这里设定一个表格和数据:

import streamlit as st
import numpy as np
 
#这里设定两个tabs并按照列表形式传入
tab1, tab2 = st.tabs(["  Chart", "  Data"])
 
#设定一个随机数列
data = np.random.randn(10, 1)
 
#设定第一个tab
tab1.subheader("A tab with a chart")
tab1.line_chart(data)
#设定第二个tab
tab2.subheader("A tab with the data")
tab2.write(data)

image.png

#源码
import pandas as pd
import streamlit as st
import plotly.express as px
from PIL import Image


# 设置网页名称
st.set_page_config(page_title='调查结果',
                    # page_icon='555'
                    page_icon='*'
                    # layout='wide'
                    )
# 设置网页标题
st.header('2020年调查问卷')
# 正文
st.title('这是一个测试文件')
# 设置网页子标题
st.subheader('2020年各部门对生产部的评分情况')

# 读取数据  excel路径、sheet_name
excel_file = '各部门对生产部的评分情况.xlsx'
sheet_name = 'DATA'

df = pd.read_excel(excel_file,
                   sheet_name=sheet_name,
                   usecols='B:D',
                   header=3)

# 此处为各部门参加问卷调查人数
df_participants = pd.read_excel(excel_file,
                                sheet_name=sheet_name,
                                usecols='F:G',
                                header=3)
df_participants.dropna(inplace=True)

# streamlit的多重选择(选项数据)
department = df['部门'].unique().tolist()
# streamlit的滑动条(年龄数据)
ages = df['年龄'].unique().tolist()

# 滑动条, 最大值、最小值、区间值
age_selection = st.slider('年龄:',
                          min_value=min(ages),
                          max_value=max(ages),
                          value=(min(ages), max(ages)))

# 多重选择, 默认全选
department_selection = st.multiselect('部门:',
                                      department,
                                      default=department)

# 根据选择过滤数据
mask = (df['年龄'].between(*age_selection)) & (df['部门'].isin(department_selection))
number_of_result = df[mask].shape[0]

# 根据筛选条件, 得到有效数据
st.markdown(f'*有效数据: {number_of_result}*')

# 根据选择分组数据
df_grouped = df[mask].groupby(by=['评分']).count()[['年龄']]
df_grouped = df_grouped.rename(columns={'年龄': '计数'})
df_grouped = df_grouped.reset_index()

# 绘制柱状图, 配置相关参数
bar_chart = px.bar(df_grouped,
                   x='评分',
                   y='计数',
                   text='计数',
                   color_discrete_sequence=['#F63366']*len(df_grouped),
                   template='plotly_white')
st.plotly_chart(bar_chart)

# 添加图片和交互式表格
col1, col2 = st.columns([2,4])
image = Image.open('survey.jpg')
col1.image(image,
           caption='Designed by 小F / 法纳斯特',
           use_column_width=True)
col2.dataframe(df[mask], width=300)

# 绘制饼图
pie_chart = px.pie(df_participants,
                   title='总的参加人数',
                   values='人数',
                   names='公司部门')
st.plotly_chart(pie_chart)

# 第一行
col1, col2 = st.columns(2)
with col1:
    st.button("按钮1")
with col2:
    st.button("按钮2")

5、其他常用的组件

5.1checkbox 创建一个复选框

在Streamlit中，checkbox方法用于创建一个复选框，用户可以通过勾选或取消勾选复选框来选择或取消选择某些选项。

checkbox方法接受一个标签参数label，用于描述复选框的功能。当用户点击复选框时，Streamlit会根据用户的选择返回一个布尔值。

以下是一个简单的示例：

import streamlit as st
 
if st.checkbox('Do you like Streamlit?'):
    st.write('Great! Streamlit is awesome!')
else:
    st.write('Streamlit could use some improvements.')

image.png

在这个例子中，复选框的标签为"Do you like Streamlit?“。当用户勾选复选框时，Streamlit会返回True，并显示"Great! Streamlit is awesome!”；当用户取消勾选复选框时，Streamlit会返回False，并显示"Streamlit could use some improvements."。

5.2code 显示代码

Streamlit中的code方法可以用于显示代码。它接受两个参数：body和language。body参数是要显示的代码，而language参数是代码所使用的开发语言。

此外，如果省略language参数，Streamlit将不会为代码提供语法高亮效果。

以下是一个使用Streamlit的code方法的示例：

import streamlit as st
 
code = '''def hello():
    print("Hello, Streamlit!")'''
st.code(code, language='python')

image.png

这段代码将显示一个Python语言的代码块，其中定义了一个名为"hello"的函数，该函数打印出"Hello, Streamlit!"。

除了显示代码块，Streamlit还提供了其他多种显示方法，如st.write方法、st.title方法、st.header方法、st.markdown方法等。这些方法可以根据需要添加到Streamlit应用中，以实现不同的显示效果。

5.3 color_picker 显示颜色选择器小部件

Streamlit中的color_picker方法可以用于显示颜色选择器小部件，允许用户从颜色选择器中选择颜色。

color_picker方法接受一个或多个参数，包括label、value、key、help、on_change、args和kwargs。其中，label参数是颜色选择器小部件的标签，value参数是默认选择的颜色，key参数是用于唯一标识这个颜色选择器小部件的字符串，help参数是对颜色选择器小部件的描述信息，on_change参数是一个回调函数，当用户选择新的颜色时将触发该函数。

以下是一个使用Streamlit的color_picker方法的示例：

import streamlit as st
 
color = st.color_picker('Pick a color', value='#000000')
st.write('You picked', color)

在这个例子中，用户可以通过点击"Pick a color"按钮从颜色选择器中选择颜色。当用户选择新的颜色后，页面将更新并显示"You picked [新选择的颜色]"。

5.4 container 创建一个容器

Streamlit中的container方法可以用于创建一个容器，该容器可用于容纳多个元素。

使用container方法可以创建一个不可见的容器，该容器可用于在应用程序中插入多个元素。这些元素可以是按钮、复选框、文本框等等。通过使用container方法，可以更好地组织应用程序的界面，并允许用户以更灵活的方式使用这些元素。

下面是一个使用container方法的示例：

import streamlit as st
 
with st.container():
    st.write("Hello")
    st.button("Click me!")
    st.checkbox("Check me!")

创建一个容器container

这个示例创建了一个容器，并在其中添加了一个文本框、一个按钮和一个复选框。通过使用container方法，可以将这些元素组织在一起，并以更有条理的方式呈现给用户。

5.5 data_editor 允许用户以交互方式编辑数据框

Streamlit中的data_editor函数允许用户以交互方式编辑数据框（data frame）。它提供了一个方便的界面，使用户能够查看和编辑数据框中的数据。

data_editor函数接受一个数据框对象作为参数，并在Streamlit应用程序中创建一个界面，使用户可以编辑该数据框。用户可以添加、删除或修改数据框中的行和列，以及查看每列的统计信息。

下面是一个使用data_editor函数的示例：

import streamlit as st
import pandas as pd
 
# 创建一个示例数据框
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Gender': ['F', 'M', 'M']
})
 
# 显示数据框编辑器
st.data_editor(df)

image.png

在这个示例中，我们首先创建了一个包含姓名、年龄和性别信息的示例数据框。然后，我们使用data_editor函数将该数据框显示在Streamlit应用程序中，并允许用户编辑它。用户可以通过界面添加、删除或修改数据框中的行和列，以及查看每列的统计信息。

需要注意的是，data_editor函数只适用于较小的数据框，因为它会将整个数据框加载到内存中。对于较大的数据框，可能需要使用其他方法来编辑数据。

5.6 dataframe 创建和操作数据框

Streamlit中的dataframe模块可以用于创建和操作数据框（data frame）。数据框是一种常见的数据结构，通常用于存储和组织表格数据。在Streamlit中，可以使用dataframe模块来创建、查询、过滤、变换和可视化数据框。

下面是一些使用Streamlit中dataframe模块的示例：

1. 创建数据框：

import pandas as pd
 
# 创建一个示例数据框
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Gender': ['F', 'M', 'M']
})
 
# 在Streamlit中显示数据框
st.dataframe(df)

2. 查询数据框中的数据：

# 查询数据框中特定列的数据
st.write(df['Name'])
 
# 查询数据框中特定行的数据
st.write(df.loc[0])

3. 过滤数据框中的数据：

# 过滤出性别为'M'的数据行
male_rows = df[df['Gender'] == 'M']
st.dataframe(male_rows)

4. 变换数据框中的数据：

# 将年龄列中的值增加10岁
df['Age'] = df['Age'] + 10
st.dataframe(df)

5. 可视化数据框中的数据：

# 使用柱状图显示性别分布情况
st.bar_chart(df['Gender'].value_counts())

5.7 date_input 显示一个日期输入框

Streamlit中的date_input方法可以显示一个日期输入框组件。

方法原型为：streamlit.date_input(label, value=None, key=None)

参数说明：

label：组件说明文本，即输入框旁边的文本。
value：组件当前值，可以是datetime.date或datetime.datetime类型。默认值为None，表示当前日期。
key：组件ID，用于在Streamlit应用程序中唯一标识该组件。默认值为None。
返回值：date_input方法返回组件的当前值，即用户输入的日期。

import streamlit as st
import datetime
# 显示日期输入框，默认值为今天的日期
today = st.date_input('Enter a date', value=None)
 
# 显示日期输入框，指定一个默认值
default_date = datetime.date(2023, 7, 1)
st.date_input('Enter a date', value=default_date)

image.png

5.8 divider 用于添加分隔线

在Streamlit中，st.divider函数用于添加分隔线，以帮助在应用程序中创建视觉分隔。这个函数的使用非常简单，只需要调用它即可添加一条分隔线。例如：

import streamlit as st
 
st.write('This is some content')
st.divider()
st.write('This is some other content')

image.png

5.9 download_button 创建一个下载按钮

Streamlit中的st.download_button函数可以创建一个下载按钮，用户点击该按钮后可以下载指定的文件内容。这个函数的使用方法如下：

st.download_button(label, data, file_name=None, mime=None, key=None, help=None, on_click=None, args=None, kwargs=None, *, disabled=False)

其中，参数说明如下：

label：按钮的标签文本。
data：要下载的文件内容，可以是一个字符串、二进制数据或者图像。
file_name：可选参数，指定下载时显示的文件名。
mime：可选参数，指定文件的MIME类型。如果指定了该参数，那么在下载按钮上会显示一个对应的文件类型图标。
key：可选参数，用于唯一标识该按钮。
help：可选参数，指定当用户将鼠标悬停在按钮上时显示的帮助文本。
on_click：可选参数，一个回调函数，当用户点击按钮时触发该函数。
args和kwargs：可选参数，用于传递给回调函数的参数。
disabled：可选参数，如果设置为True，则按钮将被禁用。

使用示例：

1. 下载字符串内容为文本文件：

text_contents = 'This is some text'
st.download_button('Download some text', text_contents)

2. 下载二进制数据为文件：

binary_contents = b'example content'
st.download_button('Download binary file', binary_contents)

3. 下载图像：

import base64
with open('image.png', 'rb') as f:
    image_data = f.read()
    image_b64 = base64.b64encode(image_data).decode()
st.download_button('Download image', image_b64)

在这个示例中，我们使用@st.experimental_singleton装饰器来将my_function函数转换为单例对象。这意味着在整个Streamlit应用程序中，只有一个my_function实例存在，并且可以在不同的用户之间共享。

需要注意的是，experimental_singleton装饰器是实验性的，可能会在未来的版本中有所改变。因此，在使用时需要谨慎，并注意检查更新和文档以获取最新的信息。

5.10 file_uploader 文件上传工具

Streamlit中的file_uploader组件是一个方便的文件上传工具，支持拖拽上传文件和文件管理器选择文件。
使用方法如下：

style_file = st.file_uploader("请上传风格化图片")
if style_file:
    stringio = style_file.getvalue()
    style_file_path = 'style_file/'+ style_file.name
    with open(style_file_path,'wb') as f:
        f.write(stringio)

image.png

使用文件上传组件上传文件之后，可以使用上面的代码将文件保存到特定路径等待使用。

5.11 form 用于收集用户输入的组件

Streamlit中的form是一种用于收集用户输入的组件。当用户填写表单并提交时，表单中的数据可以被批量发送到Streamlit。每个表单必须包含一个st.form_submit_button，而不能包含st.button或st.download_button。此外，表单可以出现在应用程序的任何位置（例如侧边栏、列等），但它们不能嵌入到其他表单中。

在创建表单时，可以使用st.form(key, clear_on_submit=False)函数。该函数接受一个关键字参数key，用于指定表单的唯一标识符。此外，还可以使用clear_on_submit参数指定在提交表单后是否清除表单数据。

在表单中添加元素时，可以使用st.form_element(label, element)函数。该函数接受两个参数：label用于指定元素的标签，element用于指定元素类型和参数。例如，要添加一个滑块组件，可以使用st.slider(label, min_value=None, max_value=None, value=None, step=None, format=None, key=None)函数。该函数接受一些参数，如最小值（min_value）、最大值（max_value）、当前值（value）、步长（step）等。

最后，为了提交表单，可以使用st.form_submit_button(label)函数。该函数接受一个参数label，用于指定提交按钮的标签。当用户点击提交按钮时，表单中的所有小部件值将被批量发送到Streamlit。

5.12 form_submit_button 用于提交表单的按钮

Streamlit中的form_submit_button是一个用于提交表单的按钮。当用户点击该按钮时，表单中的所有小部件（widget）值将被批量发送到Streamlit。每个表单都必须有一个form_submit_button，并且该按钮不能出现在表单之外。

form_submit_button函数可以接受一些可选参数，如label（用于指定提交按钮的标签）、help（用于指定帮助文本）、on_click（用于指定点击事件的处理函数）和args、kwargs（用于传递参数给处理函数）。

在表单中使用form_submit_button时，需要先创建一个表单，并添加需要的小部件。然后，在表单外使用form_submit_button来提交表单。当用户点击提交按钮时，Streamlit将自动收集表单中的所有小部件值，并将其发送到指定的处理函数中进行处理。

5.12 get_option 读取指定的配置项的值

Streamlit中的get_option函数用于读取指定的配置项的值。这个函数接受一个参数，即配置项的键（key），返回对应的配置项值。

例如，假设有一个配置项是"my_option"，对应的值是"value"，那么可以通过get_option函数来获取该配置项的值：

option_value = st.get_option("my_option")
print(option_value)  # 输出 "value"

可以使用st.set_option函数来设置配置项的值。例如，将"my_option"的配置项值设置为"new_value"：

st.set_option("my_option", "new_value")

这样，再次调用get_option函数时，将返回新的值：

option_value = st.get_option("my_option")
print(option_value)  # 输出 "new_value"

5.13 markdown 显示Markdown格式的内容

Streamlit中的markdown方法可以用于在Streamlit应用中显示Markdown格式的内容。这个方法接受一个字符串作为参数，该字符串包含Markdown格式的文本。

例如，假设我们想要在Streamlit应用中显示一个包含标题和段落的Markdown文档。可以使用markdown方法来实现这个目标，具体代码如下：

import streamlit as st
 
# 使用markdown方法显示Markdown文档
st.markdown(
    '''
    # 标题
    ## 子标题
    段落文本...
    '''
)

5.14 plotly_chart 显示Plotly图表

Streamlit中的plotly_chart方法可以用于显示Plotly图表。

plotly_chart方法接受一个或多个Plotly图表对象作为参数，并将其显示在Streamlit应用中。该方法支持多种类型的Plotly图表，包括折线图、散点图、柱状图、饼图等。

以下是一个使用plotly_chart方法的示例代码：

import streamlit as st
import plotly.express as px
 
# 创建示例数据
data = px.data.iris()
 
# 使用plotly_chart方法显示折线图
st.plotly_chart(px.line(data, x="sepal_width", y="sepal_length", color="species"))

在这个示例中，我们使用Plotly Express模块创建了一个示例数据集，并使用plotly_chart方法显示了一个折线图。该折线图根据“sepal_width”和“sepal_length”列的数据绘制了不同品种鸢尾花的生长趋势。

需要注意的是，要使用plotly_chart方法，需要在Streamlit应用中导入Plotly库，并将其与Streamlit库一起使用。此外，还需要根据具体的Plotly图表类型和数据格式调用相应的Plotly函数来创建图表对象。

5.15 progress 显示进度条

Streamlit中的progress方法可以用于显示进度条。该方法可以根据完成进度来更新进度条的状态。

progress方法接受一个数值参数，范围为[0,100]，表示完成的百分比。通过调用progress方法并传入相应的百分比值，可以更新进度条的状态。

以下是一个使用progress方法的示例代码：

import streamlit as st
import time
# 创建进度条
progress_bar = st.progress(0)
 
# 模拟一个耗时任务
for i in range(100):
    time.sleep(0.1)  # 模拟耗时任务
    progress_bar.progress(i + 1)  # 更新进度条状态

在这个示例中，我们首先创建了一个进度条对象progress_bar，初始进度为0。然后，我们模拟了一个耗时任务，通过循环100次，每次更新进度条的状态。在每次循环中，我们使用progress方法更新进度条的状态，传入当前完成的百分比值。

需要注意的是，进度条的状态只会在Streamlit应用中显示，并且每次更新进度条的状态都会导致页面刷新。因此，在更新进度条时需要注意性能和用户体验。

5.16 pydeck_chart 显示PyDeck图表

Streamlit中的pydeck_chart方法可以用于显示PyDeck图表。PyDeck是一个基于JavaScript的数据可视化库，支持多种地图和图表类型，并支持交互和放大缩小等操作。

pydeck_chart方法接受一个PyDeck图表对象作为参数，并将其显示在Streamlit应用中。该方法支持多种类型的PyDeck图表，包括散点图、柱状图、热力图等。

以下是一个使用pydeck_chart方法的示例代码：

#这个示例有问题，未找到，参考下个示例
import streamlit as st
import pydeck as pdk
 
# 创建PyDeck图表对象
view = pdk.View(pdk.ScatterplotLayer, deck_options=pdk.DeckOptions(initial_view_state=pdk.ViewState(latitude=37.769999612954, longitude=-122.446293375463, zoom=10)))
 
# 使用pydeck_chart方法显示图表
st.pydeck_chart(view)

import streamlit as st
import pydeck as pdk
import pandas as pd
import numpy as np
 
# # 创建PyDeck图表对象
# view = pdk.View(pdk.ScatterplotLayer, deck_options=pdk.DeckOptions(initial_view_state=pdk.ViewState(latitude=37.769999612954, longitude=-122.446293375463, zoom=10)))
 
# # 使用pydeck_chart方法显示图表
# st.pydeck_chart(view)

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.pydeck_chart(pdk.Deck(
     map_style='mapbox://styles/mapbox/light-v9',
     initial_view_state=pdk.ViewState(
         latitude=37.76,
         longitude=-122.4,
         zoom=11,
         pitch=50,
     ),
     layers=[
         pdk.Layer(
            'HexagonLayer',
            data=df,
            get_position='[lon, lat]',
            radius=200,
            elevation_scale=4,
            elevation_range=[0, 1000],
            pickable=True,
            extruded=True,
         ),
         pdk.Layer(
             'ScatterplotLayer',
             data=df,
             get_position='[lon, lat]',
             get_color='[200, 30, 0, 160]',
             get_radius=200,
         ),
     ],
 ))

在这个示例中，我们首先创建了一个PyDeck图表对象view，它使用了一个ScatterplotLayer来显示散点图。然后，我们使用pydeck_chart方法将该图表显示在Streamlit应用中。

需要注意的是，要使用pydeck_chart方法，需要在Streamlit应用中导入PyDeck库，并将其与Streamlit库一起使用。此外，还需要根据具体的PyDeck图表类型和数据格式调用相应的PyDeck函数来创建图表对象。

image.png

5.17 pyplot

Streamlit中的pyplot方法可以用于显示Matplotlib图表。Matplotlib是一个Python数据可视化库，支持多种类型的图表和绘图方式。

pyplot方法接受一个Matplotlib图表对象作为参数，并将其显示在Streamlit应用中。该方法支持多种类型的Matplotlib图表，包括折线图、散点图、柱状图、饼图等。

以下是一个使用pyplot方法的示例代码：

import streamlit as st
import matplotlib.pyplot as plt
 
# 创建Matplotlib图表对象
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [1, 4, 2, 3])
plt.show()
 
# 使用pyplot方法显示图表
st.pyplot(fig)

image.png

在这个示例中，我们首先使用Matplotlib创建了一个折线图对象fig，并通过plot方法绘制了一条简单的折线。然后，我们使用show方法将图表显示出来。最后，我们使用pyplot方法将该图表显示在Streamlit应用中。

需要注意的是，要使用pyplot方法，需要在Streamlit应用中导入Matplotlib库，并将其与Streamlit库一起使用。此外，还需要根据具体的Matplotlib图表类型和数据格式调用相应的Matplotlib函数来创建图表对象。

5.18 radio 单选按钮小部件

Streamlit中的radio方法可以用于显示单选按钮小部件。该方法接受一个label参数，用于向用户解释此单选按钮组的用途，以及一个options参数，用于定义可用的选项列表。

例如：

import streamlit as st
 
# 定义选项列表
options = ['旅行1', '游乐园2', '桌游3', '剧本杀4'] 
# 使用radio方法显示单选按钮小部件
selected_option = st.radio('Choose an option', options) 
# 显示选中的选项
st.write('You selected:', selected_option)

image.png

在这个例子中，我们定义了一个选项列表options，然后使用radio方法显示了一个单选按钮小部件。用户可以在该小部件中选择一个选项，然后通过点击“运行”按钮来确认选择。最后，我们使用write方法显示了用户选中的选项。

5.19 set_page_config

Streamlit中的set_page_config方法可以用于设置页面配置，例如页面标题、页面样式等。这个方法接受一个字典参数，可以在字典中指定多个配置项。

以下是一个使用set_page_config的示例：

import streamlit as st
 
# 设置页面配置
st.set_page_config(
    page_title='My Streamlit App',
    page_icon='logo.png',
    header_font_name='Arial',
    header_font_size=18,
    primary_color='blue',
    script_tag='<script>console.log("Hello, world!");</script>'
)

在这个示例中，我们使用set_page_config方法设置了页面标题、页面图标、头部字体名称、头部字体大小、主色调以及一个脚本标签。这些配置项可以根据需要进行调整和修改。

5.20 slider 显示滑块小部件

Streamlit是一种开源的Python库，它可以帮助开发者轻松地构建交互式Web应用。在Streamlit应用中，你可以使用slider组件来创建一个滑块，用户可以通过移动滑块来选择一个值。

下面是一个简单的例子，演示如何在Streamlit应用中创建一个滑块：

import streamlit as st
 
# 设置滑块的标签和范围
st.write("你可以选择一个值：")
 
# 创建一个滑块，初始值为5，范围在1到10之间
slider_value = st.slider('选择一个值', min_value=1, max_value=10, value=5)
 
# 显示用户选择的滑块值
st.write(f"你选择的值为：{slider_value}")

image.png

在这个例子中，我们首先导入了streamlit库。然后，我们使用st.write函数来显示一段文本和一个滑块。st.slider函数接受几个参数：滑块的标签、最小值、最大值和初始值。当用户移动滑块并选择一个值时，这个值将作为滑块的值返回，我们可以使用这个值来更新应用的状态或执行其他操作。最后，我们使用st.write函数来显示用户选择的滑块值。

5.21snow 绘制庆祝降雪

一个下雪的动画

st.snow()

image.png

5.22 spinner 在执行代码块时临时显示一条消息

Streamlit中的spinner是一种在执行代码块时显示状态信息的功能。它可以帮助用户了解程序正在处理任务，而不是无响应或卡住。

要使用spinner，您可以在代码块之前使用st.spinner函数来创建一个spinner对象，然后在代码块结束之前调用spinner.stop()方法来停止spinner。

下面是一个使用Streamlit spinner的示例代码：

import streamlit as st
import time 
# # 创建spinner对象
# spinner = st.spinner('正在处理中............') 
# # 执行代码块
# time.sleep(5)
with st.spinner('Wait for it...'):
    time.sleep(5)
 
# 停止spinner
# spinner.stop()
 
# 显示成功消息
st.success('处理完成！')

参考文章：

1. Streamlit官网 • A faster way to build and share data apps
2. Python 应用开发：Streamlit 布局篇（容器布局）-CSDN博客
3. 简洁而优雅地展示你的算法和数据——streamlit教程（一） 原理介绍与布局控制 - 知乎 (zhihu.com)
4. streamlit UI控件使用大全
5. Python Streamlit st.pydeck_chart用法及代码示例