我想用Python做網頁,卻不懂前端?Streamlit輕鬆解決!


摘要

每次想用 Python 搞個網頁介面都被前端技術卡住?這篇要聊的 Streamlit 簡直是我們這種人的逃生門——用熟悉的語法就能變出互動網頁,連 JavaScript 是什麼都不用知道。 歸納要點:

  • Streamlit 這東西真的救了我這種後端工程師——不用碰 HTML/CSS,光靠 Python 就能拉出下拉選單跟按鈕,上次做資料篩選介面只花了大概...兩小時?
  • 它和 Pandas 那些數據工具根本是絕配,畫圖表時直接丟 DataFrame 進去就行,雖然有時候排版會跑掉啦(抓頭),但臨時 demo 給老闆看超夠用
  • 最驚豔的是那個即時預覽功能,改完程式碼存檔的瞬間,瀏覽器畫面就自動更新了,根本像在變魔術
當你需要快速把數據成果變成可操作的網頁,卻不想掉進前端技術的兔子洞時。

在資料科學圈子裡,這幾年變化真的挺快的。大概有不少人會發現,有時候分享一份互動性高的資料應用,比單純做個簡報還要來得實在——尤其是那些得常常改數據、測模型的人,好像這種需求就更明顯。有個叫 Streamlit 的東西,名字可能不是所有人都聽過,但它其實算是開放原始碼的工具啦,主要讓寫 Python 的朋友可以輕鬆把程式變成網頁。

其實 Streamlit 也沒什麼太複雜的地方,大致上就是一套函式庫,語法看起來也不怎麼難。有人說,只需要花上一點時間,就能把以前那些只能自己看的分析腳本包裝成能分享給同事或別人打開瀏覽器互動的小網站。當然,不是每個人都有機會接觸到它,但聽說滿多數據分析師會用來做一些原型展示,畢竟速度快嘛,可能不用幾天就能弄出一點成果。有些場景下,如果只是想快速驗證個想法、或跟團隊討論流程,用 Streamlit 好像還挺方便的。不過,它適合哪種專案、到底大家體驗感覺怎樣,那就各自有不同看法了。

偶爾會有人提起:你知道嗎?好像只要寫上三五行程式碼,就可以看到自己的分析即時變成網頁互動元件。雖然這說法可能稍微誇張了點,但確實讓不少搞數據的人省下很多麻煩。

原網址: https://www.pintech.com.tw/tw/column/692/streamlit-interactive-web-app-innovation-data-science

大致上,有些人提到 Streamlit 這個工具,用起來算是挺簡單的——不用太熟悉網頁技術,大概摸一摸就能做出介面。偶爾聽到有人說,像拉條、按鈕、文字框這類互動元件,加入流程裡頭也沒什麼障礙。其實它的即時反應還滿明顯,通常你改點程式內容,很快畫面就會自動更新,也許適合想要快速試驗的人。

另外,Streamlit好像跟市面上一些數據處理或視覺化的函式庫,例如 Pandas、NumPy,那種資料表或數學計算用得上的工具,還有像 Matplotlib 跟 Plotly 這類繪圖套件,都可以搭配著跑。有時候不確定是不是每一種場景都能無縫結合,但至少在不少案例裡看過兩者一起運作。說到底,它的方便程度,大約讓不少剛入門或臨時需要展示資料的人少了點負擔。不過,每個人的需求不盡相同,要不要選它,其實還是得看情境和目的啦。

三分鐘帶你認識Streamlit的核心功能

資料科學家為什麼會想用 Streamlit 呢?嗯,這倒不是什麼稀奇事。有人說,用了 Streamlit 之後,好像不用碰到那些很麻煩的網頁技術,反正只要加個 import streamlit,寫個幾行,就能弄出一個還算吸睛的小網頁。比方說,有些人剛開始接觸的時候,會先玩那個「Sweet Streamlit Hello App」,介面感覺挺直覺的,功能也是一目了然。

其實在數據圈子裡,大概有不少人發現 Streamlit 對於模型部署來講,相對省事。如果你對寫程式沒有太多經驗,也還是可以把成果分享出去,不用特別去學那些複雜的前端東西。這點確實蠻吸引人。

當然啦,有時候做應用程式最怕搞得太複雜,結果連自己都懶得用。Streamlit 的設計思路,好像就是希望大家能很快地把自己的分析或者小工具直接給同事或其他人看。說真的,在軟體開發這件事上頭,「好用」常常比什麼都重要。不過每個人的需求不太一樣,有些場合 Streamlit 也許比較適合,有時候則可能要搭配其他東西一起用才比較妥當。

關於 Streamlit 這種工具,真的有不少人覺得它幫忙省下了許多建立資料互動介面的麻煩。尤其在面對那些資料量偏多的應用,不管是網頁還是手機端,好像都有人會優先考慮這類解決方案。據說有些資料分析領域的人,會藉著 Streamlit,把重心放在數據本身或模型開發,然後再稍微花點心思,就能讓同事或者一些利害關係人看到比較友善、容易上手的成果展示。不過嘛,實際狀況有時候沒那麼絕對,多數人在意的是能不能快速把結果分享出去。

講到安裝流程,其實不用特別大費周章,好像只需要執行一行簡單的 pip 指令就可以了。雖然有人會記不太清楚是不是要加什麼參數,但大致就是輸入個「pip install streamlit」之類的指令就差不多搞定。有些新手可能會卡在這裡,不過多問兩句,大概也就順利過去了。

等你想要啟動 Streamlit 應用程式時,只需透過「streamlit run app.py」這樣的命令行操作。有的人可能會習慣把主程式叫做 app.py,也有人換個名字,其實影響不大。偶爾會出現檔名拼錯的小插曲,再重新打一遍基本也就好了。

整體來說,流程算不上複雜,但細節裡總難免有些小地方得自己摸索一下。如果想要更深入地客製化前端畫面或者跟其他系統串接,那又是另外一回事了,需要研究的東西或許會變得比較瑣碎。不過一般來講,只要目標不是太複雜,用起來還算稱手。

手把手教你安裝並啟動第一個Streamlit應用

Streamlit 這個東西啊,裡面其實有不少小工具可以讓你做出簡單的網頁互動介面。像是在頁面上要弄個大標題,大致上就跟在 HTML 裡面放個 h1 標籤差不多,只是這邊可能一行指令就能搞定。然後有時候,你想秀點資訊或純文字,也不是太複雜,直接給它 markdown 語法就好,系統會自動轉成那種比較漂亮的格式。大家偶爾也會需要用到那種可以輸入字的框吧?就像平常看到搜尋欄那樣子,在這裡給它指定個名字,加上一句提醒用戶該填什麼內容,大概流程就是:使用者剛打完字,變數馬上更新,之後怎麼用都行。

還有喔,如果你想要來點互動,比如說放顆按鈕——只要有人點了,就能啟動某段程式碼。感覺很直觀,不太需要記太多細節。而「次標題」這類東西,其實只是把網頁分門別類、讓架構明顯些,看的人比較不會迷路。有趣的是,有些地方甚至允許你加條彩色線條裝飾一下,那畫面整體看起來活潑許多。不過老實說,用法嘛……大致上就是照著文件範例去調整內容而已。

關於 Latex 嘛,好像在科學或資料分析領域還算常見吧,Streamlit 支援這部分,所以你如果真的得放點公式進去,也不用擔心顯示效果會很糟糕。只需要把那些奇怪的符號和語法包進特定函數,它大致都能幫忙轉換成相當清楚的數學排版。不過實際操作上,有沒有遇到什麼限制…倒是聽說過,但對絕大部分日常需求而言,好像夠用了。

有些時候,像是要展示一點數學公式,無論是很單純的二次方程式,還是那些好像比較麻煩、牽涉積分或總和或者分數的東西,都蠻常見。這種功能讓資料科學相關的專案,看起來可能會更有條理,也順便增添幾分美感。不過,實際上到底能不能讓內容變得多吸引人,好像也沒什麼標準答案。有的人覺得只要資訊清楚就夠了,但有人偏好排版精美一點。其實,有時候只是為了在頁面上擺個公式而已,也不用追求太嚴謹,大致上弄對就可以。

在網頁裡寫數學公式?Streamlit的LaTeX魔法

這個主題其實有點像是,當你偶爾想要快速做些簡單的視覺圖表時,Streamlit 這套工具大概可以派上用場。比方說,如果有人只是想要把一份隨手弄出來的資料丟進去——大致上也就二十多列資料,然後欄位名稱嘛,大約三種,有人會叫它們 a、b、c,也沒什麼特別意思。

關於那些圖表,線圖、長條圖跟區域圖,其實都能用 Streamlit 處理。尤其是那個 st.area_chart 指令,有些情境下感覺蠻方便的。有人可能會發現,它主要就是靠著資料自己的欄名和索引自動猜規格,所以好像不用費力設定太多東西。不過,如果遇到那種它沒辦法正確辨識規則的時候,好像還是得回頭自己寫 altair 的語法才行。

另外,有提到 st.altair_chart,本質上兩者差異就在於客製化程度啦,st.area_chart 偏向快狠準但選項少。有些人說只要單純想畫出來看看就很夠用了,不過碰到複雜狀況還是得自己調整。有朋友試過覺得在將近半數情境下省了不少步驟,但也不是每一次都百分百順利。

然後 sample code 部分嘛,其實寫起來不複雜,就是先把 numpy 跟 pandas 叫進來,再組出一份幾十筆隨機數據,最後挑個區域圖畫出來。至於效果怎麼樣?大致還算直觀,但偶爾格式如果怪怪的,就會需要再微調一下。

有個叫 st.bar_chart 的東西,看起來像是專門用來畫長條圖的,背後其實好像還跟某個 Altair 之類的玩意兒有點關聯。只是這個功能比較偏向快速上手那種,不太需要動太多腦筋去想圖表規格,大約就是把資料直接丟進去,它會根據欄位名稱或索引自動幫你處理。不過聽說遇到它自己猜錯的時候,有些人會改用 st.altair_chart 來細調一點細節。

然後下面那串亂七八糟的碼,其實大致意思就是:先抓一批隨機資料,差不多二十行、三個欄位吧——好像叫「a」、「b」和「c」——這些數字也是電腦自己亂生出來的。最後就把它們直接塞進那個 bar_chart 裡頭,然後等著看結果。有的人可能覺得這步驟很單純,但偶爾也有人會在這裡卡住。至於那些欄位內容怎麼分配?其實很多時候沒人在意,只要能大致看出哪邊高哪邊低,也就夠用了。

Plotly圖表無縫整合進Streamlit的秘訣

有時候,大家會想隨便畫個散點圖。st.scatter_chart 這東西,大概就像是那種「你只想趕快把資料扔進去看個結果」的方式吧,不太需要調整什麼設定。其實它背後好像也是靠 Altair 畫出來的,但通常人不太會特別注意細節。如果 st.scatter_chart 有時猜錯欄位或沒抓對資料規則,好像也不是完全沒辦法補救,聽說可以自己再用 st.altair_chart 指定得更明白一點。

至於範例嘛,有那麼一段程式碼,內容大致意思是先弄了一張約莫二十列、三欄的表格,每欄都亂數填值,然後直接用 scatter_chart 把這些丟進去,看起來差不多就是這樣。

另外有個 st.line_chart,其實和前面那個差不多意思,只是畫的是線形圖。操作邏輯幾乎如出一轍,也是靠 Altair 那套底層在運作。大部分時間,好像不用費心設定太複雜的參數,只要把資料表丟給它就行。有些細節如果自動配對失誤,也還能手動指定欄位或顏色什麼的。不過也有人提過,如果要很細膩地調整,也許還是得回頭用 Altair 自己寫。

範例裡頭,就是隨便建了張表,將近二十列,大致上三個欄位。然後 line_chart 可以讓人選擇哪幾個欄位當 x 軸、y 軸之類,也能自訂顏色,雖然大部分人可能懶得改這些細節啦。

總之,不管散點還是折線,用這兩招臨時看看數據長相倒挺方便,但真要做複雜點或特殊需求,大概就得另尋他法。不過,在某些簡單場合,它們已經夠用了吧。

這篇文章大致上聊了一些 Streamlit 的基本功能,像是用來處理數據科學的小工具。好像不只是單純展示資料,裡面也會說到怎麼加點 Markdown 來讓文字變漂亮,有人還會順手插點 LaTeX 或做幾個互動圖表。這類東西,大概能讓應用程式看起來專業又不至於太枯燥。

印象中,其實 Streamlit 不只局限在這些基礎玩法。有聽朋友提過,他們曾經試著做出那種看起來挺複雜的儀表板,偶爾還跟一些機器學習模型連結起來。介面對新手也沒什麼門檻,畢竟只要拉幾個元件、丟進去就能跑起來。不過,講真的,用久了才發現它可以應付的狀況比想像中多不少——從很簡單的資料探索小專案,到稍微有規模一點的分析平台,好像都有人玩過。

倒不是說每一種場景都適合,但如果只是要快速把想法做成可互動的小網頁、或是臨時湊出一套 demo,其實大約靠這些功能就夠用了。當然啦,每次遇到問題還是得回頭翻下文件,那份說明其實蠻細,也許可以邊摸索邊多練幾次,把更多隱藏招式慢慢挖出來。總之,大致上的情況大概就是如此。如果真有興趣,也許可以考慮自己試一下?

參考來源

只會Python的話,要怎麼做網頁應用程式的前端?

我對用Python寫網頁應用程式很有興趣,想要像Streamlit一樣寫起來輕鬆有趣,但同時也希望能找到一個像Next.js一樣,比較適合正式生產環境的框架。 我 ...

Starfyre - 一個用來創建前端網頁應用的Python 網頁框架

Starfyre 是一個Python 網頁框架 ,旨在簡化前端網頁應用程式的開發。 Starfyre 提供了一個用戶友好且強大的解決方案,用於在Python 生態系統中無縫連接後端 ...


Columnist

專家

相關討論

❖ 相關文章