"The Matrix is everywhere. It is all around us."
一個結合 駭客任務 (The Matrix) 視覺風格與 TensorFlow.js 真實 AI 邊緣運算的交通監控儀表板。
本專案將 台北市民權大橋 的公開即時影像 (CCTV) 轉化為一個高科技監控中心。不同於傳統的播放器，本系統搭載了前端 AI 引擎，能即時掃描並辨識畫面中的車輛與行人，並在您的瀏覽器中直接生成專業的交通分析報告。
點擊上方圖片觀看完整功能展示影片
- 🕶️ 駭客任務視覺風格：
- 全黑背景搭配螢光綠 (Matrix Green) 終端機字體。
- 動態數位雨 (Digital Rain) 背景特效。
- CRT 螢幕掃描線與故障 (Glitch) 效果。
- 🧠 真實 AI 電腦視覺 (Edge AI)：
- 整合 TensorFlow.js 與 COCO-SSD 模型。
- 100% 隱私安全：影像串流完全在本地處理，無數據上傳至雲端。
- 即時物件偵測：自動辨識
汽車、公車、卡車、行人與機車。 - 智慧追蹤：實作平滑物件追蹤演算法與 CSS 補間動畫，消除偵測框抖動。
- ⚡ 極致效能控制：
- 雙引擎切換：支援 CPU (穩定模式) 與 GPU (WebGL 加速模式) 切換。
- 即時調校：可隨時調整偵測頻率 (FPS) 與信心門檻 (Confidence Threshold)。
- 效能監控：即時顯示 FPS 與掉幀 (Dropped Frames) 數據。
- 🌍 多國語言支援：
- 完整支援 英文 (English)、繁體中文 與 日文 (日本語) 介面切換。
- 📊 智慧交通分析：
- 自動掃描：3 分鐘自動掃描流程。
- 報告生成：自動產出車流密度、車種分佈與擁塞指數圖表。
駭客任務風格儀表板等待指令中。支援即時語言切換與效能調校。
即時物件偵測，搭配平滑的綠色偵測框疊加層。
包含圖表與 AI 生成建議的綜合報告。
為國際使用者提供的完整在地化介面。
| 類別 | 技術 | 說明 |
|---|---|---|
| 前端框架 | React 19 + Vite | 快速、現代化的 UI 開發體驗 |
| 樣式設計 | Tailwind CSS v4 | 客製化 Matrix 主題配置 |
| AI 核心 | TensorFlow.js | 基於瀏覽器的機器學習框架 |
| 模型 | COCO-SSD | 物件偵測模型 (lite_mobilenet_v2) |
| 視訊串流 | hls.js | HLS 串流播放支援 |
| 圖表 | Recharts | 數據視覺化 |
| 圖示 | Lucide React | 向量圖示庫 |
本專案採用 純前端推論 (Client-side Inference) 架構，確保數據隱私與低延遲。
graph LR
A[CCTV Stream .m3u8] -->|Vite Proxy| B(Browser / hls.js)
B --> C{AI Engine}
C -->|WASM/WebGL| D[COCO-SSD Model]
D --> E[Object Tracking]
E --> F[Dashboard / Charts]
- Node.js (v18+)
- npm
-
複製專案
git clone https://github.com/craig7351/ipcam-ai-speed.git cd ipcam-ai-speed -
啟動系統 直接雙擊執行目錄下的
start.bat，系統將自動安裝套件並啟動服務。 -
進入儀表板 開啟瀏覽器並前往
http://localhost:5173。
- 系統初始化：神經網路模型會自動載入，進度條顯示載入進度。
- 設定配置：在掃描前點擊左下角的 齒輪圖示 可調整效能設定 (GPU/CPU)。
- 開始掃描：點擊 [啟動 AI 掃描] 開始 3 分鐘的分析流程。
- 查看報告：掃描完成 (或透過開發者指令跳過) 後，將呈現詳細報告。
- 本專案使用 Vite Proxy 來繞過政府影像來源的 CORS 限制。
- 必要條件：您必須透過
http://localhost:5173訪問網站。使用127.0.0.1或部署到靜態主機 (如 GitHub Pages) 若無後端 Proxy 將導致影片無法播放。
- 若切換至 GPU 模式時畫面變黑或凍結，表示您的顯示卡驅動程式與 WebGL 不相容。請重新整理頁面以恢復 CPU 模式。
MIT License
"I know kung fu." - Neo