Update app.py

app.py

@@ -34,7 +34,7 @@ from syllabus_utils import extract_course_topics_from_file
 # ================== Assets ==================
 CLARE_LOGO_PATH = "clare_mascot.png"
 CLARE_RUN_PATH = "Clare_Run.png"
-CLARE_READING_PATH = "Clare_reading.png"  # 确保存在
+CLARE_READING_PATH = "Clare_reading.png"
 
 # ================== Base64 Helper ==================
 def image_to_base64(image_path: str) -> str:
@@ -181,12 +181,10 @@ Currently: English & 简体中文.
 """
 }
 
-# ================== CSS 样式表 ==================
+# ================== CSS ==================
 CUSTOM_CSS = """
-/* --- Main Header --- */
 .header-container { padding: 10px 20px; background-color: #ffffff; border-bottom: 2px solid #f3f4f6; margin-bottom: 15px; display: flex; align-items: center; }
 
-/* --- Sidebar Login Panel --- */
 .login-panel {
     background-color: #e5e7eb;
     padding: 15px;
@@ -213,7 +211,6 @@ CUSTOM_CSS = """
     font-weight: bold !important;
 }
 
-/* User Guide */
 .main-user-guide { border: none !important; background: transparent !important; box-shadow: none !important; }
 .main-user-guide > .label-wrap { border: none !important; background: transparent !important; padding: 10px 0 !important; }
 .main-user-guide > .label-wrap span { font-size: 1.3rem !important; font-weight: 800 !important; color: #111827 !important; }
@@ -223,24 +220,16 @@ CUSTOM_CSS = """
 .clean-accordion > .label-wrap span { font-size: 0.9rem !important; font-weight: 500 !important; color: #374151 !important; }
 .clean-accordion > .label-wrap:hover { background-color: #f9fafb !important; }
 
-/* Action Buttons */
 .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; }
 
-/* Tooltips & 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; }
 .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; }
 
-/* Results Box Style */
 .result-box { border: 1px solid #e5e7eb; background: #ffffff; padding: 10px; border-radius: 8px; height: 100%; }
 .result-box .prose { font-size: 0.9rem; }
-
-@keyframes fadeIn { to { opacity: 1; } }
 """
 
-# ========== Preload Module 10 PDF ==========
+# ========== Preload Module 10 ==========
 MODULE10_PATH = "module10_responsible_ai.pdf"
 MODULE10_DOC_TYPE = "Literature Review / Paper"
 
@@ -267,10 +256,6 @@ LS_DATASET_NAME = "clare_user_events"
 
 
 def log_event(data: Dict):
-    """
-    写入 LangSmith dataset：clare_user_events
-    每个事件是一条 example（inputs / outputs / metadata）
-    """
     try:
         inputs = {
             "event_type": data.get("event_type"),
@@ -296,7 +281,7 @@ def log_event(data: Dict):
         print("LangSmith log failed:", e)
 
 
-# ===== Reference Formatting Helper =====
+# ===== Reference helper =====
 def format_references(
     rag_chunks: List[Dict], max_files: int = 2, max_sections_per_file: int = 3
 ) -> str:
@@ -382,17 +367,14 @@ with gr.Blocks(
     title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
 ) as demo:
 
-    # 全局状态
     course_outline_state = gr.State(preloaded_topics or DEFAULT_COURSE_TOPICS)
     weakness_state = gr.State([])
     cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
     rag_chunks_state = gr.State(preloaded_chunks or [])
 
-    # 最近一次回答（用于 thumbs / 详细反馈）
     last_question_state = gr.State("")
     last_answer_state = gr.State("")
 
-    # 用户登录状态
     user_name_state = gr.State("")
     user_id_state = gr.State("")
 
@@ -447,7 +429,6 @@ with gr.Blocks(
                 interactive=False,
             )
 
-            # User Guide
             with gr.Accordion(
                 "User Guide", open=True, elem_classes="main-user-guide"
             ):
@@ -509,18 +490,12 @@ with gr.Blocks(
                     gr.Markdown(USER_GUIDE_SECTIONS["faq"])
 
             gr.Markdown("---")
-            gr.Button(
-                "System Settings",
-                size="sm",
-                variant="secondary",
-                interactive=False,
-            )
+            gr.Button("System Settings", size="sm", variant="secondary", interactive=False)
 
             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>
+                    © 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>
                 """
             )
@@ -543,11 +518,10 @@ with gr.Blocks(
                 height=450,
                 avatar_images=(None, CLARE_LOGO_PATH),
                 show_label=False,
-                bubble_full_width=False,  # 只是 warning，不影响
+                bubble_full_width=False,
                 type="tuples",
             )
 
-            # === Feedback on last answer ===
             gr.Markdown("#### Rate Clare’s last answer")
             with gr.Row():
                 thumb_up_btn = gr.Button(
@@ -565,9 +539,7 @@ with gr.Blocks(
             )
             feedback_text = gr.Textbox(
                 label="What worked well or what was wrong?",
-                placeholder=(
-                    "Optional: describe what you liked / what was confusing or incorrect."
-                ),
+                placeholder="Optional: describe what you liked / what was confusing or incorrect.",
                 lines=3,
                 visible=False,
             )
@@ -579,28 +551,22 @@ with gr.Blocks(
                 interactive=False,
             )
 
-            # 用户输入
             user_input = gr.Textbox(
                 label="Your Input",
-                placeholder=(
-                    "Please log in on the right before asking Clare anything..."
-                ),
+                placeholder="Please log in on the right before asking Clare anything...",
                 show_label=False,
                 container=True,
                 autofocus=False,
                 interactive=False,
             )
 
-            # Upload / File type / Memory Line
             with gr.Row():
                 with gr.Column(scale=2):
                     syllabus_file = gr.File(
                         file_types=[".docx", ".pdf", ".pptx"],
                         file_count="single",
                         height=160,
-                        label=(
-                            "Upload additional Module 10 file (.docx/.pdf/.pptx) — optional"
-                        ),
+                        label="Upload additional Module 10 file (.docx/.pdf/.pptx) — optional",
                         interactive=False,
                     )
                 with gr.Column(scale=1):
@@ -673,22 +639,13 @@ with gr.Blocks(
 
             gr.Markdown("### Actions")
             export_btn = gr.Button(
-                "Export Conversation",
-                size="sm",
-                elem_classes="action-btn",
-                interactive=False,
+                "Export Conversation", size="sm", elem_classes="action-btn", interactive=False
             )
             quiz_btn = gr.Button(
-                "Let's Try (Micro-Quiz)",
-                size="sm",
-                elem_classes="action-btn",
-                interactive=False,
+                "Let's Try (Micro-Quiz)", size="sm", elem_classes="action-btn", interactive=False
             )
             summary_btn = gr.Button(
-                "Summarization",
-                size="sm",
-                elem_classes="action-btn",
-                interactive=False,
+                "Summarization", size="sm", elem_classes="action-btn", interactive=False
             )
 
             gr.Markdown("### Results")
@@ -699,7 +656,6 @@ with gr.Blocks(
                 )
 
     # ================== Login Flow ==================
-
     def show_inputs():
         return {
             login_state_1: gr.update(visible=False),
@@ -718,10 +674,7 @@ with gr.Blocks(
                 login_state_2: gr.update(),
                 login_state_3: gr.update(),
                 student_info_html: gr.update(
-                    value=(
-                        "<p style='color:red; font-size:12px;'>Please enter both "
-                        "Name and Email/ID to start.</p>"
-                    )
+                    value="<p style='color:red; font-size:12px;'>Please enter both Name and Email/ID to start.</p>"
                 ),
                 user_name_state: gr.update(),
                 user_id_state: gr.update(),
@@ -759,9 +712,7 @@ with gr.Blocks(
             user_id_state: id_val,
             user_input: gr.update(
                 interactive=True,
-                placeholder=(
-                    "Ask about Module 10 concepts, Responsible AI, or let Clare test you..."
-                ),
+                placeholder="Ask about Module 10 concepts, Responsible AI, or let Clare test you...",
             ),
             clear_btn: gr.update(interactive=True),
             export_btn: gr.update(interactive=True),
@@ -774,8 +725,12 @@ with gr.Blocks(
             learning_mode: gr.update(interactive=True),
             model_name: gr.update(interactive=False),
             docs_btn: gr.update(interactive=True),
-            thumb_up_btn: gr.update(interactive=True),
-            thumb_down_btn: gr.update(interactive=True),
+            thumb_up_btn: gr.update(
+                interactive=True, value="👍 Helpful", variant="secondary"
+            ),
+            thumb_down_btn: gr.update(
+                interactive=True, value="👎 Not helpful", variant="secondary"
+            ),
             feedback_toggle_btn: gr.update(interactive=True),
             feedback_text: gr.update(visible=False, value=""),
             feedback_submit_btn: gr.update(interactive=True, visible=False),
@@ -824,9 +779,7 @@ with gr.Blocks(
             user_input: gr.update(
                 value="",
                 interactive=False,
-                placeholder=(
-                    "Please log in on the right before asking Clare anything..."
-                ),
+                placeholder="Please log in on the right before asking Clare anything...",
             ),
             clear_btn: gr.update(interactive=False),
             export_btn: gr.update(interactive=False),
@@ -876,11 +829,7 @@ with gr.Blocks(
     )
 
     # ================== Main Logic ==================
-
     def update_course_and_rag(file, doc_type_val):
-        """
-        上传的文件会在 Module10 预加载的基础上「追加」，而不是替换。
-        """
         local_topics = preloaded_topics or []
         local_chunks = preloaded_chunks or []
 
@@ -917,7 +866,7 @@ with gr.Blocks(
 
     def show_loaded_docs(doc_type_val):
         gr.Info(
-            "For this experiment, Clare always includes the pre-loaded Module 10 reading.\n"
+            f"For this experiment, Clare always includes the pre-loaded Module 10 reading.\n"
             f"Additional uploaded {doc_type_val} files will be used as supplementary context.",
             title="Loaded Documents",
         )
@@ -937,7 +886,14 @@ with gr.Blocks(
         doc_type_val,
         user_id_val,
     ):
-        # 没登录就提示
+        # 没登录
+        default_up = gr.update(
+            value="👍 Helpful", variant="secondary", interactive=False
+        )
+        default_down = gr.update(
+            value="👎 Not helpful", variant="secondary", interactive=False
+        )
+
         if not user_id_val:
             out_msg = (
                 "🔒 Please log in with your Student Name and Email/ID on the right "
@@ -949,7 +905,17 @@ with gr.Blocks(
                 weaknesses or [],
                 cognitive_state or {"confusion": 0, "mastery": 0},
             )
-            return "", new_history, weaknesses, cognitive_state, new_status, "", ""
+            return (
+                "",
+                new_history,
+                weaknesses,
+                cognitive_state,
+                new_status,
+                "",
+                "",
+                default_up,
+                default_down,
+            )
 
         resolved_lang = detect_language(message or "", lang_pref)
 
@@ -959,12 +925,28 @@ with gr.Blocks(
                 weaknesses or [],
                 cognitive_state or {"confusion": 0, "mastery": 0},
             )
-            return "", chat_history, weaknesses, cognitive_state, new_status, "", ""
+            # 已登录时，允许评分，所以按钮可点
+            logged_up = gr.update(
+                value="👍 Helpful", variant="secondary", interactive=True
+            )
+            logged_down = gr.update(
+                value="👎 Not helpful", variant="secondary", interactive=True
+            )
+            return (
+                "",
+                chat_history,
+                weaknesses,
+                cognitive_state,
+                new_status,
+                "",
+                "",
+                logged_up,
+                logged_down,
+            )
 
         weaknesses = update_weaknesses_from_message(message, weaknesses or [])
         cognitive_state = update_cognitive_state_from_message(message, cognitive_state)
 
-        # RAG：只对学术问题启用
         if is_academic_query(message):
             rag_context_text, rag_used_chunks = retrieve_relevant_chunks(
                 message, rag_chunks or []
@@ -988,7 +970,6 @@ with gr.Blocks(
         end_ts = time.time()
         latency_ms = (end_ts - start_ts) * 1000.0
 
-        # 只在学术型问题上附 References
         if is_academic_query(message) and rag_used_chunks:
             ref_text = format_references(rag_used_chunks)
         else:
@@ -1001,7 +982,6 @@ with gr.Blocks(
                 new_history[-1] = [last_user, last_assistant]
                 answer = last_assistant
 
-        # LangSmith 日志
         student_id = user_id_val or "ANON"
         experiment_id = "RESP_AI_W10"
         try:
@@ -1024,8 +1004,25 @@ with gr.Blocks(
 
         new_status = render_session_status(mode_val, weaknesses, cognitive_state)
 
-        # 将当前这一轮的 Q/A 存入 state，供 thumbs / 文字反馈使用
-        return "", new_history, weaknesses, cognitive_state, new_status, message, answer
+        # 新一轮回答出来 -> 重置按钮为默认可点状态
+        logged_up = gr.update(
+            value="👍 Helpful", variant="secondary", interactive=True
+        )
+        logged_down = gr.update(
+            value="👎 Not helpful", variant="secondary", interactive=True
+        )
+
+        return (
+            "",
+            new_history,
+            weaknesses,
+            cognitive_state,
+            new_status,
+            message,
+            answer,
+            logged_up,
+            logged_down,
+        )
 
     user_input.submit(
         respond,
@@ -1050,10 +1047,12 @@ with gr.Blocks(
             session_status,
             last_question_state,
             last_answer_state,
+            thumb_up_btn,
+            thumb_down_btn,
         ],
     )
 
-    # ===== Micro-Quiz: 直接在主 Chatbot 里进行 =====
+    # ===== Micro-Quiz =====
     def start_micro_quiz(
         chat_history,
         course_outline,
@@ -1091,7 +1090,8 @@ with gr.Blocks(
             "• Do NOT start a content question until I have answered 1 or 2.\n\n"
             "Step 2 – After I choose the style:\n"
             "• If I choose 1 (multiple-choice):\n"
-            "  - Ask ONE multiple-choice question at a time, based on Module 10 concepts.\n"
+            "  - Ask ONE multiple-choice question at a time, based on Module 10 concepts "
+            "(Responsible AI definition, risk types, mitigation layers, EU AI Act, etc.).\n"
             "  - Provide 3–4 options (A, B, C, D) and make only one option clearly correct.\n"
             "• If I choose 2 (short-answer):\n"
             "  - Ask ONE short-answer question at a time, also based on Module 10 concepts.\n"
@@ -1184,7 +1184,11 @@ with gr.Blocks(
     def send_thumb_up(last_q, last_a, user_id_val, mode_val, model_name_val, lang_pref):
         if not last_q and not last_a:
             print("No last QA to log for thumbs_up.")
-            return
+            # 仍然返回按钮状态，防止 Gradio 报错
+            return (
+                gr.update(value="👍 Helpful", variant="secondary"),
+                gr.update(value="👎 Not helpful", variant="secondary"),
+            )
         try:
             log_event(
                 {
@@ -1203,12 +1207,23 @@ with gr.Blocks(
         except Exception as e:
             print("thumb_up log error:", e)
 
+        # 实时视觉反馈：左边按钮高亮 + 标记 sent，右边保持可点普通状态
+        return (
+            gr.update(
+                value="👍 Helpful (sent)", variant="primary", interactive=True
+            ),
+            gr.update(value="👎 Not helpful", variant="secondary", interactive=True),
+        )
+
     def send_thumb_down(
         last_q, last_a, user_id_val, mode_val, model_name_val, lang_pref
     ):
         if not last_q and not last_a:
             print("No last QA to log for thumbs_down.")
-            return
+            return (
+                gr.update(value="👍 Helpful", variant="secondary"),
+                gr.update(value="👎 Not helpful", variant="secondary"),
+            )
         try:
             log_event(
                 {
@@ -1227,6 +1242,15 @@ with gr.Blocks(
         except Exception as e:
             print("thumb_down log error:", e)
 
+        return (
+            gr.update(value="👍 Helpful", variant="secondary", interactive=True),
+            gr.update(
+                value="👎 Not helpful (sent)",
+                variant="primary",
+                interactive=True,
+            ),
+        )
+
     thumb_up_btn.click(
         send_thumb_up,
         [
@@ -1237,7 +1261,7 @@ with gr.Blocks(
             model_name,
             language_preference,
         ],
-        [],
+        [thumb_up_btn, thumb_down_btn],
     )
 
     thumb_down_btn.click(
@@ -1250,7 +1274,7 @@ with gr.Blocks(
             model_name,
             language_preference,
         ],
-        [],
+        [thumb_up_btn, thumb_down_btn],
     )
 
     def submit_detailed_feedback(
@@ -1303,13 +1327,7 @@ with gr.Blocks(
     # ===== Export / Summary =====
     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,
-        ],
+        [chatbot, course_outline_state, learning_mode, weakness_state, cognitive_state_state],
         [result_display],
     )
 
@@ -1332,7 +1350,18 @@ with gr.Blocks(
     def clear_all():
         empty_state = {"confusion": 0, "mastery": 0}
         default_status = render_session_status("Concept Explainer", [], empty_state)
-        return [], [], empty_state, [], "", default_status, "", ""
+        return (
+            [],
+            [],
+            empty_state,
+            [],
+            "",
+            default_status,
+            "",
+            "",
+            gr.update(value="👍 Helpful", variant="secondary", interactive=False),
+            gr.update(value="👎 Not helpful", variant="secondary", interactive=False),
+        )
 
     clear_btn.click(
         clear_all,
@@ -1346,13 +1375,15 @@ with gr.Blocks(
             session_status,
             last_question_state,
             last_answer_state,
+            thumb_up_btn,
+            thumb_down_btn,
         ],
         queue=False,
     )
 
 if __name__ == "__main__":
     demo.launch(
-        share=True,          # HF Space 环境需要 share=True 才能访问
+        share=True,
         server_name="0.0.0.0",
         server_port=7860,
     )