Streamlit多页应用开发指南

在开发大型应用时,将内容分割到不同的网页中是十分必要的。Streamlit提供了多种方式来实现这一点,包括使用st.selectboxst.radio组件。最近,Streamlit引入了一种新的技术,使得创建多页应用变得更加高效。本文将探讨Streamlit多页功能的所有细节,包括如何使用它以及它的优缺点。将从本文中学到许多东西,所以请泡一杯茶,慢慢阅读。

Streamlit项目结构

要创建Streamlit的多页应用,需要维护一个项目结构。需要创建一个名为pages的目录,并将所有包含设计网页代码的Python文件放入此文件夹中,除了主脚本。下图将更清楚地说明这一点。

项目目录结构如下:

my_app ├── my_app.py <-- 主脚本 └── pages ├── page_no_2.py <-- 第二页! └── page_no_3.py <-- 第三页!

要运行应用,只需要运行主脚本:

streamlit run my_app.py

现在有一个问题——该如何安排网页?Streamlit会根据在pages目录中的Python文件位置来排序页面。也可以通过在文件名中添加页码和下划线来指定页面的顺序,如下所示:

my_app ├── my_app.py <-- 主脚本 └── pages ├── 02_page_no_2.py <-- 新的第二页! └── 03_page_no_3.py

创建多页Streamlit应用

让通过一个演示来更好地理解。这里正在为黑巧克力分析制作一个仪表板。如果想知道分析是如何进行的,可以点击。本文只使用Streamlit制作仪表板。记住在Tableau中是如何制作故事的吗?添加工作表或仪表板到故事中,然后通过点击顶部的标签来导航。看看下面的GIF,就会明白意思。

Streamlit中,将构建与GIF中描述的相同结构。不是添加工作表或仪表板,而是添加Python文件。确信现在已经明白将在这里构建什么了。那么,让开始吧!

创建主页面

在查看可视化之前,每个人都想知道问题是什么以及在分析中取得了什么成果。所以,在主页面让他们知道这一点。以下是main_page.py文件的代码。

import streamlit as st st.title("寻找最佳巧克力 🍫") st.write("""在这里,将通过分析一个包含来自不同国家的2500多块纯黑巧克力评分的数据集来展示发现。数据集从[这里](http://flavorsofcacao.com/chocolate_database.html)收集。""") st.markdown( """ ### 💾 数据: **列名**|**描述** -----|----- |ref| 评论的编号| |Company (Manufacturer)| 巧克力条制造商的名称| |Company Location| 制造商的位置| |Review Date| 从2006年到2021年| |Country of Bean Origin| 可可豆的原产国| |Specific Bean Origin or Bar Name| 巧克力条的名称| |Cocoa Percentage| 巧克力条的可可含量 (%)| |Ingredients| B (豆), S (糖), S* (除糖或甜菜糖以外的甜味剂), C(可可脂), (V) 香草, (L) 卵磷脂, (Sa) 盐 |Most Memorable Characteristics| 巧克力条最难忘的特点总结 |Ratings| 1.0-1.9 不愉快,2.0-2.9 令人失望,3.0-3.49 推荐,3.5-3.9 高度推荐,4.0-5.0 杰出 """ ) st.text("") st.markdown( """ ### 💪 挑战: ##### 在这里创建一个报告,总结研究,包括: - 原产国的平均评分是多少? - 这些国家各自评审了多少块巧克力? - 哪块巧克力获得了好的平均评分? - 哪家制造商获得了好的平均评分? - 可可含量与评分的关系如何?评分高于3.5的巧克力条的平均可可含量是多少? - 研究表明,一些消费者想要避免含有卵磷脂的巧克力条。 比较含有和不含有卵磷脂(L在成分中)的巧克力条的平均评分。 """ ) st.set_page_config(page_title="主页面", page_icon="🍫")

在这里使用了一些表情符号,使网站更具吸引力。根据用例制作了这个页面。建议自己尝试,而不是完全复制代码,以获得更好的理解。如果再次运行上述代码,会在主页面看到下面的输出。

创建第二页

现在让在第二页创建一个仪表板。在这里,使用PlotlyPython库进行交互式可视化。也可以使用其他库,如Matplotlib,但建议使用Plotly,因为这个库使图表更具吸引力,并且使这些图表更加可定制。

没有在这些页面上包含所有代码。为可视化代码创建了一个单独的文件,以便代码看起来更干净,在编辑时可以更容易地进行。在这里不解释可视化,因为本文的主要目的是解释Streamlit中的多页应用。如果想了解更多,请查看代码。在这里实现了所有功能。

以下是第二页的代码。

import streamlit as st from functions import FirstPageFuncs st.set_page_config(layout='wide', page_title='最佳巧克力', page_icon='🤗') st.title("哪块巧克力有好的平均评分,以及那块巧克力的特点是什么?") st.write( """ 在这里,发现哪块巧克力条获得了最高的平均评分。还发现为什么这块巧克力如此受欢迎。 """ ) col_0_0, col_0_1 = st.columns([1.25, 1]) col_1_0, col_1_1 = st.columns([1, 1]) fpf = FirstPageFuncs() figure_1 = fpf.best_chocolates() figure_2 = fpf.most_common_company_location() figure_3 = fpf.most_commonly_used_ingredients() figure_4 = fpf.most_memorable_taste() col_0_0.plotly_chart(figure_1, use_container_width=True) col_0_1.plotly_chart(figure_2, use_container_width=True) col_1_0.plotly_chart(figure_3, use_container_width=True) col_1_1.plotly_chart(figure_4, use_container_width=True) st.markdown( """ 从上述结果中,可以清楚地看到,名为**Kokoa Kamili**的巧克力获得了最高的平均评分(左上)。这种巧克力大多在美国制造(右上),最常用的成分是**豆,糖和可可脂**。有时,不使用**可可脂**(左下)。这种巧克力主要是因为其**果味**而受欢迎(右下)。 """ )
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485