ToB企服应用市场:ToB评测及商务社交产业平台

标题: Python 可视化 web 神器:websim 、streamlit、Gradio、dash、nicegui;低 [打印本页]

作者: 乌市泽哥    时间: 2025-1-6 03:07
标题: Python 可视化 web 神器:websim 、streamlit、Gradio、dash、nicegui;低
官网:https://streamlit.io/
github:https://github.com/streamlit/streamlit
API 参考:https://docs.streamlit.io/library/api-reference
最全 Streamlit 教程:https://juejin.cn/column/7265946243196436520
Streamlit-中文文档:https://github.com/wanghanbinpanda/Streamlit-Documentation-Chinese/blob/main/README.md
websim用自然语言快速构建生成功能齐全的网站(用 AI 生成一个网页):https://websim.ai/
1、Python web GUI 框架

Gradio、Streamlit、Dash、nicegui
框架对比:Gradio、Streamlit 和 Dash:https://zhuanlan.zhihu.com/p/611828558
在机器学习范畴,针对已经训练好的模子创建一个快速的 Demo 通常是必要的,下面是快速创建机器学习应用的几个框架:gradio、streamit和dash进行简朴的对比。
gradio
streamit
dash
主要利用场景
可交互小 Demo
工作流、DashBoard
DashBoard、生产环境的复杂演示应用
上手难度
简朴
简朴
中等
组件丰富度



综合扩展性



Jupyter Notebook 内支持



是否完全开源


部分企业级功能未开源
github stars
13.4k
23.1k
18.2k
案例列表
GitHub - gradio-app/awesome-demos: links and status of cool gradio demos
App Gallery ? Streamlit
Dash Enterprise
2、nicegui

   官网:https://nicegui.io/
github:https://github.com/zauberzeug/nicegui/
nicegui 中文文档:nicegui-reference-cn:https://zhuanlan.zhihu.com/p/661187865
在 Python 3.10 及更高版本中,collections模块被重构,MutableMapping 已经被弃用。
安装:pip install nicegui
NiceGUI 基于FastAPI,封装了Quasar、Vue、Tailwind CSS、AG Grid、ECharts等,可以用来快速开辟web或桌面程序。
  示例代码
  1. from nicegui import ui
  2. ui.icon('thumb_up')
  3. ui.markdown('This is **Markdown**.')
  4. ui.html('This is <strong>HTML</strong>.')
  5. with ui.row():
  6.     ui.label('CSS').style('color: #888; font-weight: bold')
  7.     ui.label('Tailwind').classes('font-serif')
  8.     ui.label('Quasar').classes('q-ml-xl')
  9. ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
  10. ui.run()
复制代码
实行结果

示例:
  1. from nicegui import ui
  2. ui.label('Hello NiceGUI!')
  3. ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
  4. ui.run()
复制代码

nicegui 中文文档

nicegui-reference-cn:https://zhuanlan.zhihu.com/p/661187865
   一、底子元素
1、标签
2、图标
3、头像
4、链接
5、按钮
6、徽章
7、切换
8、单选选择
9、下拉选择
10、复选框
11、开关
12、滑块
13、利用杆
14、文本输入
15、文本框
16、数字输入
17、旋钮
18、颜色输入
19、颜色选择器
20、日期输入
21、时间输入
22、文件上传
23、聊天消息
24、通用元素
二、标志语言
1、Markdown 元素
2、Mermaid 图表
3、HTML 元素
4、SVG
三、图片,音频和视频
1、图像
2、标题和叠加
3、交互式图像
4、音频
5、视频
四、数据元素
1、表格
2、AG Grid (大数据)
3、图表
4、Apache EChart
5、Pyplot 上下文
6、线性图
7、Plotly 元素
8、线性进度条
9、圆形进度条
10、旋转器
11、3D 场景
12、树状布局
13、日记视图
14、编辑器
15、代码
16、JSON编辑器
五、布局
1、卡片
2、列元素
3、行元素
4、网格元素
5、清除容器内容
6、睁开元素
7、滚动区域
8、分隔符
9、分割器
10、标签页
11、步进器
12、时间线
13、走马灯
14、菜单
15、工具提示
16、通知
17、对话框
  3、streamlit

streamlit简介

Streamlit是Python可视化 web 神器 ,是一个开箱即用的工具集,可以让开辟者免于学习繁杂的前端知识,仅需几行代码就可以轻松、快速的构建一个简便、优雅、令人惊叹的可视化web app 应用。用于机器学习、数据可视化。当快速搭建一个 web app 的时间 Streamlit绝对是开辟神器。
Streamlit工作流程

:https://docs.streamlit.io/get-started/fundamentals/summary

简朴 利用

安装:pip install -i https://pypi.douban.com/simple streamlit
Streamlit 提供了一些入门示例,实行命令即可:streamlit hello
实行后会主动打开浏览器加载一个本地页面 http://localhost:8501/

这里面有许多的 demo,可以看下这些 Demo 另有对应的配套代码。代码直接拷贝生存,就可以在本地直接通过如下命令直接运行:streamlit run st-demo.py
Streamlit利用 速查表

怎么运行 Streamlit

:https://docs.streamlit.io/knowledge-base/using-streamlit/how-do-i-run-my-streamlit-script
运行 streamlit方法:( Ctrl +c竣事运行)

Python直接实行:python temp_test.py

浏览器中直接访问URL

Markdown 文本

导入 streamlit 后,就可以直接利用 st.markdown() 初始化,调用差异的方法,就可以往文档对象中填入内容

示例:
  1. import streamlit as st
  2. # markdown
  3. st.markdown('Streamlit Demo')
  4. # 设置网页标题
  5. st.title('一个傻瓜式构建可视化 web的 Python 神器 -- streamlit')
  6. # 展示一级标题
  7. st.header('1. 安装')
  8. st.text('和安装其他包一样,安装 streamlit 非常简单,一条命令即可')
  9. code1 = '''pip3 install streamlit'''
  10. st.code(code1, language='bash')
  11. # 展示一级标题
  12. st.header('2. 使用')
  13. # 展示二级标题
  14. st.subheader('2.1 生成 Markdown 文档')
  15. # 纯文本
  16. st.text('导入 streamlit 后,就可以直接使用 st.markdown() 初始化')
  17. # 展示代码,有高亮效果
  18. code2 = '''import streamlit as st
  19. st.markdown('Streamlit Demo')'''
  20. st.code(code2, language='python')
复制代码
Streamlit 运行的方式 与普通的脚本 有所差异,命令行实行:streamlit run st-demo.py
数据 图表

关于数据的展示,streamlit 由两个组件进行支持

表格

Table 的示例
  1. df = pd.DataFrame(
  2.     np.random.randn(10, 5),
  3.     columns=('第%d列' % (i+1) for i in range(5))
  4. )
  5. st.table(df)
复制代码

Datafram 的示例
  1. df = pd.DataFrame(
  2.     np.random.randn(10, 5),
  3.     columns=('第%d列' % (i+1) for i in range(5))
  4. )
  5. st.dataframe(df.style.highlight_max(axis=0))
复制代码

实在另有 n 多种样式,都可以在源代码中找到示例,比如:

监控组件

在采集到一些监控数据后,若你必要做一个监控面板, streamlit 也为你提供的 metric 组件
示例:创建 三个指标,并且填入对应的数据
  1. col1, col2, col3 = st.columns(3)
  2. col1.metric("Temperature", "70 °F", "1.2 °F")
  3. col2.metric("Wind", "9 mph", "-8%")
  4. col3.metric("Humidity", "86%", "4%")
复制代码
革新页面,就能看到下面的效果

原生图表组件

Streamlit 原生支持多种图表:

折线图
  1. chart_data = pd.DataFrame(
  2.     np.random.randn(20, 3),
  3.     columns=['a', 'b', 'c'])
  4. st.line_chart(chart_data)
复制代码

面积图
  1. chart_data = pd.DataFrame(
  2.     np.random.randn(20, 3),
  3.     columns = ['a', 'b', 'c'])
  4. st.area_chart(chart_data)
复制代码

柱状图
  1. chart_data = pd.DataFrame(
  2.     np.random.randn(50, 3),
  3.     columns = ["a", "b", "c"])
  4. st.bar_chart(chart_data)
复制代码

舆图
  1. df = pd.DataFrame(
  2.     np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
  3.     columns=['lat', 'lon']
  4. )
  5. st.map(df)
复制代码

外部图表组件

Streamlit 的一些原生图表组件,虽然做到了傻瓜式,但仅能输入数据、高度和宽度,如果你想更美丽的图表,就像 matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz 那样,streamlit 也提供了支持:


用户交互操作

前面都只是展示文本和数据,streamlit 还能写一些交互界面。寻常在网页上、app 上能看到的交互组件,Streamlit 险些都能支持。。

这些内容非常多,也比较简朴,可以直接去看 streamlit 源码里的表明即可。

页面之间数据共享

Session State是Streamlit中用于在差异页面之间传递和生存状态数据的一种机制。通过Session State,我们可以在应用程序的整个生命周期中维护和访问特定于会话的变量。这意味着我们可以在差异页面之间共享和利用相同的变量值,从而实现多页面之间的交互和数据传递。
长处:

缺点:

多页面

方法 1:通过pages文件夹 (推荐)

官网多页文档:https://docs.streamlit.io/library/advanced-features/multipage-apps

在单个py文件中,如果每个应用 "页面"都编写为一个函数,选择框用于选择要显示的页面。随着应用的发展,维护代码必要大量额外的开销。此外,由于受st.selectboxUI 的限定,无法选择要运行的“页面”,也无法自定义st.set_page_config单个页面标题,也无法利用 URL 在页面之间导航。以是,必要将现有应用程序转换为多页应用程序,Streamlit 提供了一种创建多页应用程序的方式。示例:向现有应用添加更多页面:
多页应用的文档将教你怎样向应用添加页面,包括怎样定义页面、构建和运行多页应用以及在页面之间导航。了解底子知识后,创建您的第一个多页应用程序!

main.py,在页面显示main。(可以改成Home.py,在页面可以显示Home )
  1. import sys
  2. import streamlit as st
  3. from streamlit import runtime
  4. from streamlit.web import cli as stcli
  5. def my_web_app():
  6.     st.set_page_config(
  7.         page_title="Hello",
  8.         page_icon="??",
  9.     )
  10.     st.write("# Welcome to Streamlit! ??")
  11.     st.sidebar.success("Select a demo above.")
  12.     st.markdown(
  13.         """
  14.         Streamlit is an open-source app framework built specifically for
  15.         Machine Learning and Data Science projects.
  16.         **?? Select a demo from the sidebar** to see some examples
  17.         of what Streamlit can do!
  18.         ### Want to learn more?
  19.         - Check out [streamlit.io](https://streamlit.io)
  20.         - Jump into our [documentation](https://docs.streamlit.io)
  21.         - Ask a question in our [community
  22.             forums](https://discuss.streamlit.io)
  23.         ### See more complex demos
  24.         - Use a neural net to [analyze the Udacity Self-driving Car Image
  25.             Dataset](https://github.com/streamlit/demo-self-driving)
  26.         - Explore a [New York City rideshare dataset](https://github.com/streamlit/demo-uber-nyc-pickups)
  27.     """
  28.     )
  29. def main():
  30.     if runtime.exists():
  31.         my_web_app()
  32.     else:
  33.         sys.argv = ["streamlit", "run", sys.argv[0]]
  34.         sys.exit(stcli.main())
  35. if __name__ == '__main__':
  36.     main()
复制代码
创建多个页面

效果如图:

pages/1_??_Plotting_Demo.py
  1. import streamlit as st
  2. import time
  3. import numpy as np
  4. st.set_page_config(page_title="Plotting Demo", page_icon="??")
  5. st.markdown("# Plotting Demo")
  6. st.sidebar.header("Plotting Demo")
  7. st.write(
  8.     """This demo illustrates a combination of plotting and animation with
  9. Streamlit. We're generating a bunch of random numbers in a loop for around
  10. 5 seconds. Enjoy!"""
  11. )
  12. progress_bar = st.sidebar.progress(0)
  13. status_text = st.sidebar.empty()
  14. last_rows = np.random.randn(1, 1)
  15. chart = st.line_chart(last_rows)
  16. for i in range(1, 101):
  17.     new_rows = last_rows[-1, :] + np.random.randn(5, 1).cumsum(axis=0)
  18.     status_text.text("%i%% Complete" % i)
  19.     chart.add_rows(new_rows)
  20.     progress_bar.progress(i)
  21.     last_rows = new_rows
  22.     time.sleep(0.05)
  23. progress_bar.empty()
  24. # Streamlit widgets automatically run the script from top to bottom. Since
  25. # this button is not connected to any other logic, it just causes a plain
  26. # rerun.
  27. st.button("Re-run")
复制代码
pages/2_??_Mapping_Demo.py
  1. import streamlit as st
  2. import pandas as pd
  3. import pydeck as pdk
  4. from urllib.error import URLError
  5. st.set_page_config(page_title="Mapping Demo", page_icon="??")
  6. st.markdown("# Mapping Demo")
  7. st.sidebar.header("Mapping Demo")
  8. st.write(
  9.     """This demo shows how to use
  10. [`st.pydeck_chart`](https://docs.streamlit.io/library/api-reference/charts/st.pydeck_chart)
  11. to display geospatial data."""
  12. )
  13. @st.cache_data
  14. def from_data_file(filename):
  15.     url = (
  16.         "http://raw.githubusercontent.com/streamlit/"
  17.         "example-data/master/hello/v1/%s" % filename
  18.     )
  19.     return pd.read_json(url)
  20. try:
  21.     ALL_LAYERS = {
  22.         "Bike Rentals": pdk.Layer(
  23.             "HexagonLayer",
  24.             data=from_data_file("bike_rental_stats.json"),
  25.             get_position=["lon", "lat"],
  26.             radius=200,
  27.             elevation_scale=4,
  28.             elevation_range=[0, 1000],
  29.             extruded=True,
  30.         ),
  31.         "Bart Stop Exits": pdk.Layer(
  32.             "ScatterplotLayer",
  33.             data=from_data_file("bart_stop_stats.json"),
  34.             get_position=["lon", "lat"],
  35.             get_color=[200, 30, 0, 160],
  36.             get_radius="[exits]",
  37.             radius_scale=0.05,
  38.         ),
  39.         "Bart Stop Names": pdk.Layer(
  40.             "TextLayer",
  41.             data=from_data_file("bart_stop_stats.json"),
  42.             get_position=["lon", "lat"],
  43.             get_text="name",
  44.             get_color=[0, 0, 0, 200],
  45.             get_size=15,
  46.             get_alignment_baseline="'bottom'",
  47.         ),
  48.         "Outbound Flow": pdk.Layer(
  49.             "ArcLayer",
  50.             data=from_data_file("bart_path_stats.json"),
  51.             get_source_position=["lon", "lat"],
  52.             get_target_position=["lon2", "lat2"],
  53.             get_source_color=[200, 30, 0, 160],
  54.             get_target_color=[200, 30, 0, 160],
  55.             auto_highlight=True,
  56.             width_scale=0.0001,
  57.             get_width="outbound",
  58.             width_min_pixels=3,
  59.             width_max_pixels=30,
  60.         ),
  61.     }
  62.     st.sidebar.markdown("### Map Layers")
  63.     selected_layers = [
  64.         layer
  65.         for layer_name, layer in ALL_LAYERS.items()
  66.         if st.sidebar.checkbox(layer_name, True)
  67.     ]
  68.     if selected_layers:
  69.         st.pydeck_chart(
  70.             pdk.Deck(
  71.                 map_style="mapbox://styles/mapbox/light-v9",
  72.                 initial_view_state={
  73.                     "latitude": 37.76,
  74.                     "longitude": -122.4,
  75.                     "zoom": 11,
  76.                     "pitch": 50,
  77.                 },
  78.                 layers=selected_layers,
  79.             )
  80.         )
  81.     else:
  82.         st.error("Please choose at least one layer above.")
  83. except URLError as e:
  84.     st.error(
  85.         """
  86.         **This demo requires internet access.**
  87.         Connection error: %s
  88.     """
  89.         % e.reason
  90.     )
复制代码
pages/3_??_DataFrame_Demo.py
  1. import streamlit as st
  2. import pandas as pd
  3. import altair as alt
  4. from urllib.error import URLError
  5. st.set_page_config(page_title="DataFrame Demo", page_icon="??")
  6. st.markdown("# DataFrame Demo")
  7. st.sidebar.header("DataFrame Demo")
  8. st.write(
  9.     """This demo shows how to use `st.write` to visualize Pandas DataFrames.
  10. (Data courtesy of the [UN Data Explorer](http://data.un.org/Explorer.aspx).)"""
  11. )
  12. @st.cache_data
  13. def get_UN_data():
  14.     AWS_BUCKET_URL = "http://streamlit-demo-data.s3-us-west-2.amazonaws.com"
  15.     df = pd.read_csv(AWS_BUCKET_URL + "/agri.csv.gz")
  16.     return df.set_index("Region")
  17. try:
  18.     df = get_UN_data()
  19.     countries = st.multiselect(
  20.         "Choose countries", list(df.index), ["China", "United States of America"]
  21.     )
  22.     if not countries:
  23.         st.error("Please select at least one country.")
  24.     else:
  25.         data = df.loc[countries]
  26.         data /= 1000000.0
  27.         st.write("### Gross Agricultural Production ($B)", data.sort_index())
  28.         data = data.T.reset_index()
  29.         data = pd.melt(data, id_vars=["index"]).rename(
  30.             columns={"index": "year", "value": "Gross Agricultural Product ($B)"}
  31.         )
  32.         chart = (
  33.             alt.Chart(data)
  34.             .mark_area(opacity=0.3)
  35.             .encode(
  36.                 x="year:T",
  37.                 y=alt.Y("Gross Agricultural Product ($B):Q", stack=None),
  38.                 color="Region:N",
  39.             )
  40.         )
  41.         st.altair_chart(chart, use_container_width=True)
  42. except URLError as e:
  43.     st.error(
  44.         """
  45.         **This demo requires internet access.**
  46.         Connection error: %s
  47.     """
  48.         % e.reason
  49.     )
复制代码
注意:

方法 2:通过函数中的if else

在利用Session State构建多页面应用之前,让我们先了解一下多页面应用的根本布局。一个典型的多页面应用通常包括以下几个组成部分:

方法 3:通过函数

如果页面内容构建的太过复杂,单纯的 if-else 语句已经无法满足应用的构建需求,这时间可以利用函数来构建。
  1. import sys
  2. import streamlit as st
  3. from streamlit import runtime
  4. from streamlit.web import cli as stcli
  5. def page_home():
  6.     st.title('Home Page')
  7.     # 在Home页面中显示数据和功能组件
  8. def page_about():
  9.     st.title('About Page')
  10.     # 在About页面中显示数据和功能组件
  11. def my_web_app():
  12.     # 设置初始页面为Home
  13.     session_state = st.session_state
  14.     if 'page' not in session_state:
  15.         session_state['page'] = 'Home'
  16.     # 导航栏
  17.     page = st.sidebar.radio('Navigate', ['Home', 'About'])
  18.     if page == 'Home':
  19.         page_home()
  20.     elif page == 'About':
  21.         page_about()
  22. def main():
  23.     if runtime.exists():
  24.         my_web_app()
  25.     else:
  26.         sys.argv = ["streamlit", "run", sys.argv[0]]
  27.         sys.exit(stcli.main())
  28. if __name__ == '__main__':
  29.     main()
复制代码
组件/控件

怎样利用组件,起首找到要利用的组件。两个很好的组件库:

比方,要利用出色的 AgGrid 组件,起首安装:pip install streamlit-aggrid
  1. from st_aggrid import AgGrid
  2. import pandas as pd
  3. df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv')
  4. AgGrid(df)
复制代码
实行命令:streamlit run example.py
组件 API 参考

高级功能

用户登录

Streamlit-Authenticator:https://github.com/mkhorasani/Streamlit-Authenticator
pypi:https://pypi.org/project/streamlit-authenticator/
一个安满身份验证模块,用于验证 Streamlit 应用程序中的用户根据。更多利用方法参看github
  1. import streamlit as st
  2. import streamlit_authenticator as stauth
  3. def login_success():
  4.     container = st.container()
  5.     # create a prompt text for the text generation
  6.     prompt_text = st.text_area(
  7.         label="用户命令输入",
  8.         height=100,
  9.         placeholder="请在这儿输入您的命令"
  10.     )
  11.     # 其他语句...
  12. def main():
  13.     # 用户信息,后续可以来自DB
  14.     names = ['普通用户', '管理员']  # 用户名
  15.     usernames = ['user_king', 'user_admin']  # 登录名
  16.     passwords = ['user_king_passwd', 'user_admin_passwd']  # 登录密码
  17.     # 对密码进行加密操作,后续将这个存放在credentials中
  18.     hashed_passwords = stauth.Hasher(passwords).generate()
  19.     # 定义字典,初始化字典
  20.     credentials = {'usernames': {}}
  21.     # 生成服务器端的用户身份凭证信息
  22.     for i in range(0, len(names)):
  23.         credentials['usernames'][usernames[i]] = {'name': names[i], 'password': hashed_passwords[i]}
  24.     authenticator = stauth.Authenticate(credentials, 'some_cookie_name', 'some_signature_key', cookie_expiry_days=0)
  25.     name, authentication_status, username = authenticator.login('Login', 'main')
  26.     if authentication_status:  # 登录成功
  27.         login_success()
  28.     elif not authentication_status:  # 登录失败
  29.         st.error('Username/password is incorrect')
  30.     elif authentication_status is None:  # 未输入登录信息
  31.         st.warning('Please enter your username and password')
  32. if __name__ == "__main__":
  33.     main()
复制代码
利用 Streamlit 进行 Web 应用程序开辟
多媒体 组件/控件

想要在页面上播放图片、音频和视频,可以利用 streamlit 的这三个组件:


状态 组件

状态组件用来向用户展示当出息序的运行状态,包括:


页面 布局

Streamlit 是自上而下渲染的,组件在页面上的排列顺序与代码的实行顺序同等。一个精美的 web app ,只有上下单栏式的布局肯定是不敷的。现实上 streamlit 还提供了多种多样的布局:
st.sidebar:侧边栏。侧边栏可以做一些用户操作控件


容器:st.sidebar 侧边栏

Streamlit 提供了强大的 st.sidebar 组件。借助于这个组件,可以轻松地将小部件(widgets)放置在应用页面的侧边栏位置。将交互元素添加至侧边栏。可以利用对象体现法(object notation)或者 with 语法将元素添加到 st.sidebar。两者的效果是一样的,只是语法差异。以下是两种添加元素的方式:
  1. # 使用对象表示法
  2. st.sidebar.[element_name]
  3. # "with" 语法
  4. with st.sidebar:
  5.     st.[element_name]
复制代码
通过将元素添加至 st.sidebar,这些元素会被固定在侧边栏的左侧,让用户可以轻松地浏览和交互。
示例:在侧边栏添加选择框和单选按钮
  1. import streamlit as st
  2. # 使用对象表示法添加选择框
  3. add_selectbox = st.sidebar.selectbox(
  4.     "您希望如何联系您?",
  5.     ("电子邮件", "家庭电话", "移动电话")
  6. )
  7. # 使用“with”语法添加单选按钮
  8. with st.sidebar:
  9.     add_radio = st.radio(
  10.         "选择一种运输方式",
  11.         ("标准(5-15天)", "快递(2-5天)")
  12.     )
复制代码


以下是怎样在侧边栏中添加 st.echo 和 st.spinner 的示例:
  1. import streamlit as st
  2. import time
  3. with st.sidebar:
  4.     with st.echo():
  5.         st.write("这段代码将在侧边栏中显示。")
  6.     with st.spinner("加载中..."):
  7.         time.sleep(5)
  8.     st.success("完成!")
复制代码

通过充实利用 st.sidebar,您可以将交互元素整齐地构造在应用的侧边栏,提供更加直观和便捷的用户体验。
容器:st.columns 并排多列

st.columns 返回一个容器对象的列表,可以在这些容器对象中添加元素。每个对象都可以用来添加元素。您可以选择利用“with”语法(更推荐)或者直接在容器对象上调用方法来添加元素。以下是示例代码:
  1. import sys
  2. import streamlit as st
  3. from streamlit import runtime
  4. from streamlit.web import cli as stcli
  5. def layout_column():
  6.     col1, col2, col3 = st.columns(3)
  7.     with col1:
  8.         st.header("一只猫")
  9.         st.image("https://static.streamlit.io/examples/cat.jpg")
  10.     with col2:
  11.         st.header("一只狗")
  12.         st.image("https://static.streamlit.io/examples/dog.jpg")
  13.     with col3:
  14.         st.header("一只猫头鹰")
  15.         st.image("https://static.streamlit.io/examples/owl.jpg")
  16. def main():
  17.     if runtime.exists():
  18.         # layout_sidebar()
  19.         layout_column()
  20.     else:
  21.         sys.argv = ["streamlit", "run", sys.argv[0]]
  22.         sys.exit(stcli.main())
  23. if __name__ == '__main__':
  24.     main()
复制代码
按百分比设置列大小,在容器对象上调用方法:
  1. import streamlit as st
  2. import numpy as np
  3. col1, col2 = st.columns([3, 1])
  4. data = np.random.randn(10, 1)
  5. col1.subheader("一个宽容器,含有图表")
  6. col1.line_chart(data)
  7. col2.subheader("一个窄容器,含有数据")
  8. col2.write(data)
复制代码
列不能放在边栏中的其他列中。只能在应用程序的主要区域进行。列只能放置在其他列中,最多嵌套一个级别。也就是说,您可以将多个容器放置在主要内容区域内,但不能将多元素容器嵌套在其他多元素容器内。此外,请注意,不能将多元素容器嵌套在侧边栏的容器内,这只能在应用程序的主要区域中实现。通过公道地运用 st.columns,您可以轻松地实现并排布局的多元素容器,提供更清晰和直观的界面效果,加强用户体验。
容器:st.tabs - 选项卡布局

  1. import sys
  2. import streamlit as st
  3. from streamlit import runtime
  4. from streamlit.web import cli as stcli
  5. import numpy as np
  6. def layout_tab():
  7.     tab1, tab2, tab3, tab4, tab5, tab6 = st.tabs(["猫", "狗", "猫头鹰", "测试多列", "图表", "数据"])
  8.     data = np.random.randn(10, 1)
  9.     with tab1:
  10.         st.header("一只猫")
  11.         st.image("https://static.streamlit.io/examples/cat.jpg", width=200)
  12.     with tab2:
  13.         st.header("一只狗")
  14.         st.image("https://static.streamlit.io/examples/dog.jpg", width=200)
  15.     with tab3:
  16.         st.header("一只猫头鹰")
  17.         st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
  18.     with tab4:
  19.         col1, col2, col3, col4 = st.columns(4)
  20.         col1.header("col1")
  21.         col2.header("col2")
  22.         col3.header("col3")
  23.         col4.header("col4")
  24.     with tab5:
  25.         tab5.subheader("一个带有图表的选项卡")
  26.         tab5.line_chart(data)
  27.     with tab6:
  28.         tab6.subheader("一个带有数据的选项卡")
  29.         tab6.write(data)
  30. def main():
  31.     if runtime.exists():
  32.         # layout_sidebar()
  33.         layout_tab()
  34.     else:
  35.         sys.argv = ["streamlit", "run", sys.argv[0]]
  36.         sys.exit(stcli.main())
  37. if __name__ == '__main__':
  38.     main()
复制代码
条件渲染的注意事项:必要注意的是,每个选项卡的全部内容都会被一次性发送并渲染在前端,目前不支持条件渲染。这意味着无论用户是否查看某个选项卡,全部内容都会被加载和渲染。在计划应用时,请确保选项卡内的内容在逻辑上是相关的,避免出现不必要的数据传输和渲染。
容器:st.expander 睁开/折叠

当内容相对较多时。Streamlit 提供了 st.expander 组件,可以在应用程序中插入一个可睁开或折叠的容器,用来承载多个元素。用户可以点击睁开或折叠容器,以便在必要时查看更多内容,同时保持界面的整齐性。
通过调用 st.expander,您可以插入一个可睁开或折叠的容器,用于包罗多个元素。容器的初始状态是折叠的,只显示提供的标签。用户可以点击标签来睁开容器,查看此中的内容。同样,您可以选择利用“with”语法或者直接在容器对象上调用方法来添加元素。必要注意的是,目前不支持将 st.expander 嵌套在另一个 st.expander 内。
  1. import streamlit as st
  2. st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
  3. with st.expander("查看说明"):
  4.     st.write("""
  5.         上面的图表展示了我为您选择的一些数字。
  6.         这些数字是通过真实的骰子摇出来的,所以它们*保证*是随机的。
  7.     """)
  8.     st.image("https://static.streamlit.io/examples/dice.jpg")
复制代码
也可以直接在容器对象上调用方法:
  1. import streamlit as st
  2. st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
  3. expander = st.expander("查看说明")
  4. expander.write("""
  5.     上面的图表展示了我为您选择的一些数字。
  6.     这些数字是通过真实的骰子摇出来的,所以它们*保证*是随机的。
  7. """)
  8. expander.image("https://static.streamlit.io/examples/dice.jpg")
复制代码
目前不支持将 st.expander 嵌套在另一个 st.expander 内。如果必要多条理的睁开/折叠功能,您可以利用其他布局组件进行组合。
容器:st.container 插入多元素

通过调用 st.container,您可以插入一个不可见的容器,用于承载多个元素。与之前一样,您可以选择利用“with”语法或者直接在容器对象上调用方法来添加元素。必要注意的是,容器内的内容对用户来说是不可见的,但可以对元素进行管理和构造。
  1. import streamlit as st
  2. import numpy as np
  3. with st.container():
  4.    st.write("这是容器内的内容")
  5.    # 您可以调用任何 Streamlit 命令,包括自定义组件:
  6.    st.bar_chart(np.random.randn(50, 3))
  7. st.write("这是容器外的内容")
复制代码
无序插入元素:
  1. import streamlit as st
  2. container = st.container(border=True)
  3. container.write("This is inside the container")
  4. st.write("This is outside the container")
  5. # Now insert some more in the container
  6. container.write("This is inside too")
复制代码
容器:st.empty 插入单元素

在开辟应用程序时,偶尔您可能必要动态地插入、替换或清除单个元素,以实现更灵活的内容展示。Streamlit 提供了 st.empty 组件,可以插入一个单元素容器,用于承载一个元素。这使您可以在任何时间动态地操作单个元素,实现更多样化的界面效果。
通过调用 st.empty,您可以插入一个单元素容器,用于承载一个元素。与之前一样,您可以选择利用“with”语法或者直接在容器对象上调用方法来添加、替换或清除元素。
  1. import streamlit as st
  2. import time
  3. with st.empty():
  4.     for seconds in range(60):
  5.         st.write(f"? 已过去 {seconds} 秒")
  6.         time.sleep(1)
  7.     st.write("?? 1 分钟结束!")
复制代码
替换多个元素,然后清除它们:
  1. import time
  2. import streamlit as st
  3. placeholder = st.empty()
  4. # Replace the placeholder with some text:
  5. placeholder.text("Hello")
  6. # Replace the text with a chart:
  7. placeholder.line_chart({"data": [1, 5, 2, 6]})
  8. time.sleep(5)
  9. # Replace the chart with several elements:
  10. with placeholder.container():
  11.     st.write("This is one element")
  12.     st.write("This is another")
  13. # Clear all those elements:
  14. placeholder.empty()
复制代码
流程控制

Streamlit 是自上而下逐步渲染出来的,若你的应用场景必要对渲染做一些控制,streamlit 也有提供对应的方法

缓存特性提拔速度

当用户在页面上做一些操作的时间,比如输入数据,都会触发整个 streamlit 应用代码的重新实行,如果此中有读取外部数据的步骤(数 GB 的数据),那这种性能消耗黑白常可骇的。
但 streamlit 提供了一个缓存装饰器,当要重新实行代码渲染页面的时间,就会先去缓存里查一下,如果代码或者数据没有发生变化,就直接调用缓存的结果即可。
利用方法也简朴,在必要缓存的函数加上 @st.cache 装饰器即可。
  1. DATE_COLUMN = 'date/time'
  2. DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
  3.             'streamlit-demo-data/uber-raw-data-sep14.csv.gz')
  4. @st.cache
  5. def load_data(nrows):
  6.     data = pd.read_csv(DATA_URL, nrows=nrows)
  7.     lowercase = lambda x: str(x).lower()
  8.     data.rename(lowercase, axis='columns', inplace=True)
  9.     data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
  10.     return data
复制代码
部署并web访问

在本地编写的 streamlit 应用,运行起来后只能在本地访问。如果必要让别人也能访问这个应用,那你必要有一台服务器,这样才能通过公网ip进行访问
Streamlit 底子

Streamlit 主要概念

Streamlit高级概念

Streamlit 其他功能

高级功能

官网 教程

创建应用

创建多页应用

知识库


利用 Streamlit

官网 30 天学 Streamlit

:https://30days.streamlit.app/?challenge=Day1

4、低代码 Python Web 框架

官网文档:https://pywebio.readthedocs.io/zh-cn/latest/
PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出,将浏览器变成了一个“富文本终端”,可以用于构建简朴的Web应用或基于浏览器的GUI应用。 利用PyWebIO,开辟者能像编写终端脚本一样(基于input和print进行交互)来编写应用,无需具备HTML和JS的相关知识; PyWebIO还可以方便地整合进现有的Web服务。非常得当快速构建对UI要求不高的应用。
特性

安装:pip3 install -U pywebio
利用手册



免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4