Merge style/ui-update into pr/3

app.py

@@ -62,6 +62,9 @@ custom_css = """
     --pruna-accordion-bg: rgba(255, 255, 255, 0.02);
     --pruna-accordion-border: rgba(216, 180, 254, 0.15);
     --pruna-dropdown-hover: #2a1844;
+    --pruna-toggle-track: var(--pruna-bg-header);
+    --pruna-toggle-thumb: var(--pruna-bg-elevated);
+    --pruna-toggle-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.06);
     color-scheme: dark;
 }
 
@@ -105,13 +108,27 @@ custom_css = """
     --pruna-accordion-bg: var(--pruna-bg-card);
     --pruna-accordion-border: var(--pruna-border);
     --pruna-dropdown-hover: #f3e8ff;
+    --pruna-toggle-track: var(--pruna-bg-header);
+    --pruna-toggle-thumb: var(--pruna-bg-card);
+    --pruna-toggle-thumb-shadow: 0 1px 2px rgba(88, 28, 135, 0.12);
     color-scheme: light;
 }
 
-html, body {
+html {
     width: 100% !important;
     max-width: 100% !important;
-    overflow-x: clip;
+    min-width: 0 !important;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+body, gradio-app {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow: visible;
     -webkit-tap-highlight-color: transparent;
 }
 html, body, .gradio-container, .main {
@@ -134,18 +151,25 @@ button, a, label, input, select, textarea,
 /* Subtle depth — not a marketing-site hero glow */
 body, .gradio-container {
     background-image: var(--pruna-glow) !important;
-    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+    background-attachment: scroll !important;
+}
+@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
+    body, .gradio-container {
+        background-attachment: fixed !important;
+    }
 }
 
 .gradio-container {
     width: 100% !important;
     max-width: 1200px !important;
+    min-width: 0 !important;
     margin: 0 auto !important;
     padding-top: 0 !important;
     padding-left: 20px !important;
     padding-right: 20px !important;
     box-sizing: border-box !important;
-    overflow-x: clip;
+    overflow-x: hidden;
 }
 .gradio-container .main,
 .gradio-container .wrap,
@@ -166,6 +190,7 @@ body, .gradio-container {
 .workspace-filters,
 .view-filters {
     max-width: 100% !important;
+    min-width: 0 !important;
 }
 
 /* —— App header (P-Bench only) —— */
@@ -300,6 +325,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     background: transparent !important;
     box-shadow: none !important;
 }
+/* Flatten tabs so the bar sits above shared filters. display:contents is
+   the fallback; Safari can drop or mis-order those children, so browsers
+   with subgrid use the grid layout below instead. */
 .workspace-shell > .tabs,
 .workspace-shell > .main-tabs,
 .workspace-shell > .block:not(.workspace-filters),
@@ -323,12 +351,49 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     margin: 0 0 16px !important;
     justify-content: center !important;
     width: 100% !important;
+    overflow: visible !important;
+}
+@supports (grid-template-rows: subgrid) {
+    .workspace-shell,
+    .workspace-shell.block,
+    .workspace-shell.column,
+    .workspace-shell.gap {
+        display: grid !important;
+        grid-template-columns: minmax(0, 1fr) !important;
+        grid-template-rows: auto auto auto !important;
+        align-content: start !important;
+    }
+    .workspace-shell > .tabs,
+    .workspace-shell > .main-tabs,
+    .workspace-shell .tabs.main-tabs {
+        display: grid !important;
+        grid-template-columns: minmax(0, 1fr) !important;
+        grid-template-rows: subgrid !important;
+        grid-column: 1 !important;
+        grid-row: 1 / 4 !important;
+        position: static !important;
+    }
+    .main-tabs > .tab-wrapper {
+        grid-row: 1 !important;
+        order: 0 !important;
+    }
+    .workspace-filters {
+        grid-column: 1 !important;
+        grid-row: 2 !important;
+        order: 0 !important;
+    }
+    .main-tabs .tabitem {
+        grid-row: 3 !important;
+        order: 0 !important;
+        min-width: 0 !important;
+    }
 }
 .main-tabs .tab-container {
     height: auto !important;
+    min-height: 0 !important;
     justify-content: center !important;
     flex-wrap: wrap !important;
-    overflow: hidden !important;
+    overflow: visible !important;
     max-width: 100% !important;
     gap: 2px;
 }
@@ -445,6 +510,8 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     .app-header-brand h1,
     .gradio-container .app-header-brand h1 {
         font-size: 1.55rem !important;
+        width: auto !important;
+        max-width: 100% !important;
     }
     .app-header-tagline {
         font-size: 0.88rem !important;
@@ -521,17 +588,29 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
         left: 0 !important;
         width: 2.4rem;
         min-width: 2.4rem;
+        box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.45);
     }
     .ranking-table .model-cell,
-    .prose .ranking-table .model-cell,
-    .ranking-table th.model-cell {
+    .prose .ranking-table .model-cell {
+        position: static !important;
+        left: auto !important;
+        z-index: auto;
+        min-width: 140px;
+        max-width: none;
+        background: transparent !important;
+    }
+    .ranking-table th.model-cell,
+    .prose .ranking-table th.model-cell {
         position: sticky !important;
-        left: 2.4rem !important;
-        min-width: 108px;
-        max-width: 36vw;
+        top: 0 !important;
+        left: auto !important;
+        z-index: 3;
+        min-width: 140px;
+        max-width: none;
+        background: var(--pruna-bg-header) !important;
     }
-    .ranking-table .model-cell strong {
-        white-space: nowrap;
+    .ranking-table tbody tr:hover .model-cell {
+        background: var(--pruna-table-hover) !important;
     }
     .compare-controls,
     .compare-controls.row,
@@ -604,7 +683,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .view-filters {
     display: flex !important;
     flex-wrap: wrap !important;
-    align-items: end !important;
+    align-items: flex-end !important;
     gap: 12px !important;
     margin: 0;
     overflow: visible !important;
@@ -612,7 +691,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .view-filters > div,
 .view-filters > .block,
 .view-filters > .form {
-    flex: 1 1 0 !important;
+    flex: 1 1 0% !important;
     min-width: 0 !important;
 }
 .view-filters > .block,
@@ -764,6 +843,10 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     line-height: 1.45 !important;
     font-weight: 400 !important;
 }
+.view-help + .view-help,
+.prose .view-help + .view-help {
+    margin-top: 0.45rem !important;
+}
 .view-filters span[data-testid="block-info"],
 .view-filters .info,
 .view-filters .block-info {
@@ -901,7 +984,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .leaderboard-controls {
     display: flex !important;
     flex-wrap: wrap !important;
-    align-items: end !important;
+    align-items: flex-end !important;
     gap: 10px !important;
     margin-bottom: 12px;
     overflow: visible !important;
@@ -1317,7 +1400,9 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     box-shadow: none !important;
 }
 .compare-controls .compare-prompt-count .head {
-    display: contents;
+    display: block !important;
+    grid-column: 1 / -1;
+    grid-row: 1;
     margin: 0 !important;
 }
 .compare-controls .compare-prompt-count .head label {
@@ -1491,7 +1576,182 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
     margin: 0 !important;
 }
 .compare-row { display: grid; gap: 12px; min-width: 0; width: 100%; }
-.compare-prompt-text { overflow-wrap: anywhere; }
+.compare-prompt-text { overflow-wrap: anywhere; word-break: break-word; }
+.pareto-heading-row,
+.pareto-heading-row.row,
+.pareto-heading-row .form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 8px 12px !important;
+    width: 100% !important;
+    margin-bottom: 0.4rem !important;
+}
+.pareto-heading-row .pareto-subhead,
+.pareto-heading-row > div:first-child,
+.pareto-heading-row .form > div:first-child {
+    flex: 1 1 240px !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+}
+.pareto-heading-row .pareto-scale-control {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    flex: 0 0 auto !important;
+    gap: 0 !important;
+    margin-left: auto !important;
+    max-width: 168px !important;
+    padding: 0 !important;
+}
+.pareto-scale-all-row,
+.pareto-scale-all-row.row,
+.pareto-scale-all-row .form {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 8px 12px !important;
+    width: 100% !important;
+    margin: 2px 0 14px !important;
+}
+.pareto-scale-all-row .html-container,
+.pareto-scale-all-row .block {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: auto !important;
+    flex: 0 0 auto !important;
+}
+.pareto-scale-all-row .html-container {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+}
+.pareto-scale-all-label {
+    color: var(--pruna-text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    white-space: nowrap;
+}
+.pareto-scale-all-row .pareto-scale-toggle {
+    margin-left: auto !important;
+}
+.pareto-scale-toggle,
+.pareto-scale-toggle.block {
+    min-width: 0 !important;
+    width: auto !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.pareto-scale-toggle .wrap,
+.pareto-scale-toggle .form {
+    display: block !important;
+    width: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.pareto-scale-toggle legend {
+    display: none !important;
+}
+.pareto-scale-toggle fieldset,
+.pareto-scale-toggle .wrap:has(> label),
+.pareto-scale-toggle .form:has(> label) {
+    position: relative !important;
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+    align-items: stretch !important;
+    isolation: isolate;
+    box-sizing: border-box !important;
+    width: max-content !important;
+    min-width: 0 !important;
+    padding: 4px !important;
+    gap: 4px !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-toggle-track) !important;
+    box-shadow: none !important;
+}
+.pareto-scale-toggle fieldset::before,
+.pareto-scale-toggle .wrap:has(> label)::before,
+.pareto-scale-toggle .form:has(> label)::before {
+    content: none !important;
+}
+.pareto-scale-toggle label {
+    position: relative !important;
+    z-index: 1 !important;
+    display: flex !important;
+    flex: 1 1 auto !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    box-sizing: border-box !important;
+    min-width: 58px !important;
+    min-height: 26px !important;
+    margin: 0 !important;
+    padding: 5px 12px !important;
+    border: none !important;
+    border-radius: 6px !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: var(--pruna-text-body) !important;
+    font-size: 0.72rem !important;
+    font-weight: 600 !important;
+    line-height: 1.2 !important;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    cursor: pointer !important;
+}
+.pareto-scale-toggle-all label {
+    min-width: 68px !important;
+    min-height: 30px !important;
+    padding: 6px 14px !important;
+    font-size: 0.85rem !important;
+}
+.pareto-scale-toggle label span {
+    margin: 0 !important;
+    padding: 0 !important;
+    color: inherit !important;
+    opacity: 1 !important;
+}
+.pareto-scale-toggle label > * + * {
+    margin-left: 0 !important;
+}
+.pareto-scale-toggle label + label::before,
+.pareto-scale-toggle label + label {
+    content: none !important;
+    border-left: none !important;
+}
+.pareto-scale-toggle input[type="radio"] {
+    position: absolute !important;
+    appearance: none !important;
+    opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    pointer-events: none !important;
+}
+.pareto-scale-toggle label:hover {
+    background: transparent !important;
+    color: var(--pruna-text-primary) !important;
+}
+.pareto-scale-toggle label.selected,
+.pareto-scale-toggle label:has(input:checked) {
+    background: var(--pruna-toggle-thumb) !important;
+    color: var(--pruna-lavender) !important;
+    font-weight: 700 !important;
+    border-color: transparent !important;
+    box-shadow: var(--pruna-toggle-thumb-shadow) !important;
+}
 .pareto-layout,
 .pareto-layout.row,
 .pareto-layout .form {
@@ -1549,7 +1809,7 @@ button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !import
 .app-header .app-header-brand h1 {
     display: block !important;
     width: max-content !important;
-    max-width: none !important;
+    max-width: 100% !important;
     flex: 0 0 auto !important;
     margin: 0 !important;
     padding: 0 !important;
@@ -2317,11 +2577,23 @@ custom_head = """
     return found;
   };
 
-  const restylePlots = (mode) => {
+  const applyPlotTheme = (gd, mode) => {
     const layout = PLOT_LAYOUT[mode];
-    if (!layout || typeof Plotly === "undefined") return;
+    if (!layout || typeof Plotly === "undefined" || !gd) return;
+    if (gd.layout && gd.layout.paper_bgcolor === layout.paper_bgcolor) return;
+    try { Plotly.relayout(gd, layout); } catch (e) {}
+  };
+
+  const watchPlotTheme = (gd) => {
+    if (!gd || gd.__inferbenchThemeBound) return;
+    gd.__inferbenchThemeBound = true;
+    gd.addEventListener("plotly_afterplot", () => applyPlotTheme(gd, currentMode()));
+  };
+
+  const restylePlots = (mode) => {
     queryAll(".js-plotly-plot").forEach((gd) => {
-      try { Plotly.relayout(gd, layout); } catch (e) {}
+      watchPlotTheme(gd);
+      applyPlotTheme(gd, mode);
     });
   };
 

ui.py

@@ -1,4 +1,5 @@
 from html import escape
+from math import ceil, floor, log10
 from pathlib import Path
 import base64
 import random
@@ -25,6 +26,12 @@ MAX_PARETO_METRICS = 8
 _PARETO_SLOT_COUNT = 1 + MAX_PARETO_METRICS * 8
 _PARETO_PRICE_COLUMN = "Price / Image (USD)"
 _PARETO_TIME_COLUMN = "Min Generation Time (s)"
+_PARETO_SCALE_CHOICES = [
+    ("Linear", "Linear"),
+    ("Log", "Logarithmic"),
+]
+_PARETO_SCALE_VALUES = {value for _, value in _PARETO_SCALE_CHOICES}
+_PARETO_SCALE_DEFAULT = "Linear"
 
 TAB_LEADERBOARDS = "leaderboards"
 TAB_PARETO = "pareto"
@@ -670,6 +677,7 @@ def _build_pareto_figure(
     x_title,
     x_hover_prefix="",
     x_hover_suffix="",
+    x_axis_type="linear",
 ):
     scatter = (
         data[["Model", score_column, x_column]]
@@ -755,7 +763,29 @@ def _build_pareto_figure(
     )
     axis_font = {"color": "#fafafa", "size": 13}
     tick_font = {"color": "#a3a3a3", "size": 12}
+    x_axis_ticks = {}
+    if x_axis_type == "log":
+        positive_x = scatter.loc[scatter[x_column] > 0, x_column].astype(float)
+        if not positive_x.empty:
+            minimum = positive_x.min()
+            maximum = positive_x.max()
+            tick_values = [
+                factor * (10**exponent)
+                for exponent in range(
+                    floor(log10(minimum)),
+                    ceil(log10(maximum)) + 1,
+                )
+                for factor in (1, 2, 5)
+                if minimum * 0.8 <= factor * (10**exponent) <= maximum * 1.2
+            ]
+            x_axis_ticks = {
+                "tickmode": "array",
+                "tickvals": tick_values,
+                "ticktext": [f"{value:g}" for value in tick_values],
+            }
     fig.update_xaxes(
+        type=x_axis_type,
+        **x_axis_ticks,
         showgrid=True,
         gridcolor="rgba(74, 57, 98, 0.55)",
         zeroline=False,
@@ -774,6 +804,55 @@ def _build_pareto_figure(
     return fig
 
 
+def _is_log_scale(scale):
+    return scale == "Logarithmic"
+
+
+def _pareto_axis_type(scale):
+    return "log" if _is_log_scale(scale) else "linear"
+
+
+def _pareto_scale_radio(*extra_classes):
+    return gr.Radio(
+        choices=_PARETO_SCALE_CHOICES,
+        value=_PARETO_SCALE_DEFAULT,
+        show_label=False,
+        container=False,
+        elem_classes=["pareto-scale-toggle", *extra_classes],
+    )
+
+
+def _pareto_plot_heading(title):
+    with gr.Row(equal_height=False, elem_classes="pareto-heading-row"):
+        gr.Markdown(f"#### {title}", elem_classes="pareto-subhead")
+        with gr.Column(min_width=140, elem_classes="pareto-scale-control"):
+            return _pareto_scale_radio()
+
+
+def _default_pareto_scales():
+    return [_PARETO_SCALE_DEFAULT] * MAX_PARETO_METRICS
+
+
+def _normalize_pareto_scales(scales):
+    values = list(scales or [])
+    if len(values) < MAX_PARETO_METRICS:
+        values.extend(
+            [_PARETO_SCALE_DEFAULT] * (MAX_PARETO_METRICS - len(values))
+        )
+    return values[:MAX_PARETO_METRICS]
+
+
+def _uniform_pareto_scales(scale):
+    return [scale] * MAX_PARETO_METRICS
+
+
+def _pareto_master_scale_update(price_scales, time_scales):
+    values = list(price_scales) + list(time_scales)
+    if values and all(value == values[0] for value in values):
+        return gr.update(value=values[0])
+    return gr.update(value=None)
+
+
 def _pareto_axis(data, score_column, x_column, x_title, missing_message, empty_message, **hover):
     if x_column not in data.columns:
         return None, missing_message
@@ -789,7 +868,12 @@ def _pareto_axis(data, score_column, x_column, x_title, missing_message, empty_m
     return fig, None
 
 
-def _pareto_pair(data, score_column):
+def _pareto_pair(
+    data,
+    score_column,
+    latency_scale=_PARETO_SCALE_DEFAULT,
+    price_scale=_PARETO_SCALE_DEFAULT,
+):
     score_missing = "No score data is available for this metric."
     if data is None or not score_column or score_column not in data.columns:
         return None, score_missing, None, score_missing
@@ -802,6 +886,7 @@ def _pareto_pair(data, score_column):
         "Price per image isn't available for this dataset.",
         "No models have both a score and a price for this metric.",
         x_hover_prefix="$",
+        x_axis_type=_pareto_axis_type(price_scale),
     )
     time_fig, time_message = _pareto_axis(
         data,
@@ -811,6 +896,7 @@ def _pareto_pair(data, score_column):
         "Min generation time isn't available for this dataset.",
         "No models have both a score and a min generation time for this metric.",
         x_hover_suffix="s",
+        x_axis_type=_pareto_axis_type(latency_scale),
     )
     return price_fig, price_message, time_fig, time_message
 
@@ -849,9 +935,16 @@ def _pareto_slot_note(price_fig, price_message, time_fig, time_message, data):
     return " ".join(notes)
 
 
-def _pareto_slot_updates(data, score_columns):
+def _pareto_slot_updates(
+    data,
+    score_columns,
+    price_scales=None,
+    time_scales=None,
+):
     """Updates for a fixed bank of Gradio Plot slots (visible/hidden)."""
     score_columns = [column for column in (score_columns or []) if column]
+    price_scales = _normalize_pareto_scales(price_scales)
+    time_scales = _normalize_pareto_scales(time_scales)
     has_price = data is not None and _PARETO_PRICE_COLUMN in data.columns
     has_time = data is not None and _PARETO_TIME_COLUMN in data.columns
     dataset_note = _pareto_dataset_message(data)
@@ -873,7 +966,10 @@ def _pareto_slot_updates(data, score_columns):
             continue
         score_column = score_columns[index]
         price_fig, price_message, time_fig, time_message = _pareto_pair(
-            data, score_column
+            data,
+            score_column,
+            latency_scale=time_scales[index],
+            price_scale=price_scales[index],
         )
         show_price = price_fig is not None
         show_time = time_fig is not None
@@ -900,6 +996,30 @@ def _pareto_slot_updates(data, score_columns):
     return updates
 
 
+def _pareto_all_scale_updates(data, score_columns, scale):
+    """Apply one scale to every Pareto plot and radio."""
+    score_columns = [column for column in (score_columns or []) if column]
+    price_updates = []
+    time_updates = []
+    for index in range(MAX_PARETO_METRICS):
+        if index >= len(score_columns):
+            price_updates.append(gr.skip())
+            time_updates.append(gr.skip())
+            continue
+        price_fig, _, time_fig, _ = _pareto_pair(
+            data,
+            score_columns[index],
+            latency_scale=scale,
+            price_scale=scale,
+        )
+        price_updates.append(_pareto_plot_update(price_fig))
+        time_updates.append(_pareto_plot_update(time_fig))
+    radio_updates = [
+        gr.update(value=scale) for _ in range(MAX_PARETO_METRICS * 2)
+    ]
+    return price_updates + time_updates + radio_updates
+
+
 def _samples_html(samples, selected_models, num_prompts, seed=0):
     if not samples:
         return _pareto_unavailable_html(
@@ -1117,12 +1237,27 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             ) as pp_tab:
                 gr.Markdown(
                     "<p class='view-help'>"
-                    "Score against price and generation time. Green points are on the "
-                    "frontier; lavender points sit below it. Hover a point to see "
-                    "which model it is."
+                    "Score against price and generation time. Green points are on "
+                    "the frontier; lavender points sit below it. Hover a point to "
+                    "see which model it is."
+                    "</p>"
+                    "<p class='view-help'>"
+                    "You can switch between linear and logarithmic scale for all "
+                    "the plots, or individually for each plots."
                     "</p>",
                     elem_classes="view-help-host",
                 )
+                with gr.Row(
+                    equal_height=False,
+                    elem_classes="pareto-scale-all-row",
+                ):
+                    gr.HTML(
+                        "<span class='pareto-scale-all-label'>All plots</span>",
+                        padding=False,
+                    )
+                    pareto_all_scale = _pareto_scale_radio(
+                        "pareto-scale-toggle-all",
+                    )
                 pareto_dataset_note = gr.HTML(
                     "",
                     padding=False,
@@ -1148,9 +1283,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
                                 min_width=320,
                                 elem_classes="pareto-col",
                             ) as slot_price_col:
-                                gr.Markdown(
-                                    "#### Price vs score",
-                                    elem_classes="pareto-subhead",
+                                slot_price_scale = _pareto_plot_heading(
+                                    "Price vs score"
                                 )
                                 slot_price = gr.Plot(
                                     value=None,
@@ -1162,9 +1296,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
                                 min_width=320,
                                 elem_classes="pareto-col",
                             ) as slot_time_col:
-                                gr.Markdown(
-                                    "#### Min generation time vs score",
-                                    elem_classes="pareto-subhead",
+                                slot_time_scale = _pareto_plot_heading(
+                                    "Min generation time vs score"
                                 )
                                 slot_time = gr.Plot(
                                     value=None,
@@ -1185,8 +1318,10 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
                             slot_layout,
                             slot_price_col,
                             slot_price,
+                            slot_price_scale,
                             slot_time_col,
                             slot_time,
+                            slot_time_scale,
                         )
                     )
 
@@ -1324,6 +1459,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             "optimized": list(
                 extras.get("optimized", prev.get("optimized") or [])
             ),
+            "price_scales": _normalize_pareto_scales(prev.get("price_scales")),
+            "time_scales": _normalize_pareto_scales(prev.get("time_scales")),
             "stale": {
                 TAB_LEADERBOARDS: not flags["include_leaderboard"],
                 TAB_PARETO: not flags["include_pareto"],
@@ -1383,6 +1520,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
         include_leaderboard=True,
         include_pareto=False,
         include_samples=False,
+        price_scales=None,
+        time_scales=None,
     ):
         view = resolve_view(datasets, metrics, dataset_id, metric_id)
         data = view["data"]
@@ -1403,7 +1542,12 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             ranking_html = gr.skip()
         if include_pareto:
             pareto_data = _filter_leaderboard(data, [], [], [], models=models)
-            pareto_updates = _pareto_slot_updates(pareto_data, view["score_columns"])
+            pareto_updates = _pareto_slot_updates(
+                pareto_data,
+                view["score_columns"],
+                price_scales=price_scales,
+                time_scales=time_scales,
+            )
         else:
             pareto_updates = _pareto_skip_updates()
         if include_samples:
@@ -1537,6 +1681,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
                 extras[2],
                 num_prompts,
                 seed,
+                price_scales=view_state.get("price_scales"),
+                time_scales=view_state.get("time_scales"),
                 **flags,
             ),
             "state": _commit_state(
@@ -1739,6 +1885,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             optimized_value,
             num_prompts,
             seed,
+            price_scales=view_state.get("price_scales"),
+            time_scales=view_state.get("time_scales"),
             **flags,
         )
         stale[tab] = False
@@ -1795,6 +1943,70 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             next_seed,
         )
 
+    def _on_pareto_plot_scale(slot_index, axis):
+        def handler(dataset_id, metric_id, models, scale, view_state):
+            view_state = dict(view_state or {})
+            price_scales = _normalize_pareto_scales(
+                view_state.get("price_scales")
+            )
+            time_scales = _normalize_pareto_scales(
+                view_state.get("time_scales")
+            )
+            if axis == "price":
+                if price_scales[slot_index] == scale:
+                    return gr.skip(), gr.skip(), gr.skip()
+                price_scales[slot_index] = scale
+            else:
+                if time_scales[slot_index] == scale:
+                    return gr.skip(), gr.skip(), gr.skip()
+                time_scales[slot_index] = scale
+            view_state["price_scales"] = price_scales
+            view_state["time_scales"] = time_scales
+            master_scale = _pareto_master_scale_update(
+                price_scales, time_scales
+            )
+            view = resolve_view(datasets, metrics, dataset_id, metric_id)
+            score_columns = [
+                column for column in (view["score_columns"] or []) if column
+            ]
+            if slot_index >= len(score_columns):
+                return gr.skip(), master_scale, view_state
+            data = _filter_leaderboard(
+                view["data"], [], [], [], models=list(models or [])
+            )
+            price_fig, _, time_fig, _ = _pareto_pair(
+                data,
+                score_columns[slot_index],
+                latency_scale=time_scales[slot_index],
+                price_scale=price_scales[slot_index],
+            )
+            fig = price_fig if axis == "price" else time_fig
+            return _pareto_plot_update(fig), master_scale, view_state
+
+        handler.__name__ = f"on_pareto_{axis}_scale_{slot_index}"
+        return handler
+
+    def on_pareto_all_scale(dataset_id, metric_id, models, scale, view_state):
+        if scale not in _PARETO_SCALE_VALUES:
+            return (*_skip_all(MAX_PARETO_METRICS * 4), gr.skip())
+        view_state = dict(view_state or {})
+        scales = _uniform_pareto_scales(scale)
+        if (
+            _normalize_pareto_scales(view_state.get("price_scales")) == scales
+            and _normalize_pareto_scales(view_state.get("time_scales")) == scales
+        ):
+            return (*_skip_all(MAX_PARETO_METRICS * 4), gr.skip())
+        view_state["price_scales"] = scales
+        view_state["time_scales"] = scales
+        view = resolve_view(datasets, metrics, dataset_id, metric_id)
+        data = _filter_leaderboard(
+            view["data"], [], [], [], models=list(models or [])
+        )
+        return (
+            *_pareto_all_scale_updates(data, view["score_columns"], scale),
+            view_state,
+        )
+
     def _on_tab(tab):
         def handler(
             dataset_id,
@@ -1832,6 +2044,8 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             "platform": [],
             "owner": [],
             "optimized": [],
+            "price_scales": _default_pareto_scales(),
+            "time_scales": _default_pareto_scales(),
             "stale": {
                 TAB_LEADERBOARDS: False,
                 TAB_PARETO: True,
@@ -1843,7 +2057,7 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
         pareto_dataset_note,
         *[
             component
-            for slot_group, slot_title, slot_note, slot_layout, slot_price_col, slot_price, slot_time_col, slot_time in pareto_slots
+            for slot_group, slot_title, slot_note, slot_layout, slot_price_col, slot_price, slot_price_scale, slot_time_col, slot_time, slot_time_scale in pareto_slots
             for component in (
                 slot_group,
                 slot_title,
@@ -1856,6 +2070,24 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             )
         ],
     ]
+    pareto_all_scale_outputs = [
+        *[
+            slot_price
+            for _, _, _, _, _, slot_price, _, _, _, _ in pareto_slots
+        ],
+        *[
+            slot_time
+            for _, _, _, _, _, _, _, _, slot_time, _ in pareto_slots
+        ],
+        *[
+            slot_price_scale
+            for _, _, _, _, _, _, slot_price_scale, _, _, _ in pareto_slots
+        ],
+        *[
+            slot_time_scale
+            for _, _, _, _, _, _, _, _, _, slot_time_scale in pareto_slots
+        ],
+    ]
     view_inputs = [
         platform,
         owner,
@@ -1960,6 +2192,56 @@ def render_image_workspace(datasets, metrics, default_dataset_id, default_metric
             show_progress="hidden",
         )
 
+    pareto_all_scale.change(
+        on_pareto_all_scale,
+        inputs=[
+            dataset_dd,
+            metric_dd,
+            models_dd,
+            pareto_all_scale,
+            view_state,
+        ],
+        outputs=[*pareto_all_scale_outputs, view_state],
+        **_VIEW_EVENTS,
+    )
+
+    for slot_index, (
+        _,
+        _,
+        _,
+        _,
+        _,
+        slot_price,
+        slot_price_scale,
+        _,
+        slot_time,
+        slot_time_scale,
+    ) in enumerate(pareto_slots):
+        slot_price_scale.change(
+            _on_pareto_plot_scale(slot_index, "price"),
+            inputs=[
+                dataset_dd,
+                metric_dd,
+                models_dd,
+                slot_price_scale,
+                view_state,
+            ],
+            outputs=[slot_price, pareto_all_scale, view_state],
+            **_VIEW_EVENTS,
+        )
+        slot_time_scale.change(
+            _on_pareto_plot_scale(slot_index, "time"),
+            inputs=[
+                dataset_dd,
+                metric_dd,
+                models_dd,
+                slot_time_scale,
+                view_state,
+            ],
+            outputs=[slot_time, pareto_all_scale, view_state],
+            **_VIEW_EVENTS,
+        )
+
     prompt_count.change(
         on_samples_controls,
         inputs=[dataset_dd, models_dd, prompt_count, seed_state],