Update app.py

app.py

@@ -186,49 +186,18 @@ 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;
-}
-.login-btn {
-    background-color: #8B1A1A !important;
-    color: white !important;
-    font-weight: bold !important;
-    margin-top: 20px !important;
+    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-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; }
 
-/* 伪装成 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 样式 */
+/* 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 +207,26 @@ 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 (For Markdown) */
+.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; } }
 """
 
@@ -269,7 +247,6 @@ 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;">
@@ -280,20 +257,16 @@ 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 (Using Row for Alignment) ---
+        # --- Custom Header ---
         with gr.Row(elem_classes="header-container"):
-            # Left: Mascot & Title
             with gr.Column(scale=1):
                 gr.HTML(
                     f"""
@@ -312,9 +285,7 @@ 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;">
@@ -322,18 +293,14 @@ 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 (Sidebar + Center + Right) ---
+        # --- Main Layout ---
         with gr.Row():
             
             # === Left Sidebar ===
@@ -378,25 +345,28 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             # === Center Main ===
             with gr.Column(scale=3):
                 
-                # Upload & Memory Line
+                # --- Top Control Row: Upload | Controls | 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): 
+                    # 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 (最右)
+                    with gr.Column(scale=2): 
                         with gr.Group(elem_classes="memory-line-box"):
                             gr.HTML(
                                 f"""
@@ -439,7 +409,9 @@ 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")
-                result_display = gr.Textbox(label="Generated Content", lines=15, placeholder="Results...", show_label=False)
+                # 【修改点】：改用 Markdown 组件来显示格式化文本，外面包裹一个 Group 模拟 Box 样式
+                with gr.Group(elem_classes="result-box"):
+                    result_display = gr.Markdown(value="Results will appear here...", label="Generated Content")
 
     # ================== Logic & Events ==================
 
@@ -447,7 +419,6 @@ 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),
@@ -459,7 +430,6 @@ 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),
@@ -479,7 +449,6 @@ 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)