Update app.py

app.py

@@ -46,18 +46,140 @@ def image_to_base64(image_path):
         mime = "image/png"
     return f"data:{mime};base64,{encoded_string}"
 
-# ================== User Guide Content ==================
+# ================== User Guide Content (已去除重复标题) ==================
 USER_GUIDE_SECTIONS = {
-    "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..."
+    "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": """
+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": """
+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.
+- **Adaptive explanation depth**: Clare can adjust complexity depending on your previous interactions.
+- **Responsible AI principles**: Avoids harmful output and preserves academic integrity.
+""",
+    "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": """
+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": """
+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
+- They are not kept as permanent training data
+
+Accepted formats: **.docx / .pdf / .pptx**
+""",
+    "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": """
+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": """
+You can export your chat session for:
+
+- Study review
+- Exam preparation
+- Documentation for tutoring help
+- Saving important explanations
+
+Export format: **Markdown / plain text**.
+""",
+    "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 & 简体中文.
+"""
 }
 
 # ================== CSS 样式表 ==================
@@ -69,11 +191,40 @@ CUSTOM_CSS = """
     border-bottom: 2px solid #f3f4f6; margin-bottom: 15px;
 }
 
-/* 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; }
+/* --- User Guide 样式优化 --- */
+
+/* 1. 最外层 User Guide (大标题) */
+.main-user-guide {
+    border: none !important;
+    background: transparent !important;
+}
+.main-user-guide > .label-wrap span {
+    font-size: 1.2rem !important; /* 加大 */
+    font-weight: 800 !important; /* 加粗 */
+    color: #111827 !important; /* 深黑色 */
+}
+
+/* 2. 内部子菜单 (小标题) */
+.clean-accordion {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    margin-bottom: 0px !important;
+    padding: 0 !important;
+}
+.clean-accordion > .label-wrap {
+    padding: 6px 0 !important;
+    border-bottom: 1px solid #f3f4f6 !important;
+}
+.clean-accordion > .label-wrap span {
+    font-size: 0.9rem !important; /* 比主标题小 */
+    font-weight: 500 !important; /* 中等粗细 */
+    color: #4b5563 !important; /* 深灰色 */
+}
+.clean-accordion > .label-wrap:hover span {
+    color: #000 !important;
+    text-decoration: underline;
+}
 
 /* Action 按钮加粗 & Tooltip */
 .action-btn { font-weight: bold !important; font-size: 0.9rem !important; position: relative; overflow: visible !important; }
@@ -146,8 +297,10 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 info="See User Guide for mode definitions details." 
             )
 
-            # User Guide (无框列表风格)
-            with gr.Accordion("User Guide", open=True, elem_classes="user-guide-group"):
+            # User Guide (主标题加粗加大，子标题变小)
+            # 给最外层加上 elem_classes="main-user-guide"
+            with gr.Accordion("User Guide", open=True, elem_classes="main-user-guide"):
+                # 子项只保留 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"])
@@ -179,17 +332,14 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             with gr.Row():
                 # Upload Column
                 with gr.Column(scale=1):
-                    # 调大高度 height=160
                     syllabus_file = gr.File(
                         file_types=[".docx", ".pdf", ".pptx"], 
                         file_count="single", 
                         height=160, 
                         label="Upload file (.docx/.pdf/.pptx)"
                     )
-                    # 下拉框 + 查看文档按钮
                     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 Column
@@ -229,8 +379,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # === [Right Sidebar] ===
         with gr.Column(scale=1, min_width=180):
             
-            # 占位符：用于将 Actions 向下推，与 Chatbox 顶部对齐
-            # 上传区+MemoryLine 大约高度160px + Gap，设置 200px 左右比较稳妥
+            # Spacer
             gr.HTML("<div style='height: 210px; width: 100%;'></div>")
             
             gr.Markdown("### Actions")
@@ -250,9 +399,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         status_md = f"✅ **File Loaded:** {doc_type_val}\n\nAnalyzing content for Memory Line..."
         return topics, rag_chunks, status_md
 
-    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):