L02｜模型部署：把模型變成網頁 App
設計自己的專案、收集資料、訓練模型，再用 Hugging Face Spaces 和 Gradio 部署成大家都能用的網頁。
L02｜模型部署：把模型變成網頁 App（Deployment）
零基礎提示
- 這一課不用額外數學
- 看不懂的詞查 白話小辭典
- 字幕：離線網站選「中英」（電腦翻譯，大意正確）
設計自己的專案、收集資料、訓練模型，再用 Hugging Face Spaces 和 Gradio 部署成大家都能用的網頁。 （Design your own project, build a dataset, train a model, and deploy it on the web with Hugging Face Spaces and Gradio.）
| 項目 | 內容 |
|---|---|
| 所屬 | Part 1：Practical Deep Learning |
| 影片 | YouTube |
| 對應書本章節 | 第 2 章 Production |
| 原始頁面 | Lessons/lesson2 |
| 難度（F3 視角） | ★★☆☆☆ 基礎 |
影片
本課重點
- 先找問題和資料：建模型前第一步是選一個你在乎、而且找得到資料的問題。課堂範例是分辨灰熊、黑熊和泰迪熊。
- 資料轉換與增強：Resize 可以選 squish、pad、crop；RandomResizedCrop 加上 aug_transforms 會在每個 epoch 給模型看到同一張圖的不同版本，等於免費增加資料，但需要多訓練幾個 epoch。圖片是即時轉換，不會複製出很多檔案。
- 先訓練，再清資料：常見誤解是要先把資料清乾淨才能訓練。實際上先訓練一個模型，用混淆矩陣（confusion matrix）和 plot_top_losses 找出模型錯最多、或答對但沒信心的圖片，再用 ImageClassifierCleaner 清理，效率更高。
- 匯出與載入模型：訓練好後用 learn.export 存成 .pkl 檔，下載後用 load_learner 載入，就能在任何地方預測。
- Gradio + Hugging Face Spaces：在 Spaces 建立一個新 Space，用 git 下載資料夾，加入 app.py 和模型檔，用 Gradio 寫介面（輸入圖片、輸出各類別機率），push 上去就上線了。
- 進階：API 與 JavaScript：Spaces 會提供 API，可以用 JavaScript 自己寫網頁前端呼叫模型，例如 tinypets 範例；也能做多輸入多輸出或串接兩個模型。
- 開發環境：建議安裝 mamba / fastsetup、Windows 用 WSL 與 Terminal、用 GitHub Desktop 做版本控制；先看一次影片，第二次再邊看邊寫程式。
關鍵概念
| 英文術語 | 中文 | 一句話解釋 |
|---|---|---|
| Data augmentation | 資料增強 | 對圖片做隨機裁切、翻轉、旋轉等變化，讓模型看到更多樣的資料 |
| Confusion matrix | 混淆矩陣 | 表格列出每個真實類別被預測成哪個類別，一眼看出哪裡最常錯 |
| plot_top_losses | 最高損失圖 | 列出損失最高的圖片：錯得很有自信，或對但沒把握 |
| Export / load_learner | 匯出／載入 | 把訓練好的模型存檔，之後在別處讀回來使用 |
| Inference | 推論 | 用訓練好的模型對新資料做預測 |
| Gradio | Gradio | 用幾行 Python 就能幫模型做出網頁介面的工具 |
| Hugging Face Spaces | HF Spaces | 免費託管機器學習網頁 App 的平台 |
| Epoch | 訓練輪數 | 模型把整份訓練資料看過一次叫一個 epoch |
認識關聯圖與重點圖
練習題
- 為什麼課程建議「先訓練模型，再清理資料」？這和一般直覺有什麼不同？
- 資料增強（data augmentation）是什麼？為什麼用了之後要多訓練幾個 epoch？
- 下面是一個熊分類器的混淆矩陣：真實灰熊 50 張中有 45 張判對、5 張判成黑熊；真實黑熊 48 張中有 46 張判對、2 張判成灰熊；泰迪熊全對。模型最大的問題是什麼？
- 列出把模型部署到 Hugging Face Spaces 的主要步驟（至少五步）。
- 設計一個你自己的部署專案：要分辨什麼？誰會用？Gradio 介面的輸入和輸出是什麼？
- 中文學生作答：L02_中文F3學生_202611041526
- English student answers: L02_EN_F3_Student_202611041526
