Update app.py

app.py

@@ -1,6 +1,7 @@
-# app.py
-from typing import List, Dict, Tuple, Optional
 import gradio as gr
+import os
+import base64
+from typing import List, Dict, Tuple, Optional
 
 from config import (
     DEFAULT_MODEL,
@@ -26,10 +27,26 @@ 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"  # 已取消注释
+CLARE_RUN_PATH = "Clare_Run.png"
+
+# ================== 【核心修改】Base64 图片转换函数 ==================
+def image_to_base64(image_path):
+    """将本地图片转换为 Base64 字符串，直接嵌入 HTML，避免路径错误"""
+    if not os.path.exists(image_path):
+        return "" # 如果文件不存在，返回空
+    with open(image_path, "rb") as img_file:
+        encoded_string = base64.b64encode(img_file.read()).decode('utf-8')
+    # 根据文件扩展名决定 MIME type
+    if image_path.lower().endswith(".png"):
+        mime = "image/png"
+    elif image_path.lower().endswith(".jpg") or image_path.lower().endswith(".jpeg"):
+        mime = "image/jpeg"
+    else:
+        mime = "image/png"
+    return f"data:{mime};base64,{encoded_string}"
 
 # ================== CSS (样式调整) ==================
 CUSTOM_CSS = """
@@ -43,6 +60,7 @@ CUSTOM_CSS = """
     border-bottom: 2px solid #f3f4f6;
     margin-bottom: 15px;
 }
+
 /* User Guide 链接样式 */
 #user-guide-links button {
     background: transparent !important; border: none !important; box-shadow: none !important;
@@ -50,13 +68,14 @@ CUSTOM_CSS = """
     color: #004a99 !important; text-decoration: underline; font-size: 0.8rem;
 }
 #user-guide-links button:hover { color: #002b66 !important; }
+
 /* Memory Line 区域样式 */
 .memory-line-box {
     border: 1px solid #e5e7eb;
     padding: 12px;
     border-radius: 8px;
     background-color: #f9fafb;
-    height: 100%; /* 填满高度 */
+    height: 100%; 
 }
 """
 
@@ -87,13 +106,12 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     cognitive_state_state = gr.State({"confusion": 0, "mastery": 0})
     rag_chunks_state = gr.State([]) 
 
-    # ============ 1. 顶部 Header (全宽布局) ============
-    # 包含 CLARE_LOGO_PATH (左) 和 HANBRIDGE_LOGO_PATH (右)
+    # ============ 1. 顶部 Header (使用 Base64 嵌入图片) ============
     gr.HTML(
         f"""
         <div class="header-container">
             <div style="display:flex; align-items:center; gap: 20px;">
-                <img src="file=clare_mascot.png" style="height: 75px; object-fit: contain;">
+                <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;">
                         Clare
@@ -104,8 +122,9 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                     </div>
                 </div>
             </div>
+
             <div style="text-align: right;">
-                <img src="file/{HANBRIDGE_LOGO_PATH}" style="height: 55px; object-fit: contain; margin-bottom: 5px;">
+                <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 55px; object-fit: contain; margin-bottom: 5px;">
                 <div style="font-size: 12px; color: #666;">
                     🎓 (Student Name) (Student Email/ID)
                 </div>
@@ -114,12 +133,11 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         """
     )
 
-    # ============ 2. 主体分栏布局：左(1) - 中(3) - 右(1) ============
+    # ============ 2. 主体分栏布局 ============
     with gr.Row():
         
         # ============ [左侧] 控制面板 Sidebar ============
         with gr.Column(scale=1, min_width=200):
-            # Reset 按钮
             clear_btn = gr.Button("Reset Conversation", variant="stop")
             
             gr.Markdown("### Model Settings")
@@ -151,7 +169,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # ============ [中间] 主内容区 Center Main ============
         with gr.Column(scale=3):
             
-            # 上半部分：上传区(左) + Memory Line(右) 并排
+            # 上半部分：上传区 + Memory Line
             with gr.Row():
                 # --- Upload File ---
                 with gr.Column(scale=1):
@@ -168,9 +186,8 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                         container=False 
                     )
                 
-                # --- Memory Line (包含 CLARE_RUN_PATH) ---
+                # --- Memory Line (使用 Base64 嵌入奔跑图片) ---
                 with gr.Column(scale=1):
-                    # 使用 HTML 渲染带图片的进度条
                     gr.HTML(
                         f"""
                         <div class="memory-line-box">
@@ -181,8 +198,9 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                             <div style="position: relative; height: 35px; margin-top: 15px; 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="file/{CLARE_RUN_PATH}" style="position: absolute; left: 36%; bottom: 8px; height: 35px; z-index: 10;">
+                                <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="font-size: 12px; color: #666;">Next Review: T+7</div>
                                 <div style="font-size: 12px; color: #004a99; text-decoration:underline; cursor:pointer;">
@@ -192,10 +210,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                         </div>
                         """
                     )
-                    # 真实的 Review 按钮放在 HTML 下方
                     review_btn = gr.Button("Review Now", size="sm", variant="primary")
-                    
-                    # 隐藏的 Session Status 用于逻辑传递
                     session_status = gr.Markdown(visible=False)
 
             # --- Chat Interface ---
@@ -211,7 +226,10 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
             chatbot = gr.Chatbot(
                 label="",
                 height=450,
-                avatar_images=(None, CLARE_LOGO_PATH), # 聊天框内的头像
+                # 聊天框内的头像也可以使用 Base64，但 Gradio 的 avatar_images 
+                # 通常直接接受路径即可（因为它内部会处理）。
+                # 如果这里头像也不显示，请告诉我，我再改这里。目前保持路径。
+                avatar_images=(None, CLARE_LOGO_PATH), 
                 show_label=False,
                 bubble_full_width=False
             )
@@ -227,7 +245,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # ============ [右侧] 功能栏 Right Sidebar ============
         with gr.Column(scale=1, min_width=180):
             gr.Markdown("### Actions")
-            
             export_btn = gr.Button("Export Conversation", size="sm")
             quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm")
             summary_btn = gr.Button("Summarization", size="sm")
@@ -240,9 +257,8 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 show_label=False
             )
 
-    # ================== Logic Bindings ==================
+    # ================== Logic Bindings (逻辑部分保持不变) ==================
 
-    # 1. File Upload 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)
@@ -255,7 +271,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         outputs=[course_outline_state, rag_chunks_state, session_status],
     )
 
-    # 2. Chat Logic
     def respond(message, chat_history, course_outline, weaknesses, cognitive_state, rag_chunks, model, lang, mode, doc_type_val):
         resolved_lang = detect_language(message or "", lang)
         
@@ -288,7 +303,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         [user_input, chatbot, weakness_state, cognitive_state_state, session_status]
     )
 
-    # 3. Action Buttons Logic
     def on_export(chat_history, course_outline, mode, weaknesses, cognitive_state):
         return export_conversation(chat_history, course_outline, mode, weaknesses, cognitive_state)
 
@@ -316,7 +330,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         [result_display]
     )
 
-    # 4. Reset Logic
     def clear_all():
         empty_state = {"confusion": 0, "mastery": 0}
         default_status = render_session_status("Concept Explainer", [], empty_state)
@@ -329,7 +342,6 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         queue=False
     )
     
-    # 5. User Guide Logic
     def show_guide(section):
         return get_user_guide_section(section)
 
@@ -339,4 +351,5 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     ug_memory_line.click(lambda: show_guide("memory_line"), outputs=result_display)
 
 if __name__ == "__main__":
+    # 移除 allowed_paths，因为 Base64 不需要它
     demo.launch()