streamlit的简单使用

帮助我这样没啥前端知识的人快速搭建一个交互界面的python库，使用起来非常容易。最近用它对openai提供的大部分接口实现了界面交互，已部署在这儿，也已开源在github。

1 简介

Streamlit是一个用于构建数据科学和机器学习应用程序的开源Python库。它提供了一个简单的界面，使用户能够快速创建交互式应用程序，而无需编写大量的代码。Streamlit可以轻松地将数据可视化、模型训练和结果展示等功能集成到一个应用程序中。它还支持实时更新，可以在应用程序运行时动态地修改和查看结果。Streamlit的目标是使数据科学家和机器学习工程师能够更加高效地开发和共享应用程序。

2 安装

pip install streamlit

可以运行示例

streamlit hello

Welcome to Streamlit. Check out our demo in your browser.

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

Ready to create your own Python apps super quickly?
Head over to https://docs.streamlit.io

May you create awesome apps!

浏览器会自动打开这个示例web页面

如果指定端口运行

streamlit run home.py --server.port 1234

3 编写界面

3.1 基本组件

输入框

base_url = st.text_input('Base URL', 'https://api.openai.com/v1', key='base_url')
api_key = st.text_input('API Key',"", type='password', key='api_key')

按钮

if st.button('Run'):
    st.write('Running...')

复选框

点击复选框则执行if中的语句，例如显示文本，取消勾选则隐藏文本

import streamlit as st
if st.checkbox('Show age'):
    st.write("age is :",st.session_state.age)

或者直接获取状态

stream = st.checkbox('Stream', True, key='stream')

单选

chosen = st.radio(
        '你的年龄',
        ("11", "22", "33", "44"))
st.write(f"age is {chosen} ")

滑块

移动滑块文本显示随之改变

import streamlit as st
x = st.slider('年龄', min_value=0,max_value=100, value=25, step=1, key="age")
st.write("age is :",x)
# 当设置了key后可以使用st.session_state.age在其他位置访问该值
st.write("age is :",st.session_state.age)

选择范围

add_slider = st.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0)
)

下拉选择框

import streamlit as st
import pandas as pd
df = pd.DataFrame({
    'first column': [25, 26, 27, 28],
})

option = st.selectbox(
    '你的年龄是?',
     df['first column'])
st.write("age is :",option)

折线图

import streamlit as st
import pandas as pd
data = {
    "接口A速度": [100,150,200,250],
    "接口B速度": [200, 100, 200, 100],
    "接口C速度": [100, 90, 120, 100]
}
chart_data = pd.DataFrame(data)
st.line_chart(chart_data)

静态表格

import streamlit as st
import pandas as pd
data = {
    "接口A速度": [100,150,200,250],
    "接口B速度": [200, 100, 200, 100],
    "接口C速度": [100, 90, 120, 100]
}
pd_data = pd.DataFrame(data)
st.table(pd_data)

进度条

import streamlit as st
import time

latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
  latest_iteration.text(f'Iteration {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)

文件上传

# 在侧边栏添加一个文件上传器
uploaded_file = st.sidebar.file_uploader("上传配置文件", type="yaml")
# 如果文件上传成功，则调用import_config_file函数
if uploaded_file is not None:
    import_config_file(uploaded_file)

3.2 布局

侧边栏

使用st.sidebar可以将组件放在左侧栏

add_selectbox = st.sidebar.selectbox(
    '你的名字是?',
    ('张三', '李四', '王五')
)
st.sidebar.write('你的名字是:', add_selectbox)

并排放置组件

import streamlit as st

left_column, right_column = st.columns(2)

left_column.write('左边')
right_column.write('右边')

3.3 缓存

能够对函数进行修饰，使其在传入相同参数时，不在进行重复运算，而是直接返回缓存结果。

例如：

@st.cache_data
def long_running_function(param1, param2):
    return …

当首次运行时，会缓存返回结果，当再次调用该函数时，会检查输入参数和函数内的代码，如果均相同则直接返回缓存结果，跳过了函数的执行。cache_data修饰符用于缓存计算结果，而cache_resource修饰符用于缓存资源。

3.4 多页面

不需要敲代码，直接在主页面的同级目录下创建文件夹pages,然后在里面创建多个.py文件，每个文件就是一个页面，文件名就是页面名，在左侧边栏会自动显示出来，点击即可跳转到对应页面。

例如我的目录：

│   test1.py
│
└───pages
        new.py

会话变量session_state

初始化

# Initialization
if 'key' not in st.session_state:
    st.session_state['key'] = 'value'

# Session State also supports attribute based syntax
if 'key' not in st.session_state:
    st.session_state.key = 'value'

读取

st.write(st.session_state.key)

赋值更新

st.session_state.key = 'value2'     # Attribute API
st.session_state['key'] = 'value2'  # Dictionary like API

删除

# Delete a single key-value pair
del st.session_state[key]

# Delete all the items in Session state
for key in st.session_state.keys():
    del st.session_state[key]

在组件中填写了key参数则会自动添加

st.text_input("Your name", key="name")

页面跳转

需要版本1.30.0或以上

目录：

your-repository/
├── pages/
│   ├── page_1.py.py
│   └── page_2.py.py
└── your_app.py

代码：

import streamlit as st

if st.button("Home"):
    st.switch_page("your_app.py")
if st.button("Page 1"):
    st.switch_page("pages/page_1.py")
if st.button("Page 2"):
    st.switch_page("pages/page_2.py")