Streamlit 快速构建交互式页面的python库

1|0基础介绍


1|1streamlit 是什么


Streamlit是一个面向机器学习和数据科学团队的开源应用程序框架,通过它可以用python代码方便快捷的构建交互式前端页面。streamlit特别适合结合大模型快速的构建一些对话式的应用,可以看到一些行业内热门的使用。


项目本身也比较成熟,release版本,start数量等都表明该项目持续打磨了很长时间。

1|2streamlit 简单示例


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

1|3streamlit 优缺点


streamlit优点:

  • 不需要掌握前端知识就能创建web页面
  • 内置很多机器学习交互的展示组件,更有利于算法工程师使用
  • 开发速度快,修改方便
    streamlit缺点:
  • 前端界面固定,开发者不能随意调整控件位置
  • 只适合于少量页面的项目,不适用于复杂网页的网站前端

2|0组件集合


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

从官方文档来看,主要的组件包括:

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

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

2|1文字


2|2数据表格


2|3输入组件


2|4聊天


3|0js和html 渲染


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

3|1对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渲染到页面上。

这时就可以通过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库。

4|0组件工作原理


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

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

5|0会话状态


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

这个简单的需求反而不好实现,因为点击确定按钮之后,整个程序重新执行,输入的用户名和密码已经是上一次页面的数据,无法传递到下一次页面渲染中。这时就需要会话状态来解决这个问题了。
首先解释一下streamlit中的会话。在streamlit中一个tab页表示一个会话,新开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
streamlit run text_input.py

st.session_state 就是会话机制的全局变量,在按钮点击之后向st.session_state中更新数据,当新一轮循环开始时判断st.session_state中是否有name属性,如果存在name数据表明会话中有数据,读取数据展示出来。
st.session_state支持即支持字典的数据管理方式,也支持属性的管理方式。也就是说获取一个数据,st.session_state["data"] 和 st.session_state.data都是支持的

6|0避坑指南


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

6|1不同按钮的监听方式会影响组件渲染顺序


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

# 按钮监听方法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))

6|2元素没有固定ID


在streamlit中生成的页面没有固定的class name 或 id。在不同环境下可能生成不一样的class name。所以通过js或css修改页面的方法往往不能通用,因为类名会发生变化。
可靠的获取元素的方法是使用 data-testid="stFormSubmitButton"中的 data_testid。

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

7|0使用建议


来自三体人的呐喊:
不要在大型项目中使用!
不要在大型项目中使用!
不要在大型项目中使用!

streamlit调整布局是一件痛苦的事情。个人真实感受:如果说做项目想盖房子,做普通项目是用水泥砖头盖房子,用streamlit像是用积木盖房子,感觉碰一下就倒了。

streamlit更适合用在功能单一,页面较少,没有页面跳转的项目上。各种封装好的组件能够快速实现一个最小可行性产品(MVP),避免算法工程师在前端页面花费太长时间。


__EOF__

本文作者goldsunshine
本文链接https://www.cnblogs.com/goldsunshine/p/17827556.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   金色旭光  阅读(3029)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2021-11-23 一篇文章讲清楚迭代器和生成器
点击右上角即可分享
微信分享提示