技術架構
本站使用的技術堆疊與基礎設施
系統架構
使用者瀏覽器 伺服器
┌──────────────────┐ ┌──────────────────────┐
│ Canvas 手寫畫板 │ POST │ Nginx 反向代理 │
│ 280 x 280 px │─────────▶│ ↓ │
│ ↓ 縮放 28x28 │ │ Next.js (port 3000) │
│ ↓ 灰階正規化 │ │ ↓ │
│ │◀─────────│ ONNX Runtime 推論 │
│ 顯示辨識結果 │ JSON │ mnist-12.onnx (26KB) │
└──────────────────┘ └──────────────────────┘
│ │
└──── Cloudflare CDN + SSL ────┘
Next.js 16
框架React 全端框架，使用 App Router 架構。前端負責畫面渲染，後端透過 Route Handler 提供 API，一個專案搞定前後端。
React 19
前端使用者介面函式庫，透過元件化開發 Canvas 畫板、辨識結果顯示等互動式 UI。
TypeScript 5
語言JavaScript 的型別超集，為整個專案提供靜態型別檢查，減少執行時期錯誤。
Tailwind CSS 4
樣式Utility-first CSS 框架，直接在 HTML 上用 class 快速建構深色主題與響應式版面，不需要額外寫 CSS 檔案。
ONNX Runtime
AI 推論微軟開源的高效能推論引擎。後端使用 onnxruntime-node 載入僅 26KB 的 MNIST 預訓練模型，對手寫數字圖片進行即時推論。
Canvas API
前端瀏覽器原生繪圖 API，用來實作手寫畫板。使用者筆跡會被縮放為 28x28 灰階圖片，送到後端進行辨識。
Nginx
基礎設施高效能反向代理伺服器，將外部請求轉發到 Next.js 應用，並處理 IPv4/IPv6 雙棧連線。
Cloudflare
基礎設施提供 DNS 解析、CDN 加速與 SSL 加密。網域透過 Cloudflare 代理，自動取得 HTTPS 支援。