1. 引言

Streamlit是一個(gè)用于機(jī)器學(xué)習(xí)聪全、數(shù)據(jù)可視化的 Python 框架熏矿，它能幾行代碼就構(gòu)建出一個(gè)精美的在線 app 應(yīng)用制轰。Streamlit 會監(jiān)視每次保存和更新的更改，并在編碼時(shí)可視化您的輸出均澳。代碼從上到下運(yùn)行恨溜，始終從干凈狀態(tài)開始，不需要回調(diào)找前。這是一個(gè)簡單而強(qiáng)大的應(yīng)用程序模型糟袁，可讓您以驚人的速度構(gòu)建豐富的 UI。

數(shù)據(jù)分析與機(jī)器學(xué)習(xí)過程中經(jīng)常遇到過一個(gè)需求場景——自己實(shí)現(xiàn)了一個(gè)算法功能躺盛，然后希望團(tuán)隊(duì)內(nèi)的其他成員（都在一個(gè)內(nèi)網(wǎng)中）可以無門檻地直接使用你的算法功能项戴，從而加速整個(gè)團(tuán)隊(duì)的工作效率。很顯然槽惫，Web 應(yīng)用是實(shí)現(xiàn)這個(gè)需求的一個(gè)很好的途徑周叮。但是想要實(shí)現(xiàn)一個(gè)低代碼、美觀程度尚可界斜、擁有緩存機(jī)制的前端應(yīng)用往往都需要不少的時(shí)間适掰。如何在較短時(shí)間（5-10分鐘內(nèi)）快速實(shí)現(xiàn)一個(gè)滿足上述要求的 Web 應(yīng)用呢结窘？

Python 中的 streamlit 和 gradio 給出了答案恭金。這兩個(gè)框架就是為了給沒有前端經(jīng)驗(yàn)的深度學(xué)習(xí)算法工程師一個(gè)好用的框架工具鳞仙，能夠在極短時(shí)間內(nèi)根據(jù)自己的算法快速構(gòu)建一個(gè) Web 應(yīng)用君躺。

streamlit 和 gradio 的使用和運(yùn)行邏輯不太一致。個(gè)人更加喜歡 streamlit 的編寫方式开缎，更加直觀棕叫。所以這篇文章只介紹 streamlit 的使用方式，希望使用 gradio 的朋友可以直接移步他們的官方：

• gradio 官網(wǎng)
• streamlit 官網(wǎng)

streamlit UI控件使用大全（快速查詢表）

2. 環(huán)境準(zhǔn)備與快速上手

2.1環(huán)境準(zhǔn)備

在正式開始前抡四，需要先安裝一下streamlit。
為了有一個(gè)干凈的環(huán)境仗谆，可以創(chuàng)建一個(gè)python虛擬環(huán)境來安裝指巡。具體代碼類似如下：

conda create -n streamlit python=3.11.8
conda activate streamlit
pip install streamlit

(streamlit) C:\streamlit>pip list
Package                   Version
------------------------- -----------
altair                    5.3.0
attrs                     23.2.0
blinker                   1.8.2
cachetools                5.3.3
certifi                   2024.7.4
charset-normalizer        3.3.2
click                     8.1.7
colorama                  0.4.6
fqdn                      1.5.1
gitdb                     4.0.11
GitPython                 3.1.43
idna                      3.7
isoduration               20.11.0
Jinja2                    3.1.4
jsonschema                4.23.0
jsonschema-specifications 2023.12.1
markdown-it-py            3.0.0
MarkupSafe                2.1.5
mdurl                     0.1.2
numpy                     2.0.0
packaging                 24.1
pandas                    2.2.2
pillow                    10.4.0
pip                       24.0
protobuf                  5.27.2
pyarrow                   16.1.0
pydeck                    0.9.1
Pygments                  2.18.0
python-dateutil           2.9.0.post0
pytz                      2024.1
referencing               0.35.1
requests                  2.32.3
rich                      13.7.1
rpds-py                   0.19.0
setuptools                69.5.1
six                       1.16.0
smmap                     5.0.1
streamlit                 1.36.0
tenacity                  8.5.0
toml                      0.10.2
toolz                     0.12.1
tornado                   6.4.1
typing_extensions         4.12.2
tzdata                    2024.1
uri-template              1.3.0
urllib3                   2.2.2
watchdog                  4.0.1
webcolors                 1.13
wheel                     0.43.0

可以看到，除了streamlit包本身外隶垮，還安裝了大量第三方常用包藻雪，如 numpy、pandas狸吞、markdown等相關(guān)包勉耀。

2.2 快速上手

先創(chuàng)建一個(gè)簡單的app.py：

import streamlit as st 

# 設(shè)置全局屬性
st.set_page_config(
    page_title='頁面標(biāo)題',
    page_icon='☆☆☆',
    layout='wide'
)
# 正文
st.title('hello world')
st.markdown('> Streamlit 支持通過 st.markdown 直接渲染 markdown')

打開命令行指煎，運(yùn)行：

$ streamlit run app.py

在虛擬環(huán)境的終端上運(yùn)行上面的代碼，類似如下：

(streamlit) PS F:\streamlit> streamlit run app.py
  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.2.23.231:8501

這個(gè)命令會自動打開瀏覽器的一個(gè)標(biāo)簽頁便斥，該服務(wù)默認(rèn)以8501為端口至壤。

如果8501被占用， streamlit會往后遍歷枢纠，直到找到可用端口為止像街。開啟的服務(wù)默認(rèn)可以在內(nèi)網(wǎng)上所有的計(jì)算機(jī)上訪問。
如下晋渺，已經(jīng)將圖中的各項(xiàng)說明和代碼的對應(yīng)標(biāo)注好了：

樣例圖.png

3. Streamist 運(yùn)行邏輯

當(dāng)運(yùn)行streamlit run app.py時(shí)镰绎，主程序并不是app.py，而是 streamlit 啟動腳本木西，它負(fù)責(zé)讀取app.py畴栖，然后根據(jù)其中的內(nèi)容渲染出頁面（HTML）和對應(yīng)的邏輯（JavaScript），一個(gè)簡化的模型如下：

邏輯結(jié)構(gòu)圖

每當(dāng)運(yùn)行 app.py 時(shí)八千，streamlit都會逐行執(zhí)行app.py中的代碼吗讶，遇到了streamlit的方法時(shí)，streamlit就會將這句話翻譯成前端的 HTML + JavaScript 去渲染頁面叼丑；如果是正常的 python 語句关翎，那么就交給 python 解釋器去執(zhí)行扛门。所以我非常喜歡streamlit的邏輯鸠信，因?yàn)榭梢酝耆凑照５倪壿嬋ゾ帉懣梢凿秩境銮岸隧撁娴膽?yīng)用。

需要注意的是论寨，每當(dāng)網(wǎng)頁上發(fā)生事件響應(yīng)星立，比如有人點(diǎn)擊了按鈕，上傳了文件葬凳，修改了單選框的選項(xiàng)等等绰垂，streamlit就會去重新執(zhí)行app.py。在這里app.py顯然是以一個(gè)靜態(tài)資源的形式存在的火焰，因此你可以隨意修改劲装，畢竟每次觸發(fā)事件streamlit都會重新運(yùn)行app.py。因此昌简，從設(shè)計(jì)上占业，streamlit就是熱更新，這一點(diǎn)與gradio很不一樣纯赎。

4. Streamlit布局

4.1 columns--列容器

以并列方式插入容器谦疾。插入若干并排排列的多元素容器，并返回一個(gè)容器對象列表犬金。
要在返回的容器中添加元素念恍，可以使用 with 符號（首選）或直接調(diào)用返回對象的方法六剥。請參見下面的示例。
列只能放置在其他列的內(nèi)部峰伙，最多只能嵌套一級疗疟。

可以使用 with 符號向列中插入任何元素：

import streamlit as st 
//設(shè)定3列
col1, col2, col3 = st.columns(3) 
//設(shè)定不同的列標(biāo)題和展示的內(nèi)容
with col1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg") 
with col2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg") 
with col3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg")

可以在創(chuàng)建column的同時(shí)指定列寬比例，也可以直接調(diào)用返回對象的方法而不是使用with：

import streamlit as st
import numpy as np

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)

文末有源碼瞳氓，需要源碼文件可以留言發(fā)郵箱

通過多次使用同規(guī)格的cokumns對象秃嗜，制作網(wǎng)格：

import streamlit as st
#設(shè)置行列
row1 = st.columns(3)
row2 = st.columns(3)
#遍歷行列，并設(shè)置每一個(gè)容器的高度信息顿膨，寬度信息沒有設(shè)定
for col in row1 + row2:
    tile = col.container(height=120)
#插入一個(gè)表情
    tile.title(":balloon:")

image.png

4.2 container --多元素容器

container ：多元素容器锅锨。在應(yīng)用程序中插入一個(gè)不可見的容器，用于容納多個(gè)元素恋沃。例如必搞，這樣您就可以在應(yīng)用程序中不按順序插入多個(gè)元素。

要向返回的容器中添加元素囊咏，可以使用 with 符號（首選）恕洲，或者直接調(diào)用返回對象的方法。請看下面的示例梅割。

#導(dǎo)入app包
import streamlit as st
import numpy as np
#對容器進(jìn)行設(shè)定霜第，這個(gè)就是用with，
with st.container():
   st.write("This is inside the container")

   # 可用于接受 "類文件 "對象的任何地方：
   st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")

用Chrome瀏覽器打開

也可以不按順序插入對象户辞，這時(shí)就需要使用命令容器泌类，在需要的任何地方，將指定的容器中插入相應(yīng)對象底燎。

# 導(dǎo)入app包
import streamlit as st
import numpy as np

# 對容器進(jìn)行設(shè)定刃榨，這個(gè)就是用with，
c1=st.container()

with c1:
    st.write("This is inside the container")

    # 可用于接受 "類文件 "對象的任何地方：
    st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")
c1.write("This is inside the container the second time!")

用Chrome瀏覽器打開

這里會遇到報(bào)錯(cuò)双仍，如下圖：

image.png

這個(gè)錯(cuò)誤是由于瀏覽器兼容性問題枢希，如果你用的是chrome朱沃，那不會報(bào)錯(cuò)苞轿，如果像我一樣用的搜狗瀏覽器就會報(bào)錯(cuò)。

在設(shè)置了容器的高度后逗物，如果是長內(nèi)容搬卒，則顯示為帶滾動條的容器：

# 選擇一個(gè)文本信息，用于裝入下面的容器
long_text = "Lorem ipsum. " * 1000

# 這里我們設(shè)定一個(gè)高度為300的容器
with st.container(height=300):
    st.markdown(long_text)

長內(nèi)容是滾動條形式

4.3 【dialog】---模式對話框容器

st.dialog用于創(chuàng)建模式對話框的函數(shù)裝飾器敬察。

使用 @st.dialog 裝飾的函數(shù)將成為對話框函數(shù)秀睛。調(diào)用對話框函數(shù)時(shí)，Streamlit 會在應(yīng)用程序中插入一個(gè)模式對話框莲祸。在對話框函數(shù)中調(diào)用的 Streamlit 元素命令會在模式對話框中呈現(xiàn)蹂安。對話框函數(shù)在調(diào)用時(shí)可以接受參數(shù)椭迎。需要從更廣泛的應(yīng)用程序中訪問的對話框中的任何值通常都應(yīng)存儲在會話狀態(tài)中。

用戶可以通過點(diǎn)擊模式對話框外側(cè)田盈、點(diǎn)擊右上角的 "X "或按鍵盤上的 "ESC "鍵來解除模式對話框畜号。解除模式對話框不會觸發(fā)應(yīng)用程序的重新運(yùn)行。要以編程方式關(guān)閉模態(tài)對話框允瞧，請?jiān)趯υ捒蚝瘮?shù)中明確調(diào)用 st.rerun()简软。

st.dialog 繼承了 st.experimental_fragment 的行為。當(dāng)用戶與對話框函數(shù)內(nèi)創(chuàng)建的輸入部件交互時(shí)述暂，Streamlit 只重新運(yùn)行對話框函數(shù)痹升，而不是整個(gè)腳本。

要注意的是畦韭，不支持在對話框函數(shù)中調(diào)用 st.sidebar疼蛾。

對話框代碼可以與會話狀態(tài)、導(dǎo)入模塊以及在對話框外創(chuàng)建的其他 Streamlit 元素交互艺配。請注意察郁，這些交互會在多個(gè)對話框重新運(yùn)行時(shí)疊加。您需要負(fù)責(zé)處理該行為的任何副作用转唉。

下面的示例演示了 @st.dialog 的基本用法皮钠。在此應(yīng)用程序中，點(diǎn)擊 "A "或 "B "將打開一個(gè)模式對話框赠法，提示您輸入投票原因麦轰。在模式對話框中，點(diǎn)擊 "提交 "將您的投票記錄到會話狀態(tài)并重新運(yùn)行應(yīng)用程序期虾。這將關(guān)閉模式對話框原朝，因?yàn)樵谥匦逻\(yùn)行全腳本時(shí)不會調(diào)用對話框功能驯嘱。

import streamlit as st
 
#先設(shè)定一個(gè)標(biāo)題
#@st.experimental_dialog("Cast your vote")
#Please replace st.experimental_dialog with st.dialog.
#st.experimental_dialog will be removed after 2025-01-01.
@st.dialog("Cast your vote") 
#定義一個(gè)投票系統(tǒng)
def vote(item):
#寫入問題镶苞，
    st.write(f"Why is {item} your favorite?")
    reason = st.text_input("Because...")
#這里如果點(diǎn)擊發(fā)送就會展示
    if st.button("Submit"):
        st.session_state.vote = {"item": item, "reason": reason}
        st.rerun()
#這里定義初始界面，進(jìn)行分析
if "vote" not in st.session_state:
    st.write("Vote for your favorite")
    if st.button("A"):
        vote("A")
    if st.button("B"):
        vote("B")
#這里我們將結(jié)果輸入出你選的內(nèi)容鞠评，并通過輸入的的原因展示出來
else:
    f"You voted for {st.session_state.vote['item']} because {st.session_state.vote['reason']}"

選擇A或B之后

結(jié)果

4.4 empty--單元素容器

【empty】在應(yīng)用程序中插入一個(gè)容器茂蚓，用于容納單個(gè)元素。這樣剃幌，您就可以在任意位置移除元素聋涨，或同時(shí)替換多個(gè)元素（使用子多元素容器）。
要在返回的容器中插入/替換/清除元素负乡，可以使用符號或直接調(diào)用返回對象的方法牍白。請看下面的示例。

使用符號就地重寫元素：

import streamlit as st
import time
 
with st.empty():
    for seconds in range(60):
        st.write(f"? {seconds} seconds have passed")
        time.sleep(1)
    st.write("?? 1 minute over!")

容器中元素的替換與清除：

import streamlit as st
import time
placeholder = st.empty() 
# 用一些文本替換占位符：
placeholder.text("Hello")
time.sleep(1)
# 用圖表替換文本：(這句好像有點(diǎn)問題抖棘，用chrome不報(bào)錯(cuò)茂腥。是瀏覽器兼容問題）
placeholder.line_chart({"data": [1, 5, 2, 6]}) 
# 用幾個(gè)元素替換圖表：
with placeholder.container():
    st.write("This is one element")
    st.write("This is another")
    time.sleep(1)
    time.sleep(1)
 
# 清除所有這些元素：
placeholder.empty()

image.png

4.5 expander--可展開/折疊的多元素容器

在應(yīng)用程序中插入一個(gè)可容納多個(gè)元素的容器狸涌，用戶可以展開或折疊該容器。折疊時(shí)最岗，可見的只是提供的標(biāo)簽帕胆。

要向返回的容器中添加元素，可以使用 with 符號（首選）或直接調(diào)用返回對象的方法般渡。請看下面的示例懒豹。

import streamlit as st
#插入一個(gè)圖表
st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
 
#設(shè)定一個(gè)擴(kuò)張器在圖表中
with st.expander("See explanation"):
    st.write('''
        The chart above shows some numbers I picked for you.
        I rolled actual dice for these, so they're *guaranteed* to
        be random.
    ''')
    st.image("https://static.streamlit.io/examples/dice.jpg")

image.png

或者，你也可以直接調(diào)用返回對象的方法：這種方法比較好驯用，因?yàn)椴恍枰獡?dān)心對齊的問題脸秽，可以直接對expender進(jìn)行寫入。下面代碼通過命名對象操作蝴乔，實(shí)現(xiàn)同樣的效果豹储。

import streamlit as st
 
st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
 
expander = st.expander("See explanation")
expander.write('''
    The chart above shows some numbers I picked for you.
    I rolled actual dice for these, so they're *guaranteed* to
    be random.
''')
expander.image("https://static.streamlit.io/examples/dice.jpg")

可以獲得同樣的效果

4.6 popover--彈出式容器

popover插入一個(gè)多元素容器作為彈出窗口。它由一個(gè)類似按鈕的元素和一個(gè)在點(diǎn)擊按鈕時(shí)打開的容器組成淘这。

打開和關(guān)閉彈出窗口不會觸發(fā)重新運(yùn)行剥扣。與打開的彈出窗口內(nèi)的部件進(jìn)行交互將重新運(yùn)行應(yīng)用程序，同時(shí)保持彈出窗口打開铝穷。點(diǎn)擊彈出窗口外的部件將關(guān)閉彈出窗口钠怯。

要在返回的容器中添加元素，可以使用 "with "符號（首選）曙聂，或者直接調(diào)用返回對象的方法晦炊。請參閱下面的示例。

import streamlit as st 
#用with 進(jìn)行寫入
with st.popover("Open popover"):
    st.markdown("Hello World  ")
    name = st.text_input("What's your name?")
 
#不在內(nèi)部寫入
st.write("Your name:", name)

輸入信息

顯示結(jié)果

也可以直接調(diào)用返回對象的方法：

import streamlit as st
 
popover = st.popover("Filter items")
red = popover.checkbox("Show red items.", True)
blue = popover.checkbox("Show blue items.", True)
 
if red:
    st.write(":red[This is a red item.]")
if blue:
    st.write(":blue[This is a blue item.]")

這里的:red["****"]宁脊、:blue["****"]断国，可以控制文本的顏色

4.7 sidebar--側(cè)邊欄

不僅可以使用部件為應(yīng)用程序添加交互性，還可以將它們組織到側(cè)邊欄中榆苞∥瘸模可以使用對象符號和符號將元素傳遞給 st.sidebar。
以下兩個(gè)代碼段是等價(jià)的：

# Object notation
st.sidebar.[element_name]

# "with" notation
with st.sidebar:
    st.[element_name]

傳遞給 st.sidebar 的每個(gè)元素都會固定在左側(cè)坐漏，讓用戶專注于應(yīng)用程序中的內(nèi)容薄疚。

提示
側(cè)邊欄可以調(diào)整大小赊琳！拖放側(cè)邊欄的右邊界即可調(diào)整其大薪重病！??

下面舉例說明如何在側(cè)邊欄中添加選擇框和單選按鈕：

import streamlit as st 
# Using object notation
add_selectbox = st.sidebar.selectbox(
    "How would you like to be contacted?",
    ("Email", "Home phone", "Mobile phone")
) 
# Using "with" notation
with st.sidebar:
    add_radio = st.radio(
        "Choose a shipping method",
        ("Standard (5-15 days)", "Express (2-5 days)")
    )

image.png

重要
不支持使用對象符號的元素只有 st.echo躏筏、st.spinner 和 st.toast板丽。要使用這些元素，必須使用對象符號趁尼。

下面舉例說明如何在側(cè)邊欄中添加 st.echo 和 st.spinner：

import streamlit as st
 
with st.sidebar:
    with st.echo():
        st.write("This code will be printed to the sidebar.")
 
    with st.spinner("Loading..."):
        time.sleep(5)
    st.success("Done!")

4.8 tabs--多頁標(biāo)簽容器

tabs 以標(biāo)簽形式插入多個(gè)多元素容器埃碱。標(biāo)簽是一種導(dǎo)航元素碴卧，可讓用戶在相關(guān)內(nèi)容組之間輕松移動。

要在返回的容器中添加元素乃正，可以使用 with 符號（首選）住册，或者直接調(diào)用返回對象的方法。請看下面的示例瓮具。tabs為列表中的每個(gè)字符串創(chuàng)建一個(gè)選項(xiàng)卡荧飞。默認(rèn)情況下選擇第一個(gè)標(biāo)簽頁。字符串用作標(biāo)簽頁的名稱名党，可選擇包含 Markdown叹阔，支持以下元素：粗體、斜體传睹、刪除線耳幢、內(nèi)聯(lián)代碼、表情符號和鏈接欧啤。

import streamlit as st 
#設(shè)定三個(gè)tab 這個(gè)相當(dāng)于三個(gè)界面
tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"]) 
#三個(gè)tab的設(shè)定
with tab1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg", width=200) 
with tab2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg", width=200) 
with tab3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg", width=200)

點(diǎn)擊標(biāo)簽可以切換

也可以直接調(diào)用返回對象的方法：這里設(shè)定一個(gè)表格和數(shù)據(jù):

import streamlit as st
import numpy as np
 
#這里設(shè)定兩個(gè)tabs并按照列表形式傳入
tab1, tab2 = st.tabs(["  Chart", "  Data"])
 
#設(shè)定一個(gè)隨機(jī)數(shù)列
data = np.random.randn(10, 1)
 
#設(shè)定第一個(gè)tab
tab1.subheader("A tab with a chart")
tab1.line_chart(data)
#設(shè)定第二個(gè)tab
tab2.subheader("A tab with the data")
tab2.write(data)

image.png

#源碼
import pandas as pd
import streamlit as st
import plotly.express as px
from PIL import Image


# 設(shè)置網(wǎng)頁名稱
st.set_page_config(page_title='調(diào)查結(jié)果',
                    # page_icon='555'
                    page_icon='*'
                    # layout='wide'
                    )
# 設(shè)置網(wǎng)頁標(biāo)題
st.header('2020年調(diào)查問卷')
# 正文
st.title('這是一個(gè)測試文件')
# 設(shè)置網(wǎng)頁子標(biāo)題
st.subheader('2020年各部門對生產(chǎn)部的評分情況')

# 讀取數(shù)據(jù)  excel路徑睛藻、sheet_name
excel_file = '各部門對生產(chǎn)部的評分情況.xlsx'
sheet_name = 'DATA'

df = pd.read_excel(excel_file,
                   sheet_name=sheet_name,
                   usecols='B:D',
                   header=3)

# 此處為各部門參加問卷調(diào)查人數(shù)
df_participants = pd.read_excel(excel_file,
                                sheet_name=sheet_name,
                                usecols='F:G',
                                header=3)
df_participants.dropna(inplace=True)

# streamlit的多重選擇(選項(xiàng)數(shù)據(jù))
department = df['部門'].unique().tolist()
# streamlit的滑動條(年齡數(shù)據(jù))
ages = df['年齡'].unique().tolist()

# 滑動條, 最大值、最小值邢隧、區(qū)間值
age_selection = st.slider('年齡:',
                          min_value=min(ages),
                          max_value=max(ages),
                          value=(min(ages), max(ages)))

# 多重選擇, 默認(rèn)全選
department_selection = st.multiselect('部門:',
                                      department,
                                      default=department)

# 根據(jù)選擇過濾數(shù)據(jù)
mask = (df['年齡'].between(*age_selection)) & (df['部門'].isin(department_selection))
number_of_result = df[mask].shape[0]

# 根據(jù)篩選條件, 得到有效數(shù)據(jù)
st.markdown(f'*有效數(shù)據(jù): {number_of_result}*')

# 根據(jù)選擇分組數(shù)據(jù)
df_grouped = df[mask].groupby(by=['評分']).count()[['年齡']]
df_grouped = df_grouped.rename(columns={'年齡': '計(jì)數(shù)'})
df_grouped = df_grouped.reset_index()

# 繪制柱狀圖, 配置相關(guān)參數(shù)
bar_chart = px.bar(df_grouped,
                   x='評分',
                   y='計(jì)數(shù)',
                   text='計(jì)數(shù)',
                   color_discrete_sequence=['#F63366']*len(df_grouped),
                   template='plotly_white')
st.plotly_chart(bar_chart)

# 添加圖片和交互式表格
col1, col2 = st.columns([2,4])
image = Image.open('survey.jpg')
col1.image(image,
           caption='Designed by 小F / 法納斯特',
           use_column_width=True)
col2.dataframe(df[mask], width=300)

# 繪制餅圖
pie_chart = px.pie(df_participants,
                   title='總的參加人數(shù)',
                   values='人數(shù)',
                   names='公司部門')
st.plotly_chart(pie_chart)

# 第一行
col1, col2 = st.columns(2)
with col1:
    st.button("按鈕1")
with col2:
    st.button("按鈕2")

5店印、其他常用的組件

5.1checkbox 創(chuàng)建一個(gè)復(fù)選框

在Streamlit中，checkbox方法用于創(chuàng)建一個(gè)復(fù)選框倒慧，用戶可以通過勾選或取消勾選復(fù)選框來選擇或取消選擇某些選項(xiàng)按摘。

checkbox方法接受一個(gè)標(biāo)簽參數(shù)label，用于描述復(fù)選框的功能纫谅。當(dāng)用戶點(diǎn)擊復(fù)選框時(shí)炫贤，Streamlit會根據(jù)用戶的選擇返回一個(gè)布爾值。

以下是一個(gè)簡單的示例：

import streamlit as st
 
if st.checkbox('Do you like Streamlit?'):
    st.write('Great! Streamlit is awesome!')
else:
    st.write('Streamlit could use some improvements.')

image.png

在這個(gè)例子中付秕，復(fù)選框的標(biāo)簽為"Do you like Streamlit?“兰珍。當(dāng)用戶勾選復(fù)選框時(shí)，Streamlit會返回True盹牧，并顯示"Great! Streamlit is awesome!”俩垃；當(dāng)用戶取消勾選復(fù)選框時(shí)，Streamlit會返回False汰寓，并顯示"Streamlit could use some improvements."。

5.2code 顯示代碼

Streamlit中的code方法可以用于顯示代碼苹粟。它接受兩個(gè)參數(shù)：body和language有滑。body參數(shù)是要顯示的代碼，而language參數(shù)是代碼所使用的開發(fā)語言嵌削。

此外毛好，如果省略language參數(shù)望艺，Streamlit將不會為代碼提供語法高亮效果。

以下是一個(gè)使用Streamlit的code方法的示例：

import streamlit as st
 
code = '''def hello():
    print("Hello, Streamlit!")'''
st.code(code, language='python')

image.png

這段代碼將顯示一個(gè)Python語言的代碼塊肌访，其中定義了一個(gè)名為"hello"的函數(shù)找默，該函數(shù)打印出"Hello, Streamlit!"。

除了顯示代碼塊吼驶，Streamlit還提供了其他多種顯示方法惩激，如st.write方法、st.title方法蟹演、st.header方法风钻、st.markdown方法等。這些方法可以根據(jù)需要添加到Streamlit應(yīng)用中酒请，以實(shí)現(xiàn)不同的顯示效果骡技。

5.3 color_picker 顯示顏色選擇器小部件

Streamlit中的color_picker方法可以用于顯示顏色選擇器小部件，允許用戶從顏色選擇器中選擇顏色羞反。

color_picker方法接受一個(gè)或多個(gè)參數(shù)布朦，包括label、value昼窗、key喝滞、help、on_change膏秫、args和kwargs右遭。其中，label參數(shù)是顏色選擇器小部件的標(biāo)簽缤削，value參數(shù)是默認(rèn)選擇的顏色窘哈，key參數(shù)是用于唯一標(biāo)識這個(gè)顏色選擇器小部件的字符串，help參數(shù)是對顏色選擇器小部件的描述信息亭敢，on_change參數(shù)是一個(gè)回調(diào)函數(shù)滚婉，當(dāng)用戶選擇新的顏色時(shí)將觸發(fā)該函數(shù)。

以下是一個(gè)使用Streamlit的color_picker方法的示例：

import streamlit as st
 
color = st.color_picker('Pick a color', value='#000000')
st.write('You picked', color)

在這個(gè)例子中帅刀，用戶可以通過點(diǎn)擊"Pick a color"按鈕從顏色選擇器中選擇顏色让腹。當(dāng)用戶選擇新的顏色后，頁面將更新并顯示"You picked [新選擇的顏色]"扣溺。

5.4 container 創(chuàng)建一個(gè)容器

Streamlit中的container方法可以用于創(chuàng)建一個(gè)容器骇窍，該容器可用于容納多個(gè)元素。

使用container方法可以創(chuàng)建一個(gè)不可見的容器锥余，該容器可用于在應(yīng)用程序中插入多個(gè)元素腹纳。這些元素可以是按鈕、復(fù)選框、文本框等等嘲恍。通過使用container方法足画，可以更好地組織應(yīng)用程序的界面，并允許用戶以更靈活的方式使用這些元素佃牛。

下面是一個(gè)使用container方法的示例：

import streamlit as st
 
with st.container():
    st.write("Hello")
    st.button("Click me!")
    st.checkbox("Check me!")

創(chuàng)建一個(gè)容器container

這個(gè)示例創(chuàng)建了一個(gè)容器淹辞，并在其中添加了一個(gè)文本框、一個(gè)按鈕和一個(gè)復(fù)選框俘侠。通過使用container方法象缀，可以將這些元素組織在一起，并以更有條理的方式呈現(xiàn)給用戶兼贡。

5.5 data_editor 允許用戶以交互方式編輯數(shù)據(jù)框

Streamlit中的data_editor函數(shù)允許用戶以交互方式編輯數(shù)據(jù)框（data frame）攻冷。它提供了一個(gè)方便的界面，使用戶能夠查看和編輯數(shù)據(jù)框中的數(shù)據(jù)遍希。

data_editor函數(shù)接受一個(gè)數(shù)據(jù)框?qū)ο笞鳛閰?shù)等曼，并在Streamlit應(yīng)用程序中創(chuàng)建一個(gè)界面，使用戶可以編輯該數(shù)據(jù)框凿蒜。用戶可以添加禁谦、刪除或修改數(shù)據(jù)框中的行和列，以及查看每列的統(tǒng)計(jì)信息废封。

下面是一個(gè)使用data_editor函數(shù)的示例：

import streamlit as st
import pandas as pd
 
# 創(chuàng)建一個(gè)示例數(shù)據(jù)框
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Gender': ['F', 'M', 'M']
})
 
# 顯示數(shù)據(jù)框編輯器
st.data_editor(df)

image.png

在這個(gè)示例中州泊，我們首先創(chuàng)建了一個(gè)包含姓名、年齡和性別信息的示例數(shù)據(jù)框。然后，我們使用data_editor函數(shù)將該數(shù)據(jù)框顯示在Streamlit應(yīng)用程序中鸽嫂，并允許用戶編輯它淹接。用戶可以通過界面添加氯庆、刪除或修改數(shù)據(jù)框中的行和列，以及查看每列的統(tǒng)計(jì)信息。

需要注意的是，data_editor函數(shù)只適用于較小的數(shù)據(jù)框样悟，因?yàn)樗鼤⒄麄€(gè)數(shù)據(jù)框加載到內(nèi)存中。對于較大的數(shù)據(jù)框庭猩，可能需要使用其他方法來編輯數(shù)據(jù)窟她。

5.6 dataframe 創(chuàng)建和操作數(shù)據(jù)框

Streamlit中的dataframe模塊可以用于創(chuàng)建和操作數(shù)據(jù)框（data frame）。數(shù)據(jù)框是一種常見的數(shù)據(jù)結(jié)構(gòu)蔼水，通常用于存儲和組織表格數(shù)據(jù)震糖。在Streamlit中，可以使用dataframe模塊來創(chuàng)建徙缴、查詢试伙、過濾嘁信、變換和可視化數(shù)據(jù)框于样。

下面是一些使用Streamlit中dataframe模塊的示例：

1. 創(chuàng)建數(shù)據(jù)框：

import pandas as pd
 
# 創(chuàng)建一個(gè)示例數(shù)據(jù)框
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'Gender': ['F', 'M', 'M']
})
 
# 在Streamlit中顯示數(shù)據(jù)框
st.dataframe(df)

2. 查詢數(shù)據(jù)框中的數(shù)據(jù)：

# 查詢數(shù)據(jù)框中特定列的數(shù)據(jù)
st.write(df['Name'])
 
# 查詢數(shù)據(jù)框中特定行的數(shù)據(jù)
st.write(df.loc[0])

3. 過濾數(shù)據(jù)框中的數(shù)據(jù)：

# 過濾出性別為'M'的數(shù)據(jù)行
male_rows = df[df['Gender'] == 'M']
st.dataframe(male_rows)

4. 變換數(shù)據(jù)框中的數(shù)據(jù)：

# 將年齡列中的值增加10歲
df['Age'] = df['Age'] + 10
st.dataframe(df)

5. 可視化數(shù)據(jù)框中的數(shù)據(jù)：

# 使用柱狀圖顯示性別分布情況
st.bar_chart(df['Gender'].value_counts())

5.7 date_input 顯示一個(gè)日期輸入框

Streamlit中的date_input方法可以顯示一個(gè)日期輸入框組件疏叨。

方法原型為：streamlit.date_input(label, value=None, key=None)

參數(shù)說明：

label：組件說明文本，即輸入框旁邊的文本穿剖。
value：組件當(dāng)前值蚤蔓，可以是datetime.date或datetime.datetime類型。默認(rèn)值為None糊余，表示當(dāng)前日期秀又。
key：組件ID，用于在Streamlit應(yīng)用程序中唯一標(biāo)識該組件贬芥。默認(rèn)值為None吐辙。
返回值：date_input方法返回組件的當(dāng)前值，即用戶輸入的日期蘸劈。

import streamlit as st
import datetime
# 顯示日期輸入框昏苏，默認(rèn)值為今天的日期
today = st.date_input('Enter a date', value=None)
 
# 顯示日期輸入框，指定一個(gè)默認(rèn)值
default_date = datetime.date(2023, 7, 1)
st.date_input('Enter a date', value=default_date)

image.png

5.8 divider 用于添加分隔線

在Streamlit中威沫，st.divider函數(shù)用于添加分隔線贤惯，以幫助在應(yīng)用程序中創(chuàng)建視覺分隔。這個(gè)函數(shù)的使用非常簡單棒掠，只需要調(diào)用它即可添加一條分隔線孵构。例如：

import streamlit as st
 
st.write('This is some content')
st.divider()
st.write('This is some other content')

image.png

5.9 download_button 創(chuàng)建一個(gè)下載按鈕

Streamlit中的st.download_button函數(shù)可以創(chuàng)建一個(gè)下載按鈕，用戶點(diǎn)擊該按鈕后可以下載指定的文件內(nèi)容烟很。這個(gè)函數(shù)的使用方法如下：

st.download_button(label, data, file_name=None, mime=None, key=None, help=None, on_click=None, args=None, kwargs=None, *, disabled=False)

其中颈墅，參數(shù)說明如下：

label：按鈕的標(biāo)簽文本。
data：要下載的文件內(nèi)容雾袱，可以是一個(gè)字符串恤筛、二進(jìn)制數(shù)據(jù)或者圖像。
file_name：可選參數(shù)谜酒，指定下載時(shí)顯示的文件名叹俏。
mime：可選參數(shù)，指定文件的MIME類型僻族。如果指定了該參數(shù)粘驰，那么在下載按鈕上會顯示一個(gè)對應(yīng)的文件類型圖標(biāo)。
key：可選參數(shù)述么，用于唯一標(biāo)識該按鈕蝌数。
help：可選參數(shù)，指定當(dāng)用戶將鼠標(biāo)懸停在按鈕上時(shí)顯示的幫助文本度秘。
on_click：可選參數(shù)顶伞，一個(gè)回調(diào)函數(shù)饵撑，當(dāng)用戶點(diǎn)擊按鈕時(shí)觸發(fā)該函數(shù)。
args和kwargs：可選參數(shù)唆貌，用于傳遞給回調(diào)函數(shù)的參數(shù)滑潘。
disabled：可選參數(shù)，如果設(shè)置為True锨咙，則按鈕將被禁用语卤。

使用示例：

1. 下載字符串內(nèi)容為文本文件：

text_contents = 'This is some text'
st.download_button('Download some text', text_contents)

2. 下載二進(jìn)制數(shù)據(jù)為文件：

binary_contents = b'example content'
st.download_button('Download binary file', binary_contents)

3. 下載圖像：

import base64
with open('image.png', 'rb') as f:
    image_data = f.read()
    image_b64 = base64.b64encode(image_data).decode()
st.download_button('Download image', image_b64)

在這個(gè)示例中，我們使用@st.experimental_singleton裝飾器來將my_function函數(shù)轉(zhuǎn)換為單例對象酪刀。這意味著在整個(gè)Streamlit應(yīng)用程序中粹舵，只有一個(gè)my_function實(shí)例存在，并且可以在不同的用戶之間共享骂倘。

需要注意的是眼滤，experimental_singleton裝飾器是實(shí)驗(yàn)性的，可能會在未來的版本中有所改變历涝。因此诅需，在使用時(shí)需要謹(jǐn)慎，并注意檢查更新和文檔以獲取最新的信息睬关。

5.10 file_uploader 文件上傳工具

Streamlit中的file_uploader組件是一個(gè)方便的文件上傳工具诱担，支持拖拽上傳文件和文件管理器選擇文件。
使用方法如下：

style_file = st.file_uploader("請上傳風(fēng)格化圖片")
if style_file:
    stringio = style_file.getvalue()
    style_file_path = 'style_file/'+ style_file.name
    with open(style_file_path,'wb') as f:
        f.write(stringio)

image.png

使用文件上傳組件上傳文件之后电爹，可以使用上面的代碼將文件保存到特定路徑等待使用蔫仙。

5.11 form 用于收集用戶輸入的組件

Streamlit中的form是一種用于收集用戶輸入的組件。當(dāng)用戶填寫表單并提交時(shí)丐箩，表單中的數(shù)據(jù)可以被批量發(fā)送到Streamlit摇邦。每個(gè)表單必須包含一個(gè)st.form_submit_button，而不能包含st.button或st.download_button屎勘。此外施籍，表單可以出現(xiàn)在應(yīng)用程序的任何位置（例如側(cè)邊欄、列等）概漱，但它們不能嵌入到其他表單中丑慎。

在創(chuàng)建表單時(shí)，可以使用st.form(key, clear_on_submit=False)函數(shù)瓤摧。該函數(shù)接受一個(gè)關(guān)鍵字參數(shù)key竿裂，用于指定表單的唯一標(biāo)識符。此外照弥，還可以使用clear_on_submit參數(shù)指定在提交表單后是否清除表單數(shù)據(jù)腻异。

在表單中添加元素時(shí)，可以使用st.form_element(label, element)函數(shù)这揣。該函數(shù)接受兩個(gè)參數(shù)：label用于指定元素的標(biāo)簽悔常，element用于指定元素類型和參數(shù)影斑。例如，要添加一個(gè)滑塊組件机打，可以使用st.slider(label, min_value=None, max_value=None, value=None, step=None, format=None, key=None)函數(shù)矫户。該函數(shù)接受一些參數(shù)，如最小值（min_value）姐帚、最大值（max_value）吏垮、當(dāng)前值（value）障涯、步長（step）等罐旗。

最后，為了提交表單唯蝶，可以使用st.form_submit_button(label)函數(shù)九秀。該函數(shù)接受一個(gè)參數(shù)label，用于指定提交按鈕的標(biāo)簽粘我。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)鼓蜒，表單中的所有小部件值將被批量發(fā)送到Streamlit。

5.12 form_submit_button 用于提交表單的按鈕

Streamlit中的form_submit_button是一個(gè)用于提交表單的按鈕征字。當(dāng)用戶點(diǎn)擊該按鈕時(shí)都弹，表單中的所有小部件（widget）值將被批量發(fā)送到Streamlit。每個(gè)表單都必須有一個(gè)form_submit_button匙姜，并且該按鈕不能出現(xiàn)在表單之外畅厢。

form_submit_button函數(shù)可以接受一些可選參數(shù)，如label（用于指定提交按鈕的標(biāo)簽）氮昧、help（用于指定幫助文本）框杜、on_click（用于指定點(diǎn)擊事件的處理函數(shù)）和args、kwargs（用于傳遞參數(shù)給處理函數(shù)）袖肥。

在表單中使用form_submit_button時(shí)咪辱，需要先創(chuàng)建一個(gè)表單，并添加需要的小部件椎组。然后油狂，在表單外使用form_submit_button來提交表單。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)寸癌，Streamlit將自動收集表單中的所有小部件值专筷，并將其發(fā)送到指定的處理函數(shù)中進(jìn)行處理。

5.12 get_option 讀取指定的配置項(xiàng)的值

Streamlit中的get_option函數(shù)用于讀取指定的配置項(xiàng)的值灵份。這個(gè)函數(shù)接受一個(gè)參數(shù)仁堪，即配置項(xiàng)的鍵（key），返回對應(yīng)的配置項(xiàng)值填渠。

例如弦聂，假設(shè)有一個(gè)配置項(xiàng)是"my_option"鸟辅，對應(yīng)的值是"value"，那么可以通過get_option函數(shù)來獲取該配置項(xiàng)的值：

option_value = st.get_option("my_option")
print(option_value)  # 輸出 "value"

可以使用st.set_option函數(shù)來設(shè)置配置項(xiàng)的值莺葫。例如匪凉，將"my_option"的配置項(xiàng)值設(shè)置為"new_value"：

st.set_option("my_option", "new_value")

這樣，再次調(diào)用get_option函數(shù)時(shí)捺檬，將返回新的值：

option_value = st.get_option("my_option")
print(option_value)  # 輸出 "new_value"

5.13 markdown 顯示Markdown格式的內(nèi)容

Streamlit中的markdown方法可以用于在Streamlit應(yīng)用中顯示Markdown格式的內(nèi)容再层。這個(gè)方法接受一個(gè)字符串作為參數(shù)，該字符串包含Markdown格式的文本堡纬。

例如聂受，假設(shè)我們想要在Streamlit應(yīng)用中顯示一個(gè)包含標(biāo)題和段落的Markdown文檔】靖洌可以使用markdown方法來實(shí)現(xiàn)這個(gè)目標(biāo)蛋济，具體代碼如下：

import streamlit as st
 
# 使用markdown方法顯示Markdown文檔
st.markdown(
    '''
    # 標(biāo)題
    ## 子標(biāo)題
    段落文本...
    '''
)

5.14 plotly_chart 顯示Plotly圖表

Streamlit中的plotly_chart方法可以用于顯示Plotly圖表。

plotly_chart方法接受一個(gè)或多個(gè)Plotly圖表對象作為參數(shù)炮叶，并將其顯示在Streamlit應(yīng)用中碗旅。該方法支持多種類型的Plotly圖表，包括折線圖镜悉、散點(diǎn)圖祟辟、柱狀圖、餅圖等侣肄。

以下是一個(gè)使用plotly_chart方法的示例代碼：

import streamlit as st
import plotly.express as px
 
# 創(chuàng)建示例數(shù)據(jù)
data = px.data.iris()
 
# 使用plotly_chart方法顯示折線圖
st.plotly_chart(px.line(data, x="sepal_width", y="sepal_length", color="species"))

在這個(gè)示例中旧困，我們使用Plotly Express模塊創(chuàng)建了一個(gè)示例數(shù)據(jù)集，并使用plotly_chart方法顯示了一個(gè)折線圖茫孔。該折線圖根據(jù)“sepal_width”和“sepal_length”列的數(shù)據(jù)繪制了不同品種鳶尾花的生長趨勢叮喳。

需要注意的是，要使用plotly_chart方法缰贝，需要在Streamlit應(yīng)用中導(dǎo)入Plotly庫馍悟，并將其與Streamlit庫一起使用。此外剩晴，還需要根據(jù)具體的Plotly圖表類型和數(shù)據(jù)格式調(diào)用相應(yīng)的Plotly函數(shù)來創(chuàng)建圖表對象锣咒。

5.15 progress 顯示進(jìn)度條

Streamlit中的progress方法可以用于顯示進(jìn)度條。該方法可以根據(jù)完成進(jìn)度來更新進(jìn)度條的狀態(tài)赞弥。

progress方法接受一個(gè)數(shù)值參數(shù)毅整，范圍為[0,100]，表示完成的百分比绽左。通過調(diào)用progress方法并傳入相應(yīng)的百分比值悼嫉，可以更新進(jìn)度條的狀態(tài)。

以下是一個(gè)使用progress方法的示例代碼：

import streamlit as st
import time
# 創(chuàng)建進(jìn)度條
progress_bar = st.progress(0)
 
# 模擬一個(gè)耗時(shí)任務(wù)
for i in range(100):
    time.sleep(0.1)  # 模擬耗時(shí)任務(wù)
    progress_bar.progress(i + 1)  # 更新進(jìn)度條狀態(tài)

在這個(gè)示例中拼窥，我們首先創(chuàng)建了一個(gè)進(jìn)度條對象progress_bar戏蔑，初始進(jìn)度為0蹋凝。然后，我們模擬了一個(gè)耗時(shí)任務(wù)总棵，通過循環(huán)100次鳍寂，每次更新進(jìn)度條的狀態(tài)。在每次循環(huán)中情龄，我們使用progress方法更新進(jìn)度條的狀態(tài)迄汛，傳入當(dāng)前完成的百分比值。

需要注意的是骤视，進(jìn)度條的狀態(tài)只會在Streamlit應(yīng)用中顯示鞍爱，并且每次更新進(jìn)度條的狀態(tài)都會導(dǎo)致頁面刷新。因此尚胞，在更新進(jìn)度條時(shí)需要注意性能和用戶體驗(yàn)硬霍。

5.16 pydeck_chart 顯示PyDeck圖表

Streamlit中的pydeck_chart方法可以用于顯示PyDeck圖表。PyDeck是一個(gè)基于JavaScript的數(shù)據(jù)可視化庫笼裳，支持多種地圖和圖表類型，并支持交互和放大縮小等操作粱玲。

pydeck_chart方法接受一個(gè)PyDeck圖表對象作為參數(shù)躬柬，并將其顯示在Streamlit應(yīng)用中。該方法支持多種類型的PyDeck圖表抽减，包括散點(diǎn)圖允青、柱狀圖、熱力圖等卵沉。

以下是一個(gè)使用pydeck_chart方法的示例代碼：

#這個(gè)示例有問題颠锉，未找到，參考下個(gè)示例
import streamlit as st
import pydeck as pdk
 
# 創(chuàng)建PyDeck圖表對象
view = pdk.View(pdk.ScatterplotLayer, deck_options=pdk.DeckOptions(initial_view_state=pdk.ViewState(latitude=37.769999612954, longitude=-122.446293375463, zoom=10)))
 
# 使用pydeck_chart方法顯示圖表
st.pydeck_chart(view)

import streamlit as st
import pydeck as pdk
import pandas as pd
import numpy as np
 
# # 創(chuàng)建PyDeck圖表對象
# view = pdk.View(pdk.ScatterplotLayer, deck_options=pdk.DeckOptions(initial_view_state=pdk.ViewState(latitude=37.769999612954, longitude=-122.446293375463, zoom=10)))
 
# # 使用pydeck_chart方法顯示圖表
# st.pydeck_chart(view)

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.pydeck_chart(pdk.Deck(
     map_style='mapbox://styles/mapbox/light-v9',
     initial_view_state=pdk.ViewState(
         latitude=37.76,
         longitude=-122.4,
         zoom=11,
         pitch=50,
     ),
     layers=[
         pdk.Layer(
            'HexagonLayer',
            data=df,
            get_position='[lon, lat]',
            radius=200,
            elevation_scale=4,
            elevation_range=[0, 1000],
            pickable=True,
            extruded=True,
         ),
         pdk.Layer(
             'ScatterplotLayer',
             data=df,
             get_position='[lon, lat]',
             get_color='[200, 30, 0, 160]',
             get_radius=200,
         ),
     ],
 ))

在這個(gè)示例中史汗，我們首先創(chuàng)建了一個(gè)PyDeck圖表對象view琼掠，它使用了一個(gè)ScatterplotLayer來顯示散點(diǎn)圖。然后停撞，我們使用pydeck_chart方法將該圖表顯示在Streamlit應(yīng)用中瓷蛙。

需要注意的是，要使用pydeck_chart方法戈毒，需要在Streamlit應(yīng)用中導(dǎo)入PyDeck庫艰猬，并將其與Streamlit庫一起使用。此外埋市，還需要根據(jù)具體的PyDeck圖表類型和數(shù)據(jù)格式調(diào)用相應(yīng)的PyDeck函數(shù)來創(chuàng)建圖表對象冠桃。

image.png

5.17 pyplot

Streamlit中的pyplot方法可以用于顯示Matplotlib圖表。Matplotlib是一個(gè)Python數(shù)據(jù)可視化庫道宅，支持多種類型的圖表和繪圖方式食听。

pyplot方法接受一個(gè)Matplotlib圖表對象作為參數(shù)套么，并將其顯示在Streamlit應(yīng)用中。該方法支持多種類型的Matplotlib圖表碳蛋，包括折線圖胚泌、散點(diǎn)圖、柱狀圖肃弟、餅圖等玷室。

以下是一個(gè)使用pyplot方法的示例代碼：

import streamlit as st
import matplotlib.pyplot as plt
 
# 創(chuàng)建Matplotlib圖表對象
fig, ax = plt.subplots()
ax.plot([1, 2, 3, 4], [1, 4, 2, 3])
plt.show()
 
# 使用pyplot方法顯示圖表
st.pyplot(fig)

image.png

在這個(gè)示例中，我們首先使用Matplotlib創(chuàng)建了一個(gè)折線圖對象fig笤受，并通過plot方法繪制了一條簡單的折線穷缤。然后，我們使用show方法將圖表顯示出來箩兽。最后津肛，我們使用pyplot方法將該圖表顯示在Streamlit應(yīng)用中。

需要注意的是汗贫，要使用pyplot方法身坐，需要在Streamlit應(yīng)用中導(dǎo)入Matplotlib庫，并將其與Streamlit庫一起使用落包。此外部蛇，還需要根據(jù)具體的Matplotlib圖表類型和數(shù)據(jù)格式調(diào)用相應(yīng)的Matplotlib函數(shù)來創(chuàng)建圖表對象。

5.18 radio 單選按鈕小部件

Streamlit中的radio方法可以用于顯示單選按鈕小部件咐蝇。該方法接受一個(gè)label參數(shù)涯鲁，用于向用戶解釋此單選按鈕組的用途，以及一個(gè)options參數(shù)有序，用于定義可用的選項(xiàng)列表抹腿。

例如：

import streamlit as st
 
# 定義選項(xiàng)列表
options = ['旅行1', '游樂園2', '桌游3', '劇本殺4'] 
# 使用radio方法顯示單選按鈕小部件
selected_option = st.radio('Choose an option', options) 
# 顯示選中的選項(xiàng)
st.write('You selected:', selected_option)

image.png

在這個(gè)例子中，我們定義了一個(gè)選項(xiàng)列表options旭寿，然后使用radio方法顯示了一個(gè)單選按鈕小部件警绩。用戶可以在該小部件中選擇一個(gè)選項(xiàng)，然后通過點(diǎn)擊“運(yùn)行”按鈕來確認(rèn)選擇许师。最后房蝉，我們使用write方法顯示了用戶選中的選項(xiàng)。

5.19 set_page_config

Streamlit中的set_page_config方法可以用于設(shè)置頁面配置微渠，例如頁面標(biāo)題搭幻、頁面樣式等。這個(gè)方法接受一個(gè)字典參數(shù)逞盆，可以在字典中指定多個(gè)配置項(xiàng)檀蹋。

以下是一個(gè)使用set_page_config的示例：

import streamlit as st
 
# 設(shè)置頁面配置
st.set_page_config(
    page_title='My Streamlit App',
    page_icon='logo.png',
    header_font_name='Arial',
    header_font_size=18,
    primary_color='blue',
    script_tag='<script>console.log("Hello, world!");</script>'
)

在這個(gè)示例中，我們使用set_page_config方法設(shè)置了頁面標(biāo)題、頁面圖標(biāo)俯逾、頭部字體名稱贸桶、頭部字體大小、主色調(diào)以及一個(gè)腳本標(biāo)簽桌肴。這些配置項(xiàng)可以根據(jù)需要進(jìn)行調(diào)整和修改皇筛。

5.20 slider 顯示滑塊小部件

Streamlit是一種開源的Python庫，它可以幫助開發(fā)者輕松地構(gòu)建交互式Web應(yīng)用坠七。在Streamlit應(yīng)用中水醋，你可以使用slider組件來創(chuàng)建一個(gè)滑塊，用戶可以通過移動滑塊來選擇一個(gè)值彪置。

下面是一個(gè)簡單的例子拄踪，演示如何在Streamlit應(yīng)用中創(chuàng)建一個(gè)滑塊：

import streamlit as st
 
# 設(shè)置滑塊的標(biāo)簽和范圍
st.write("你可以選擇一個(gè)值：")
 
# 創(chuàng)建一個(gè)滑塊，初始值為5拳魁，范圍在1到10之間
slider_value = st.slider('選擇一個(gè)值', min_value=1, max_value=10, value=5)
 
# 顯示用戶選擇的滑塊值
st.write(f"你選擇的值為：{slider_value}")

image.png

在這個(gè)例子中惶桐，我們首先導(dǎo)入了streamlit庫。然后潘懊，我們使用st.write函數(shù)來顯示一段文本和一個(gè)滑塊姚糊。st.slider函數(shù)接受幾個(gè)參數(shù)：滑塊的標(biāo)簽、最小值卦尊、最大值和初始值叛拷。當(dāng)用戶移動滑塊并選擇一個(gè)值時(shí)，這個(gè)值將作為滑塊的值返回岂却，我們可以使用這個(gè)值來更新應(yīng)用的狀態(tài)或執(zhí)行其他操作。最后裙椭，我們使用st.write函數(shù)來顯示用戶選擇的滑塊值躏哩。

5.21snow 繪制慶祝降雪

一個(gè)下雪的動畫

st.snow()

image.png

5.22 spinner 在執(zhí)行代碼塊時(shí)臨時(shí)顯示一條消息

Streamlit中的spinner是一種在執(zhí)行代碼塊時(shí)顯示狀態(tài)信息的功能。它可以幫助用戶了解程序正在處理任務(wù)揉燃，而不是無響應(yīng)或卡住扫尺。

要使用spinner，您可以在代碼塊之前使用st.spinner函數(shù)來創(chuàng)建一個(gè)spinner對象炊汤，然后在代碼塊結(jié)束之前調(diào)用spinner.stop()方法來停止spinner正驻。

下面是一個(gè)使用Streamlit spinner的示例代碼：

import streamlit as st
import time 
# # 創(chuàng)建spinner對象
# spinner = st.spinner('正在處理中............') 
# # 執(zhí)行代碼塊
# time.sleep(5)
with st.spinner('Wait for it...'):
    time.sleep(5)
 
# 停止spinner
# spinner.stop()
 
# 顯示成功消息
st.success('處理完成！')

參考文章：

1. Streamlit官網(wǎng) ? A faster way to build and share data apps
2. Python 應(yīng)用開發(fā)：Streamlit 布局篇（容器布局）-CSDN博客
3. 簡潔而優(yōu)雅地展示你的算法和數(shù)據(jù)——streamlit教程（一） 原理介紹與布局控制 - 知乎 (zhihu.com)
4. streamlit UI控件使用大全
5. Python Streamlit st.pydeck_chart用法及代碼示例