但對(duì)于 streamlit 來(lái)說(shuō)，請(qǐng)你相信我，這是一個(gè)你可以無(wú)腦去學(xué)習(xí)的框架，我之所以這么說(shuō)，是因?yàn)槲蚁嘈沤K有一天，你一定能用得上它。

Streamlit 是一個(gè)用于機(jī)器學(xué)習(xí)、數(shù)據(jù)可視化的 Python 框架，它能幾行代碼就構(gòu)建出一個(gè)精美的在線 app 應(yīng)用。

它能做什么，取決于你想干什么？

streamlit 的功能強(qiáng)大，要學(xué)習(xí)的函數(shù)雖然多，但非常容易上手，學(xué)習(xí)成本卻遠(yuǎn)比 前端+Flask 來(lái)得低得低。接下來(lái)，我會(huì)一一介紹。

# 1. 如何安裝？

和安裝其他包一樣，安裝 streamlit 非常簡(jiǎn)單，一條命令即可

??pip?install?streamlit?

考慮到 streamlit 會(huì)附帶安裝比較多的工具依賴(lài)包，為了不污染當(dāng)前的主要環(huán)境，我使用 venv 新建一個(gè)虛擬環(huán)境。

??python3?-m?venv?.

然后使用如下命令進(jìn)入該虛擬環(huán)境

??source?./venv/bin/activate

接下來(lái)，再安裝 streamlit ，命令在上邊。

安裝的包比較多（數(shù)了下竟然接近 92 個(gè)？），過(guò)程也會(huì)很久，需要點(diǎn)耐心

??pip?list?|?wc?-l
??????92

在安裝過(guò)程中，可能會(huì)遇到一些問(wèn)題，但也不一定，這取決于你的機(jī)器，如遇到問(wèn)題請(qǐng)自行借助搜索引擎解決。

# 2. 入門(mén)示例

Streamlit 提供了一些入門(mén)示例，執(zhí)行如下命令即可

??streamlit?hello

執(zhí)行后 streamlit 會(huì)自動(dòng)打開(kāi)瀏覽器加載一個(gè)本地頁(yè)面 http://localhost:8501/

這里面有很多的 demo，你可以看一下，這些 Demo 還有對(duì)應(yīng)的配套代碼

這些代碼直接拷貝保存，就可以在本地直接通過(guò)如下命令直接運(yùn)行

??streamlit?run?st-demo.py

# 2. Markdown 文本

導(dǎo)入 streamlit 后，就可以直接使用 st.markdown() 初始化，調(diào)用不同的方法，就可以往文檔對(duì)象中填入內(nèi)容

• st.title()：文章大標(biāo)題

• st.header()：一級(jí)標(biāo)題

• st.subheader()：二級(jí)標(biāo)題

• st.text()：文本

• st.code()：代碼，同時(shí)可設(shè)置代碼的語(yǔ)言，顯示的時(shí)候會(huì)高亮

• st.latex()：latex 公式

• st.caption()：小字體文本

如下我自己寫(xiě)的一個(gè)小 Demo，供你參考

import?streamlit?as?st

#?markdown
st.markdown('Streamlit?Demo')

#?設(shè)置網(wǎng)頁(yè)標(biāo)題
st.title('一個(gè)傻瓜式構(gòu)建可視化?web的?Python?神器?--?streamlit')

#?展示一級(jí)標(biāo)題
st.header('1.?安裝')

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


#?展示一級(jí)標(biāo)題
st.header('2.?使用')

#?展示二級(jí)標(biāo)題
st.subheader('2.1?生成?Markdown?文檔')

#?純文本
st.text('導(dǎo)入?streamlit?后，就可以直接使用?st.markdown()?初始化')

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

Streamlit 運(yùn)行的方式 與普通的腳本 有所不同，應(yīng)該使用 streamlit run st-demo.py

運(yùn)行后就會(huì)自動(dòng)打開(kāi)瀏覽器加載這個(gè)頁(yè)面，如果沒(méi)有自動(dòng)打開(kāi)，也可以手動(dòng)拷貝上圖中的鏈接打開(kāi)訪問(wèn)。

是不是有點(diǎn)那個(gè)味了？就這，還只是開(kāi)胃菜～

# 3. 數(shù)據(jù)圖表支持

?3.1 圖表組件

關(guān)于數(shù)據(jù)的展示，streamlit 由兩個(gè)組件進(jìn)行支持

• table：普通的表格，用于靜態(tài)數(shù)據(jù)的展示

• dataframe：高級(jí)的表格，可以進(jìn)行數(shù)據(jù)的操作，比如排序

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))

效果如下，可以看到在圖示外，有個(gè)向下的小箭頭，你點(diǎn)一下，就會(huì)進(jìn)行排序

除此之外，你還能看到我對(duì)最大值進(jìn)行了高亮顯示，原因是我傳入的參數(shù)是 df.style.highlight_max(axis=0)

其實(shí)還有 n 多種樣式，比如：

• highlight_null：空值高亮

• highlight_min：最小值高亮

• highlight_max：最大值高亮

• highlight_between：某區(qū)間內(nèi)的值高亮

• highlight_quantile：暫沒(méi)用過(guò)

這些你都可以在源代碼中找到示例

?3.2 監(jiān)控組件

在采集到一些監(jiān)控?cái)?shù)據(jù)后，若你需要做一個(gè)監(jiān)控面板， streamlit 也為你提供的 metric 組件

如下代碼創(chuàng)建 三個(gè)指標(biāo)，并且填入對(duì)應(yīng)的數(shù)據(jù)

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%")

刷新頁(yè)面，就能看到下面的效果

?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 的一些原生圖表組件，雖然做到了傻瓜式，但僅能輸入數(shù)據(jù)、高度和寬度，如果你想更漂亮的圖表，就像 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

對(duì)于這部分，熟悉的同學(xué)自行嘗試了，這里不再演示。

# 4. 用戶(hù)操作支持

前面 streamlit 都只是展示文本和數(shù)據(jù)，如果僅是如此，那 streamlit 也就 just so so

對(duì)于那些不會(huì)前端，并且平時(shí)有需要寫(xiě)一些簡(jiǎn)單的頁(yè)面的人說(shuō)，能寫(xiě)一些交互界面才是硬需求。

慶幸的是，你平時(shí)在網(wǎng)頁(yè)上、app 上能看到的交互組件，Streamlit 幾乎都能支持。。

• button：按鈕

• download_button：文件下載

• file_uploader：文件上傳

• checkbox：復(fù)選框

• radio：?jiǎn)芜x框

• selectbox：下拉單選框

• multiselect：下拉多選框

• slider：滑動(dòng)條

• select_slider：選擇條

• text_input：文本輸入框

• text_area：文本展示框

• number_input：數(shù)字輸入框，支持加減按鈕

• date_input：日期選擇框

• time_input：時(shí)間選擇框

• color_picker：顏色選擇器

這些內(nèi)容非常多，也比較簡(jiǎn)單，一個(gè)一個(gè)舉例也沒(méi)必要，大家直接去看 streamlit 源碼里的注釋即可。

# 5. 多媒體組件

想要在頁(yè)面上播放圖片、音頻和視頻，可以使用 streamlit 的這三個(gè)組件：

• st.image

• st.audio

• st.video

# 6. 狀態(tài)組件

狀態(tài)組件用來(lái)向用戶(hù)展示當(dāng)前程序的運(yùn)行狀態(tài)，包括：

• progress：進(jìn)度條，如游戲加載進(jìn)度

• spinner：等待提示

• balloons：頁(yè)面底部飄氣球，表示祝賀

• error：顯示錯(cuò)誤信息

• warning：顯示報(bào)警信息

• info：顯示常規(guī)信息

• success：顯示成功信息

• exception：顯示異常信息（代碼錯(cuò)誤棧）

效果如下：

# 7. 頁(yè)面布局

Streamlit 是自上而下渲染的，組件在頁(yè)面上的排列順序與代碼的執(zhí)行順序一致。

一個(gè)精美的 web app ，只有上下單欄式的布局肯定是不夠的。

實(shí)際上 streamlit 還提供了多種多樣的布局：

st.sidebar：側(cè)邊欄

側(cè)邊欄可以做一些用戶(hù)操作控件

st.columns：列容器，處在同一個(gè) columns 內(nèi)組件，按照從左至右順序展示

st.expander：隱藏信息，點(diǎn)擊后可展開(kāi)展示詳細(xì)內(nèi)容，如：展示更多

st.container：包含多組件的容器

st.empty：包含單組件的容器

# 8. 流程控制系統(tǒng)

Streamlit 是自上而下逐步渲染出來(lái)的，若你的應(yīng)用場(chǎng)景需要對(duì)渲染做一些控制，streamlit 也有提供對(duì)應(yīng)的方法

• st.stop：可以讓 Streamlit 應(yīng)用停止而不向下執(zhí)行，如：驗(yàn)證碼通過(guò)后，再向下運(yùn)行展示后續(xù)內(nèi)容。

• st.form：表單，Streamlit 在某個(gè)組件有交互后就會(huì)重新執(zhí)行頁(yè)面程序，而有時(shí)候需要等一組組件都完成交互后再刷新（如：登錄填用戶(hù)名和密碼），這時(shí)候就需要將這些組件添加到 form 中

• st.form_submit_button：在 form 中使用，提交表單。

# 9. 緩存特性提升速度

當(dāng)用戶(hù)在頁(yè)面上做一些操作的時(shí)候，比如輸入數(shù)據(jù)，都會(huì)觸發(fā)整個(gè) streamlit 應(yīng)用代碼的重新執(zhí)行，如果其中有讀取外部數(shù)據(jù)的步驟（數(shù) GB 的數(shù)據(jù)），那這種性能損耗是非常可怕的。

但 streamlit 提供了一個(gè)緩存裝飾器，當(dāng)要重新執(zhí)行代碼渲染頁(yè)面的時(shí)候，就會(huì)先去緩存里查一下，如果代碼或者數(shù)據(jù)沒(méi)有發(fā)生變化，就直接調(diào)用緩存的結(jié)果即可。

使用方法也簡(jiǎn)單，在需要緩存的函數(shù)加上 @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. 部署上線

在本地編寫(xiě)的 streamlit 應(yīng)用，運(yùn)行起來(lái)后只能在本地訪問(wèn)。

如果需要讓別人也能訪問(wèn)這個(gè)應(yīng)用，那你需要有一臺(tái)服務(wù)器，這樣才能通過(guò)公網(wǎng)ip進(jìn)行訪問(wèn)

如果你需要服務(wù)器，可以點(diǎn) 這個(gè)鏈接 領(lǐng)個(gè)卷有優(yōu)惠。

另外，還有一個(gè)選擇，就是使用 Heroku （https://heroku.com）部署你的應(yīng)用。

Heroku是一個(gè)支持多種編程語(yǔ)言的云平臺(tái)即服務(wù)，你只要注冊(cè)一個(gè)帳號(hào)（聽(tīng)說(shuō)網(wǎng)易和 QQ 郵箱不行，我使用的 Gmail 注冊(cè)的）

然后創(chuàng)建自己的 app

這個(gè) App 名字好像是要全網(wǎng)唯一，本想取個(gè) hello-streamlit 的，發(fā)現(xiàn)早有人取過(guò)了。

然后為你的應(yīng)用，創(chuàng)建幾個(gè) Heroku 規(guī)定的文件

• requirements.txt：依賴(lài)包文件

• setup.sh：安裝腳本，主要是創(chuàng)建文件夾，寫(xiě)入配置文件

• Procfile：?jiǎn)?dòng)腳本，告訴 Heroku 如何安裝并啟動(dòng)應(yīng)用

這些文件的編碼有固定的格式，我這邊編寫(xiě)好了一份模板下載地址 https://www.lanzout.com/ikMWkxqktgj

拿到了這份模板后，你就可以基于這份模板創(chuàng)建你的 git 倉(cāng)庫(kù)

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

然后部署到 Heroku

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

按照命令行輸出的URL就可以訪問(wèn)你的應(yīng)用了。

查看Heroku日志：

heroku?logs?--tail

要想使用自己域名，需要先通過(guò)Heroku驗(yàn)證。然后運(yùn)行：

heroku?domains:add?hivecnstats.iswbm.com

使用 Heroku 唯一的缺點(diǎn)就是 Heroku 是需要梯子的，一般人訪問(wèn)不了，沒(méi)條件的還是乖乖的備臺(tái)服務(wù)器吧。

# 12. 總結(jié)一下

Streamlit 一個(gè)開(kāi)箱即用的工具集，它可以讓一個(gè)普通的個(gè)人開(kāi)發(fā)者免于學(xué)習(xí)繁雜的前端知識(shí)，就可以輕松、快速的構(gòu)建一個(gè)簡(jiǎn)潔、優(yōu)雅的 web app 應(yīng)用，這是 streamlit 最吸引人的地方。

對(duì)于從事數(shù)據(jù)分析，機(jī)器學(xué)習(xí)領(lǐng)域的人來(lái)說(shuō)，它絕對(duì)是開(kāi)發(fā)神器，但即使你不是這些領(lǐng)域的人，你肯定也會(huì)有搭建一個(gè) web app 需求的時(shí)候，streamlit 正是你需要的。