metadata
title: Digital Bodyguard
emoji: 🐢
colorFrom: indigo
colorTo: pink
sdk: docker
pinned: false
license: mit
short_description: Dynamic Contextual Security Network Driven by AI
🛡️ Digital-Bodyguard Frontend | 校園資安 AI 防護網
這是一個專為校園入口網站設計的「資安防護模擬系統」前端介面。透過模擬 Taipei Tech Portal 的登入行為，串接後端 AI 偵測引擎，實現即時行為判定與行為軌跡紀錄。
🚀 核心功能 (Features)
- 校園入口模擬：完美復刻登入介面，包含「FEIK」驗證碼校驗與多角色（學生/管理員）儀表板切換。
- 環境變數模擬器：
- IP 切換：手動切換校內、宿舍或國外異常 IP。
- 時間旅行：模擬過去或未來的操作時間點，測試 AI 對非辦公時間行為的判定。
- Session ID 偽造：模擬 Cookie 被劫持的情境。
- AI 即時判定連動：
- 串接後端 HDBSCAN 聚類算法，對每一個點擊行為進行「正常/異常」判定。
- 攔截機制：偵測到 SQL Injection 或惡意行為時，前端自動彈出警報並阻斷操作。
- 即時 Log 監控區：與 Hugging Face Dataset 同步，即時顯示最新 20 筆行為紀錄。
- 資安專家解析：整合 Google Gemini API，對異常事件進行深度自動化威脅分析。
🛠️ 技術細節 (Tech Stack)
| 類別 | 使用技術 | 備註 |
|---|---|---|
| 框架 | Vue 3 (Composition API) | 核心邏輯採 setup 語法，狀態管理更直覺。 |
| 建置工具 | Vite 6 | 採用最新版 Vite，享受極速 HMR 編譯。 |
| 樣式 | Tailwind CSS 4 | bleeding edge 版本，全 CSS 驅動配置。 |
| API 通訊 | @gradio/client | 透過 WebSocket/SSE 串接 Python Gradio 後端。 |
| 圖表 | Chart.js | 實作基準管理雷達圖與事件趨勢圖。 |
| 部署 | Docker + Nginx | 解決 SPA 路由問題並優化靜態資源載入速度。 |
📝 實作筆記與挑戰 (Implementation Notes)
1. Gradio API 的「索引之戰」
問題：Gradio 的 predict 回傳資料是陣列格式，且包含大量 UI 更新物件。
解法：精確對位後端 outputs 順序。
- 登入接口：
[2]是錯誤訊息，[4]是 Dataframe。 - 登出接口：
[6]是最新的 Dataframe。 - 使用
parseGradioData函數將原始陣列轉換為 Vue 響應式物件。
2. Vite 6 的 Polyfill 戰爭
問題：@gradio/client 引用了大量的 Node.js 原生模組（Buffer, Stream），導致瀏覽器編譯崩潰，噴出 require$$0 錯誤。
解法：在 vite.config.ts 中引入 vite-plugin-node-polyfills，並在 commonjsOptions 中明確 exclude Gradio 套件，阻止 Vite 過度轉換。
3. Nginx MIME Type 陷阱
問題：部署到 HF Space 後，樣式失效，出現 Refused to apply style because its MIME type ('text/html')。
解法：修正 nginx.conf，顯式包含 include /etc/nginx/mime.types; 並將 CSS/JS 路由設定為 try_files $uri =404;，防止檔案缺失時回傳 index.html。
4. 數據冷啟動同步
實作方式：在 onMounted 階段自動呼叫一次 /logout（傳入系統同步標籤），利用後端 sync_from_hf() 機制，確保使用者一進網頁就能看到最新的雲端歷史紀錄。
⚙️ 環境設定 (Deployment)
- Secrets 設定：在 Hugging Face Space 設定
VITE_GEMINI_API_KEY。 - Dockerfile 編譯：
ARG VITE_GEMINI_API_KEY ENV VITE_GEMINI_API_KEY=$VITE_GEMINI_API_KEY RUN npm run build - 後端連線：確保
App.vue中的Client.connect指向正確的後端 Repo ID。