python streamlit 介绍

基础介绍

streamlit 是什么

Streamlit是一个面向机器学习和数据科学团队的开源应用程序框架。通过它可以用python代码编写前端页面，方便快捷的构建交互式应用程序。

streamlit 优缺点

streamlit优点：

• 不必需要web方面知识也可以开发出可用的前端页面
• 内置很多机器学习交互的组件，更有利于算法工程师使用
• 开发速度快，修改方便

streamlit缺点：

• 前端界面固定，开发者不能随意调整控件位置
• 只适合于少量页面的项目，不适用于常规网站前端

streamlit 简单示例

import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

st.title('Sin')

# Get user input for frequency and amplitude
freq = st.slider('频率', min_value=1, max_value=10, value=1)

# Create x values
x = np.linspace(0, 2*np.pi, 1000)

# Create y values
y = np.sin(freq * x)

# Plot the graph
fig, ax = plt.subplots()
ax.plot(x, y)
ax.set_title('Sine Wave')
ax.set_xlabel('X')
ax.set_ylabel('Y')
st.pyplot(fig)

运行代码

streanlit run sample_demo.py

组件集合

streamlit 主要用于构建前端页面，有着丰富的前端组件。 streamlit 官方文档：https://docs.streamlit.io/library/get-started/main-concepts

从官方文档来看，主要的组件包括：

1. 文本
2. 数据表格
3. 图表
4. 输入组件
5. 媒体
6. 布局和容器
7. 聊天框
8. 状态
9. 控制流程

下面将常见的组件拿出来，做一个集合。stremlit的一个页面叫做一个app，可以将多个页面组装起来，如下图：

主页面

图表

文字

数据表格

输入组件

聊天

回复框

代码：

stream_blog.zip

组件工作原理

使用streamlit构建的页面和html构建的页面在工作方式上有很大的不同，streamlit有自己的一套工作机制，具体来说有如下：

1. streamlit 根据组件在代码的位置，从上至下渲染组件
2. 点击或触发某一个控件之后，代码会从上至下执行一遍

js和html 渲染

上文中已经提到streamlit的组件排列方式是从上到下逐个渲染，无法做到html那样灵活的调整组件的位置。但是stream还是提供了两个函数可以支持对页面css和js的修改。

对css的修改

streamlit中按钮是没有背景颜色的，如果想增加按钮的底色，就可以对其css修改。如下：

import streamlit as st

st.button("点击我")

hide_streamlit_style = """
       <style>
       .ef3psqc11 {background-color: yellowgreen}
       </style>
       """
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

通过类名找到对应的按钮，然后准备好css代码，最后使用st.markdown函数将css渲染到页面上。

除此之外还有一个实用的操作就是隐藏原生页面的按钮。streamlit页面右上角自带一个按钮，在私有项目交付时可能需要移除该组件。

这时就可以通过css 隐藏属性来完成。根据按钮的id找到按钮，隐藏该组件。

hide_streamlit_style = """
        <style>
        #MainMenu {visibility: hidden;}
        footer {visibility: hidden;}
        </style>
        """
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

插入js

除了可以插入css之后，streamlit也支持插入js代码，这个功能就赋予streamlit操作html页面的能力。上面修改按钮颜色的需求通过js也能实现。首先通过js找到按钮，然后对元素的属性赋值。

import streamlit as st
import streamlit.components.v1 as components

st.button("点击我")

# hide_streamlit_style = """
#        <style>
#        .ef3psqc11 {background-color: yellowgreen}
#        </style>
#        """
# st.markdown(hide_streamlit_style, unsafe_allow_html=True)



js_btn = '''window.parent.document.getElementsByClassName("ef3psqc11")[0].style.backgroundColor = "bisque"'''
components.html(f'''<script>{js_btn}</script>''', width=0, height=0)

修改js使用的是import streamlit.components.v1 as components，和普通js不同的是需要在js前面加上window.parent，否则不能生效。

除了支持原生js之后，也支持jquery库。

会话机制

在前文中提到streamlit中触发一个按钮会重新执行整个文件，相当于整个代码重新执行一遍，这样带来的一个副作用就是前后两次操作不能互相传递数据。比如下图中想要实现点击确定按钮，将输入的内容展示在最上面。

这个简单的需求反而不好实现，因为点击确定按钮之后，整个程序重新执行，输入的用户名和密码已经是上一次页面的数据，无法传递到下一次页面渲染中。这时就需要会话机制来解决这个问题了。

首先解释一下streamlit中的会话。在streamlit中一个tab页表示一个会话，新开tab页或者刷新页面都代表会话失效。会话机制提供了一种能力：在会话中存在一个全局字典，支持插入、更新、删除数据。会话机制可以有效解决页面渲染前后带来的数据传递问题。

下面看看通过会话机制如何解决数据传递

import streamlit as st

msg = ""
if "name" in st.session_state:
    msg = {"name": st.session_state.name, "passwd": st.session_state.passwd}

st.write(f"输入的内容是：{msg}")
name = st.text_input(label="用户名：")
passwd = st.text_input(label="密码：")
submit = st.button("确定")
if submit:
    st.session_state["name"] = name
    st.session_state["passwd"] = passwd

st.session_state 就是会话机制的全局变量，在按钮点击之后向st.session_state中更新数据，当新一轮循环开始时判断st.session_state中是否有name属性，如果存在name数据表明会话中有数据，读取数据展示出来。

st.session_state支持即支持字典的数据管理方式，也支持属性的管理方式。也就是说获取一个数据，st.session_state["data"] 和 st.session_state.data都是支持的。

注意事项

在实际使用streamlit中也有到一些让人困惑的事情，下面列举出来避免有人同样踩坑。

不同按钮的监听方式会影响组件渲染

按钮有两种监听方式，分别是监听按钮变量和绑定回调函数

# 按钮监听方法1
submit = st.button()
if submit:
    pass 


# 按钮监听方法2
submit = st.button(on_click=handler_click)

这两种监听方式有不同的组件渲染顺序。具体来说是：

1. 使用监听按钮方式，点击按钮之后程序重新执行所有代码，执行到按钮时进入监听代码片段
2. 使用回调函数，点击按钮之后先执行回调函数，再重新执行所有代码

如下获取输入框信息，就会发现获取的是button出现时input输入框的状态，而不是最新的状态

import streamlit as st

def get_username_passwd(username, password):
    st.write("username:", username, "password:", password)


with st.form("登录页面"):
    username = st.text_input("用户名")
    password = st.text_input("密码")

    # 使用on_click的方法，获取的是button出现时input输入框的状态，而不是最新的状态。逆天bug
    submitted = st.form_submit_button("登录", on_click=get_username_passwd, args=(username, password))

元素没有固定ID

在streamlit中生成的页面没有固定的class name 或 id。在不同环境下可能生成不一样的class name。所以通过js或css修改页面的方法往往不能通用，因为类名会发生变化。

可靠的获取元素的方法是使用 <font style="color:rgb(32, 33, 36);">data-testid="stFormSubmitButton"</font>中的 data_testid。

但是如果页面中有多个相同属性的 data-testid，那么这种方式也不可靠。

原文地址：https://blog.csdn.net/namelijink/article/details/145305409

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！