Python 可视化 web 神器：streamlit、Gradio、dash、nicegui；低代码 Pytho
官网：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
1、Python web GUI 框架
Gradio、Streamlit、Dash、nicegui
框架对比：Gradio、Streamlit 和 Dash：https://zhuanlan.zhihu.com/p/611828558
在呆板学习范畴，针对已经练习好的模型创建一个快速的 Demo 通常是须要的，下面是快速创建呆板学习应用的几个框架：gradio、streamit 和 dash 进行简单的对比。
gradiostreamitdash主要使用场景可交互小 Demo工作流、DashBoardDashBoard、生产情况的复杂演示应用上手难度简单简单中等组件丰富度低高高综合扩展性低中高Jupyter Notebook 内支持是否是是否完全开源是是部门企业级功能未开源github stars13.4k23.1k18.2k案例列表GitHub - gradio-app/awesome-demos: links and status of cool gradio demosApp Gallery • StreamlitDash 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或桌面程序。
示例代码
from nicegui import ui
ui.icon('thumb_up')
ui.markdown('This is **Markdown**.')
ui.html('This is <strong>HTML</strong>.')
with ui.row():
ui.label('CSS').style('color: #888; font-weight: bold')
ui.label('Tailwind').classes('font-serif')
ui.label('Quasar').classes('q-ml-xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')
ui.run() 执行结果
https://img-blog.csdnimg.cn/direct/22ca5d0fe2da4559b3a89dc4d0baaa78.png
示例：
from nicegui import ui
ui.label('Hello NiceGUI!')
ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))
ui.run() https://img-blog.csdnimg.cn/direct/e9ce2701dc0348a4af1069f6c3020f3b.png
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
[*]Streamlit 应用程序是从上到下运行的Python脚本
[*]对于用户的每一次交互，整个脚本重新至尾执行一遍
[*]当脚本执行时，Streamlit 在浏览器中及时绘制其输出
[*]Streamlit 使用缓存来制止重复请求数据或重复计算
[*]每次用户与小部件交互时脚本都会重新执行，在该运行期间该小组件的输出值将重新设置。
[*]Streamlit 应用可以包含多个页面，这些页面在pages文件夹中的单独.py文件中定义。
https://img-blog.csdnimg.cn/direct/cc72c868ecb14fd896564314eec6d4b5.png
简单 使用
安装：pip install -i https://pypi.douban.com/simple streamlit
Streamlit 提供了一些入门示例，执行下令即可：streamlit hello
执行后会自动打开浏览器加载一个当地页面 http://localhost:8501/
https://img-blog.csdnimg.cn/direct/2dc5ffc5631c430493503f16a285b9e0.gif
这内里有很多的 demo，可以看下这些 Demo 另有对应的配套代码。代码直接拷贝生存，就可以在当地直接通过如下下令直接运行：streamlit run st-demo.py
Streamlit 使用 速查表
[*]Install & Import 安装和导入
[*]Command line 下令行
[*]Pre-release features 预发布功能
[*]Magic commands 魔术下令
[*]Display text 显示文本
[*]Display data 显示数据
[*]Display media 显示媒体
[*]Display charts 显示图表
[*]Add widgets to sidebar 将小部件添加到侧边栏
[*]Columns 列
[*]Tabs 制表符
[*]Control flow 控制流
[*]Display interactive widgets显示交互式小部件
[*]Build chat-based apps 构建基于谈天的应用
[*]Mutate data 更改数据
[*]Display code 显示代码
[*]Placeholders, help, and options占位符、帮助和选项
[*]Connect to data sources连接到数据源
[*]Optimize performance 优化性能
[*]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
import sys
import streamlit as st
from streamlit import runtime
from streamlit.web import cli as stcli
def my_web_app():
# markdown
st.markdown('Streamlit markdown')
st.header('Streamlit Demo')
def main():
if runtime.exists():
my_web_app()
else:
sys.argv = ["streamlit", "run", sys.argv]
sys.exit(stcli.main())
if __name__ == '__main__':
main()
Python 直接执行：python temp_test.py
https://img-blog.csdnimg.cn/direct/9c9d169520df4d89b9fb3e14009cab58.png
浏览器中直接访问 URL
https://img-blog.csdnimg.cn/direct/4d227dee5a2a47dfbd15270388904c70.png
Markdown 文本
导入 streamlit 后，就可以直接使用 st.markdown() 初始化，调用差异的方法，就可以往文档对象中填入内容
[*]st.title()：文章大标题
[*]st.header()：一级标题
[*]st.subheader()：二级标题
[*]st.text()：文本
[*]st.code()：代码，同时可设置代码的语言，显示的时候会高亮
[*]st.latex()：latex 公式
[*]st.caption()：小字体文本
示例：
import streamlit as st
# markdown
st.markdown('Streamlit Demo')
# 设置网页标题
st.title('一个傻瓜式构建可视化 web的 Python 神器 -- streamlit')
# 展示一级标题
st.header('1. 安装')
st.text('和安装其他包一样，安装 streamlit 非常简单，一条命令即可')
code1 = '''pip3 install streamlit'''
st.code(code1, language='bash')
# 展示一级标题
st.header('2. 使用')
# 展示二级标题
st.subheader('2.1 生成 Markdown 文档')
# 纯文本
st.text('导入 streamlit 后，就可以直接使用 st.markdown() 初始化')
# 展示代码，有高亮效果
code2 = '''import streamlit as st
st.markdown('Streamlit Demo')'''
st.code(code2, language='python') Streamlit 运行的方式 与普通的脚本 有所差异，下令行执行：streamlit run st-demo.py
数据 图表
关于数据的展示，streamlit 由两个组件进行支持
[*]table：普通的表格，用于静态数据的展示
[*]dataframe：高级的表格，可以进行数据的利用，比如排序
表格
Table 的示例
df = pd.DataFrame(
np.random.randn(10, 5),
columns=('第%d列' % (i+1) for i in range(5))
)
st.table(df) https://img-blog.csdnimg.cn/direct/639d2b64a8b44b92adf4648faf675bb5.png
Datafram 的示例
df = pd.DataFrame(
np.random.randn(10, 5),
columns=('第%d列' % (i+1) for i in range(5))
)
st.dataframe(df.style.highlight_max(axis=0)) https://img-blog.csdnimg.cn/direct/b756731f85504c05807094467a71ce21.png
其实另有 n 多种样式，都可以在源代码中找到示例，比如：
[*]highlight_null：空值高亮
[*]highlight_min：最小值高亮
[*]highlight_max：最大值高亮
[*]highlight_between：某区间内的值高亮
[*]highlight_quantile：暂没用过
监控组件
在采集到一些监控数据后，若你需要做一个监控面板， streamlit 也为你提供的 metric 组件
示例：创建 三个指标，并且填入对应的数据
col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%") 革新页面，就能看到下面的效果
https://img-blog.csdnimg.cn/direct/7fc39ef7217040ffaaf9d0cf194d3c12.png
原生图表组件
Streamlit 原生支持多种图表：
[*]st.line_chart：折线图
[*]st.area_chart：面积图
[*]st.bar_chart：柱状图
[*]st.map：舆图
折线图
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['a', 'b', 'c'])
st.line_chart(chart_data) https://img-blog.csdnimg.cn/direct/188037eba2494a718315904901310860.png
面积图
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns = ['a', 'b', 'c'])
st.area_chart(chart_data) https://img-blog.csdnimg.cn/direct/69b8b1d2475e447bb85c8e5f21ce3484.png
柱状图
chart_data = pd.DataFrame(
np.random.randn(50, 3),
columns = ["a", "b", "c"])
st.bar_chart(chart_data) https://img-blog.csdnimg.cn/direct/2229ea12f245400a98ac896aa0353218.png
舆图
df = pd.DataFrame(
np.random.randn(1000, 2) / + ,
columns=['lat', 'lon']
)
st.map(df) https://img-blog.csdnimg.cn/direct/f75569f7369943fea9b13b6b032e0b8a.png
外部图表组件
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
https://img-blog.csdnimg.cn/direct/e6d3a3efb892423fbc2ce1ca697b596b.png
用户 交互 利用
前面都只是展示文本和数据，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 源码里的注释即可。
https://img-blog.csdnimg.cn/direct/7b68232e168e4f3281c8ee8d47787a55.png
页面之间数据共享
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
https://img-blog.csdnimg.cn/direct/062762872b0a422ba6515697b00f0bd3.png
在单个py文件中，假如每个应用 "页面" 都编写为一个函数，选择框用于选择要显示的页面。随着应用的发展，维护代码需要大量额外的开销。此外，由于受 st.selectbox UI 的限定，无法选择要运行的“页面”，也无法自定义 st.set_page_config 单个页面标题，也无法使用 URL 在页面之间导航。所以，需要将现有应用程序转换为多页应用程序，Streamlit 提供了一种创建多页应用程序的方式。示例：向现有应用添加更多页面：
[*]假设您的主脚本名为 main_page.py，在同级目次下创建一个新文件夹 pages，Streamlit 在 pages 文件夹中找到的其他脚本将出现在侧边栏中显示的新页面选择器中。
[*]在 pages 文件夹中添加新文件 .py 以向应用添加更多页面 pages。在文件名中添加表情符号时，最佳做法是包含编号前缀。只有 pages/ 目次中的 .py 文件才会作为页面加载。Streamlit 忽略 pages/ 目次和子目次中的所有其他文件。页面会自动显示在应用程序侧边栏内美丽的导航 UI 中。当您单击侧边栏 UI 中的页面时，Streamlit 会导航到该页面，而无需重新加载整个前端。可以在两个 page 之间用 URL进行导航，page通过文件的label来定义有自己的url，当多个页面有雷同的label，streamlit会根据排序规则选取第一个。可以通过page的url访问对应的page
[*]运行 streamlit run main_page.py
多页应用的文档将教你怎样向应用添加页面，包括怎样定义页面、构建和运行多页应用以及在页面之间导航。了解基础知识后，创建您的第一个多页应用程序！
https://img-blog.csdnimg.cn/direct/b3758f8806724116a2963ca8031b1053.png
main.py，在页面显示 main。( 可以改成 Home.py，在页面可以显示 Home )
import sys
import streamlit as st
from streamlit import runtime
from streamlit.web import cli as stcli
def my_web_app():
st.set_page_config(
page_title="Hello",
page_icon="
页:
[1]