構建視覺化 web的 Python 神器streamlit

2022-06-10 14:00:03

1. 如何安裝？

和安裝其他包一樣，安裝 streamlit 非常簡單，一條命令即可

➜ pip install streamlit

考慮到 streamlit 會附帶安裝比較多的工具依賴包，為了不汙染當前的主要環境，我使用 venv 新建一個虛擬環境。

➜ python3 -m venv .

然後使用如下命令進入該虛擬環境

➜ source ./venv/bin/activate

接下來，再安裝 streamlit ，命令在上邊。

安裝的包比較多（數了下竟然接近 92 個？），過程也會很久，需要點耐心

➜ pip list | wc -l
      92

在安裝過程中，可能會遇到一些問題，但也不一定，這取決於你的機器，如遇到問題請自行藉助搜尋引擎解決。

2. 入門範例

Streamlit 提供了一些入門範例，執行如下命令即可

➜ streamlit hello

執行後 streamlit 會自動開啟瀏覽器載入一個本地頁面 http://localhost:8501/

這裡面有很多的 demo，你可以看一下，這些 Demo 還有對應的配套程式碼

這些程式碼直接拷貝儲存，就可以在本地直接通過如下命令直接執行

➜ streamlit run st-demo.py

2. Markdown 文字

匯入 streamlit 後，就可以直接使用 st.markdown() 初始化，呼叫不同的方法，就可以往檔案物件中填入內容

st.title()：文章大標題
st.header()：一級標題
st.subheader()：二級標題
st.text()：文字
st.code()：程式碼，同時可設定程式碼的語言，顯示的時候會高亮
st.latex()：latex 公式
st.caption()：小字型文字

如下我自己寫的一個小 Demo，供參考

import streamlit as st

# markdown
st.markdown('Streamlit Demo')

# 設定網頁標題
st.title('一個傻瓜式構建視覺化 web的 Python 神器 -- streamlit')

# 展示一級標題
st.header('1. 安裝')

st.text('和安裝其他包一樣，安裝 streamlit 非常簡單，一條命令即可')
code1 = '''pip3 install streamlit'''
st.code(code1, language='bash')


# 展示一級標題
st.header('2. 使用')

# 展示二級標題
st.subheader('2.1 生成 Markdown 檔案')

# 純文字
st.text('匯入 streamlit 後，就可以直接使用 st.markdown() 初始化')

# 展示程式碼，有高亮效果
code2 = '''import streamlit as st
st.markdown('Streamlit Demo')'''
st.code(code2, language='python')

Streamlit 執行的方式與普通的指令碼有所不同，應該使用 streamlit run st-demo.py

執行後就會自動開啟瀏覽器載入這個頁面，如果沒有自動開啟，也可以手動拷貝上圖中的連結開啟存取。

是不是有點那個味了？就這，還只是開胃菜～

3. 資料圖表支援

3.1 圖表元件

關於資料的展示，streamlit 由兩個元件進行支援

table：普通的表格，用於靜態資料的展示
dataframe：高階的表格，可以進行資料的操作，比如排序

Table 的範例：

df = pd.DataFrame(
    np.random.randn(10, 5),
    columns=('第%d列' % (i+1) for i in range(5))
)

st.table(df)

效果如下：

Datafram 的範例：

df = pd.DataFrame(
    np.random.randn(10, 5),
    columns=('第%d列' % (i+1) for i in range(5))
)

st.dataframe(df.style.highlight_max(axis=0))

效果如下，可以看到在圖示外，有個向下的小箭頭，你點一下，就會進行排序，除此之外，你還能看到我對最大值進行了高亮顯示，原因是我傳入的引數是 df.style.highlight_max(axis=0)

其實還有 n 多種樣式，比如：

highlight_null：空值高亮
highlight_min：最小值高亮
highlight_max：最大值高亮
highlight_between：某區間內的值高亮
highlight_quantile：暫沒用過

這些你都可以在原始碼中找到範例

3.2 監控元件

在採集到一些監控資料後，若你需要做一個監控面板， streamlit 也為你提供的 metric 元件

如下程式碼建立三個指標，並且填入對應的資料

col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%")

重新整理頁面，就能看到下面的效果：

3.3 原生圖表元件

Streamlit 原生支援多種圖表：

st.line_chart：折線圖
st.area_chart：面積圖
st.bar_chart：柱狀圖
st.map：地圖

下面一一展示

折線圖

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

面積圖

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

柱狀圖

chart_data = pd.DataFrame(
    np.random.randn(50, 3),
    columns = ["a", "b", "c"])
st.bar_chart(chart_data)

地圖

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

3.4 外部圖表元件

Streamlit 的一些原生圖表元件，雖然做到了傻瓜式，但僅能輸入資料、高度和寬度，如果你想更漂亮的圖表，就像 matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz 那樣，streamlit 也提供了支援：

st.pyplot
st.bokeh_chart
st.altair_chart
st.altair_chart
st.vega_lite_chart
st.plotly_chart
st.pydeck_chart
st.graphviz_chart

對於這部分，熟悉的同學自行嘗試了，這裡不再演示。

4. 使用者操作支援

前面 streamlit 都只是展示文字和資料，如果僅是如此，那 streamlit 也就 just so so

對於那些不會前端，並且平時有需要寫一些簡單的頁面的人說，能寫一些互動介面才是硬需求。

慶幸的是，你平時在網頁上、app 上能看到的互動元件，Streamlit 幾乎都能支援。。

button：按鈕
download_button：檔案下載
file_uploader：檔案上傳
checkbox：核取方塊
radio：單選框
selectbox：下拉單選框
multiselect：下拉多選框
slider：滑動條
select_slider：選擇條
text_input：文字輸入框
text_area：文字展示框
number_input：數位輸入框，支援加減按鈕
date_input：日期選擇框
time_input：時間選擇框
color_picker：顏色選擇器

這些內容非常多，也比較簡單，一個一個舉例也沒必要，大家直接去看 streamlit 原始碼裡的註釋即可。

5. 多媒體元件

想要在頁面上播放圖片、音訊和視訊，可以使用 streamlit 的這三個元件：

st.image
st.audio
st.video

6. 狀態元件

狀態元件用來向用戶展示當前程式的執行狀態，包括：

progress：進度條，如遊戲載入進度
spinner：等待提示
balloons：頁面底部飄氣球，表示祝賀
error：顯示錯誤資訊
warning：顯示報警資訊
info：顯示常規資訊
success：顯示成功資訊
exception：顯示異常資訊（程式碼錯誤棧）

效果如下：

7. 頁面佈局

Streamlit 是自上而下渲染的，元件在頁面上的排列順序與程式碼的執行順序一致。

一個精美的 web app ，只有上下單欄式的佈局肯定是不夠的。

實際上 streamlit 還提供了多種多樣的佈局：

st.sidebar：側邊欄

側邊欄可以做一些使用者操作控制元件

st.columns：列容器，處在同一個 columns 內元件，按照從左至右順序展示
st.expander：隱藏資訊，點選後可展開展示詳細內容，如：展示更多
st.container：包含多元件的容器
st.empty：包含單元件的容器

8. 流程控制系統

Streamlit 是自上而下逐步渲染出來的，若你的應用場景需要對渲染做一些控制，streamlit 也有提供對應的方法

st.stop：可以讓 Streamlit 應用停止而不向下執行，如：驗證碼通過後，再向下執行展示後續內容。
st.form：表單，Streamlit 在某個元件有互動後就會重新執行頁面程式，而有時候需要等一組元件都完成互動後再重新整理（如：登入填使用者名稱和密碼），這時候就需要將這些元件新增到 form 中
st.form_submit_button：在 form 中使用，提交表單。

9. 快取特性提升速度

當用戶在頁面上做一些操作的時候，比如輸入資料，都會觸發整個 streamlit 應用程式碼的重新執行，如果其中有讀取外部資料的步驟（數 GB 的資料），那這種效能損耗是非常可怕的。

但 streamlit 提供了一個快取裝飾器，當要重新執行程式碼渲染頁面的時候，就會先去快取裡查一下，如果程式碼或者資料沒有發生變化，就直接呼叫快取的結果即可。

使用方法也簡單，在需要快取的函數加上 @st.cache 裝飾器即可。

DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
            'streamlit-demo-data/uber-raw-data-sep14.csv.gz')

@st.cache
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis='columns', inplace=True)
    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
    return data

10. 部署上線

在本地編寫的 streamlit 應用，執行起來後只能在本地存取。如果需要讓別人也能存取這個應用，那你需要有一臺伺服器，這樣才能通過公網ip進行存取如果你需要伺服器，可以點這個連結領個卷有優惠。另外，還有一個選擇，就是使用 Heroku 部署你的應用。Heroku是一個支援多種程式語言的雲平臺即服務，你只要註冊一個帳號（聽說網易和 QQ 郵箱不行，我使用的 Gmail 註冊的）

然後建立自己的 app

這個 App 名字好像是要全網唯一，本想取個 hello-streamlit 的，發現早有人取過了。

然後為你的應用，建立幾個 Heroku 規定的檔案

requirements.txt：依賴包檔案
setup.sh：安裝指令碼，主要是建立資料夾，寫入組態檔
Procfile：啟動指令碼，告訴 Heroku 如何安裝並啟動應用

這些檔案的編碼有固定的格式。

拿到了這份模板後，你就可以基於這份模板建立你的 git 倉庫

git init
git add --all
git commit -m "init"

然後部署到 Heroku

heroku login
heroku create
git push heroku master
heroku ps:scale web=1

按照命令列輸出的URL就可以存取你的應用了。

檢視Heroku紀錄檔：

heroku logs --tail

要想使用自己域名，需要先通過Heroku驗證。然後執行：

heroku domains:add hivecnstats.iswbm.com

使用 Heroku 唯一的缺點就是 Heroku 是需要梯子的，一般人存取不了，沒條件的還是乖乖的備臺伺服器吧。

12. 總結

Streamlit 一個開箱即用的工具集，它可以讓一個普通的個人開發者免於學習繁雜的前端知識，就可以輕鬆、快速的構建一個簡潔、優雅的 web app 應用，這是 streamlit 最吸引人的地方。

對於從事資料分析，機器學習領域的人來說，它絕對是開發神器，但即使你不是這些領域的人，你肯定也會有搭建一個 web app 需求的時候，streamlit 正是你需要的。

到此這篇關於構建視覺化 web的 Python 神器streamlit的文章就介紹到這了,更多相關Python streamlit內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！