Update app.py

app.py

@@ -31,6 +31,7 @@ from syllabus_utils import extract_course_topics_from_file
 HANBRIDGE_LOGO_PATH = "hanbridge_logo.png"
 CLARE_LOGO_PATH = "clare_mascot.png" 
 CLARE_RUN_PATH = "Clare_Run.png"
+CLARE_READING_PATH = "clare_reading.png" # 请确保上传了这张图片
 
 # ================== Base64 Helper ==================
 def image_to_base64(image_path):
@@ -187,13 +188,32 @@ 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; }
 
-/* Log Out Link Style */
-.link-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: #000 !important; text-decoration: underline; font-weight: bold !important; font-size: 12px !important; padding: 0 5px !important; min-width: auto !important; }
-.link-btn:hover { color: #cc0000 !important; }
-
-/* Login Button in Header */
-.header-login-btn { font-size: 13px !important; padding: 4px 12px !important; background-color: #f3f4f6 !important; color: #333 !important; border: 1px solid #ddd !important; border-radius: 15px !important; }
-.header-login-btn:hover { background-color: #e5e7eb !important; border-color: #ccc !important; }
+/* --- Sidebar Login Panel --- */
+.login-panel {
+    background-color: #e5e7eb; /* 浅灰色背景 */
+    padding: 15px;
+    border-radius: 8px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.login-panel img {
+    display: block;
+    margin: 0 auto 10px auto;
+    height: 80px; /* 调整图片高度 */
+    object-fit: contain;
+}
+.login-main-btn {
+    background-color: #ffffff !important;
+    color: #000 !important;
+    border: 1px solid #000 !important;
+    font-weight: bold !important;
+}
+.logout-btn {
+    background-color: #6b2828 !important; /* 深红色背景 */
+    color: #fff !important;
+    border: none !important;
+    font-weight: bold !important;
+}
 
 /* User Guide */
 .main-user-guide { border: none !important; background: transparent !important; box-shadow: none !important; }
@@ -236,7 +256,7 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     user_name_state = gr.State("")
     user_id_state = gr.State("")
 
-    # --- Header (Always Visible) ---
+    # --- Header ---
     with gr.Row(elem_classes="header-container"):
         # Left: Logo & Title
         with gr.Column(scale=2):
@@ -257,37 +277,15 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
                 """
             )
         
-        # Right: Hanbridge Logo & Dynamic Login Area
+        # Right: Hanbridge Logo (Static)
         with gr.Column(scale=1):
-            # Top: Logo
             gr.HTML(
                 f"""
-                <div style="display:flex; justify-content:flex-end; margin-bottom: 8px;">
+                <div style="display:flex; justify-content:flex-end; margin-bottom: 5px;">
                     <img src="{image_to_base64(HANBRIDGE_LOGO_PATH)}" style="height: 55px; object-fit: contain;">
                 </div>
                 """
             )
-            # Bottom: Login UI Logic
-            with gr.Row():
-                with gr.Column(scale=1): pass # Spacer to push content right
-                
-                with gr.Column(scale=0, min_width=300):
-                    
-                    # 1. Default State: Login Button (Visible initially)
-                    login_start_btn = gr.Button("👤 Student Login", size="sm", elem_classes="header-login-btn")
-                    
-                    # 2. Input State: Inputs + Confirm (Hidden initially)
-                    with gr.Group(visible=False) as login_form_group:
-                        with gr.Row(elem_classes="no-gap"):
-                            name_input = gr.Textbox(placeholder="Name", show_label=False, container=False, scale=2, min_width=80)
-                            id_input = gr.Textbox(placeholder="ID", show_label=False, container=False, scale=2, min_width=80)
-                            login_confirm_btn = gr.Button("✅", size="sm", scale=1, min_width=40)
-
-                    # 3. Logged In State: Info + Logout (Hidden initially)
-                    with gr.Group(visible=False) as logged_in_group:
-                        with gr.Row(elem_classes="no-gap"):
-                            student_info_disp = gr.Markdown(value="", elem_id="student-info")
-                            logout_btn = gr.Button("Log Out", elem_classes="link-btn")
 
     # --- Main Layout ---
     with gr.Row():
@@ -385,39 +383,70 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
 
         # === Right Sidebar ===
         with gr.Column(scale=1, min_width=180):
-            gr.HTML("<div style='height: 210px; width: 100%;'></div>") # Spacer
             
+            # --- New Login Panel (占用原来的 Spacer 空间) ---
+            with gr.Group(elem_classes="login-panel"):
+                # 图片始终显示
+                gr.HTML(f"<img src='{image_to_base64(CLARE_READING_PATH)}'>")
+                
+                # 状态 1: 未登录 (显示 Login 按钮)
+                with gr.Group(visible=True) as login_state_1:
+                    login_start_btn = gr.Button("Student Login", elem_classes="login-main-btn")
+                
+                # 状态 2: 输入信息
+                with gr.Group(visible=False) as login_state_2:
+                    name_input = gr.Textbox(label="Student Name", placeholder="Name", container=True)
+                    id_input = gr.Textbox(label="Email/ID", placeholder="ID", container=True)
+                    login_confirm_btn = gr.Button("Enter", variant="primary", size="sm")
+                
+                # 状态 3: 已登录 (显示信息 + Logout)
+                with gr.Group(visible=False) as login_state_3:
+                    # 使用 HTML 显示居中的加粗名字
+                    student_info_html = gr.HTML() 
+                    logout_btn = gr.Button("Log out", elem_classes="logout-btn", size="sm")
+
+            # Actions
             gr.Markdown("### Actions")
             export_btn = gr.Button("Export Conversation", size="sm", elem_classes="action-btn")
             quiz_btn = gr.Button("Let's Try (Micro-Quiz)", size="sm", elem_classes="action-btn")
             summary_btn = gr.Button("Summarization", size="sm", elem_classes="action-btn")
             
+            # Results
             gr.Markdown("### Results")
             with gr.Group(elem_classes="result-box"):
                 result_display = gr.Markdown(value="Results will appear here...", label="Generated Content")
 
-    # ================== Logic: Login Flow ==================
+    # ================== Logic: Sidebar Login Flow ==================
 
-    # 1. 点击 "Student Login" -> 显示输入框
-    def show_login_form():
+    # 1. Start Login -> Show Inputs
+    def show_inputs():
         return {
-            login_start_btn: gr.update(visible=False),
-            login_form_group: gr.update(visible=True)
+            login_state_1: gr.update(visible=False),
+            login_state_2: gr.update(visible=True),
+            login_state_3: gr.update(visible=False)
         }
     
-    login_start_btn.click(show_login_form, outputs=[login_start_btn, login_form_group])
+    login_start_btn.click(show_inputs, outputs=[login_state_1, login_state_2, login_state_3])
 
-    # 2. 点击 "✅" -> 确认登录 -> 显示信息
+    # 2. Confirm Login -> Show Profile
     def confirm_login(name, id_val):
         if not name or not id_val:
-            # 简单校验，如果为空就不跳转 (实际可加提示)
-            return gr.update(), gr.update(), gr.update(), gr.update()
+            # 简单验证，若为空则不跳转
+            return gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+        
+        # 构建居中的 HTML 信息
+        info_html = f"""
+        <div style="margin-bottom:10px;">
+            <div style="font-weight:bold; font-size:16px;">{name}</div>
+            <div style="color:#666; font-size:12px;">{id_val}</div>
+        </div>
+        """
         
-        display_text = f"🎓 **{name}** ({id_val})"
         return {
-            login_form_group: gr.update(visible=False),
-            logged_in_group: gr.update(visible=True),
-            student_info_disp: gr.update(value=display_text),
+            login_state_1: gr.update(visible=False),
+            login_state_2: gr.update(visible=False),
+            login_state_3: gr.update(visible=True),
+            student_info_html: gr.update(value=info_html),
             user_name_state: name,
             user_id_state: id_val
         }
@@ -425,20 +454,22 @@ with gr.Blocks(title="Clare – Hanbridge AI Teaching Assistant", css=CUSTOM_CSS
     login_confirm_btn.click(
         confirm_login, 
         inputs=[name_input, id_input], 
-        outputs=[login_form_group, logged_in_group, student_info_disp, user_name_state, user_id_state]
+        outputs=[login_state_1, login_state_2, login_state_3, student_info_html, user_name_state, user_id_state]
     )
 
-    # 3. 点击 "Log Out" -> 重置回最初状态
+    # 3. Logout -> Reset
     def logout():
         return {
-            logged_in_group: gr.update(visible=False),
-            login_start_btn: gr.update(visible=True),
+            login_state_1: gr.update(visible=True),
+            login_state_2: gr.update(visible=False),
+            login_state_3: gr.update(visible=False),
             name_input: gr.update(value=""),
             id_input: gr.update(value=""),
-            student_info_disp: gr.update(value="")
+            user_name_state: "",
+            user_id_state: ""
         }
 
-    logout_btn.click(logout, outputs=[logged_in_group, login_start_btn, name_input, id_input, student_info_disp])
+    logout_btn.click(logout, outputs=[login_state_1, login_state_2, login_state_3, name_input, id_input, user_name_state, user_id_state])
 
     # ================== Main App Logic ==================