寫在之前
新開個系列，有段時間沒在社群更新文章了， 經歷都花在了知識星球裡，大概從 2 個月前在星球裡搞起了直播， 直播內容就是線上寫程式碼， 寫這個 AI 評測平臺，目前已經把多模態（mllm）相關的內容都直播寫完了， 下一次就是文件解析了。 下一次想把直播搞成公開的，應該會在 2 周後，到時候歡迎感興趣的同學來聽聽。
過往的公開直播影片連結可以翻閱：
https://docs.qq.com/sheet/DS2tDQ1pEUFFmbFVK?tab=BB08J2
現在呢， 我把一些關鍵內容用文字記錄下來， 也方便不喜歡看影片的同學翻閱。
streamlit 的入門 DEMO
streamlit 是一個純的 python 庫，專注於快速構建 web 視覺化領域。 我對於它的評價就是 快 使用 streamlit 可以非常快速的在頁面上開發視覺化圖示和相關的互動，並且它可以與 python 的 pandas 庫緊密的整合在一起，比如我們可以用一行程式碼就把一個 dataframe 渲染成 web 上的表格。
import streamlit as st
import pandas as pd
def main():
# 建立一個示例資料框
data = {
'列1': ['資料1', '資料2', '資料3'],
'列2': ['資料A', '資料B', '資料3']
}
df = pd.DataFrame(data)
# 顯示資料框
st.dataframe(df) # 這行程式碼就是把dataframe渲染出來
if __name__ == "__main__":
main()
然後只需要執行：
streamlit run test.py
效果如下：
PS: 只需要使用 pip install streamlit 就可以使用 streamlit 命令了。
Streamlit 的優缺點
在資料領域 pandas 的大名還是很響亮的， 所以在做資料相關的測試人員當中，pandas 是必學技術之一。 而資料是 AI 領域的基石，所以在這個領域裡的測試人員很多時候也是需要使用 pandas 的。 比如我在工作中就是高度依賴 pandas 來完善資料的管理和指標的計算。 所以 streamlit 非常適合在這樣場景中完成快速的 web 視覺化能力的工作。
streamlit 也是提供了不少與 pandas 整合的能力， 比如使用 streamli 提供的資料庫連線方法， 那麼它查詢出來的資料會自動的被轉換成 dataframe 格式以方便使用者一鍵渲染到頁面中。 比如：
import streamlit as st
from sqlalchemy import text
def get_db_connection():
conn = st.connection(
"mysql",
type="sql",
url="mysql://root:1qaz9ol.@9.134.12.32:3306/ai_tester?charset=utf8mb4",
ttl=360,
autocommit=True
)
return conn
class MLLMTask:
def __init__(self, conn):
self.conn = conn
def get_tasks(self):
sql = 'SELECT * FROM mllm ORDER BY id DESC'
result = self.conn.query(sql, ttl=0)
return result
上述的程式碼返回的結果直接就是一個 dataframe，也是一行程式碼就可以渲染到 web 頁面中。 在 streamlit 中也有很多控制元件，比如 button， input，checkbox 等，比如下面定義一個 form：
def on_click():
task_name = st.session_state['task_name']
output_path = f'static/mllm/{task_name}.xlsx'
task_id = db_mllm_task.add_task(task_name, status='running', output_path=output_path)
process_mllm = Process(target=call_mllm_task, args=(task_id, output_path))
process_mllm.start()
with st.popover("建立多模態測試任務"):
with st.form(key='mllm_test_task'):
st.text_input('任務名稱', key='task_name')
st.form_submit_button("提交", on_click=on_click)
透過上面的一段簡單的程式碼就可以完成表單的提交工作了。 streamlit 還專門設計了一種資料互動方式，也就是透過快取進行互動。 在 streamlit 中所有的控制元件都有一個 key 屬性，就比如上面的 form，text_input, button 都有 key 屬性，使用者可以手動指定 key，如果不指定，控制元件顯示的文字就是它的 key。 streamlit 會維護一個 dict 叫 session_state。 每個控制元件的值都會被儲存在這個 dict 中， 使用者可以根據 key 在需要的時候找到控制元件的值， 比如上述程式碼中就是用了
task_name = st.session_state['task_name']
上面這段程式碼取出了使用者在輸入框中輸出的值。 這樣我們就可以很簡單的在程式碼中與控制元件和業務邏輯建立聯絡。 PS：session_state 是一個 dict， 所以我們自己也可以向裡面塞入自己需要的資料，這樣可以做到跨頁面或者更復雜的邏輯控制和資料交換。
以上的一切都是 streamlit 便利的地方， 更多的內容我們後續在從 0 到 1 寫 AI 平臺的文章裡展現出來。 接下來我們說說它的缺點吧， 它提供了很便利的資料視覺化能力，但它與使用者互動的能力就會相對弱一些。 比如 streamlit 裡沒有路由，所有頁面展示和邏輯控制需要透過 session_state 來決定應該執行什麼程式碼， 展示什麼內容。 但這不利於過於複雜的業務邏輯，所以需要我們透過 streamlit 提供的較為原始的介面來實現路由的功能。 又比如 streamlit 的表格不支援在裡面新增 button，或者跟表格的互動會有點繁瑣。 當然這些都是可以用其他方法解決的， 但我想說的是如果我們要做的事情跟使用者有很複雜的互動，那確實不太適合 streamlit。 還是交給專業的前端框架更好， 也就是經典的 3 大框架：react，vue 和 angular。 但使用這三種框架所需要的學習成本和開發成本都要高的多。
結尾
該回家了， 今天就先寫這麼多吧。 下一次更新 streamlit 更多的內容，也開始寫一些 AI 評測平臺的東西。