Update app.py

app.py

@@ -184,51 +184,18 @@ Currently: English & 简体中文.
 
 # ================== CSS 样式表 ==================
 CUSTOM_CSS = """
-/* --- 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;
-}
-.login-btn {
-    background-color: #8B1A1A !important;
-    color: white !important;
-    font-weight: bold !important;
-    margin-top: 20px !important;
-}
-
 /* --- Main Header --- */
-.header-container {
-    padding: 10px 20px; 
-    background-color: #ffffff;
-    border-bottom: 2px solid #f3f4f6; 
-    margin-bottom: 15px;
-    display: flex;
-    align-items: center;
-}
+.header-container { padding: 10px 20px; background-color: #ffffff; border-bottom: 2px solid #f3f4f6; margin-bottom: 15px; display: flex; align-items: center; }
 
-/* 伪装成 Link 的 Button (Log Out) */
-.link-btn {
-    background: transparent !important;
-    border: none !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;
-}
-.link-btn:hover {
-    color: #cc0000 !important;
-}
+/* Log Out Link Style */
+.link-btn { background: transparent !important; border: none !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; }
+.link-btn:hover { color: #cc0000 !important; }
+
+/* Login Button in Header */
+.header-login-btn { font-size: 13px !important; padding: 4px 12px !important; background-color: #f3f4f6 !important; color: #333 !important; border: 1px solid #ddd !important; border-radius: 15px !important; }
+.header-login-btn:hover { background-color: #e5e7eb !important; border-color: #ccc !important; }
 
-/* User Guide 样式 */
+/* 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; }
@@ -238,17 +205,20 @@ CUSTOM_CSS = """
 .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 Buttons */
 .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; }
 
+/* Tooltips & 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; }
-
-/* Memory Line Box */
 .memory-line-box { border: 1px solid #e5e7eb; padding: 12px; border-radius: 8px; background-color: #f9fafb; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
 
+/* Results Box Style */
+.result-box { border: 1px solid #e5e7eb; background: #ffffff; padding: 10px; border-radius: 8px; height: 100%; }
+.result-box .prose { font-size: 0.9rem; }
+
 @keyframes fadeIn { to { opacity: 1; } }
 """
 
@@ -262,224 +232,216 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
     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
+    # --- Header (Always Visible) ---
+    with gr.Row(elem_classes="header-container"):
+        # Left: Logo & Title
+        with gr.Column(scale=2):
+            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>
+                """
+            )
+        
+        # Right: Hanbridge Logo & Dynamic Login Area
+        with gr.Column(scale=1):
+            # Top: Logo
             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 style="display:flex; justify-content:flex-end; margin-bottom: 8px;">
+                    <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 55px; object-fit: contain;">
                 </div>
-                <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>
                 """
             )
+            # Bottom: Login UI Logic
+            with gr.Row():
+                with gr.Column(scale=1): pass # Spacer to push content right
+                
+                with gr.Column(scale=0, min_width=300):
+                    
+                    # 1. Default State: Login Button (Visible initially)
+                    login_start_btn = gr.Button("👤 Student Login", size="sm", elem_classes="header-login-btn")
+                    
+                    # 2. Input State: Inputs + Confirm (Hidden initially)
+                    with gr.Group(visible=False) as login_form_group:
+                        with gr.Row(elem_classes="no-gap"):
+                            name_input = gr.Textbox(placeholder="Name", show_label=False, container=False, scale=2, min_width=80)
+                            id_input = gr.Textbox(placeholder="ID", show_label=False, container=False, scale=2, min_width=80)
+                            login_confirm_btn = gr.Button("✅", size="sm", scale=1, min_width=40)
+
+                    # 3. Logged In State: Info + Logout (Hidden initially)
+                    with gr.Group(visible=False) as logged_in_group:
+                        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 ---
+    with gr.Row():
+        
+        # === 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")
             
-            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." 
+            )
+
+            # 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"])
             
-            login_btn = gr.Button("Enter Class", elem_classes="login-btn", size="lg")
+            gr.Markdown("---")
+            gr.Button("System Settings", size="sm", variant="secondary")
             
-            login_msg = gr.Markdown(visible=False) # 错误提示占位
+            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>
+                """
+            )
 
-    # ================== 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>
+        # === Center Main ===
+        with gr.Column(scale=3):
+            
+            # --- Top Control Row ---
+            with gr.Row():
+                # Upload Box
+                with gr.Column(scale=2):
+                     syllabus_file = gr.File(
+                        file_types=[".docx", ".pdf", ".pptx"], 
+                        file_count="single", 
+                        height=160, 
+                        label="Upload file (.docx/.pdf/.pptx)"
+                    )
+                # Controls
+                with gr.Column(scale=1):
+                     doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=True)
+                     gr.HTML("<div style='height:5px'></div>")
+                     docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary")
+                # Memory Line
+                with gr.Column(scale=2): 
+                    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="font-size: 14px; font-style: italic; color: #333; margin-top: 4px;">
-                                Personalized guidance, review, and intelligent reinforcement
+                            <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>
-                    </div>
-                    """
-                )
-            
-            # 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")
+                            <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)
 
-        # --- Main Layout (Sidebar + Center + Right) ---
-        with gr.Row():
+            # 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
             
-            # === 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>
-                    """
-                )
+            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")
+            with gr.Group(elem_classes="result-box"):
+                result_display = gr.Markdown(value="Results will appear here...", label="Generated Content")
 
-            # === Center Main ===
-            with gr.Column(scale=3):
-                
-                # 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>
-                                """
-                            )
-                            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
-                
-                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)
+    # ================== Logic: Login Flow ==================
 
-    # ================== Logic & Events ==================
+    # 1. 点击 "Student Login" -> 显示输入框
+    def show_login_form():
+        return {
+            login_start_btn: gr.update(visible=False),
+            login_form_group: gr.update(visible=True)
+        }
+    
+    login_start_btn.click(show_login_form, outputs=[login_start_btn, login_form_group])
 
-    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)}
+    # 2. 点击 "✅" -> 确认登录 -> 显示信息
+    def confirm_login(name, id_val):
+        if not name or not id_val:
+            # 简单校验，如果为空就不跳转 (实际可加提示)
+            return gr.update(), gr.update(), gr.update(), gr.update()
         
-        # 登录成功：更新Header信息，隐藏登录页，显示主页
-        welcome_text = f"🎓 **{name}** ({id_val})"
+        display_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),
+            login_form_group: gr.update(visible=False),
+            logged_in_group: gr.update(visible=True),
+            student_info_disp: gr.update(value=display_text),
             user_name_state: name,
             user_id_state: id_val
         }
 
-    def perform_logout():
-        # 登出：清空输入，隐藏主页，显示登录页
+    login_confirm_btn.click(
+        confirm_login, 
+        inputs=[name_input, id_input], 
+        outputs=[login_form_group, logged_in_group, student_info_disp, user_name_state, user_id_state]
+    )
+
+    # 3. 点击 "Log Out" -> 重置回最初状态
+    def logout():
         return {
-            login_view: gr.update(visible=True),
-            main_view: gr.update(visible=False),
-            login_name: "",
-            login_id: "",
-            student_info_disp: ""
+            logged_in_group: gr.update(visible=False),
+            login_start_btn: gr.update(visible=True),
+            name_input: gr.update(value=""),
+            id_input: gr.update(value=""),
+            student_info_disp: gr.update(value="")
         }
 
-    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]
-    )
+    logout_btn.click(logout, outputs=[logged_in_group, login_start_btn, name_input, id_input, student_info_disp])
 
-    logout_btn.click(
-        perform_logout,
-        outputs=[login_view, main_view, login_name, login_id, student_info_disp]
-    )
+    # ================== Main App Logic ==================
 
-    # 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)