從零開始:輕鬆入門您的第一個Streamlit應用程式

Sean Yeh
Python Everywhere -from Beginner to Advanced
13 min readApr 19, 2024

--

Mosque–Cathedral of Córdoba, Córdoba, Spain photo by Sean Yeh

什麼是Streamlit?

Streamlit是一個開放原始碼工具。特別是為了數據科學工作者和開發者準備的工具,使用 Streamlit 可以幫助他們快速製作使用數據相關的網頁應用程式。

由於使用了Streamlit,從呈現最初的概念想法到展示最終的成品都變得非常快速,尤其對於展示機器學習模型和畫圖表來說特別有用。因此,我們可以總結Streamlit的特色:

簡單易用:

Streamlit讓開發者只需要寫很少的程式碼就可以做出很棒的功能。它提供了很多工具和功能,比如scrollbar拉桿、按鈕和圖表,讓開發者可以很容易地加入不同的元素。

即時更新:

在開發時,當工程師改變程式碼時,Streamlit的應用程式會自動重新啟動,並且馬上顯示更新的結果。這樣的回饋機制讓調整和改善的過程更有效率。

容易使用:

你可以很容易地把做好的Streamlit應用程式放到網上的雲端平台,像是Heroku、AWS或Azure,這使得分享你的應用程式給其他人或合作伙伴變得非常便捷。

支援許多工具:

Streamlit天生就支援很多數據處理和機器學習的工具,像是Pandas、NumPy、Matplotlib、Plotly等,這讓開發者可以直接在應用程式中處理和展示數據。

豐富的社區資源:

Streamlit是一個活躍的開源專案,擁有一個快速成長的社區和很多學習資源、範例和擴展功能。不論你是剛開始學或者已經是個有經驗的開發者,都可以在這個平台找到幫助和靈感。

以下是Github 知名度的比較圖(來源:star-history.com)。可以看到代表Streamlit的紅色線條,在2020之後快速崛起。

綜上所述,Streamlit特別適合那些想要快速開發數據相關互動式應用程式的人。它讓開發過程變得簡單,降低了把數據變成洞見的難度,讓開發者能專注於創建有價值的應用程式。接下來,我們就來看看該如何開始使用這套工具。

如何安裝 Streamlit?

要使用 Streamlit 前必須先使用 venv建立環境並使用 pip安裝 Streamlit。因此,您必須確保電腦上已經安裝了Python。

1. 設定虛擬環境

在開始建立虛擬環境之前,先在您的終端機使用 pip3 list確認您的電腦環境中是否已經妥善安裝 virtualenv套件。如果執行上面指令後,沒有看到 virtualenv 相關字樣,就請先安裝 virtualenv套件。套件的安裝方式為:

pip3 install virtualenv

當您確認 virtualenv套件已經妥善安裝在電腦環境之後,就可以開始建立一個虛擬環境。

首先,在電腦中建立一個專案資料夾,並且在該資料夾下輸入並執行下列指令,就可以自動產生一個叫做env的虛擬環境。

virtualenv env

值得注意的是,在執行上面指令前,必須確認目前所在的路徑(current directory)確實是在專案資料夾下面。如果不確定是否正在資料夾中,可以在終端機使用pwd指令來確認。

2.啟動虛擬環境

虛擬環境安裝完畢之後,就可以使用下面指令啟用虛擬環境。

source env/bin/activate

3. 安裝 streamlit 套件:Hello World

完成啟動虛擬環境的流程之後,我們就可以在虛擬環境下,執行以下的指令來安裝streamlit 套件。

pip install streamlit

安裝完畢之後,在終端機執行下面語法啟動應用程式:

streamlit hello

啟動的網頁,立刻在預設的瀏覽器中顯示。其網址為:
http://localhost:8501

您所看到的畫面或許會與上面的不同。在本文撰寫時Streamlit 的版本為1.32.2。如果不確定自己安裝的版本是多少的話,可以在終端機執行下面的指令檢查自己目前所安裝的版本:

streamlit — version

4. help指令

如果執行下面指令,就會顯示一些streamlit可以用的指令:

streamlit - help 

例如,我們剛剛使用hello指令,會執行 Streamlit Hello World的demo頁面;使用run指令,就可以執行自己的專案。因此,我們接下來會比較常使用這個指令。

建立第一個App

以上說明使用了官網提供的範例並執行的結果。從現在開始,我們要透過同樣的方式自己寫一個app應用程式。

匯入 streamlit 套件

首先,在專案資料夾中建立一個檔案,例如命名為 app.py。在 app.py 檔案中,您可以撰寫以下的程式碼作為開始:

# app.py
# 核心套件
import streamlit as st


def main():
"""主函式中撰寫您的程式碼"""
pass


if __name__ == '__main__':
main()

在這段起始程式碼中,我們首先匯入了 Streamlit 套件,接著建立了一個名為 main 的函式。透過檔案底部的 if __name__ == '__main__' 判斷,確保每次執行 app.py 時,main 函式將被呼叫。

當您準備好 app.py 檔案後,在終端機中輸入以下指令來執行應用程式:

streamlit run app.py

執行上述指令後,Streamlit 將在瀏覽器上開啟一個「空白」介面。此時的網址應為:http://localhost:8501。界面呈現空白是因為在 main 函式中目前僅有一個 pass 語句,意味著暫時不執行任何操作。

A.添加文字

## 主標題##

接下來,我們介紹一些基本的方法。當我們需要標題時,可以使用title()來添加標題:

st.title("Hello World")

main函式可以做以下的修改,用以添加標題:

def main():
"""主函式中撰寫您的程式碼"""
st.title(“Hello World”)

不需要重新啟動伺服器,我們只需要重新整理瀏覽器,介面上就會出現一個 Hello World 的標題(如下畫面)。

如果覺得每次變動程式碼內容,都要「重新」整理瀏覽器很麻煩的話,Streamlit也提供了一個「自動執行」的功能,方便大家開發。

如果要使用這個功能,可以在Settings的地方開啟(如下畫面):

只要勾選畫面上的「Run on save」即可開啟這個功能。

開啟完畢後,可以修改幾個字並且儲存看看。

def main():
"""主函式中撰寫您的程式碼"""
st.title(“Hello World!!!”)

果然,不用重新整理,瀏覽器裡面的Hello World就多了幾個驚嘆號了。

這樣不是很方便嗎?

## 次標題##

除了加上主標題之外,您一定會想「是否可以加上次標題?」當然,下面的方式就可以在畫面上加上一組次標題:

st.subheader("This is a subheader")

## Markdown語法##

除了,主標題次標題之外。我們定會需要在頁面上替文字添加不同的效果。因此streamlit也提供開發者可以使用Markdown語法來進行編輯。使用的方式很簡單:

st.markdown("# This is a Markdown")

只要在markdown()的括弧裡面加上Markdown語法編輯過的內容就可以了。舉例說明,我們可以寫出下面的內容:

 st.markdown('# Markdown H1')
st.markdown('## Markdown H2')
st.markdown('### Markdown H3')
st.markdown('#### Markdown H4')

執行後可以看到,畫面中呈現出使用上面四個Markdown語法後顯示的結果。

使用markdown語法的結果

B.添加文字樣式

另外,想要只做類似Bootstrap框架中alert元件的那種效果(如果不清楚的話,可以循這個網址去看看:https://getbootstrap.com/docs/5.3/components/alerts/),也可以很簡單的使用下面的方式達成同樣的效果:

# 成功
st.success("Successful")

# 警告
st.warning("This is a warning")

# 資訊警報
st.info("This is an info alert")

# 錯誤警報
st.error("This is an error alert")

# 異常警報
st.exception("This is an exception alert")

執行後可以看到,畫面中呈現出使用上面幾個類似Bootstrap框架中alert元件會顯示的結果。

類似Bootstrap框架中alert元件的效果

C.顯示資料

## 顯示CSV資料##

我們可以很輕鬆的將讀入的CSV檔案,以DataFrame的方式呈現在畫面上。下面是讀取與呈現的方式:

# app.py
# 核心套件
import streamlit as st
import pandas as pd

def main():
"""主函式中撰寫您的程式碼"""
# 顯示CSV資料
df = pd.read_csv("data/iris.csv")
st.subheader("This is a df")
st.dataframe(df)

if __name__ == '__main__':
main()

透過pandas,我們可以讀取CSV檔案並做成DataFrame形式。並且將結果藉由streamlit的介面顯示出來:

可以使用table呈現:

st.table(df)
table

也可以使用write呈現:

st.write(df.head())

其中df.head()會顯示頭部五筆資料。

或者是設定DataFrame的寬度與高度:

st.dataframe(df, 200, 200)

設定200 X 200讓畫面變得非常的小。

這些都是pandas裡面的用法。因此,當您使用平時熟悉的資料科學工具如pandas取出資料後,可以很方便的透過Streamlit將結果呈現出來。

## 顯示JSON資料##

不僅是CSV檔案,Streamlit也可以顯示JSON格式的資料:

data = {'data': 'name'}
st.json(data)

D. write函式

這可以說是一個很特別的函式,它可以添加很多東西,可以說是 Streamlit 指令中的瑞士刀。它會根據您提供給它的東西進行不同的工作。

其基本範例是在輸入為字串時繪製 Markdown 格式的文字:

st.write("## This is a markdown text")

此外,st.write() 也接受其他的資料型態,例如 數字、Dataframe、格式化的Dataframe和各種物件:

# 數字
st.write(1+2)

# Dataframe
st.write(pd.DataFrame({
'column1': [1, 2, 3, 4, 5],
'column2': [100, 200, 300, 400,500],
}))

以上是 st.write 在 DataFrame上的結果。

結論

Streamlit 是專為快速製作數據視覺化儀表板而設計的工具。這個工具的目的是讓前後端的程式碼的編寫變得更簡單,讓軟體工程師可以快速建立互動性高的應用程式。Streamlit 支援各種互動式元件,比如scrollbar拉桿、按鈕和圖表,使得即使不擅長前端開發的工程師也能輕鬆建立功能豐富的應用程式。 除了Streamlit,或許您也聽過其他的Web應用框架,例如Gradio、FastAPI或者是Flask等等。

Gradio 是專門用於建立互動式儀表板的工具,特別適合用來展示機器學習模型。雖然它的主要優點在於簡便性及對機器學習模型的良好支援,讓開發者能快速展示模型的效果,但與Streamlit相比,Gradio 在自訂功能和元件的多樣性上略顯不足。

另外,FastAPI 是一個現代的高效能Web框架,主要用來建立API。它會自動生成API文檔,並原生的支援Python非同步程式碼,是個非常適合處理同時大量請求的應用程式。儘管FastAPI 的性能很強,但對於需要迅速完成前端整合的數據視覺化專案來說,Streamlit 更直覺。

最後來看Flask,它是一個輕量級的Web框架,以易於學習聞名,非常適合小型應用程式和微服務的開發。它本身非常靈活,適合需要從頭精確控制Web應用程式各部分的開發者。不過,這種靈活性可能會減緩開發的速度,特別是在開發較複雜的互動式應用時。

綜上所述,考慮到開發速度、使用者互動和數據視覺化的需要,Streamlit 展現出明顯優勢。它不僅能提供快速的開發週期,而且還讓開發者可以專注於數據處理和商業邏輯,無需擔心複雜的前端程式碼。因此,對於希望快速建立並部署數據視覺化專案的開發者來說,推薦使用 Streamlit 作為主要開發框架。在下一篇我們將繼續介紹 Streamlit的其他功能與用法。

--

--

Sean Yeh
Python Everywhere -from Beginner to Advanced

# Taipei, Internet Digital Advertising,透過寫作讓我們回想過去、理解現在並思考未來。並樂於分享,這才是最大贏家。