Step 1 — 整理資料夾結構

你下載的所有檔案目前都在同一個資料夾。請依下圖建立兩個子資料夾 backend 和 frontend/src/components，把對應檔案搬進去。

Project Structure - ecg-cnn-analyzer

ecg-cnn-analyzer/ ← 專案根目錄 │ ├── backend/ ← Python API 環境 │ ├── main.py │ ├── model.py │ ├── trainer.py │ ├── data_loader.py │ └── requirements.txt │ ├── frontend/ ← React 前端環境 │ ├── src/ │ │ ├── components/ ← 模組化元件 │ │ │ ├── ConfigPanel.jsx │ │ │ ├── TrainingDashboard.jsx │ │ │ ├── MetricsPanel.jsx │ │ │ └── PredictionPanel.jsx │ │ ├── App.jsx │ │ ├── main.jsx │ │ └── index.css │ ├── index.html │ ├── package.json │ ├── vite.config.js │ └── .env.example │ └── README.md

Step 2 — 上傳到 GitHub

前往 github.com/new，建立新 Repository，名稱填 ecg-cnn-analyzer，選 Public，不要勾 README（我們自己有）。

開啟 Git Bash（Windows）或終端機，進入剛才整理好的資料夾：

cd 你的路徑/ecg-cnn-analyzer
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的帳號/ecg-cnn-analyzer.git
git push -u origin main

若沒安裝 Git，請先到 git-scm.com 下載安裝後再執行上方指令。

也可以用 GitHub Desktop（圖形介面），直接拖曳資料夾進去即可，對不熟命令列的人更友善。

Render.com 後端部署（FastAPI）

Render 免費方案可跑 FastAPI，冷啟動約 30 秒。請依以下步驟操作：

前往 render.com 註冊（可用 GitHub 帳號登入）。

點選 New → Web Service，連結你的 GitHub，選擇 ecg-cnn-analyzer repo。

填寫以下設定：

Name	`ecg-cnn-backend`
Root Directory	`backend`
Runtime	`Python 3`
Build Command	`pip install -r requirements.txt`
Start Command	`uvicorn main:app --host 0.0.0.0 --port $PORT`
Instance Type	Free

點 Create Web Service，等待約 3-5 分鐘建置完成。完成後你會拿到一個 URL，例如：
https://ecg-cnn-backend.onrender.com
請複製這個 URL，下一步會用到。

驗證：瀏覽器開啟 https://你的網址/health，應該看到：

{"status": "ok", "jobs_active": 0}

Render 免費方案閒置 15 分鐘後會休眠，第一個請求需等 30 秒喚醒。若需要常駐可升級 $7/月方案。

Netlify 前端部署（React）

前端部署到 Netlify，並設定環境變數指向剛才的 Render 後端網址。

前往 netlify.com 用 GitHub 帳號登入，點 Add new site → Import an existing project。

選擇 GitHub → 選 ecg-cnn-analyzer repo，填寫建置設定：

Base directory	`frontend`
Build command	`npm run build`
Publish directory	`frontend/dist`

重要！在 Environment variables 區塊加入這兩個變數（把網址換成你的 Render URL）：

VITE_API_URL	`https://ecg-cnn-backend.onrender.com`
VITE_WS_URL	`wss://ecg-cnn-backend.onrender.com`

注意 WS URL 用 wss://（加 s），不是 ws://，因為 Render 是 HTTPS。

點 Deploy site，約 1-2 分鐘後取得前端網址：
https://ecg-analyzer-xxx.netlify.app

日後只要 git push，Netlify 和 Render 都會自動重新部署（CI/CD 已內建）。

前端完整操作流程

#	功能區	操作說明
1	左側設定面板	調整卷積層數（1-4）、核大小、學習率、Epochs 等超參數。董事報告建議起始設定：layers=2, kernel=5, lr=1e-3, epochs=20, data=mitbih。
2	開始訓練	點「開始訓練」後，左上角出現綠色「訓練中」標籤。 `POST /train` 送出設定 → 收到 `job_id` → WebSocket 自動連接。
3	訓練監控分頁	即時顯示每個 epoch 的 Train Loss / Val Loss / Accuracy 曲線。底部日誌欄顯示每 5 epochs 的詳細數字。觀察重點：若 val_loss 持續高於 train_loss，代表過擬合，需提高 Dropout 或減少層數。
4	模型指標分頁	訓練完成後自動跳轉。顯示： • 混淆矩陣：對角線越亮綠 = 分類越準 • F1 分數柱狀圖：紅色代表 F1 < 0.85，該類別需要加強 • Macro Avg：向董事報告的核心數字
5	預測分析分頁	上傳真實 ECG CSV（每行 187 個數值）→ 顯示每筆的分類結果與信心度。點「分析」按鈕觸發 Grad-CAM：黃色填充區域就是模型判斷異常的關鍵波段，可直接截圖放入董事報告。
6	下載報告	右上角「下載 .md 報告」→ 取得包含混淆矩陣、F1 表格、損失摘要的完整 Markdown 報告。可直接貼入 Notion / Confluence，或轉為 PDF 交給董事會。

調參建議（向董事報告前）

V 類召回率低	改用 `FocalLoss`，或增加卷積層數至 3
收斂太慢	學習率從 `1e-3` 改 `1e-2`，或換用 `AdamW`
過擬合（val > train）	提高 Dropout 至 0.4，或減少 Epochs
正式報告前	將 `data_source` 改為 `mitbih`，使用真實心律資料驗證

三步驟部署指南：GitHub 上傳、Render 後端、Netlify 前端及前端操作說明