Update app.py

app.py

@@ -69,71 +69,23 @@ CUSTOM_CSS = """
     border-bottom: 2px solid #f3f4f6; margin-bottom: 15px;
 }
 
-/* --- User Guide 美化 (无框风格) --- */
-.user-guide-group {
-    border: none !important;
-    background: transparent !important;
-}
-/* 针对子项 Accordion 的样式覆盖 */
-.clean-accordion {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    margin-bottom: 0px !important;
-    padding: 0 !important;
-}
-/* 修改 Accordion 标题栏样式 */
-.clean-accordion > .label-wrap {
-    border: none !important;
-    background: transparent !important;
-    padding: 8px 0 !important;
-    font-size: 0.95rem !important;
-    font-weight: 500 !important;
-    color: #374151 !important;
-    border-bottom: 1px solid #f3f4f6 !important; /* 淡淡的分隔线 */
-}
-.clean-accordion > .label-wrap:hover {
-    color: #000 !important;
-    background: #f9fafb !important;
-}
+/* User Guide 美化 (无框风格) */
+.user-guide-group { border: none !important; background: transparent !important; }
+.clean-accordion { border: none !important; background: transparent !important; box-shadow: none !important; margin-bottom: 0px !important; padding: 0 !important; }
+.clean-accordion > .label-wrap { border: none !important; background: transparent !important; padding: 8px 0 !important; font-size: 0.95rem !important; font-weight: 500 !important; color: #374151 !important; border-bottom: 1px solid #f3f4f6 !important; }
+.clean-accordion > .label-wrap:hover { color: #000 !important; background: #f9fafb !important; }
 
-/* --- Action 按钮加粗 --- */
-.action-btn {
-    font-weight: bold !important;
-    font-size: 0.9rem !important;
-    position: relative; 
-    overflow: visible !important;
-}
-
-/* Tooltip (Actions) */
-.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;
-}
+/* 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;
-}
+.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;
-}
+.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; } }
 """
@@ -148,7 +100,7 @@ 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([]) 
 
-    # 1. Header
+    # 1. Header (包含右上角 Log Out)
     gr.HTML(
         f"""
         <div class="header-container">
@@ -166,8 +118,9 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             </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;">
-                    🎓 (Student Name) (Student Email/ID)
+                <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>
                 </div>
             </div>
         </div>
@@ -181,9 +134,8 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         with gr.Column(scale=1, min_width=200):
             clear_btn = gr.Button("Reset Conversation", variant="stop")
             
-            # Model Settings
+            # Model Settings (Locked)
             gr.Markdown("### Model Settings")
-            # 锁定 Model，不可修改
             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")
             
@@ -194,55 +146,53 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 info="See User Guide for mode definitions details." 
             )
 
-            # User Guide (美化版 - 无框风格)
+            # User Guide (无框列表风格)
             with gr.Accordion("User Guide", open=True, elem_classes="user-guide-group"):
-                # 给每个子项加上 elem_classes="clean-accordion" 以去除边框
-                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"])
+                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"])
             
-            # System Settings / Log Out (去掉 gr.Group 框，简洁排列)
-            gr.Markdown("---") # 分割线
-            with gr.Row():
-                gr.Button("System Settings", size="sm", variant="secondary")
-                gr.Button("Log Out", size="sm", variant="secondary")
+            # 底部 Settings & Copyright
+            gr.Markdown("---")
+            gr.Button("System Settings", size="sm", variant="secondary")
+            
+            # 署名 (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>
+                """
+            )
 
         # === [Center Main] ===
         with gr.Column(scale=3):
             
-            # Upload & Memory Line
-            # 这一行高度大约是 130px - 150px
+            # Upload & Memory Line Row
             with gr.Row():
-                # Upload
+                # Upload Column
                 with gr.Column(scale=1):
-                    # 增加 height 以防文字看不全，或者不设 height 让它自适应
-                    # 这里设置为 None 让其自适应内容，或者稍微加大一点比如 120
+                    # 调大高度 height=160
                     syllabus_file = gr.File(
                         file_types=[".docx", ".pdf", ".pptx"], 
                         file_count="single", 
-                        height=120, # 稍微调高一点
-                        label="Upload file (.docx/.pdf/.pptx)" # Label 放在这里
+                        height=160, 
+                        label="Upload file (.docx/.pdf/.pptx)"
                     )
-                    doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=False)
+                    # 下拉框 + 查看文档按钮
+                    with gr.Row():
+                        doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=False, scale=3)
+                        # 这里添加 "Loaded Docs" 按钮/指示器
+                        docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary", scale=2, min_width=80)
                 
-                # Memory Line
+                # Memory Line Column
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="memory-line-box"):
                         gr.HTML(
@@ -264,7 +214,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                         review_btn = gr.Button("Review Now", size="sm", variant="primary")
                         session_status = gr.Markdown(visible=False)
 
-            # Chat
+            # Chat Interface
             gr.Markdown(
                 """
                 <div style="background-color:#f9fafb; padding:10px; border-radius:5px; margin-top:10px; font-size:0.9em; color:#555;">
@@ -279,14 +229,12 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # === [Right Sidebar] ===
         with gr.Column(scale=1, min_width=180):
             
-            # --- 占位符 Spacer ---
-            # 这是一个看不见的盒子，高度设为 165px (大约等于 Upload + Memory Line + Padding 的高度)
-            # 作用是把下面的 Actions 顶下去，使其与 Chatbot 顶部对齐
-            gr.HTML("<div style='height: 165px; width: 100%;'></div>")
+            # 占位符：用于将 Actions 向下推，与 Chatbox 顶部对齐
+            # 上传区+MemoryLine 大约高度160px + Gap，设置 200px 左右比较稳妥
+            gr.HTML("<div style='height: 210px; width: 100%;'></div>")
             
             gr.Markdown("### Actions")
             
-            # Action Buttons (加粗 + 悬停提示)
             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")
@@ -304,6 +252,9 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
 
     syllabus_file.change(update_course_and_rag, [syllabus_file, doc_type], [course_outline_state, rag_chunks_state, session_status])
 
+    # 简单的 Loaded Docs 提示逻辑
+    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):
         resolved_lang = detect_language(message or "", lang)
         if not message or not message.strip():