不會 Web 開發，也能讓資料“動”起來的開源專案！

削微寒發表於2021-06-23
Web

本文面向有 Python 基礎的小夥伴，有 Web 基礎的更好

作者：HelloGitHub-吱吱

這裡是 HelloGitHub 推出的《講解開源專案》系列，今天要向小夥伴們介紹的是一個能夠快速地把資料製作成視覺化、互動頁面的 Python 框架：Streamlit，分分鐘讓你的資料動起來！

專案地址：https://github.com/streamlit/streamlit

猶記得在做機器學習和資料分析方面的畢設時，曾經為了製作精美的圖表而抓耳撓腮，曾經為了在頁面視覺化、互動式展示資料而絞盡腦汁。現在擺在我們面前的是一個能夠快速視覺化資料並且製作成互動頁面的 Python 框架，只需幾分鐘，就可以快速構建和部署功能強大的資料應用程式，寫到這裡 Streamlit 的高傲已經盡數體現了。

Streamlit - The fastest way to build and share data apps ?

下面我們就一起來上手這個強大的 Python 資料視覺化框架吧！

一、淺嘗輒止

1、本地實驗環境：Python 3.6 - Python 3.8。

2、安裝 Streamlit 體驗官方提供的 hello world 小 demo。

pip install streamlit
streamlit hello

3、執行上述命令後會自動開啟 Streamlit 的初始頁面 http://localhost:8501/。

4、通過左邊欄可以選擇四個內建小專案並檢視其程式碼，例如分形動畫、折線圖和層疊地圖等，能在網頁上點選選擇設定一些引數，動態檢視效果。

二、熟能生巧

通過 Streamlit 提供的介面，完美避開 Django 和 Flask 框架，無需編寫 HTML、CSS、JavaScript 程式碼，與魔幻的前端 say goodbye。

2.1 開發自己的 app

1、首先建立一個 Python 檔案，命名為 test.py，匯入 Streamlit 庫。

import streamlit as st

2、通過如下命令啟動專案，Ctrl + c 即可結束專案。

# filename 自己的 py 檔名稱
streamlit run [filename]

3、當應用程式正在執行時，每次修改 Python 檔案並儲存，網頁都會彈出提示“Source file changed”，可以選擇“Rerun”或者“Always rerun”，使得頁面能夠重新重新整理。忽略掉小小的等待時間，我們能夠在快速互動迴圈中「所見即所得」。

4、我們在任何時候對網頁內容進行更新，包括：修改原始碼、使用者和網頁進行互動（點選網頁的按鈕、輸入文字），Streamlit 都是自上而下掃描解析並且執行整個程式碼。

2.2 基礎命令

2.2.1 顯示文字

命令 效果
st.title() 新增一個標題
st.write() Streamlit 的瑞士軍刀，可渲染如文字、Matplotlib 和 Altair 圖表等幾乎任何資料引數
st.text() 顯示純文字
st.header()、st.subheader() 二級標題和三級標題
st.markdown() 顯示 Markdown
st.latex() 顯示格式為 LaTeX 的數學表示式
st.code() 顯示帶有可選語法高亮顯示的程式碼塊

2.2.2「魔法」

我願稱之為懶人命令——用盡量少的程式碼達到同樣的效果。在不呼叫任何 Streamlit 方法的情況下，當使用者自定義的變數出現在單行中，等同於 st.write() 效果。

import pandas as pd
df = pd.DataFrame({
  'first column': [1, 2, 3, 4],
  'second column': [10, 20, 30, 40]
})

df

也可以將 ''' 和 ' 包裹的內容直接顯示。

# Draw a title and some text to the app:
'''
# Welcome to HelloGitHub

_快來加入我們吧_
'''

x = 10
'x', x  # <-- Draw the string 'x' and then the value of x

2.2.3 顯示資料表

Streamlit 能從多個不同角度快速、互動地視覺化資料，原始資料、圖表、JSON 資料等皆可。

命令 效果
st.dataframe() 將資料框顯示為互動式表格
st.table() 顯示靜態表格
st.json() 將物件或字串顯示為 JSON 字串

2.2.4 繪製圖表和地圖

Streamlit 支援多種流行的資料圖表庫，如 Matplotlib、Altair、deck.gl 等。

命令 效果
st.line_chart() 折線圖
st.area_chart() 面積圖
st.bar_chart() 條形圖
st.map() 在地圖上顯示資料點
st.pyplot() matplotlib.pyplot 圖表
st.altair_chart() 使用 Altair 庫顯示圖表
st.vega_lite_chart() 使用 vega_lite_chart 庫顯示圖表
st.pydeck_chart() 使用 PyDeck 庫繪製圖表

2.2.5 顯示多媒體

動動滑鼠即可將影像、視訊和音訊檔案直接嵌入 Streamlit 應用程式。

命令 效果
st.image() 圖片
st.audio() 音訊
st.video() 視訊

2.2.6 互動式小部件

盯?：漂亮的按鈕、滑塊、輸入框等小部件。每次使用者與小部件互動時，Python 指令碼都會重新執行，並且該小部件的輸出值會在執行期間設定為新值。

1、按鈕 button。

if st.button('HelloGitHub'):
    st.write('Subscribe our channels~')

2、核取方塊 checkbox。

ret = st.checkbox('I love HelloGitHub!')
if ret:
  st.write('Me too~')

3、滑塊 slider，可以選擇 int / float / data / time / datetime 等型別。

age = st.slider('HelloGitHub 幾歲了?', 0, 10, 1)
st.write("HelloGitHub ", age, ' 歲了~')

4、常用的命令列舉

命令 效果
st.radio() 單選按鈕
st.select() 單選框
st.multiselect() 多選框
st.text_input() 單行文字輸入框
st.text_area() 多行文字輸入框
st.number_input() 數字輸入框
st.date_input() 日期輸入框
st.time_input() 時間輸入框
st.file_uploader() 檔案上傳
st.color_picker() 取色器

2.2.7 顯示程式和狀態

1、進度條 progress。

import time
my_bar = st.progress(0)
for percent_complete in range(100):
    time.sleep(0.1)
    my_bar.progress(percent_complete + 1)

2、spinner：在執行程式碼塊時臨時顯示一條訊息。

import time
with st.spinner('Wait for it...'):
    time.sleep(5)
st.success('Done!')
st.balloons()

3、其他

命令 效果
st.balloons() 慶祝氣球
st.error() / st.warning() / st.info() / st.success() / st.exception() 錯誤、警告、提示、成功、報錯資訊提示

2.2.8 效能優化

Streamlit 使用 @st.cache 裝飾器使得頁面能夠快速“無痕”重新整理。當我們給函式打上 cache 標記時，Streamlit 在碰到該函式的時候會檢查三個值：函式名稱、函式體、輸入引數。如果發現這三個值的組合第一次出現，則會執行函式，並且將結果儲存在本地快取中。當下次呼叫該函式時，如果這三個值沒有改變，則 Streamlit 會跳過函式執行，直接讀取本地快取返回結果。

@st.cache
def HelloGitHub(url):
    # 返回相應資料
    return data

# 第一次遇到，執行該函式
d1 = HelloGitHub(DATA_URL_1)

# 傳入引數一致，第二次遇到不會執行該函式
# 而會直接返回前一次計算的結果，d1 = d2
d2 = HelloGitHub(DATA_URL_1)

# 傳入引數不同，重新執行該函式
d3 = HelloGitHub(DATA_URL_2)

2.2.9 佈局設定

1、將互動小部件放入側邊欄。

add_selectbox = st.sidebar.selectbox(
    "Which one?",
    ("C++", "Java", "Python")
)

2、表單 st.form()：將元素與“提交”按鈕一起處理。

# 向表單插入元素
with st.form("my_form1"):
    st.write("我在 1 框框裡~")
    slider_val = st.slider("框框滑塊")
    checkbox_val = st.checkbox("pick me")
    # Every form must have a submit button.
    submitted = st.form_submit_button("1-Submit")

# 亂序插入元素
form = st.form("my_form2")
form.slider("我在 2 框框裡~")
st.slider("我在外面")
# Now add a submit button to the form:
form.form_submit_button("2-Submit")

3、插入列並排的容器

# 官方示例
col1, col2, col3 = st.beta_columns(3)
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")

2.3 修改配置

1、檢視所有的配置選項：streamlit config show。

2、Windows 系統可以在 %userprofile%/.streamlit/config.toml 全域性檔案下或者在當前執行 Streamlit 的資料夾下建立 .streamlit/config.toml 檔案進行設定。

3、某些配置例如外觀、主題等點選網頁上的 Settings 也可輕鬆選擇。

2.4 在 Streamlit sharing 上部署、管理和共享

1、將自己的專案程式碼上傳到 GitHub 的共有倉庫，新增需求檔案以管理任何外部依賴項，例如 requirements.txt 等。

2、在 https://streamlit.io/sharing 上註冊賬號並且申請邀請「Request an invite!」。收到邀請電子郵件後，即可使用該平臺部署管理。

3、選擇 New app 在 Deploy an app 中填入相應資訊即可。

4、若應用程式有很多依賴項，則第一次部署可能需要一些時間，最終應用程式可以使用如下連結訪問：

https://share.streamlit.io/[user name]/[repo name]/[branch name]/[app path]

三、精益求精

到此，Streamlit 框架的基本介面和用法都已經講完啦！更多詳情還需要友友們在實踐中探索，並將指令成功“嵌入”到自己的專案中。

很多命令在文件的「API cheat sheet」中都可以快速搜尋到，希望很快就能夠在 Streamlit Gallery 上看到大家分享的應用，可以留言給我地址我會去把玩的~。

最後，您的關注和點贊是對我們 HelloGitHub 莫大的支援，我們將會為您源源不斷推送新鮮、有趣的開源專案。

關注 HelloGitHub 公眾號 第一時間收到更新。

還有更多開源專案的介紹和寶藏專案等待你的發現。

相關文章