Update app.py

app.py

@@ -28,7 +28,6 @@ from rag_engine import (
 from syllabus_utils import extract_course_topics_from_file
 
 # ================== Assets ==================
-# 根据你的截图文件名配置
 HANBRIDGE_LOGO_PATH = "hanbridge_logo.png"
 CLARE_LOGO_PATH = "clare_mascot.png" 
 CLARE_RUN_PATH = "Clare_Run.png"
@@ -61,7 +60,7 @@ USER_GUIDE_SECTIONS = {
     "faq": "## FAQ\n\n**Q: Does Clare give assignment answers?** No..."
 }
 
-# ================== CSS (悬停提示 Tooltip 样式) ==================
+# ================== CSS 样式表 ==================
 CUSTOM_CSS = """
 /* Header */
 .header-container {
@@ -70,76 +69,70 @@ CUSTOM_CSS = """
     border-bottom: 2px solid #f3f4f6; margin-bottom: 15px;
 }
 
-/* User Guide Accordion */
-.user-guide-item { margin-bottom: 5px; }
-
-/* 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;
+/* --- 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;
 }
 
-/* === CSS Tooltip Logic (纯 CSS 实现悬停提示) === 
-   应用于 Buttons (.action-btn) 和 HTML 元素 (.html-tooltip)
-*/
-
-/* 1. 针对 Gradio 按钮的 Tooltip */
+/* --- Action 按钮加粗 --- */
 .action-btn {
-    position: relative;
-    overflow: visible !important; /* 允许提示框超出按钮边界 */
+    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;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    opacity: 0;
-    animation: fadeIn 0.2s forwards;
+    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;
+    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;
 }
 
-/* 2. 针对 HTML 文本的 Tooltip (Memory Line Title) */
+/* HTML Tooltip (Memory Line) */
 .html-tooltip {
-    border-bottom: 1px dashed #999; /* 虚线表示可悬停 */
-    cursor: help;
-    position: relative;
+    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;
+    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;
 }
 
 @keyframes fadeIn { to { opacity: 1; } }
@@ -190,10 +183,10 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             
             # Model Settings
             gr.Markdown("### Model Settings")
-            model_name = gr.Textbox(label="Model", value=DEFAULT_MODEL, lines=1)
+            # 锁定 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")
             
-            # Learning Mode (Use `info` for built-in hint)
             learning_mode = gr.Radio(
                 choices=LEARNING_MODES,
                 value="Concept Explainer",
@@ -201,66 +194,73 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 info="See User Guide for mode definitions details." 
             )
 
-            # User Guide Accordion
-            with gr.Accordion("User Guide", open=True):
-                with gr.Accordion("Getting Started", open=False, elem_classes="user-guide-item"):
+            # 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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                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="user-guide-item"):
+                with gr.Accordion("FAQ", open=False, elem_classes="clean-accordion"):
                     gr.Markdown(USER_GUIDE_SECTIONS["faq"])
             
-            with gr.Group():
-                gr.Button("System Settings", variant="secondary")
-                gr.Button("Log Out", variant="secondary")
+            # 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")
 
         # === [Center Main] ===
         with gr.Column(scale=3):
             
             # Upload & Memory Line
+            # 这一行高度大约是 130px - 150px
             with gr.Row():
                 # Upload
                 with gr.Column(scale=1):
-                    syllabus_file = gr.File(file_types=[".docx", ".pdf", ".pptx"], file_count="single", height=100, label="Upload File")
+                    # 增加 height 以防文字看不全，或者不设 height 让它自适应
+                    # 这里设置为 None 让其自适应内容，或者稍微加大一点比如 120
+                    syllabus_file = gr.File(
+                        file_types=[".docx", ".pdf", ".pptx"], 
+                        file_count="single", 
+                        height=120, # 稍微调高一点
+                        label="Upload file (.docx/.pdf/.pptx)" # Label 放在这里
+                    )
                     doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=False)
                 
                 # Memory Line
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="memory-line-box"):
-                        # 使用 HTML class 实现悬停提示
                         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 Button
                         review_btn = gr.Button("Review Now", size="sm", variant="primary")
                         session_status = gr.Markdown(visible=False)
 
@@ -278,9 +278,15 @@ 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>")
+            
             gr.Markdown("### Actions")
             
-            # Action Buttons: 使用 elem_classes="action-btn" 来激活 CSS Tooltip
+            # 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")