Update app.py

app.py

@@ -11,6 +11,8 @@ import sqlite3
 import math
 import time
 from huggingface_hub import hf_hub_download
+import psutil
+import gc
 
 # 翻译表
 SUBJECT_TRANS = {
@@ -30,8 +32,8 @@ MODEL_TRANS = {
     "still-3-1.5b-preview": "STILL-3-1.5B-Preview",
     "deepseek-r1-distill-qwen-32b": "DeepSeek-R1-Distill-Qwen-32B",
     "light-r1-7b-ds": "Light-R1-7B-DS",
-    #"openmath-nemotron-32b": "OpenMath-Nemotron-32B",
-    #"qwen3-235b-a22b": "Qwen3-235B-A22B",
+    "openmath-nemotron-32b": "OpenMath-Nemotron-32B",
+    "qwen3-235b-a22b": "Qwen3-235B-A22B",
     "skywork-or1-32b-preview": "Skywork-OR1-32B-Preview",
     "deepscaler-1.5b-preview": "DeepScaler-1.5B-Preview",
     "deepseek-r1-distill-qwen-7b": "DeepSeek-R1-Distill-Qwen-7B",
@@ -44,6 +46,11 @@ MODEL_TRANS = {
     "skywork-or1-math-7b": "Skywork-OR1-Math-7B",
     "skywork-or1-7b-preview": "Skywork-OR1-7B-Preview",
     "qwen3-30b-a3b": "Qwen3-30B-A3B",
+    "deepseek-r1": "DeepSeek-R1",
+    "glm-z1-air": "GLM-Z1-Air",
+    "gemini-2.5-pro-exp-03-25": "Gemini 2.5 Pro Exp 0325",
+    "o3-mini-high": "OpenAI o3-mini (high)",
+    "qwen3-0.6b": "Qwen3-0.6B"
     # 添加更多模型映射
 }
 
@@ -72,7 +79,6 @@ class ModelDatabase:
         self.conn.execute("PRAGMA temp_store = MEMORY")  # 临时表存储在内存中
         self.conn.execute("PRAGMA mmap_size = 8589934592")  # 尝试使用8GB内存映射
         self.conn.row_factory = sqlite3.Row
-        print("Database connection established with optimized parameters")
         
         # 创建索引以加速查询
         self._ensure_indices()
@@ -96,7 +102,7 @@ class ModelDatabase:
             cursor.execute("CREATE INDEX IF NOT EXISTS idx_problems_unique_id ON problems(unique_id)")
             cursor.execute("ANALYZE")  # 分析表以优化查询计划
         except Exception as e:
-            print(f"Error creating indices: {e}")
+            pass
     
     def get_available_models(self):
         """Get list of all available models"""
@@ -110,8 +116,7 @@ class ModelDatabase:
             models = [row['model_name'] for row in cursor.fetchall()]
             self._models_cache = models  # 存储到实例缓存
             return models
-        except sqlite3.OperationalError as e:
-            print(f"Error in get_available_models: {e}")
+        except sqlite3.OperationalError:
             return []
     
     def get_available_datasets(self):
@@ -126,8 +131,7 @@ class ModelDatabase:
             datasets = [row['dataset'].upper() for row in cursor.fetchall()]
             self._datasets_cache = datasets  # 存储到实例缓存
             return datasets
-        except sqlite3.OperationalError as e:
-            print(f"Error in get_available_datasets: {e}")
+        except sqlite3.OperationalError:
             return DATASETS
     
     def get_model_statistics(self, model_name, dataset):
@@ -173,8 +177,7 @@ class ModelDatabase:
             
             self._cache[cache_key] = stats_data
             return stats_data
-        except sqlite3.OperationalError as e:
-            print(f"Database error in get_model_statistics: {e}")
+        except sqlite3.OperationalError:
             return [["Database Error", "No data available"]]
     
     def get_all_model_accuracies(self, dataset):
@@ -194,8 +197,7 @@ class ModelDatabase:
             results = [(row['model_name'], row['accuracy']) for row in cursor.fetchall()]
             self._cache[cache_key] = results
             return results
-        except sqlite3.OperationalError as e:
-            print(f"Error in get_all_model_accuracies: {e}")
+        except sqlite3.OperationalError:
             return []
 
     def get_problems_by_model_dataset(self, model_name, dataset):
@@ -222,8 +224,7 @@ class ModelDatabase:
             sorted_results = sorted(results, key=lambda x: int(re.search(r'\d+', x[0]).group(0)) if re.search(r'\d+', x[0]) else 0)
             self._cache[cache_key] = sorted_results
             return sorted_results
-        except sqlite3.OperationalError as e:
-            print(f"Database error in get_problems_by_model_dataset: {e}")
+        except sqlite3.OperationalError:
             return []
 
     def get_problem_data(self, model_name, dataset, problem_id):
@@ -248,8 +249,7 @@ class ModelDatabase:
                     # 转为字典存储，避免SQLite连接依赖
                     self._problem_cache[problem_cache_key] = dict(problem)
                     problem = self._problem_cache[problem_cache_key]
-            except Exception as e:
-                print(f"Error fetching problem data: {e}")
+            except Exception:
                 return None, None
         
         if not problem:
@@ -279,8 +279,7 @@ class ModelDatabase:
                     responses = [dict(r) for r in responses]
                     self._response_cache[resp_cache_key] = responses
                 return problem, responses
-            except Exception as e:
-                print(f"Error fetching responses: {e}")
+            except Exception:
                 return problem, None
         else:
             # 获��所有模型对此问题的响应
@@ -305,8 +304,7 @@ class ModelDatabase:
                     responses = [dict(r) for r in responses]
                     self._response_cache[resp_cache_key] = responses
                 return problem, responses
-            except Exception as e:
-                print(f"Error fetching all responses: {e}")
+            except Exception:
                 return problem, None
 
     def get_model_responses(self, selected_models, dataset, problem_id):
@@ -341,36 +339,46 @@ class ModelDatabase:
         """清除指定部分或全部缓存"""
         if section == 'main' or section is None:
             self._cache = {}
-            print("Cleared main cache")
         if section == 'problem' or section is None:
             self._problem_cache = {}
-            print("Cleared problem cache")
         if section == 'response' or section is None:
             self._response_cache = {}
-            print("Cleared response cache")
         if section == 'models' or section is None:
             if hasattr(self, '_models_cache'):
                 self._models_cache = None
             if hasattr(self, '_datasets_cache'):
                 self._datasets_cache = None
-            print("Cleared metadata cache")
     
     def close(self):
         """关闭数据库连接并释放资源"""
         if hasattr(self, 'conn') and self.conn:
             try:
                 self.conn.close()
-                print("Database connection closed")
-            except Exception as e:
-                print(f"Error closing database: {e}")
+            except Exception:
+                pass
         
         # 清理所有缓存
         self.clear_cache()
 
 def format_latex(text):
     if text is None: return ""
-    text = text.replace('\\', '\\\\') # Escape backslashes for JS/HTML
+    # Process the text for proper LaTeX rendering with KaTeX
+    # KaTeX requires LaTeX backslashes to be preserved
+    # Only replace newlines with HTML breaks
     text = text.replace('\n', '<br>')
+    # Wrap in a span that KaTeX can detect and render
+    return f'<span class="math-inline">{text}</span>'
+
+def format_markdown_with_math(text):
+    if text is None: return ""
+    
+    # Don't add HTML tags or do special processing for LaTeX - let Gradio handle it
+    # Just clean up basic issues that might affect rendering
+    
+    # Convert newlines for markdown
+    text = text.replace('\r\n', '\n').replace('\r', '\n')
+    
+    # Return the cleaned text for Gradio's markdown component to render
     return text
 
 def get_gradient_color(accuracy, color_map='RdYlGn'):
@@ -378,7 +386,7 @@ def get_gradient_color(accuracy, color_map='RdYlGn'):
         return "#505050" # Default for missing or invalid accuracy
     try:
         # 使用更深的颜色映射
-        cmap = plt.cm.get_cmap(color_map)
+        cmap = plt.colormaps.get_cmap(color_map)
         rgba = cmap(float(accuracy))
         
         # 确保颜色足够深以与白色文本形成对比
@@ -391,8 +399,7 @@ def get_gradient_color(accuracy, color_map='RdYlGn'):
         # 转回十六进制
         hex_color = mpl.colors.rgb2hex((r, g, b, a))
         return hex_color
-    except Exception as e:
-        print(f"Error getting gradient color: {e}")
+    except Exception:
         return "#505050"
 
 def get_contrasting_text_color(bg_color):
@@ -425,135 +432,172 @@ def get_contrasting_text_color(bg_color):
     # 其他颜色根据亮度决定
     return "#000" if yiq > 160 else "#fff"
 
-def format_sample(sample, show_correctness=True):
+def format_sample_metadata(sample, show_correctness=True):
+    """生成样本元数据的HTML格式显示"""
     if sample is None: return ""
     sample_dict = dict(sample) if hasattr(sample, 'keys') else sample if isinstance(sample, dict) else {}
-    if not sample_dict: return "<div>No sample data</div>"
+    if not sample_dict: return "No sample data"
 
-    formatted_response = format_latex(sample_dict.get('response', ''))
+    # 提取所需信息
     extracted = sample_dict.get('extracted', '')
-    formatted_extracted = format_latex(extracted) if extracted else ""
     correctness = sample_dict.get('correctness', 0)
     correctness_label = "✓ Correct" if correctness else "✗ Incorrect"
     correctness_color = "var(--color-green)" if correctness else "var(--color-red)"
-    html = f"<div style='font-size: 0.85em; padding: 10px; border-radius: 8px;' class='dark-mode-compatible dark-mode-bg-secondary'>"
     
-    # 将correctness和extracted放在同一行
+    # 获取token信息
+    output_tokens = sample_dict.get('output_tokens', None)
+    reasoning_tokens = sample_dict.get('reasoning_tokens', None)
+    
+    # 创建元数据HTML
+    html = f"<div style='font-size: 0.85em; padding: 10px; border-radius: 8px; margin-bottom: 5px;' class='dark-mode-compatible dark-mode-bg-secondary'>"
+    
+    # 创建信息行
     if show_correctness:
-        html += f"<div style='display: flex; align-items: center; margin-bottom: 5px;'>"
+        html += f"<div style='display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px;'>"
+        # 正确性指示器
         html += f"<span style='color: {correctness_color}; font-weight: bold; margin-right: 10px;'>{correctness_label}</span>"
-        if formatted_extracted:
-            html += f"<span style='background-color: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 3px;'><b>Extracted:</b> {formatted_extracted}</span>"
+        
+        # 提取的答案
+        if extracted:
+            html += f"<span style='background-color: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 3px; margin-right: 10px;'><b>Extracted:</b> ${extracted}$</span>"
+        
+        # 输出token数
+        if output_tokens is not None:
+            html += f"<span style='background-color: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 3px; margin-right: 10px;'><b>Output Tokens:</b> {output_tokens}</span>"
+        
+        # 推理token数 - 仅在可用时
+        if reasoning_tokens is not None:
+            html += f"<span style='background-color: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 3px;'><b>Reasoning Tokens:</b> {reasoning_tokens}</span>"
+        
         html += f"</div>"
     
-    html += f"<div style='white-space: pre-wrap;' class='math-content'>{formatted_response}</div>"
     html += "</div>"
     return html
 
-def create_comparison_chart(df, sort_by='avg_accuracy', ascending=False):
-    if df.empty: return None, "No data available for chart"
-    if sort_by not in df.columns and not df.index.name == sort_by:
-        # Try to find a valid sort column if avg_accuracy is not present (e.g. single model comparison)
-        potential_sort_cols = [col for col in df.columns if 'accuracy' in col]
-        if potential_sort_cols:
-            sort_by = potential_sort_cols[0] # Default to first accuracy column
-        else: # Fallback to index if no accuracy column
-            sort_by = df.index.name if df.index.name else 'unique_id'
-            if sort_by not in df.index.name and sort_by not in df.columns : # df.index.name might be None
-                 return None, f"Sort column '{sort_by}' not found in DataFrame."
+def format_sample_response(sample):
+    """生成样本响应的Markdown格式显示"""
+    if sample is None: return ""
+    sample_dict = dict(sample) if hasattr(sample, 'keys') else sample if isinstance(sample, dict) else {}
+    if not sample_dict: return "No sample data"
     
-    try:
-      if sort_by in df.columns:
-          df_sorted = df.sort_values(by=sort_by, ascending=ascending)
-      elif sort_by == df.index.name:
-          df_sorted = df.sort_index(ascending=ascending) # Sorting by index
-      else:
-          df_sorted = df # No sort if column not found and not index
-    except KeyError:
-        return None, f"Sort column '{sort_by}' not found."
-
-    df_sorted['problem_id_display'] = df_sorted.index.to_series().apply(lambda x: re.search(r'\d+', str(x)).group(0) if re.search(r'\d+', str(x)) else str(x))
-    accuracy_cols_to_plot = [col for col in df_sorted.columns if col.endswith('_accuracy')]
-    if not accuracy_cols_to_plot:
-        return None, "No accuracy columns to plot."
-
-    fig, ax = plt.subplots(figsize=(10, max(6, len(df_sorted) * 0.25)))
-    cmap = plt.cm.get_cmap('RdYlGn')
-    num_models = len(accuracy_cols_to_plot)
-    bar_height = 0.8 / num_models if num_models > 0 else 0.8
-    y_pos_base = np.arange(len(df_sorted))
-
-    for i, col_name in enumerate(accuracy_cols_to_plot):
-        model_label = col_name.replace('_accuracy', '')
-        accuracies = df_sorted[col_name].fillna(0) # Fill NaN for plotting
-        # Offset y_pos for grouped bars
-        y_pos = y_pos_base - (bar_height * num_models / 2) + (i * bar_height) + (bar_height / 2)
-
-        bars = ax.barh(y_pos, accuracies, height=bar_height, label=model_label, alpha=0.8)
-        for bar_idx, bar_val in enumerate(accuracies):
-            bar.set_color(cmap(bar_val)) # Color individual bars
-            if bar_val > 0:
-                 ax.text(max(0.01, bar_val + 0.01), y_pos[bar_idx], f'{bar_val:.0%}', va='center', ha='left', fontsize=8)
+    # 获取响应内容
+    response = sample_dict.get('response', '')
     
-    ax.set_yticks(y_pos_base)
-    ax.set_yticklabels(df_sorted['problem_id_display'])
-    ax.set_xlim(0, 1.1)
-    ax.set_xlabel('Accuracy')
-    ax.set_ylabel('Problem ID')
-    ax.legend(loc='lower right', fontsize='small')
-    ax.grid(True, axis='x', linestyle='--', alpha=0.6)
-    plt.tight_layout()
-    chart_path = "comparison_chart.png"
-    plt.savefig(chart_path, dpi=120, bbox_inches='tight')
-    plt.close(fig)
-    return chart_path, df_sorted.index.tolist()
+    # 转义特殊标签以防止被解析为HTML
+    # 替换<think>标签
+    response = response.replace("<think>", "&lt;think&gt;")
+    response = response.replace("</think>", "&lt;/think&gt;")
+    
+    # 替换其他可能的特殊标签
+    response = response.replace("<reasoning>", "&lt;reasoning&gt;")
+    response = response.replace("</reasoning>", "&lt;/reasoning&gt;")
+    response = response.replace("<answer>", "&lt;answer&gt;")
+    response = response.replace("</answer>", "&lt;/answer&gt;")
+    
+    return response
 
-def create_problem_grid_html(problems, mode='default'):
-    """Create HTML for problem grid buttons. The JS function will be defined globally."""
-    if not problems:
-        return "<div>No problems found for this model/dataset. Please select a model and dataset.</div>"
+def handle_sample_select(sample_number, samples_data):
+    # 确保从Gradio State对象中提取实际值
+    if hasattr(samples_data, 'value'):
+        samples_list = samples_data.value
+    else:
+        samples_list = samples_data
+    
+    # 确保样本编号是整数
+    try:
+        sample_idx = int(sample_number)
+    except ValueError:
+        return "Error: Sample number must be an integer.", ""
+    
+    # 确保样本数据存在且为非空列表
+    if not samples_list or not isinstance(samples_list, list) or len(samples_list) == 0:
+        return "No sample data available. Please select a problem first.", ""
+    
+    # 检查索引是否在有效范围内，如果不在范围内，显示错误消息
+    if sample_idx < 0:
+        err_msg = f"**Error:** Sample number {sample_idx} is out of range. Valid range is 0 to {len(samples_list) - 1}."
+        return err_msg, ""
+    
+    if sample_idx >= len(samples_list):
+        err_msg = f"**Error:** Sample number {sample_idx} is out of range. Valid range is 0 to {len(samples_list) - 1}."
+        return err_msg, ""
+    
+    # 获取所选样本的数据
+    try:
+        sample = samples_list[sample_idx]
+        formatted_metadata = format_sample_metadata(sample)
+        formatted_response = format_sample_response(sample)
+        return formatted_metadata, formatted_response
+    except Exception as e:
+        err_msg = f"**Error displaying sample {sample_idx}:** {str(e)}"
+        return err_msg, ""
 
-    html_buttons = ""
+def handle_first_sample(samples_data):
+    """处理并显示第一个样本（索引0）"""
+    # 确保从Gradio State对象中提取实际值
+    if hasattr(samples_data, 'value'):
+        samples_list = samples_data.value
+    else:
+        samples_list = samples_data
+    
+    # 检查样本数据是否存在
+    if not samples_list or not isinstance(samples_list, list) or len(samples_list) == 0:
+        return "No sample data available. Please select the problem and dataset first.", ""
+    
+    # 直接获取第一个样本，避免错误处理逻辑
     try:
-        sorted_problems = sorted(
-            [(str(p[0]), float(p[1]) if p[1] is not None else 0.0, p[2]) for p in problems],
-            key=lambda x: int(re.search(r'\d+', x[0]).group(0)) if re.search(r'\d+', x[0]) else 0
-        )
+        sample = samples_list[0]
+        formatted_metadata = format_sample_metadata(sample)
+        formatted_response = format_sample_response(sample)
+        return formatted_metadata, formatted_response
     except Exception as e:
-        print(f"Error sorting problems: {e}. Problems: {problems[:5]}")
-        return f"<div>Error displaying problems. Check logs. {e}</div>"
+        err_msg = f"**Error displaying first sample:** {str(e)}"
+        return err_msg, ""
 
-    for pid, accuracy, _ in sorted_problems:
-        match = re.search(r'\d+', pid)
-        num_display = match.group(0) if match else pid
-        acc_pct = int(accuracy * 100)
+def handle_comparison_problem_update(problem_id, dataset_state):
+    """处理比较页面的问题更新，仅更新问题和答案内容，不需要模型"""
+    global db
+    # 确保从Gradio State对象中提取实际值
+    dataset_name = dataset_state.value if hasattr(dataset_state, 'value') else dataset_state
+    problem_id_value = problem_id.value if hasattr(problem_id, 'value') else problem_id
+    
+    if not problem_id_value or not dataset_name:
+        return "Please select a dataset and enter a problem ID.", "No answer available."
         
-        # 获取背景颜色
-        bg_color = get_gradient_color(accuracy)
-        # 统一使用白色文本，添加!important确保不被覆盖
-        text_color = "#ffffff"
-
-        html_buttons += f"""
-        <div 
-            data-problem-id=\"{pid}\"
-            class=\"problem-btn\" 
-            title=\"ID: {pid} - Acc: {acc_pct}%\" 
-            style='background-color: {bg_color}; color: {text_color} !important;
-                   border-radius: 4px; padding: 5px; text-align: center; font-size: 0.7em;
-                   min-height: 36px; user-select: none; width: 100%;
-                   display: flex; flex-direction: column; justify-content: center;
-                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'>
-            <div style="font-weight: bold; color: {text_color} !important;">{num_display}</div>
-            <div style="color: {text_color} !important;">{acc_pct}%</div>
-        </div>
-        """
+    # 处理纯数字输入，构建完整unique_id
+    if problem_id_value and problem_id_value.isdigit():
+        # 构建格式：OlymMATH-HARD-0-EN 或类似格��
+        parts = dataset_name.split('-')
+        if len(parts) == 2:  # 确保格式正确 (例如 "EN-HARD")
+            language, difficulty = parts
+            # 构建完整ID
+            problem_id_value = f"OlymMATH-{difficulty}-{problem_id_value}-{language}"
     
-    # 添加自定义样式强制文本颜色为白色
-    custom_style = "<style>.problem-btn, .problem-btn div { color: white !important; }</style>"
-    # 根据模式设置每行显示的列数
-    grid_cols = 20 if mode == 'comparison' else 10
-    grid_html = f"{custom_style}<div style='display: grid; grid-template-columns: repeat({grid_cols}, 1fr); gap: 4px;'>{html_buttons}</div>"
-    return grid_html
+    try:
+        # 只获取问题数据，不获取特定模型的响应
+        problem_data, _ = db.get_problem_data(None, dataset_name, problem_id_value)
+        
+        if not problem_data:
+            return f"Problem not found: {problem_id_value}. Please check the ID and try again.", "No answer available."
+            
+        problem_dict = dict(problem_data)
+        # Use format_markdown_with_math for proper rendering
+        problem_content = format_markdown_with_math(problem_dict.get('problem', ''))
+        
+        # 将答案中的双美元符号替换为单美元符号
+        answer_text = problem_dict.get('answer', '')
+        # 先将$$...$$替换为单个$...$，使用re.DOTALL处理多行
+        answer_text = re.sub(r'\$\$(.*?)\$\$', r'$\1$', answer_text, flags=re.DOTALL)
+        
+        # 检查答案是否已经包含美元符号，如果没有则添加
+        if '$' not in answer_text and answer_text.strip():
+            answer_text = f"${answer_text}$"
+            
+        answer_content = format_markdown_with_math(answer_text)
+        
+        return problem_content, answer_content
+    except Exception as e:
+        return f"Error: {str(e)}", "No answer available."
 
 def handle_problem_select(problem_id_from_js, current_model_state, current_dataset_state, mode='default'):
     global db
@@ -562,9 +606,6 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
     dataset_name = current_dataset_state.value if hasattr(current_dataset_state, 'value') else current_dataset_state
     problem_id = problem_id_from_js.value if hasattr(problem_id_from_js, 'value') else problem_id_from_js
 
-    print(f"**************** PYTHON HANDLER CALLED ***************")
-    print(f"[Backend] handle_problem_select: problem_id='{problem_id}', length={len(str(problem_id)) if problem_id else 0}")
-    
     # 处理纯数字输入，构建完整unique_id
     if problem_id and problem_id.isdigit():
         # 构建格式：OlymMATH-HARD-0-EN 或类似格式
@@ -574,26 +615,9 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
             language, difficulty = parts
             # 构建完整ID
             problem_id = f"OlymMATH-{difficulty}-{problem_id}-{language}"
-            print(f"[Backend] Constructed full problem_id from number: '{problem_id}'")
-    
-    print(f"[Backend] Raw problem_id received (exact characters):")
-    if problem_id:
-        print(f"'{problem_id}'")
-        # Print character by character for debugging
-        print("Character by character:")
-        for i, c in enumerate(str(problem_id)):
-            print(f"  Position {i}: '{c}' (ord={ord(c)})")
-    
-    print(f"[Backend] model='{model_name}', dataset='{dataset_name}'")
-
-    # Debugging - dump more information about the objects
-    print(f"[Debug] problem_id_from_js type: {type(problem_id_from_js)}")
-    print(f"[Debug] current_model_state type: {type(current_model_state)}")
-    print(f"[Debug] current_dataset_state type: {type(current_dataset_state)}")
 
     if not problem_id or not dataset_name:
         error_message = f"Missing data: problem_id='{problem_id}', dataset='{dataset_name}'"
-        print(f"[Backend] {error_message}")
         return "Please fill in all the fields.", "No answer available.", "", gr.State([])
     
     # For comparison mode, we might not have a model selected yet
@@ -604,24 +628,32 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
             
             if not problem_data:
                 error_message = f"Problem data not found: problem_id='{problem_id}', dataset='{dataset_name}'"
-                print(f"[Backend] {error_message}")
                 return f"Problem not found: {problem_id}. Please check the ID and try again.", "No answer available.", "", gr.State([])
                 
             problem_dict = dict(problem_data)
-            problem_content = f"{format_latex(problem_dict.get('problem', ''))}"
-            answer_content = f"{format_latex(problem_dict.get('answer', ''))}"
+            # Process problem and answer text for Markdown rendering
+            problem_content = format_markdown_with_math(problem_dict.get('problem', ''))
+            
+            # 将答案中的双美元符号替换为单美元符号
+            answer_text = problem_dict.get('answer', '')
+            # 先将$$...$$替换为单个$...$，使用re.DOTALL处理多行
+            answer_text = re.sub(r'\$\$(.*?)\$\$', r'$\1$', answer_text, flags=re.DOTALL)
+            
+            # 检查答案是否已经包含美元符号，如果没有则添加
+            if '$' not in answer_text and answer_text.strip():
+                answer_text = f"${answer_text}$"
+                
+            answer_content = format_markdown_with_math(answer_text)
             
             # For comparison without model, we don't have samples to display
             return problem_content, answer_content, "", gr.State([])
         except Exception as e:
             error_message = f"Database error: {str(e)}"
-            print(f"[Backend] {error_message}")
             return f"Database error occurred. Please try again.", "No answer available.", "", gr.State([])
 
     # The regular flow for model-specific data
     if not model_name:
         error_message = f"Missing data: model='{model_name}'"
-        print(f"[Backend] {error_message}")
         return "Please fill in all the fields.", "No answer available.", "", gr.State([])
 
     # The problem_id from JS should be the full unique_id. No reconstruction needed normally.
@@ -630,19 +662,29 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
         
         if not problem_data:
             error_message = f"Problem data not found: problem_id='{problem_id}', model='{model_name}', dataset='{dataset_name}'"
-            print(f"[Backend] {error_message}")
             return f"Problem not found: {problem_id}. Please check the ID and try again.", "No answer available.", "", gr.State([])
     except Exception as e:
         error_message = f"Database error: {str(e)}"
-        print(f"[Backend] {error_message}")
         return f"Database error occurred. Please try again.", "No answer available.", "", gr.State([])
 
     problem_dict = dict(problem_data)
     problem_display_num = re.search(r'\d+', problem_id).group(0) if re.search(r'\d+', problem_id) else problem_id
     
-    problem_content = f"{format_latex(problem_dict.get('problem', ''))}"
-    answer_content = f"{format_latex(problem_dict.get('answer', ''))}"
+    # Process problem and answer text for Markdown rendering
+    problem_content = format_markdown_with_math(problem_dict.get('problem', ''))
+    
+    # 将答案中的双美元符号替换为单美元符号
+    answer_text = problem_dict.get('answer', '')
+    # 先将$$...$$替换为单个$...$，使用re.DOTALL处理多行
+    answer_text = re.sub(r'\$\$(.*?)\$\$', r'$\1$', answer_text, flags=re.DOTALL)
+    
+    # 检查答案是否已经包含美元符号，如果没有则添加
+    if '$' not in answer_text and answer_text.strip():
+        answer_text = f"${answer_text}$"
+        
+    answer_content = format_markdown_with_math(answer_text)
 
+    # Rest of the function remains the same
     if not responses_data:
         samples_grid_html = "<div>No samples available for this problem.</div>"
         # 返回空的样本数据状态
@@ -720,8 +762,8 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
                 
             samples_grid_html += '</div>'
         
-        # 第三行和第四行 - 对于默认模式（非比较模式）
-        if mode != 'comparison' and actual_display_count > 2*samples_per_row:
+        # 第三行和第四行 - 允许所有模式显示完整的64个样本
+        if actual_display_count > 2*samples_per_row:
             # 第三行
             row_samples = displayed_samples[2*samples_per_row:3*samples_per_row]
             if row_samples:
@@ -787,106 +829,58 @@ def handle_problem_select(problem_id_from_js, current_model_state, current_datas
         </div>
         """
         
-        print(f"[Backend] Successfully prepared display for problem {problem_id}")
         # 获取第一个样本作为初始样本
         if samples_data:
             # 这样样本会在选择问题后立即显示
-            first_sample = format_sample(samples_data[0])
             return problem_content, answer_content, final_html, gr.State(samples_data)
         else:
             return problem_content, answer_content, final_html, gr.State([])
 
-def handle_sample_select(sample_number, samples_data):
-    print(f"[Backend] handle_sample_select: sample_number='{sample_number}', samples_data_type={type(samples_data)}")
-    
-    # 确保从Gradio State对象中提取实际值
-    if hasattr(samples_data, 'value'):
-        samples_list = samples_data.value
-        print(f"[Backend] Extracted samples_data from State: length={len(samples_list) if isinstance(samples_list, list) else 'not_list'}")
-    else:
-        samples_list = samples_data
-    
-    # 确保样本编号是整数
-    try:
-        sample_idx = int(sample_number)
-    except ValueError:
-        return "<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Error: Sample number must be an integer.</div>"
-    
-    # 确保样本数据存在且为非空列表
-    if not samples_list or not isinstance(samples_list, list) or len(samples_list) == 0:
-        return "<div>No sample data available. Please select a problem first.</div>"
-    
-    # 检查索引是否在有效范围内，如果不在范围内，显示错误消息
-    if sample_idx < 0:
-        return f"<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Error: Sample number {sample_idx} is out of range. Valid range is 0 to {len(samples_list) - 1}.</div>"
-    
-    if sample_idx >= len(samples_list):
-        return f"<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Error: Sample number {sample_idx} is out of range. Valid range is 0 to {len(samples_list) - 1}.</div>"
-    
-    # 获取所选样本的数据
-    try:
-        sample = samples_list[sample_idx]
-        formatted_sample = format_sample(sample)
-        return formatted_sample
-    except Exception as e:
-        print(f"[Backend] Error formatting sample: {e}")
-        return f"<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Error displaying sample {sample_idx}: {str(e)}</div>"
+def create_problem_grid_html(problems, mode='default'):
+    """Create HTML for problem grid buttons. The JS function will be defined globally."""
+    if not problems:
+        return "<div>No problems found for this model/dataset. Please select a model and dataset.</div>"
 
-def handle_first_sample(samples_data):
-    """处理并显示第一个样本（索引0）"""
-    # 确保从Gradio State对象中提取实际值
-    if hasattr(samples_data, 'value'):
-        samples_list = samples_data.value
-    else:
-        samples_list = samples_data
-    
-    # 检查样本数据是否存在
-    if not samples_list or not isinstance(samples_list, list) or len(samples_list) == 0:
-        return "<div>No sample data available. Please select the problem and dataset first.</div>"
-    
-    # 直接获取第一个样本，避免错误处理逻辑
+    html_buttons = ""
     try:
-        sample = samples_list[0]
-        formatted_sample = format_sample(sample)
-        return formatted_sample
+        sorted_problems = sorted(
+            [(str(p[0]), float(p[1]) if p[1] is not None else 0.0, p[2]) for p in problems],
+            key=lambda x: int(re.search(r'\d+', x[0]).group(0)) if re.search(r'\d+', x[0]) else 0
+        )
     except Exception as e:
-        print(f"[Backend] Error formatting first sample: {e}")
-        return f"<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Error displaying first sample: {str(e)}</div>"
+        return f"<div>Error displaying problems. Check logs. {e}</div>"
 
-def handle_comparison_problem_update(problem_id, dataset_state):
-    """处理比较页面的问题更新，仅更新问题和答案内容，不需要模型"""
-    global db
-    # 确保从Gradio State对象中提取实际值
-    dataset_name = dataset_state.value if hasattr(dataset_state, 'value') else dataset_state
-    problem_id_value = problem_id.value if hasattr(problem_id, 'value') else problem_id
-    
-    if not problem_id_value or not dataset_name:
-        return "Please select a dataset and enter a problem ID.", "No answer available."
+    for pid, accuracy, _ in sorted_problems:
+        match = re.search(r'\d+', pid)
+        num_display = match.group(0) if match else pid
+        acc_pct = int(accuracy * 100)
         
-    # 处理纯数字输入，构建完整unique_id
-    if problem_id_value and problem_id_value.isdigit():
-        # 构建格式：OlymMATH-HARD-0-EN 或类似格式
-        parts = dataset_name.split('-')
-        if len(parts) == 2:  # 确保格式正确 (例如 "EN-HARD")
-            language, difficulty = parts
-            # 构建完整ID
-            problem_id_value = f"OlymMATH-{difficulty}-{problem_id_value}-{language}"
+        # 获取背景颜色
+        bg_color = get_gradient_color(accuracy)
+        # 统一使用白色文本，添加!important确保不被覆盖
+        text_color = "#ffffff"
+
+        html_buttons += f"""
+        <div 
+            data-problem-id=\"{pid}\"
+            class=\"problem-btn\" 
+            title=\"ID: {pid} - Acc: {acc_pct}%\" 
+            style='background-color: {bg_color}; color: {text_color} !important;
+                   border-radius: 4px; padding: 5px; text-align: center; font-size: 0.7em;
+                   min-height: 36px; user-select: none; width: 100%;
+                   display: flex; flex-direction: column; justify-content: center;
+                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'>
+            <div style="font-weight: bold; color: {text_color} !important;">{num_display}</div>
+            <div style="color: {text_color} !important;">{acc_pct}%</div>
+        </div>
+        """
     
-    try:
-        # 只获取问题数据，不获取特定模型的响应
-        problem_data, _ = db.get_problem_data(None, dataset_name, problem_id_value)
-        
-        if not problem_data:
-            return f"Problem not found: {problem_id_value}. Please check the ID and try again.", "No answer available."
-            
-        problem_dict = dict(problem_data)
-        problem_content = f"{format_latex(problem_dict.get('problem', ''))}"
-        answer_content = f"{format_latex(problem_dict.get('answer', ''))}"
-        
-        return problem_content, answer_content
-    except Exception as e:
-        print(f"[Backend] Error in handle_comparison_problem_update: {e}")
-        return f"Error: {str(e)}", "No answer available."
+    # 添加自定义样式强制文本颜色为白色
+    custom_style = "<style>.problem-btn, .problem-btn div { color: white !important; }</style>"
+    # 根据模式设置每行显示的列数
+    grid_cols = 20 if mode == 'comparison' else 10
+    grid_html = f"{custom_style}<div style='display: grid; grid-template-columns: repeat({grid_cols}, 1fr); gap: 4px;'>{html_buttons}</div>"
+    return grid_html
 
 def create_ui(db_path):
     global db
@@ -896,7 +890,7 @@ def create_ui(db_path):
     if not AVAILABLE_DATASETS:
         AVAILABLE_DATASETS = ["EN-HARD", "EN-EASY", "ZH-HARD", "ZH-EASY"] # Fallback
     
-    # Modified CSS
+    # Add MathJax support to the CSS
     custom_css = """
     .padding.svelte-phx28p { padding: unset !important; }
     body, .gradio-container { font-family: sans-serif; font-size: 0.95em; line-height: 1.6; }
@@ -904,6 +898,7 @@ def create_ui(db_path):
     .sample-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
     .problem-grid-container { overflow-y: auto; }
     .math-content { overflow-x: auto; padding: 5px; }
+    .sample-response { overflow-y: clip !important; max-height: none !important; height: auto !important; }
     h1, h2, h3, h4, h5 { margin-top: 0.8em; margin-bottom: 0.4em; color: var(--color-text); }
     .gradio-tabs > div[role='tablist'] button { font-size: 0.9em; padding: 8px 12px; }
     .gr-dropdown select { font-size: 0.9em; }
@@ -929,49 +924,50 @@ def create_ui(db_path):
         //border-radius: 8px;
         //margin-top: 10px;
     }
+
+    /* MathJax Styles for Gradio's Built-in LaTeX */
+    .math-inline, .math-display {
+        font-size: 110%;
+    }
+    .math-container p {
+        margin: 0.5em 0;
+    }
+
+    /* Markdown content styles */
+    .gr-markdown strong {
+        font-weight: bold;
+    }
+    .gr-markdown em {
+        font-style: italic;
+    }
+    .gr-markdown ul, .gr-markdown ol {
+        padding-left: 2em;
+        margin: 0.5em 0;
+    }
+    .gr-markdown blockquote {
+        border-left: 3px solid #ccc;
+        margin: 0.5em 0;
+        padding-left: 1em;
+        color: #666;
+    }
+    .gr-markdown pre, .gr-markdown code {
+        background-color: rgba(0,0,0,0.05);
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-family: monospace;
+    }
+    .gr-markdown table {
+        border-collapse: collapse;
+        margin: 0.5em 0;
+    }
+    .gr-markdown th, .gr-markdown td {
+        border: 1px solid #ddd;
+        padding: 4px 8px;
+    }
     """
     
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.sky)) as demo:
-        # Define global JavaScript functions here, including MathJax and problem selection
-        gr.HTML(""" 
-        <script>
-        // Function to load MathJax
-        function loadMathJax() {
-            if (window.MathJax) return;
-            window.MathJax = {
-                tex: {
-                    inlineMath: [['$', '$'], ['\\(', '\\)']],
-                    displayMath: [['$$', '$$'], ['\\[', '\\]']],
-                    processEscapes: true, tags: 'ams'
-                },
-                svg: { fontCache: 'global' },
-                startup: {
-                    ready: () => {
-                        window.MathJax.startup.defaultReady();
-                        window.typesetMath = (elements) => {
-                            if (window.MathJax && window.MathJax.startup && window.MathJax.startup.document && window.MathJax.startup.document.source && window.MathJax.startup.document.source.typeset) {
-                                window.MathJax.startup.document.source.typeset(elements);
-                            }
-                        };
-                    }
-                }
-            };
-            const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
-            script.async = true; script.id = 'MathJax-script';
-            document.head.appendChild(script);
-        }
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', loadMathJax);
-        } else {
-            loadMathJax();
-        }
-        </script>
-        """)
-        
-        # Hidden Textbox to communicate Problem ID from JS to Python
-        # IMPORTANT: elem_id must match what JavaScript's document.getElementById uses.
-        
+        # Remove KaTeX loading script since we're using Gradio's native Markdown with LaTeX
 
         current_dataset_state = gr.State(value=AVAILABLE_DATASETS[0] if AVAILABLE_DATASETS else "")
         current_model_state = gr.State(value=None)
@@ -1036,9 +1032,25 @@ def create_ui(db_path):
                     with gr.Column(scale=3, min_width=400):
                         with gr.Tabs():
                             with gr.TabItem("Problem Statement"):
-                                problem_markdown_output = gr.Markdown("Please fill in all the fields.")
+                                problem_markdown_output = gr.Markdown(
+                                    "Please fill in all the fields.",
+                                    latex_delimiters=[
+                                        {"left": "$", "right": "$", "display": False},
+                                        {"left": "$$", "right": "$$", "display": True},
+                                        {"left": "\\(", "right": "\\)", "display": False},
+                                        {"left": "\\[", "right": "\\]", "display": True}
+                                    ]
+                                )
                             with gr.TabItem("Reference Answer"):
-                                answer_markdown_output = gr.Markdown("No answer available.")
+                                answer_markdown_output = gr.Markdown(
+                                    "No answer available.",
+                                    latex_delimiters=[
+                                        {"left": "$", "right": "$", "display": False},
+                                        {"left": "$$", "right": "$$", "display": True},
+                                        {"left": "\\(", "right": "\\)", "display": False},
+                                        {"left": "\\[", "right": "\\]", "display": True}
+                                    ]
+                                )
                         
                         # 样本网格
                         samples_grid_output = gr.HTML("")
@@ -1056,11 +1068,23 @@ def create_ui(db_path):
                                 every=0.5
                             )
                         
-                        # 样本内容显示区域
-                        sample_content_output = gr.HTML(
+                        # 样本内容显示区域 - 使用HTML和Markdown组件分别显示元数据和响应内容
+                        sample_metadata_output = gr.HTML(
                             value="<div>Select a problem first to view samples.</div>",
-                            elem_classes="math-content dark-mode-bg-secondary", 
-                            elem_id="sample-content-area"
+                            elem_classes="sample-metadata dark-mode-bg-secondary", 
+                            elem_id="sample-metadata-area"
+                        )
+                        
+                        sample_response_output = gr.Markdown(
+                            value="Select a problem first to view samples.",
+                            elem_classes="sample-response dark-mode-bg-secondary", 
+                            elem_id="sample-response-area",
+                            latex_delimiters=[
+                                {"left": "$", "right": "$", "display": False},
+                                {"left": "$$", "right": "$$", "display": True},
+                                {"left": "\\(", "right": "\\)", "display": False},
+                                {"left": "\\[", "right": "\\]", "display": True}
+                            ]
                         )
             
             with gr.TabItem("Model Comparison"):
@@ -1088,9 +1112,25 @@ def create_ui(db_path):
                     with gr.Column(scale=1):
                         with gr.Tabs():
                             with gr.TabItem("Problem Statement"):
-                                comp_problem_markdown_output = gr.Markdown("Please select models and problem.")
+                                comp_problem_markdown_output = gr.Markdown(
+                                    "Please select models and problem.",
+                                    latex_delimiters=[
+                                        {"left": "$", "right": "$", "display": False},
+                                        {"left": "$$", "right": "$$", "display": True},
+                                        {"left": "\\(", "right": "\\)", "display": False},
+                                        {"left": "\\[", "right": "\\]", "display": True}
+                                    ]
+                                )
                             with gr.TabItem("Reference Answer"):
-                                comp_answer_markdown_output = gr.Markdown("No answer available.")
+                                comp_answer_markdown_output = gr.Markdown(
+                                    "No answer available.",
+                                    latex_delimiters=[
+                                        {"left": "$", "right": "$", "display": False},
+                                        {"left": "$$", "right": "$$", "display": True},
+                                        {"left": "\\(", "right": "\\)", "display": False},
+                                        {"left": "\\[", "right": "\\]", "display": True}
+                                    ]
+                                )
                 
                 # 左右两部分模型比较
                 with gr.Row(variant='compact'):
@@ -1122,11 +1162,23 @@ def create_ui(db_path):
                                 every=0.5
                             )
                         
-                        # 样本内容显示区域
-                        comp_sample_content_output_left = gr.HTML(
+                        # 样本内容显示区域 - 使用HTML和Markdown组件分别显示元数据和响应内容
+                        comp_sample_metadata_output_left = gr.HTML(
                             value="<div>Select a problem first to view samples.</div>",
-                            elem_classes="math-content dark-mode-bg-secondary", 
-                            elem_id="comp-sample-content-area-left"
+                            elem_classes="sample-metadata dark-mode-bg-secondary", 
+                            elem_id="comp-sample-metadata-area-left"
+                        )
+                        
+                        comp_sample_response_output_left = gr.Markdown(
+                            value="Select a problem first to view samples.",
+                            elem_classes="sample-response dark-mode-bg-secondary", 
+                            elem_id="comp-sample-response-area-left",
+                            latex_delimiters=[
+                                {"left": "$", "right": "$", "display": False},
+                                {"left": "$$", "right": "$$", "display": True},
+                                {"left": "\\(", "right": "\\)", "display": False},
+                                {"left": "\\[", "right": "\\]", "display": True}
+                            ]
                         )
                     
                     # 右侧模型
@@ -1157,11 +1209,23 @@ def create_ui(db_path):
                                 every=0.5
                             )
                         
-                        # 样本内容显示区域
-                        comp_sample_content_output_right = gr.HTML(
+                        # 样本内容显示区域 - 使用HTML和Markdown组件分别显示元数据和响应内容
+                        comp_sample_metadata_output_right = gr.HTML(
                             value="<div>Select a problem first to view samples.</div>",
-                            elem_classes="math-content dark-mode-bg-secondary", 
-                            elem_id="comp-sample-content-area-right"
+                            elem_classes="sample-metadata dark-mode-bg-secondary", 
+                            elem_id="comp-sample-metadata-area-right"
+                        )
+                        
+                        comp_sample_response_output_right = gr.Markdown(
+                            value="Select a problem first to view samples.",
+                            elem_classes="sample-response dark-mode-bg-secondary", 
+                            elem_id="comp-sample-response-area-right",
+                            latex_delimiters=[
+                                {"left": "$", "right": "$", "display": False},
+                                {"left": "$$", "right": "$$", "display": True},
+                                {"left": "\\(", "right": "\\)", "display": False},
+                                {"left": "\\[", "right": "\\]", "display": True}
+                            ]
                         )
                 
         # --- Event Handlers --- 
@@ -1201,7 +1265,6 @@ def create_ui(db_path):
                    gr.Dropdown(choices=comp_model_choices if comp_model_choices else [], value=None)
 
         def update_problem_grid_and_stats(selected_model_formatted, selected_dataset, mode='default'):
-            print(f"[Backend] update_problem_grid_and_stats: model_formatted='{selected_model_formatted}', dataset='{selected_dataset}'")
             if not selected_model_formatted or not selected_dataset:
                 # Return empty/default values for all outputs, including the state
                 return gr.DataFrame(value=[]), gr.HTML("<div>Please select a model and dataset first.</div>"), None
@@ -1219,7 +1282,6 @@ def create_ui(db_path):
             problem_list = db.get_problems_by_model_dataset(model_name, selected_dataset)
             grid_html = create_problem_grid_html(problem_list, mode=mode)
             
-            print(f"[Backend] update_problem_grid_and_stats: New model_name for state: {model_name}")
             # Correctly return the actual value for the current_model_state output
             return gr.DataFrame(value=stats_data), gr.HTML(value=grid_html), model_name
 
@@ -1238,9 +1300,9 @@ def create_ui(db_path):
             inputs=[],
             outputs=[sample_number_input]
         ).then(
-            lambda: ("Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>"),
+            lambda: ("Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>", ""),
             inputs=[],
-            outputs=[problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_content_output]
+            outputs=[problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_metadata_output, sample_response_output]
         )
         
         # Initial population of model dropdowns based on default dataset
@@ -1253,9 +1315,9 @@ def create_ui(db_path):
             inputs=[current_dataset_state],
             outputs=[model_stats_df, problem_grid_html_output, current_dataset_state]
         ).then(
-            lambda: ("Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>"),
+            lambda: ("Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>", ""),
             inputs=[],
-            outputs=[problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_content_output]
+            outputs=[problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_metadata_output, sample_response_output]
         ).then(
             # 重置Sample Number为0
             fn=lambda: "0",
@@ -1319,12 +1381,12 @@ def create_ui(db_path):
                 problem_content, answer_content, samples_grid_html, new_samples_data = handle_problem_select_comparison(current_problem_id, new_model_state, current_dataset)
                 
                 # 获取第一个样本的内容
-                first_sample_content = handle_first_sample(new_samples_data)
+                first_metadata, first_response = handle_first_sample(new_samples_data)
                 
-                return grid_html, new_model_state, problem_content, answer_content, samples_grid_html, new_samples_data, first_sample_content
+                return grid_html, new_model_state, problem_content, answer_content, samples_grid_html, new_samples_data, first_metadata, first_response
             else:
                 # 没有问题ID，只返回更新的模型状态
-                return grid_html, new_model_state, "Please enter a problem ID.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>"
+                return grid_html, new_model_state, "Please enter a problem ID.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>", ""
                 
         # 修改model_dropdown的处理函数，以重新查询当前问题响应 - 比较页面右侧
         def update_model_and_requery_problem_right(model_dropdown_value, current_dataset, current_problem_id):
@@ -1337,18 +1399,18 @@ def create_ui(db_path):
                 _, _, samples_grid_html, new_samples_data = handle_problem_select_comparison(current_problem_id, new_model_state, current_dataset)
                 
                 # 获取第一个样本的内容
-                first_sample_content = handle_first_sample(new_samples_data)
+                first_metadata, first_response = handle_first_sample(new_samples_data)
                 
-                return grid_html, new_model_state, samples_grid_html, new_samples_data, first_sample_content
+                return grid_html, new_model_state, samples_grid_html, new_samples_data, first_metadata, first_response
             else:
                 # 没有问题ID，只返回更新的模型状态
-                return grid_html, new_model_state, "", gr.State([]), "<div>Select a problem first to view samples.</div>"
+                return grid_html, new_model_state, "", gr.State([]), "<div>Select a problem first to view samples.</div>", ""
 
         # 左侧模型选择事件
         comp_model_dropdown_left.change(
             fn=update_model_and_requery_problem_left,
             inputs=[comp_model_dropdown_left, comp_dataset_state, comp_problem_state_input],
-            outputs=[comp_problem_grid_html_output_left, comp_model_state_left, comp_problem_markdown_output, comp_answer_markdown_output, comp_samples_grid_output_left, comp_samples_data_state_left, comp_sample_content_output_left]
+            outputs=[comp_problem_grid_html_output_left, comp_model_state_left, comp_problem_markdown_output, comp_answer_markdown_output, comp_samples_grid_output_left, comp_samples_data_state_left, comp_sample_metadata_output_left, comp_sample_response_output_left]
         ).then(
             # 重置Sample Number为0
             fn=lambda: "0",
@@ -1360,7 +1422,7 @@ def create_ui(db_path):
         comp_model_dropdown_right.change(
             fn=update_model_and_requery_problem_right,
             inputs=[comp_model_dropdown_right, comp_dataset_state, comp_problem_state_input],
-            outputs=[comp_problem_grid_html_output_right, comp_model_state_right, comp_samples_grid_output_right, comp_samples_data_state_right, comp_sample_content_output_right]
+            outputs=[comp_problem_grid_html_output_right, comp_model_state_right, comp_samples_grid_output_right, comp_samples_data_state_right, comp_sample_metadata_output_right, comp_sample_response_output_right]
         ).then(
             # 重置Sample Number为0
             fn=lambda: "0",
@@ -1368,7 +1430,21 @@ def create_ui(db_path):
             outputs=[comp_sample_number_input_right]
         )
         
-        # 问题选择事件 - 左侧模型
+        # 左侧样本选择
+        comp_sample_number_input_left.change(
+            fn=handle_sample_select,
+            inputs=[comp_sample_number_input_left, comp_samples_data_state_left],
+            outputs=[comp_sample_metadata_output_left, comp_sample_response_output_left]
+        )
+        
+        # 右侧样本选择
+        comp_sample_number_input_right.change(
+            fn=handle_sample_select,
+            inputs=[comp_sample_number_input_right, comp_samples_data_state_right],
+            outputs=[comp_sample_metadata_output_right, comp_sample_response_output_right]
+        )
+        
+        # 为比较页面问题选择事件添加处理
         comp_problem_state_input.change(
             fn=handle_problem_select_comparison,
             inputs=[comp_problem_state_input, comp_model_state_left, comp_dataset_state],
@@ -1381,7 +1457,7 @@ def create_ui(db_path):
         ).then(
             fn=handle_first_sample,
             inputs=[comp_samples_data_state_left],
-            outputs=[comp_sample_content_output_left]
+            outputs=[comp_sample_metadata_output_left, comp_sample_response_output_left]
         )
         
         # 问题选择事件 - 右侧模型
@@ -1397,25 +1473,10 @@ def create_ui(db_path):
         ).then(
             fn=handle_first_sample,
             inputs=[comp_samples_data_state_right],
-            outputs=[comp_sample_content_output_right]
-        )
-        
-        # 左侧样本选择
-        comp_sample_number_input_left.change(
-            fn=handle_sample_select,
-            inputs=[comp_sample_number_input_left, comp_samples_data_state_left],
-            outputs=[comp_sample_content_output_left]
-        )
-        
-        # 右侧样本选择
-        comp_sample_number_input_right.change(
-            fn=handle_sample_select,
-            inputs=[comp_sample_number_input_right, comp_samples_data_state_right],
-            outputs=[comp_sample_content_output_right]
+            outputs=[comp_sample_metadata_output_right, comp_sample_response_output_right]
         )
 
         # This is the crucial link: problem_state_input is changed by user, triggers this Python callback.
-        print("Setting up problem_state_input change handler...")
         problem_state_input.change(
             fn=handle_problem_select,
             inputs=[problem_state_input, current_model_state, current_dataset_state],
@@ -1428,7 +1489,7 @@ def create_ui(db_path):
         ).then(
             fn=handle_first_sample,
             inputs=[current_samples_data_state],
-            outputs=[sample_content_output]
+            outputs=[sample_metadata_output, sample_response_output]
         )
         
         # Also listen for direct input event which may be more reliable than change
@@ -1444,20 +1505,20 @@ def create_ui(db_path):
         ).then(
             fn=handle_first_sample,
             inputs=[current_samples_data_state],
-            outputs=[sample_content_output]
+            outputs=[sample_metadata_output, sample_response_output]
         )
 
         # 添加样本编号的事件处理
         sample_number_input.change(
             fn=handle_sample_select,
             inputs=[sample_number_input, current_samples_data_state],
-            outputs=[sample_content_output]
+            outputs=[sample_metadata_output, sample_response_output]
         )
         
         sample_number_input.input(
             fn=handle_sample_select,
             inputs=[sample_number_input, current_samples_data_state],
-            outputs=[sample_content_output]
+            outputs=[sample_metadata_output, sample_response_output]
         )
         
         # 修改model_dropdown.change处理函数，以重新查询当前问题响应
@@ -1470,17 +1531,17 @@ def create_ui(db_path):
                 problem_content, answer_content, samples_grid_html, new_samples_data = handle_problem_select(current_problem_id, new_model_state, current_dataset)
                 
                 # 获取第一个样本的内容
-                first_sample_content = handle_first_sample(new_samples_data)
+                first_metadata, first_response = handle_first_sample(new_samples_data)
                 
-                return stats_df, grid_html, new_model_state, problem_content, answer_content, samples_grid_html, new_samples_data, first_sample_content
+                return stats_df, grid_html, new_model_state, problem_content, answer_content, samples_grid_html, new_samples_data, first_metadata, first_response
             else:
                 # 没有问题ID，只返回更新的模型状态
-                return stats_df, grid_html, new_model_state, "Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>"
+                return stats_df, grid_html, new_model_state, "Please fill in all the fields.", "No answer available.", "", gr.State([]), "<div>Select a problem first to view samples.</div>", ""
 
         model_dropdown.change(
             fn=update_model_and_requery_problem,
             inputs=[model_dropdown, current_dataset_state, problem_state_input], 
-            outputs=[model_stats_df, problem_grid_html_output, current_model_state, problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_content_output]
+            outputs=[model_stats_df, problem_grid_html_output, current_model_state, problem_markdown_output, answer_markdown_output, samples_grid_output, current_samples_data_state, sample_metadata_output, sample_response_output]
         ).then(
             # 重置Sample Number为0
             fn=lambda: "0",
@@ -1501,20 +1562,17 @@ def monitor_memory_usage():
         
         # 如果内存使用超过12GB (激进设置)，清理缓存
         if memory_usage_mb > 12000:  # 12GB
-            print(f"Memory usage high ({memory_usage_mb:.1f} MB), clearing caches...")
             if db:
                 db.clear_cache('response')  # 优先清理响应缓存
                 gc.collect()
         # 如果内存使用超过14GB，更激进地清理
         if memory_usage_mb > 14000:  # 14GB
-            print(f"Memory usage critical ({memory_usage_mb:.1f} MB), clearing all caches...")
             if db:
                 db.clear_cache()  # 清理所有缓存
                 gc.collect()
                 
         return f"Memory: {memory_usage_mb:.1f} MB"
     except Exception as e:
-        print(f"Error monitoring memory: {e}")
         return "Memory monitor error"
 
 # 修改主函数以使用优化策略
@@ -1523,7 +1581,6 @@ if __name__ == "__main__":
     
     # 检查数据库文件是否存在，如果不存在则从 Hugging Face 下载
     if not os.path.exists(DB_PATH):
-        print(f"Database file not found at {DB_PATH}. Attempting to download from Hugging Face...")
         try:
             # 从环境变量获取 HF_TOKEN
             hf_token = os.environ.get("HF_TOKEN")
@@ -1537,9 +1594,7 @@ if __name__ == "__main__":
                 repo_type="dataset",
                 token=hf_token
             )
-            print(f"Successfully downloaded database file to {DB_PATH}")
         except Exception as e:
-            print(f"Error downloading database: {str(e)}")
             # 创建一个显示错误信息的简单 Gradio 应用
             with gr.Blocks() as error_demo:
                 gr.Markdown(f"# Error: Database Download Failed\n{str(e)}\nPlease ensure HF_TOKEN is set correctly and try again.")
@@ -1547,19 +1602,13 @@ if __name__ == "__main__":
             exit(1)
     
     if os.path.exists(DB_PATH):
-        # 报告数据库大小
-        db_size = os.path.getsize(DB_PATH)
-        print(f"Database size: {db_size / (1024*1024*1024):.2f} GB")
-        
         # 创建UI并启动
-        print("Initializing database connection...")
         db = ModelDatabase(DB_PATH)
         
         # 添加清理函数
         def cleanup():
             global db
             if db:
-                print("Shutting down, cleaning up resources...")
                 db.close()
         
         # 注册清理函数
@@ -1576,8 +1625,7 @@ if __name__ == "__main__":
             inbrowser=False
         )
     else:
-        print(f"Database file not found at {DB_PATH}. Please ensure it exists.")
-        # Optionally, create a dummy DB or a message App
+        # 创建一个显示错误信息的简单 Gradio 应用
         with gr.Blocks() as error_demo:
             gr.Markdown(f"# Error: Database Not Found\nCould not find `{DB_PATH}`. Please ensure the database file is correctly placed and accessible.")
         error_demo.launch(server_name="0.0.0.0")