information system interface update

app.py

@@ -12,7 +12,6 @@ import seaborn as sns
 import matplotlib.font_manager as fm
 
 # --- 🌟 解決 Matplotlib 中文顯示問題 ---
-# 啟動時自動下載並套用 SimHei (黑體) 字型，避免圖表出現方塊豆腐字
 font_path = 'SimHei.ttf'
 if not os.path.exists(font_path):
     try:
@@ -58,7 +57,6 @@ try:
     le_action = joblib.load('le_action.pkl')
     le_ip = joblib.load('le_ip.pkl')
     
-    # 🌟 啟動時一次性載入歷史資料，供後續繪圖快速讀取
     baseline_df = pd.read_csv('baseline_logs.csv')
     baseline_df['timestamp'] = pd.to_datetime(baseline_df['timestamp'])
     
@@ -142,28 +140,22 @@ def get_dashboard_html():
     </div>
     """
 
-# --- 🌟 完美整合 Seaborn 的圖表繪製函式 ---
 def get_plot_data(selected_key):
     if not selected_key:
         return None
         
     action_code = ACTION_MAP.get(selected_key)
     try:
-        plt.close('all') # 釋放舊記憶體，確保系統不卡頓
-        
-        # 1. 直接從記憶體中提取歷史基準資料 (完全免除讀檔延遲)
+        plt.close('all') 
         df_hist = baseline_df[baseline_df['action'] == action_code].copy()
         
-        # 2. 從 log_history 抓出「剛產生的即時紀錄」
         df_live = pd.DataFrame(log_history)
         if not df_live.empty:
             df_live['timestamp'] = pd.to_datetime(df_live['timestamp'])
             df_live = df_live[df_live['action'] == action_code].copy()
         
-        # 3. 完美合併：將歷史訓練資料與即時資料無縫接合
         if not df_live.empty:
             df_combined = pd.concat([df_hist, df_live], ignore_index=True)
-            # 使用 timestamp 移除可能重複計算的資料
             df_combined = df_combined.drop_duplicates(subset=['timestamp', 'account', 'action'])
         else:
             df_combined = df_hist.copy()
@@ -174,25 +166,21 @@ def get_plot_data(selected_key):
             ax.text(0.5, 0.5, f"【{selected_key}】目前尚無資料", ha='center', va='center', fontsize=15)
             return fig
 
-        # 4. 計算 X 軸(月份) 與 Y 軸(時間小數)
         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
         
-        # 5. 精準分類：區分「綠色正常」與「紅色異常」
         is_abnormal = df_combined['status'].astype(str).str.contains("異常", na=False)
         df_normal = df_combined[~is_abnormal]
         df_abnormal = df_combined[is_abnormal]
 
-        # 開始繪圖
         fig, ax = plt.subplots(figsize=(12, 6))
         sns.set_theme(style="whitegrid")
         if os.path.exists(font_path): plt.rc('font', family='SimHei')
         plt.rcParams['axes.unicode_minus'] = False
 
         has_data = False
-        months_order = list(range(1, 13)) # 確保 1 到 12 月依序排列
+        months_order = list(range(1, 13)) 
 
-        # 🟢 繪製正常紀錄 (綠色點)
         if not df_normal.empty:
             has_data = True
             sns.stripplot(
@@ -201,7 +189,6 @@ def get_plot_data(selected_key):
                 order=months_order, ax=ax, label='正常資料'
             )
 
-        # 🔴 繪製異常紀錄 (紅色大叉叉)
         if not df_abnormal.empty:
             has_data = True
             sns.stripplot(
@@ -214,15 +201,11 @@ def get_plot_data(selected_key):
             ax.text(0.5, 0.5, f"【{selected_key}】目前尚無資料", ha='center', va='center', fontsize=15)
             return fig
 
-        # 🌟 已經將標題 ax.set_title 移除
         ax.set_xlabel('月份 (1 ~ 12月)', fontsize=12)
         ax.set_ylabel('時間 (24小時制)', fontsize=12)
-        
-        # 設定 Y 軸為 0~24 點並倒轉 (早上在上面，半夜在下面)
         ax.set_yticks(np.arange(0, 25, 2))
         ax.set_ylim(24.5, -0.5)
 
-        # 整理圖例 (避免 Seaborn 重複生成標籤)
         handles, labels = ax.get_legend_handles_labels()
         by_label = dict(zip(labels, handles))
         if by_label:
@@ -234,11 +217,9 @@ def get_plot_data(selected_key):
         print(f"繪圖失敗: {e}")
         return None
 
-# --- 定時器觸發同步更新 ---
 def timer_update(selected_key):
     return get_dashboard_html(), get_plot_data(selected_key)
 
-# --- Groq AI Agent 呼叫函式 ---
 def explain_abnormal_log(log_text):
     if not log_text or log_text.strip() == "":
         return "⚠️ 請先提供異常 Log 資訊以進行分析。"
@@ -391,17 +372,19 @@ def record_log(ip, cookie, account, role, action, status, time_mode, custom_time
         
     return df_all, df_abnormal, input_update
 
+# --- 🎯 路由更新邏輯：現在統一回傳 main_router 狀態 ---
 def fast_login(target_account, ip, cookie, time_mode, custom_time, ow, tw, iw, dw):
     role, name = USER_DB[target_account][1], USER_DB[target_account][2]
     df_all, df_abn, inp_upd = record_log(ip, cookie, target_account, role, "login_attempt", "success", time_mode, custom_time, ow, tw, iw, dw)
     welcome_msg = f"**{name}** 歡迎您  |  線上人數: 938 (⚡快速登入模式)"
     target_tab = "student_tab" if role == "學生" else "admin_tab"
-    return gr.update(visible=False), gr.update(visible=True), gr.update(selected=target_tab), "", welcome_msg, df_all, df_abn, inp_upd, target_account
+    # 🌟 修改：切換至 dashboard_route 而不再修改 visible
+    return gr.update(selected="dashboard_route"), gr.update(selected=target_tab), "", welcome_msg, df_all, df_abn, inp_upd, target_account
 
 def process_login(ip, cookie, account, password, captcha, time_mode, custom_time, ow, tw, iw, dw):
     valid_captcha = "FEIK"
     def fail_response(msg, df_all, df_abn, inp_upd):
-        return gr.update(visible=True), gr.update(visible=False), gr.update(), msg, gr.update(), df_all, df_abn, inp_upd
+        return gr.update(selected="login_route"), gr.update(), msg, gr.update(), df_all, df_abn, inp_upd
 
     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, ow, tw, iw, dw)
@@ -416,7 +399,8 @@ def process_login(ip, cookie, account, password, captcha, time_mode, custom_time
         welcome_msg = f"**{name}** 歡迎您  |  線上人數: 938"
         df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "success", time_mode, custom_time, ow, tw, iw, dw)
         target_tab = "student_tab" if role == "學生" else "admin_tab"
-        return gr.update(visible=False), gr.update(visible=True), gr.update(selected=target_tab), "", welcome_msg, df_all, df_abn, inp_upd
+        # 🌟 修改：登入成功切換路由
+        return gr.update(selected="dashboard_route"), gr.update(selected=target_tab), "", welcome_msg, df_all, df_abn, inp_upd
         
     df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "login_attempt", "failed_password", time_mode, custom_time, ow, tw, iw, dw)
     return fail_response("密碼錯誤！", df_all, df_abn, inp_upd)
@@ -432,7 +416,8 @@ def toggle_role(current_account, ip, cookie, time_mode, custom_time, ow, tw, iw,
 def logout(ip, cookie, account, time_mode, custom_time, ow, tw, iw, dw):
     role = USER_DB.get(account, ["", "Unknown"])[1]
     df_all, df_abn, inp_upd = record_log(ip, cookie, account, role, "logout", "success", time_mode, custom_time, ow, tw, iw, dw)
-    return gr.update(visible=True), gr.update(visible=False), "", "", "", "", df_all, df_abn, inp_upd
+    # 🌟 修改：登出時切回 login_route 路由
+    return gr.update(selected="login_route"), "", "", "", "", df_all, df_abn, inp_upd
 
 def simulate_click(ip, cookie, account, button_name, time_mode, custom_time, ow, tw, iw, dw):
     role = USER_DB.get(account, ["", "Unknown"])[1]
@@ -453,75 +438,21 @@ custom_css = """
 .weight-card { padding: 10px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-top: 10px; }
 .headless-tabs > div:first-child { display: none !important; }
 .headless-tabs { border: none !important; background: transparent !important; }
-
-/* 🌟 新增：統計儀表板 CSS，嘗試重現圖片樣式 (已加入深色模式強制白底黑字覆蓋) */
-.stat-dashboard {
-    display: flex;
-    gap: 15px;
-    margin-bottom: 20px;
-    justify-content: space-between;
-}
-.stat-card {
-    flex: 1;
-    background-color: #ffffff !important; /* 強制卡片底色為白色 */
-    padding: 15px;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    border-top: 4px solid transparent; /* 用於狀態卡的頂部顏色 */
-}
-.card-total { border-left: 4px solid #10b981; } /* Green left border */
-.card-anomaly { border-left: 4px solid #ef4444; } /* Red left border */
-.card-status { border-left: 4px solid #3b82f6; } /* Blue left border */
-
-.card-icon {
-    font-size: 30px;
-    width: 40px;
-    text-align: center;
-}
-.card-content {
-    flex: 1;
-}
-.card-label {
-    color: #374151 !important; /* 強制標題文字為深灰色 */
-    font-size: 13px;
-    margin-bottom: 2px;
-    font-weight: bold !important;
-}
-.card-value-container {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-}
-.card-value {
-    font-size: 24px;
-    font-weight: bold;
-}
-/* 針對「總監測量」的數字強制設為黑色，不影響異常率與狀態的專屬顏色 */
-.card-total .card-value {
-    color: #000000 !important;
-}
-.card-unit {
-    font-size: 14px;
-    color: #4b5563 !important; /* 強制單位文字為深灰色 */
-    font-weight: normal;
-}
-.card-trend {
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-.trend-up {
-    background-color: #fee2e2 !important;
-    color: #ef4444 !important;
-}
-.card-sub-text {
-    color: #6b7280 !important; /* 強制副標題說明文字為中灰色 */
-    font-size: 11px;
-    margin-top: 2px;
-}
+.stat-dashboard { display: flex; gap: 15px; margin-bottom: 20px; justify-content: space-between; }
+.stat-card { flex: 1; background-color: #ffffff !important; padding: 15px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 15px; border-top: 4px solid transparent; }
+.card-total { border-left: 4px solid #10b981; }
+.card-anomaly { border-left: 4px solid #ef4444; }
+.card-status { border-left: 4px solid #3b82f6; }
+.card-icon { font-size: 30px; width: 40px; text-align: center; }
+.card-content { flex: 1; }
+.card-label { color: #374151 !important; font-size: 13px; margin-bottom: 2px; font-weight: bold !important; }
+.card-value-container { display: flex; align-items: baseline; gap: 8px; }
+.card-value { font-size: 24px; font-weight: bold; }
+.card-total .card-value { color: #000000 !important; }
+.card-unit { font-size: 14px; color: #4b5563 !important; font-weight: normal; }
+.card-trend { font-size: 12px; padding: 2px 6px; border-radius: 4px; }
+.trend-up { background-color: #fee2e2 !important; color: #ef4444 !important; }
+.card-sub-text { color: #6b7280 !important; font-size: 11px; margin-top: 2px; }
 """
 
 with gr.Blocks(title="模擬校園入口與資安防護系統") as demo:
@@ -541,132 +472,140 @@ with gr.Blocks(title="模擬校園入口與資安防護系統") as demo:
             log_display = gr.Dataframe(value=log_history, headers=["timestamp", "ip_address", "cookie_id", "account", "role", "action", "status"], datatype=["str", "str", "str", "str", "str", "str", "str"], interactive=False, wrap=True)
 
         with gr.Column(scale=2):
-            with gr.Column(visible=True, elem_classes="login-container") as login_view:
-                gr.Markdown("<div class='ntut-title'>校園入口網站 Taipei Tech Portal</div>")
-                login_msg = gr.Markdown(value="", visible=True)
-                with gr.Row(): acc_input = gr.Textbox(label="使用者帳號 (Account)", placeholder="student or admin")
-                with gr.Row(): pwd_input = gr.Textbox(label="使用者密碼 (Password)", type="password", placeholder="password : 1234")
-                with gr.Row(): gr.HTML("<div style='background:var(--background-fill-secondary); color:var(--body-text-color); padding:10px; font-weight:bold; letter-spacing: 3px; border:1px solid var(--border-color-primary); text-align:center;'>F E I K</div>")
-                with gr.Row(): captcha_input = gr.Textbox(label="請輸入驗證碼 (Keyin Code)")
-                login_btn = gr.Button("登入 Login", variant="primary")
-                
-                gr.Markdown("---")
-                gr.Markdown("<div style='text-align:center; color:gray; font-size: 0.9em;'>🛠️ 開發與測試專用捷徑</div>")
-                with gr.Row():
-                    btn_fast_student = gr.Button("🚀 快速登入 (學生)", variant="secondary")
-                    btn_fast_admin = gr.Button("🚀 快速登入 (管理員)", variant="secondary")
-
-            with gr.Column(visible=False) as dashboard_view:
-                with gr.Row():
-                    gr.Markdown("### 資訊系統")
-                    welcome_text = gr.Markdown(value="", elem_classes="text-right")
-                    logout_btn = gr.Button("登出", size="sm")
-                
-                with gr.Row():
-                    btn_toggle_role = gr.Button("🔄 Student ↔ Admin", size="sm", variant="secondary")
-                gr.Markdown("---")
+            
+            # 🌟 核心修改：使用無頭標籤頁 (Headless Tabs) 做最外層的頁面路由
+            with gr.Tabs(selected="login_route", elem_classes="headless-tabs") as main_router:
                 
-                with gr.Tabs(selected="student_tab", elem_classes="headless-tabs") as role_tabs:
-                    
-                    with gr.Tab("👨‍🎓 學生專區", id="student_tab"):
-                        with gr.Accordion("▼ 1. 教務系統", open=True):
-                            with gr.Row(): btn_eval = gr.Button("▶ 期末網路教學評量", size="sm"); btn_pre_select = gr.Button("▶ 期末網路預選系統", size="sm"); btn_add_drop = gr.Button("▶ 開學後加退選系統", size="sm")
-                            with gr.Row(): btn_istudy = gr.Button("▶ 北科i學園PLUS", size="sm"); btn_card = gr.Button("▶ 學生證掛失及補發系統", size="sm"); btn_course = gr.Button("▶ 課程系統", size="sm")
-                            with gr.Row(): btn_score = gr.Button("▶ 學業成績查詢系統", size="sm")
-                        with gr.Accordion("▼ 2. 學務系統", open=True):
-                            with gr.Row(): btn_leave = gr.Button("▶ 學生請假系統", size="sm"); btn_dorm = gr.Button("▶ 學生宿舍登錄(抽籤)系統", size="sm"); btn_scholarship = gr.Button("▶ 獎助學金申請系統", size="sm")
-                        with gr.Accordion("▼ 3. 資訊服務", open=True):
-                            with gr.Row(): btn_webmail = gr.Button("▶ 網路郵局 WebMail", size="sm"); btn_vdesk = gr.Button("▶ 北科軟體雲", size="sm")
-                        with gr.Accordion("▼ 惡意操作測試區", open=True):
-                            btn_hack_score = gr.Button("💀 嘗試偷改成績 (SQL Injection)", variant="stop", size="sm")
-
-                    with gr.Tab("🛡️ 管理員專區", id="admin_tab"):
+                # 路由 1：登入畫面
+                with gr.Tab("Login", id="login_route"):
+                    with gr.Column(elem_classes="login-container"):
+                        gr.Markdown("<div class='ntut-title'>校園入口網站 Taipei Tech Portal</div>")
+                        login_msg = gr.Markdown(value="", visible=True)
+                        with gr.Row(): acc_input = gr.Textbox(label="使用者帳號 (Account)", placeholder="student or admin")
+                        with gr.Row(): pwd_input = gr.Textbox(label="使用者密碼 (Password)", type="password", placeholder="password : 1234")
+                        with gr.Row(): gr.HTML("<div style='background:var(--background-fill-secondary); color:var(--body-text-color); padding:10px; font-weight:bold; letter-spacing: 3px; border:1px solid var(--border-color-primary); text-align:center;'>F E I K</div>")
+                        with gr.Row(): captcha_input = gr.Textbox(label="請輸入驗證碼 (Keyin Code)")
+                        login_btn = gr.Button("登入 Login", variant="primary")
                         
-                        stat_dashboard_display = gr.HTML(value=get_dashboard_html())
-
-                        with gr.Accordion("▼ 系統操作時間分佈圖 (即時監控)", open=True, elem_classes="weight-card"):
-                            gr.Markdown("<span style='color:gray; font-size:0.9em;'>選擇下方系統以檢視該系統在歷史與即時紀錄中的時間分佈狀況。圖表每分鐘會自動同步更新，歷史紀錄為綠點，即時攔截之異常為紅叉。</span>")
-                            action_dropdown = gr.Dropdown(
-                                choices=list(ACTION_MAP.keys()),
-                                label="選擇要檢視的系統資料分佈",
-                                value=None
-                            )
-                            action_plot = gr.Plot(show_label=False)
-
-                        with gr.Accordion("▼ 防護強度微調 (AI 敏感度)", open=True, elem_classes="weight-card"):
-                            gr.Markdown("<span style='color:gray; font-size:0.9em;'>手動輸入 0~100 的數值。提高強度會增加誤報率，但能更有效攔截新型攻擊。</span>")
-                            with gr.Row():
-                                overall_weight = gr.Number(label="總體防護強度 (%)", value=75, minimum=0, maximum=100)
-                                time_weight = gr.Number(label="時間特徵權重 (%)", value=80, minimum=0, maximum=100)
-                            with gr.Row():
-                                ip_weight = gr.Number(label="IP 聲譽權重 (%)", value=65, minimum=0, maximum=100)
-                                device_weight = gr.Number(label="裝置指紋/行為權重 (%)", value=45, minimum=0, maximum=100)
+                        gr.Markdown("---")
+                        gr.Markdown("<div style='text-align:center; color:gray; font-size: 0.9em;'>🛠️ 開發與測試專用捷徑</div>")
+                        with gr.Row():
+                            btn_fast_student = gr.Button("🚀 快速登入 (學生)", variant="secondary")
+                            btn_fast_admin = gr.Button("🚀 快速登入 (管理員)", variant="secondary")
+
+                # 路由 2：資訊系統儀表板 (不再使用 visible=False)
+                with gr.Tab("Dashboard", id="dashboard_route"):
+                    with gr.Column():
+                        with gr.Row():
+                            gr.Markdown("### 資訊系統")
+                            welcome_text = gr.Markdown(value="", elem_classes="text-right")
+                            logout_btn = gr.Button("登出", size="sm")
                         
-                        with gr.Accordion("▼ 異常 Log 分析 (Groq AI Agent)", open=True, elem_classes="weight-card"):
-                            gr.Markdown("<span style='color:gray; font-size:0.9em;'>顯示所有被判定為異常的 Log。點擊分析可讓 AI 代為判讀潛在風險。</span>")
-                            abnormal_log_display = gr.Dataframe(
-                                value=initial_df_abn,
-                                headers=["timestamp", "ip_address", "cookie_id", "account", "role", "action", "status"],
-                                datatype=["str", "str", "str", "str", "str", "str", "str"],
-                                interactive=False, wrap=True
-                            )
-                            with gr.Row():
-                                abnormal_log_input = gr.Textbox(label="要分析的異常 Log", placeholder="系統若偵測到新異常將會自動填入，您也可以手動修改...", scale=4)
-                                btn_explain_log = gr.Button("🧠 Groq AI 分析", variant="primary", scale=1)
-                            
-                            ai_explanation_output = gr.Textbox(label="AI 分析結果與說明", lines=4, interactive=False, placeholder="等待分析中...")
+                        with gr.Row():
+                            btn_toggle_role = gr.Button("🔄 Student ↔ Admin", size="sm", variant="secondary")
+                        gr.Markdown("---")
                         
-                        with gr.Accordion("▼ HDBSCAN 異常辨識自動化測試區", open=True, elem_classes="weight-card"):
-                            gr.Markdown("<span style='color:gray; font-size:0.9em;'>點擊按鈕將直接以指定時間點執行該系統的操作，結果將顯示於左側 Log 區。</span>")
+                        with gr.Tabs(selected="student_tab", elem_classes="headless-tabs") as role_tabs:
                             
-                            gr.Markdown("#### 1. 選課相關系統 (具備強烈季節性)")
-                            with gr.Row():
-                                t_pre_sel_norm = gr.Button("✅ 正常: 期末網路預選系統 (06-13 11:00)", size="sm"); t_pre_sel_anom = gr.Button("⚠️ 異常: 期末網路預選系統 (10-15 13:00)", size="sm")
-                            with gr.Row():
-                                t_course_norm = gr.Button("✅ 正常: 課程系統 (02-25 07:50)", size="sm"); t_course_anom = gr.Button("⚠️ 異常: 課程系統 (07-15 05:00)", size="sm")
-                            with gr.Row():
-                                t_add_drop_norm = gr.Button("✅ 正常: 開學後加退選系統 (02-18 14:00)", size="sm"); t_add_drop_anom = gr.Button("⚠️ 異常: 開學後加退選系統 (05-15 12:00)", size="sm")
+                            with gr.Tab("👨‍🎓 學生專區", id="student_tab"):
+                                with gr.Accordion("▼ 1. 教務系統", open=True):
+                                    with gr.Row(): btn_eval = gr.Button("▶ 期末網路教學評量", size="sm"); btn_pre_select = gr.Button("▶ 期末網路預選系統", size="sm"); btn_add_drop = gr.Button("▶ 開學後加退選系統", size="sm")
+                                    with gr.Row(): btn_istudy = gr.Button("▶ 北科i學園PLUS", size="sm"); btn_card = gr.Button("▶ 學生證掛失及補發系統", size="sm"); btn_course = gr.Button("▶ 課程系統", size="sm")
+                                    with gr.Row(): btn_score = gr.Button("▶ 學業成績查詢系統", size="sm")
+                                with gr.Accordion("▼ 2. 學務系統", open=True):
+                                    with gr.Row(): btn_leave = gr.Button("▶ 學生請假系統", size="sm"); btn_dorm = gr.Button("▶ 學生宿舍登錄(抽籤)系統", size="sm"); btn_scholarship = gr.Button("▶ 獎助學金申請系統", size="sm")
+                                with gr.Accordion("▼ 3. 資訊服務", open=True):
+                                    with gr.Row(): btn_webmail = gr.Button("▶ 網路郵局 WebMail", size="sm"); btn_vdesk = gr.Button("▶ 北科軟體雲", size="sm")
+                                with gr.Accordion("▼ 惡意操作測試區", open=True):
+                                    btn_hack_score = gr.Button("💀 嘗試偷改成績 (SQL Injection)", variant="stop", size="sm")
+
+                            with gr.Tab("🛡️ 管理員專區", id="admin_tab"):
                                 
-                            gr.Markdown("#### 2. 期末與成績相關 (具備週期性)")
-                            with gr.Row():
-                                t_eval_norm = gr.Button("✅ 正常: 期末網路教學評量 (12-17 13:20)", size="sm"); t_eval_anom = gr.Button("⚠️ 異常: 期末網路教學評量 (03-15 03:00)", size="sm")
-                            with gr.Row():
-                                t_score_norm = gr.Button("✅ 正常: 學業成績查詢系統 (11-17 18:50)", size="sm"); t_score_anom = gr.Button("⚠️ 異常: 學業成績查詢系統 (02-15 03:00)", size="sm")
+                                stat_dashboard_display = gr.HTML(value=get_dashboard_html())
+
+                                with gr.Accordion("▼ 系統操作時間分佈圖 (即時監控)", open=True, elem_classes="weight-card"):
+                                    gr.Markdown("<span style='color:gray; font-size:0.9em;'>選擇下方系統以檢視該系統在歷史與即時紀錄中的時間分佈狀況。圖表每分鐘會自動同步更新，歷史紀錄為綠點，即時攔截之異常為紅叉。</span>")
+                                    action_dropdown = gr.Dropdown(
+                                        choices=list(ACTION_MAP.keys()),
+                                        label="選擇要檢視的系統資料分佈",
+                                        value=None
+                                    )
+                                    action_plot = gr.Plot(show_label=False)
+
+                                with gr.Accordion("▼ 防護強度微調 (AI 敏感度)", open=True, elem_classes="weight-card"):
+                                    gr.Markdown("<span style='color:gray; font-size:0.9em;'>手動輸入 0~100 的數值。提高強度會增加誤報率，但能更有效攔截新型攻擊。</span>")
+                                    with gr.Row():
+                                        overall_weight = gr.Number(label="總體防護強度 (%)", value=75, minimum=0, maximum=100)
+                                        time_weight = gr.Number(label="時間特徵權重 (%)", value=80, minimum=0, maximum=100)
+                                    with gr.Row():
+                                        ip_weight = gr.Number(label="IP 聲譽權重 (%)", value=65, minimum=0, maximum=100)
+                                        device_weight = gr.Number(label="裝置指紋/行為權重 (%)", value=45, minimum=0, maximum=100)
                                 
-                            gr.Markdown("#### 3. 校務與行政服務 (生活與常規)")
-                            with gr.Row():
-                                t_dorm_norm = gr.Button("✅ 正常: 學生宿舍登錄(抽籤)系統 (07-21 23:10)", size="sm"); t_dorm_anom = gr.Button("⚠️ 異常: 學生宿舍登錄(抽籤)系統 (11-15 16:00)", size="sm")
-                            with gr.Row():
-                                t_schol_norm = gr.Button("✅ 正常: 獎助學金申請系統 (03-12 14:00)", size="sm"); t_schol_anom = gr.Button("⚠️ 異常: 獎助學金申請系統 (08-15 02:00)", size="sm")
-                            with gr.Row():
-                                t_card_norm = gr.Button("✅ 正常: 學生證掛失 (10-23 13:40)", size="sm"); t_card_anom = gr.Button("⚠️ 異常: 學生證掛失 (08-10 03:00)", size="sm")
+                                with gr.Accordion("▼ 異常 Log 分析 (Groq AI Agent)", open=True, elem_classes="weight-card"):
+                                    gr.Markdown("<span style='color:gray; font-size:0.9em;'>顯示所有被判定為異常的 Log。點擊分析可讓 AI 代為判讀潛在風險。</span>")
+                                    abnormal_log_display = gr.Dataframe(
+                                        value=initial_df_abn,
+                                        headers=["timestamp", "ip_address", "cookie_id", "account", "role", "action", "status"],
+                                        datatype=["str", "str", "str", "str", "str", "str", "str"],
+                                        interactive=False, wrap=True
+                                    )
+                                    with gr.Row():
+                                        abnormal_log_input = gr.Textbox(label="要分析的異常 Log", placeholder="系統若偵測到新異常將會自動填入，您也可以手動修改...", scale=4)
+                                        btn_explain_log = gr.Button("🧠 Groq AI 分析", variant="primary", scale=1)
+                                    
+                                    ai_explanation_output = gr.Textbox(label="AI 分析結果與說明", lines=4, interactive=False, placeholder="等待分析中...")
                                 
-                            gr.Markdown("#### 4. 學習與日常輔助系統 (具備作息規律)")
-                            with gr.Row():
-                                t_istudy_norm = gr.Button("✅ 正常: 北科i學園PLUS (10-18 16:00)", size="sm"); t_istudy_anom = gr.Button("⚠️ 異常: 北科i學園PLUS (08-20 02:00)", size="sm")
-                            with gr.Row():
-                                t_leave_norm = gr.Button("✅ 正常: 學生請假系統 (03-29 08:45)", size="sm"); t_leave_anom = gr.Button("⚠️ 異常: 學生請假系統 (08-15 13:00)", size="sm")
-                            with gr.Row():
-                                t_vdesk_norm = gr.Button("✅ 正常: 軟體雲/WebMail (03-22 18:00)", size="sm"); t_vdesk_anom = gr.Button("⚠️ 異常: 軟體雲/WebMail (08-10 00:00)", size="sm")
+                                # ... (原有的自動化測試區按鈕保留不變) ...
+                                with gr.Accordion("▼ HDBSCAN 異常辨識自動化測試區", open=True, elem_classes="weight-card"):
+                                    gr.Markdown("<span style='color:gray; font-size:0.9em;'>點擊按鈕將直接以指定時間點執行該系統的操作，結果將顯示於左側 Log 區。</span>")
+                                    gr.Markdown("#### 1. 選課相關系統 (具備強烈季節性)")
+                                    with gr.Row():
+                                        t_pre_sel_norm = gr.Button("✅ 正常: 期末網路預選系統 (06-13 11:00)", size="sm"); t_pre_sel_anom = gr.Button("⚠️ 異常: 期末網路預選系統 (10-15 13:00)", size="sm")
+                                    with gr.Row():
+                                        t_course_norm = gr.Button("✅ 正常: 課程系統 (02-25 07:50)", size="sm"); t_course_anom = gr.Button("⚠️ 異常: 課程系統 (07-15 05:00)", size="sm")
+                                    with gr.Row():
+                                        t_add_drop_norm = gr.Button("✅ 正常: 開學後加退選系統 (02-18 14:00)", size="sm"); t_add_drop_anom = gr.Button("⚠️ 異常: 開學後加退選系統 (05-15 12:00)", size="sm")
+                                    gr.Markdown("#### 2. 期末與成績相關 (具備週期性)")
+                                    with gr.Row():
+                                        t_eval_norm = gr.Button("✅ 正常: 期末網路教學評量 (12-17 13:20)", size="sm"); t_eval_anom = gr.Button("⚠️ 異常: 期末網路教學評量 (03-15 03:00)", size="sm")
+                                    with gr.Row():
+                                        t_score_norm = gr.Button("✅ 正常: 學業成績查詢系統 (11-17 18:50)", size="sm"); t_score_anom = gr.Button("⚠️ 異常: 學業成績查詢系統 (02-15 03:00)", size="sm")
+                                    gr.Markdown("#### 3. 校務與行政服務 (生活與常規)")
+                                    with gr.Row():
+                                        t_dorm_norm = gr.Button("✅ 正常: 學生宿舍登錄(抽籤)系統 (07-21 23:10)", size="sm"); t_dorm_anom = gr.Button("⚠️ 異常: 學生宿舍登錄(抽籤)系統 (11-15 16:00)", size="sm")
+                                    with gr.Row():
+                                        t_schol_norm = gr.Button("✅ 正常: 獎助學金申請系統 (03-12 14:00)", size="sm"); t_schol_anom = gr.Button("⚠️ 異常: 獎助學金申請系統 (08-15 02:00)", size="sm")
+                                    with gr.Row():
+                                        t_card_norm = gr.Button("✅ 正常: 學生證掛失 (10-23 13:40)", size="sm"); t_card_anom = gr.Button("⚠️ 異常: 學生證掛失 (08-10 03:00)", size="sm")
+                                    gr.Markdown("#### 4. 學習與日常輔助系統 (具備作息規律)")
+                                    with gr.Row():
+                                        t_istudy_norm = gr.Button("✅ 正常: 北科i學園PLUS (10-18 16:00)", size="sm"); t_istudy_anom = gr.Button("⚠️ 異常: 北科i學園PLUS (08-20 02:00)", size="sm")
+                                    with gr.Row():
+                                        t_leave_norm = gr.Button("✅ 正常: 學生請假系統 (03-29 08:45)", size="sm"); t_leave_anom = gr.Button("⚠️ 異常: 學生請假系統 (08-15 13:00)", size="sm")
+                                    with gr.Row():
+                                        t_vdesk_norm = gr.Button("✅ 正常: 軟體雲/WebMail (03-22 18:00)", size="sm"); t_vdesk_anom = gr.Button("⚠️ 異常: 軟體雲/WebMail (08-10 00:00)", size="sm")
 
     # --- 綁定事件 ---
     
     demo.load(fn=timer_update, inputs=[action_dropdown], outputs=[stat_dashboard_display, action_plot])
     dashboard_timer.tick(fn=timer_update, inputs=[action_dropdown], outputs=[stat_dashboard_display, action_plot])
-    
     action_dropdown.change(fn=get_plot_data, inputs=[action_dropdown], outputs=[action_plot])
-
     time_mode.change(fn=toggle_time_input, inputs=time_mode, outputs=custom_time_input)
     btn_explain_log.click(fn=explain_abnormal_log, inputs=[abnormal_log_input], outputs=[ai_explanation_output])
     
     weight_inputs = [overall_weight, time_weight, ip_weight, device_weight]
-    update_outputs = [login_view, dashboard_view, role_tabs, login_msg, welcome_text, log_display, abnormal_log_display, abnormal_log_input]
+    
+    # 🎯 這裡改成更新 main_router，而不是舊的 login_view, dashboard_view
+    update_outputs = [main_router, role_tabs, login_msg, welcome_text, log_display, abnormal_log_display, abnormal_log_input]
     
     login_btn.click(
         fn=process_login, inputs=[mock_ip, mock_cookie, acc_input, pwd_input, captcha_input, time_mode, custom_time_input] + weight_inputs, outputs=update_outputs
     )
+    
+    # 登出時多清除原本帳密的輸入框
     logout_btn.click(
-        fn=logout, inputs=[mock_ip, mock_cookie, acc_input, time_mode, custom_time_input] + weight_inputs, outputs=[login_view, dashboard_view, acc_input, pwd_input, captcha_input, login_msg, log_display, abnormal_log_display, abnormal_log_input] 
+        fn=logout, inputs=[mock_ip, mock_cookie, acc_input, time_mode, custom_time_input] + weight_inputs, 
+        outputs=[main_router, acc_input, pwd_input, captcha_input, login_msg, log_display, abnormal_log_display, abnormal_log_input] 
     )
 
     fast_inputs = [mock_ip, mock_cookie, time_mode, custom_time_input] + weight_inputs