請啟用JavaScript來查看內容

Streamlit 超快速又輕鬆建立網頁 Dashboard

·

前言

後來時隔兩年,我有整理更新的版本,請改去這邊:
(2023年新版) 使用 Streamlit 快速又輕鬆建立 Dashboard 網頁



Streamlit 是個可快速製作出 Web 網頁應用程式的套件,而且不需要任何前端技術,全部都採用 Python 語法,讓你將網路爬蟲、數據科學、機器學習資料簡單地呈現出來分享,是一個很方便的套件。

Demo

這是最後將程式碼放到 GitHub,並使用 Streamlit 部署的成果。


安裝與執行

安裝

1
pip install streamlit

執行

1
streamlit run <py程式檔案路徑>

如果想指定 Streamlit 的 port 埠號,只要在後方加上--server.port 參數:

1
streamlit run <py程式檔案路徑> --server.port 8888

需要終止該應用程式只需在終端中按 Ctrl + c

範例教學

底下流程是參考官方文檔的流程操作。

創建一個 Streamlit 應用程式

新創建一個 Python 檔案 streamlit_app.py,以下教學都只會編輯這個檔案。

打開它,在一開始導入 Streamlit 與其他套件:

1
2
3
4
5
6
import time

import streamlit as st

import numpy as np
import pandas as pd

打開"命令提示字元"或"終端機",開始執行程式:

1
streamlit run streamlit_app.py

它應該會顯示如下資訊,並自動開啟一個瀏覽器網頁。

執行 Streamlit 程式
執行 Streamlit 程式

然後網頁裡面顯示… 一片空白?!
沒錯!我們又還沒有添加元件進去,怎麼會有東西呢~ 😆

添加文字和數據

先幫我們的應用程式加上個標題,加入以下程式碼:

1
st.title('我的第一個應用程式')

存檔,回到瀏覽器的網頁上。
可以重整網頁,或點擊右上角"Rerun"的按鈕,

網頁重跑
網頁重跑

網頁上就會顯示一個標題文字了:

加入標題
加入標題

如何?簡單吧,那我們再繼續接著下去~

使用 Magic Commands

在 Streamlit 內有個神奇的指令,他們把它叫 Magic commands,不管你給它"字串"、"Markdown"、"數據資料"、"Matplotlib figures"、"Altair charts",Streamlit 都會辨別並以合適的方式顯示出來。

甚至在程式碼中單一行只有變數或字串,根本不需要使用 st.write(),它都會自動套用並顯示。

1
2
3
4
5
6
7
st.write("嘗試創建**表格**:")

df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
})
df
Markdown 與 表格
Markdown 與 表格

繪製圖表和地圖

繪製折線圖
使用 Numpy 生成一個隨機樣本,然後將其繪製成圖表。

1
2
3
4
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])
st.line_chart(chart_data)

而且它本身有下載、全螢幕觀看等功能。

繪製折線圖
繪製折線圖

繪製地圖
使用 Numpy 生成一個隨機樣本,繪製到地圖上。

1
2
3
4
map_data = pd.DataFrame(
    np.random.randn(100, 2) / [50, 50] + [22.7, 120.3],
    columns=['lat', 'lon'])
st.map(map_data)
繪製地圖
繪製地圖

加入小工具

除了上述標題、圖表,還有其他小工具,像是複選框、選擇框、按鈕、滑塊等等。

使用複選框來顯示/隱藏數據,例如在剛剛繪製地圖的程式上方加入:

1
2
3
4
5
if st.checkbox('顯示地圖圖表'):
    map_data = pd.DataFrame(
        np.random.randn(100, 2) / [50, 50] + [22.7, 120.3],
        columns=['lat', 'lon'])
    st.map(map_data)

但你可能會注意到,每次點擊複選框時,上方的折線圖也會產生變化。
這是因為 Streamlit 只要元件有輸入值的改變,整個程式(網頁)就會重新運行,因此折線圖裡的 random 才會出來不同資料。


使用選擇框進行選擇:

1
2
3
4
option = st.selectbox(
    '你喜歡哪種動物?',
    ['狗', '貓', '鸚鵡', '天竺鼠'])
'你的答案:', option
複選框 與 選擇框
複選框 與 選擇框

調整佈局

我們也能將元件移到側邊欄中,這邊範例將上方選擇框移入側邊欄:

1
2
3
4
option = st.sidebar.selectbox(
    '你喜歡哪種動物?',
    ['狗', '貓', '鸚鵡', '天竺鼠'])
'你的答案:', option
將元件移到側邊欄
將元件移到側邊欄

也有左右兩邊的方式來排列:

1
2
3
left_column, right_column = st.beta_columns(2)
left_column.write("這是左邊欄位。")
right_column.write("這是右邊欄位。")

或通過 st.beta_expander 來隱藏大量內容來節省空間。

1
2
expander = st.beta_expander("點擊來展開...")
expander.write("如果你要顯示很多文字,但又不想佔大半空間,可以使用這種方式。")
將內容摺疊起來
將內容摺疊起來

加入進度條

這邊使用 time.sleep() 來模擬進度:

1
2
3
4
5
6
7
# 增加一個空白元件,等等要放文字
latest_iteration = st.empty()
bar = st.progress(0)
for i in range(100):
    latest_iteration.text(f'目前進度 {i+1} %')
    bar.progress(i + 1)
    time.sleep(0.1)

而且網頁右上角還會顯示"RUNNING…",並有多個運動圖示跳動,讓使用者知道目前網頁中還有東西正在運行。

網頁 RUNNING... 字樣
網頁 RUNNING... 字樣

使用快取

如同前面所述,只要元件輸入值有改變,整個程式(網頁)就會重新運行,但假如有較耗費時間、資源的運算,會造成使用者每調一個參數,就浪費時間在等。

因此 Streamlit 內提供一個緩存機制,可以使用 @st.cache 裝飾器,將之前運算過的結果快取起來,如果下次遇到一樣的輸入值,就能直接使用之前的結果,節省時間。

要使用 @st.cache 裝飾器,就需要將運算部分的程式碼包成函式(def)。

1
2
3
4
5
6
7
8
9
@st.cache(suppress_st_warning=True)
def expensive_computation(a):
    st.write(f"沒有快取:expensive_computation({a})")
    time.sleep(2)
    return a * 2

a = st.slider("選擇一個數字", 0, 10)
result = expensive_computation(a)
st.write("結果:", result)
cache 快取
cache 快取

網頁配置設定

要寫在程式內所有 Streamlit 命令之前,而且只能設定一次。

此函式有四個參數:

  • page_title:網頁標題,顯示在瀏覽器分頁的標籤上,預設是程式碼的檔名。
  • page_icon:網頁圖標,顯示在網頁標題前,可以使用 st.image 或 Emoji,或者使用"random"讓它隨機產生XD。
  • layout:網頁中佈局寬度,預設是"centered",還可以使用"wide"。
  • initial_sidebar_state:側邊欄顯示狀態,"expanded"打開或"collapsed"隱藏,預設是"auto",代表在手機尺寸的設備上是隱藏,否則是打開顯示。
網頁標題與 icon
網頁標題與 icon
1
2
3
4
5
6
st.set_page_config(
    page_title="自定義網頁標題",
    page_icon="random",
    layout="centered",
    initial_sidebar_state="collapsed",
)

網頁選單設定

在網頁右上方有個選單,包含之前提過的 Rerun,以及清除快取、連結到官方文件論壇,甚至還有螢幕錄影功能,將你的操作流程直接錄影起來,展示給其他人。

網頁選單
網頁選單

而選單內的"設定"有幾個選項:

  • Run on save:程式存檔後網頁自動重跑,不需要再手動點 Rerun
  • Wide mode:佈局寬度調寬
  • Theme:佈景主題

* 自定義主題可參考官方介紹說明

網頁設定
網頁設定

部署應用程式

官方提供一種方式部署,只需要將你的 Streamlit 應用程式放在 GitHub 上,即可登入 share.streamlit.io 去部署運行起來。

完整部署介紹請參考官方說明

  1. 先確認你的資料夾內有 Python 依賴文件,例如 requirements.txtPipfilepyproject.tomlenvironment.yml 這幾種,或者還有 apt-get 依賴
  2. 將你的 Streamlit 應用程式推到自己的 GitHub 公開 Repository。
  3. 前往官網註冊登入,並到 Get an invite to Streamlit sharing 設定。
  4. 打開網址、查看結果~

註冊 Streamlit sharing 後要等到邀請的 Email 回信,我的經驗是等了一天。


應用程式網址格式

你的網址格式為:
https://share.streamlit.io/[user name]/[repo name]/[branch name]/[app path]
例如我上面的範例是:
https://share.streamlit.io/it-jia/streamlit_demo/master/streamlit_app.py

而如果你 Git 分支是 master,或應用程式檔案名稱為 streamlit_app.py,甚至可以簡化成:
https://share.streamlit.io/[user name]/[repo name]
我的範例簡化成:
https://share.streamlit.io/it-jia/streamlit_demo


完整範例程式碼

附上完整範例程式碼:streamlit_app.py

此範例程式碼部署在 share.streamlit.io 的 Demo:

結語

實際安裝使用後,發現這個套件真的可以很容易、快速的建立一個顯示資料用的儀表板(Dashboard),因此寫這篇文章來分享給大家~

官方有將 API 濃縮成一頁,方便快速尋找:
https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py




參考:
Streamlit 官方網站
Streamlit 官方文檔
Streamlit極簡易的Dashboard開發 - Neutron
Python 以 Streamlit 建立網頁資料分析應用程式教學與範例 - Office指南


選擇,比努力更重要。


🔻 如果覺得喜歡,歡迎在下方獎勵我 5 個讚~
分享

Jia
作者
Jia
軟體工程師