---
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)

1.  **Secrets 設定**：在 Hugging Face Space 設定 `VITE_GEMINI_API_KEY`。
2.  **Dockerfile 編譯**：
    ```dockerfile
    ARG VITE_GEMINI_API_KEY
    ENV VITE_GEMINI_API_KEY=$VITE_GEMINI_API_KEY
    RUN npm run build
    ```
3.  **後端連線**：確保 `App.vue` 中的 `Client.connect` 指向正確的後端 Repo ID。