Update app.py

app.py

@@ -46,7 +46,7 @@ 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": """
 Welcome to **Clare — Your Personalized AI Tutor**.
@@ -197,33 +197,41 @@ CUSTOM_CSS = """
 .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.2rem !important; /* 加大 */
+    font-size: 1.3rem !important; /* 加大 */
     font-weight: 800 !important; /* 加粗 */
     color: #111827 !important; /* 深黑色 */
 }
 
-/* 2. 内部子菜单 (小标题) */
+/* 2. 内部子菜单 (小标题 - 列表风格) */
 .clean-accordion {
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
     margin-bottom: 0px !important;
     padding: 0 !important;
+    border-radius: 0 !important;
 }
 .clean-accordion > .label-wrap {
-    padding: 6px 0 !important;
-    border-bottom: 1px solid #f3f4f6 !important;
+    padding: 8px 5px !important;
+    border: none !important;
+    background: transparent !important;
+    border-bottom: 1px solid #e5e7eb !important; /* 细分隔线 */
 }
 .clean-accordion > .label-wrap span {
     font-size: 0.9rem !important; /* 比主标题小 */
     font-weight: 500 !important; /* 中等粗细 */
-    color: #4b5563 !important; /* 深灰色 */
+    color: #374151 !important; /* 深灰色 */
 }
-.clean-accordion > .label-wrap:hover span {
-    color: #000 !important;
-    text-decoration: underline;
+.clean-accordion > .label-wrap:hover {
+    background-color: #f9fafb !important;
 }
 
 /* Action 按钮加粗 & Tooltip */
@@ -297,10 +305,8 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 info="See User Guide for mode definitions details." 
             )
 
-            # User Guide (主标题加粗加大，子标题变小)
-            # 给最外层加上 elem_classes="main-user-guide"
+            # 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"])
@@ -328,22 +334,28 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # === [Center Main] ===
         with gr.Column(scale=3):
             
-            # Upload & Memory Line Row
+            # --- Upload & Memory Line Row (New Layout) ---
             with gr.Row():
-                # Upload Column
-                with gr.Column(scale=1):
-                    syllabus_file = gr.File(
-                        file_types=[".docx", ".pdf", ".pptx"], 
-                        file_count="single", 
-                        height=160, 
-                        label="Upload file (.docx/.pdf/.pptx)"
-                    )
+                
+                # [Left Group]: Upload Box + Controls (Dropdown/Button)
+                with gr.Column(scale=2): # Give this side more space (approx 66%)
                     with gr.Row():
-                        doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="File type", container=False, scale=3)
-                        docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary", scale=2, min_width=80)
+                        # Upload File Box (Larger)
+                        with gr.Column(scale=3):
+                            syllabus_file = gr.File(
+                                file_types=[".docx", ".pdf", ".pptx"], 
+                                file_count="single", 
+                                height=150, 
+                                label="Upload file (.docx/.pdf/.pptx)"
+                            )
+                        # Controls (Dropdown + Button) stacked vertically next to file box
+                        with gr.Column(scale=1): 
+                            doc_type = gr.Dropdown(choices=DOC_TYPES, value="Syllabus", label="", container=False)
+                            # 使用 Markdown 模拟一点间距或者直接放按钮
+                            docs_btn = gr.Button("📂 Loaded Docs", size="sm", variant="secondary")
                 
-                # Memory Line Column
-                with gr.Column(scale=1):
+                # [Right Group]: Memory Line (Right Aligned)
+                with gr.Column(scale=1): # Less space (approx 33%)
                     with gr.Group(elem_classes="memory-line-box"):
                         gr.HTML(
                             f"""
@@ -379,8 +391,8 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
         # === [Right Sidebar] ===
         with gr.Column(scale=1, min_width=180):
             
-            # Spacer
-            gr.HTML("<div style='height: 210px; width: 100%;'></div>")
+            # Spacer (Push Actions down to align with Chatbot)
+            gr.HTML("<div style='height: 200px; width: 100%;'></div>")
             
             gr.Markdown("### Actions")