Update app with gallery layout and add example images

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

app.py

@@ -7,19 +7,21 @@ from datetime import datetime
 
 # ================= 配置区域 (Configuration) =================
 
-# 图片所在的文件夹
+# 路径配置
 IMAGE_DIR = "./user_study_pairs"
-
-# 结果保存文件
 RESULT_FILE = "user_study_results.csv"
 
-# 每个任务抽取的样本数量 (修改为 5)
+# 示例路径
+EXAMPLE_POS_DIR = "./example_pos"
+EXAMPLE_NEG_DIR = "./example_neg"
+
+# 每个任务抽取的样本数量
 SAMPLES_PER_TASK = 5
 
-# 任务列表 (文件名必须以这些开头)
+# 任务列表
 TASKS = ['haze', 'shadow', 'reflections', 'lens_flares']
 
-# 任务名称映射 (Task Names)
+# 任务名称映射
 TASK_NAMES = {
     'haze':        {'cn': '雾霾',       'en': 'Fog/Haze'},
     'shadow':      {'cn': '阴影',       'en': 'Shadows'},
@@ -30,10 +32,7 @@ TASK_NAMES = {
 # ================= 核心逻辑 (Core Logic) =================
 
 def get_random_batch():
-    """
-    从文件夹中按任务分层随机抽取样本。
-    Sample images stratified by task.
-    """
+    """从文件夹中按任务分层随机抽取样本"""
     if not os.path.exists(IMAGE_DIR):
         return []
 
@@ -41,30 +40,21 @@ def get_random_batch():
     selected_batch = []
     
     for task in TASKS:
-        # 筛选出属于当前 task 的图片
         task_files = [f for f in all_files if f.startswith(task)]
-        
-        # 随机抽取 N 张
         if len(task_files) >= SAMPLES_PER_TASK:
             chosen = random.sample(task_files, SAMPLES_PER_TASK)
         else:
             chosen = task_files
-            
         for f in chosen:
-            full_path = os.path.join(IMAGE_DIR, f)
-            selected_batch.append((full_path, f, task))
+            selected_batch.append((os.path.join(IMAGE_DIR, f), f, task))
             
     random.shuffle(selected_batch)
     return selected_batch
 
 def save_result(user_id, results):
-    """
-    保存结果到 CSV
-    Save results to CSV.
-    """
+    """保存结果到 CSV"""
     data = []
     timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    
     for img_name, task, is_success in results:
         data.append({
             "User_ID": user_id,
@@ -73,46 +63,35 @@ def save_result(user_id, results):
             "Task": task,
             "Is_Success": is_success
         })
-    
     df = pd.DataFrame(data)
-    
     if not os.path.exists(RESULT_FILE):
         df.to_csv(RESULT_FILE, index=False, encoding='utf_8_sig')
     else:
         df.to_csv(RESULT_FILE, mode='a', header=False, index=False, encoding='utf_8_sig')
 
 def generate_label_html(task_key):
-    """
-    根据任务生成图片上方的标签（两栏或三栏）
-    Generate the label above the image based on the task (2-column or 3-column).
-    """
+    """生成图片标签 (Dark Mode 兼容)"""
     if task_key == 'shadow':
-        # Shadow 任务使用三栏布局 (3-column layout for Shadow)
         return """
         <div class='big-label-container'>
-            <div style='flex:1;'>Input (输入原图)</div>
-            <div style='flex:1; border-left: 1px solid #ccc; border-right: 1px solid #ccc;'>Masked Shadow (阴影蒙版)</div>
-            <div style='flex:1;'>Output (修复结果)</div>
+            <div style='flex:1;'>Input<br><span class='sub-label'>(输入原图)</span></div>
+            <div style='flex:1; border-left: 1px solid #ccc; border-right: 1px solid #ccc;'>Masked Shadow<br><span class='sub-label'>(阴影蒙版)</span></div>
+            <div style='flex:1;'>Output<br><span class='sub-label'>(修复结果)</span></div>
         </div>
         """
     else:
-        # 其他任务使用两栏布局 (2-column layout for others)
         return """
         <div class='big-label-container'>
-            <div style='flex:1;'>Input (输入原图)</div>
-            <div style='flex:1; border-left: 1px solid #ccc;'>Output (修复结果)</div>
+            <div style='flex:1;'>Input<br><span class='sub-label'>(输入原图)</span></div>
+            <div style='flex:1; border-left: 1px solid #ccc;'>Output<br><span class='sub-label'>(修复结果)</span></div>
         </div>
         """
 
 def generate_question_text(task_key):
-    """
-    生成严格中英双语的问题描述
-    Generate strictly bilingual question descriptions.
-    """
+    """生成问题描述"""
     name_cn = TASK_NAMES.get(task_key, {}).get('cn', '干扰效应')
     name_en = TASK_NAMES.get(task_key, {}).get('en', 'Artifacts')
     
-    # 针对 Shadow 任务的专用 Prompt
     if task_key == 'shadow':
         q1_cn = "1. <b>蒙版红色区域 (Masked Red Region)</b> 内的阴影是否去除干净？"
         q1_en = "1. Is the shadow within the <b>Masked Red Region</b> removed cleanly?"
@@ -120,118 +99,190 @@ def generate_question_text(task_key):
         q1_cn = f"1. 画面中的 <b>“{name_cn}”</b> 是否去除干净？"
         q1_en = f"1. Is the <b>“{name_en}”</b> removed cleanly?"
 
-    text = f"""
+    return f"""
     <div class='question-box'>
         <h3>请仔细评估 / Please Evaluate:</h3>
-        <p>{q1_cn}<br>
-           <span class='en-text'>{q1_en}</span></p>
-        <hr style='margin: 10px 0; opacity: 0.3;'>
+        <p>{q1_cn}<br><span class='en-text'>{q1_en}</span></p>
+        <hr style='margin: 10px 0; opacity: 0.3; border-top: 1px solid #ccc;'>
         <p>2. 原本的背景内容是否 <b>保持完整</b> 且未被篡改？<br>
            <span class='en-text'>2. Is the original background <b>preserved</b> without distortion?</span></p>
     </div>
     """
-    return text
+
+# ================= 样式定义 (CSS) =================
+# 将 CSS 独立出来，使用 gr.HTML 注入，避免版本兼容性警告
+CUSTOM_CSS = """
+<style>
+    footer {visibility: hidden}
+    
+    /* 强制在 Light/Dark 模式下，这些背景框里的文字都是深色 */
+    .big-label-container {
+        display: flex;
+        text-align: center;
+        font-weight: bold;
+        font-size: 1.1em;
+        color: #333 !important; 
+        background-color: #e8f4f8;
+        padding: 8px 0;
+        border-radius: 8px;
+        margin-bottom: 5px;
+        width: 100%;
+        align-items: center;
+    }
+    .question-box {
+        background-color: #f9f9f9; 
+        padding: 15px; 
+        border-radius: 10px; 
+        border: 1px solid #ddd; 
+        margin-top: 10px;
+        color: #333 !important;
+    }
+    .question-box h3 {
+        color: #2c3e50 !important;
+        margin-top: 0;
+    }
+    .en-text {
+        color: #666 !important; 
+        font-style: italic;
+        font-size: 0.95em;
+    }
+    .sub-label {
+        font-size: 0.8em;
+        font-weight: normal;
+        color: #555 !important;
+    }
+    /* Loading 样式 */
+    .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 300px;
+        font-size: 1.5em;
+        color: #666;
+        flex-direction: column;
+    }
+</style>
+"""
 
 # ================= 界面构建 (UI Layout) =================
 
 with gr.Blocks(title="Visual Perception Study") as demo:
-    
-    # CSS 样式：使用 Flexbox 确保标签与图片列对齐
-    gr.HTML("""
-    <style>
-        footer {visibility: hidden}
-        .big-label-container {
-            display: flex;
-            text-align: center;
-            font-weight: bold;
-            font-size: 1.1em;
-            color: #2c3e50;
-            background-color: #e8f4f8;
-            padding: 8px 0;
-            border-radius: 8px;
-            margin-bottom: 5px;
-            width: 100%;
-        }
-        .question-box {
-            background-color: #f9f9f9; 
-            padding: 15px; 
-            border-radius: 10px; 
-            border: 1px solid #ddd; 
-            margin-top: 10px;
-        }
-        .en-text {
-            color: #666; 
-            font-style: italic;
-            font-size: 0.95em;
-        }
-    </style>
-    """)
-    
+    # 注入样式
+    gr.HTML(CUSTOM_CSS)
+
     # --- 状态变量 ---
     state_batch = gr.State([])
     state_index = gr.State(0)
     state_results = gr.State([])
     state_user_id = gr.State("")
 
-    # --- 页面 1: 欢迎页 ---
+    # ================= 页面 1: 欢迎与示例 =================
     with gr.Group(visible=True) as welcome_page:
         gr.Markdown("# 📋 图像修复主观质量评估 / Perceptual Image Restoration Study")
         
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=2):
                 gr.Markdown("""
                 ### 👋 欢迎 / Welcome
                 本研究旨在评估图像修复算法在真实场景下的表现。
-                This study evaluates the performance of image restoration algorithms in real-world scenarios.
+                This study evaluates image restoration algorithms in real-world scenarios.
                 
                 ### 🎯 评估标准 / Criteria for Success
                 请判断修复结果是否 **同时满足** 以下两个条件：
                 Please judge whether the restoration meets **BOTH** criteria:
                 
-                * **1. 去除彻底 (Removal Effectiveness)**
-                   中文: 干扰视觉的效应（如雾、影、反光）已基本消失。
-                   English: The visual artifacts (haze, shadow, reflections) are effectively removed.
-                
-                * **2. 保真度 (Content Fidelity)**
-                   中文: 原图的背景物体、结构、颜色未被扭曲或篡改。
-                   English: The original background structures, colors, and details are preserved without distortion.
+                1. **去除彻底 (Clean Removal)**: 干扰（雾霾/烟雾/阴影/反光/镜头炫光）已消失。
+                2. **保真度 (Content Fidelity)**: 背景物体、结构、颜色未被篡改。
                 """)
                 
+                start_btn = gr.Button("🚀 开始测试 / Start Survey", variant="primary", size="lg")
+                
                 gr.Markdown(f"""
-                ---
                 * **题目数量 / Questions**: {len(TASKS) * SAMPLES_PER_TASK}
-                * **匿名性 / Anonymity**: 结果仅用于学术统计 (Results are for academic use only).
+                * **匿名性 / Anonymity**: 结果仅用于学术统计。
                 """)
         
-        start_btn = gr.Button("开始测试 / Start Survey", variant="primary", size="lg")
-
-    # --- 页面 2: 测试页 ---
-    with gr.Group(visible=False) as quiz_page:
+        gr.Markdown("---")
+        gr.Markdown("### 📚 示例参考 / Examples")
+        
+        # --- Positive Examples ---
+        gr.Markdown("#### ✅ 成功示例 / Success Cases (Clean & Preserved)")
+        
+        # 预先构建数据列表 [(路径, 标题), ...]
+        pos_gallery_data = []
+        pos_files = ["pos_haze.png", "pos_shadow.png", "pos_ref.png", "pos_flare.png"]
+        pos_captions = ["Haze Removal", "Shadow Removal", "Reflection Removal", "Flare Removal"]
+        
+        for p_file, p_cap in zip(pos_files, pos_captions):
+            p_path = os.path.join(EXAMPLE_POS_DIR, p_file)
+            if os.path.exists(p_path):
+                pos_gallery_data.append((p_path, p_cap))
         
-        # 顶部进度
+        # 使用 Gallery 组件：columns=4 强制一行四列对齐
+        if pos_gallery_data:
+            gr.Gallery(
+                value=pos_gallery_data,
+                show_label=False,
+                columns=4,    # 强制 4 列对齐
+                rows=1,
+                height="auto",
+                object_fit="contain"
+            )
+
+        # --- Negative Examples ---
+        gr.Markdown("#### ❌ 失败示例 / Failure Cases")
+        with gr.Row():
+            # Neg 1: Identity Changed
+            neg_path_1 = os.path.join(EXAMPLE_NEG_DIR, "neg_identity_changed.png")
+            if os.path.exists(neg_path_1):
+                with gr.Column():
+                    gr.Image(neg_path_1, interactive=False, show_label=False)
+                    gr.Markdown("**❌ 失败原因：背景结构改变**<br>*(Failure: Structure/Identity Changed)*", elem_classes="question-box")
+
+            # Neg 2: Not Removed
+            neg_path_2 = os.path.join(EXAMPLE_NEG_DIR, "neg_not_fully_removed.png")
+            if os.path.exists(neg_path_2):
+                with gr.Column():
+                    gr.Image(neg_path_2, interactive=False, show_label=False)
+                    gr.Markdown("**❌ 失败原因：干扰未去干净**<br>*(Failure: Artifacts Not Fully Removed)*", elem_classes="question-box")
+
+    # ================= 页面 2: 测试页 (包含 Loading) =================
+    
+    # 2.1 真实的答题区域 (Group)
+    with gr.Group(visible=False) as quiz_main_ui:
         progress_md = gr.Markdown("### ⏳ Progress: 1 / 20")
         
-        # 图片显示区域
         with gr.Column():
-            # 动态标签占位符 (Dynamic Label Placeholder)
+            # 动态标签
             label_html = gr.HTML(value="")
             
-            image_display = gr.Image(
+            # 图片组件：保留 show_fullscreen_button 以支持放大
+            image_display = gr.Gallery(
                 label="", 
-                interactive=False, 
                 show_label=False,
-                container=True
+                columns=1, 
+                rows=1,
+                height="auto",
+                object_fit="contain",
+                elem_id="main_task_gallery" # 方便 CSS 控制
             )
         
-        # 问题区域
-        question_html = gr.HTML(value="Loading...")
+        question_html = gr.HTML(value="")
         
-        # 按钮区域
         with gr.Row():
-            btn_fail = gr.Button("❌ 失败 / Failure\n(没去干净 或 改了背景 / Incomplete or Distorted)", size="lg", variant="stop")
-            btn_pass = gr.Button("✅ 成功 / Success\n(去除干净 且 背景一致 / Clean & Preserved)", size="lg", variant="primary")
+            btn_fail = gr.Button("❌ 失败 / Failure\n(Incomplete / Distorted)", size="lg", variant="stop")
+            btn_pass = gr.Button("✅ 成功 / Success\n(Clean & Preserved)", size="lg", variant="primary")
 
-    # --- 页面 3: 结束页 ---
+    # 2.2 Loading 等待区域 (Group)
+    with gr.Group(visible=False) as loading_ui:
+        gr.HTML("""
+        <div class='loading-container'>
+            <p>🔄 Loading next image...</p>
+            <p>正在加载下一张...</p>
+        </div>
+        """)
+
+    # ================= 页面 3: 结束页 =================
     with gr.Group(visible=False) as end_page:
         gr.Markdown("""
         # 🎉 感谢您的参与！ / Thank You!
@@ -240,136 +291,147 @@ with gr.Blocks(title="Visual Perception Study") as demo:
         Your evaluation data has been submitted. You may close this page now.
         """)
         
-        # ================= 新增：管理员下载区域 =================
+        # 管理员面板
         gr.Markdown("---")
-        # 默认折叠，不占地方，也不引人注目
         with gr.Accordion("🔧 管理员��板 / Admin Panel", open=False):
             with gr.Row():
-                # 密码输入框 (type='password' 会把输入显示为圆点)
-                admin_pass = gr.Textbox(label="管理员密码 / Password", placeholder="Enter password to download", type="password")
-                # 验证按钮
-                check_btn = gr.Button("验证并获取数据 / Verify & Fetch Data")
-            
-            # 下载组件 (初始状态设为不可见 visible=False，输对密码才显示)
-            file_download = gr.File(label="下载结果 / Download Results", interactive=False, visible=False)
-            
-            # 状态提示
+                admin_pass = gr.Textbox(label="Password", type="password")
+                check_btn = gr.Button("Download Data")
+            file_download = gr.File(label="Result CSV", interactive=False, visible=False)
             msg_box = gr.Markdown("")
 
         def verify_and_download(password):
-            # 🔔 请在这里修改你的密码，比如把 "123456" 改成别的
             MY_SECRET_PASSWORD = "010929" 
-            
             if password == MY_SECRET_PASSWORD:
                 if os.path.exists(RESULT_FILE):
-                    # 密码正确且文件存在：显示文件下载组件，并给出成功提示
-                    return {
-                        file_download: gr.update(value=RESULT_FILE, visible=True),
-                        msg_box: "✅ 验证成功！请下载文件。/ Success!"
-                    }
-                else:
-                    return {
-                        file_download: gr.update(visible=False),
-                        msg_box: "⚠️ 暂无数据文件 (还没有人提交过结果)。"
-                    }
-            else:
-                # 密码错误：隐藏文件，给出警告
-                return {
-                    file_download: gr.update(visible=False),
-                    msg_box: "❌ 密码错误 / Wrong Password"
-                }
-
-        # 绑定点击事件
-        check_btn.click(
-            verify_and_download, 
-            inputs=[admin_pass], 
-            outputs=[file_download, msg_box]
-        )
-        # =======================================================
-        
-    # ================= 交互逻辑 =================
+                    return {file_download: gr.update(value=RESULT_FILE, visible=True), msg_box: "✅ Success!"}
+                return {file_download: gr.update(visible=False), msg_box: "⚠️ No data yet."}
+            return {file_download: gr.update(visible=False), msg_box: "❌ Wrong Password"}
+
+        check_btn.click(verify_and_download, inputs=[admin_pass], outputs=[file_download, msg_box])
+
+    # ================= 交互逻辑 (Event Handlers) =================
 
     def start_survey():
         batch = get_random_batch()
         if not batch:
             return {
                 welcome_page: gr.update(visible=True),
-                gr.State(""): "Error: No images found"
+                gr.State(""): "Error"
             }
-            
-        u_id = str(int(time.time()))
         
+        u_id = str(int(time.time()))
         first_path, _, first_task = batch[0]
-        q_text = generate_question_text(first_task)
-        l_html = generate_label_html(first_task)
         
         return {
             welcome_page: gr.update(visible=False),
-            quiz_page: gr.update(visible=True),
+            quiz_main_ui: gr.update(visible=True),
+            loading_ui: gr.update(visible=False),
             end_page: gr.update(visible=False),
             state_batch: batch,
             state_index: 0,
             state_results: [],
             state_user_id: u_id,
-            image_display: first_path,
+            image_display: [first_path],  # <--- 注意这里加了中括号！
             progress_md: f"### ⏳ Progress: 1 / {len(batch)}",
-            question_html: q_text,
-            label_html: l_html
+            question_html: generate_question_text(first_task),
+            label_html: generate_label_html(first_task)
+        }
+
+    # --- 关键逻辑：分两步走以解决卡顿 ---
+    
+    # 步骤 1: 立即切换到 Loading 界面 (前端快速响应)
+    def switch_to_loading():
+        return {
+            quiz_main_ui: gr.update(visible=False), # 立即隐藏按钮，防止连点
+            loading_ui: gr.update(visible=True)     # 显示 Loading
         }
 
-    def process_answer(is_success, index, batch, results, u_id):
-        # 记录答案
+    # 步骤 2: 后台处理数据，准备好后切换回答题界面
+    def process_and_next(is_success, index, batch, results, u_id):
+        # 安全检查
+        if not batch or index >= len(batch):
+             return {
+                quiz_main_ui: gr.update(visible=False),
+                loading_ui: gr.update(visible=False),
+                end_page: gr.update(visible=True),
+                state_index: index, 
+                state_results: results,
+                image_display: gr.update(),
+                progress_md: gr.update(),
+                question_html: gr.update(),
+                label_html: gr.update()
+            }
+
+        # 记录数据
         _, current_name, current_task = batch[index]
         results.append((current_name, current_task, is_success))
         
         next_index = index + 1
         
         if next_index >= len(batch):
-            # 完成
+            # 完成所有题目
             save_result(u_id, results)
             return {
-                quiz_page: gr.update(visible=False),
-                end_page: gr.update(visible=True)
+                quiz_main_ui: gr.update(visible=False),
+                loading_ui: gr.update(visible=False),
+                end_page: gr.update(visible=True),
+                state_index: next_index,
+                state_results: results,
+                image_display: gr.update(),
+                progress_md: gr.update(),
+                question_html: gr.update(),
+                label_html: gr.update()
             }
         else:
-            # 下一题
+            # 加载下一题
             next_path, _, next_task = batch[next_index]
-            q_text = generate_question_text(next_task)
-            l_html = generate_label_html(next_task)
             
             return {
+                quiz_main_ui: gr.update(visible=True),
+                loading_ui: gr.update(visible=False),
+                end_page: gr.update(visible=False),
                 state_index: next_index,
                 state_results: results,
-                image_display: next_path,
+                image_display: [next_path], # <--- [修改处 4] 注意这里加了中括号！
                 progress_md: f"### ⏳ Progress: {next_index + 1} / {len(batch)}",
-                question_html: q_text,
-                label_html: l_html
+                question_html: generate_question_text(next_task),
+                label_html: generate_label_html(next_task)
             }
 
-    # 绑定事件
+    # --- 绑定事件 ---
+    
     start_btn.click(
         start_survey, 
         inputs=[], 
-        outputs=[welcome_page, quiz_page, end_page, state_batch, state_index, state_results, state_user_id, image_display, progress_md, question_html, label_html]
+        outputs=[welcome_page, quiz_main_ui, loading_ui, end_page, state_batch, state_index, state_results, state_user_id, image_display, progress_md, question_html, label_html]
     )
 
-    # 2. 点击成功 (Pass)
-    # trigger_mode="once": 关键参数！
-    # 含义：如果当前正在处理上一次点击，则忽略所有新的点击。
-    # 效果：防止用户手抖双击、防止快速连点“盲测”。
+    # 链式调用：先变Loading，再算结果
+    # queue=False 保证第一步立即执行，不排队
+    
+    # 点击 Pass
     btn_pass.click(
-        process_answer, 
-        inputs=[gr.Number(1, visible=False), state_index, state_batch, state_results, state_user_id], 
-        outputs=[quiz_page, end_page, state_index, state_results, image_display, progress_md, question_html, label_html],
-        trigger_mode="once"  # <--- 在这里加上这一句
+        switch_to_loading,
+        inputs=[],
+        outputs=[quiz_main_ui, loading_ui],
+        queue=False
+    ).then(
+        process_and_next,
+        inputs=[gr.Number(1, visible=False), state_index, state_batch, state_results, state_user_id],
+        outputs=[quiz_main_ui, loading_ui, end_page, state_index, state_results, image_display, progress_md, question_html, label_html]
     )
 
-    # 3. 点击失败 (Fail)
+    # 点击 Fail
     btn_fail.click(
-        process_answer, 
-        inputs=[gr.Number(0, visible=False), state_index, state_batch, state_results, state_user_id], 
-        outputs=[quiz_page, end_page, state_index, state_results, image_display, progress_md, question_html, label_html],
-        trigger_mode="once"  # <--- 在这里加上这一句
+        switch_to_loading,
+        inputs=[],
+        outputs=[quiz_main_ui, loading_ui],
+        queue=False
+    ).then(
+        process_and_next,
+        inputs=[gr.Number(0, visible=False), state_index, state_batch, state_results, state_user_id],
+        outputs=[quiz_main_ui, loading_ui, end_page, state_index, state_results, image_display, progress_md, question_html, label_html]
     )
 
 if __name__ == "__main__":