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

本文链接：https://blog.csdn.net/m0_74823947/article/details/144385064

官网：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或桌面程序。

示例代码

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()

执行结果

示例：

from nicegui import ui

ui.label('Hello NiceGUI!')
ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))

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

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

简单使用

安装：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结束运行)

方法 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[0]]
sys.exit(stcli.main())

if name == ‘main’:
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()：小字体文本

示例：

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)

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))

其实还有 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%")

刷新页面，就能看到下面的效果

原生图表组件

Streamlit 原生支持多种图表：

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

折线图

chart_data = pd.DataFrame(
    np.random.randn(20, 3),