完成階段三Vue 前端 - 個人 Log 檢視頁面開發與修正後端API錯誤

.gitignore

@@ -0,0 +1,7 @@
+.env
+SimHei*
+__pycache__/
+*.py[cod]
+*$py.class
+*.pkl
+baseline_logs.csv

api.py

@@ -7,11 +7,16 @@ from fastapi.responses import JSONResponse
 from pydantic import BaseModel
 from typing import Optional, List
 
-from auth import simulate_click, USER_DB, check_session_timeouts, get_user_status
+from auth import (
+    simulate_click, USER_DB, check_session_timeouts, get_user_status,
+    internal_process_login, internal_logout
+)
 from security import test_send_security_alert, verify_identity
 from config import SYSTEM_WEIGHTS, ACTION_MAP, FIXED_TEST_EMAIL
 from plotting import get_plot_data_for_api
 import pandas as pd
+import models  # 使用 models.XXX 存取即時狀態，避免布林值被複製後失效
+from utils import get_geo_level
 
 api_app = FastAPI(title="數位保鏢 API")
 
@@ -23,6 +28,15 @@ class WeightsRequest(BaseModel):
     dw: float
     gw: float
     fw: float
+    
+class LoginRequest(BaseModel):
+    account: str
+    password: str
+    captcha: str
+    ip: str
+    cookie: str
+    time_mode: str
+    custom_time: Optional[str] = ""
 
 class StudentActionRequest(BaseModel):
     ip: str
@@ -40,12 +54,12 @@ class GenericActionRequest(StudentActionRequest):
 # --- 純淨 API 端點專用函式 (供內部呼叫) ---
 def internal_get_stats():
     """取得系統狀態與權重"""
-    total = global_stats["total_count"]
-    abnormal = global_stats["abnormal_count"]
+    total = models.global_stats["total_count"]
+    abnormal = models.global_stats["abnormal_count"]
     rate = round((abnormal / total * 100), 2) if total > 0 else 0
     return {
         "status": "success",
-        "ai_ready": AI_READY,
+        "ai_ready": models.AI_READY,
         "data": {
             "total_logs": total,
             "abnormal_logs": abnormal,
@@ -58,10 +72,18 @@ def internal_get_logs(limit=20):
     """取得最新的 N 筆 Log"""
     return {
         "status": "success",
-        "count": len(log_history[:limit]),
-        "data": log_history[:limit]
+        "count": len(models.log_history[:limit]),
+        "data": models.log_history[:limit]
     }
 
+def _extract_gr_update_value(upd):
+    """從 Gradio update 物件中提取 value (如果有)"""
+    if hasattr(upd, 'value'):
+        return upd.value
+    if isinstance(upd, dict) and 'value' in upd:
+        return upd['value']
+    return ""
+
 # --- FastAPI 路由定義 ---
 
 @api_app.get("/api/stats")
@@ -72,18 +94,35 @@ def get_stats():
 def get_logs(limit: int = 20):
     return internal_get_logs(limit)
 
+@api_app.post("/api/login")
+def login_endpoint(req: LoginRequest):
+    return internal_process_login(
+        req.ip, req.cookie, req.account, req.password, 
+        req.captcha, req.time_mode, req.custom_time
+    )
+
+@api_app.post("/api/logout")
+def logout_endpoint(req: StudentActionExtendedRequest):
+    return internal_logout(
+        req.ip, req.cookie, req.account, req.time_mode, req.custom_time
+    )
+
 @api_app.get("/api/chart_data")
 def get_chart_data(action_name: str = Query(...)):
     """取得特定系統的圖表原始數據"""
-    if not AI_READY:
-        return {"status": "error", "message": "AI 模型未載入"}
+    if not models.DATA_READY:
+        return {"status": "error", "message": "歷史基準資料未載入，請確認 baseline_logs.csv 是否存在或雲端同步是否正常"}
 
-    action_code = ACTION_MAP.get(action_name)
-    if not action_code:
-        return {"status": "error", "message": f"找不到系統: {action_name}"}
+    # 嘗試從顯示名稱映射到代碼，如果找不到，假設輸入已經是代碼
+    action_code = ACTION_MAP.get(action_name) or action_name
+    
+    # 驗證 action_code 是否有效 (在 baseline_df 中存在或在 ACTION_MAP 的值中)
+    valid_codes = set(ACTION_MAP.values())
+    if action_code not in valid_codes and action_code not in models.baseline_df['action'].unique():
+        return {"status": "error", "message": f"找不到系統代碼或名稱: {action_name}"}
 
-    df_hist = baseline_df[baseline_df['action'] == action_code].copy()
-    df_live = pd.DataFrame(log_history)
+    df_hist = models.baseline_df[models.baseline_df['action'] == action_code].copy()
+    df_live = pd.DataFrame(models.log_history)
 
     if not df_live.empty:
         df_live['timestamp'] = pd.to_datetime(df_live['timestamp'], errors='coerce')
@@ -116,16 +155,100 @@ def get_chart_data(action_name: str = Query(...)):
 @api_app.get("/api/abnormal_logs")
 def get_abnormal_logs():
     """取得所有異常 Log"""
-    abnormal_logs = [log for log in log_history if "異常" in str(log.get("status", "")) or "錯誤" in str(log.get("status", "")) or "受限" in str(log.get("status", ""))]
+    abnormal_logs = [log for log in models.log_history if "異常" in str(log.get("status", "")) or "錯誤" in str(log.get("status", "")) or "受限" in str(log.get("status", ""))]
     return {
         "status": "success",
         "count": len(abnormal_logs),
         "data": abnormal_logs
     }
 
+@api_app.get("/api/get_user_logs")
+def get_user_logs(session_id: str = Query(...)):
+    """
+    獲取指定 session_id (cookie_id) 的所有日誌
+    過濾自 Hugging Face 同步的歷史數據與當前記憶體數據
+    """
+    # 1. 準備過濾後的數據
+    filtered_logs = []
+    
+    # 從歷史數據中過濾 (如果有的話)
+    if models.baseline_df is not None and not models.baseline_df.empty:
+        # 確保資料格式一致
+        df_filtered = models.baseline_df[models.baseline_df['cookie_id'] == session_id].copy()
+        if not df_filtered.empty:
+            df_filtered['timestamp'] = pd.to_datetime(df_filtered['timestamp']).dt.strftime('%Y-%m-%d %H:%M:%S')
+            filtered_logs.extend(df_filtered.to_dict('records'))
+            
+    # 從當前記憶體日誌中過濾
+    mem_logs = [log for log in models.log_history if log.get("cookie_id") == session_id]
+    filtered_logs.extend(mem_logs)
+    
+    # 2. 去重並排序 (依時間倒序)
+    # 使用 timestamp + action 作為簡單的去重基準
+    seen = set()
+    unique_logs = []
+    for log in filtered_logs:
+        key = (log.get('timestamp'), log.get('action'))
+        if key not in seen:
+            seen.add(key)
+            unique_logs.append(log)
+            
+    unique_logs.sort(key=lambda x: x.get('timestamp', ''), reverse=True)
+    
+    # 3. 豐富化資料 (加上地理位置、設備資訊、判定狀態)
+    final_logs = []
+    for log in unique_logs:
+        ip = log.get('ip_address', 'Unknown')
+        geo_code = get_geo_level(ip)
+        
+        # 地理位置映射
+        geo_map = {
+            0: "台北市 (校內專網)",
+            1: "台北市 (校園網路)",
+            2: "台灣 (宿舍/寬頻)",
+            3: "台灣 (公共網路)",
+            4: "美國 (海外連線)",
+            5: "未知區域"
+        }
+        location = geo_map.get(geo_code, "未知區域")
+        
+        # 設備資訊 (目前資料集無此欄位，給予模擬值或依 IP 推斷)
+        # 這裡模擬一些常見設備
+        device = "PC (Chrome/Windows)" if "140.124" in ip else "Mobile (Safari/iOS)"
+        
+        # AI 判定狀態轉為中文
+        status_raw = str(log.get('status', 'success'))
+        ai_status = "異常" if ("異常" in status_raw or "受限" in status_raw or "錯誤" in status_raw) else "正常"
+        
+        final_logs.append({
+            "time": log.get('timestamp'),
+            "action": log.get('action'),
+            "ip": ip,
+            "location": location,
+            "device": device,
+            "ai_status": ai_status,
+            "status_detail": status_raw # 保留原始詳細資訊
+        })
+        
+    return {
+        "status": "success",
+        "session_id": session_id,
+        "count": len(final_logs),
+        "data": final_logs
+    }
+
+@api_app.get("/api/chart_html")
+def get_chart_html(action_name: str = Query(...)):
+    """取得圖表的 HTML 內容 (Gradio 專用)"""
+    from plotting import get_chart_js_html
+    html_data = get_chart_js_html(action_name)
+    return {"status": "success", "html": html_data}
+
 @api_app.get("/api/plot_image")
 def get_plot_image(action_name: str = Query(...)):
     """取得圖表的 Base64 圖片"""
+    if not models.DATA_READY:
+        return {"status": "error", "message": "歷史基準資料未載入"}
     img_data = get_plot_data_for_api(action_name)
     return {"status": "success", "image": img_data}
 

app.py

@@ -23,7 +23,7 @@ api_app.add_middleware(
     allow_origins=["*"],
     allow_methods=["*"],
     allow_headers=["*"],
-    allow_credentials=True,
+    allow_credentials=False, # 避免與 allow_origins=["*"] 衝突
 )
 
 if __name__ == "__main__":

auth.py

@@ -101,6 +101,36 @@ def process_login(ip, cookie, account, password, captcha, time_mode, custom_time
         df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "failed_password", time_mode, custom_time)
         return fail_response("密碼錯誤！", df_all, df_abn, inp_upd)
 
+def internal_process_login(ip, cookie, account, password, captcha, time_mode, custom_time):
+    """內部處理登入邏輯，回傳 JSON 友善格式"""
+    if account not in USER_DB:
+        df_all, df_abn, inp_upd = record_log(ip, cookie, account, "Unknown", "login_attempt", "failed_no_account", time_mode, custom_time)
+        return {"status": "error", "message": "帳號不存在！"}
+
+    role, name = USER_DB[account][1], USER_DB[account][2]
+
+    if captcha.upper() != "FEIK":
+        df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "failed_captcha", time_mode, custom_time)
+        return {"status": "error", "message": "驗證碼錯誤！"}
+
+    if USER_DB[account][0] == password:
+        df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "success", time_mode, custom_time)
+        return {
+            "status": "success", 
+            "role": "admin" if role == "管理" else "student",
+            "name": name,
+            "message": "登入成功"
+        }
+    else:
+        df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "failed_password", time_mode, custom_time)
+        return {"status": "error", "message": "密碼錯誤！"}
+
+def internal_logout(ip, cookie, account, time_mode, custom_time):
+    """內部處理登出邏輯"""
+    role = USER_DB.get(account, ["", "Unknown"])[1]
+    record_log(ip, cookie, account, role, "logout", "success", time_mode, custom_time)
+    return {"status": "success", "message": "已登出"}
+
 def fast_login(target_account, ip, cookie, time_mode, custom_time):
     """快速登入"""
     role, name = USER_DB[target_account][1], USER_DB[target_account][2]

models.py

@@ -16,6 +16,7 @@ le_action = None
 baseline_df = None
 baseline_X = None
 AI_READY = False
+DATA_READY = False # 新增：標記資料是否載入成功
 
 # 全域統計與狀態變數
 global_stats = {
@@ -29,12 +30,10 @@ log_history = []
 
 def load_models_and_data():
     """載入模型和歷史資料"""
-    global le_action, baseline_df, baseline_X, AI_READY, global_stats, log_history
+    global le_action, baseline_df, baseline_X, AI_READY, DATA_READY, global_stats, log_history
 
+    # 1. 優先載入資料 (圖表顯示核心)
     try:
-        # 載入標籤編碼器
-        le_action = joblib.load(MODEL_FILES["label_encoder"])
-
         print("📂 正在從雲端獲取最新資料 (Hugging Face API)...")
         try:
             import logger_service
@@ -64,12 +63,17 @@ def load_models_and_data():
         new_logs = display_df[['timestamp', 'ip_address', 'cookie_id', 'account', 'role', 'action', 'status']].to_dict('records')
         log_history.clear()
         log_history.extend(new_logs)
+        
+        DATA_READY = True
+        print("✅ 歷史基準資料載入成功！")
+    except Exception as e:
+        DATA_READY = False
+        print(f"❌ 資料載入失敗: {e}")
 
-        # 處理異常資料
-        abnormal_mask = baseline_df['status'].astype(str).str.contains("異常", na=False)
-        if abnormal_mask.any():
-            abn_df_temp = baseline_df[abnormal_mask].sort_values(by='timestamp', ascending=False).copy()
-            abn_df_temp['timestamp'] = abn_df_temp['timestamp'].dt.strftime('%Y-%m-%d %H:%M:%S')
+    # 2. 嘗試載入 AI 模型 (異常偵測核心)
+    try:
+        # 載入標籤編碼器
+        le_action = joblib.load(MODEL_FILES["label_encoder"])
 
         # 準備特徵矩陣
         baseline_df['month'] = baseline_df['timestamp'].dt.month
@@ -90,16 +94,14 @@ def load_models_and_data():
         ))
 
         AI_READY = True
-        print("✅ AI 模組與歷史基準資料載入成功！")
+        print("✅ AI 模組載入成功！")
 
     except Exception as e:
         AI_READY = False
-        global_stats["total_count"] = 0
-        global_stats["abnormal_count"] = 0
         if "KeyError: 118" in str(e) or "version https://git-lfs" in str(e):
              print(f"⚠️ AI 模組載入失敗：偵測到 Git LFS 指標檔案。請確保已安裝 git-lfs 並執行 `git lfs pull` 下載實際模型檔。")
         else:
-             print(f"⚠️ AI 模組載入失敗，請確認檔案。錯誤: {e}")
+             print(f"⚠️ AI 模組載入失敗 (不影響基本圖表顯示)。錯誤: {e}")
 
 def check_anomaly(ip, account, action, log_time):
     """核心異常偵測邏輯"""

plotting.py

@@ -94,7 +94,7 @@ def get_dashboard_html():
 
 def get_plot_data_for_api(selected_key):
     """API 專用版本，返回 Base64 圖片字符串"""
-    if not selected_key or not models.AI_READY:
+    if not selected_key or not models.DATA_READY:
         return None
 
     action_code = ACTION_MAP.get(selected_key)
@@ -202,7 +202,7 @@ def get_plot_data_for_api(selected_key):
 
 def get_plot_data(selected_key):
     """給 Gradio 界面使用，返回 Figure 對象"""
-    if not selected_key or not models.AI_READY:
+    if not selected_key or not models.DATA_READY:
         return None
 
     action_code = ACTION_MAP.get(selected_key)
@@ -275,4 +275,136 @@ def get_plot_data(selected_key):
 
 def timer_update(selected_key):
     """定時更新函數"""
-    return get_dashboard_html(), get_plot_data(selected_key)
+    return get_dashboard_html(), get_plot_data(selected_key)
+def get_chart_js_html(selected_key):
+    """生成 Chart.js HTML 內容 (Gradio 專用)"""
+    import models
+    import numpy as np
+    import json
+    from config import ACTION_MAP
+    import pandas as pd
+
+    if not selected_key or not models.DATA_READY:
+        return f'<div style="text-align:center; padding:40px; color:#94a3b8;">【{selected_key}】系統目前尚無資料</div>'
+
+    # 取得代碼
+    action_code = ACTION_MAP.get(selected_key)
+    print(f"🔍 [Chart Debug] Selected: '{selected_key}', Mapped Code: '{action_code}'")
+
+    if not action_code:
+        # 嘗試模糊匹配
+        for k, v in ACTION_MAP.items():
+            if selected_key in k or k in selected_key:
+                action_code = v
+                print(f"💡 [Chart Debug] Fuzzy matched to: '{action_code}'")
+                break
+    
+    if not action_code:
+        action_code = selected_key # 最後手段：直接用名稱查
+
+    # 取得資料
+    df_hist = models.baseline_df[models.baseline_df['action'] == action_code].copy()
+    print(f"📊 [Chart Debug] Found {len(df_hist)} historical records for '{action_code}'")
+    
+    df_live = pd.DataFrame(models.log_history)
+    if not df_live.empty:
+        df_live['timestamp'] = pd.to_datetime(df_live['timestamp'], errors='coerce')
+        df_live = df_live.dropna(subset=['timestamp'])
+        df_live = df_live[df_live['action'] == action_code].copy()
+        print(f"📈 [Chart Debug] Found {len(df_live)} live records for '{action_code}'")
+
+    if not df_live.empty:
+        df_combined = pd.concat([df_hist, df_live], ignore_index=True)
+        df_combined = df_combined.drop_duplicates(subset=['timestamp', 'account', 'action'])
+    else:
+        df_combined = df_hist.copy()
+
+    if df_combined.empty:
+        print(f"⚠️ [Chart Debug] Combined data is empty for '{action_code}'")
+        return f'<div style="text-align:center; padding:40px; color:#94a3b8;">【{selected_key}】系統目前尚無資料</div>'
+
+    df_combined['month'] = df_combined['timestamp'].dt.month
+    df_combined['time_of_day'] = df_combined['timestamp'].dt.hour + df_combined['timestamp'].dt.minute / 60.0
+
+    is_abnormal = df_combined['status'].astype(str).str.contains("異常", na=False)
+    
+    # 準備資料點 (添加 Jitter)
+    normal_pts = []
+    for _, row in df_combined[~is_abnormal].iterrows():
+        normal_pts.append({"x": float(row['month']) + (np.random.rand()-0.5)*0.4, "y": float(row['time_of_day']) + (np.random.rand()-0.5)*0.5})
+    
+    abnormal_pts = []
+    for _, row in df_combined[is_abnormal].iterrows():
+        abnormal_pts.append({"x": float(row['month']) + (np.random.rand()-0.5)*0.4, "y": float(row['time_of_day']) + (np.random.rand()-0.5)*0.5})
+
+    normal_json = json.dumps(normal_pts)
+    abnormal_json = json.dumps(abnormal_pts)
+
+    # 使用隨機 ID 避免 Gradio 多次渲染衝突
+    import time
+    chart_id = f"chart_{int(time.time() * 1000)}"
+
+    html = f"""
+    <div style="width: 100%; height: 450px; background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); margin-top: 10px;">
+        <canvas id="{chart_id}"></canvas>
+        <script>
+            (function() {{
+                const initChart = () => {{
+                    const canvas = document.getElementById('{chart_id}');
+                    if (!canvas) return;
+                    const ctx = canvas.getContext('2d');
+                    
+                    if (typeof Chart === 'undefined') {{
+                        setTimeout(initChart, 500);
+                        return;
+                    }}
+
+                    console.log("Rendering Gradio Chart: {selected_key}");
+                    
+                    new Chart(ctx, {{
+                        type: 'scatter',
+                        data: {{
+                            datasets: [
+                                {{
+                                    label: '正常行為',
+                                    data: {normal_json},
+                                    backgroundColor: 'rgba(16, 185, 129, 0.4)',
+                                    pointRadius: 5
+                                }},
+                                {{
+                                    label: '異常行為',
+                                    data: {abnormal_json},
+                                    backgroundColor: 'rgba(239, 68, 68, 0.8)',
+                                    pointRadius: 7,
+                                    pointStyle: 'rectRot'
+                                }}
+                            ]
+                        }},
+                        options: {{
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            animation: {{ duration: 800 }},
+                            scales: {{
+                                x: {{ title: {{ display: true, text: '月份' }}, min: 0.5, max: 12.5, ticks: {{ stepSize: 1 }} }},
+                                y: {{ title: {{ display: true, text: '時間 (0-24h)' }}, min: 0, max: 24, reverse: true, ticks: {{ stepSize: 4 }} }}
+                            }},
+                            plugins: {{
+                                legend: {{ position: 'top' }}
+                            }}
+                        }}
+                    }});
+                }};
+                
+                if (typeof Chart === 'undefined') {{
+                    const script = document.createElement('script');
+                    script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
+                    script.onload = initChart;
+                    document.head.appendChild(script);
+                }} else {{
+                    initChart();
+                }}
+            }})();
+        </script>
+    </div>
+    """
+    return html

ui.py

@@ -81,33 +81,16 @@ def full_ui_update(selected_key):
     """更新所有 UI 元件：儀表板、圖表、所有 Log、異常 Log"""
     # 1. 獲取儀表板 HTML
     dash_html = get_dashboard_html()
-    
-    # 2. 獲取圖表 (透過 API 呼叫模擬)
-    import requests
-    from config import SERVER_CONFIG
-    plot_img = None
-    if selected_key:
-        try:
-            # 呼叫本機 API 端點
-            port = SERVER_CONFIG["port"]
-            api_url = f"http://127.0.0.1:{port}/api/plot_image?action_name={selected_key}"
-            resp = requests.get(api_url, timeout=5)
-            if resp.status_code == 200:
-                img_base64 = resp.json().get("image")
-                if img_base64:
-                    plot_img = f'<img src="{img_base64}" style="width:100%; max-height:450px; object-fit:contain; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1);">'
-        except:
-            # Fallback: 直接呼叫函式
-            img_b64 = get_plot_data_for_api(selected_key)
-            if img_b64:
-                plot_img = f'<img src="{img_b64}" style="width:100%; max-height:450px; object-fit:contain; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1);">'
-    
+
+    # 2. 獲取圖表 (直接使用 matplotlib Figure，交給 gr.Plot 渲染)
+    plot_fig = get_plot_data(selected_key)
+
     # 3. 獲取 Log 資料
     df_all = pd.DataFrame(log_history)
     abnormal_logs = [log for log in log_history if any(word in str(log.get("status", "")) for word in ["異常", "錯誤", "受限"])]
     df_abn = pd.DataFrame(abnormal_logs) if abnormal_logs else pd.DataFrame(columns=["timestamp", "ip_address", "cookie_id", "account", "role", "action", "status"])
-    
-    return dash_html, plot_img, df_all, df_abn
+
+    return dash_html, plot_fig, df_all, df_abn
 
 def create_demo():
     """創建 Gradio 應用"""
@@ -210,8 +193,8 @@ def create_demo():
                                 with gr.Tab("🛡️ 管理員專區", id="admin_tab"):
                                     stat_dashboard_display = gr.HTML(value=get_dashboard_html())
                                     with gr.Accordion("▼ 系統操作時間分佈圖 (即時監控)", open=True, elem_classes="weight-card"):
-                                        action_dropdown = gr.Dropdown(choices=list(ACTION_MAP.keys()), label="選擇要檢視的系統資料分佈", value=None)
-                                        action_plot = gr.HTML(label="圖表顯示區")
+                                        action_dropdown = gr.Dropdown(choices=list(ACTION_MAP.keys()), label="選擇要檢視的系統資料分佈", value=list(ACTION_MAP.keys())[0])
+                                        action_plot = gr.Plot(label="圖表顯示區")
 
                                     with gr.Accordion("▼ 防護強度微調 (AI 敏感度)", open=True, elem_classes="weight-card"):
                                         gr.Markdown("<span style='color:gray; font-size:0.9em;'>動態防護已全面啟動：包含 HDBSCAN 空間異常偵測、IP 聲譽聯防，以及動態視窗頻率攔截。</span>")