9.3 TensorFlow.js

範例程式：

TensorFlow.js 可以讓模型在瀏覽器或 Node.js 中執行。本篇使用合成三類表格分類資料訓練 Keras 模型，示範如何保存模型、準備 TensorFlow.js 轉換指令、檢查匯出目錄，並產生一份可放進網頁的推論範本。

1. 學習目標

如果模型要放到網頁上互動，例如即時分類、前端 demo 或不想把資料送到伺服器，可以考慮 TensorFlow.js。基本流程如下：

訓練 Keras 模型 -> 儲存 .keras -> 轉成 TF.js 格式 -> 前端載入 model.json -> 在瀏覽器推論

本篇 Notebook 會保持可執行：即使環境沒有安裝 tensorflowjs 轉換器，也會輸出轉換指令與瀏覽器端推論模板；若環境已安裝轉換器，則可直接執行轉換。

2. TensorFlow.js 匯出格式

TensorFlow.js model 通常是一個資料夾，包含：

檔案	作用
model.json	模型結構、權重 manifest、輸入輸出資訊
group1-shard*.bin	權重檔案
自訂 metadata	class names、前處理參數、版本資訊

前端載入時通常會指向 model.json：

const model = await tf.loadLayersModel('/tfjs_model/model.json');

3. 轉換指令

常見轉換方式是先安裝 converter：

pip install tensorflowjs

再把 Keras 模型轉成 TensorFlow.js layers model：

tensorflowjs_converter \
  --input_format=keras \
  saved_model.keras \
  tfjs_model

若模型包含自訂 layer 或特殊前處理，需確認 TensorFlow.js 是否支援對應 op。

4. 本篇實作流程

Notebook 會完成：

1. 訓練小型 Keras 三類分類模型。
2. 儲存成 .keras。
3. 產生 metadata.json，記錄 class names 與標準化參數。
4. 檢查目前環境是否安裝 tensorflowjs。
5. 若已安裝，執行轉換；若未安裝，輸出可複製的轉換指令。
6. 產生 index.html 推論範本，示範如何載入模型與送入數值特徵。

5. 前處理要一起帶到前端

TensorFlow.js 部署常見錯誤不是模型轉換失敗，而是前端前處理和 Python 訓練時不一致。本篇使用 StandardScaler，因此會把 mean 與 scale 寫入 metadata，讓前端可以使用同樣的標準化公式：

const scaled = rawFeatures.map((x, i) => (x - mean[i]) / scale[i]);

6. 如何套用到自己的模型？

替換成自己的模型時，請確認：

1. Keras 模型不依賴 TensorFlow.js 不支援的自訂運算。
2. model.json 與 .bin 權重檔都放在可被網頁讀取的位置。
3. 前端輸入 shape 與 Python 訓練時一致。
4. 前處理規格、class names 與 threshold 另外保存。
5. 在瀏覽器端抽樣比對 Python 預測結果。

若模型很大，瀏覽器端載入時間會變長，可能需要壓縮、量化或改成後端 API 推論。

7. 小結

TensorFlow.js 適合建立互動式前端 demo 或本機瀏覽器推論。部署時不要只關心轉換指令，還要把前處理、輸入 shape、class names 與模型版本一起保存，才能讓前端推論結果和 Python 訓練環境一致。