TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Gradio 互動報表工具：把 Python 分析變成同事能自己篩的網頁
已經能跑的 Python 分析，同事每次換地區或日期就要重跑一次。實際安裝 Gradio 6.30.0，把訂單分析函式接上下拉選單、指標、明細與 CSV 下載，本機啟動後核對畫面與下載檔數字一致，並整理本機、臨時分享連結與 Spaces 的邊界，以及 mcp_server 把報表變成 AI 工具的接口。
用 AI 摘要這篇文章：
會用 Python 做分析的人，遲早撞上同一種來回：訂單金額早就算得出來，但同事要的是「我自己選地區、選日期再看一次」的畫面。於是每次對方換個條件，你就得回終端機重跑一次，把結果截圖或存成 Excel 貼過去。這段來回卡住的原因很簡單：計算的人和操作的人不同。
Gradio 是 Hugging Face 維護的開源 Python 套件，做的正是這個縫隙：替既有 Python 函式長出一個網頁介面，讓操作的人自己選條件、自己按按鈕。你在 TechMoon 看過的 FunClip 開源剪輯工具 與 Linly-Dubbing 影片翻譯配音流水線，網頁操作區底層都是它。專案在 GitHub（gradio-app/gradio）採 Apache-2.0 授權，截至 2026 年 10 月 20 日累積 43,818 個星星，最近一次提交在同日，維護狀態相當活躍。我實際用它把一份訂單分析包成可篩選的網頁報表，跑在本機、用瀏覽器實際操作一輪，也把分享方式與 AI 工具鏈的介面各自驗了一遍。這篇記錄怎麼做、怎麼核對數字，以及哪些地方它幫不上忙。
分析函式先站穩，介面才有東西可接
接介面之前，先讓純 Python 的部分可以被核對。我編了 12 筆合成訂單當練習資料，欄位只有五個：訂單編號、日期、地區、數量、單價，金額定義成數量乘以單價，另外準備了地區（台北、台中、台南）與日期區間兩個篩選維度。邏輯收在兩個函式裡：filter_orders 負責依地區與日期篩選，日期條件含頭尾兩天；summarize 負責算訂單數、金額合計與平均每筆。
先在完全沒有網頁的情況下跑出基準數字：全部資料 12 筆、17,580 元；台北全期 5 筆、7,240 元；台北 10 月 2 日到 4 日 2 筆、3,740 元；台中 10 月 3 日到 6 日 2 筆、2,940 元；挑一段完全沒有訂單的日期，則是 0 筆、0 元，平均每筆也顯示 0，不會因為除以零而中斷。整理成核對表是這樣：
| 篩選條件 | 訂單數 | 金額合計 | 這格在驗什麼 |
|---|---|---|---|
| 全部，10/1 到 10/8 | 12 筆 | 17,580 元 | 完整資料的基準 |
| 台北，10/1 到 10/8 | 5 筆 | 7,240 元 | 地區條件生效 |
| 台北，10/2 到 10/4 | 2 筆 | 3,740 元 | 地區加日期同時生效 |
| 台中，10/3 到 10/6 | 2 筆 | 2,940 元 | 換地區再驗一次 |
| 全部，10/9 到 10/10 | 0 筆 | 0 元 | 無資料時畫面仍可運作 |
換成自己的資料時，這層有三個地方最容易出錯。日期欄位要能被解析成日期型別，文字框傳進來的就是字串，格式不對篩選會直接出錯，所以輸入格式要寫清楚。金額的定義要只有一處，我的做法是在載入資料時就算好金額欄位，之後所有輸出都讀同一欄，不在各處重算。最容易被忽略的是一列等於一筆的假設：如果一張訂單會拆成多列商品，用資料列數當訂單數就會高估筆數、平均也會跟著錯，這時要先決定計數的單位再談介面。
這組數字是整份報表的對照組。等介面蓋上去之後，畫面上任何一個數字跟這裡對不上，就代表接線接錯了，該修的是介面而不是懷疑自己的分析。反過來說，如果純函式這層的口徑就含糊（折扣要不要算、一張訂單拆多列時筆數怎麼算），加再漂亮的介面也只是在展示一個說不清楚的數字。
介面層只做接線，計算不搬家
介面程式本身不長，核心四十行上下。用 gr.Blocks 開一個畫布，放上地區下拉選單、開始與結束日期兩個文字框、一顆更新按鈕；輸出有四個：指標文字框、明細表、每日金額長條圖、下載 CSV 的檔案區。按鈕用一行 click(report, inputs=[地區, 開始, 結束], outputs=[指標, 明細, 圖, 下載]) 接到函式，就完成了。官方快速入門的說法是它替任何 Python 函式建立網頁介面，實際用起來確實如此：不需要寫 HTML、JavaScript，也不需要把分析改寫成另一種網頁語言。
Gradio 把畫面上的東西叫元件：下拉選單、按鈕、表格、圖表都是元件，輸入元件負責收集條件，輸出元件負責顯示結果，計算始終交給 Python 函式。輸入的排列順序要對應函式的參數順序，輸出的排列也要對應回傳值的順序，接錯了程式會直接告訴你對不上。這種接線式的設計，也決定了每次按更新都是從原始資料完整重算一遍，畫面上沒有偷偷留著上一次的結果，資料換了就反映新的輸入。
輸入元件怎麼選也有下游影響。地區用下拉選單而不是自由文字框，是因為選項清單會原封不動變成工具介面上的列舉值（後面 MCP 那段會看到），選項開得完整，呼叫端就不會送出清單上不存在的地區。
有一個設計細節比看起來重要。report 函式裡只做一次篩選，產生一份篩選結果，再把它分別交給彙總、明細、圖表與 CSV 檔案輸出。四個輸出共用同一份結果，畫面就不會出現「指標更新了、下載檔卻還是全部資料」這種最難被抓到的錯。把檔案路徑交給 File 元件就能提供下載，官方文件也明載這個用法；檔名由篩選條件組成，不同條件的匯出各有各的檔案。這是接線層能保證的部分，至於金額的定義對不對、資料乾不乾淨，介面幫不上忙，那仍然是分析層的責任。
版本細節值得記一筆。Gradio 6 把 theme 這類整個應用層級的參數，從 Blocks 建構子挪到 launch()，官方遷移指南寫得很明白；我在本機用 inspect 檢查 6.30.0 的函式簽名，launch() 確實有 theme 參數、Blocks 已經沒有。我還踩到一個更小的坑：照著舊範例在 launch() 塞 show_api=False，啟動直接 TypeError，因為這個參數在這個版本已經不存在了。抄兩三年前的教學照抄會炸，這是升上 Gradio 6 最實際的成本。環境方面我用在 PyPI 上的現行版 6.30.0（2026 年 10 月 8 日上架，要求 Python 3.10 以上），搭配 Python 3.14.7 與 pandas 3.0.6，安裝與執行都沒有額外障礙。
按下更新之後，回頭核對指標、明細與下載檔
啟動就是一行 python app.py，預設開在本機 127.0.0.1 的 7860 埠，終端機會印出網址，關掉程式報表就跟著停。我用無頭瀏覽器實際操作一輪：地區選台北、日期填 2026-10-02 到 2026-10-04、按更新。畫面出現的指標是 2 筆、3,740 元、平均每筆 1,870 元；明細表只有 A103（3 乘 380 等於 1,140 元）與 A105（1 乘 2,600 等於 2,600 元）兩列；長條圖對應 10-02 與 10-03 兩根；下載區出現一個 112 bytes 的 CSV，打開內容就只有那兩筆。與純函式層的輸出完全一致。
介面動起來之後，先別急著分享，把它當成一次交付來驗收。錯誤路徑也要走一遍。把開始日期填得比結束日期晚，函式會以 gr.Error 擋下，畫面上顯示成明確的錯誤提示，不是讓 pandas 在比較日期時炸出 traceback；這個錯誤會停在畫面上等使用者改條件，後端不需要重啟。選到沒有資料的區間，指標顯示 0 而非崩潰，前面基準那段已經驗過。滑鼠點一輪之外，我也把整份核對寫成腳本跑過：五組條件逐一呼叫介面函式，比對指標、明細與下載檔的內容是否等於純函式層的輸出，並確認日期倒置會被擋下，結果全數一致。把這幾種情況都跑過，換上自己的資料時才有辦法快速分辨「介面壞了」與「資料跟想的不一樣」這兩種完全不同的問題。
核對清單可以濃縮成一句話：同一組條件下，指標、畫面明細與下載檔必須是同一份篩選結果。這句話看起來像常識，但它正是這類快速拼裝的介面最容易出錯、也最容易被忽略的地方。
下載檔值得單獨再看一眼，因為它是同事會留檔、會再轉寄的東西。我把每次產生的 CSV 重新讀回來對照明細，確認檔案內容就是畫面上那兩筆，沒有混入全部資料或上一次的結果；檔名裡帶著條件，開檔前就知道它是哪個組合算出來的。畫面會關掉，檔案會流動，驗收時把檔案當成最終產物看待，出錯才找得到源頭。
分享有三種層次，超過本機就要想清楚
報表在自己電腦上跑，同事打不開，這是下一步要面對的現實。官方的分享指南把分享分成幾個層次，邊界各不相同。
本機網址就是這篇的做法：launch() 綁 127.0.0.1，只有同一台電腦看得到，適合自己確認資料與功能。臨時分享是在 launch() 加 share=True，Gradio 會配給你一個 gradio.live 結尾的臨時網址，公司外的同事打得開，但代價官方文件寫得直接：這種連結一週後失效；公開可存取，任何拿到網址的人都能操作你的報表；分享伺服器只是把你本機的程式代理出去，官方說不會儲存經過應用程式的資料；而且你的電腦關機或程式停止，網址就跟著失效。簽名裡還看得到 share_server_address 這組參數，官方文件也提過可以自架分享伺服器來克服到期限制，這條路我沒有走。所以臨時分享適合拿合成或可公開的資料做展示，不適合當作長期部署，更不該直接把客戶名單接上去換一個連結就傳出去。這個參數的風險不是理論：先前實測的 auto-video-generateor 開源影片生成器 就預設帶著 share=True 啟動，把綁在 0.0.0.0 的自架服務直接開成一條公開隧道。
正式部署則是把程式放上 Hugging Face Spaces 這類代為執行程式的服務，報表才會長期活著，官方文件也把它列為最常見的 Gradio 應用程式託管去處。但資料要放上去、誰能讀誰能下載、運算資源怎麼分配，都要依組織需求另外設定，這部分我這次沒有實際部署，只記文件層的邊界，不假裝走過。
順帶一個與隱私相關的實測：Gradio 預設會回傳使用統計。本機啟動後打開 /config 設定端點，可以看到 analytics_enabled 是 true；把環境變數 GRADIO_ANALYTICS_ENABLED 設為 False 再啟動，同一個欄位就變成 false。本機練習不想上報的話，記得設這個變數。
同一個函式，還能直接變成 AI 的工具
6.30.0 的 launch() 有一個看起來與報表無關的參數：mcp_server。設為 True 之後，整個應用程式會同時以 MCP 伺服器的形式存在；MCP 是讓 Claude Desktop、Cursor、Cline 這類 AI 工具呼叫外部功能的標準介面，官方指南說得直白，把它當 MCP 伺服器啟動只需要這一個參數，安裝時用 pip install “gradio[mcp]” 把相依套件帶齊即可。
我把同一份報表用這個模式重啟，用 MCP 客戶端連本機的 MCP 端點，列出來的工具就叫 report，連輸入格式都自動帶出了地區下拉選單的四個選項當列舉值，連預設值（全部、10 月 1 日到 8 日）都是從我在元件上設的初始值生出來的，不用另外補文件。實際呼叫「台北、10 月 2 日到 4 日」，回傳的內容與畫面完全相同：2 筆、3,740 元、平均 1,870 元，明細就是 A103 與 A105。同一份計算，人用網頁操作、模型用工具呼叫，數字出自同一個函式，這是 Gradio 6 對 AI 工作流程最實際的貢獻。對已經在用 AI 助理寫程式或查資料的團隊，這代表報表不必再另外做一個機器人版：網頁顧人，工具介面顧模型，兩邊看到的數字永遠同一份。同事裡有人用 支援 MCP 的行情工具 查市場資料的話，概念是同一條路：把可核對的函式曝光成工具，讓模型在對話裡自己取用。
兩個立刻會碰到的地雷，和介面管不到的範圍
實際跑的過程裡有兩個立刻會碰到的地雷。連接埠衝突是第一個：上一個 Gradio 程式沒關乾淨又指定了固定埠，啟動會直接失敗，錯誤訊息寫 Cannot find empty port in range: 7860-7860，解法是關掉舊程式，或用環境變數 GRADIO_SERVER_PORT 換一個埠。另一個是前面提過的 API 搬移：theme 位置換了、show_api 消失了，舊範例抄了就炸，遇到 TypeError 時先懷疑版本，再檢查自己的程式碼。
每次按更新都是從原始資料完整重算，這在十二筆練習資料上近乎即時，換成幾十萬列的表，回應速度就取決於篩選與彙總本身，瓶頸落在資料層，介面層使不上力；資料會頻繁變動的場景，還要考慮每次重新載入的時機。
更大的邊界在適用範圍。launch() 簽名裡有 auth 參數可以掛帳號密碼（我在簽名裡親自看到，這次沒有實測），但那是把門鎖起來的層次；同事各自只能看自己的客戶、多人同時修改資料、大量資料的即時查詢，這些屬於權限設計與資料庫工程，介面套件不會替你做。Gradio 解決的是把函式變畫面這一段，把它當成報表系統的全部，期待就放錯地方了。
回到一開始的來回。與其每次幫同事重跑一次，不如花一個下午把既有分析接上篩選欄位，然後帶著一組能核對的數字驗收：介面出來的每個數字，都要能在純 Python 那層找到出處。套件本身免費開源，這條路真正的成本幾乎都花在驗證數字這半小時，而那半小時本來就是你該花的。數字對得上，這條路就成立；對不上，先修接線再談分享。
