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