Python交互式Web框架：Streamlit、Gradio、Dash、Hyperdiv

概述本文搜集几个流行的后端友好、基于Python语言、交互式Web框架可实现无需过多前端开发技能几行代码实现一个MVP展示界面可应用数据可视化、原型快速开发、机器学习数据探索等诸多场景。Streamlit官网开源GitHub41.4K Star3.7K ForkPython Web框架可用极少代码快速搭建交互式Web数据应用如数据分析、可视化展示等。提供在线体验地址Playground。功能轻松创建Web应用简化将Python脚本转为响应式网页的过程只需几行代码无需Flask、Django或前端经验数据处理与EDA使用pandas和numpy等库导入和处理数据进行探索性数据分析EDA以挖掘洞见动态可视化内置图表能展示趋势和比较配合交互式控件和美观的图表直观的用户控制下拉菜单、滑块和侧边栏让用户能引导分析为仪表板带来交互性特点不需要开发者拥有丰富的前端知识包含丰富的数据展示形式通过Python代码可控制应用程序的运行逻辑。架构图3个模块数据展示数据输入流程和UI设置。使用安装pip install streamlit。使用命令行工具需配置环境变量。importstreamlitasstimportpandasaspdimportnumpyasnpimportmatplotlib.pyplotasplt st.title(标题)st.header()st.subheader()st.text()dfpd.DataFrame({列1:[1,2,3],列2:[4,5,6]})st.dataframe(df)xnp.linspace(0,10,100)ynp.sin(x)plt.plot(x,y)st.pyplot(plt)namest.text_input(请输入名字)st.write(name)ifst.button(点击)st.write(好的)输入streamlit run demo.py命令浏览器打开http://localhost:8501体验吧。部署需要到官网与GitHub账户进行认证并在官网上完成部署。session_state问题异步函数适合非阻塞代码但Streamlit的主循环是同步的顶级 Streamlit 代码中不允许使用原生的 await。快速解决方案如果你不在异步循环中使用Python的asyncio.run()。如果在 Jupyter 中遇到循环错误使用nest_asyncio.apply()修补循环。进阶技巧使用st.container()或st.expander()进行视觉分组标题和图标如 或 打破单调引导视线Markdown支持允许引入丰富格式、链接、LaTeX方程使用st.sidebar添加设置比如选择结果数量切换摘要或完整答案通过st.markdown和unsafe_allow_htmlTrue添加自定义CSS打造主题背景和卡片使用st.error或st.warning优雅地显示错误信息。控件包括radio单选按钮checkbox多选框selectbox下拉框multiselect下拉多选框button按钮download_button下载slider滑块select_slider选择条text_input单行文本输入text_area多行文本输入number_input数值输入date_input日期输入time_input时间输入file_uploader文件上传camera_input摄像头拍照color_picker颜色选择image展示图片audio展示音频video展示视频Gradio官网开源GitHub40K Star3.1K Fork。理念为Python函数提供最快捷的路径使其成为一个可分享、可交互的Web演示应用尤其是在机器学习领域。特点代码极简3行代码搭出MVP界面实时更新改代码不用重启服务刷新网页就能看效果多模态交互支持文字、图片、音频、视频输入和输出多应用场景快速演示AI模型效果、展示项目、收集用户反馈、教学模型可视化支持团队协作多人同时编辑界面实时同步修改记录。多模态交互输入类型输出类型典型应用图像/视频标签/文本/图像图像分类、目标检测、风格迁移文本文本/代码/表格问答系统、代码生成、数据清洗音频文本/波形图语音转写、情感分析、频谱可视化文件/数据集可视化图表CSV分析、PDF摘要、数据探索应用场景学术研究快速验证论文算法论文复现生成可演示Demo企业服务将内部模型封装为API测试工具供非技术人员使用教育培训创建交互式教学模块产品原型用MVP界面争取投资演示AI功能而非纯技术方案局限与解决方案局限性复杂布局需使用gr.Blocks()灵活性低于Dash缺乏企业级权限管理功能解决方案结合Flask扩展通过gr.Interface.launch(shareFalse)导出API再用Flask封装接入Okta认证通过反向代理实现企业级权限控制实战安装pip install gradioimportgradioasgrdefgreet(name,intensity):returnHello, name!*int(intensity)# 创建界面demogr.Interface(fngreet,# 函数inputs[text,slider],# 对应函数的输入参数outputs[text],# 对应函数的返回值)demo.launch(shareTrue)解读Gradio的核心即Interface类。提供函数、输入、输出Gradio会自动处理剩下的所有事情UI布局、组件渲染和数据流转。gr.Interface更多参数live默认False设置为True实时处理title标题str格式description描述str格式通过share参数分享demo.launch(shareTrue)公网链接有效期1周。遇到的问题在Windows下通过Git Bash终端执行命令python gradio_demo.py命令行没有任何输出换成CMD终端输出正常Dash官网Plotly推出、基于Python的开源GitHub24.1K Star2.2K Fork框架用于快速构建数据驱动的Web应用程序。结合Flask的后端能力、Plotly.js支持多种图表类型如折线图、柱状图、散点图、热力图等的可视化能力以及React.js的交互能力允许用户通过简单的Python代码创建交互式的数据可视化应用而无需掌握复杂的前端技术。特别适合数据科学家、分析师和工程师展示数据分析结果、机器学习模型预测或其他数据驱动的功能。原理Dash应用由两个主要部分组成布局(Layout)和交互性(Interactivity)。布局导入核心组件from dash import Dash, html, dcc。布局定义应用程序的外观和结构通过代码来描述的使用dash_html_components和dash_core_components两个库来创建HTML元素和交互式组件。Dash 2.0版本开始这两者已被整合到dash主包中。dash_html_components提供与HTML标签对应的Python类。如html.Div对应HTML中的div标签。通过这些组件可轻松地构建页面结构/元素。dash_core_components提供更高级交互式组件如滑块、下拉菜单、图形等。常用交互组件组件说明示例代码dcc.Input创建一个文本输入框dcc.Input(idinput,typetext,placeholder请输入内容...)dcc.Dropdown创建一个下拉菜单dcc.Dropdown(iddropdown,options[{label:选项1,value:1}],value1)dcc.Slider创建一个滑块dcc.Slider(idslider,min0,max10,step1,value5)dcc.Graph创建一个交互式图表基于Plotly.jsdcc.Graph(idgraph,figure{data:[{x:[1,2,3],y:[4,1,2],type:bar}]})dcc.Textarea创建一个多行文本输入框dcc.Textarea(idtextarea,value请输入多行文本...)dcc.Checklist创建一个复选框列表dcc.Checklist(idchecklist,options[{label:选项1,value:1}],value[1])dcc.RadioItems创建一个单选按钮组dcc.RadioItems(idradio,options[{label:选项1,value:1}],value1)dcc.DatePickerSingle创建一个日期选择器单选dcc.DatePickerSingle(iddate-picker,date2023-10-01)dcc.DatePickerRange创建一个日期范围选择器dcc.DatePickerRange(iddate-range,start_date2023-10-01,end_date2023-10-07)dcc.Markdown渲染Markdown文本dcc.Markdown(#标题\n-列表项1)dcc.Store在客户端存储数据用于跨回调共享数据dcc.Store(idstore,data{key:value})dcc.Upload创建一个文件上传组件dcc.Upload(idupload,childrenhtml.Div(拖放或点击上传文件))dcc.Tabs创建选项卡组件dcc.Tabs(idtabs,children[dcc.Tab(label标签1,value1)])dcc.Tab创建单个选项卡需与dcc.Tabs配合使用dcc.Tab(label标签1,value1)dcc.Interval定时触发回调的组件dcc.Interval(idinterval,interval1000)dcc.Location用于管理URL的组件dcc.Location(idurl,pathname/)dcc.Link创建一个超链接用于页面导航需与dcc.Location配合使用dcc.Link(跳转到首页,href/)dcc.ConfirmDialog创建一个确认对话框dcc.ConfirmDialog(idconfirm,message确定要执行此操作吗)dcc.ConfirmDialogProvider提供一个确认对话框需与按钮等组件配合使用dcc.ConfirmDialogProvider(html.Button(删除),idconfirm-provider)dcc.Loading创建一个加载动画组件dcc.Loading(idloading,children[html.Div(加载中...)])dcc.Download用于触发文件下载的组件dcc.Download(iddownload)交互性通过回调函数Callback来实现的。回调函数允许你在用户与应用程序交互时动态更新页面内容。例如当用户选择一个下拉菜单选项时图表可以自动更新以显示相应的数据。回调函数通过app.callback装饰器来定义并指定输入和输出。输入通常是用户交互的组件如滑块、下拉菜单等而输出则是需要更新的组件如图表、文本等。回调函数一个典型的Dash回调函数包含以下几个部分输入Input指定哪些组件的属性变化会触发回调函数输出Output指定回调函数执行后哪些组件的属性会被更新状态State可选参数用于传递一些不会触发回调但需要在回调中使用的数据回调函数体包含实际的逻辑代码用于处理输入并生成输出工作原理输入与输出的绑定输入和输出是通过Input和Output对象来指定的。Input对象指定哪些组件的哪些属性变化会触发回调函数而Output对象指定回调函数执行后哪些组件的哪些属性会被更新。回调函数的触发当用户在界面上进行操作输入文本、点击按钮等时相关的组件属性会发生变化。Dash会检测到这些变化并自动调用与之绑定的回调函数。回调函数的执行回调函数执行时Dash会将输入属性的当前值作为参数传递给回调函数。回调函数根据这些输入值进行计算或处理并返回输出属性的新值。Dash会自动将返回的值更新到指定的组件属性中。高级用法多个输入与输出一个回调函数可以有多个输入和输出app.callback([Output(output-div-1,children),Output(output-div-2,children)],[Input(input-1,value),Input(input-2,value)])defupdate_outputs(input1,input2):returnfInput 1:{input1},fInput 2:{input2}回调函数update_outputs有两个输入和两个输出。当input-1或input-2的值发生变化时回调函数会被触发并更新两个输出组件的children属性。使用状态State有时候可能需要在回调函数中使用一些不会触发回调的数据。这时可使用State对象。State对象与Input对象类似但它不会触发回调函数。app.callback(Output(output-div,children),[Input(submit-button,n_clicks)],[State(input-text,value)])defupdate_output(n_clicks,input_value):ifn_clicksisNone:returnNo clicks yetreturnfButton clicked{n_clicks}times. Input:{input_value}n_clicks是触发回调的输入而input_value是回调函数中使用的状态。只有当按钮被点击时回调函数才会被触发但回调函数中可以使用输入框的当前值。防止回调函数重复执行在某些情况下回调函数可能会被频繁触发导致性能问题。为避免这种情况可使用dash.no_update来防止不必要的更新。app.callback(Output(output-div,children),[Input(input-text,value)])defupdate_output(input_value):ifnotinput_value:returndash.no_updatereturnfYou have entered:{input_value}如果输入框的值为空回调函数将不会更新输出组件。如果回调函数执行缓慢可考虑以下优化方法减少回调函数的计算量尽量避免在回调函数中进行复杂的计算使用缓存对于重复的计算结果可以使用缓存来减少计算时间异步回调对于长时间运行的任务可以使用异步回调来避免阻塞主线程实战安装pip install dash示例fromdashimportDash,dcc,html,Input,Output appDash(__name__)app.layouthtml.Div([dcc.Input(idinput,# 输入框ID用于回调函数value初始值,typetext#),# 用于显示输出html.Div(idoutput)])# 定义回调函数app.callback(Output(output,children),# 输出到id为output的Div的children属性Input(input,value)# 输入来自id为input的输入框的value属性)defupdate_output_div(input_value):returnf你输入了:{input_value}if__name____main__:app.run_server(debugTrue)运行程序浏览器打开http://localhost:8050在Jupyter Notebook中使用Dash需安装jupyter-dashpip install jupyter-dash。Dash Bootstrap Components提供Bootstrap风格的组件用于快速构建美观的布局安装pip install dash-bootstrap-components引入import dash_bootstrap_components as dbc。示例fromdashimportDash,htmlimportdash_bootstrap_componentsasdbc appDash(__name__,external_stylesheets[dbc.themes.BOOTSTRAP])app.layoutdbc.Container(children[dbc.Row(dbc.Col(html.H1(欢迎使用Dash Bootstrap,classNametext-center text-primary))),dbc.Row(dbc.Col(dbc.Card(children[dbc.CardHeader(卡片标题),dbc.CardBody(children[html.P(Bootstrap风格卡片,classNamecard-text)])],classNamemt-4# 设置外边距)))])if__name____main__:app.run_server(debugTrue)Dash DAQ是一个用于创建数据采集和控制应用的组件库提供丰富的样式组件安装pip install dash-daq。示例fromdashimportDash,htmlimportdash_daqasdaq appDash(__name__)app.layouthtml.Div(style{textAlign:center},children[daq.Thermometer(idthermometer,value25,min0,max100,label温度计,style{margin:20px}),daq.Gauge(idgauge,value50,min0,max100,label压力表,style{margin:20px})])if__name____main__:app.run_server(debugTrue)多页面布局在现代Web应用开发中单页面应用SPA和多页面应用MPA是两种常见的架构模式。单页面应用通常通过动态加载内容来提供流畅的用户体验而多页面应用则通过多个独立的页面来组织内容。在单页面应用中所有内容都在一个页面中动态加载和更新用户通过点击链接或按钮来切换不同的视图。优点是用户体验流畅页面加载速度快缺点是应用规模增大后代码结构变得复杂。多页面应用则通过多个独立的页面来组织内容每个页面都有自己的URL和布局。优点是代码结构清晰易于维护缺点是页面切换时会有一定的加载延迟。可通过dcc.Location和dcc.Link组件来实现多页面布局前者用于跟踪当前页面的URL后者用于在页面之间导航。结合回调函数可根据URL动态加载不同的页面内容。Plotly Studio官方提供的安装程序支持Windows、MacOS理念Vibe Analytics氛围分析。Hyperdiv官网开源GitHub934 Star31 Fork。用Python快速搞定浏览器端交互UI的神器。即时模式immediate‐mode语法几行代码就能渲染组件。内置Shoelace组件库、Markdown渲染支持、Chart.js图表、浏览器本地存储读写以及纯Python表单校验。功能/环节传统前端Hyperdiv组件库手动安装、导入内置Shoelace一行引入状态/渲染逻辑JS、异步/钩子Python立即模式函数里写就行Markdown支持单独库配置内置Mistune一行调用图表展示Chart.js对接代码内置Chart.jsAPI直观本地存储localStorageAPIPythonread/write封装好表单校验JS骚操作验证库Python内置校验逻辑都在一个地方安装pip install hyperdiv示例fromhyperdivimportapp,html,storage,form,chart# 表单classUserForm(form.Model):usernameform.TextField(min_length3)ageform.NumberField(min_value1)app.route(/)defindex():# 从本地存储读上一次输入datastorage.load(user_info)or{}form_uiUserForm(data)# 表单提交回调form_ui.on_submitdefhandle_submit(clean_data):storage.save(user_info,clean_data)chart_data{labels:[Age],datasets:[{data:[clean_data[age]]}]}returnhtml.div([html.h3(f你好{clean_data[username]}),chart.Bar(datachart_data)])# 页面布局returnhtml.div([html.h1(Hyperdiv 表单 图表 Demo),form_ui.render()])优点缺点Python全栈一致减少语言切换成本目前生态还小组件或插件有限即时模式写法清爽对超大规模复杂应用支持尚需验证内置常用组件Shoelace、Markdown、Chart浏览器兼容性待更多平台测试阅读/写入本地存储、表单校验一站式搞定文档、教程相对少新人上手有点陡峭零配置启动Demo看完就能上手高度定制化时可能需要写少量JS对比仅供参考维度GradioStreamlitDash开发效率3行代码生成完整界面需10行基础布局代码需20行配置式代码交互体验支持流式传输如视频逐帧预览仅支持页面刷新依赖回调函数响应较慢组件丰富度20专用AI组件画布、3D模型查看器15通用组件缺少AI专项优化依赖第三方插件扩展部署便捷性原生支持HuggingFace托管需手动配置Nginx反向代理需Docker容器化部署学习曲线1小时可上手3小时掌握基础功能需较长时间学习总结AI场景专精Gradio的gr.Image(typepil)、gr.Audio(sourcemicrophone)等组件深度适配ML需求而Streamlit更侧重数据可视化如数据密集型的仪表盘或数据分析性能优势Gradio的增量更新技术仅刷新变化区域比Streamlit全页面刷新快3倍以上生态壁垒Dash依赖Plotly生态Gradio直接集成PyTorch/TensorFlow更适合AI开发者参考大模型导论菜鸟教程