.

app.py

@@ -49,9 +49,18 @@ model_size_to_file_name = {
 }
 SCALING_EXTRAPOLATE_MAX_B = 10000
 SCALING_FIT_POINTS = 200
+SCALING_PLOT_WIDTH = 1000
+SCALING_PLOT_HEIGHT = 620
+SCALING_PLOT_MARGIN = dict(l=70, r=35, t=70, b=65)
 FIT_LINE_HOVER_TEMPLATE = "Params: %{x:.2f}B<br>Predicted CR: %{y:.2f}%<extra></extra>"
 MODEL_NAME_DISPLAY_MAX_CHARS = 28
-FRONTIER_TABLE_COLUMNS = ["Params (B)", "Model"]
+FRONTIER_TABLE_COLUMNS = ["params", "model", "ratio%"]
+FIT_RESIDUAL_COLORSCALE = [
+    [0.0, "#2CA25F"],
+    [0.5, "#F7F7F7"],
+    [1.0, "#DE2D26"],
+]
+FIT_LINE_COLOR = "#4B5563"
 
 
 def read_about_md():
@@ -382,11 +391,34 @@ def submit_model(name):
         return "ERROR: Unexpected error. Please try again later."
 
 
-def power_law_with_offset(x, a, b, c):
-    """带偏置的幂律函数: y = a * x^b + c"""
-    return a * np.power(x, b) + c
-
-
+def power_law_with_offset(x, a, b, c):
+    """带偏置的幂律函数: y = a * x^b + c"""
+    return a * np.power(x, b) + c
+
+
+def calculate_fit_delta_percent(x_values, y_values, params):
+    """Return percent delta from fit; negative is better because lower CR is better."""
+    x_arr = np.array(x_values, dtype=float)
+    y_arr = np.array(y_values, dtype=float)
+    fit_y = power_law_with_offset(x_arr, *params)
+    with np.errstate(divide="ignore", invalid="ignore"):
+        delta = ((y_arr - fit_y) / fit_y) * 100
+    delta[~np.isfinite(delta)] = np.nan
+    return delta.tolist()
+
+
+def create_fit_delta_coloraxis(delta_values):
+    finite_values = [abs(float(v)) for v in delta_values if np.isfinite(v)]
+    max_abs = max(finite_values) if finite_values else 1.0
+    max_abs = max(max_abs, 1.0)
+    return dict(
+        colorscale=FIT_RESIDUAL_COLORSCALE,
+        cmin=-max_abs,
+        cmax=max_abs,
+        colorbar=dict(title="vs fit (%)", ticksuffix="%"),
+    )
+
+
 def filter_pareto_frontier(x_values, y_values, names):
     """
     筛选帕累托前沿的点
@@ -437,12 +469,12 @@ def _build_frontier_table_rows(x_values, y_values, names):
         return []
 
     valid_x, valid_y, valid_names = zip(*valid_data)
-    pareto_x, _, pareto_names = filter_pareto_frontier(list(valid_x), list(valid_y), list(valid_names))
+    pareto_x, pareto_y, pareto_names = filter_pareto_frontier(list(valid_x), list(valid_y), list(valid_names))
     rows = [
-        {"Params (B)": round(float(param), 3), "Model": _format_frontier_model_name(model)}
-        for param, model in zip(pareto_x, pareto_names)
+        {"params": round(float(param), 3), "model": _format_frontier_model_name(model), "ratio%": round(float(ratio), 3)}
+        for param, ratio, model in zip(pareto_x, pareto_y, pareto_names)
     ]
-    return sorted(rows, key=lambda row: (row["Params (B)"], row["Model"]))
+    return sorted(rows, key=lambda row: (-row["params"], row["model"]))
 
 
 def _format_frontier_model_name(model_name: str):
@@ -510,20 +542,25 @@ def create_scaling_frontier_table(data_manager: DataManager, period: str, mode:
                 )
             )
 
-    rows = list({(row["Params (B)"], row["Model"]): row for row in rows}.values())
-    rows = sorted(rows, key=lambda row: (row["Params (B)"], row["Model"]))
+    best_rows = {}
+    for row in rows:
+        row_key = (row["params"], row["model"])
+        if row_key not in best_rows or row["ratio%"] < best_rows[row_key]["ratio%"]:
+            best_rows[row_key] = row
+    rows = sorted(best_rows.values(), key=lambda row: (-row["params"], row["model"]))
     return pd.DataFrame(rows, columns=FRONTIER_TABLE_COLUMNS)
 
 
 def render_scaling_frontier_table(frontier_df):
     if frontier_df is None or len(frontier_df) == 0:
-        rows_html = '<tr><td class="empty" colspan="2">No Pareto frontier models</td></tr>'
+        rows_html = '<tr><td class="empty" colspan="3">No Pareto frontier models</td></tr>'
     else:
         rows = []
         for _, row in frontier_df.iterrows():
-            params = html.escape(f'{float(row["Params (B)"]):.3f}')
-            model = html.escape(str(row["Model"]))
-            rows.append(f'<tr><td class="params">{params}</td><td class="model">{model}</td></tr>')
+            params = html.escape(f'{float(row["params"]):.3f}')
+            model = html.escape(str(row["model"]))
+            ratio = html.escape(f'{float(row["ratio%"]):.3f}')
+            rows.append(f'<tr><td class="params">{params}</td><td class="model">{model}</td><td class="ratio">{ratio}</td></tr>')
         rows_html = "\n".join(rows)
 
     return f"""
@@ -534,9 +571,10 @@ def render_scaling_frontier_table(frontier_df):
       <colgroup>
         <col class="params-col">
         <col class="model-col">
+        <col class="ratio-col">
       </colgroup>
       <thead>
-        <tr><th>Params (B)</th><th>Model</th></tr>
+        <tr><th>params</th><th>model</th><th>ratio%</th></tr>
       </thead>
       <tbody>
         {rows_html}
@@ -623,10 +661,15 @@ def create_scaling_plot(data_manager: DataManager, period: str, use_pareto: bool
         visible_columns=None,
     )
 
-    if len(new_df) == 0:
-        fig = go.Figure()
-        fig.update_layout(title={"text": "Compression Ratio Scaling Law", "x": 0.5}, width=800, height=600)
-        return fig
+    if len(new_df) == 0:
+        fig = go.Figure()
+        fig.update_layout(
+            title={"text": "Compression Ratio Scaling Law", "x": 0.5},
+            width=SCALING_PLOT_WIDTH,
+            height=SCALING_PLOT_HEIGHT,
+            margin=SCALING_PLOT_MARGIN,
+        )
+        return fig
 
     x_values = new_df["Params (B)"].astype(float).tolist()
     y_values = new_df["Average (lower=better)"].astype(float).tolist()
@@ -634,21 +677,31 @@ def create_scaling_plot(data_manager: DataManager, period: str, use_pareto: bool
 
     # 过滤掉无效值（NaN, 0, 负数）
     valid_data = [(x, y, n) for x, y, n in zip(x_values, y_values, names) if x > 0 and y > 0 and not np.isnan(x) and not np.isnan(y)]
-    if len(valid_data) == 0:
-        fig = go.Figure()
-        fig.update_layout(title={"text": "Compression Ratio Scaling Law", "x": 0.5}, width=800, height=600)
-        return fig
+    if len(valid_data) == 0:
+        fig = go.Figure()
+        fig.update_layout(
+            title={"text": "Compression Ratio Scaling Law", "x": 0.5},
+            width=SCALING_PLOT_WIDTH,
+            height=SCALING_PLOT_HEIGHT,
+            margin=SCALING_PLOT_MARGIN,
+        )
+        return fig
 
     x_values, y_values, names = zip(*valid_data)
     x_values, y_values, names = list(x_values), list(y_values), list(names)
 
     # 如果选择帕累托前沿，筛选数据点
     if use_pareto:
-        fit_x_values, fit_y_values, fit_names = filter_pareto_frontier(x_values, y_values, names)
-        if len(fit_x_values) == 0:
-            fig = go.Figure()
-            fig.update_layout(title={"text": "Compression Ratio Scaling Law - No Pareto Frontier", "x": 0.5}, width=800, height=600)
-            return fig
+        fit_x_values, fit_y_values, fit_names = filter_pareto_frontier(x_values, y_values, names)
+        if len(fit_x_values) == 0:
+            fig = go.Figure()
+            fig.update_layout(
+                title={"text": "Compression Ratio Scaling Law - No Pareto Frontier", "x": 0.5},
+                width=SCALING_PLOT_WIDTH,
+                height=SCALING_PLOT_HEIGHT,
+                margin=SCALING_PLOT_MARGIN,
+            )
+            return fig
     else:
         fit_x_values, fit_y_values, fit_names = x_values, y_values, names
 
@@ -674,52 +727,66 @@ def create_scaling_plot(data_manager: DataManager, period: str, use_pareto: bool
     x_max = np.log10(x_axis_max)
     y_min = np.log10(y_min_val)
     y_max = np.log10(y_max_val)
-    x_dtick = (x_max - x_min) / 4
-    y_dtick = (y_max - y_min) / 4
-
-    fig = go.Figure()
-
-    # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
-    base_points = list(zip(x_values, y_values, names))
-    if use_pareto:
-        pareto_points = set(zip(fit_x_values, fit_y_values, fit_names))
-        base_points = [p for p in base_points if p not in pareto_points]
-
-    if base_points:
-        base_x_values, base_y_values, base_names = zip(*base_points)
-        fig.add_trace(
-            go.Scatter(
-                x=list(base_x_values),
-                y=list(base_y_values),
-                mode="markers",
-                name="Non-Pareto Models" if use_pareto else "All Models",
-                marker=dict(size=12, color="#39C5BB", opacity=0.8),
-                text=list(base_names),
-                customdata=list(zip(base_x_values, base_y_values)),
-                hovertemplate=(
-                    "<b>%{text}</b><br>" + "Params: %{customdata[0]:.2f}B<br>" + "Compression Ratio: %{customdata[1]:.2f}%<br>" + "<extra></extra>"
-                ),
-            )
-        )
-
-    # 如果使用帕累托前沿，高亮显示帕累托前沿的点
-    if use_pareto:
-        fig.add_trace(
-            go.Scatter(
-                x=fit_x_values,
-                y=fit_y_values,
-                mode="markers",
-                name="Pareto Frontier",
-                marker=dict(size=14, color="#FF6B6B", symbol="diamond", opacity=1.0),
-                text=fit_names,
-                customdata=list(zip(fit_x_values, fit_y_values)),
-                hovertemplate=(
-                    "<b>%{text}</b> (Pareto)<br>"
-                    + "Params: %{customdata[0]:.2f}B<br>"
-                    + "Compression Ratio: %{customdata[1]:.2f}%<br>"
-                    + "<extra></extra>"
-                ),
-            )
+    x_dtick = (x_max - x_min) / 4
+    y_dtick = (y_max - y_min) / 4
+
+    fig = go.Figure()
+    point_delta_values = calculate_fit_delta_percent(x_values, y_values, params)
+
+    # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
+    base_points = list(zip(x_values, y_values, names, point_delta_values))
+    if use_pareto:
+        pareto_points = set(zip(fit_x_values, fit_y_values, fit_names))
+        base_points = [p for p in base_points if (p[0], p[1], p[2]) not in pareto_points]
+
+    if base_points:
+        base_x_values, base_y_values, base_names, base_delta_values = zip(*base_points)
+        fig.add_trace(
+            go.Scatter(
+                x=list(base_x_values),
+                y=list(base_y_values),
+                mode="markers",
+                name="Non-Pareto Models" if use_pareto else "All Models",
+                marker=dict(size=12, color=list(base_delta_values), coloraxis="coloraxis", opacity=0.85),
+                text=list(base_names),
+                customdata=list(zip(base_x_values, base_y_values, base_delta_values)),
+                hovertemplate=(
+                    "<b>%{text}</b><br>"
+                    + "Params: %{customdata[0]:.2f}B<br>"
+                    + "Compression Ratio: %{customdata[1]:.2f}%<br>"
+                    + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                    + "<extra></extra>"
+                ),
+            )
+        )
+
+    # 如果使用帕累托前沿，高亮显示帕累托前沿的点
+    if use_pareto:
+        pareto_delta_values = calculate_fit_delta_percent(fit_x_values, fit_y_values, params)
+        fig.add_trace(
+            go.Scatter(
+                x=fit_x_values,
+                y=fit_y_values,
+                mode="markers",
+                name="Pareto Frontier",
+                marker=dict(
+                    size=14,
+                    color=pareto_delta_values,
+                    coloraxis="coloraxis",
+                    symbol="diamond",
+                    opacity=1.0,
+                    line=dict(color="#263238", width=1),
+                ),
+                text=fit_names,
+                customdata=list(zip(fit_x_values, fit_y_values, pareto_delta_values)),
+                hovertemplate=(
+                    "<b>%{text}</b> (Pareto)<br>"
+                    + "Params: %{customdata[0]:.2f}B<br>"
+                    + "Compression Ratio: %{customdata[1]:.2f}%<br>"
+                    + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                    + "<extra></extra>"
+                ),
+            )
         )
 
     # 添加拟合曲线
@@ -731,19 +798,20 @@ def create_scaling_plot(data_manager: DataManager, period: str, use_pareto: bool
     fig.add_trace(
         go.Scatter(
             x=fit_x.tolist(),
-            y=fit_y.tolist(),
-            mode="lines",
-            name=fit_label,
-            line=dict(color="#FF6B6B", width=2, dash="dash"),
-            hovertemplate=FIT_LINE_HOVER_TEMPLATE,
-        )
-    )
+            y=fit_y.tolist(),
+            mode="lines",
+            name=fit_label,
+            line=dict(color=FIT_LINE_COLOR, width=2, dash="dash"),
+            hovertemplate=FIT_LINE_HOVER_TEMPLATE,
+        )
+    )
 
     title_suffix = " (Pareto Frontier)" if use_pareto else ""
     fig.update_layout(
         title={"text": f"Compression Ratio Scaling Law{title_suffix}", "x": 0.5, "xanchor": "center", "yanchor": "top"},
-        width=800,
-        height=600,
+        width=SCALING_PLOT_WIDTH,
+        height=SCALING_PLOT_HEIGHT,
+        margin=SCALING_PLOT_MARGIN,
         showlegend=True,
         legend=dict(
             yanchor="top",
@@ -761,17 +829,18 @@ def create_scaling_plot(data_manager: DataManager, period: str, use_pareto: bool
             tickformat=".2f",
             range=[x_min - 0.1, x_max + 0.1],
         ),
-        yaxis=dict(
-            title="Compression Ratio (%)",
-            showgrid=True,
-            zeroline=False,
-            type="log",
+        yaxis=dict(
+            title="Compression Ratio (%)",
+            showgrid=True,
+            zeroline=False,
+            type="log",
             dtick=y_dtick,
             tickformat=".2f",
-            range=[y_min - 0.1, y_max + 0.1],
-            autorange="reversed",
-        ),
-    )
+            range=[y_min - 0.1, y_max + 0.1],
+            autorange="reversed",
+        ),
+        coloraxis=create_fit_delta_coloraxis(point_delta_values),
+    )
     return fig
 
 
@@ -791,10 +860,15 @@ def create_category_scaling_plot(
         visible_columns=None,
     )
 
-    if len(new_df) == 0 or not selected_datasets:
-        fig = go.Figure()
-        fig.update_layout(title={"text": "Scaling Law by Dataset", "x": 0.5}, width=1000, height=700)
-        return fig
+    if len(new_df) == 0 or not selected_datasets:
+        fig = go.Figure()
+        fig.update_layout(
+            title={"text": "Scaling Law by Dataset", "x": 0.5},
+            width=SCALING_PLOT_WIDTH,
+            height=700,
+            margin=SCALING_PLOT_MARGIN,
+        )
+        return fig
 
     # 颜色配色方案 - 使用高对比度、饱和度高的颜色
     color_palette = [
@@ -812,9 +886,10 @@ def create_category_scaling_plot(
 
     fig = go.Figure()
 
-    # 用于计算全局坐标范围
-    all_x_values = []
-    all_y_values = []
+    # 用于计算全局坐标范围
+    all_x_values = []
+    all_y_values = []
+    all_delta_values = []
 
     if display_mode == "average":
         # 平均模式：计算选中数据集的平均值
@@ -862,57 +937,69 @@ def create_category_scaling_plot(
                 extrapolate_max_b=SCALING_EXTRAPOLATE_MAX_B,
             )
             a, b, c = params
-            positive_fit_y = fit_y[fit_y > 0]
-            if positive_fit_y.size:
-                all_y_values.extend(positive_fit_y.tolist())
-
-            # 构建数据集名称列表（用于hover显示）
-            datasets_label = f"Average of {len(selected_datasets)} datasets"
-
-            # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
-            base_points = list(zip(x_vals, y_vals, name_vals))
-            if use_pareto:
-                pareto_points = set(zip(fit_x_vals, fit_y_vals, fit_name_vals))
-                base_points = [p for p in base_points if p not in pareto_points]
-
-            if base_points:
-                base_x_vals, base_y_vals, base_name_vals = zip(*base_points)
-                fig.add_trace(
-                    go.Scatter(
-                        x=list(base_x_vals),
-                        y=list(base_y_vals),
-                        mode="markers",
-                        name=f"{datasets_label} (Non-Pareto)" if use_pareto else datasets_label,
-                        marker=dict(size=12, color=color, opacity=0.8),
-                        text=list(base_name_vals),
-                        customdata=list(zip(base_x_vals, base_y_vals)),
-                        hovertemplate=(
-                            f"<b>%{{text}}</b><br>{datasets_label}<br>"
-                            + "Params: %{customdata[0]:.2f}B<br>"
-                            + "CR: %{customdata[1]:.2f}%<br>"
-                            + "<extra></extra>"
-                        ),
-                    )
+            positive_fit_y = fit_y[fit_y > 0]
+            if positive_fit_y.size:
+                all_y_values.extend(positive_fit_y.tolist())
+            point_delta_values = calculate_fit_delta_percent(x_vals, y_vals, params)
+            all_delta_values.extend(point_delta_values)
+
+            # 构建数据集名称列表（用于hover显示）
+            datasets_label = f"Average of {len(selected_datasets)} datasets"
+
+            # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
+            base_points = list(zip(x_vals, y_vals, name_vals, point_delta_values))
+            if use_pareto:
+                pareto_points = set(zip(fit_x_vals, fit_y_vals, fit_name_vals))
+                base_points = [p for p in base_points if (p[0], p[1], p[2]) not in pareto_points]
+
+            if base_points:
+                base_x_vals, base_y_vals, base_name_vals, base_delta_vals = zip(*base_points)
+                fig.add_trace(
+                    go.Scatter(
+                        x=list(base_x_vals),
+                        y=list(base_y_vals),
+                        mode="markers",
+                        name=f"{datasets_label} (Non-Pareto)" if use_pareto else datasets_label,
+                        marker=dict(size=12, color=list(base_delta_vals), coloraxis="coloraxis", opacity=0.85),
+                        text=list(base_name_vals),
+                        customdata=list(zip(base_x_vals, base_y_vals, base_delta_vals)),
+                        hovertemplate=(
+                            f"<b>%{{text}}</b><br>{datasets_label}<br>"
+                            + "Params: %{customdata[0]:.2f}B<br>"
+                            + "CR: %{customdata[1]:.2f}%<br>"
+                            + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                            + "<extra></extra>"
+                        ),
+                    )
                 )
 
-            # 如果使用帕累托前沿，高亮显示帕累托前沿的点
-            if use_pareto:
-                fig.add_trace(
-                    go.Scatter(
-                        x=fit_x_vals,
-                        y=fit_y_vals,
-                        mode="markers",
-                        name="Pareto Frontier",
-                        marker=dict(size=14, color="#FF6B6B", symbol="diamond", opacity=1.0),
-                        text=fit_name_vals,
-                        customdata=list(zip(fit_x_vals, fit_y_vals)),
-                        hovertemplate=(
-                            f"<b>%{{text}}</b> (Pareto)<br>{datasets_label}<br>"
-                            + "Params: %{customdata[0]:.2f}B<br>"
-                            + "CR: %{customdata[1]:.2f}%<br>"
-                            + "<extra></extra>"
-                        ),
-                    )
+            # 如果使用帕累托前沿，高亮显示帕累托前沿的点
+            if use_pareto:
+                pareto_delta_vals = calculate_fit_delta_percent(fit_x_vals, fit_y_vals, params)
+                fig.add_trace(
+                    go.Scatter(
+                        x=fit_x_vals,
+                        y=fit_y_vals,
+                        mode="markers",
+                        name="Pareto Frontier",
+                        marker=dict(
+                            size=14,
+                            color=pareto_delta_vals,
+                            coloraxis="coloraxis",
+                            symbol="diamond",
+                            opacity=1.0,
+                            line=dict(color="#263238", width=1),
+                        ),
+                        text=fit_name_vals,
+                        customdata=list(zip(fit_x_vals, fit_y_vals, pareto_delta_vals)),
+                        hovertemplate=(
+                            f"<b>%{{text}}</b> (Pareto)<br>{datasets_label}<br>"
+                            + "Params: %{customdata[0]:.2f}B<br>"
+                            + "CR: %{customdata[1]:.2f}%<br>"
+                            + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                            + "<extra></extra>"
+                        ),
+                    )
                 )
 
             # 添加拟合曲线
@@ -924,13 +1011,13 @@ def create_category_scaling_plot(
             fig.add_trace(
                 go.Scatter(
                     x=fit_x.tolist(),
-                    y=fit_y.tolist(),
-                    mode="lines",
-                    name=fit_label,
-                    line=dict(color="#FF6B6B", width=2, dash="dash"),
-                    hovertemplate=FIT_LINE_HOVER_TEMPLATE,
-                )
-            )
+                    y=fit_y.tolist(),
+                    mode="lines",
+                    name=fit_label,
+                    line=dict(color=FIT_LINE_COLOR, width=2, dash="dash"),
+                    hovertemplate=FIT_LINE_HOVER_TEMPLATE,
+                )
+            )
     else:
         # 单独显示模式：为每个数据集创建散点图和拟合线
         for idx, dataset in enumerate(selected_datasets):
@@ -971,55 +1058,67 @@ def create_category_scaling_plot(
                 extrapolate_max_b=SCALING_EXTRAPOLATE_MAX_B,
             )
             a, b, c = params
-            positive_fit_y = fit_y[fit_y > 0]
-            if positive_fit_y.size:
-                all_y_values.extend(positive_fit_y.tolist())
-
-            # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
-            base_points = list(zip(x_vals, y_vals, name_vals))
-            if use_pareto:
-                pareto_points = set(zip(fit_x_vals, fit_y_vals, fit_name_vals))
-                base_points = [p for p in base_points if p not in pareto_points]
-
-            if base_points:
-                base_x_vals, base_y_vals, base_name_vals = zip(*base_points)
-                fig.add_trace(
-                    go.Scatter(
-                        x=list(base_x_vals),
-                        y=list(base_y_vals),
-                        mode="markers",
-                        name=f"{dataset} (Non-Pareto)" if use_pareto else f"{dataset}",
-                        marker=dict(size=10, color=color, opacity=0.7),
-                        text=list(base_name_vals),
-                        customdata=list(zip(base_x_vals, base_y_vals)),
-                        hovertemplate=(
-                            f"<b>%{{text}}</b><br>{dataset}<br>"
-                            + "Params: %{customdata[0]:.2f}B<br>"
-                            + "CR: %{customdata[1]:.2f}%<br>"
-                            + "<extra></extra>"
-                        ),
-                        legendgroup=dataset,
+            positive_fit_y = fit_y[fit_y > 0]
+            if positive_fit_y.size:
+                all_y_values.extend(positive_fit_y.tolist())
+            point_delta_values = calculate_fit_delta_percent(x_vals, y_vals, params)
+            all_delta_values.extend(point_delta_values)
+
+            # Pareto 模式下，普通散点仅显示非 Pareto 点，避免同一点重复绘制
+            base_points = list(zip(x_vals, y_vals, name_vals, point_delta_values))
+            if use_pareto:
+                pareto_points = set(zip(fit_x_vals, fit_y_vals, fit_name_vals))
+                base_points = [p for p in base_points if (p[0], p[1], p[2]) not in pareto_points]
+
+            if base_points:
+                base_x_vals, base_y_vals, base_name_vals, base_delta_vals = zip(*base_points)
+                fig.add_trace(
+                    go.Scatter(
+                        x=list(base_x_vals),
+                        y=list(base_y_vals),
+                        mode="markers",
+                        name=f"{dataset} (Non-Pareto)" if use_pareto else f"{dataset}",
+                        marker=dict(size=10, color=list(base_delta_vals), coloraxis="coloraxis", opacity=0.8),
+                        text=list(base_name_vals),
+                        customdata=list(zip(base_x_vals, base_y_vals, base_delta_vals)),
+                        hovertemplate=(
+                            f"<b>%{{text}}</b><br>{dataset}<br>"
+                            + "Params: %{customdata[0]:.2f}B<br>"
+                            + "CR: %{customdata[1]:.2f}%<br>"
+                            + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                            + "<extra></extra>"
+                        ),
+                        legendgroup=dataset,
                     )
                 )
 
-            # 如果使用帕累托前沿，高亮显示帕累托前沿的点
-            if use_pareto:
-                fig.add_trace(
-                    go.Scatter(
-                        x=fit_x_vals,
-                        y=fit_y_vals,
-                        mode="markers",
-                        name=f"{dataset} (Pareto)",
-                        marker=dict(size=12, color=color, symbol="diamond", opacity=1.0),
-                        text=fit_name_vals,
-                        customdata=list(zip(fit_x_vals, fit_y_vals)),
-                        hovertemplate=(
-                            f"<b>%{{text}}</b> (Pareto)<br>{dataset}<br>"
-                            + "Params: %{customdata[0]:.2f}B<br>"
-                            + "CR: %{customdata[1]:.2f}%<br>"
-                            + "<extra></extra>"
-                        ),
-                        legendgroup=dataset,
+            # 如果使用帕累托前沿，高亮显示帕累托前沿的点
+            if use_pareto:
+                pareto_delta_vals = calculate_fit_delta_percent(fit_x_vals, fit_y_vals, params)
+                fig.add_trace(
+                    go.Scatter(
+                        x=fit_x_vals,
+                        y=fit_y_vals,
+                        mode="markers",
+                        name=f"{dataset} (Pareto)",
+                        marker=dict(
+                            size=12,
+                            color=pareto_delta_vals,
+                            coloraxis="coloraxis",
+                            symbol="diamond",
+                            opacity=1.0,
+                            line=dict(color="#263238", width=1),
+                        ),
+                        text=fit_name_vals,
+                        customdata=list(zip(fit_x_vals, fit_y_vals, pareto_delta_vals)),
+                        hovertemplate=(
+                            f"<b>%{{text}}</b> (Pareto)<br>{dataset}<br>"
+                            + "Params: %{customdata[0]:.2f}B<br>"
+                            + "CR: %{customdata[1]:.2f}%<br>"
+                            + "vs Fit: %{customdata[2]:+.2f}%<br>"
+                            + "<extra></extra>"
+                        ),
+                        legendgroup=dataset,
                     )
                 )
 
@@ -1042,10 +1141,15 @@ def create_category_scaling_plot(
                 )
             )
 
-    if not all_x_values or not all_y_values:
-        fig = go.Figure()
-        fig.update_layout(title={"text": "Scaling Law by Dataset - No Valid Data", "x": 0.5}, width=1000, height=700)
-        return fig
+    if not all_x_values or not all_y_values:
+        fig = go.Figure()
+        fig.update_layout(
+            title={"text": "Scaling Law by Dataset - No Valid Data", "x": 0.5},
+            width=SCALING_PLOT_WIDTH,
+            height=700,
+            margin=SCALING_PLOT_MARGIN,
+        )
+        return fig
 
     # 计算全局坐标范围
     x_min_val = min(all_x_values)
@@ -1058,8 +1162,8 @@ def create_category_scaling_plot(
 
     fig.update_layout(
         title={"text": "Scaling Law by Dataset", "x": 0.5, "xanchor": "center", "yanchor": "top"},
-        width=1000,
-        height=700,
+        width=SCALING_PLOT_WIDTH,
+        height=700,
         showlegend=True,
         legend=dict(
             yanchor="top",
@@ -1086,10 +1190,11 @@ def create_category_scaling_plot(
             dtick=y_dtick,
             tickformat=".2f",
             range=[y_min - 0.1, y_max + 0.1],
-            autorange="reversed",
-        ),
-        margin=dict(r=250),  # 为图例预留空间
-    )
+            autorange="reversed",
+        ),
+        coloraxis=create_fit_delta_coloraxis(all_delta_values),
+        margin=dict(l=70, r=170, t=70, b=65),  # 为图例预留空间
+    )
     return fig
 
 

title.py

@@ -76,7 +76,10 @@ table {
     margin: 0 !important;
 }
 .frontier-table .params-col {
-    width: 82px;
+    width: 72px;
+}
+.frontier-table .ratio-col {
+    width: 64px;
 }
 .frontier-table th,
 .frontier-table td {
@@ -111,7 +114,8 @@ table {
 .frontier-table tbody tr td:last-child {
     border-radius: 0 7px 7px 0;
 }
-.frontier-table td.params {
+.frontier-table td.params,
+.frontier-table td.ratio {
     color: var(--body-text-color-subdued);
     font-variant-numeric: tabular-nums;
 }