Streamlit应用中构建多页面(三):两种方案(下)

简介: Streamlit应用中构建多页面(三):两种方案

3.3 页面在用户界面中的标签和排序方式 📑🔢


页面在侧边栏用户界面中的标签是根据文件名生成的。现在我们来学习一下构成页面有效文件名的要素,页面如何显示在侧边栏中,以及页面如何排序。

下表展示了文件名示例及其在侧边栏中的标签,按照它们在侧边栏中出现的顺序进行排序。

文件名 显示标签
1 - first page.py first page
12 monkeys.py monkeys
123.py 123
123_hello_dear_world.py hello dear world
_12 monkeys.py 12 monkeys


⭐小贴士: 你可以使用表情符号使页面名称更有趣!例如,名为 🏠_Home.py 的文件将在侧边栏中创建一个名为 “🏠 Home” 的页面。


3.4 现在我们来实现一个多页面应用


1.在与入口文件(Hello.py)相同的目录中创建一个新的文件夹,命名为 pages。

2.将我们的入口文件重命名为 Hello.py,这样在侧边栏中的标题将被大写。

3.在刚创建的 pages 文件夹中,创建三个新的文件:

pages/1_📈_Plotting_Demo.py

pages/2_🌍_Mapping_Demo.py

pages/3_📊_DataFrame_Demo.py

4.运行以下命令,以查看您新转换的多页应用程序:

streamlit run Hello.py

Hello.py


import streamlit as st
st.set_page_config(
    page_title="你好",
    page_icon="👋",
)
st.write("# 欢迎使用 Streamlit! 👋")
st.sidebar.success("在上方选择一个演示。")
st.markdown(
    """
    Streamlit 是一个专为机器学习和数据科学项目而构建的开源应用框架。
    **👈 从侧边栏选择一个演示**,看看 Streamlit 能做什么吧!
    ### 想了解更多吗?
    - 查看 [streamlit.io](https://streamlit.io)
    - 阅读我们的 [文档](https://docs.streamlit.io)
    - 在我们的 [社区论坛](https://discuss.streamlit.io) 提问
    ### 查看更复杂的示例
    - 使用神经网络来 [分析 Udacity 自动驾驶汽车图像数据集](https://github.com/streamlit/demo-self-driving)
    - 探索一个 [纽约市乘车数据集](https://github.com/streamlit/demo-uber-nyc-pickups)
"""
)



pages/1_📈_Plotting_Demo.py

import streamlit as st
import time
import numpy as np
st.set_page_config(page_title="绘图演示", page_icon="📈")
st.markdown("# 绘图演示")
st.sidebar.header("绘图演示")
st.write(
    """这个演示展示了 Streamlit 的绘图和动画组合。我们在一个循环中生成一些随机数大约5秒钟。希望你喜欢!"""
)
progress_bar = st.sidebar.progress(0)
status_text = st.sidebar.empty()
last_rows = np.random.randn(1, 1)
chart = st.line_chart(last_rows)
for i in range(1, 101):
    new_rows = last_rows[-1, :] + np.random.randn(5, 1).cumsum(axis=0)
    status_text.text("完成%i%%" % i)
    chart.add_rows(new_rows)
    progress_bar.progress(i)
    last_rows = new_rows
    time.sleep(0.05)
progress_bar.empty()
# Streamlit 的部件会自动按顺序运行脚本。由于此按钮与任何其他逻辑都没有连接,因此它只会引起简单的重新运行。
st.button("重新运行")


pages/2_🌍_Mapping_Demo.py


import streamlit as st
import pandas as pd
import pydeck as pdk
from urllib.error import URLError
st.set_page_config(page_title="Mapping Demo", page_icon="🌍")
st.markdown("# Mapping Demo")
st.sidebar.header("Mapping Demo")
st.write(
    """This demo shows how to use
[`st.pydeck_chart`](https://docs.streamlit.io/library/api-reference/charts/st.pydeck_chart)
to display geospatial data."""
)
@st.cache_data
def from_data_file(filename):
    url = (
        "http://raw.githubusercontent.com/streamlit/"
        "example-data/master/hello/v1/%s" % filename
    )
    return pd.read_json(url)
try:
    ALL_LAYERS = {
        "Bike Rentals": 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,
        ),
        "Bart Stop Exits": 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,
        ),
        "Bart Stop Names": 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'",
        ),
        "Outbound Flow": 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("### Map Layers")
    selected_layers = [
        layer
        for layer_name, layer in ALL_LAYERS.items()
        if st.sidebar.checkbox(layer_name, True)
    ]
    if selected_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("Please choose at least one layer above.")
except URLError as e:
    st.error(
        """
        **This demo requires internet access.**
        Connection error: %s
    """
        % e.reason
    )

pages/3_📊_DataFrame_Demo.py

import streamlit as st
import pandas as pd
import altair as alt
from urllib.error import URLError
st.set_page_config(page_title="DataFrame Demo", page_icon="📊")
st.markdown("# DataFrame Demo")
st.sidebar.header("DataFrame Demo")
st.write(
    """This demo shows how to use `st.write` to visualize Pandas DataFrames.
(Data courtesy of the [UN Data Explorer](http://data.un.org/Explorer.aspx).)"""
)
@st.cache_data
def get_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")
    return df.set_index("Region")
try:
    df = get_UN_data()
    countries = st.multiselect(
        "Choose countries", list(df.index), ["China", "United States of America"]
    )
    if not countries:
        st.error("Please select at least one country.")
    else:
        data = df.loc[countries]
        data /= 1000000.0
        st.write("### Gross Agricultural Production ($B)", data.sort_index())
        data = data.T.reset_index()
        data = pd.melt(data, id_vars=["index"]).rename(
            columns={"index": "year", "value": "Gross Agricultural Product ($B)"}
        )
        chart = (
            alt.Chart(data)
            .mark_area(opacity=0.3)
            .encode(
                x="year:T",
                y=alt.Y("Gross Agricultural Product ($B):Q", stack=None),
                color="Region:N",
            )
        )
        st.altair_chart(chart, use_container_width=True)
except URLError as e:
    st.error(
        """
        **This demo requires internet access.**
        Connection error: %s
    """
        % e.reason
    )

4 结语


至此,两种streamlit的多页面的方案介绍完毕,感谢您阅读本篇博文!如果您对数据可视化和交互式应用程序感兴趣,我们邀请您关注我们的博客,以获取更多关于 Streamlit 和数据科学的有趣内容。您可以在我们的网站上了解更多细节,并发现更多有趣的示例和应用。


让我们一起探索数据世界的魅力,让数据在 Streamlit 的引领下展现出令人惊叹的效果!📈🚀


感谢您的阅读和关注!

1691409019600.jpg


相关文章
|
存储 设计模式 前端开发
Streamlit应用中构建多页面(三):两种方案(上)
Streamlit应用中构建多页面(三):两种方案
3173 0
|
4月前
|
数据可视化 前端开发 数据安全/隐私保护
Streamlit快速构建数据应用程序
【10月更文挑战第21天】Streamlit 是一个开源的 Python 库,用于快速构建数据应用程序。它简化了数据可视化的开发过程,允许用户通过简单的 Python 脚本创建交互式应用,而无需编写复杂的前端代码。本文介绍了 Streamlit 的基本概念、安装方法、示例应用的创建、扩展功能及部署方法,展示了其在 Python 可视化领域的潜力和优势。
140 1
|
7月前
|
机器学习/深度学习 数据可视化 数据挖掘
构建可复用的 Jupyter 模板和插件:提高工作效率的最佳实践
【8月更文第29天】Jupyter Notebook 是一个广泛使用的交互式计算环境,支持多种编程语言。它不仅用于数据分析、可视化和机器学习项目,也是教学和科研的理想工具。然而,随着使用频率的增加,重复编写相似的代码和设置变得既耗时又低效。通过创建可复用的 Jupyter 模板和插件,我们可以显著提高工作效率。
182 1
|
7月前
|
数据可视化 Unix Linux
LangChain 构建问题之可视化智能代理对游戏的生成过程如何解决
LangChain 构建问题之可视化智能代理对游戏的生成过程如何解决
53 0
|
10月前
|
机器学习/深度学习 JavaScript 前端开发
机器学习模型部署:使用Python和Vue搭建用户友好的预测界面
【4月更文挑战第10天】本文介绍了如何使用Python和Vue.js构建机器学习模型预测界面。Python作为机器学习的首选语言,结合Vue.js的前端框架,能有效部署模型并提供直观的预测服务。步骤包括:1) 使用Python训练模型并保存;2) 创建Python后端应用提供API接口;3) 利用Vue CLI构建前端项目;4) 设计Vue组件实现用户界面;5) 前后端交互通过HTTP请求;6) 优化用户体验;7) 全面测试并部署。这种技术组合为机器学习模型的实用化提供了高效解决方案,未来有望更加智能和个性化。
935 1
|
Web App开发 JavaScript 前端开发
如何使用浏览器自动化框架Playwright开发“万媒易发”实现多平台自动发布文章?
作为一名程序员和开发者,我深知在多个媒体平台手动发布和管理文章的痛苦。因此,我决定使用Playwright浏览器自动化框架,开发一款名为“万媒易发”的工具,实现多平台自动发布文章。下面我将分享这款工具的开发过程和成果,希望能对大家有所启发和帮助。
|
数据库
深入理解Streamlit中的按钮行为(四):示例与最佳实践(上)
深入理解Streamlit中的按钮行为(四):示例与最佳实践
3115 0
|
机器学习/深度学习 开发工具 计算机视觉
舌体分割的初步展示应用——依托Streamlit搭建demo
舌体分割的初步展示应用——依托Streamlit搭建demo
285 0
|
数据库 索引
深入理解Streamlit中的按钮行为(四):示例与最佳实践(下)
深入理解Streamlit中的按钮行为(四):示例与最佳实践
2848 0
|
应用服务中间件 Linux Serverless
搭建Vue3组件库:第十四章 使用Vercel部署在线文档
介绍如何使用Vercel来部署我们的在线文档
544 0
搭建Vue3组件库:第十四章 使用Vercel部署在线文档