Update app.py

app.py

@@ -46,7 +46,7 @@ def image_to_base64(image_path):
         mime = "image/png"
     return f"data:{mime};base64,{encoded_string}"
 
-# ================== User Guide Content (已去除标题) ==================
+# ================== User Guide Content ==================
 USER_GUIDE_SECTIONS = {
     "getting_started": """
 Welcome to **Clare — Your Personalized AI Tutor**.
@@ -184,62 +184,65 @@ Currently: English & 简体中文.
 
 # ================== CSS 样式表 ==================
 CUSTOM_CSS = """
-/* Header */
-.header-container {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 10px 20px; background-color: #ffffff;
-    border-bottom: 2px solid #f3f4f6; margin-bottom: 15px;
-}
-
-/* --- User Guide 样式优化 --- */
-
-/* 1. 最外层 User Guide (大标题) */
-.main-user-guide {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
+/* --- Login Page --- */
+.login-container {
+    max-width: 500px !important;
+    margin: 100px auto !important;
+    padding: 40px !important;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    text-align: center;
 }
-.main-user-guide > .label-wrap {
-    border: none !important;
-    background: transparent !important;
-    padding: 10px 0 !important;
+.login-btn {
+    background-color: #8B1A1A !important;
+    color: white !important;
+    font-weight: bold !important;
+    margin-top: 20px !important;
 }
-.main-user-guide > .label-wrap span {
-    font-size: 1.3rem !important; /* 加大 */
-    font-weight: 800 !important; /* 加粗 */
-    color: #111827 !important; /* 深黑色 */
+
+/* --- Main Header --- */
+.header-container {
+    padding: 10px 20px; 
+    background-color: #ffffff;
+    border-bottom: 2px solid #f3f4f6; 
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
 }
 
-/* 2. 内部子菜单 (小标题 - 列表风格) */
-.clean-accordion {
-    border: none !important;
+/* 伪装成 Link 的 Button (Log Out) */
+.link-btn {
     background: transparent !important;
-    box-shadow: none !important;
-    margin-bottom: 0px !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-}
-.clean-accordion > .label-wrap {
-    padding: 8px 5px !important;
     border: none !important;
-    background: transparent !important;
-    border-bottom: 1px solid #e5e7eb !important; /* 细分隔线 */
-}
-.clean-accordion > .label-wrap span {
-    font-size: 0.9rem !important; /* 比主标题小 */
-    font-weight: 500 !important; /* 中等粗细 */
-    color: #374151 !important; /* 深灰色 */
+    box-shadow: none !important;
+    color: #000 !important;
+    text-decoration: underline;
+    font-weight: bold !important;
+    font-size: 12px !important;
+    padding: 0 5px !important;
+    min-width: auto !important;
 }
-.clean-accordion > .label-wrap:hover {
-    background-color: #f9fafb !important;
+.link-btn:hover {
+    color: #cc0000 !important;
 }
 
-/* Action 按钮加粗 & Tooltip */
+/* User Guide 样式 */
+.main-user-guide { border: none !important; background: transparent !important; box-shadow: none !important; }
+.main-user-guide > .label-wrap { border: none !important; background: transparent !important; padding: 10px 0 !important; }
+.main-user-guide > .label-wrap span { font-size: 1.3rem !important; font-weight: 800 !important; color: #111827 !important; }
+
+.clean-accordion { border: none !important; background: transparent !important; box-shadow: none !important; margin-bottom: 0px !important; padding: 0 !important; border-radius: 0 !important; }
+.clean-accordion > .label-wrap { padding: 8px 5px !important; border: none !important; background: transparent !important; border-bottom: 1px solid #e5e7eb !important; }
+.clean-accordion > .label-wrap span { font-size: 0.9rem !important; font-weight: 500 !important; color: #374151 !important; }
+.clean-accordion > .label-wrap:hover { background-color: #f9fafb !important; }
+
+/* Action 按钮 & Tooltip */
 .action-btn { font-weight: bold !important; font-size: 0.9rem !important; position: relative; overflow: visible !important; }
 .action-btn:hover::before { content: "See User Guide for details"; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; z-index: 1000; pointer-events: none; opacity: 0; animation: fadeIn 0.2s forwards; }
 .action-btn:hover::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; opacity: 0; animation: fadeIn 0.2s forwards; }
 
-/* HTML Tooltip (Memory Line) */
 .html-tooltip { border-bottom: 1px dashed #999; cursor: help; position: relative; }
 .html-tooltip:hover::before { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 0; background-color: #333; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 100; pointer-events: none; }
 
@@ -253,164 +256,237 @@ CUSTOM_CSS = """
 
 with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS) as demo:
     
-    # State variables
+    # 全局状态
     course_outline_state = gr.State(DEFAULT_COURSE_TOPICS)
     weakness_state = gr.State([])
     cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
-    rag_chunks_state = gr.State([]) 
-
-    # 1. Header (包含右上角 Log Out)
-    gr.HTML(
-        f"""
-        <div class="header-container">
-            <div style="display:flex; align-items:center; gap: 20px;">
-                <img src="{image_to_base64(CLARE_LOGO_PATH)}" style="height: 75px; object-fit: contain;">
-                <div style="display:flex; flex-direction:column;">
-                    <div style="font-size: 32px; font-weight: 800; line-height: 1.1; color: #000;">
-                        Clare
-                        <span style="font-size: 18px; font-weight: 600; margin-left: 10px;">Your Personalized AI Tutor</span>
-                    </div>
-                    <div style="font-size: 14px; font-style: italic; color: #333; margin-top: 4px;">
-                        Personalized guidance, review, and intelligent reinforcement - designed for how you learn
-                    </div>
-                </div>
-            </div>
-            <div style="text-align: right;">
-                <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 55px; object-fit: contain; margin-bottom: 5px;">
-                <div style="font-size: 12px; color: #666; margin-top: 4px; display:flex; align-items:center; justify-content:flex-end; gap:12px;">
-                    <span>🎓 (Student Name) (Student Email/ID)</span>
-                    <a href="#" style="color: #000; font-weight: bold; text-decoration: underline; font-size: 12px;">Log Out</a>
+    rag_chunks_state = gr.State([])
+    
+    # 登录状态
+    user_name_state = gr.State("")
+    user_id_state = gr.State("")
+
+    # ================== Layer 1: Login View ==================
+    with gr.Group(visible=True) as login_view:
+        with gr.Column(elem_classes="login-container"):
+            # Logo Area
+            gr.HTML(
+                f"""
+                <div style="display:flex; justify-content:center; gap:20px; margin-bottom:20px;">
+                    <img src="{image_to_base64(CLARE_LOGO_PATH)}" style="height: 80px;">
+                    <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 60px; margin-top:10px;">
                 </div>
-            </div>
-        </div>
-        """
-    )
-
-    # 2. Main Layout
-    with gr.Row():
-        
-        # === [Left Sidebar] ===
-        with gr.Column(scale=1, min_width=200):
-            clear_btn = gr.Button("Reset Conversation", variant="stop")
+                <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 5px;">Welcome to Clare</h1>
+                <p style="color: #666; margin-bottom: 30px;">Your Personalized AI Tutor</p>
+                """
+            )
             
-            # Model Settings (Locked)
-            gr.Markdown("### Model Settings")
-            model_name = gr.Textbox(label="Model", value="gpt-4.1-mini", interactive=False, lines=1)
-            language_preference = gr.Radio(choices=["Auto", "English", "简体中文"], value="Auto", label="Language")
+            login_name = gr.Textbox(label="Student Name", placeholder="Enter your full name", autofocus=True)
+            login_id = gr.Textbox(label="Student ID / Email", placeholder="Enter your student ID or email")
             
-            learning_mode = gr.Radio(
-                choices=LEARNING_MODES,
-                value="Concept Explainer",
-                label="Learning Mode",
-                info="See User Guide for mode definitions details." 
-            )
+            login_btn = gr.Button("Enter Class", elem_classes="login-btn", size="lg")
+            
+            login_msg = gr.Markdown(visible=False) # 错误提示占位
 
-            # User Guide (美化后的手风琴)
-            with gr.Accordion("User Guide", open=True, elem_classes="main-user-guide"):
-                with gr.Accordion("Getting Started", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["getting_started"])
-                with gr.Accordion("Mode Definition", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["mode_definition"])
-                with gr.Accordion("How Clare Works", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["how_clare_works"])
-                with gr.Accordion("What is Memory Line", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["memory_line"])
-                with gr.Accordion("Learning Progress Report", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["learning_progress"])
-                with gr.Accordion("How Clare Uses Your Files", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["how_files"])
-                with gr.Accordion("Micro-Quiz", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["micro_quiz"])
-                with gr.Accordion("Summarization", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["summarization"])
-                with gr.Accordion("Export Conversation", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["export_conversation"])
-                with gr.Accordion("FAQ", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["faq"])
+    # ================== Layer 2: Main App View ==================
+    with gr.Group(visible=False) as main_view:
+        
+        # --- Custom Header (Using Row for Alignment) ---
+        with gr.Row(elem_classes="header-container"):
+            # Left: Mascot & Title
+            with gr.Column(scale=1):
+                gr.HTML(
+                    f"""
+                    <div style="display:flex; align-items:center; gap: 20px;">
+                        <img src="{image_to_base64(CLARE_LOGO_PATH)}" style="height: 75px; object-fit: contain;">
+                        <div style="display:flex; flex-direction:column;">
+                            <div style="font-size: 32px; font-weight: 800; line-height: 1.1; color: #000;">
+                                Clare
+                                <span style="font-size: 18px; font-weight: 600; margin-left: 10px;">Your Personalized AI Tutor</span>
+                            </div>
+                            <div style="font-size: 14px; font-style: italic; color: #333; margin-top: 4px;">
+                                Personalized guidance, review, and intelligent reinforcement
+                            </div>
+                        </div>
+                    </div>
+                    """
+                )
             
-            # 底部 Settings & Copyright
-            gr.Markdown("---")
-            gr.Button("System Settings", size="sm", variant="secondary")
+            # Right: Hanbridge Logo + Student Info + Logout
+            with gr.Column(scale=1):
+                # 顶部放 Logo，居右
+                gr.HTML(
+                    f"""
+                    <div style="display:flex; justify-content:flex-end; margin-bottom: 5px;">
+                        <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 55px; object-fit: contain;">
+                    </div>
+                    """
+                )
+                # 下面放 Info 和 Logout 按钮，使用 Row 紧凑排列
+                with gr.Row():
+                    # 这里放一个空的 Column 把内容挤到右边
+                    with gr.Column(scale=1): pass 
+                    
+                    # 真正的内容在右边
+                    with gr.Column(scale=0, min_width=300):
+                        with gr.Row(elem_classes="no-gap"):
+                            student_info_disp = gr.Markdown(value="", elem_id="student-info")
+                            logout_btn = gr.Button("Log Out", elem_classes="link-btn")
+
+        # --- Main Layout (Sidebar + Center + Right) ---
+        with gr.Row():
             
-            # 署名 (Footer)
-            gr.HTML(
-                """
-                <div style="font-size: 11px; color: #9ca3af; margin-top: 15px; text-align: left;">
-                    © 2025 Made by <a href="https://www.linkedin.com/in/qinghua-xia-479199252/" target="_blank" style="color: #6b7280; text-decoration: underline;">Sarah Xia</a>
-                </div>
-                """
-            )
+            # === Left Sidebar ===
+            with gr.Column(scale=1, min_width=200):
+                clear_btn = gr.Button("Reset Conversation", variant="stop")
+                
+                gr.Markdown("### Model Settings")
+                model_name = gr.Textbox(label="Model", value="gpt-4.1-mini", interactive=False, lines=1)
+                language_preference = gr.Radio(choices=["Auto", "English", "简体中文"], value="Auto", label="Language")
+                
+                learning_mode = gr.Radio(
+                    choices=LEARNING_MODES,
+                    value="Concept Explainer",
+                    label="Learning Mode",
+                    info="See User Guide for mode definitions details." 
+                )
+
+                # User Guide
+                with gr.Accordion("User Guide", open=True, elem_classes="main-user-guide"):
+                    with gr.Accordion("Getting Started", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["getting_started"])
+                    with gr.Accordion("Mode Definition", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["mode_definition"])
+                    with gr.Accordion("How Clare Works", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["how_clare_works"])
+                    with gr.Accordion("What is Memory Line", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["memory_line"])
+                    with gr.Accordion("Learning Progress Report", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["learning_progress"])
+                    with gr.Accordion("How Clare Uses Your Files", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["how_files"])
+                    with gr.Accordion("Micro-Quiz", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["micro_quiz"])
+                    with gr.Accordion("Summarization", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["summarization"])
+                    with gr.Accordion("Export Conversation", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["export_conversation"])
+                    with gr.Accordion("FAQ", open=False, elem_classes="clean-accordion"): gr.Markdown(USER_GUIDE_SECTIONS["faq"])
+                
+                gr.Markdown("---")
+                gr.Button("System Settings", size="sm", variant="secondary")
+                
+                gr.HTML(
+                    """
+                    <div style="font-size: 11px; color: #9ca3af; margin-top: 15px; text-align: left;">
+                        © 2025 Made by <a href="https://www.linkedin.com/in/qinghua-xia-479199252/" target="_blank" style="color: #6b7280; text-decoration: underline;">Sarah Xia</a>
+                    </div>
+                    """
+                )
 
-        # === [Center Main] ===
-        with gr.Column(scale=3):
-            
-            # --- Upload & Memory Line Row (New Layout) ---
-            with gr.Row():
+            # === Center Main ===
+            with gr.Column(scale=3):
                 
-                # [Left Group]: Upload Box + Controls (Dropdown/Button)
-                with gr.Column(scale=2): # Give this side more space (approx 66%)
-                    with gr.Row():
-                        # Upload File Box (Larger)
-                        with gr.Column(scale=3):
-                            syllabus_file = gr.File(
-                                file_types=[".docx", ".pdf", ".pptx"], 
-                                file_count="single", 
-                                height=150, 
-                                label="Upload file (.docx/.pdf/.pptx)"
+                # Upload & Memory Line
+                with gr.Row():
+                    # [Left] Upload
+                    with gr.Column(scale=2): 
+                        with gr.Row():
+                            with gr.Column(scale=3):
+                                # 调大高度 height=160
+                                syllabus_file = gr.File(
+                                    file_types=[".docx", ".pdf", ".pptx"], 
+                                    file_count="single", 
+                                    height=160, 
+                                    label="Upload file (.docx/.pdf/.pptx)"
+                                )
+                            with gr.Column(scale=1): 
+                                doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="", container=False)
+                                docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary")
+                    
+                    # [Right] Memory Line
+                    with gr.Column(scale=1): 
+                        with gr.Group(elem_classes="memory-line-box"):
+                            gr.HTML(
+                                f"""
+                                <div style="font-weight:bold; font-size:14px; margin-bottom:5px;">
+                                    <span class="html-tooltip" data-tooltip="See User Guide for explanation">Memory Line</span>
+                                </div>
+                                <div style="position: relative; height: 35px; margin-top: 10px; margin-bottom: 5px;">
+                                    <div style="position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background-color: #e5e7eb; border-radius: 4px;"></div>
+                                    <div style="position: absolute; bottom: 5px; left: 0; width: 40%; height: 8px; background-color: #8B1A1A; border-radius: 4px 0 0 4px;"></div>
+                                    <img src="{image_to_base64(CLARE_RUN_PATH)}" style="position: absolute; left: 36%; bottom: 8px; height: 35px; z-index: 10;">
+                                </div>
+                                <div style="display:flex; justify-content:space-between; align-items:center;">
+                                    <div style="font-size: 12px; color: #666;">Next Review: T+7</div>
+                                    <div style="font-size: 12px; color: #004a99; text-decoration:underline; cursor:pointer;">Report ⬇️</div>
+                                </div>
+                                """
                             )
-                        # Controls (Dropdown + Button) stacked vertically next to file box
-                        with gr.Column(scale=1): 
-                            doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="", container=False)
-                            # 使用 Markdown 模拟一点间距或者直接放按钮
-                            docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary")
+                            review_btn = gr.Button("Review Now", size="sm", variant="primary")
+                            session_status = gr.Markdown(visible=False)
+
+                # Chat
+                gr.Markdown(
+                    """
+                    <div style="background-color:#f9fafb; padding:10px; border-radius:5px; margin-top:10px; font-size:0.9em; color:#555;">
+                    ✦ <b>Instruction:</b> Use different learning modes to change Clare's teaching style.<br>
+                    ✦ <b>Example:</b> "Why does context length matter?" or "How does RAG reduce hallucination?"
+                    </div>
+                    """
+                )
+                chatbot = gr.Chatbot(label="", height=450, avatar_images=(None, CLARE_LOGO_PATH), show_label=False, bubble_full_width=False)
+                user_input = gr.Textbox(label="Your Input", placeholder="Ask about a concept, your assignment, or let Clare test you...", show_label=False, container=True, autofocus=True)
+
+            # === Right Sidebar ===
+            with gr.Column(scale=1, min_width=180):
+                gr.HTML("<div style='height: 210px; width: 100%;'></div>") # Spacer
                 
-                # [Right Group]: Memory Line (Right Aligned)
-                with gr.Column(scale=1): # Less space (approx 33%)
-                    with gr.Group(elem_classes="memory-line-box"):
-                        gr.HTML(
-                            f"""
-                            <div style="font-weight:bold; font-size:14px; margin-bottom:5px;">
-                                <span class="html-tooltip" data-tooltip="See User Guide for explanation">Memory Line</span>
-                            </div>
-                            <div style="position: relative; height: 35px; margin-top: 10px; margin-bottom: 5px;">
-                                <div style="position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background-color: #e5e7eb; border-radius: 4px;"></div>
-                                <div style="position: absolute; bottom: 5px; left: 0; width: 40%; height: 8px; background-color: #8B1A1A; border-radius: 4px 0 0 4px;"></div>
-                                <img src="{image_to_base64(CLARE_RUN_PATH)}" style="position: absolute; left: 36%; bottom: 8px; height: 35px; z-index: 10;">
-                            </div>
-                            <div style="display:flex; justify-content:space-between; align-items:center;">
-                                <div style="font-size: 12px; color: #666;">Next Review: T+7</div>
-                                <div style="font-size: 12px; color: #004a99; text-decoration:underline; cursor:pointer;">Report ⬇️</div>
-                            </div>
-                            """
-                        )
-                        review_btn = gr.Button("Review Now", size="sm", variant="primary")
-                        session_status = gr.Markdown(visible=False)
+                gr.Markdown("### Actions")
+                export_btn = gr.Button("Export Conversation", size="sm", elem_classes="action-btn")
+                quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm", elem_classes="action-btn")
+                summary_btn = gr.Button("Summarization", size="sm", elem_classes="action-btn")
+                
+                gr.Markdown("### Results")
+                result_display = gr.Textbox(label="Generated Content", lines=15, placeholder="Results...", show_label=False)
 
-            # Chat Interface
-            gr.Markdown(
-                """
-                <div style="background-color:#f9fafb; padding:10px; border-radius:5px; margin-top:10px; font-size:0.9em; color:#555;">
-                ✦ <b>Instruction:</b> Use different learning modes to change Clare's teaching style.<br>
-                ✦ <b>Example:</b> "Why does context length matter?" or "How does RAG reduce hallucination?"
-                </div>
-                """
-            )
-            chatbot = gr.Chatbot(label="", height=450, avatar_images=(None, CLARE_LOGO_PATH), show_label=False, bubble_full_width=False)
-            user_input = gr.Textbox(label="Your Input", placeholder="Ask about a concept, your assignment, or let Clare test you...", show_label=False, container=True, autofocus=True)
+    # ================== Logic & Events ==================
 
-        # === [Right Sidebar] ===
-        with gr.Column(scale=1, min_width=180):
-            
-            # Spacer (Push Actions down to align with Chatbot)
-            gr.HTML("<div style='height: 200px; width: 100%;'></div>")
-            
-            gr.Markdown("### Actions")
-            
-            export_btn = gr.Button("Export Conversation", size="sm", elem_classes="action-btn")
-            quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm", elem_classes="action-btn")
-            summary_btn = gr.Button("Summarization", size="sm", elem_classes="action-btn")
-            
-            gr.Markdown("### Results")
-            result_display = gr.Textbox(label="Generated Content", lines=15, placeholder="Results...", show_label=False)
+    def perform_login(name, id_val):
+        if not name.strip() or not id_val.strip():
+            return {login_msg: gr.update(value="❌ Please enter both Name and ID", visible=True)}
+        
+        # 登录成功：更新Header信息，隐藏登录页，显示主页
+        welcome_text = f"🎓 **{name}** ({id_val})"
+        return {
+            login_view: gr.update(visible=False),
+            main_view: gr.update(visible=True),
+            student_info_disp: gr.update(value=welcome_text),
+            login_msg: gr.update(visible=False),
+            user_name_state: name,
+            user_id_state: id_val
+        }
+
+    def perform_logout():
+        # 登出：清空输入，隐藏主页，显示登录页
+        return {
+            login_view: gr.update(visible=True),
+            main_view: gr.update(visible=False),
+            login_name: "",
+            login_id: "",
+            student_info_disp: ""
+        }
+
+    login_btn.click(
+        perform_login,
+        inputs=[login_name, login_id],
+        outputs=[login_view, main_view, student_info_disp, login_msg, user_name_state, user_id_state]
+    )
 
-    # ================== Logic Bindings ==================
+    logout_btn.click(
+        perform_logout,
+        outputs=[login_view, main_view, login_name, login_id, student_info_disp]
+    )
 
+    # Existing Main App Logic
     def update_course_and_rag(file, doc_type_val):
         topics = extract_course_topics_from_file(file, doc_type_val)
         rag_chunks = build_rag_chunks_from_file(file, doc_type_val)
         status_md = f"✅ **File Loaded:** {doc_type_val}\n\nAnalyzing content for Memory Line..."
         return topics, rag_chunks, status_md
 
+    syllabus_file.change(update_course_and_rag, [syllabus_file, doc_type], [course_outline_state, rag_chunks_state, session_status])
     docs_btn.click(lambda: gr.Info("Current Context: Syllabus.pdf (Uploaded), Course_Intro.docx (System)", title="Loaded Documents"))
 
     def respond(message, chat_history, course_outline, weaknesses, cognitive_state, rag_chunks, model, lang, mode, doc_type_val):