Update app.py

app.py

@@ -186,18 +186,49 @@ Currently: English & 简体中文.
 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;
+    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;
 }
-.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; }
-.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; }
+.header-container {
+    padding: 10px 20px; 
+    background-color: #ffffff;
+    border-bottom: 2px solid #f3f4f6; 
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
 
-/* User Guide */
+/* 伪装成 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;
+}
+
+/* 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; }
@@ -207,25 +238,16 @@ 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 Buttons */
+/* 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; }
 
-/* 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 { 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 (For Markdown) */
-.result-box {
-    border: 1px solid #e5e7eb;
-    background: #ffffff;
-    padding: 10px;
-    border-radius: 8px;
-    height: 100%;
-}
-.result-box .prose { font-size: 0.9rem; }
+/* 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; }
 
 @keyframes fadeIn { to { opacity: 1; } }
 """
@@ -247,6 +269,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     # ================== 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;">
@@ -257,16 +280,20 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 <p style="color: #666; margin-bottom: 30px;">Your Personalized AI Tutor</p>
                 """
             )
+            
             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")
+            
             login_btn = gr.Button("Enter Class", elem_classes="login-btn", size="lg")
-            login_msg = gr.Markdown(visible=False)
+            
+            login_msg = gr.Markdown(visible=False) # 错误提示占位
 
     # ================== Layer 2: Main App View ==================
     with gr.Group(visible=False) as main_view:
         
-        # --- Custom Header ---
+        # --- Custom Header (Using Row for Alignment) ---
         with gr.Row(elem_classes="header-container"):
+            # Left: Mascot & Title
             with gr.Column(scale=1):
                 gr.HTML(
                     f"""
@@ -285,7 +312,9 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                     """
                 )
             
+            # 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;">
@@ -293,14 +322,18 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                     </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 ---
+        # --- Main Layout (Sidebar + Center + Right) ---
         with gr.Row():
             
             # === Left Sidebar ===
@@ -345,28 +378,25 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             # === Center Main ===
             with gr.Column(scale=3):
                 
-                # --- Top Control Row: Upload | Controls | Memory Line ---
+                # Upload & Memory Line
                 with gr.Row():
-                    
-                    # Col 1: Upload File (最左)
-                    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)"
-                        )
-
-                    # Col 2: Controls (中间 - Dropdown & Docs Button)
-                    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")
-
-                    # Col 3: Memory Line (最右)
+                    # [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"""
@@ -409,9 +439,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 summary_btn = gr.Button("Summarization", size="sm", elem_classes="action-btn")
                 
                 gr.Markdown("### Results")
-                # 【修改点】：改用 Markdown 组件来显示格式化文本，外面包裹一个 Group 模拟 Box 样式
-                with gr.Group(elem_classes="result-box"):
-                    result_display = gr.Markdown(value="Results will appear here...", label="Generated Content")
+                result_display = gr.Textbox(label="Generated Content", lines=15, placeholder="Results...", show_label=False)
 
     # ================== Logic & Events ==================
 
@@ -419,6 +447,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         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),
@@ -430,6 +459,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         }
 
     def perform_logout():
+        # 登出：清空输入，隐藏主页，显示登录页
         return {
             login_view: gr.update(visible=True),
             main_view: gr.update(visible=False),
@@ -449,6 +479,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         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)