Update app.py

app.py

@@ -28,8 +28,9 @@ 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_LOGO_PATH = "clare_mascot.png" 
 CLARE_RUN_PATH = "Clare_Run.png"
 
 # ================== Base64 Helper ==================
@@ -60,7 +61,7 @@ USER_GUIDE_SECTIONS = {
     "faq": "## FAQ\n\n**Q: Does Clare give assignment answers?** No..."
 }
 
-# ================== CSS (Trademark Style) ==================
+# ================== CSS (悬停提示 Tooltip 样式) ==================
 CUSTOM_CSS = """
 /* Header */
 .header-container {
@@ -72,47 +73,6 @@ CUSTOM_CSS = """
 /* User Guide Accordion */
 .user-guide-item { margin-bottom: 5px; }
 
-/* === Trademark Style Question Mark Buttons === */
-.tm-help-btn {
-    display: inline-block !important;
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    color: #9ca3af !important; /* Light Grey */
-    font-size: 14px !important; /* Small font */
-    line-height: 1 !important;
-    min-width: auto !important;
-    width: 20px !important;
-    height: 20px !important;
-    margin-top: -8px !important; /* Lift up like superscript */
-    margin-left: 0px !important;
-    cursor: pointer !important;
-    vertical-align: top !important;
-    z-index: 10;
-}
-.tm-help-btn:hover {
-    color: #4b5563 !important; /* Darker grey on hover */
-    transform: scale(1.1);
-}
-
-/* Container to hold Text + TM-Button tightly */
-.label-row {
-    display: flex !important;
-    align-items: center !important;
-    gap: 0px !important; /* No gap between text and ? */
-    margin-bottom: 5px !important;
-    width: fit-content !important;
-}
-
-/* Remove default Markdown margins for tight layout */
-.tight-label p {
-    margin: 0 !important;
-    font-weight: bold;
-    font-size: 1rem;
-    line-height: 1.2;
-}
-
 /* Memory Line Box */
 .memory-line-box {
     border: 1px solid #e5e7eb; padding: 12px; border-radius: 8px;
@@ -120,12 +80,69 @@ CUSTOM_CSS = """
     display: flex; flex-direction: column; justify-content: space-between;
 }
 
-/* Action Buttons Row */
-.action-row {
-    display: flex !important;
-    align-items: center !important;
-    margin-bottom: 5px !important;
+/* === CSS Tooltip Logic (纯 CSS 实现悬停提示) === 
+   应用于 Buttons (.action-btn) 和 HTML 元素 (.html-tooltip)
+*/
+
+/* 1. 针对 Gradio 按钮的 Tooltip */
+.action-btn {
+    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;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    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;
+}
+
+/* 2. 针对 HTML 文本的 Tooltip (Memory Line Title) */
+.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;
+}
+
+@keyframes fadeIn { to { opacity: 1; } }
 """
 
 # ================== Gradio App ==================
@@ -145,7 +162,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             <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: 34px; font-weight: 800; line-height: 1.1; color: #000;">
+                    <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>
@@ -176,22 +193,16 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             model_name = gr.Textbox(label="Model", value=DEFAULT_MODEL, lines=1)
             language_preference = gr.Radio(choices=["Auto", "English", "简体中文"], value="Auto", label="Language")
             
-            # Learning Mode Title + Trademark (?)
-            with gr.Row(elem_classes="label-row"):
-                gr.Markdown("Learning Mode", elem_classes="tight-label")
-                mode_help_btn = gr.Button("?", elem_classes="tm-help-btn")
-
+            # Learning Mode (Use `info` for built-in hint)
             learning_mode = gr.Radio(
                 choices=LEARNING_MODES,
                 value="Concept Explainer",
-                label=None, 
-                show_label=False,
-                info="Select style"
+                label="Learning Mode",
+                info="See User Guide for mode definitions details." 
             )
 
             # User Guide Accordion
             with gr.Accordion("User Guide", open=True):
-                # Using lambda to defer content loading isn't necessary here, simple strings work
                 with gr.Accordion("Getting Started", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["getting_started"])
                 with gr.Accordion("Mode Definition", open=False, elem_classes="user-guide-item"):
@@ -224,36 +235,32 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             with gr.Row():
                 # Upload
                 with gr.Column(scale=1):
-                    with gr.Row(elem_classes="label-row"):
-                        gr.Markdown("Upload Course File", elem_classes="tight-label")
-                        file_help_btn = gr.Button("?", elem_classes="tm-help-btn") # Added help here too for consistency
-                    
-                    syllabus_file = gr.File(file_types=[".docx", ".pdf", ".pptx"], file_count="single", height=100, show_label=False)
+                    syllabus_file = gr.File(file_types=[".docx", ".pdf", ".pptx"], file_count="single", height=100, label="Upload File")
                     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"):
-                        # Title Row (TM Style)
-                        with gr.Row(elem_classes="label-row"):
-                             gr.Markdown("Memory Line", elem_classes="tight-label")
-                             ml_help_btn = gr.Button("?", elem_classes="tm-help-btn")
-                        
-                        # Progress Bar HTML
+                        # 使用 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 (Inside the box)
+                        # Review Button
                         review_btn = gr.Button("Review Now", size="sm", variant="primary")
                         session_status = gr.Markdown(visible=False)
 
@@ -273,34 +280,16 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         with gr.Column(scale=1, min_width=180):
             gr.Markdown("### Actions")
             
-            # Action: Export
-            with gr.Row(elem_classes="action-row", variant="compact"):
-                export_btn = gr.Button("Export Conversation", size="sm", scale=10)
-                export_help_btn = gr.Button("?", elem_classes="tm-help-btn", scale=1) # The TM button
-            
-            # Action: Quiz
-            with gr.Row(elem_classes="action-row", variant="compact"):
-                quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm", scale=10)
-                quiz_help_btn = gr.Button("?", elem_classes="tm-help-btn", scale=1)
-            
-            # Action: Summary
-            with gr.Row(elem_classes="action-row", variant="compact"):
-                summary_btn = gr.Button("Summarization", size="sm", scale=10)
-                summary_help_btn = gr.Button("?", elem_classes="tm-help-btn", scale=1)
+            # Action Buttons: 使用 elem_classes="action-btn" 来激活 CSS Tooltip
+            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 Bindings ==================
-    # Help Buttons (Pop-ups)
-    mode_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["mode_definition"], title="Mode Definition"))
-    file_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["how_files"], title="How Files Work"))
-    ml_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["memory_line"], title="Memory Line"))
-    export_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["export_conversation"], title="Export"))
-    quiz_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["micro_quiz"], title="Micro-Quiz"))
-    summary_help_btn.click(lambda: gr.Info(USER_GUIDE_SECTIONS["summarization"], title="Summarization"))
 
-    # Core 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)