Python 可视化 web 神器：streamlit、Gradio、dash、nicegui；低代码 Python Web 框架：PyWebIO

官网：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

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

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、streamlit 简介

streamlit 简介

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

Streamlit 工作流程

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

1. Streamlit 应用程序是从上到下运行的Python脚本
2. 对于用户的每一次交互，整个脚本从头到尾执行一遍
3. 当脚本执行时，Streamlit 在浏览器中实时绘制其输出
4. Streamlit 使用缓存来避免重复请求数据或重复计算
5. 每次用户与小部件交互时脚本都会重新执行，在该运行期间该小组件的输出值将重新设置。
6. Streamlit 应用可以包含多个页面，这些页面在pages文件夹中的单独.py文件中定义。

2、简单使用

安装：pip install -i https://pypi.douban.com/simple  streamlit

Streamlit 提供了一些入门示例，执行命令即可：streamlit hello

执行后会自动打开浏览器加载一个本地页面 http://localhost:8501/

这里面有很多的 demo，可以看下这些 Demo 还有对应的配套代码。代码直接拷贝保存，就可以在本地直接通过如下命令直接运行：streamlit run st-demo.py

Streamlit 使用 速查表

1. Install & Import 安装和导入
2. Command line 命令行
3. Pre-release features 预发布功能
4. Magic commands 魔术命令
5. Display text 显示文本
6. Display data 显示数据
7. Display media 显示媒体
8. Display charts 显示图表
9. Add widgets to sidebar 将小部件添加到侧边栏
10. Columns 列
11. Tabs 制表符
12. Control flow 控制流
13. Display interactive widgets显示交互式小部件
14. Build chat-based apps 构建基于聊天的应用
15. Mutate data 更改数据
16. Display code 显示代码
17. Placeholders, help, and options占位符、帮助和选项
18. Connect to data sources连接到数据源
19. Optimize performance 优化性能
20. Cache data objects 缓存数据对象

怎么运行 Streamlit 

：https://docs.streamlit.io/knowledge-base/using-streamlit/how-do-i-run-my-streamlit-script

运行 streamlit 方法：( Ctrl + c 结束运行 )

• 方法 1：streamlit run your_script.py [-- script args]
• 方法 2：streamlit run https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streamlit_app.py
• 方法 3：python -m streamlit run your_script.py
• 方法 4：streamlit run your_script.py

1. import sys
2. import streamlit as st
3. from streamlit import runtime
4. from streamlit.web import cli as stcli
7. def my_web_app():
8. # markdown
9. st.markdown('Streamlit markdown')
10. st.header('Streamlit Demo')
13. def main():
14. if runtime.exists():
15. my_web_app()
16. else:
17. sys.argv = ["streamlit", "run", sys.argv[0]]
18. sys.exit(stcli.main())
21. if __name__ == '__main__':
22. main()

Python 直接执行：python temp_test.py

浏览器中直接访问 URL 

Markdown 文本

导入 streamlit 后，就可以直接使用 st.markdown() 初始化，调用不同的方法，就可以往文档对象中填入内容

• st.title()：文章大标题
• st.header()：一级标题
• st.subheader()：二级标题
• st.text()：文本
• st.code()：代码，同时可设置代码的语言，显示的时候会高亮
• st.latex()：latex 公式
• st.caption()：小字体文本

示例：

1. import streamlit as st
3. # markdown
4. st.markdown('Streamlit Demo')
6. # 设置网页标题
7. st.title('一个傻瓜式构建可视化 web的 Python 神器 -- streamlit')
9. # 展示一级标题
10. st.header('1. 安装')
12. st.text('和安装其他包一样，安装 streamlit 非常简单，一条命令即可')
13. code1 = '''pip3 install streamlit'''
14. st.code(code1, language='bash')
17. # 展示一级标题
18. st.header('2. 使用')
20. # 展示二级标题
21. st.subheader('2.1 生成 Markdown 文档')
23. # 纯文本
24. st.text('导入 streamlit 后，就可以直接使用 st.markdown() 初始化')
26. # 展示代码，有高亮效果
27. code2 = '''import streamlit as st
28. st.markdown('Streamlit Demo')'''
29. st.code(code2, language='python')

Streamlit 运行的方式 与普通的脚本 有所不同，命令行执行：streamlit run st-demo.py

数据 图表

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

• table：普通的表格，用于静态数据的展示
• dataframe：高级的表格，可以进行数据的操作，比如排序

表格

Table 的示例

1. df = pd.DataFrame(
2. np.random.randn(10, 5),
3. columns=('第%d列' % (i+1) for i in range(5))
4. )
6. 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. )
6. st.dataframe(df.style.highlight_max(axis=0))

其实还有 n 多种样式，都可以在源代码中找到示例，比如：

• highlight_null：空值高亮
• highlight_min：最小值高亮
• highlight_max：最大值高亮
• highlight_between：某区间内的值高亮
• highlight_quantile：暂没用过

监控组件

在采集到一些监控数据后，若你需要做一个监控面板， 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 原生支持多种图表：

• st.line_chart：折线图
• st.area_chart：面积图
• st.bar_chart：柱状图
• st.map：地图

折线图

1. chart_data = pd.DataFrame(
2. np.random.randn(20, 3),
3. columns=['a', 'b', 'c'])
5. st.line_chart(chart_data)

面积图

1. chart_data = pd.DataFrame(
2. np.random.randn(20, 3),
3. columns = ['a', 'b', 'c'])
5. 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 也提供了支持：

• st.pyplot
• st.bokeh_chart
• st.altair_chart
• st.altair_chart
• st.vega_lite_chart
• st.plotly_chart
• st.pydeck_chart
• st.graphviz_chart

用户 交互 操作

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

• button：按钮
• download_button：文件下载
• file_uploader：文件上传
• checkbox：复选框
• radio：单选框
• selectbox：下拉单选框
• multiselect：下拉多选框
• slider：滑动条
• select_slider：选择条
• text_input：文本输入框
• text_area：文本展示框
• number_input：数字输入框，支持加减按钮
• date_input：日期选择框
• time_input：时间选择框
• color_picker：颜色选择器

这些内容非常多，也比较简单，可以直接去看 streamlit 源码里的注释即可。

页面之间数据共享

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

优点：

• 简单易用：Streamlit的Session State机制使得在不同页面之间传递和保存状态数据变得非常简单。只需使用字典来存储和访问状态数据，无需复杂的配置或额外的库。
• 跨页面数据共享：通过Session State，我们可以在应用程序的整个生命周期中保存和访问特定于会话的变量。这使得在多个页面之间共享数据变得轻松，可以传递复杂的数据结构，如字典、列表等。
• 可扩展性：使用Session State，我们可以轻松地在应用程序中添加新的页面，并在不同页面之间保持数据的一致性。这使得应用程序更易于管理和维护，可以随着需求的增长进行扩展和修改。
• 状态持久化：通过Streamlit的Session State机制，我们可以在刷新应用程序或重新运行应用程序时保留状态数据。这对于用户来说非常方便，他们可以在应用程序的不同会话之间保持他们的工作状态。

缺点：

• 内存消耗：由于Session State数据存储在内存中，当应用程序的状态数据变得庞大时，内存消耗可能会较大。这可能会限制应用程序的可伸缩性和性能。
• 无持久化方案：Session State数据存储在应用程序的内存中，并且仅在应用程序运行期间存在。因此，当应用程序停止运行或重新启动时，Session State数据将丢失。如果需要长期存储数据，需要使用其他机制，如数据库或文件系统。
• 难以调试：由于Session State是在应用程序的多个页面之间传递和共享数据，当出现问题时，追踪和调试可能会比较困难。特别是在复杂的多页面应用程序中，正确地处理和管理Session State变量可能会变得复杂。

多页面

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

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

在单个py文件中，如果每个应用 "页面" 都编写为一个函数，选择框用于选择要显示的页面。随着应用的发展，维护代码需要大量额外的开销。此外，由于受 st.selectbox UI 的限制，无法选择要运行的“页面”，也无法自定义 st.set_page_config 单个页面标题，也无法使用 URL 在页面之间导航。所以，需要将现有应用程序转换为多页应用程序，Streamlit 提供了一种创建多页应用程序的方式。示例：向现有应用添加更多页面：

1. 假设您的主脚本名为 main_page.py，在同级目录下创建一个新文件夹 pages，Streamlit 在 pages 文件夹中找到的其他脚本将出现在侧边栏中显示的新页面选择器中。
2. 在 pages 文件夹中添加新文件 .py 以向应用添加更多页面 pages。在文件名中添加表情符号时，最佳做法是包含编号前缀。只有 pages/ 目录中的 .py 文件才会作为页面加载。Streamlit 忽略 pages/ 目录和子目录中的所有其他文件。页面会自动显示在应用程序侧边栏内漂亮的导航 UI 中。当您单击侧边栏 UI 中的页面时，Streamlit 会导航到该页面，而无需重新加载整个前端。可以在两个 page 之间用 URL进行导航，page通过文件的label来定义有自己的url，当多个页面有相同的label，streamlit会根据排序规则选取第一个。可以通过page的url访问对应的page
3. 运行 streamlit run main_page.py

多页应用的文档将教你如何向应用添加页面，包括如何定义页面、构建和运行多页应用以及在页面之间导航。了解基础知识后，创建您的第一个多页应用程序！

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
7. def my_web_app():
8. st.set_page_config(
9. page_title="Hello",
10. page_icon="