Update app.py

app.py

@@ -27,12 +27,12 @@ from rag_engine import (
 )
 from syllabus_utils import extract_course_topics_from_file
 
-# ================== Assets (图片路径) ==================
+# ================== Assets ==================
 HANBRIDGE_LOGO_PATH = "hanbridge_logo.png"
 CLARE_LOGO_PATH = "clare_mascot.png"
 CLARE_RUN_PATH = "Clare_Run.png"
 
-# ================== Base64 图片转换 ==================
+# ================== Base64 Helper ==================
 def image_to_base64(image_path):
     if not os.path.exists(image_path):
         return "" 
@@ -48,150 +48,19 @@ def image_to_base64(image_path):
 
 # ================== User Guide Content ==================
 USER_GUIDE_SECTIONS = {
-    "getting_started": """
-## Getting started
-
-Welcome to **Clare — Your Personalized AI Tutor**.
-
-Clare is designed to support your learning through:
-- Clear explanations of course concepts  
-- Socratic-style reasoning guidance  
-- Personalized reinforcement based on learning science  
-- Course-aligned answers using your uploaded materials  
-- Micro-quizzes & summaries to strengthen understanding  
-
-**To begin:**
-1. Select your **Learning Mode** on the left  
-2. (Optional) Upload your **syllabus / slides / notes** at the top  
-3. Ask Clare any question about your course, assignment, or study plan.
-""",
-    "mode_definition": """
-## Mode Definition
-
-Clare offers different teaching modes to match how you prefer to learn.
-
-### Concept Explainer
-Clear, structured explanations with examples — ideal for learning new topics.
-
-### Socratic Tutor
-Clare asks guiding questions instead of giving direct answers.  
-Helps you build reasoning and problem-solving skills.
-
-### Exam Prep / Quiz
-Generates short practice questions aligned with your course week.  
-Useful for self-testing and preparing for exams.
-
-### Assignment Helper
-Helps you interpret assignment prompts, plan structure, and understand requirements.  
-❗ Clare does **not** produce full assignment answers (academic integrity).
-
-### Quick Summary
-Gives brief summaries of slides, reading materials, or long questions.
-""",
-    "how_clare_works": """
-## How Clare Works
-
-Clare combines **course context + learning science + AI reasoning** to generate answers.
-
-Clare uses:
-- **Your selected Learning Mode** Determines tone, depth, and interaction style.
-
-- **Your uploaded course files** Syllabus, slides, or papers help align answers with your specific course.
-
-- **Reinforcement learning cycle** Answers may prioritize key concepts you’re likely to forget (based on the forgetting curve).
-
-- **Adaptive explanation depth** Clare can adjust complexity depending on your previous interactions.
-
-- **Responsible AI principles** Avoids harmful output and preserves academic integrity.
-""",
-    "memory_line": """
-## What is Memory Line?
-
-**Memory Line** is a visualization of your *learning reinforcement cycle*.
-
-Based on the **forgetting-curve model**, Clare organizes your review topics into:
-- **T+0 (Current Week)** – new concepts  
-- **T+7** – first spaced review  
-- **T+14** – reinforcement review  
-- **T+30** – long-term consolidation  
-
-Clare uses these cycles to decide:
-- Which concepts to reinforce today  
-- Which explanations to prioritize  
-- When to introduce quick review questions  
-
-**Review Now** will generate a small set of concepts that are due for spaced repetition.
-""",
-    "learning_progress": """
-## Learning Progress Report
-
-The Learning Progress Report highlights:
-- **Concepts mastered** - **Concepts in progress** - **Concepts due for review** - Your recent **micro-quiz results** - Suggested **next-step topics**
-
-You can download a **summary** at any time to use as study notes.
-""",
-    "how_files": """
-## How Clare Uses Your Files
-
-Your uploaded syllabus / slides / notes help Clare:
-
-- Align explanations with your exact course  
-- Use terminology consistent with your professor  
-- Improve factual accuracy  
-- Generate personalized reinforcement content  
-- 🔒 **Privacy**: Files are used only within your session.
-
-Accepted formats: **.docx / .pdf / .pptx**
-""",
-    "micro_quiz": """
-## Micro-Quiz
-
-The **Micro-Quiz** function provides a:
-
-- 1-minute self-check  
-- 1–3 questions based on your recent topics  
-- Instant feedback
-
-Micro-quizzes strengthen your memory and are part of Clare’s reinforcement system.
-""",
-    "summarization": """
-## Summarization
-
-Clare can summarize:
-
-- Lecture notes  
-- Uploaded PDFs  
-- Long conversation threads  
-- Complex concepts  
-
-Summary styles can include: Bullet points, Key ideas, Study notes, Comparison-style highlights.
-""",
-    "export_conversation": """
-## Export Conversation
-
-You can export your chat session for:
-
-- Study review  
-- Exam preparation  
-- Documentation for tutoring help  
-- Saving important explanations  
-
-Export format: **Markdown / plain text**.
-""",
-    "faq": """
-## FAQ
-
-**Q: Does Clare give assignment answers?** No. Clare assists with understanding and planning but does **not** generate full solutions.
-
-**Q: Does Clare replace lectures or TA office hours?** No. Clare supplements your learning by providing on-demand guidance.
-
-**Q: Can Clare explain my professor’s slides?** Yes — upload your slides so Clare can align explanations with your course.
-
-**Q: What languages does Clare support?** Currently: English & 简体中文.
-"""
+    "getting_started": "## Getting started\n\nWelcome to **Clare**...",
+    "mode_definition": "## Mode Definition\n\nClare offers different teaching modes...",
+    "how_clare_works": "## How Clare Works\n\nClare combines course context...",
+    "memory_line": "## What is Memory Line?\n\n**Memory Line** is a visualization of your *learning reinforcement cycle*...",
+    "learning_progress": "## Learning Progress Report\n\nThe Learning Progress Report highlights...",
+    "how_files": "## How Clare Uses Your Files\n\nYour uploaded syllabus / slides / notes help Clare...",
+    "micro_quiz": "## Micro-Quiz\n\nThe **Micro-Quiz** function provides a 1-minute self-check...",
+    "summarization": "## Summarization\n\nClare can summarize lecture notes, PDFs, etc...",
+    "export_conversation": "## Export Conversation\n\nYou can export your chat session for study review...",
+    "faq": "## FAQ\n\n**Q: Does Clare give assignment answers?** No..."
 }
 
-# ================== CSS ==================
+# ================== CSS (Trademark Style) ==================
 CUSTOM_CSS = """
 /* Header */
 .header-container {
@@ -200,25 +69,63 @@ CUSTOM_CSS = """
     border-bottom: 2px solid #f3f4f6; margin-bottom: 15px;
 }
 
-/* 问号按钮样式 (? Buttons) */
-.help-btn {
-    min-width: 25px !important; width: 25px !important; height: 25px !important;
-    padding: 0 !important; border-radius: 50% !important;
-    font-size: 12px !important; font-weight: bold !important;
-    background: transparent !important; color: #666 !important; border: 1px solid #ccc !important;
-    box-shadow: none !important; margin-left: 5px !important;
-    display: inline-flex !important; align-items: center !important; justify-content: center !important;
+/* 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;
 }
-.help-btn:hover { background: #eee !important; color: #333 !important; border-color: #999 !important; }
 
-/* Memory Line */
+/* 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 Accordion specific tweaking */
-.user-guide-item { margin-bottom: 5px; }
+/* Action Buttons Row */
+.action-row {
+    display: flex !important;
+    align-items: center !important;
+    margin-bottom: 5px !important;
+}
 """
 
 # ================== Gradio App ==================
@@ -238,7 +145,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: 32px; font-weight: 800; line-height: 1.1; color: #000;">
+                    <div style="font-size: 34px; 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>
@@ -267,55 +174,42 @@ 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)
-            language_preference = gr.Radio(
-                choices=["Auto", "English", "简体中文"], 
-                value="Auto", 
-                label="Language"
-            )
+            language_preference = gr.Radio(choices=["Auto", "English", "简体中文"], value="Auto", label="Language")
             
-            # Learning Mode with Help Button
-            with gr.Row(variant="compact", elem_classes="no-gap"):
-                gr.Markdown("**Learning Mode**")
-                mode_help_btn = gr.Button("?", elem_classes="help-btn") # ? Button
+            # 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 = gr.Radio(
                 choices=LEARNING_MODES,
                 value="Concept Explainer",
-                label=None, # Hide default label to use custom header above
-                info="Select style",
-                show_label=False
+                label=None, 
+                show_label=False,
+                info="Select style"
             )
 
-            # --- User Guide (New Design: Nested Accordions) ---
+            # 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"):
                     gr.Markdown(USER_GUIDE_SECTIONS["mode_definition"])
-                
                 with gr.Accordion("How Clare Works", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["how_clare_works"])
-                
                 with gr.Accordion("What is Memory Line", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["memory_line"])
-
                 with gr.Accordion("Learning Progress Report", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["learning_progress"])
-
                 with gr.Accordion("How Clare Uses Your Files", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["how_files"])
-
                 with gr.Accordion("Micro-Quiz", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["micro_quiz"])
-                
                 with gr.Accordion("Summarization", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["summarization"])
-
                 with gr.Accordion("Export Conversation", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["export_conversation"])
-
                 with gr.Accordion("FAQ", open=False, elem_classes="user-guide-item"):
                     gr.Markdown(USER_GUIDE_SECTIONS["faq"])
             
@@ -330,48 +224,38 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             with gr.Row():
                 # Upload
                 with gr.Column(scale=1):
-                    with gr.Row():
-                        gr.Markdown("**Upload Course File**")
-                        file_help_btn = gr.Button("?", elem_classes="help-btn") # ? Button
+                    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
-                    )
-                    doc_type = gr.Dropdown(
-                        choices=DOC_TYPES, 
-                        value="Syllabus", 
-                        label="File type",
-                        container=False 
-                    )
+                    syllabus_file = gr.File(file_types=[".docx", ".pdf", ".pptx"], file_count="single", height=100, show_label=False)
+                    doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=False)
                 
                 # Memory Line
                 with gr.Column(scale=1):
-                    gr.HTML(
-                        f"""
-                        <div class="memory-line-box">
-                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">
-                                <div style="font-weight:bold; font-size:14px;">Memory Line</div>
-                                </div>
-                            <div style="position: relative; height: 35px; margin-top: 15px; margin-bottom: 5px;">
+                    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
+                        gr.HTML(
+                            f"""
+                            <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; margin-top:8px;">
+                            <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;">Learning Progress Report ⬇️</div>
+                                <div style="font-size: 12px; color: #004a99; text-decoration:underline; cursor:pointer;">Report ⬇️</div>
                             </div>
-                        </div>
-                        """
-                    )
-                    # Memory Line 的问号按钮 (放在 HTML 下方紧凑的一行里)
-                    with gr.Row(elem_classes="no-gap"):
-                         ml_help_btn = gr.Button("What is Memory Line?", size="sm", variant="secondary")
-                         review_btn = gr.Button("Review Now", size="sm", variant="primary")
-                    session_status = gr.Markdown(visible=False)
+                            """
+                        )
+                        # Review Button (Inside the box)
+                        review_btn = gr.Button("Review Now", size="sm", variant="primary")
+                        session_status = gr.Markdown(visible=False)
 
             # Chat
             gr.Markdown(
@@ -382,41 +266,33 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 </div>
                 """
             )
-            chatbot = gr.Chatbot(
-                label="", height=450,
-                avatar_images=(None, CLARE_LOGO_PATH), 
-                show_label=False, bubble_full_width=False
-            )
-            user_input = gr.Textbox(
-                label="Your Input", placeholder="Ask about a concept, your assignment, or let Clare test you...",
-                show_label=False, container=True, autofocus=True
-            )
+            chatbot = gr.Chatbot(label="", height=450, avatar_images=(None, CLARE_LOGO_PATH), show_label=False, bubble_full_width=False)
+            user_input = gr.Textbox(label="Your Input", placeholder="Ask about a concept, your assignment, or let Clare test you...", show_label=False, container=True, autofocus=True)
 
         # === [Right Sidebar] ===
         with gr.Column(scale=1, min_width=180):
             gr.Markdown("### Actions")
             
-            with gr.Row():
-                export_btn = gr.Button("Export Conversation", size="sm", scale=4)
-                export_help_btn = gr.Button("?", elem_classes="help-btn", scale=1)
+            # 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
             
-            with gr.Row():
-                quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm", scale=4)
-                quiz_help_btn = gr.Button("?", elem_classes="help-btn", scale=1)
-
-            with gr.Row():
-                summary_btn = gr.Button("Summarization", size="sm", scale=4)
-                summary_help_btn = gr.Button("?", elem_classes="help-btn", scale=1)
+            # 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)
             
             gr.Markdown("### Results")
-            result_display = gr.Textbox(
-                label="Generated Content", lines=15,
-                placeholder="Results from Export, Quiz, or Summary will appear here...",
-                show_label=False
-            )
+            result_display = gr.Textbox(label="Generated Content", lines=15, placeholder="Results...", show_label=False)
 
-    # ================== 问号按钮逻辑 (Pop-up Info) ==================
-    # 当点击问号时，弹出对应的信息
+    # ================== 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"))
@@ -424,7 +300,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     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"))
 
-    # ================== Main Logic (保持原有逻辑) ==================
+    # 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)
@@ -446,12 +322,10 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
 
     user_input.submit(respond, [user_input, chatbot, course_outline_state, weakness_state, cognitive_state_state, rag_chunks_state, model_name, language_preference, learning_mode, doc_type], [user_input, chatbot, weakness_state, cognitive_state_state, session_status])
 
-    # Button Actions
     export_btn.click(lambda h, c, m, w, cog: export_conversation(h, c, m, w, cog), [chatbot, course_outline_state, learning_mode, weakness_state, cognitive_state_state], [result_display])
     quiz_btn.click(lambda h, c, w, cog, m, l: generate_quiz_from_history(h, c, w, cog, m, l), [chatbot, course_outline_state, weakness_state, cognitive_state_state, model_name, language_preference], [result_display])
     summary_btn.click(lambda h, c, w, cog, m, l: summarize_conversation(h, c, w, cog, m, l), [chatbot, course_outline_state, weakness_state, cognitive_state_state, model_name, language_preference], [result_display])
     
-    # Reset
     def clear_all():
         empty_state = {"confusion": 0, "mastery": 0}
         default_status = render_session_status("Concept Explainer", [], empty_state)