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

崖雪松

官网：https://streamlit.io/github：https://github.com/streamlit/streamlitAPI参考：https://docs.streamlit.io/library/api-reference最全Streamlit教程：https://juejin.cn/column/7265946243196436520Streamlit-中文文档：https://github.com/wanghanbinpanda/Streamlit-Documentation-Chinese/blob/main/README.md1、PythonwebGUI框架Gradio、Streamlit、Dash、nicegui框架对比：Gradio、Streamlit和Dash：https://zhuanlan.zhihu.com/p/611828558在机器学习领域，针对已经训练好的模型创建一个快速的Demo通常是必要的，下面是快速创建机器学习应用的几个框架：gradio、streamit 和 dash 进行简单的对比。gradiostreamitdash主要使用场景可交互小Demo工作流、DashBoardDashBoard、生产环境的复杂演示应用上手难度简单简单中等组件丰富度低高高综合扩展性低中高JupyterNotebook内支持是否是是否完全开源是是部分企业级功能未开源githubstars13.4k23.1k18.2k案例列表GitHub-gradio-app/awesome-demos:linksandstatusofcoolgradiodemosAppGallery•StreamlitDashEnterprise2、nicegui官网：https://nicegui.io/github：https://github.com/zauberzeug/nicegui/nicegui中文文档：nicegui-reference-cn：https://zhuanlan.zhihu.com/p/661187865在Python3.10及更高版本中，collections模块被重构，MutableMapping已经被弃用。安装：pipinstallniceguiNiceGUI基于FastAPI，封装了Quasar、Vue、TailwindCSS、AGGrid、ECharts等，可以用来快速开发web或桌面程序。示例代码fromniceguiimportuiui.icon('thumb_up')ui.markdown('Thisis**Markdown**.')ui.html('ThisisHTML.')withui.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('NiceGUIonGitHub','https://github.com/zauberzeug/nicegui')ui.run()执行结果示例：fromniceguiimportuiui.label('HelloNiceGUI!')ui.button('BUTTON',on_click=lambda:ui.notify('buttonwaspressed'))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、AGGrid(大数据)  3、图表  4、ApacheEChart  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、streamlitstreamlit 简介Streamlit 是Python可视化web神器，是一个开箱即用的工具集，可以让开发者免于学习繁杂的前端知识，仅需几行代码就可以轻松、快速的构建一个简洁、优雅、令人惊叹的可视化 webapp应用。用于机器学习、数据可视化。当快速搭建一个webapp的时候Streamlit 绝对是开发神器。Streamlit 工作流程：https://docs.streamlit.io/get-started/fundamentals/summaryStreamlit应用程序是从上到下运行的Python脚本对于用户的每一次交互，整个脚本从头到尾执行一遍当脚本执行时，Streamlit在浏览器中实时绘制其输出Streamlit 使用缓存来避免重复请求数据或重复计算每次用户与小部件交互时脚本都会重新执行，在该运行期间该小组件的输出值将重新设置。Streamlit应用可以包含多个页面，这些页面在pages文件夹中的单独.py文件中定义。简单使用安装：pipinstall-ihttps://pypi.douban.com/simple streamlitStreamlit提供了一些入门示例，执行命令即可：streamlithello执行后会自动打开浏览器加载一个本地页面http://localhost:8501/这里面有很多的demo，可以看下这些Demo还有对应的配套代码。代码直接拷贝保存，就可以在本地直接通过如下命令直接运行：streamlitrunst-demo.pyStreamlit 使用速查表Install&Import 安装和导入Commandline 命令行Pre-releasefeatures 预发布功能Magiccommands 魔术命令Displaytext 显示文本Displaydata 显示数据Displaymedia 显示媒体Displaycharts 显示图表Addwidgetstosidebar将小部件添加到侧边栏Columns 列Tabs 制表符Controlflow 控制流Displayinteractivewidgets显示交互式小部件Buildchat-basedapps 构建基于聊天的应用Mutatedata 更改数据Displaycode 显示代码Placeholders,help,andoptions占位符、帮助和选项Connecttodatasources连接到数据源Optimizeperformance 优化性能Cachedataobjects 缓存数据对象怎么运行Streamlit ：https://docs.streamlit.io/knowledge-base/using-streamlit/how-do-i-run-my-streamlit-script运行streamlit 方法：(Ctrl+ c 结束运行 )方法1：streamlitrunyour_script.py[--scriptargs]方法2：streamlitrunhttps://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streamlit_app.py方法3：python-mstreamlitrunyour_script.py方法4：streamlitrunyour_script.pyimportsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstclidefmy_web_app():#markdownst.markdown('Streamlitmarkdown')st.header('StreamlitDemo')defmain():ifruntime.exists():my_web_app()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()Python 直接执行：pythontemp_test.py浏览器中直接访问 URL Markdown文本导入streamlit后，就可以直接使用st.markdown()初始化，调用不同的方法，就可以往文档对象中填入内容st.title()：文章大st.header()：一级st.subheader()：二级st.text()：文本st.code()：代码，同时可设置代码的语言，显示的时候会高亮st.latex()：latex公式st.caption()：小字体文本示例：importstreamlitasst#markdownst.markdown('StreamlitDemo')#设置网页st.title('一个傻瓜式构建可视化web的Python神器--streamlit')#展示一级st.header('1.安装')st.text('和安装其他包一样，安装streamlit非常简单，一条命令即可')code1='''pip3installstreamlit'''st.code(code1,language='bash')#展示一级st.header('2.使用')#展示二级st.subheader('2.1生成Markdown文档')#纯文本st.text('导入streamlit后，就可以直接使用st.markdown()初始化')#展示代码，有高亮效果code2='''importstreamlitasstst.markdown('StreamlitDemo')'''st.code(code2,language='python')Streamlit运行的方式与普通的脚本有所不同，命令行执行：streamlitrunst-demo.py数据图表关于数据的展示，streamlit由两个组件进行支持table：普通的表格，用于静态数据的展示dataframe：高级的表格，可以进行数据的操作，比如排序表格Table的示例df=pd.DataFrame(np.random.randn(10,5),columns=('第%d列'%(i+1)foriinrange(5)))st.table(df)Datafram的示例df=pd.DataFrame(np.random.randn(10,5),columns=('第%d列'%(i+1)foriinrange(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","9mph","-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),columns=['a','b','c'])st.line_chart(chart_data)面积图chart_data=pd.DataFrame(np.random.randn(20,3),columns=['a','b','c'])st.area_chart(chart_data)柱状图chart_data=pd.DataFrame(np.random.randn(50,3),columns=["a","b","c"])st.bar_chart(chart_data)地图df=pd.DataFrame(np.random.randn(1000,2)/[50,50]+[37.76,-122.4],columns=['lat','lon'])st.map(df)外部图表组件Streamlit的一些原生图表组件，虽然做到了傻瓜式，但仅能输入数据、高度和宽度，如果你想更漂亮的图表，就像matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz那样，streamlit也提供了支持：st.pyplotst.bokeh_chartst.altair_chartst.altair_chartst.vega_lite_chartst.plotly_chartst.pydeck_chartst.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源码里的注释即可。页面之间数据共享SessionState是Streamlit中用于在不同页面之间传递和保存状态数据的一种机制。通过SessionState，我们可以在应用程序的整个生命周期中维护和访问特定于会话的变量。这意味着我们可以在不同页面之间共享和使用相同的变量值，从而实现多页面之间的交互和数据传递。优点：简单易用：Streamlit的SessionState机制使得在不同页面之间传递和保存状态数据变得非常简单。只需使用字典来存储和访问状态数据，无需复杂的配置或额外的库。跨页面数据共享：通过SessionState，我们可以在应用程序的整个生命周期中保存和访问特定于会话的变量。这使得在多个页面之间共享数据变得轻松，可以传递复杂的数据结构，如字典、列表等。可扩展性：使用SessionState，我们可以轻松地在应用程序中添加新的页面，并在不同页面之间保持数据的一致性。这使得应用程序更易于管理和维护，可以随着需求的增长进行扩展和修改。状态持久化：通过Streamlit的SessionState机制，我们可以在刷新应用程序或重新运行应用程序时保留状态数据。这对于用户来说非常方便，他们可以在应用程序的不同会话之间保持他们的工作状态。缺点：内存消耗：由于SessionState数据存储在内存中，当应用程序的状态数据变得庞大时，内存消耗可能会较大。这可能会限制应用程序的可伸缩性和性能。无持久化方案：SessionState数据存储在应用程序的内存中，并且仅在应用程序运行期间存在。因此，当应用程序停止运行或重新启动时，SessionState数据将丢失。如果需要长期存储数据，需要使用其他机制，如数据库或文件系统。难以调试：由于SessionState是在应用程序的多个页面之间传递和共享数据，当出现问题时，追踪和调试可能会比较困难。特别是在复杂的多页面应用程序中，正确地处理和管理SessionState变量可能会变得复杂。多页面方法1：通过 pages 文件夹(推荐)官网 多页 文档：https://docs.streamlit.io/library/advanced-features/multipage-apps在单个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运行streamlitrunmain_page.py多页应用的文档将教你如何向应用添加页面，包括如何定义页面、构建和运行多页应用以及在页面之间导航。了解基础知识后，创建您的第一个多页应用程序！main.py，在页面显示 main。( 可以改成 Home.py，在页面可以显示 Home)importsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstclidefmy_web_app():st.set_page_config(page_title="Hello",page_icon="👋",)st.write("#WelcometoStreamlit!👋")st.sidebar.success("Selectademoabove.")st.markdown("""Streamlitisanopen-sourceappframeworkbuiltspecificallyforMachineLearningandDataScienceprojects.**👈Selectademofromthesidebar**toseesomeexamplesofwhatStreamlitcando!###Wanttolearnmore?-Checkout[streamlit.io](https://streamlit.io)-Jumpintoour[documentation](https://docs.streamlit.io)-Askaquestioninour[communityforums](https://discuss.streamlit.io)###Seemorecomplexdemos-Useaneuralnetto[analyzetheUdacitySelf-drivingCarImageDataset](https://github.com/streamlit/demo-self-driving)-Explorea[NewYorkCityridesharedataset](https://github.com/streamlit/demo-uber-nyc-pickups)""")defmain():ifruntime.exists():my_web_app()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()创建多个页面可以通过在每个Python文件的开头添加数字来更改MPA中页面的顺序。如果我们在文件名的前面添加一个1，Streamlit会将该文件放在列表中的第一位。每个Streamlit应用程序的名称由文件名决定，更改应用程序名称时，需要更改文件名！可以通过在文件名中添加表情符号来为我们的应用程序增添一些乐趣，这些表情符号将在我们的Streamlit应用程序中呈现。每个页面都有自己的URL，由文件名定义。效果如图：pages/1_📈_Plotting_Demo.pyimportstreamlitasstimporttimeimportnumpyasnpst.set_page_config(page_title="PlottingDemo",page_icon="📈")st.markdown("#PlottingDemo")st.sidebar.header("PlottingDemo")st.write("""ThisdemoillustratesacombinationofplottingandanimationwithStreamlit.We'regeneratingabunchofrandomnumbersinaloopforaround5seconds.Enjoy!""")progress_bar=st.sidebar.progress(0)status_text=st.sidebar.empty()last_rows=np.random.randn(1,1)chart=st.line_chart(last_rows)foriinrange(1,101):new_rows=last_rows[-1,:]+np.random.randn(5,1).cumsum(axis=0)status_text.text("%i%%Complete"%i)chart.add_rows(new_rows)progress_bar.progress(i)last_rows=new_rowstime.sleep(0.05)progress_bar.empty()#Streamlitwidgetsautomaticallyrunthescriptfromtoptobottom.Since#thisbuttonisnotconnectedtoanyotherlogic,itjustcausesaplain#rerun.st.button("Re-run")pages/2_🌍_Mapping_Demo.pyimportstreamlitasstimportpandasaspdimportpydeckaspdkfromurllib.errorimportURLErrorst.set_page_config(page_title="MappingDemo",page_icon="🌍")st.markdown("#MappingDemo")st.sidebar.header("MappingDemo")st.write("""Thisdemoshowshowtouse[`st.pydeck_chart`](https://docs.streamlit.io/library/api-reference/charts/st.pydeck_chart)todisplaygeospatialdata.""")@st.cache_datadeffrom_data_file(filename):url=("http://raw.githubusercontent.com/streamlit/""example-data/master/hello/v1/%s"%filename)returnpd.read_json(url)try:ALL_LAYERS={"BikeRentals":pdk.Layer("HexagonLayer",data=from_data_file("bike_rental_stats.json"),get_position=["lon","lat"],radius=200,elevation_scale=4,elevation_range=[0,1000],extruded=True,),"BartStopExits":pdk.Layer("ScatterplotLayer",data=from_data_file("bart_stop_stats.json"),get_position=["lon","lat"],get_color=[200,30,0,160],get_radius="[exits]",radius_scale=0.05,),"BartStopNames":pdk.Layer("TextLayer",data=from_data_file("bart_stop_stats.json"),get_position=["lon","lat"],get_text="name",get_color=[0,0,0,200],get_size=15,get_alignment_baseline="'bottom'",),"OutboundFlow":pdk.Layer("ArcLayer",data=from_data_file("bart_path_stats.json"),get_source_position=["lon","lat"],get_target_position=["lon2","lat2"],get_source_color=[200,30,0,160],get_target_color=[200,30,0,160],auto_highlight=True,width_scale=0.0001,get_width="outbound",width_min_pixels=3,width_max_pixels=30,),}st.sidebar.markdown("###MapLayers")selected_layers=[layerforlayer_name,layerinALL_LAYERS.items()ifst.sidebar.checkbox(layer_name,True)]ifselected_layers:st.pydeck_chart(pdk.Deck(map_style="mapbox://styles/mapbox/light-v9",initial_view_state={"latitude":37.76,"longitude":-122.4,"zoom":11,"pitch":50,},layers=selected_layers,))else:st.error("Pleasechooseatleastonelayerabove.")exceptURLErrorase:st.error("""**Thisdemorequiresinternetaccess.**Connectionerror:%s"""%e.reason)pages/3_📊_DataFrame_Demo.pyimportstreamlitasstimportpandasaspdimportaltairasaltfromurllib.errorimportURLErrorst.set_page_config(page_title="DataFrameDemo",page_icon="📊")st.markdown("#DataFrameDemo")st.sidebar.header("DataFrameDemo")st.write("""Thisdemoshowshowtouse`st.write`tovisualizePandasDataFrames.(Datacourtesyofthe[UNDataExplorer](http://data.un.org/Explorer.aspx).)""")@st.cache_datadefget_UN_data():AWS_BUCKET_URL="http://streamlit-demo-data.s3-us-west-2.amazonaws.com"df=pd.read_csv(AWS_BUCKET_URL+"/agri.csv.gz")returndf.set_index("Region")try:df=get_UN_data()countries=st.multiselect("Choosecountries",list(df.index),["China","UnitedStatesofAmerica"])ifnotcountries:st.error("Pleaseselectatleastonecountry.")else:data=df.loc[countries]data/=1000000.0st.write("###GrossAgriculturalProduction($B)",data.sort_index())data=data.T.reset_index()data=pd.melt(data,id_vars=["index"]).rename(columns={"index":"year","value":"GrossAgriculturalProduct($B)"})chart=(alt.Chart(data).mark_area(opacity=0.3).encode(x="year:T",y=alt.Y("GrossAgriculturalProduct($B)",stack=None),color="Region:N",))st.altair_chart(chart,use_container_width=True)exceptURLErrorase:st.error("""**Thisdemorequiresinternetaccess.**Connectionerror:%s"""%e.reason)注意：page 支持 magiccommands.页面支持保存时运行。此外，当您保存页面时，这会导致当前正在查看该页面的用户重新运行。添加或删除页面会导致UI立即更新。更新边栏中的页面不会重新运行脚本。st.set_page_config 在页面级别工作。当您使用st.set_page_config设置或图标时，这仅适用于当前页面。页面在全局范围内共享相同的Python模块：#page1.pyimportfoofoo.hello=123#page2.pyimportfoost.write(foo.hello)#如果page1已经执行,这里将会输出123页面共享相同的  st.session_state:#page1.pyimportstreamlitasstif"shared"notinst.session_state:st.session_state["shared"]=True#page2.pyimportstreamlitasstst.write(st.session_state["shared"])#Ifpage1alreadyexecuted,thisshouldwriteTrue方法2：通过函数中的 ifelse在使用SessionState构建多页面应用之前，让我们先了解一下多页面应用的基本结构。一个典型的多页面应用通常包括以下几个组成部分：导航栏：用于切换页面的导航栏，可以是按钮、链接或下拉菜单等形式。页面内容：不同页面的具体内容和功能模块，可以通过导航栏进行切换。状态管理：保持和管理不同页面之间的状态数据，确保用户在切换页面时数据不会丢失。importsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstclidefmy_web_app():#设置初始页面为Homesession_state=st.session_statesession_state['page']='Home'#导航栏page=st.sidebar.radio('Navigate',['Home','About'])ifpage=='Home':st.title('HomePage')#在Home页面中显示数据和功能组件elifpage=='About':st.title('AboutPage')#在About页面中显示数据和功能组件defmain():ifruntime.exists():my_web_app()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()方法3：通过 函数如果页面内容构建的太过复杂，单纯的if-else语句已经无法满足应用的构建需求，这时候可以使用函数来构建。importsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstclidefpage_home():st.title('HomePage')#在Home页面中显示数据和功能组件defpage_about():st.title('AboutPage')#在About页面中显示数据和功能组件defmy_web_app():#设置初始页面为Homesession_state=st.session_stateif'page'notinsession_state:session_state['page']='Home'#导航栏page=st.sidebar.radio('Navigate',['Home','About'])ifpage=='Home':page_home()elifpage=='About':page_about()defmain():ifruntime.exists():my_web_app()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()组件/控件如何使用组件，首先找到要使用的组件。两个很好的组件库：组件库：https://streamlit.io/components在这个帖子找 Thisthread例如，要使用出色的AgGrid组件，首先安装：pipinstallstreamlit-aggridfromst_aggridimportAgGridimportpandasaspddf=pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv')AgGrid(df)执行命令：streamlitrunexample.py组件API参考Displayalmostanything 显示几乎任何东西Textelements 文本元素Dataelements 数据元素Chartelements 图表元素Inputwidgets 输入小部件Mediaelements 媒体元素Layoutsandcontainers 布局和容器Chatelements 聊天元素Displayprogressandstatus显示进度和状态Controlflow 控制流Developertools 开发人员工具Utilities 公用事业Mutatecharts 变异图表Statemanagement 状态管理Connectionsanddatabases连接和数据库Performance 性能Connectionsanddatabases连接和数据库Setupyourconnection 设置连接Built-inconnections 内置连接Third-partyconnections 第三方连接Personalization 个性化Apptesting 应用测试高级功能Appmenu 应用程序菜单Buttonbehaviorandexamples按钮行为和示例Caching 缓存Command-lineoptions 命令行选项Configuration 配置Theming 主题Connectingtodata 连接到数据Dataframes 数据帧Forms 形式Multipageapps 多页应用Addstatefulnesstoapps 为应用添加状态Widgetbehavior 小组件行为Pre-releasefeatures 预发布功能Workingwithtimezones 使用时区Staticfileserving 静态文件服务HTTPSsupport HTTPS支持Secretsmanagement 机密管理Securityreminders 安全提醒Apptesting 应用测试用户登录Streamlit-Authenticator：https://github.com/mkhorasani/Streamlit-Authenticatorpypi：https://pypi.org/project/streamlit-authenticator/一个安全身份验证模块，用于验证Streamlit应用程序中的用户凭据。更多使用方法参看 githubimportstreamlitasstimportstreamlit_authenticatorasstauthdeflogin_success():container=st.container()#createaprompttextforthetextgenerationprompt_text=st.text_area(label="用户命令输入",height=100,placeholder="请在这儿输入您的命令")#其他语句...defmain():#用户信息，后续可以来自DBnames=['普通用户','管理员']#用户名usernames=['user_king','user_admin']#登录名passwords=['user_king_passwd','user_admin_passwd']#登录密码#对密码进行加密操作，后续将这个存放在credentials中hashed_passwords=stauth.Hasher(passwords).generate()#定义字典，初始化字典credentials={'usernames':{}}#生成服务器端的用户身份凭证信息foriinrange(0,len(names)):credentials['usernames'][usernames[i]]={'name':names[i],'password':hashed_passwords[i]}authenticator=stauth.Authenticate(credentials,'some_cookie_name','some_signature_key',cookie_expiry_days=0)name,authentication_status,username=authenticator.login('Login','main')ifauthentication_status:#登录成功login_success()elifnotauthentication_status:#登录失败st.error('Username/passwordisincorrect')elifauthentication_statusisNone:#未输入登录信息st.warning('Pleaseenteryourusernameandpassword')if__name__=="__main__":main()使用Streamlit进行Web应用程序开发多媒体组件/控件想要在页面上播放图片、音频和视频，可以使用streamlit的这三个组件：st.imagest.audiost.video状态组件状态组件用来向用户展示当前程序的运行状态，包括：progress：进度条，如游戏加载进度spinner：等待提示balloons：页面底部飘气球，表示祝贺error：显示错误信息warning：显示报警信息info：显示常规信息success：显示成功信息exception：显示异常信息（代码错误栈）页面布局Streamlit是自上而下渲染的，组件在页面上的排列顺序与代码的执行顺序一致。一个精美的webapp，只有上下单栏式的布局肯定是不够的。实际上streamlit还提供了多种多样的布局：st.sidebar：侧边栏。侧边栏可以做一些用户操作控件st.columns：列容器，处在同一个columns内组件，按照从左至右顺序展示st.expander：隐藏信息，点击后可展开展示详细内容，如：展示更多st.container：包含多组件的容器st.empty：包含单组件的容器容器：st.sidebar侧边栏Streamlit提供了强大的st.sidebar组件。借助于这个组件，可以轻松地将小部件（widgets）放置在应用页面的侧边栏位置。将交互元素添加至侧边栏。可以使用对象表示法（objectnotation）或者with语法将元素添加到st.sidebar。两者的效果是一样的，只是语法不同。以下是两种添加元素的方式：#使用对象表示法st.sidebar.[element_name]#"with"语法withst.sidebar:st.[element_name]通过将元素添加至st.sidebar，这些元素会被固定在侧边栏的左侧，让用户可以轻松地浏览和交互。示例：在侧边栏添加选择框和单选按钮importstreamlitasst#使用对象表示法添加选择框add_selectbox=st.sidebar.selectbox("您希望如何联系您？",("电子邮件","家庭电话","移动电话"))#使用“with”语法添加单选按钮withst.sidebar:add_radio=st.radio("选择一种运输方式",("标准（5-15天）","快递（2-5天）"))侧边栏是可调整大小的！拖放侧边栏的右边框以调整其大小！不支持使用对象表示法的唯一元素是 st.echo 、 st.spinner 和 st.toast 。若要使用这些元素，必须使用 with 表示法。以下是如何在侧边栏中添加st.echo和st.spinner的示例：importstreamlitasstimporttimewithst.sidebar:withst.echo():st.write("这段代码将在侧边栏中显示。")withst.spinner("加载中..."):time.sleep(5)st.success("完成！")通过充分利用st.sidebar，您可以将交互元素整齐地组织在应用的侧边栏，提供更加直观和便捷的用户体验。容器：st.columns并排多列 st.columns返回一个容器对象的列表，可以在这些容器对象中添加元素。每个对象都可以用来添加元素。您可以选择使用“with”语法（更推荐）或者直接在容器对象上调用方法来添加元素。以下是示例代码：importsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstclideflayout_column():col1,col2,col3=st.columns(3)withcol1:st.header("一只猫")st.image("https://static.streamlit.io/examples/cat.jpg")withcol2:st.header("一只狗")st.image("https://static.streamlit.io/examples/dog.jpg")withcol3:st.header("一只猫头鹰")st.image("https://static.streamlit.io/examples/owl.jpg")defmain():ifruntime.exists():#layout_sidebar()layout_column()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()按百分比设置列大小，在容器对象上调用方法：importstreamlitasstimportnumpyasnpcol1,col2=st.columns([3,1])data=np.random.randn(10,1)col1.subheader("一个宽容器，含有图表")col1.line_chart(data)col2.subheader("一个窄容器，含有数据")col2.write(data)列不能放在边栏中的其他列中。只能在应用程序的主要区域进行。列只能放置在其他列中，最多嵌套一个级别。也就是说，您可以将多个容器放置在主要内容区域内，但不能将多元素容器嵌套在其他多元素容器内。此外，请注意，不能将多元素容器嵌套在侧边栏的容器内，这只能在应用程序的主要区域中实现。通过合理地运用st.columns，您可以轻松地实现并排布局的多元素容器，提供更清晰和直观的界面效果，增强用户体验。容器：st.tabs-选项卡布局importsysimportstreamlitasstfromstreamlitimportruntimefromstreamlit.webimportcliasstcliimportnumpyasnpdeflayout_tab():tab1,tab2,tab3,tab4,tab5,tab6=st.tabs(["猫","狗","猫头鹰","测试多列","图表","数据"])data=np.random.randn(10,1)withtab1:st.header("一只猫")st.image("https://static.streamlit.io/examples/cat.jpg",width=200)withtab2:st.header("一只狗")st.image("https://static.streamlit.io/examples/dog.jpg",width=200)withtab3:st.header("一只猫头鹰")st.image("https://static.streamlit.io/examples/owl.jpg",width=200)withtab4:col1,col2,col3,col4=st.columns(4)col1.header("col1")col2.header("col2")col3.header("col3")col4.header("col4")withtab5:tab5.subheader("一个带有图表的选项卡")tab5.line_chart(data)withtab6:tab6.subheader("一个带有数据的选项卡")tab6.write(data)defmain():ifruntime.exists():#layout_sidebar()layout_tab()else:sys.argv=["streamlit","run",sys.argv[0]]sys.exit(stcli.main())if__name__=='__main__':main()条件渲染的注意事项：需要注意的是，每个选项卡的所有内容都会被一次性发送并渲染在前端，目前不支持条件渲染。这意味着无论用户是否查看某个选项卡，所有内容都会被加载和渲染。在设计应用时，请确保选项卡内的内容在逻辑上是相关的，避免出现不必要的数据传输和渲染。容器：st.expander展开/折叠当内容相对较多时。Streamlit提供了st.expander组件，可以在应用程序中插入一个可展开或折叠的容器，用来承载多个元素。用户可以点击展开或折叠容器，以便在需要时查看更多内容，同时保持界面的整洁性。通过调用st.expander，您可以插入一个可展开或折叠的容器，用于包含多个元素。容器的初始状态是折叠的，只显示提供的标签。用户可以点击标签来展开容器，查看其中的内容。同样，您可以选择使用“with”语法或者直接在容器对象上调用方法来添加元素。需要注意的是，目前不支持将st.expander嵌套在另一个st.expander内。importstreamlitasstst.bar_chart({"data":[1,5,2,6,2,1]})withst.expander("查看说明"):st.write("""上面的图表展示了我为您选择的一些数字。这些数字是通过真实的骰子摇出来的，所以它们*保证*是随机的。""")st.image("https://static.streamlit.io/examples/dice.jpg")也可以直接在容器对象上调用方法：importstreamlitasstst.bar_chart({"data":[1,5,2,6,2,1]})expander=st.expander("查看说明")expander.write("""上面的图表展示了我为您选择的一些数字。这些数字是通过真实的骰子摇出来的，所以它们*保证*是随机的。""")expander.image("https://static.streamlit.io/examples/dice.jpg")目前不支持将st.expander嵌套在另一个st.expander内。如果需要多层次的展开/折叠功能，您可以使用其他布局组件进行组合。容器：st.container插入多元素通过调用st.container，您可以插入一个不可见的容器，用于承载多个元素。与之前一样，您可以选择使用“with”语法或者直接在容器对象上调用方法来添加元素。需要注意的是，容器内的内容对用户来说是不可见的，但可以对元素进行管理和组织。importstreamlitasstimportnumpyasnpwithst.container():st.write("这是容器内的内容")#您可以调用任何Streamlit命令，包括自定义组件：st.bar_chart(np.random.randn(50,3))st.write("这是容器外的内容")无序插入元素：importstreamlitasstcontainer=st.container(border=True)container.write("Thisisinsidethecontainer")st.write("Thisisoutsidethecontainer")#Nowinsertsomemoreinthecontainercontainer.write("Thisisinsidetoo")容器：st.empty插入单元素在开发应用程序时，有时您可能需要动态地插入、替换或清除单个元素，以实现更灵活的内容展示。Streamlit提供了st.empty组件，可以插入一个单元素容器，用于承载一个元素。这使您可以在任何时候动态地操作单个元素，实现更多样化的界面效果。通过调用st.empty，您可以插入一个单元素容器，用于承载一个元素。与之前一样，您可以选择使用“with”语法或者直接在容器对象上调用方法来添加、替换或清除元素。importstreamlitasstimporttimewithst.empty():forsecondsinrange(60):st.write(f"⏳已过去{seconds}秒")time.sleep(1)st.write("✔️1分钟结束！")替换多个元素，然后清除它们：importtimeimportstreamlitasstplaceholder=st.empty()#Replacetheplaceholderwithsometext:placeholder.text("Hello")#Replacethetextwithachart:placeholder.line_chart({"data":[1,5,2,6]})time.sleep(5)#Replacethechartwithseveralelements:withplaceholder.container():st.write("Thisisoneelement")st.write("Thisisanother")#Clearallthoseelements:placeholder.empty()流程 控制Streamlit是自上而下逐步渲染出来的，若你的应用场景需要对渲染做一些控制，streamlit也有提供对应的方法st.stop：可以让Streamlit应用停止而不向下执行，如：验证码通过后，再向下运行展示后续内容。st.form：表单，Streamlit在某个组件有交互后就会重新执行页面程序，而有时候需要等一组组件都完成交互后再刷新（如：登录填用户名和密码），这时候就需要将这些组件添加到form中st.form_submit_button：在form中使用，提交表单。缓存特性提升速度当用户在页面上做一些操作的时候，比如输入数据，都会触发整个streamlit应用代码的重新执行，如果其中有读取外部数据的步骤（数GB的数据），那这种性能损耗是非常可怕的。但streamlit提供了一个缓存装饰器，当要重新执行代码渲染页面的时候，就会先去缓存里查一下，如果代码或者数据没有发生变化，就直接调用缓存的结果即可。使用方法也简单，在需要缓存的函数加上@st.cache装饰器即可。DATE_COLUMN='date/time'DATA_URL=('https://s3-us-west-2.amazonaws.com/''streamlit-demo-data/uber-raw-data-sep14.csv.gz')@st.cachedefload_data(nrows):data=pd.read_csv(DATA_URL,nrows=nrows)lowercase=lambdax:str(x).lower()data.rename(lowercase,axis='columns',inplace=True)data[DATE_COLUMN]=pd.to_datetime(data[DATE_COLUMN])returndata部署并web访问在本地编写的streamlit应用，运行起来后只能在本地访问。如果需要让别人也能访问这个应用，那你需要有一台服务器，这样才能通过公网ip进行访问Streamlit基础Streamlit主要概念开发流程数据流显示和设置数据样式使用magic写入数据帧绘制图表和地图绘制折线图绘制地图Widgets组件/控件使用复选框显示/隐藏数据使用选择框布局显示进度设置主题Streamlit 高级概念Caching缓存SessionState会话状态Whatisasession?什么是会话ExamplesofusingSessionState使用会话状态的示例Connections连接Streamlit其他功能Theming 主题Pages 页面Staticfileserving 静态文件服务Apptesting 应用测试高级功能Advancedfeatures 高级功能⋮Appmenu ⋮应用程序菜单Command-lineoptions 命令行选项Streamlitconfiguration Streamlit配置Theming 主题Caching 缓存Addstatefulnesstoapps为应用添加状态Pre-releasefeatures 预发布功能Secretsmanagement 机密管理Workingwithtimezones 使用时区Advancednotesonwidgetbehavior有关小部件行为的高级说明官网教程创建应用Createyourfirstapp创建你的第一个应用Fetchsomedata 获取一些数据Effortlesscaching 轻松缓存How'sitwork? 它是如何工作的？Inspecttherawdata检查原始数据Drawahistogram 绘制直方图Plotdataonamap在地图上绘制数据Filterresultswithaslider使用滑块筛选结果Useabuttontotoggledata使用按钮切换数据Let'sputitalltogether让我们把它们放在一起Shareyourapp 共享应用Gethelp 获取帮助创建多页应用Motivation 赋予动机Convertanexistingappintoamultipageapp将现有应用转换为多页应用Createtheentrypointfile创建入口点文件Createmultiplepages 创建多个页面Runthemultipageapp运行多页应用Nextsteps 后续步骤知识库Connecttodatasources 连接到数据源DeployStreamlitapps 部署Streamlit应用程序SessionStatebasics 会话状态基础知识BuildabasicLLMchatapp构建基本的LLM聊天应用程序BuildanLLMappusingLangChain使用LangChain构建LLM应用程序使用StreamlitSanitychecks 健全性检查Batchelementsandinputwidgetswith st.form批处理元素和输入小部件 st.formHowdoIrunmyStreamlitscript?如何运行我的Streamlit脚本？HowcanImakeStreamlitwatchforchangesinothermodulesI'mimportinginmyapp?如何让Streamlit监视我在应用程序中导入的其他模块的变化？WhatbrowsersdoesStreamlitsupport?Streamlit支持哪些浏览器？WhatisthepathofStreamlit’s config.toml file?Streamlit config.toml 的文件路径是什么？Wheredoesst.file_uploaderstoreuploadedfilesandwhendotheygetdeleted?st.file_uploader将上传的文件存储在哪里，何时删除？Howdoyouretrievethefilenameofafileuploadedwithst.file_uploader?如何检索使用st.file_uploader上传的文件的文件名？Howtoremove"·Streamlit"fromtheapptitle?如何删除“·Streamlit“从应用程序？HowtodownloadafileinStreamlit?如何在Streamlit中下载文件？HowtodownloadaPandasDataFrameasaCSV?如何将PandasDataFrame下载为CSV？HowdoIgetdataframerow-selectionsfromauser?如何从用户那里获取数据帧行选择？HowcanImake st.pydeck_chart usecustomMapboxstyles?如何使用 st.pydeck_chart 自定义Mapbox样式？Howtoinsertelementsoutoforder?如何无序插入元素？Howtoanimateelements?如何为元素制作动画？Appenddatatoatableorchart将数据追加到表格或图表HowdoIupgradetothelatestversionofStreamlit?如何升级到最新版本的Streamlit？Widgetupdatingforeverysecondinputwhenusingsessionstate使用会话状态时每秒更新一次小组件HowdoIcreateananchorlink?如何创建锚链接？HowdoIenablecameraaccess?如何启用相机访问？WhydoesStreamlitrestrictnested st.columns?为什么Streamlit限制嵌套 st.columns ？HowtohoststaticfilesinStreamlit?如何在Streamlit中托管静态文件？Whatisserializablesessionstate?什么是可序列化会话状态？官网30天学Streamlit：https://30days.streamlit.app/?challenge=Day14、低代码PythonWeb框架官网文档：https://pywebio.readthedocs.io/zh-cn/latest/PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出，将浏览器变成了一个“富文本终端”，可以用于构建简单的Web应用或基于浏览器的GUI应用。使用PyWebIO，开发者能像编写终端脚本一样(基于input和print进行交互)来编写应用，无需具备HTML和JS的相关知识；PyWebIO还可以方便地整合进现有的Web服务。非常适合快速构建对UI要求不高的应用。特性使用同步而不是基于回调的方式获取输入，代码编写逻辑更自然非声明式布局，布局方式简单高效代码侵入性小，旧脚本代码仅需修改输入输出逻辑便可改造为Web服务支持整合到现有的Web服务，目前支持与Flask、Django、Tornado、aiohttp、FastAPI(Starlette)框架集成同时支持基于线程的执行模型和基于协程的执行模型支持结合第三方库实现数据可视化安装：pip3install-Upywebio使用手册User’sguide输入输出RunapplicationMoreaboutPyWebIOLastbutnotleastpywebio.input —输入模块函数清单函数文档pywebio.output —输出模块函数清单输出域Scope内容输出其他交互布局与样式pywebio.session —会话相关pywebio.platform —应用部署DirectoryDeployApplicationDeploy其他pywebio.pin —持续性输入OverviewPinwidgetsPinutils高级特性使用start_server()启动多应用与Web框架整合基于协程的会话第三方库生态构建stand-aloneApp数据可视化Cookbook