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应用中构建多页面(三):两种方案
3796 0
|
定位技术
Streamlit的第一个应用(二)(下)
Streamlit的第一个应用(二)
447 0
|
机器学习/深度学习 前端开发 数据可视化
神奇的streamlit (哇 原来深度学习还可以这样玩)
神奇的streamlit (哇 原来深度学习还可以这样玩)
神奇的streamlit (哇 原来深度学习还可以这样玩)
|
存储 缓存 数据可视化
(七)解析Streamlit的数据元素:探索st.dataframe、st.data_editor、st.column_config、st.table、st.metric和st.json的神奇之处(上)
(七)解析Streamlit的数据元素:探索st.dataframe、st.data_editor、st.column_config、st.table、st.metric和st.json的神奇之处
6276 0
|
10月前
|
机器学习/深度学习 人工智能 数据处理
[python 技巧] 快速掌握Streamlit: python快速原型开发工具
本文旨在快速上手python的streamlit库,包括安装,输入数据,绘制图表,基础控件,进度条,免费部署。
1019 64
[python 技巧] 快速掌握Streamlit: python快速原型开发工具
|
11月前
|
数据可视化 前端开发 数据安全/隐私保护
Streamlit快速构建数据应用程序
【10月更文挑战第21天】Streamlit 是一个开源的 Python 库,用于快速构建数据应用程序。它简化了数据可视化的开发过程,允许用户通过简单的 Python 脚本创建交互式应用,而无需编写复杂的前端代码。本文介绍了 Streamlit 的基本概念、安装方法、示例应用的创建、扩展功能及部署方法,展示了其在 Python 可视化领域的潜力和优势。
|
JSON JavaScript Linux
绘图框架 plotly 知识点补充(绘制子图,图表保存)
绘图框架 plotly 知识点补充(绘制子图,图表保存)
515 13
|
数据可视化 前端开发 数据挖掘
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
数据分析可视化神器---streamlit框架,各种图表绘制,布局以及生产综合案例剖析
2303 0
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
981 0
|
API 文件存储
使用Streamlit创建AutoGen用户界面
AutoGen作为一个最大化LLM(如GPT-4)能力的框架而脱颖而出。由微软研究院开发的AutoGen通过提供一种自动化、优化和编排工作流的方法,简化了复杂的、基于多代理llm的应用程序的创建。我们在以前的文章中也有过介绍,你可以与许多GPT交谈,并且GPT和GPT之间也可以互相交谈。每个GPT都是它自己的“代理”,并在总体业务流程中扮演特殊角色。但是AutoGen是用命令行模式进行交互的,这对我们的输入来说非常不方便,所以这次我们来对其进行改造,使用Streamlit创建一个web界面,这样可以让我们更好的与其交互。
624 1