ui-updates (#1)

- style fixes (d5590ebceb9361133bf317e15d76897c1091d28e)
- cleaning css (baa43b90710449175cd743f22621f241258c111f)
- light and dark mode (1bf1b48daa446fc0f2498117fc66bf9d5844635a)
- updating about page (517e6683cfecc16172b4a95611d77b4277d12254)
- refactor: update about tab with experimentation details (3473c50e525da355506889d610dda53eaca89e34)
- fixing mobile rendering (754a2279b6b26d1708a4d33fd8dfbfce08c54825)
- changing inferbench to p-bench (0fa188200802697b6c27337446101c5d73142efe)
- new ui (4b9f11d4ff35dd618331fb51b31778ed7a75bcf8)
- feat: add AA and Arenaai results, fix some ui features (4527ab9a70703593fd674dca571ccbe2c9900633)
- ui updates (3f9b0a536cd48fdd6062945abb5e008f6101b144)
- fixing samples (335823ace0a429bbb7942bb7870a32c80c4bd959)
- cleaning and updating about (a9c18ffb9ca574375a1e1431b8a3c9a911c0aff2)


Co-authored-by: Begüm Çığ <begumcig@users.noreply.huggingface.co>

README.md

@@ -1,5 +1,5 @@
 ---
-title: InferBench
+title: P-Bench
 emoji: 🥇
 colorFrom: green
 colorTo: indigo
@@ -12,73 +12,34 @@ tags:
 - leaderboard
 ---
 
-# InferBench
+# P-Bench
 
-Evaluate the quality and efficiency of image gen api's.
+Compare text-to-image models on quality, speed, and price. This repo is the
+Gradio dashboard: leaderboards, Pareto plots, and side-by-side samples.
 
-## Installation
+The live Space is [PrunaAI/P-Bench](https://huggingface.co/spaces/PrunaAI/P-Bench).
 
-### Install dependencies
+## Run locally
 
-Install dependencies with conda like that:
-```
-conda env create -f environment.yml
-```
-
-### Install uv
-
-Install uv with pip like that:
-
-```
-uv venv --python 3.12
-```
-
-Then activate the environment:
+From the repo root:
 
 ```
+python -m venv .venv
 source .venv/bin/activate
+pip install "gradio==5.19.0" pandas -r requirements.txt
+python app.py
 ```
 
-Then install the dependencies with uv:
+The app is served at `http://127.0.0.1:7860`.
 
-```
-uv sync --all-groups
-```
+`requirements.txt` lists Plotly. Gradio and pandas are required locally;
+Hugging Face Spaces installs Gradio from the YAML `sdk_version` above.
 
-## Usage
+## Deploy
 
-Create .env file with all the credentials you will need.
+`origin` is the Space (`https://huggingface.co/spaces/PrunaAI/P-Bench`).
+Publish the current branch to the live app with:
 
-This is how you can generate the images.
-```
-python sample.py replicate draw_bench genai_bench geneval hps parti
-```
-
-This is how you would evaluate the benchmarks once you have all images:
-```
-python evaluate.py replicate draw_bench genai_bench geneval hps parti
 ```
-
-## Leaderboard
-
-The leaderboard is [hosted on Hugging Face](https://huggingface.co/spaces/PrunaAI/InferBench/tree/main) with gradio.
-
-To run the dashboard locally, you can use the following command:
-
-```
-python dashboard/app.py
-```
-
-To deploy the dashboard to Hugging Face, you can use the following commands:
-
-First, add the remote:
-
-```
-git remote add hf https://huggingface.co/spaces/PrunaAI/InferBench
-```
-
-Then push the changes of your branch to the remote:
-
+git push origin HEAD:main
 ```
-git push hf $(git rev-parse --abbrev-ref HEAD):main --force
-```

app.py

@@ -1,429 +1,1470 @@
+import asyncio
 import json
 from collections import defaultdict
 from pathlib import Path
 
+# Gradio 5.19's safe_get_lock() returns None on Python 3.12+/3.14 when no
+# event loop exists yet, which breaks /queue/join (pending_message_lock).
+try:
+    asyncio.get_running_loop()
+except RuntimeError:
+    asyncio.set_event_loop(asyncio.new_event_loop())
+
 import gradio as gr
 import pandas as pd
 
 from ui import (
-    render_about,
-    render_benchmarks,
     render_footer,
     render_header,
-    render_home,
+    render_image_workspace,
 )
 
+# Visual tokens from https://www.pruna.ai/ and https://playground.pruna.ai/
 custom_css = """
-.logo {
-    width: 300px;
-    height: auto;
-    max-width: 100%;
-    margin: 0 auto;
-    object-fit: contain;
-    padding-bottom: 0;
-}
-.text {
-    font-size: 16px !important;
-}
-.tabs button,
-.tab-nav button,
-.subtabs button {
-    font-size: 20px;
-    color: #581c87 !important;
-}
-.tabs button.selected,
-.tabs button[aria-selected="true"],
-.tab-nav button.selected,
-.tab-nav button[aria-selected="true"],
-.subtabs button.selected,
-.subtabs button[aria-selected="true"] {
-    color: #ffffff !important;
-    background: #7c3aed !important;
-    border-color: #6d28d9 !important;
-}
-.dark .tabs button,
-.dark .tab-nav button,
-.dark .subtabs button {
-    color: #e9d5ff !important;
-}
-.dark .tabs button.selected,
-.dark .tabs button[aria-selected="true"],
-.dark .tab-nav button.selected,
-.dark .tab-nav button[aria-selected="true"],
-.dark .subtabs button.selected,
-.dark .subtabs button[aria-selected="true"] {
-    color: #ffffff !important;
-    background: #6d28d9 !important;
-}
-.benchmark-catalogue-row {
-    width: 100%;
-    gap: 16px;
-}
-.benchmark-card {
-    width: 100%;
-    max-width: none;
-    min-height: 220px;
-    border: 1px solid rgba(124, 58, 237, 0.45);
-    border-left: 4px solid #7c3aed;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.14);
-    padding: 16px 18px;
-    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.12);
-}
-.benchmark-card:hover {
-    border-color: #5b21b6;
-    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.22);
-}
-.community-footer {
-    margin-top: 24px;
-    padding: 18px 20px;
-    border: 1px solid #c4b5fd;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.16);
-}
-.community-footer h3 {
-    margin: 0 0 10px;
-    color: #581c87;
-    font-size: 1.05rem;
+:root, :host, .dark, :host(.dark) {
+    --pruna-bg-primary: #120b1b;
+    --pruna-bg-card: #171021;
+    --pruna-bg-elevated: #1d1429;
+    --pruna-bg-header: #17101f;
+    --pruna-border: rgba(74, 57, 98, 0.75);
+    --pruna-hairline: rgba(255, 255, 255, 0.08);
+    --pruna-text-primary: #fafafa;
+    --pruna-text-body: #d4d4d4;
+    --pruna-text-muted: #a3a3a3;
+    --pruna-accent: #9334e9;
+    --pruna-accent-bright: #8f35ff;
+    --pruna-lavender: #d8b4fe;
+    --pruna-link: #bf8bff;
+    --pruna-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.18), transparent 55%);
+    --pruna-card-bg: color-mix(in oklab, #1d1429 92%, black 8%);
+    --pruna-card-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
+    --pruna-callout-bg: color-mix(in oklab, #171021 82%, black 18%);
+    --pruna-menu-border: rgba(255, 255, 255, 0.08);
+    --pruna-menu-bg: rgba(255, 255, 255, 0.03);
+    --pruna-menu-hover-bg: rgba(255, 255, 255, 0.05);
+    --pruna-menu-hover-color: #e4e4e7;
+    --pruna-menu-selected-bg: rgba(143, 53, 255, 0.22);
+    --pruna-menu-selected-color: #ffffff;
+    --pruna-tab-hover: #e4e4e7;
+    --pruna-tab-selected: #ffffff;
+    --pruna-input-bg: rgba(255, 255, 255, 0.03);
+    --pruna-input-border: rgba(255, 255, 255, 0.08);
+    --pruna-focus-border: rgba(143, 53, 255, 0.45);
+    --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);
+    --pruna-table-hover: rgba(143, 53, 255, 0.16);
+    --pruna-table-hover-text: #ffffff;
+    --pruna-table-sticky: #17101f;
+    --pruna-table-sticky-hover: #2a1844;
+    --pruna-rank-bg: rgba(143, 53, 255, 0.22);
+    --pruna-rank-ring: 0 0 0 1px rgba(143, 53, 255, 0.45);
+    --pruna-score: #ddd6fe;
+    --pruna-accordion-bg: rgba(255, 255, 255, 0.02);
+    --pruna-accordion-border: rgba(216, 180, 254, 0.15);
+    --pruna-dropdown-hover: #2a1844;
+    color-scheme: dark;
 }
-.community-footer-links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px 14px;
-    align-items: center;
-}
-.dark .community-footer {
-    border-color: #6d28d9;
-    background: rgba(76, 29, 149, 0.35);
-}
-.dark .community-footer h3 {
-    color: #f5f3ff;
-}
-.home-callouts {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-    margin: 8px 0 20px;
-}
-.home-callouts > div {
-    padding: 14px 16px;
-    border: 1px solid #a78bfa;
-    border-radius: 10px;
-    background: #f5f3ff;
+
+.light, :host(.light) {
+    --pruna-bg-primary: #f6f3fa;
+    --pruna-bg-card: #ffffff;
+    --pruna-bg-elevated: #ffffff;
+    --pruna-bg-header: #f3eef8;
+    --pruna-border: rgba(126, 34, 206, 0.16);
+    --pruna-hairline: rgba(24, 24, 27, 0.08);
+    --pruna-text-primary: #18181b;
+    --pruna-text-body: #3f3f46;
+    --pruna-text-muted: #71717a;
+    --pruna-accent: #9334e9;
+    --pruna-accent-bright: #7c22ce;
+    --pruna-lavender: #7e22ce;
+    --pruna-link: #6d28d9;
+    --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.10), transparent 55%);
+    --pruna-card-bg: #ffffff;
+    --pruna-card-shadow: 0 10px 28px rgba(88, 28, 135, 0.08);
+    --pruna-callout-bg: #ffffff;
+    --pruna-menu-border: var(--pruna-border);
+    --pruna-menu-bg: var(--pruna-bg-card);
+    --pruna-menu-hover-bg: rgba(147, 52, 233, 0.06);
+    --pruna-menu-hover-color: var(--pruna-text-primary);
+    --pruna-menu-selected-bg: rgba(147, 52, 233, 0.12);
+    --pruna-menu-selected-color: var(--pruna-accent-bright);
+    --pruna-tab-hover: var(--pruna-text-primary);
+    --pruna-tab-selected: var(--pruna-text-primary);
+    --pruna-input-bg: var(--pruna-bg-card);
+    --pruna-input-border: var(--pruna-border);
+    --pruna-focus-border: rgba(124, 34, 206, 0.45);
+    --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);
+    --pruna-table-hover: rgba(147, 52, 233, 0.08);
+    --pruna-table-hover-text: var(--pruna-text-primary);
+    --pruna-table-sticky: var(--pruna-bg-card);
+    --pruna-table-sticky-hover: #f3e8ff;
+    --pruna-rank-bg: rgba(147, 52, 233, 0.12);
+    --pruna-rank-ring: 0 0 0 1px rgba(147, 52, 233, 0.28);
+    --pruna-score: var(--pruna-accent-bright);
+    --pruna-accordion-bg: var(--pruna-bg-card);
+    --pruna-accordion-border: var(--pruna-border);
+    --pruna-dropdown-hover: #f3e8ff;
+    color-scheme: light;
 }
-.home-callouts span {
-    color: #5b21b6;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
+
+html, body {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: clip;
+    -webkit-tap-highlight-color: transparent;
 }
-.home-callouts strong {
-    display: block;
-    margin-top: 6px;
-    color: #1e1b4b;
-    font-size: 18px;
-    word-break: break-word;
+html, body, .gradio-container, .main {
+    background: var(--pruna-bg-primary) !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
 }
-.home-callouts em {
-    display: block;
-    margin-top: 4px;
-    color: #4c1d95;
-    font-style: normal;
-    font-size: 13px;
+button, a, label, input, select, textarea,
+[role="button"], [role="tab"], [role="radio"],
+.gradio-container * {
+    -webkit-tap-highlight-color: transparent !important;
 }
-.home-benchmark-card {
-    height: 100%;
-    padding: 18px 18px 16px;
-    border: 1px solid #a78bfa;
-    border-left: 4px solid #7c3aed;
-    border-radius: 12px;
-    background: #f5f3ff;
-    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.12);
+
+.gradio-container {
+    --input-radius: 10px;
+    --container-radius: 10px;
+    --block-radius: 10px;
 }
-.home-benchmark-title {
-    color: #1e1b4b;
-    font-size: 1.35rem;
-    font-weight: 700;
+
+/* Subtle depth — not a marketing-site hero glow */
+body, .gradio-container {
+    background-image: var(--pruna-glow) !important;
+    background-attachment: fixed !important;
 }
-.home-benchmark-blurb {
-    margin: 8px 0 14px;
-    color: #312e81;
-    font-size: 0.95rem;
-    line-height: 1.45;
+
+.gradio-container {
+    width: 100% !important;
+    max-width: 1200px !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;
+}
+.gradio-container .main,
+.gradio-container .wrap,
+.gradio-container .contain,
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .row,
+.gradio-container .column,
+.gradio-container .gap,
+.gradio-container .html-container,
+.gradio-container .prose,
+.gradio-container .padded,
+.main-tabs,
+.main-tabs .tab-wrapper,
+.main-tabs .tabitem,
+.leaderboard-controls,
+.workspace-shell,
+.workspace-filters,
+.view-filters {
+    max-width: 100% !important;
 }
-.home-top-label {
-    color: #5b21b6;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
+
+/* —— App header (P-Bench only) —— */
+.app-header-host,
+.app-header-host .html-container,
+.app-header-host .prose,
+.app-header-host.block,
+.app-header-host .padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 auto !important;
+    width: 100% !important;
+    max-width: none !important;
+    display: block !important;
+    text-align: center !important;
+    overflow: visible !important;
 }
-.home-top-list {
-    list-style: none;
+.app-header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
     margin: 8px 0 0;
-    padding: 0;
+    padding: 4px 0 10px;
+    text-align: center;
 }
-.home-top-list li {
+.app-header-bar {
     display: grid;
-    grid-template-columns: 28px 1fr auto;
-    gap: 10px;
+    grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
     align-items: center;
-    padding: 8px 0;
-    border-bottom: 1px solid #ddd6fe;
-    color: #1e1b4b;
-}
-.home-rank {
-    width: 28px;
-    height: 28px;
-    border-radius: 999px;
-    background: #ede9fe;
-    color: #5b21b6;
-    font-weight: 700;
-    font-size: 13px;
-    display: inline-flex;
+    width: 100%;
+    column-gap: 8px;
+}
+.app-header .theme-toggle,
+button.theme-toggle {
+    position: static !important;
+    top: auto;
+    right: auto;
+    grid-column: 3;
+    justify-self: end;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    min-height: 36px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 1px solid var(--pruna-menu-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-menu-bg) !important;
+    color: var(--pruna-text-muted) !important;
+    box-shadow: none !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    box-sizing: border-box !important;
+    font: inherit !important;
+    line-height: 0 !important;
+    cursor: pointer;
+    z-index: 6;
+}
+.app-header .theme-toggle:hover,
+.app-header .theme-toggle:active,
+button.theme-toggle:hover,
+button.theme-toggle:active {
+    color: var(--pruna-menu-hover-color) !important;
+    background: var(--pruna-menu-hover-bg) !important;
+    border-color: var(--pruna-menu-border) !important;
+    box-shadow: none !important;
+}
+.app-header .theme-toggle:focus,
+button.theme-toggle:focus {
+    outline: none !important;
+}
+.app-header .theme-toggle:focus-visible,
+button.theme-toggle:focus-visible {
+    color: var(--pruna-menu-hover-color) !important;
+    background: var(--pruna-menu-hover-bg) !important;
+    border-color: var(--pruna-focus-border) !important;
+    box-shadow: var(--pruna-focus-ring) !important;
+}
+.app-header .theme-toggle svg,
+button.theme-toggle svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+.app-header .theme-toggle .theme-icon-sun,
+button.theme-toggle .theme-icon-sun { display: block !important; }
+.app-header .theme-toggle .theme-icon-moon,
+button.theme-toggle .theme-icon-moon { display: none !important; }
+.app-header .theme-toggle[data-mode="light"] .theme-icon-sun,
+button.theme-toggle[data-mode="light"] .theme-icon-sun { display: none !important; }
+.app-header .theme-toggle[data-mode="light"] .theme-icon-moon,
+button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !important; }
+.app-header-brand {
+    display: inline-flex !important;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    gap: 12px;
+    grid-column: 2;
+    justify-self: center;
+    width: auto !important;
+    max-width: 100%;
+    margin: 0;
 }
-.home-model {
-    font-weight: 600;
-    word-break: break-word;
-    color: #1e1b4b;
-}
-.home-score {
-    font-variant-numeric: tabular-nums;
-    color: #4c1d95;
-    font-weight: 600;
-}
-.home-empty {
-    color: #4c1d95;
+.app-header-logo {
+    display: block !important;
+    width: 44px !important;
+    height: 52px !important;
+    margin: 0 !important;
+    object-fit: contain;
+    flex: 0 0 auto;
 }
-.dark .home-callouts > div,
-.dark .home-benchmark-card {
-    border-color: #7c3aed;
-    background: #1e1b4b;
+
+/* —— Page tabs: centered underline nav —— */
+.workspace-shell,
+.workspace-shell.block,
+.workspace-shell.column,
+.workspace-shell.gap {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.workspace-shell > .tabs,
+.workspace-shell > .main-tabs,
+.workspace-shell > .block:not(.workspace-filters),
+.workspace-shell .tabs.main-tabs {
+    display: contents !important;
+}
+.workspace-filters {
+    order: 2 !important;
+}
+.main-tabs .tabitem {
+    order: 3 !important;
+}
+.tabs {
+    gap: 0 !important;
+}
+.main-tabs > .tab-wrapper {
+    order: 1 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 0 16px !important;
+    justify-content: center !important;
+    width: 100% !important;
 }
-.dark .home-callouts span,
-.dark .home-top-label,
-.dark .home-rank {
-    color: #c4b5fd;
+.main-tabs .tab-container {
+    height: auto !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    gap: 2px;
+}
+.main-tabs .tab-container::after {
+    background: var(--pruna-hairline) !important;
+}
+.main-tabs .tab-container > button {
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    color: var(--pruna-text-muted) !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 12px 20px !important;
+    min-height: 44px !important;
+    height: auto !important;
+}
+.main-tabs .tab-container > button:hover:not(.selected),
+.main-tabs .tab-container > button:active:not(.selected) {
+    color: var(--pruna-tab-hover) !important;
+    background: transparent !important;
+}
+.main-tabs .tab-container > button.selected,
+.main-tabs .tab-container > button[aria-selected="true"] {
+    color: var(--pruna-tab-selected) !important;
+    background: transparent !important;
+}
+.main-tabs .tab-container > button:disabled,
+.main-tabs .tab-container > button[disabled] {
+    opacity: 0.4 !important;
+    color: var(--pruna-text-muted) !important;
+    cursor: not-allowed !important;
+}
+.main-tabs .tab-container > button.selected::after,
+.main-tabs .tab-container > button[aria-selected="true"]::after {
+    background: var(--pruna-accent-bright) !important;
+    height: 2px !important;
+}
+.main-tabs .tabitem {
+    padding: 8px 0 0 !important;
+    border-radius: 0 !important;
+    overflow: visible !important;
 }
-.dark .home-rank {
-    background: #312e81;
+
+/* —— About: two columns on desktop, stacked on phone —— */
+.about-layout,
+.about-layout.row,
+.about-layout .form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: flex-start !important;
+    gap: 8px 40px !important;
+    width: 100% !important;
 }
-.dark .home-callouts strong,
-.dark .home-benchmark-title,
-.dark .home-model,
-.dark .home-top-list li {
-    color: #faf5ff;
+.about-layout > .about-col,
+.about-layout .form > .about-col {
+    flex: 1 1 340px !important;
+    min-width: 280px !important;
+    max-width: 100% !important;
+}
+.about-copy,
+.about-copy.block,
+.about-copy .prose,
+.about-copy.prose,
+.about-copy.padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-wrap: break-word !important;
+    word-break: break-word !important;
 }
-.dark .home-callouts em,
-.dark .home-benchmark-blurb,
-.dark .home-score,
-.dark .home-empty {
-    color: #ddd6fe;
+.about-copy ol,
+.about-copy ul,
+.about-copy .prose ol,
+.about-copy .prose ul {
+    padding-left: 1.25rem !important;
+    margin: 0 0 0.8rem !important;
 }
-.dark .home-top-list li {
-    border-bottom-color: #4c1d95;
+.about-copy li,
+.about-copy .prose li {
+    overflow-wrap: break-word;
 }
+
 @media (max-width: 700px) {
-    .home-callouts {
-        grid-template-columns: 1fr;
+    .gradio-container {
+        padding-left: 12px !important;
+        padding-right: 12px !important;
+    }
+    .gradio-container .block,
+    .gradio-container .form,
+    .gradio-container .row,
+    .gradio-container .column,
+    .gradio-container .wrap,
+    .leaderboard-controls,
+    .view-filters {
+        min-width: 0 !important;
+        max-width: 100% !important;
+    }
+    .app-header {
+        padding: 4px 0 8px;
+        margin: 4px 0 0;
+    }
+    .app-header-logo {
+        width: 36px !important;
+        height: 42px !important;
+    }
+    .app-header-brand h1,
+    .gradio-container .app-header-brand h1 {
+        font-size: 1.55rem !important;
+    }
+    .app-header-tagline {
+        font-size: 0.88rem !important;
+        padding: 0 8px !important;
+    }
+    .main-tabs > .tab-wrapper {
+        margin: 4px 0 14px !important;
+    }
+    .main-tabs .tab-container {
+        flex-wrap: wrap !important;
+        justify-content: center !important;
+        gap: 0 !important;
+    }
+    .main-tabs .tab-container > button {
+        padding: 10px 12px !important;
+        font-size: 0.88rem !important;
+        min-height: 40px !important;
+    }
+    .about-layout,
+    .about-layout.row,
+    .about-layout .form {
+        flex-direction: column !important;
+        flex-wrap: nowrap !important;
+        gap: 8px !important;
+    }
+    .about-layout > .about-col,
+    .about-layout > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+    }
+    .about-copy h1,
+    .about-copy .prose h1 {
+        font-size: 1.3rem !important;
+    }
+    .about-copy h2,
+    .about-copy .prose h2 {
+        margin-top: 1.25rem !important;
+        font-size: 1.12rem !important;
+    }
+    .community-footer-links {
+        gap: 10px 14px;
+    }
+    .leaderboard-controls,
+    .leaderboard-controls.row,
+    .leaderboard-controls .form,
+    .view-filters,
+    .view-filters.row,
+    .view-filters .form {
+        flex-direction: column !important;
+        align-items: stretch !important;
+    }
+    .leaderboard-controls > div,
+    .leaderboard-controls .form > div,
+    .view-filters > div,
+    .view-filters .form > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+    .ranking-table-scroll {
+        max-height: min(75vh, 640px);
+        width: 100%;
+    }
+    .ranking-table th,
+    .ranking-table td,
+    .prose .ranking-table th,
+    .prose .ranking-table td {
+        padding: 8px 10px !important;
+    }
+    .ranking-table .rank,
+    .prose .ranking-table .rank,
+    .ranking-table th.rank {
+        position: sticky !important;
+        left: 0 !important;
+        width: 2.4rem;
+        min-width: 2.4rem;
+    }
+    .ranking-table .model-cell,
+    .prose .ranking-table .model-cell,
+    .ranking-table th.model-cell {
+        position: sticky !important;
+        left: 2.4rem !important;
+        min-width: 108px;
+        max-width: 36vw;
+    }
+    .ranking-table .model-cell strong {
+        white-space: nowrap;
+    }
+    .compare-controls,
+    .compare-controls.row,
+    .compare-controls .form {
+        flex-direction: column !important;
+        flex-wrap: nowrap !important;
+        flex: 0 0 auto !important;
+        align-items: stretch !important;
+        align-content: flex-start !important;
+        height: auto !important;
+        min-height: 0 !important;
+        gap: 10px !important;
+        margin-bottom: 12px !important;
+    }
+    .compare-controls .compare-models,
+    .compare-controls .compare-prompt-count,
+    .compare-controls .compare-shuffle,
+    .compare-controls .form > div {
+        flex: 0 0 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 0 !important;
+        height: auto !important;
+        min-height: 0 !important;
+        align-self: stretch !important;
+    }
+    .compare-controls .compare-prompt-count {
+        max-width: 100% !important;
+    }
+    .compare-controls .compare-models .wrap,
+    .compare-controls .compare-models .wrap-inner {
+        height: auto !important;
+        min-height: 40px !important;
+    }
+    .compare-controls .compare-shuffle,
+    .compare-controls .compare-shuffle button {
+        width: 100% !important;
+        align-self: stretch !important;
+        margin-top: 0 !important;
+    }
+    .compare-row {
+        grid-template-columns: 1fr !important;
+    }
+    .compare-prompt-meta {
+        flex-wrap: wrap;
+    }
+    .pareto-layout,
+    .pareto-layout.row,
+    .pareto-layout .form {
+        flex-direction: column !important;
+    }
+    .pareto-layout > .pareto-col,
+    .pareto-layout > div,
+    .pareto-layout .form > div {
+        flex: 1 1 auto !important;
+        width: 100% !important;
     }
 }
-.pareto-plot {
-    width: 100%;
+
+/* —— Workspace filters (dataset / metric / models) —— */
+.workspace-filters,
+.workspace-filters.block,
+.workspace-filters.column,
+.workspace-filters.gap {
+    margin: 0 0 12px;
+    padding: 0 !important;
+    gap: 12px !important;
+    overflow: visible !important;
+}
+.view-filters {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: end !important;
+    gap: 12px !important;
+    margin: 0;
+    overflow: visible !important;
+}
+.view-filters > div,
+.view-filters > .block,
+.view-filters > .form {
+    flex: 1 1 0 !important;
+    min-width: 0 !important;
+}
+.view-filters > .block,
+.view-filters .form,
+.view-filters .block {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    overflow: visible !important;
+    --block-border-width: 0 !important;
+}
+.view-filters label {
+    display: block !important;
+    margin: 0 !important;
+    padding: 0 0 8px !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    line-height: 1.2 !important;
+}
+.view-filters .wrap {
+    min-width: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+}
+.view-filters .wrap-inner {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    min-height: 40px !important;
+    height: 40px !important;
+    padding: 0 10px !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+}
+.view-filters .secondary-wrap {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    height: 40px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+}
+.view-filters .filter-chips .wrap-inner {
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--pruna-border) transparent;
+}
+.view-filters .filter-chips .secondary-wrap {
+    min-width: 2.5rem !important;
+}
+.view-filters .filter-chips .wrap-inner::-webkit-scrollbar {
+    height: 6px;
+}
+.view-filters .filter-chips .wrap-inner::-webkit-scrollbar-thumb {
+    background: var(--pruna-border);
+    border-radius: 99px;
+}
+.view-filters .filter-chips .token {
+    flex: 0 0 auto !important;
+    white-space: nowrap !important;
+    word-break: keep-all !important;
+}
+.view-filters .filter-chips .token span {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 14rem;
+}
+.view-filters .token:empty {
+    display: none !important;
 }
-.pareto-plot .plotly {
+.view-filters input {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    min-height: 28px !important;
+    height: 28px !important;
     width: 100% !important;
+    min-width: 0 !important;
+    padding: 0 4px !important;
+    line-height: 28px !important;
+}
+.view-filters .dropdown-arrow,
+.view-filters .icon-wrap {
+    flex: 0 0 auto !important;
+    align-self: center !important;
+    margin-left: auto !important;
+}
+.view-title,
+.view-title.block,
+.view-title .padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 0 8px !important;
+}
+.view-title h1,
+.view-title .prose h1,
+.gradio-container .view-title h1 {
+    margin: 0.35rem 0 0.4rem !important;
+    font-size: 1.45rem !important;
+}
+.filter-help-host,
+.filter-help-host.block,
+.filter-help-host .padded,
+.filter-help-host .html-container,
+.filter-help-host .prose {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.view-help-host,
+.view-help-host.block,
+.view-help-host .padded,
+.view-help-host .html-container,
+.view-help-host .prose {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 0 10px !important;
+}
+.filter-help,
+.prose .filter-help,
+.view-help,
+.prose .view-help {
+    margin: 0 !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.95rem !important;
+    line-height: 1.45 !important;
+    font-weight: 400 !important;
+}
+.view-filters span[data-testid="block-info"],
+.view-filters .info,
+.view-filters .block-info {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.75rem !important;
+    line-height: 1.35 !important;
+    margin-top: 4px !important;
 }
-.pareto-plot .js-plotly-plot,
-.pareto-plot .plot-container {
+.compare-prompt-block {
+    border: 1px solid var(--pruna-border) !important;
+    border-radius: 16px !important;
+    background: var(--pruna-card-bg) !important;
+    box-shadow: var(--pruna-card-shadow) !important;
+}
+
+/* Page footer — flat community strip + quiet citation accordion */
+.page-footer-host,
+.page-footer-host .html-container,
+.page-footer-host .prose,
+.page-footer-host.block,
+.page-footer-host .padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
     width: 100% !important;
+    max-width: none !important;
+    overflow: visible !important;
+}
+.page-footer {
+    margin: 32px 0 16px;
+    padding: 20px 0 0;
+    border-top: 1px solid var(--pruna-hairline);
+}
+.page-footer h3 {
+    margin: 0 0 10px !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    text-transform: none !important;
+    color: var(--pruna-text-primary) !important;
 }
-/* Hide the Plotly toolbar so it doesn't cover points in the top-right. */
-.pareto-plot .modebar {
-    display: none !important;
+.community-footer-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 16px;
+    align-items: center;
 }
-.leaderboard-summary {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 12px;
-    margin: 8px 0 16px;
+.community-footer-links a {
+    color: var(--pruna-text-muted) !important;
+    text-decoration: none !important;
+    font-size: 0.9rem !important;
+    font-weight: 500 !important;
 }
-.leaderboard-summary > div {
-    padding: 14px 16px;
-    border: 1px solid #c4b5fd;
-    border-radius: 10px;
-    background: rgba(139, 92, 246, 0.14);
+.community-footer-links a:hover {
+    color: var(--pruna-link) !important;
 }
-.leaderboard-summary span,
-.results-heading {
-    color: #7e22ce;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
+
+/* Citation accordion — full-width control, not a section heading */
+.citation-accordion {
+    margin: 0 0 28px !important;
+}
+.citation-accordion,
+.citation-accordion.block {
+    border: 1px solid var(--pruna-accordion-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-accordion-bg) !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+}
+.citation-accordion > .label-wrap,
+.citation-accordion .label-wrap {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 11px 14px !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+    color: var(--pruna-text-primary) !important;
+    letter-spacing: -0.01em !important;
+}
+.citation-accordion > .label-wrap:hover,
+.citation-accordion .label-wrap:hover {
+    background: var(--pruna-menu-hover-bg) !important;
+}
+.citation-accordion > .label-wrap span,
+.citation-accordion .label-wrap span {
+    color: var(--pruna-text-primary) !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+}
+.citation-accordion .icon,
+.citation-accordion .label-wrap .icon {
+    color: var(--pruna-text-muted) !important;
+    opacity: 0.9;
+}
+.citation-accordion .prose,
+.citation-accordion .markdown,
+.citation-accordion pre,
+.citation-accordion code {
+    color: var(--pruna-text-muted) !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.citation-accordion .wrap,
+.citation-accordion > .wrap {
+    border-top: 1px solid var(--pruna-hairline) !important;
+    padding: 4px 14px 12px !important;
+    background: transparent !important;
+}
+.citation-accordion pre {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.8rem !important;
+    line-height: 1.55 !important;
+    overflow-x: auto;
 }
-.leaderboard-summary strong {
-    display: block;
-    margin-top: 4px;
-    color: #581c87;
-    font-size: 22px;
+
+.pareto-plot,
+.pareto-plot.block,
+.pareto-plot .plotly,
+.pareto-plot .js-plotly-plot,
+.pareto-plot .plot-container,
+.pareto-plot .svg-container,
+.pareto-plot .main-svg {
+    width: 100% !important;
+    max-width: 100% !important;
+    background: transparent !important;
+    border-color: var(--pruna-border) !important;
 }
+.pareto-plot .modebar { display: none !important; }
+
 .leaderboard-controls {
-    align-items: end;
-    margin-bottom: 8px;
-}
-.ranking-table-host {
-    width: 100%;
-}
-.ranking-table {
-    margin-top: 4px;
-    width: 100%;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: end !important;
+    gap: 10px !important;
+    margin-bottom: 12px;
+    overflow: visible !important;
+}
+.leaderboard-controls > div {
+    min-width: 0 !important;
+}
+.leaderboard-controls > .block,
+.leaderboard-controls .form,
+.leaderboard-controls .block {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    --block-border-width: 0 !important;
+}
+.leaderboard-controls label {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+}
+.leaderboard-controls textarea {
+    min-height: 40px !important;
+    height: 40px !important;
+    padding: 0 12px !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    box-shadow: none !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.9rem !important;
+    line-height: 40px !important;
+    resize: none !important;
+}
+.leaderboard-controls textarea:focus {
+    border-color: var(--pruna-focus-border) !important;
+    outline: none !important;
+    box-shadow: var(--pruna-focus-ring) !important;
+}
+.leaderboard-controls .wrap {
+    min-height: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+}
+.leaderboard-controls .wrap-inner {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    min-height: 40px !important;
+    height: auto !important;
+    padding: 4px 10px !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+}
+.leaderboard-controls .secondary-wrap {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.leaderboard-controls .token {
+    display: inline-flex !important;
+    align-items: center !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+}
+.leaderboard-controls .token:empty {
+    display: none !important;
 }
-.results-heading {
-    display: flex;
-    justify-content: space-between;
-    margin: 16px 0 8px;
-    text-transform: uppercase;
+.leaderboard-controls .dropdown-arrow,
+.leaderboard-controls .icon-wrap {
+    flex: 0 0 auto !important;
+    align-self: center !important;
+    margin-left: auto !important;
+}
+.ranking-table-host,
+.ranking-table-host .html-container,
+.ranking-table-host .prose,
+.ranking-table-host.block,
+.ranking-table-host .padded,
+.ranking-table-host.prose {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    border: none !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow: hidden !important;
+    --block-border-width: 0 !important;
 }
 .ranking-table-scroll {
+    border: 1px solid var(--pruna-menu-border);
+    border-radius: 12px;
+    background: var(--pruna-menu-bg);
+    box-shadow: none;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    max-height: min(70vh, 720px);
     overflow-x: auto;
-    border: 1px solid #c4b5fd;
-    border-radius: 10px;
-    background: rgba(139, 92, 246, 0.12);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
 }
-.ranking-table table {
+.ranking-table,
+.prose .ranking-table {
     width: 100%;
-    min-width: 800px;
-    border-collapse: collapse;
-    color: #581c87;
-    font-size: 14px;
-}
-.ranking-table th {
-    padding: 11px 14px;
-    border-bottom: 1px solid #c4b5fd;
-    color: #7e22ce;
-    font-size: 11px;
+    margin: 0 !important;
+    overflow: visible;
+}
+.ranking-table table,
+.prose .ranking-table table {
+    display: table !important;
+    width: max-content !important;
+    min-width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    color: var(--pruna-text-body) !important;
+    font-size: 13px !important;
+    line-height: 1.35 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+}
+.ranking-table thead { display: table-header-group !important; }
+.ranking-table tbody { display: table-row-group !important; }
+.ranking-table tr { display: table-row !important; }
+.ranking-table th,
+.ranking-table td,
+.prose .ranking-table th,
+.prose .ranking-table td {
+    display: table-cell !important;
+    vertical-align: middle !important;
+    padding: 11px 14px !important;
+    border: 0 !important;
+    border-bottom: 1px solid var(--pruna-hairline) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+.ranking-table th,
+.prose .ranking-table th {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background: var(--pruna-bg-header) !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
     letter-spacing: 0.04em;
     text-align: left;
     text-transform: uppercase;
-}
-.ranking-table th.sortable-col {
-    cursor: pointer;
-    user-select: none;
     white-space: nowrap;
+    box-shadow: 0 1px 0 var(--pruna-hairline) !important;
 }
-.ranking-table th.sortable-col:hover {
-    color: #4c1d95;
-}
+.ranking-table th.sortable-col { cursor: pointer; user-select: none; }
+.ranking-table th.sortable-col:hover { color: var(--pruna-lavender) !important; }
 .ranking-table th.sortable-col.sorted-asc::after,
 .ranking-table th.sortable-col.sorted-desc::after {
     margin-left: 0.35em;
     font-size: 0.85em;
     opacity: 0.85;
 }
-.ranking-table th.sortable-col.sorted-asc::after {
-    content: "▲";
-}
-.ranking-table th.sortable-col.sorted-desc::after {
-    content: "▼";
-}
-.ranking-table td {
-    padding: 13px 14px;
-    border-bottom: 1px solid #e9d5ff;
-}
-.ranking-table tbody tr:last-child td {
-    border-bottom: 0;
-}
-.ranking-table tbody tr:hover {
-    background: #6d28d9;
+.ranking-table th.sortable-col.sorted-asc::after { content: "▲"; }
+.ranking-table th.sortable-col.sorted-desc::after { content: "▼"; }
+.ranking-table tbody tr:last-child td { border-bottom: 0 !important; }
+.ranking-table tbody tr:hover td {
+    background: var(--pruna-table-hover) !important;
 }
 .ranking-table tbody tr:hover td,
 .ranking-table tbody tr:hover .rank,
 .ranking-table tbody tr:hover .metric-score,
+.ranking-table tbody tr:hover .text-cell,
 .ranking-table tbody tr:hover .model-cell strong,
-.ranking-table tbody tr:hover .model-cell span {
-    color: #ffffff;
+.ranking-table tbody tr:hover .model-cell span { color: var(--pruna-table-hover-text) !important; }
+.ranking-table .rank,
+.prose .ranking-table .rank {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 3.25rem;
+    min-width: 3.25rem;
+    color: var(--pruna-lavender) !important;
+    font-weight: 700 !important;
+    text-align: center;
+    background: var(--pruna-table-sticky) !important;
 }
-.ranking-table .rank {
-    color: #7c3aed;
-    font-weight: 700;
+.ranking-table th.rank,
+.prose .ranking-table th.rank {
+    top: 0;
+    left: 0;
+    z-index: 5;
+    text-align: center;
+    background: var(--pruna-bg-header) !important;
+}
+.ranking-table .model-cell,
+.prose .ranking-table .model-cell {
+    position: sticky;
+    left: 3.25rem;
+    z-index: 1;
+    min-width: 180px;
+    max-width: 260px;
+    background: var(--pruna-table-sticky) !important;
+}
+.ranking-table th.model-cell,
+.prose .ranking-table th.model-cell {
+    top: 0;
+    left: 3.25rem;
+    z-index: 5;
+    background: var(--pruna-bg-header) !important;
+}
+.ranking-table tbody tr:hover .rank,
+.ranking-table tbody tr:hover .model-cell {
+    background: var(--pruna-table-sticky-hover) !important;
 }
 .ranking-table .model-cell strong,
-.ranking-table .model-cell span {
-    display: block;
+.ranking-table .model-cell span { display: block; }
+.ranking-table .model-cell strong {
+    color: var(--pruna-text-primary) !important;
+    font-weight: 600 !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .ranking-table .model-cell span {
     margin-top: 3px;
-    color: #9333ea;
+    color: var(--pruna-text-muted) !important;
     font-size: 12px;
 }
-.ranking-table .metric-score {
-    color: #4c1d95;
+.ranking-table .text-cell,
+.prose .ranking-table .text-cell {
+    color: var(--pruna-text-muted) !important;
+    font-weight: 500 !important;
+    white-space: nowrap;
+}
+.ranking-table .metric-score,
+.prose .ranking-table .metric-score {
+    color: var(--pruna-text-primary) !important;
     font-variant-numeric: tabular-nums;
-    font-weight: 700;
+    font-weight: 600 !important;
+    text-align: right;
+    white-space: nowrap;
 }
+.ranking-table th.metric-score { text-align: right; }
 .ranking-table .empty-state {
-    color: #9333ea;
+    color: var(--pruna-text-muted);
     padding: 32px;
     text-align: center;
 }
-@media (prefers-color-scheme: dark) {
-    .leaderboard-summary > div,
-    .ranking-table-scroll {
-        border-color: rgba(221, 214, 254, 0.45);
-    }
-    .leaderboard-summary span,
-    .results-heading,
-    .ranking-table th,
-    .ranking-table .model-cell span,
-    .ranking-table .empty-state {
-        color: #ddd6fe;
-    }
-    .leaderboard-summary strong,
-    .ranking-table table,
-    .ranking-table .rank,
-    .ranking-table .metric-score {
-        color: #f5f3ff;
-    }
-    .ranking-table td {
-        border-bottom-color: rgba(221, 214, 254, 0.2);
-    }
+
+.compare-samples-help { color: var(--pruna-text-body); margin-bottom: 8px; }
+.compare-controls,
+.compare-controls.row,
+.compare-controls.column,
+.compare-controls .form {
+    display: flex !important;
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch !important;
+    align-content: flex-start !important;
+    justify-content: flex-start !important;
+    gap: 12px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    flex-grow: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    margin-bottom: 16px;
+}
+.compare-controls > .block,
+.compare-controls .form,
+.compare-controls .block,
+.compare-controls .compare-models,
+.compare-controls .compare-prompt-count {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    --block-border-width: 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+}
+.compare-controls label,
+.compare-controls span[data-testid="block-info"] {
+    display: block !important;
+    margin: 0 0 6px !important;
+    padding: 0 !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    line-height: 1.2 !important;
+}
+.compare-controls .compare-models span[data-testid="block-info"] {
+    min-height: 1.15rem;
+}
+.compare-controls .compare-models {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
 }
-.dark .leaderboard-summary > div,
-.dark .ranking-table-scroll {
-    border-color: rgba(221, 214, 254, 0.45);
+.compare-controls .compare-prompt-count {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
 }
-.dark .leaderboard-summary span,
-.dark .results-heading,
-.dark .ranking-table th,
-.dark .ranking-table .model-cell span,
-.dark .ranking-table .empty-state {
-    color: #ddd6fe;
+.compare-controls .compare-shuffle {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+}
+.compare-controls .compare-models .wrap,
+.compare-controls .compare-models .wrap-inner {
+    min-height: 40px !important;
+    height: auto !important;
+    overflow: hidden !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-models .wrap-inner {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    width: 100% !important;
+    padding: 4px 8px !important;
+}
+.compare-controls .compare-models .secondary-wrap {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px !important;
+    flex: 1 1 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-models .token {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: auto !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    white-space: nowrap !important;
+}
+.compare-controls .compare-models .token:empty {
+    display: none !important;
 }
-.dark .leaderboard-summary strong,
-.dark .ranking-table table,
-.dark .ranking-table .rank,
-.dark .ranking-table .metric-score {
-    color: #f5f3ff;
+.compare-controls .compare-models input {
+    width: auto !important;
+    min-width: 2.5rem !important;
+    flex: 1 1 5rem !important;
+    height: 28px !important;
+    min-height: 28px !important;
+}
+.compare-controls .compare-models .dropdown-arrow,
+.compare-controls .compare-models .icon-wrap {
+    flex: 0 0 auto !important;
+    align-self: center !important;
+    margin-left: auto !important;
+}
+.compare-controls .compare-prompt-count .wrap {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto 40px;
+    gap: 6px 10px;
+    align-items: center;
+    width: 100%;
+    min-height: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-prompt-count .head {
+    display: contents;
+    margin: 0 !important;
+}
+.compare-controls .compare-prompt-count .head label {
+    grid-column: 1 / -1;
+    grid-row: 1;
+}
+.compare-controls .compare-prompt-count .tab-like-container {
+    grid-column: 2;
+    grid-row: 2;
+    height: 40px !important;
+    min-height: 40px !important;
+    align-self: stretch;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    overflow: hidden;
+}
+.compare-controls .compare-prompt-count .slider_input_container {
+    grid-column: 1;
+    grid-row: 2;
+    height: 40px !important;
+    min-height: 40px !important;
+    margin: 0 !important;
+    gap: 0 !important;
+}
+.compare-controls .compare-prompt-count .min_value,
+.compare-controls .compare-prompt-count .max_value {
+    display: none !important;
 }
-.compare-samples-help {
-    color: #6b21a8;
-    margin-bottom: 8px;
+.compare-controls .compare-prompt-count input[type="range"] {
+    height: 40px !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-prompt-count input[type="number"] {
+    height: 40px !important;
+    min-height: 40px !important;
+    min-width: 2.5rem !important;
+    margin: 0 !important;
+    padding: 0 8px !important;
+    line-height: 40px !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-shuffle.block:not(button) {
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
+.compare-controls button.compare-shuffle,
+.compare-controls .compare-shuffle button,
+.compare-controls .compare-shuffle button.primary,
+.compare-controls .compare-shuffle button.secondary {
+    display: inline-flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    height: 44px !important;
+    min-height: 44px !important;
+    margin: 0 !important;
+    padding: 0 16px !important;
+    border-radius: 10px !important;
+    align-self: stretch !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    background: var(--pruna-accent) !important;
+    border: 1px solid color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    outline: none !important;
+}
+.compare-controls button.compare-shuffle:hover,
+.compare-controls button.compare-shuffle:active,
+.compare-controls button.compare-shuffle:focus,
+.compare-controls button.compare-shuffle:focus-visible,
+.compare-controls .compare-shuffle button:hover,
+.compare-controls .compare-shuffle button:active,
+.compare-controls .compare-shuffle button:focus,
+.compare-controls .compare-shuffle button:focus-visible {
+    background: var(--pruna-accent) !important;
+    border-color: color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    outline: none !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+@media (min-width: 701px) {
+    .compare-controls,
+    .compare-controls.row,
+    .compare-controls.column,
+    .compare-controls .form {
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        align-items: flex-end !important;
+    }
+    .compare-controls .compare-models {
+        flex: 4 1 0 !important;
+        width: auto !important;
+        max-width: none !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls .compare-prompt-count {
+        flex: 1 1 200px !important;
+        width: auto !important;
+        min-width: 180px !important;
+        max-width: 280px !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls .compare-shuffle,
+    .compare-controls .compare-shuffle.block:not(button) {
+        flex: 0 0 auto !important;
+        width: auto !important;
+        max-width: none !important;
+        align-self: flex-end !important;
+    }
+    .compare-controls button.compare-shuffle,
+    .compare-controls .compare-shuffle button {
+        width: auto !important;
+        min-width: 10.5rem !important;
+    }
 }
 .compare-prompt-block {
     margin: 0 0 22px;
     padding: 14px 16px;
-    border: 1px solid #c4b5fd;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.10);
+    background: var(--pruna-callout-bg) !important;
 }
 .compare-prompt-meta {
     display: flex;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 8px;
-    color: #7e22ce;
+    color: var(--pruna-text-muted);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -431,20 +1472,46 @@ custom_css = """
 }
 .compare-prompt-text {
     margin: 0 0 14px;
-    color: #3b0764;
+    color: var(--pruna-text-body);
     font-size: 15px;
     line-height: 1.45;
 }
-.compare-row {
-    display: grid;
-    gap: 12px;
+.compare-gallery,
+.compare-gallery.block,
+.compare-gallery .html-container,
+.compare-gallery .prose {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow-x: hidden !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.compare-row { display: grid; gap: 12px; min-width: 0; width: 100%; }
+.compare-prompt-text { overflow-wrap: anywhere; }
+.pareto-layout,
+.pareto-layout.row,
+.pareto-layout .form {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: stretch !important;
+    gap: 16px !important;
+    width: 100% !important;
+    max-width: 100% !important;
 }
-.compare-cell {
-    min-width: 0;
+.pareto-layout > .pareto-col,
+.pareto-layout .form > .pareto-col {
+    flex: 1 1 360px !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
 }
+.compare-cell { min-width: 0; }
 .compare-model-label {
     margin-bottom: 6px;
-    color: #5b21b6;
+    color: var(--pruna-lavender);
     font-size: 13px;
     font-weight: 700;
     word-break: break-word;
@@ -454,57 +1521,341 @@ custom_css = """
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
-    border-radius: 10px;
-    border: 1px solid #ddd6fe;
-    background: #f5f3ff;
+    border-radius: 12px;
+    border: 1px solid var(--pruna-border);
+    background: var(--pruna-bg-elevated);
 }
-.compare-empty {
-    padding: 18px;
-    border: 1px dashed #c4b5fd;
+.compare-empty,
+.pareto-note-copy {
+    margin: 0;
+    padding: 14px 16px;
+    background: var(--pruna-callout-bg, var(--pruna-bg-card));
+    border: 1px dashed color-mix(in oklab, var(--pruna-border) 70%, transparent);
     border-radius: 10px;
-    color: #6b21a8;
-    text-align: center;
+    color: var(--pruna-text-muted);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    text-align: left;
 }
-.dark .compare-samples-help,
-.dark .compare-prompt-meta,
-.dark .compare-model-label,
-.dark .compare-empty {
-    color: #e9d5ff;
+
+/*
+  Type scale (playground-like):
+  product title > page h1 > section h2/h3 > meta labels > body
+  Uppercase lavender is reserved for meta labels only — not section titles.
+*/
+.app-header-brand h1,
+.prose .app-header-brand h1,
+.gradio-container .app-header-brand h1,
+.app-header .app-header-brand h1 {
+    display: block !important;
+    width: max-content !important;
+    max-width: none !important;
+    flex: 0 0 auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    text-align: center !important;
+    font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.035em;
+    line-height: 1 !important;
+    color: var(--pruna-text-primary) !important;
+}
+.app-header-tagline,
+.prose .app-header-tagline,
+.gradio-container .app-header-tagline,
+.prose p.app-header-tagline {
+    display: block !important;
+    width: 100% !important;
+    margin: 8px 0 0 !important;
+    padding: 0 !important;
+    text-align: center !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.95rem !important;
+    line-height: 1.45 !important;
+    font-weight: 400 !important;
 }
-.dark .compare-prompt-block {
-    border-color: #6d28d9;
-    background: rgba(76, 29, 149, 0.35);
+
+.gradio-container h1,
+.markdown h1, .md h1, .prose h1 {
+    margin: 0 0 0.65rem !important;
+    padding: 0 !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.03em !important;
+    line-height: 1.2 !important;
+    text-transform: none !important;
+}
+.gradio-container h2,
+.markdown h2, .md h2, .prose h2 {
+    margin: 1.75rem 0 0.75rem !important;
+    padding: 0 !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.25rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em !important;
+    line-height: 1.3 !important;
+    text-transform: none !important;
+}
+.gradio-container h3,
+.markdown h3, .md h3, .prose h3 {
+    margin: 1.35rem 0 0.5rem !important;
+    padding: 0 !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    line-height: 1.35 !important;
+    text-transform: none !important;
+}
+.gradio-container h4,
+.markdown h4, .md h4, .prose h4 {
+    margin: 1rem 0 0.4rem !important;
+    padding: 0 !important;
+    color: var(--pruna-text-body) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    line-height: 1.35 !important;
+    text-transform: none !important;
 }
-.dark .compare-prompt-text {
-    color: #f5f3ff;
+
+.markdown, .md, .prose,
+.gradio-container .markdown,
+.gradio-container .prose {
+    overflow-wrap: break-word;
+    max-width: 100%;
 }
-.dark .compare-cell img {
-    border-color: #6d28d9;
-    background: #2e1065;
+.markdown p, .md p, .prose p,
+.gradio-container .markdown p {
+    margin: 0 0 0.8rem !important;
+    color: var(--pruna-text-body) !important;
+    font-size: 0.95rem !important;
+    font-weight: 400 !important;
+    line-height: 1.55 !important;
 }
-.dark .ranking-table td {
-    border-bottom-color: rgba(221, 214, 254, 0.2);
+.markdown li, .md li, .prose li {
+    color: var(--pruna-text-body) !important;
+    font-size: 0.95rem;
+    line-height: 1.5;
 }
-@media (max-width: 700px) {
-    .leaderboard-summary {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+.markdown strong, .md strong, .prose strong {
+    color: var(--pruna-text-primary) !important;
+    font-weight: 600 !important;
 }
-h1, h2 {
-    margin: 0;
-    padding-top: 0;
+
+label, .block-label span {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+}
+a { color: var(--pruna-link); }
+
+/* Gradio form chrome → playground */
+button.primary, .gr-button-primary, .primary-button,
+button.primary:hover, button.primary:active, button.primary:focus,
+.gr-button-primary:hover, .gr-button-primary:active {
+    background: var(--pruna-accent) !important;
+    border: 1px solid color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    border-radius: 8px !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    font-weight: 600 !important;
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+button.secondary:active, button.secondary:focus,
+.gr-button-secondary:active {
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+.block, .gr-group, .form, .panel {
+    border-color: var(--pruna-border) !important;
+    background: transparent !important;
+}
+input, textarea, select {
+    background: var(--pruna-bg-card) !important;
+    border-color: var(--pruna-border) !important;
+    color: var(--pruna-text-primary) !important;
+    border-radius: 10px !important;
+}
+.view-filters input,
+.leaderboard-controls .wrap-inner input {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    min-height: 28px !important;
+    height: 28px !important;
+    padding: 0 4px !important;
+    line-height: 28px !important;
+}
+.view-filters .wrap-inner:focus-within,
+.leaderboard-controls .wrap-inner:focus-within {
+    border-color: var(--pruna-focus-border) !important;
+    box-shadow: var(--pruna-focus-ring) !important;
+}
+footer, .footer { display: none !important; }
+
+.pareto-note,
+.pareto-note.block,
+.pareto-note .html-container,
+.pareto-note .prose {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 0 12px !important;
+}
+.pareto-metric-block {
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--pruna-hairline);
+}
+.pareto-metric-block:last-child {
+    border-bottom: none;
+}
+.pareto-metric-title {
+    margin: 0 0 0.75rem;
+    color: var(--pruna-text-primary);
+    font-size: 1.05rem;
+    font-weight: 600;
+}
+.pareto-subhead,
+.pareto-subhead.block,
+.pareto-subhead .prose,
+.pareto-subhead .html-container {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 0 0.4rem !important;
+    color: var(--pruna-text-muted);
+}
+.pareto-subhead h4,
+.pareto-subhead .prose h4 {
+    margin: 0 !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+}
+
+.options,
+ul.options {
+    position: absolute !important;
+    top: calc(100% + 4px) !important;
+    bottom: auto !important;
+    left: 0 !important;
+    right: auto !important;
+    width: 100% !important;
+    max-height: min(280px, 60vh) !important;
+    background: var(--pruna-bg-card) !important;
+    color: var(--pruna-text-primary) !important;
+    border: 1px solid var(--pruna-border) !important;
+    border-radius: 10px !important;
+    overflow: auto !important;
+    z-index: 50 !important;
+}
+.options .item:first-child,
+.options li:first-child {
+    border-top-left-radius: 10px !important;
+    border-top-right-radius: 10px !important;
+}
+.options .item:last-child,
+.options li:last-child {
+    border-bottom-left-radius: 10px !important;
+    border-bottom-right-radius: 10px !important;
+}
+.dropdown-arrow-inner {
+    background: var(--pruna-bg-card) !important;
+    color: var(--pruna-text-primary) !important;
+    border-color: var(--pruna-border) !important;
+}
+.options .item,
+.options li {
+    color: var(--pruna-text-primary) !important;
+}
+.options .item:hover,
+.options li:hover,
+.options .item.selected {
+    background: var(--pruna-dropdown-hover) !important;
+    color: var(--pruna-text-primary) !important;
+}
+input[type="range"] {
+    accent-color: var(--pruna-accent);
 }
 """
 
-theme = gr.Theme.from_hub("Werli/Purple-Crimson-Gradio-Theme").set(
-    body_background_fill="#c4b5fd",
-    body_background_fill_dark="#120B1B",
-    body_text_color="#3b0764",
-    body_text_color_dark="#ffffff",
-    block_background_fill="#ede9fe",
-    block_background_fill_dark="#2e1065",
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c50="#faf5ff",
+        c100="#f3e8ff",
+        c200="#e9d5ff",
+        c300="#d8b4fe",
+        c400="#c084fc",
+        c500="#9334e9",
+        c600="#9334e9",
+        c700="#7e22ce",
+        c800="#6b21a8",
+        c900="#3b0764",
+        c950="#120b1b",
+    ),
+    secondary_hue="zinc",
+    neutral_hue="zinc",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"],
+).set(
+    body_background_fill="#f6f3fa",
+    body_background_fill_dark="#120b1b",
+    body_text_color="#18181b",
+    body_text_color_dark="#fafafa",
+    body_text_color_subdued="#71717a",
+    body_text_color_subdued_dark="#a3a3a3",
+    background_fill_primary="#f6f3fa",
+    background_fill_primary_dark="#120b1b",
+    background_fill_secondary="#ffffff",
+    background_fill_secondary_dark="#171021",
+    block_background_fill="#ffffff",
+    block_background_fill_dark="#1d1429",
+    block_border_color="#e4d7f2",
+    block_border_color_dark="#4a3962bf",
+    block_label_text_color="#71717a",
+    block_label_text_color_dark="#a3a3a3",
+    block_title_text_color="#18181b",
+    block_title_text_color_dark="#fafafa",
+    border_color_primary="#e4d7f2",
+    border_color_primary_dark="#4a3962bf",
+    button_primary_background_fill="#9334e9",
+    button_primary_background_fill_dark="#9334e9",
+    button_primary_background_fill_hover="#7c22ce",
+    button_primary_background_fill_hover_dark="#8f35ff",
+    button_primary_text_color="#ffffff",
+    button_primary_text_color_dark="#ffffff",
+    button_secondary_background_fill="#ffffff",
+    button_secondary_background_fill_dark="#ffffff05",
+    button_secondary_background_fill_hover="#f3e8ff",
+    button_secondary_background_fill_hover_dark="rgba(147, 52, 233, 0.10)",
+    button_secondary_text_color="#18181b",
+    button_secondary_text_color_dark="#fafafa",
+    button_secondary_border_color="#e4d7f2",
+    button_secondary_border_color_dark="#d8b4fe26",
+    input_background_fill="#ffffff",
+    input_background_fill_dark="#171021",
+    input_border_color="#e4d7f2",
+    input_border_color_dark="#4a3962bf",
+    input_placeholder_color="#71717a",
+    input_placeholder_color_dark="#a3a3a3",
+    link_text_color="#6d28d9",
+    link_text_color_dark="#bf8bff",
+    link_text_color_hover="#7c22ce",
+    link_text_color_hover_dark="#d2a8ff",
+    shadow_drop="none",
+    shadow_drop_lg="none",
 )
 
+
 space_root = Path(__file__).resolve().parent
 data_dir = space_root / "data"
 
@@ -563,18 +1914,11 @@ def load_sample_comparison_data(folder):
     }
 
 
-def format_url_links(value):
-    if pd.isna(value) or not value:
-        return ""
-
-    links = [url.strip() for url in str(value).split(",") if url.strip()]
-    if not links:
-        return ""
-
-    return " ".join(
-        f'<a target="_blank" href="{url}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">run {idx}</a>'
-        for idx, url in enumerate(links, start=1)
-    )
+def _as_numeric(df, columns):
+    for column in columns:
+        if column in df.columns:
+            df[column] = pd.to_numeric(df[column], errors="coerce")
+    return df
 
 
 def load_oneig_dataframe(path):
@@ -582,7 +1926,6 @@ def load_oneig_dataframe(path):
     df = df.rename(
         columns={
             "Owner": "Endpoint Owner",
-            "Optimization": "Optimization Details",
             "Anime Alignment Score": "OneIG (Anime Alignment)",
             "Human Alignment Score": "OneIG (Human Alignment)",
             "Object Alignment Score": "OneIG (Object Alignment)",
@@ -591,67 +1934,86 @@ def load_oneig_dataframe(path):
             "OneIG (General Object) (Alignment Score)": "OneIG (Object Alignment)",
         }
     )
-    if "URL" in df.columns:
-        df["URL"] = df["URL"].apply(format_url_links)
+    df = df.drop(
+        columns=[
+            column
+            for column in ("URL", "Device", "Optimization", "Optimization Details")
+            if column in df.columns
+        ]
+    )
     if "Optimized" in df.columns:
         df["Optimized"] = df["Optimized"].map(
             {True: "Yes", False: "No", "TRUE": "Yes", "FALSE": "No"}
         ).fillna(df["Optimized"])
 
-    for column in [
-        "Price / Image (USD)",
-        "Median Generation Time (s)",
-        "Min Generation Time (s)",
-        "OneIG (Anime Alignment)",
-        "OneIG (Human Alignment)",
-        "OneIG (Object Alignment)",
-        "OneIG Anime Elo",
-        "OneIG Human Elo",
-        "OneIG Object Elo",
-        "P-Judge Overall",
-        "Rapidata Elo",
-    ]:
-        if column in df.columns:
-            df[column] = pd.to_numeric(df[column], errors="coerce")
+    return _as_numeric(
+        df,
+        [
+            "Price / Image (USD)",
+            "Median Generation Time (s)",
+            "Min Generation Time (s)",
+            "OneIG (Anime Alignment)",
+            "OneIG (Human Alignment)",
+            "OneIG (Object Alignment)",
+            "OneIG Anime Elo",
+            "OneIG Human Elo",
+            "OneIG Object Elo",
+            "P-Judge Overall",
+            "Rapidata Elo",
+        ],
+    )
 
-    preferred_columns = [
-        "Platform",
-        "Endpoint Owner",
-        "Device",
-        "Model",
-        "Optimized",
-        "Optimization Details",
-        "OneIG (Anime Alignment)",
-        "OneIG (Human Alignment)",
-        "OneIG (Object Alignment)",
-        "OneIG Anime Elo",
-        "OneIG Human Elo",
-        "OneIG Object Elo",
-        "Median Inference Time",
-        "Median Inference Time (s)",
-        "Median Generation Time (s)",
-        "Min Generation Time (s)",
-        "Median Total Duration (s)",
-        "Price per Image",
-        "Price / Image (USD)",
-        "Evaluation Date (UTC)",
-        "URL",
-    ]
-    present_preferred_columns = [col for col in preferred_columns if col in df.columns]
-    df = df[
-        present_preferred_columns
-        + [col for col in df.columns.tolist() if col not in present_preferred_columns]
-    ]
 
-    if "OneIG (Human Alignment)" in df.columns:
-        df = df.sort_values(
-            by="OneIG (Human Alignment)", ascending=False, na_position="last"
-        )
+def load_artificial_analysis_dataframe(path):
+    """Load the Artificial Analysis text-to-image leaderboard."""
+    df = pd.read_csv(path, na_values=["N/A", "n/a", ""])
+    df = df.rename(
+        columns={
+            "model": "Model",
+            "elo": "Artificial Analysis Elo",
+            "price_per_image_usd": "Price / Image (USD)",
+        }
+    )
+    df["Model"] = df["Model"].astype(str).str.strip()
+    return _as_numeric(
+        df, ["Artificial Analysis Elo", "Price / Image (USD)"]
+    ).reset_index(drop=True)
 
-    numeric_cols = df.select_dtypes(include=[float, int]).columns.tolist()
-    for col in numeric_cols:
-        df[col] = df[col].apply(lambda x: round(x, 4) if pd.notna(x) else x)
-    return df
+
+ARENA_CATEGORY_COLUMNS = {
+    "product_branding_commercial_design_elo": "Arena Branding / Commercial Elo",
+    "3d_imaging_and_modeling_elo": "Arena 3D Imaging Elo",
+    "cartoon_anime_and_fantasy_elo": "Arena Cartoon / Anime Elo",
+    "photorealistic_and_cinematic_imagery_elo": "Arena Photorealistic Elo",
+    "art_elo": "Arena Art Elo",
+    "portraits_elo": "Arena Portraits Elo",
+    "text_rendering_elo": "Arena Text Rendering Elo",
+}
+
+
+def load_arena_ai_dataframe(path):
+    """Load the Arena AI text-to-image leaderboard (overall + category Elos)."""
+    df = pd.read_csv(path, na_values=["N/A", "n/a", ""])
+    rename_map = {"model": "Model", "elo": "Arena Elo"}
+    rename_map.update(
+        {
+            source: label
+            for source, label in ARENA_CATEGORY_COLUMNS.items()
+            if source in df.columns
+        }
+    )
+    df = df.rename(columns=rename_map)
+    df["Model"] = df["Model"].astype(str).str.strip()
+    score_columns = [
+        column
+        for column in ["Arena Elo", *ARENA_CATEGORY_COLUMNS.values()]
+        if column in df.columns
+    ]
+    df = _as_numeric(df, score_columns)
+    ordered = ["Model", *score_columns]
+    return df[[column for column in ordered if column in df.columns]].reset_index(
+        drop=True
+    )
 
 
 def load_qwen_combined_dataframe(path):
@@ -664,36 +2026,17 @@ def load_qwen_combined_dataframe(path):
     df = df[~df["Model"].astype(str).str.startswith("#")].copy()
     df["Model"] = df["Model"].astype(str).str.strip()
 
-    for column in [
-        "Price / Image (USD)",
-        "Median Generation Time (s)",
-        "Min Generation Time (s)",
-        "P-Judge Overall",
-        "Rapidata Elo",
-        "Datapoint Elo",
-    ]:
-        if column in df.columns:
-            df[column] = pd.to_numeric(df[column], errors="coerce")
-
-    sort_column = next(
-        (
-            col
-            for col in [
-                "Datapoint Elo",
-                "P-Judge Overall",
-                "Rapidata Elo",
-            ]
-            if col in df.columns
-        ),
-        None,
-    )
-    if sort_column:
-        df = df.sort_values(by=sort_column, ascending=False, na_position="last")
-
-    numeric_cols = df.select_dtypes(include=[float, int]).columns.tolist()
-    for col in numeric_cols:
-        df[col] = df[col].apply(lambda x: round(x, 4) if pd.notna(x) else x)
-    return df.reset_index(drop=True)
+    return _as_numeric(
+        df,
+        [
+            "Price / Image (USD)",
+            "Median Generation Time (s)",
+            "Min Generation Time (s)",
+            "P-Judge Overall",
+            "Rapidata Elo",
+            "Datapoint Elo",
+        ],
+    ).reset_index(drop=True)
 
 
 df = load_oneig_dataframe(oneig_path)
@@ -712,9 +2055,6 @@ if oneig_metric_columns:
     oneig_df["OneIG Overall Score"] = oneig_df[oneig_metric_columns].mean(
         axis=1, skipna=True
     )
-    oneig_df = oneig_df.sort_values(
-        by="OneIG Overall Score", ascending=False, na_position="last"
-    )
 
 oneig_display_columns = [
     col
@@ -723,6 +2063,7 @@ oneig_display_columns = [
         "Endpoint Owner",
         "Model",
         "Optimized",
+        "OneIG Overall Score",
         *oneig_metric_columns,
         "OneIG Anime Elo",
         "OneIG Human Elo",
@@ -733,12 +2074,9 @@ oneig_display_columns = [
         "Median Generation Time (s)",
         "Min Generation Time (s)",
         "Price / Image (USD)",
-        "URL",
     ]
     if col in oneig_df.columns
 ]
-# Top-level Leaderboard tab uses the same OneIG table.
-display_columns = oneig_display_columns
 
 oneig_combined_dir = _resolve_data_path(
     data_dir / "oneig_combined",
@@ -752,97 +2090,320 @@ qwen_path = _resolve_data_path(
     data_dir / "qwen_image_bench_model_price_and_median_generation_time.csv",
     space_root.parent / "qwen_image_bench_model_price_and_median_generation_time.csv",
 )
+aa_path = _resolve_data_path(
+    data_dir / "artificial_analysis_text_to_image_leaderboard.csv",
+    space_root.parent / "artificial_analysis_text_to_image_leaderboard.csv",
+)
+arena_path = _resolve_data_path(
+    data_dir / "arena_ai_text_to_image_leaderboard.csv",
+    space_root.parent / "arena_ai_text_to_image_leaderboard.csv",
+)
 
 qwen_df = load_qwen_combined_dataframe(qwen_path)
-qwen_score_columns = [
+aa_df = load_artificial_analysis_dataframe(aa_path)
+arena_df = load_arena_ai_dataframe(arena_path)
+qwen_display_columns = [
     col
     for col in [
-        "P-Judge Overall",
+        "Model",
         "Datapoint Elo",
         "Rapidata Elo",
+        "P-Judge Overall",
+        "Raw Win Rate",
+        "Median Generation Time (s)",
+        "Min Generation Time (s)",
+        "Price / Image (USD)",
     ]
     if col in qwen_df.columns
 ]
-qwen_display_columns = [
+aa_display_columns = [
     col
     for col in [
         "Model",
-        *qwen_score_columns,
-        "Raw Win Rate",
-        "Median Generation Time (s)",
-        "Min Generation Time (s)",
+        "Artificial Analysis Elo",
         "Price / Image (USD)",
     ]
-    if col in qwen_df.columns
+    if col in aa_df.columns
+]
+arena_display_columns = [
+    col
+    for col in [
+        "Model",
+        "Arena Elo",
+        *ARENA_CATEGORY_COLUMNS.values(),
+    ]
+    if col in arena_df.columns
 ]
-qwen_overall_column = (
-    "Datapoint Elo"
-    if "Datapoint Elo" in qwen_df.columns
-    else (qwen_score_columns[0] if qwen_score_columns else None)
-)
 
 oneig_samples = load_sample_comparison_data(oneig_combined_dir)
 qwen_samples = load_sample_comparison_data(qwen_combined_dir)
 
-# Dataset-first catalogue: each card is a prompt suite; metrics are leaderboard columns.
-benchmarks = [
+metrics = [
+    {"id": "datapoint_elo", "column": "Datapoint Elo"},
+    {"id": "rapidata_elo", "column": "Rapidata Elo"},
+    {"id": "pjudger", "column": "P-Judge Overall"},
+    {"id": "alignment_overall", "column": "OneIG Overall Score"},
+    {"id": "datapoint_elo_anime", "column": "OneIG Anime Elo"},
+    {"id": "datapoint_elo_human", "column": "OneIG Human Elo"},
+    {"id": "datapoint_elo_object", "column": "OneIG Object Elo"},
+    {"id": "aa_elo", "column": "Artificial Analysis Elo"},
+    {"id": "arena_elo", "column": "Arena Elo"},
+    {"id": "arena_branding", "column": "Arena Branding / Commercial Elo"},
+    {"id": "arena_3d", "column": "Arena 3D Imaging Elo"},
+    {"id": "arena_cartoon", "column": "Arena Cartoon / Anime Elo"},
+    {"id": "arena_photo", "column": "Arena Photorealistic Elo"},
+    {"id": "arena_art", "column": "Arena Art Elo"},
+    {"id": "arena_portraits", "column": "Arena Portraits Elo"},
+    {"id": "arena_text", "column": "Arena Text Rendering Elo"},
+]
+
+
+def _metric_ids_for(data, metric_ids):
+    columns = getattr(data, "columns", [])
+    return [
+        metric_id
+        for metric_id in metric_ids
+        if any(metric["id"] == metric_id and metric["column"] in columns for metric in metrics)
+    ]
+
+
+qwen_metric_ids = _metric_ids_for(
+    qwen_df, ["datapoint_elo", "rapidata_elo", "pjudger"]
+)
+oneig_metric_ids = _metric_ids_for(
+    oneig_df,
+    [
+        "alignment_overall",
+        "rapidata_elo",
+        "pjudger",
+        "datapoint_elo_anime",
+        "datapoint_elo_human",
+        "datapoint_elo_object",
+    ],
+)
+aa_metric_ids = _metric_ids_for(aa_df, ["aa_elo"])
+arena_metric_ids = _metric_ids_for(
+    arena_df,
+    [
+        "arena_elo",
+        "arena_branding",
+        "arena_3d",
+        "arena_cartoon",
+        "arena_photo",
+        "arena_art",
+        "arena_portraits",
+        "arena_text",
+    ],
+)
+
+datasets = [
+    {
+        "id": "qwen",
+        "name": "Qwen Image Dataset",
+        "data": qwen_df,
+        "columns": qwen_display_columns,
+        "metric_ids": qwen_metric_ids,
+        "note": "Rapidata Elo is a metric on this dataset, not a dataset of its own.",
+        "samples": qwen_samples,
+    },
     {
         "id": "oneig",
-        "title": "OneIG Alignment",
-        "emoji": "🎯",
-        "card_description": (
-            "Anime/stylization, portrait, and general-object alignment prompts — "
-            "alignment scores and Datapoint Elo (not the full OneIG suite), plus "
-            "side-by-side generations."
-        ),
-        "intro": (
-            "OneIG Alignment covers the alignment slice of OneIG (not every OneIG "
-            "dimension). The leaderboard shows category alignment scores and Datapoint "
-            "Elo columns; Compare samples uses the combined alignment generations."
-        ),
+        "name": "OneIG Alignment Dataset",
         "data": oneig_df,
         "columns": oneig_display_columns,
-        "score_columns": oneig_metric_columns,
-        "overall_column": "OneIG Overall Score",
-        "best_score_label": "BEST ONEIG ALIGNMENT",
-        "metrics_same_scale": True,
+        "metric_ids": oneig_metric_ids,
         "note": (
-            "> Rankings are ordered by the mean of the available alignment category "
-            "scores. Missing category scores are not included in that model's mean."
+            "Alignment Overall is the mean of the available category scores. "
+            "Missing categories are skipped for that model."
         ),
         "samples": oneig_samples,
     },
     {
-        "id": "qwen_image_bench",
-        "title": "Qwen Image Bench",
-        "emoji": "🖼️",
-        "card_description": (
-            "Qwen image-bench prompts with P-Judge, Datapoint Elo, and Rapidata Elo "
-            "as metric columns, plus combined generations for comparison."
-        ),
-        "intro": (
-            "Qwen Image Bench is a shared prompt suite. The leaderboard joins every "
-            "available metric for this benchmark; Compare samples uses the combined "
-            "Qwen generations."
-        ),
-        "data": qwen_df,
-        "columns": qwen_display_columns,
-        "score_columns": qwen_score_columns,
-        "overall_column": qwen_overall_column,
-        "best_score_label": "BEST DATAPOINT ELO",
-        "metrics_same_scale": False,
-        "note": (
-            "> Models are ordered by Datapoint Elo when available. Other metric "
-            "columns come from the P-Judge and Rapidata evaluations on the same "
-            "prompt suite."
-        ),
-        "samples": qwen_samples,
+        "id": "artificial_analysis",
+        "name": "Artificial Analysis Dataset",
+        "data": aa_df,
+        "columns": aa_display_columns,
+        "metric_ids": aa_metric_ids,
+        "note": "",
+        "samples": None,
+    },
+    {
+        "id": "arena_ai",
+        "name": "Arena AI Dataset",
+        "data": arena_df,
+        "columns": arena_display_columns,
+        "metric_ids": arena_metric_ids,
+        "note": "",
+        "samples": None,
     },
 ]
+datasets = [dataset for dataset in datasets if dataset["metric_ids"]]
+
+DEFAULT_DATASET_ID = next(
+    (dataset["id"] for dataset in datasets if dataset["id"] == "qwen"),
+    datasets[0]["id"] if datasets else None,
+)
+DEFAULT_METRIC_ID = None
 
 
 custom_head = """
 <script>
+(function () {
+  var mode = "dark";
+  try {
+    var stored = localStorage.getItem("inferbench-theme");
+    if (stored === "light" || stored === "dark") mode = stored;
+    else {
+      var param = new URLSearchParams(location.search).get("__theme");
+      if (param === "light" || param === "dark") mode = param;
+    }
+  } catch (e) {}
+  document.documentElement.classList.toggle("dark", mode === "dark");
+  document.documentElement.dataset.theme = mode;
+})();
+</script>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<script>
+(() => {
+  const STORAGE_KEY = "inferbench-theme";
+  const PLOT_LAYOUT = {
+    dark: {
+      paper_bgcolor: "#171021",
+      plot_bgcolor: "#1d1429",
+      "font.color": "#d4d4d4",
+      "legend.font.color": "#d4d4d4",
+      "xaxis.gridcolor": "rgba(74, 57, 98, 0.55)",
+      "xaxis.color": "#d4d4d4",
+      "xaxis.title.font.color": "#fafafa",
+      "xaxis.tickfont.color": "#a3a3a3",
+      "yaxis.gridcolor": "rgba(74, 57, 98, 0.55)",
+      "yaxis.color": "#d4d4d4",
+      "yaxis.title.font.color": "#fafafa",
+      "yaxis.tickfont.color": "#a3a3a3",
+    },
+    light: {
+      paper_bgcolor: "#f6f3fa",
+      plot_bgcolor: "#ffffff",
+      "font.color": "#3f3f46",
+      "legend.font.color": "#3f3f46",
+      "xaxis.gridcolor": "rgba(126, 34, 206, 0.12)",
+      "xaxis.color": "#3f3f46",
+      "xaxis.title.font.color": "#18181b",
+      "xaxis.tickfont.color": "#71717a",
+      "yaxis.gridcolor": "rgba(126, 34, 206, 0.12)",
+      "yaxis.color": "#3f3f46",
+      "yaxis.title.font.color": "#18181b",
+      "yaxis.tickfont.color": "#71717a",
+    },
+  };
+
+  const currentMode = () => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === "light" || stored === "dark") return stored;
+    } catch (e) {}
+    const param = new URLSearchParams(location.search).get("__theme");
+    if (param === "light" || param === "dark") return param;
+    return "dark";
+  };
+
+  const queryAll = (selector) => {
+    const found = [...document.querySelectorAll(selector)];
+    document.querySelectorAll("gradio-app").forEach((app) => {
+      if (app.shadowRoot) found.push(...app.shadowRoot.querySelectorAll(selector));
+    });
+    return found;
+  };
+
+  const restylePlots = (mode) => {
+    const layout = PLOT_LAYOUT[mode];
+    if (!layout || typeof Plotly === "undefined") return;
+    queryAll(".js-plotly-plot").forEach((gd) => {
+      try { Plotly.relayout(gd, layout); } catch (e) {}
+    });
+  };
+
+  const applyMode = (mode, persist) => {
+    const dark = mode === "dark";
+    const targets = [
+      document.documentElement,
+      document.body,
+      ...queryAll(".gradio-container"),
+      ...document.querySelectorAll("gradio-app"),
+    ].filter(Boolean);
+    targets.forEach((el) => {
+      el.classList.toggle("dark", dark);
+      el.classList.toggle("light", !dark);
+    });
+    document.documentElement.dataset.theme = mode;
+    const label = dark ? "Switch to light mode" : "Switch to dark mode";
+    queryAll(".theme-toggle").forEach((btn) => {
+      btn.setAttribute("data-mode", mode);
+      btn.setAttribute("aria-label", label);
+      btn.setAttribute("title", label);
+    });
+    if (persist) {
+      try { localStorage.setItem(STORAGE_KEY, mode); } catch (e) {}
+      try {
+        const url = new URL(location.href);
+        url.searchParams.set("__theme", mode);
+        history.replaceState(null, "", url);
+      } catch (e) {}
+    }
+    restylePlots(mode);
+  };
+
+  applyMode(currentMode(), false);
+
+  document.addEventListener("click", (event) => {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+    const btn = path.find((el) => el.classList && el.classList.contains("theme-toggle"));
+    if (!btn) return;
+    event.preventDefault();
+    const next = currentMode() === "dark" ? "light" : "dark";
+    applyMode(next, true);
+  });
+
+  const sync = () => applyMode(currentMode(), false);
+  document.addEventListener("DOMContentLoaded", sync);
+  window.addEventListener("load", () => {
+    sync();
+    setTimeout(sync, 80);
+    setTimeout(sync, 400);
+  });
+
+  const startObserver = () => {
+    if (!document.body || window.__inferbenchThemeObserver) return;
+    window.__inferbenchThemeObserver = true;
+    const onMutations = (mutations) => {
+      const mode = currentMode();
+      const isDark = document.documentElement.classList.contains("dark");
+      const added = mutations.flatMap((mutation) => [...mutation.addedNodes]).filter((node) => node.nodeType === 1);
+      const hasContainer = added.some((node) => (
+        node.classList?.contains("gradio-container") ||
+        node.querySelector?.(".gradio-container, .theme-toggle")
+      ));
+      if ((mode === "dark") !== isDark || hasContainer) applyMode(mode, false);
+      const hasPlot = added.some((node) => (
+        node.classList?.contains("js-plotly-plot") ||
+        node.querySelector?.(".js-plotly-plot")
+      ));
+      if (hasPlot) restylePlots(mode);
+    };
+    new MutationObserver(onMutations).observe(document.body, { childList: true, subtree: true });
+    document.querySelectorAll("gradio-app").forEach((app) => {
+      if (app.shadowRoot) {
+        new MutationObserver(onMutations).observe(app.shadowRoot, { childList: true, subtree: true });
+      }
+    });
+  };
+  if (document.body) startObserver();
+  else document.addEventListener("DOMContentLoaded", startObserver);
+})();
+</script>
+<script>
 (() => {
   if (window.__inferbenchLeaderboardSortBound) return;
   window.__inferbenchLeaderboardSortBound = true;
@@ -897,25 +2458,40 @@ custom_head = """
   });
 })();
 </script>
+<script>
+(() => {
+  if (window.__inferbenchChipScrollBound) return;
+  window.__inferbenchChipScrollBound = true;
+  document.addEventListener("wheel", (event) => {
+    const row = event.target.closest?.(".view-filters .filter-chips .wrap-inner");
+    if (!row || row.scrollWidth <= row.clientWidth + 1) return;
+    if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) return;
+    row.scrollLeft += event.deltaY;
+    event.preventDefault();
+  }, { capture: true, passive: false });
+})();
+</script>
 """
 
 with gr.Blocks(
-    theme=theme, fill_width=True, css=custom_css, head=custom_head
+    title="P-Bench",
+    theme=theme,
+    fill_width=True,
+    css=custom_css,
+    head=custom_head,
 ) as demo:
     render_header()
-    with gr.Tabs():
-        with gr.TabItem("Home"):
-            render_home(benchmarks)
-        with gr.TabItem("Benchmarks") as benchmarks_tab:
-            reset_benchmarks, reset_benchmark_outputs = render_benchmarks(benchmarks)
-            benchmarks_tab.select(
-                reset_benchmarks,
-                outputs=reset_benchmark_outputs,
-            )
-        with gr.TabItem("About"):
-            render_about()
+    render_image_workspace(
+        datasets,
+        metrics,
+        DEFAULT_DATASET_ID,
+        DEFAULT_METRIC_ID,
+    )
     render_footer()
 
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    demo.launch(
+        ssr_mode=False,
+        allowed_paths=[str(space_root)],
+    )

data/arena_ai_text_to_image_leaderboard.csv

@@ -0,0 +1,77 @@
+model,elo,product_branding_commercial_design_elo,3d_imaging_and_modeling_elo,cartoon_anime_and_fantasy_elo,photorealistic_and_cinematic_imagery_elo,art_elo,portraits_elo,text_rendering_elo
+gpt-image-2 (medium),1381,1391,1361,1397,1380,1370,1429,1425
+mai-image-2.6-preview,1336,1344,1362,1355,1325,1345,1365,1374
+grok-imagine-image-2.0 (low),1316,1309,1268,1321,1327,1306,1371,1353
+reve-2.1,1302,1314,1274,1310,1302,1289,1317,1341
+muse-image,1282,1269,1255,1289,1293,1275,1313,1304
+reve-2.0,1270,1279,1220,1275,1280,1259,1283,1297
+gemini-3.1-flash-image (nano-banana-2) [web-search],1264,1271,1260,1268,1270,1251,1266,1295
+seedream-5.0-pro,1258,1234,1246,1273,1280,1269,1291,1255
+qwen-image-3.0-pro,1257,1258,1240,1271,1257,1257,1273,1289
+mai-image-2.5,1256,1261,1248,1270,1252,1278,1259,1284
+gemini-3.1-flash-lite-image (nano-banana-2-lite),1251,1250,1225,1258,1260,1257,1248,1275
+gemini-3-pro-image-2k (nano-banana-pro),1246,1246,1231,1242,1260,1225,1258,1270
+gpt-image-1.5-high-fidelity,1239,1241,1216,1243,1249,1224,1261,1254
+gemini-3-pro-image-preview (nano-banana-pro),1232,1237,1209,1238,1243,1216,1236,1254
+ideogram-4.0-quality,1204,1224,1180,1195,1203,1199,1201,1238
+qwen-image-2.0-pro-2026-06-22,1191,1187,1198,1191,1205,1177,1216,1201
+uni-1.1-max,1188,1197,1172,1194,1188,1195,1158,1217
+mai-image-2,1183,1175,1179,1180,1203,1177,1207,1175
+uni-1.1,1181,1181,1167,1189,1180,1188,1176,1202
+Cosmos3-Super-Text2Image (Agentic),1175,1162,1170,1191,1189,1195,1212,1151
+grok-imagine-image,1171,1175,1176,1177,1179,1179,1187,1185
+recraft-v4.1-utility-pro,1169,1167,1147,1177,1180,1178,1169,1162
+flux-2-max,1162,1165,1161,1169,1161,1170,1157,1167
+grok-imagine-image-pro,1161,1168,1165,1163,1169,1165,1172,1182
+flux-2-flex,1157,1173,1172,1162,1147,1156,1145,1172
+flux-2-pro,1155,1157,1150,1161,1152,1163,1146,1157
+Cosmos3-Super-Text2Image,1155,1129,1166,1177,1155,1173,1176,1122
+reve-v1.5,1154,1182,1143,1141,1147,1144,1149,1185
+hunyuan-image-3.0,1151,1153,1168,1163,1152,1153,1146,1150
+gemini-2.5-flash-image-preview (nano-banana),1150,1152,1142,1145,1157,1145,1168,1154
+imagen-ultra-4.0-generate-001,1148,1151,1141,1141,1156,1128,1168,1148
+seedream-4.5,1147,1140,1147,1149,1166,1154,1166,1141
+flux-2-dev,1145,1155,1149,1144,1143,1150,1133,1159
+seedream-4-2k,1140,1134,1150,1149,1151,1164,1142,1143
+seedream-5.0-lite,1137,1129,1138,1140,1154,1137,1150,1134
+wan2.6-t2i,1136,1148,1146,1146,1128,1156,1123,1149
+recraft-v4.1-pro,1130,1138,1111,1122,1143,1154,1144,1156
+imagen-4.0-generate-001,1129,1129,1123,1120,1136,1110,1145,1123
+qwen-image-2512,1125,1128,1135,1125,1135,1133,1143,1122
+krea-2-medium,1122,1119,1132,1140,1127,1152,1148,1124
+wan2.5-t2i-preview,1117,1138,1135,1120,1102,1120,1094,1142
+hidream-o1-image,1117,1128,1121,1121,1111,1122,1106,1135
+seedream-4-fal,1116,1128,1138,1109,1121,1119,1116,1124
+gpt-image-1,1115,1115,1114,1115,1115,1115,1115,1115
+recraft-v4,1114,1126,1076,1111,1119,1123,1119,1139
+seedream-4-high-res-fal,1113,1113,1121,1109,1129,1112,1133,1110
+krea-2-turbo,1111,1109,1133,1122,1123,1139,1138,1097
+gpt-image-1-mini,1109,1109,1108,1108,1114,1113,1112,1104
+krea-2-large,1107,1104,1113,1112,1121,1116,1117,1111
+wan2.7-image-pro,1103,1114,1080,1080,1123,1079,1127,1118
+wan2.7-image,1100,1110,1082,1075,1117,1075,1125,1114
+mai-image-1,1093,1086,1096,1100,1103,1104,1095,1070
+seedream-3,1082,1070,1094,1081,1102,1092,1102,1052
+z-image-turbo,1082,1060,1066,1067,1115,1074,1140,1058
+flux-1-kontext-max,1074,1082,1079,1079,1083,1081,1085,1071
+flux-2-klein-9b,1070,1070,1078,1064,1090,1079,1092,1057
+qwen-image-prompt-extend,1061,1087,1082,1062,1047,1055,1051,1082
+flux-1-kontext-pro,1059,1068,1062,1058,1066,1067,1065,1053
+imagen-3.0-generate-002,1058,1057,1046,1048,1075,1059,1077,1045
+qwen-image,1057,1068,1064,1052,1062,1055,1076,1047
+ideogram-v3-quality,1049,1082,1029,1027,1051,1039,1052,1070
+photon,1035,1052,1033,1026,1035,1046,1023,1041
+p-image,1034,1031,1031,1014,1074,1041,1100,1021
+flux-2-klein-4b,1030,1026,1030,1023,1047,1028,1054,1015
+runway-gen4,1025,1027,1013,1008,1041,1019,1022,1019
+recraft-v3,1021,1027,1011,978,1054,991,1040,1005
+flux-1.1-pro,1016,1012,1051,1016,1044,1044,1043,995
+lucid-origin,1013,1020,1015,1007,1035,1031,1043,1005
+ideogram-v2,1013,1054,990,995,1019,1017,1019,1046
+glm-image,1010,1036,1018,1003,1000,1013,1000,1033
+gemini-2.0-flash-preview-image-generation,975,1019,976,954,963,965,961,1007
+flux-1-dev-fp8,969,991,978,957,990,978,999,963
+dall-e-3,968,987,987,988,940,1010,924,969
+flux-1-kontext-dev,940,966,943,924,935,927,944,953
+stable-diffusion-v35-large,938,937,964,946,928,998,941,921
+bagel,898,887,866,885,923,911,926,875

data/artificial_analysis_text_to_image_leaderboard.csv

@@ -0,0 +1,146 @@
+model,elo,price_per_image_usd
+GPT Image 2 (high),1370,0.211
+Reve 2.1,1324,0.2
+Nano Banana 2 (Gemini 3.1 Flash Image Preview),1322,0.067
+GPT Image 1.5 (high),1312,0.133
+MAI-Image-2.5,1306,0.0481
+Nano Banana Pro (Gemini 3 Pro Image),1298,0.134
+Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image),1292,0.0336
+Seedream 5.0 Pro,1281,0.09
+grok-imagine-image-quality,1236,0.05
+Qwen Image 2.0 Pro (2026-04-22),1235,0.075
+FLUX.2 [max],1231,0.07
+MAI-Image-2.5-Flash,1230,0.02
+HiDream-O1-Image-1.5,1227,0.08
+Seedream 4.0,1224,0.03
+Luma UNI 1 Max,1223,0.1
+FLUX.2 [flex],1222,0.06
+Krea 2 Medium Turbo,1222,0.015
+Krea 2 Large,1220,0.06
+grok-imagine-image,1218,0.02
+Recraft V4.1 Utility,1217,0.035
+Ideogram 4.0,1217,0.06
+Recraft V4.1 Utility Pro,1217,0.21
+Ideogram 4.0 (Quality),1214,0.1
+Wan2.6 Text to Image,1213,0.03
+Krea 2 Medium,1212,0.03
+MAI-Image-2,1210,0.035
+FLUX.2 [pro],1208,0.03
+Wan 2.6 Image,1206,0.03
+Seedream 4.5,1205,0.04
+GPT Image 1 (high),1205,0.167
+Luma UNI 1,1205,0.0404
+FLUX.2 [dev] Turbo,1199,0.008
+FLUX.2 [dev],1199,0.012
+Seedream 5.0 Lite,1199,0.035
+Ideogram 4.0 Fast (Quality),1199,0.0175
+P-Image-Ideogram (High),1198,0.015
+Recraft V4 Pro,1195,0.25
+Recraft V4.1,1191,0.035
+Nano Banana (Gemini 2.5 Flash Image),1189,0.039
+Recraft V4.1 Pro,1189,0.21
+Imagen 4 Ultra,1189,0.06
+Ideogram 4.0 Instant,1187,0.0075
+Wan 2.7 Pro,1184,0.064
+Recraft V4,1182,0.04
+MAI-Image-2-Efficient,1182,0.022
+P-Image-Ideogram (Medium),1181,0.01
+FLUX.2 [dev] Flash,1179,0.005
+HiDream-O1-Image,1176,
+Ideogram 4.0 Fast,1176,0.0105
+ImagineArt 2.0,1173,0.03
+Qwen Image Max 2512,1173,0.02
+Wan 2.7,1170,0.026
+ImagineArt 1.5 Preview,1165,0.03
+P-Image-Ideogram (Low),1165,0.0075
+Seedream 3.0,1160,0.03
+Vivago 2.1,1152,0.035
+HunyuanImage 3.0 Instruct (Fal),1151,0.09
+Wan 2.5 Preview,1150,0.021
+FLUX.2 [klein] 9B,1146,0.015
+FLUX.1 Kontext [max],1142,0.08
+Kolors 2.1,1142,0.014
+image-1,1141,0.04
+HunyuanImage 3.0 (Fal),1140,0.1
+Qwen Image 2.0 (2026-03-03),1135,0.035
+Z-Image Turbo,1130,0.005
+Vivago 2.0,1125,
+Imagen 3 (v002),1124,0.04
+Lucid Origin Ultra,1122,0.0867
+Eigen Image,1122,0.025
+Imagen 4 Standard,1120,0.04
+Reve Image (Halfmoon),1116,
+Kling Image 3.0 Omni,1115,0.028
+Vidu Q2,1112,0.03
+P-Image-Ideogram (Very Low),1111,0.003
+Qwen Image Plus 2601,1110,0.03
+GPT Image 1 Mini (medium),1110,0.011
+Lucid Origin Fast,1110,0.0179
+FLUX.1 Kontext [pro],1109,0.04
+Dreamina 3.1,1108,0.03
+FLUX1.1 [pro] Ultra,1104,0.06
+Ideogram 3.0,1101,0.06
+FLUX.2 [klein] Base 9B,1099,0.011
+Imagen 4 Fast,1098,0.02
+P-Image,1093,0.005
+FLUX1.1 [pro],1092,0.04
+Midjourney v7 Alpha,1092,
+Ideogram v2,1084,0.08
+FLUX.1 [pro],1083,0.05
+Qwen Image,1082,0.02
+SRPO,1080,0.026
+HunyuanImage 2.1,1078,0.1
+Midjourney v6,1076,
+Ideogram v2 Turbo,1075,0.05
+FIBO,1075,0.04
+Recraft V3,1075,0.04
+Luma Photon,1074,0.019
+HiDream-O1-Image-Dev,1071,0.005
+Image-01,1070,0.01
+HiDream-I1-Dev,1070,0.024
+GLM-Image,1068,0.05
+Z-Image Base,1064,0.01
+MAI Image 1,1064,
+HiDream-I1-Fast,1063,0.012
+FLUX.2 [klein] 4B,1057,0.014
+Midjourney v6.1,1057,
+Infinity 8B,1056,0.0017
+LongCat Image,1053,0.13
+Stable Diffusion 3 Large,1042,
+FLUX.1 [dev],1041,0.025
+Phoenix 1.0 Ultra,1041,0.0762
+FLUX.1 Krea [dev],1036,0.025
+Stable Diffusion 3.5 Large Turbo,1034,0.04
+Stable Diffusion 3.5 Large,1034,0.065
+Phoenix 0.9 Ultra,1028,0.0762
+Ideogram v2a Turbo,1028,0.025
+Ideogram v2a,1027,0.04
+Playground v3 (beta),1015,0.0105
+Krea 1,1013,
+Phoenix 1.0 Fast,1007,0.0194
+Luma Photon Flash,1004,0.005
+FLUX.1 [schnell],1000,0.003
+Step Image Edit 2,1000,0.003
+Runway Gen-4 Image,992,0.08
+Recraft 20B,984,0.022
+Lumina Image v2,978,0.075
+Playground v2.5,972,0.08
+FLUX.2 [klein] Base 4B,972,0.009
+DALLE 3,968,0.04
+DALLE 3 HD,967,0.08
+Stable Diffusion 3.5 Medium,963,0.02
+Sana Sprint 1.6B,939,0.0015
+Amazon Titan G1 v2 (Standard),923,0.01
+Stable Diffusion 3 Medium,922,0.035
+Stable Diffusion 3 Large Turbo,917,
+Amazon Titan G1 (Standard),914,0.01
+Stable Diffusion 1.6,914,0.009
+OmniGen V2,911,0.15
+SDXL Lightning,909,0.0019
+Bagel,908,0.1
+Bria 3.2,906,0.04
+Stable Diffusion XL 1.0,884,0.009
+Stable Diffusion 2.1,754,0.0039
+DALLE 2,745,0.02
+Janus Pro,720,0.0
+Stable Diffusion 1.5,665,0.044

data/text_to_image.jsonl

@@ -1,31 +0,0 @@
-{"Platform": "Replicate", "Owner": "Pruna AI", "Device": "1xH100", "Model": "FLUX Schnell", "Optimization": "speed_mode_juiced", "URL": "https://replicate.com/prunaai/flux-schnell", "PartiPromts (ARNIQA)": 0.5665, "PartiPromts (ClipScore)": 27.4594, "PartiPromts (ClipIQA)": 0.8594, "PartiPromts (Sharpness - Laplacian Variance)": 4385.7579, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "HPS (v2.1)": 0.2106, "DrawBench (ClipScore)": 27.9985, "DrawBench (Image Reward)": 1.0057, "GenAI-Bench (VQA)": 0.79, "OneIG (Anime and Stylization) (Alignment Score)": null, "Median Inference Time": 0.9082, "Price per Image": 0.055}
-{"Platform": "fal.ai", "Owner": "fal.ai", "Device": "Undisclosed", "Model": "FLUX 1.1 Pro", "Optimization": "Undisclosed", "URL": "https://fal.ai/models/fal-ai/flux-pro/v1.1", "GenAI-Bench (VQA)": 0.7745, "HPS (v2.1)": 0.2093, "PartiPromts (ARNIQA)": 0.5998, "PartiPromts (ClipScore)": 26.7942, "PartiPromts (ClipIQA)": 0.9282, "PartiPromts (Sharpness - Laplacian Variance)": 14290.615, "Long Text Bench (edit_distance)": 163.5862, "Long Text Bench (text_word_accuracy)": null, "OneIG (Anime and Stylization) (Alignment Score)": null, "DrawBench (ClipScore)": 27.2099, "DrawBench (Image Reward)": 0.8609, "Median Inference Time": 4.031, "Price per Image": 0.04}
-{"Platform": "fal.ai", "Owner": "fal.ai", "Device": "Undisclosed", "Model": "FLUX Dev", "Optimization": "dev", "URL": "https://fal.ai/models/fal-ai/flux/dev", "Long Text Bench (edit_distance)": 177.7438, "Long Text Bench (text_word_accuracy)": null, "OneIG (Anime and Stylization) (Alignment Score)": null, "GenAI-Bench (VQA)": 0.7443, "DrawBench (ClipScore)": 27.0164, "DrawBench (Image Reward)": 0.8933, "PartiPromts (ARNIQA)": 0.6305, "PartiPromts (ClipScore)": 27.2592, "PartiPromts (ClipIQA)": 0.8593, "PartiPromts (Sharpness - Laplacian Variance)": 5212.9337, "HPS (v2.1)": 0.1932, "Median Inference Time": 1.9838, "Price per Image": 0.025}
-{"Platform": "Prodia", "Owner": "Prodia", "Device": "Undisclosed", "Model": "FLUX Dev", "Optimization": "fast", "URL": "https://app.prodia.com/models", "PartiPromts (ARNIQA)": 0.6224, "PartiPromts (ClipScore)": 26.8405, "PartiPromts (ClipIQA)": 0.9159, "PartiPromts (Sharpness - Laplacian Variance)": 5774.8605, "DrawBench (ClipScore)": 26.6909, "DrawBench (Image Reward)": 0.9675, "GenAI-Bench (VQA)": 0.7363, "OneIG (Anime and Stylization) (Alignment Score)": null, "Long Text Bench (edit_distance)": 178.3375, "Long Text Bench (text_word_accuracy)": null, "HPS (v2.1)": 0.1995, "Median Inference Time": 1.9977, "Price per Image": 0.02}
-{"Platform": "Prodia", "Owner": "Prodia", "Device": "Undisclosed", "Model": "FLUX 1.1 Pro", "Optimization": "Undisclosed", "URL": "https://app.prodia.com/models", "HPS (v2.1)": 0.2075, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "DrawBench (ClipScore)": 27.6498, "DrawBench (Image Reward)": 0.9484, "GenAI-Bench (VQA)": 0.7739, "OneIG (Anime and Stylization) (Alignment Score)": null, "PartiPromts (ARNIQA)": 0.6181, "PartiPromts (ClipScore)": 27.3402, "PartiPromts (ClipIQA)": 0.895, "PartiPromts (Sharpness - Laplacian Variance)": 6932.3266, "Median Inference Time": 3.285, "Price per Image": 0.04}
-{"Platform": "fal.ai", "Owner": "fal.ai", "Device": "Undisclosed", "Model": "FLUX Schnell", "Optimization": "schnell", "URL": "https://fal.ai/models/fal-ai/flux/schnell", "HPS (v2.1)": 0.206, "Long Text Bench (edit_distance)": 178.3125, "Long Text Bench (text_word_accuracy)": 0.0003, "PartiPromts (ARNIQA)": 0.6637, "PartiPromts (ClipScore)": 27.755, "PartiPromts (ClipIQA)": 0.8991, "PartiPromts (Sharpness - Laplacian Variance)": 6420.4761, "OneIG (Anime and Stylization) (Alignment Score)": null, "GenAI-Bench (VQA)": 0.7919, "DrawBench (ClipScore)": 28.0585, "DrawBench (Image Reward)": 0.9376, "Median Inference Time": 0.7981, "Price per Image": 0.003}
-{"Platform": "Together AI", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX Dev", "Optimization": "dev", "URL": "https://www.together.ai/models/flux-1-dev", "Long Text Bench (edit_distance)": 178.0437, "Long Text Bench (text_word_accuracy)": null, "GenAI-Bench (VQA)": 0.7592, "OneIG (Anime and Stylization) (Alignment Score)": null, "PartiPromts (ARNIQA)": 0.5982, "PartiPromts (ClipScore)": 27.5003, "PartiPromts (ClipIQA)": 0.8799, "PartiPromts (Sharpness - Laplacian Variance)": 5101.113, "HPS (v2.1)": 0.1973, "DrawBench (ClipScore)": 27.3007, "DrawBench (Image Reward)": 0.9612, "Median Inference Time": 3.862, "Price per Image": 0.025}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX 1.1 Pro", "Optimization": "Undisclosed", "URL": "https://replicate.com/black-forest-labs/flux-1.1-pro", "PartiPromts (ARNIQA)": 0.5879, "PartiPromts (ClipScore)": 27.8015, "PartiPromts (ClipIQA)": 0.8273, "PartiPromts (Sharpness - Laplacian Variance)": 6773.8274, "HPS (v2.1)": 0.2048, "OneIG (Anime and Stylization) (Alignment Score)": 0.87, "OneIG (General Object) (Alignment Score)": 0.83, "OneIG (Portrait) (Alignment Score)": 0.78, "DrawBench (ClipScore)": 27.7958, "DrawBench (Image Reward)": 0.9258, "Long Text Bench (edit_distance)": 163.28, "Long Text Bench (text_word_accuracy)": null, "GenAI-Bench (VQA)": 0.7813, "Median Inference Time": 2.8571, "Price per Image": 0.04}
-{"Platform": "Black Forest Labs", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX 2 pro", "Optimization": "Undisclosed", "URL": "https://bfl.ai/models", "PartiPromts (ARNIQA)": 0.6488, "PartiPromts (ClipScore)": 28.0808, "PartiPromts (ClipIQA)": 0.9172, "PartiPromts (Sharpness - Laplacian Variance)": 9335.3041, "GenAI-Bench (VQA)": 0.9633, "OneIG (Anime and Stylization) (Alignment Score)": null, "DrawBench (ClipScore)": 28.22, "DrawBench (Image Reward)": 1.0339, "Long Text Bench (edit_distance)": 159.2424, "Long Text Bench (text_word_accuracy)": null, "HPS (v2.1)": 0.1894, "Median Inference Time": 9.1787, "Price per Image": 0.1}
-{"Platform": "fal.ai", "Owner": "fal.ai", "Device": "Undisclosed", "Model": "FLUX Krea", "Optimization": "Undisclosed", "URL": "https://fal.ai/models/fal-ai/flux/krea", "DrawBench (ClipScore)": 28.1482, "DrawBench (Image Reward)": 0.9853, "OneIG (Anime and Stylization) (Alignment Score)": null, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "GenAI-Bench (VQA)": 0.7949, "PartiPromts (ARNIQA)": 0.615, "PartiPromts (ClipScore)": 27.7512, "PartiPromts (ClipIQA)": 0.848, "PartiPromts (Sharpness - Laplacian Variance)": 4043.6115, "HPS (v2.1)": 0.1902, "Median Inference Time": 2.0193, "Price per Image": 0.025}
-{"Platform": "Runware", "Owner": "Runware", "Device": "Undisclosed", "Model": "FLUX Dev", "Optimization": "Undisclosed", "URL": "https://runware.ai/models#", "PartiPromts (ARNIQA)": 0.638, "PartiPromts (ClipScore)": 27.3993, "PartiPromts (ClipIQA)": 0.8887, "PartiPromts (Sharpness - Laplacian Variance)": 6238.0671, "DrawBench (ClipScore)": 27.2074, "DrawBench (Image Reward)": 0.9923, "GenAI-Bench (VQA)": 0.7761, "Long Text Bench (edit_distance)": 178.3625, "Long Text Bench (text_word_accuracy)": null, "HPS (v2.1)": 0.194, "OneIG (Anime and Stylization) (Alignment Score)": null, "Median Inference Time": 4.2133, "Price per Image": 0.0038}
-{"Platform": "Black Forest Labs", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX 2 beta", "Optimization": "Undisclosed", "URL": "https://bfl.ai/models", "DrawBench (ClipScore)": 28.2489, "DrawBench (Image Reward)": 1.0498, "PartiPromts (ARNIQA)": 0.5988, "PartiPromts (ClipScore)": 28.2471, "PartiPromts (ClipIQA)": 0.8992, "PartiPromts (Sharpness - Laplacian Variance)": 7910.49, "Long Text Bench (edit_distance)": 155.9429, "Long Text Bench (text_word_accuracy)": null, "OneIG (Anime and Stylization) (Alignment Score)": null, "HPS (v2.1)": 0.2121, "GenAI-Bench (VQA)": 0.9673, "Median Inference Time": 15.5713, "Price per Image": 0.025}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX Schnell", "Optimization": "go_fast", "URL": "https://replicate.com/black-forest-labs/flux-schnell", "DrawBench (ClipScore)": 28.0363, "DrawBench (Image Reward)": 0.9009, "GenAI-Bench (VQA)": 0.7765, "OneIG (Anime and Stylization) (Alignment Score)": 0.88, "OneIG (Portrait) (Alignment Score)": 0.79, "OneIG (General Object) (Alignment Score)": 0.83, "PartiPromts (ARNIQA)": 0.5714, "PartiPromts (ClipScore)": 27.9771, "PartiPromts (ClipIQA)": 0.7947, "PartiPromts (Sharpness - Laplacian Variance)": 5685.5457, "HPS (v2.1)": 0.2086, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "Median Inference Time": 0.979, "Price per Image": 0.003}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX Krea", "Optimization": "go_fast", "URL": "https://replicate.com/black-forest-labs/flux-krea-dev", "DrawBench (ClipScore)": 28.3217, "DrawBench (Image Reward)": 0.9533, "PartiPromts (ARNIQA)": 0.6336, "PartiPromts (ClipScore)": 27.88, "PartiPromts (ClipIQA)": 0.8167, "PartiPromts (Sharpness - Laplacian Variance)": 4121.4541, "HPS (v2.1)": 0.1967, "OneIG (Anime and Stylization) (Alignment Score)": 0.88, "OneIG (Portrait) (Alignment Score)": 0.81, "OneIG (General Object) (Alignment Score)": 0.84, "GenAI-Bench (VQA)": 0.8218, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "Median Inference Time": 1.8774, "Price per Image": 0.025}
-{"Platform": "Prodia", "Owner": "Prodia", "Device": "Undisclosed", "Model": "FLUX Schnell", "Optimization": "fast", "URL": "https://app.prodia.com/models", "PartiPromts (ARNIQA)": 0.5726, "PartiPromts (ClipScore)": 27.388, "PartiPromts (ClipIQA)": 0.8827, "PartiPromts (Sharpness - Laplacian Variance)": 5464.0814, "OneIG (Anime and Stylization) (Alignment Score)": null, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "DrawBench (ClipScore)": 27.7805, "DrawBench (Image Reward)": 0.9845, "GenAI-Bench (VQA)": 0.7878, "HPS (v2.1)": 0.2128, "Median Inference Time": 0.7472, "Price per Image": 0.0015}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "1xH100", "Model": "FLUX Dev", "Optimization": "go_fast", "URL": "https://replicate.com/black-forest-labs/flux-dev", "PartiPromts (ARNIQA)": 0.5764, "PartiPromts (ClipScore)": 27.8144, "PartiPromts (ClipIQA)": 0.7859, "PartiPromts (Sharpness - Laplacian Variance)": 5164.9466, "Long Text Bench (edit_distance)": 177.8931, "Long Text Bench (text_word_accuracy)": null, "DrawBench (ClipScore)": 27.7887, "DrawBench (Image Reward)": 1.0318, "OneIG (Anime and Stylization) (Alignment Score)": 0.85, "OneIG (Portrait) (Alignment Score)": 0.78, "OneIG (General Object) (Alignment Score)": 0.8, "HPS (v2.1)": 0.1982, "GenAI-Bench (VQA)": 0.7686, "Median Inference Time": 1.8018, "Price per Image": 0.025}
-{"Platform": "Together AI", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX Schnell", "Optimization": "schnell", "URL": "https://www.together.ai/models/flux-1-schnell", "PartiPromts (ARNIQA)": 0.6082, "PartiPromts (ClipScore)": 27.6475, "PartiPromts (ClipIQA)": 0.898, "PartiPromts (Sharpness - Laplacian Variance)": 6446.8138, "DrawBench (ClipScore)": 27.6897, "DrawBench (Image Reward)": 0.9301, "GenAI-Bench (VQA)": 0.7706, "OneIG (Anime and Stylization) (Alignment Score)": null, "HPS (v2.1)": 0.2058, "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "Median Inference Time": 1.3602, "Price per Image": 0.003}
-{"Platform": "Runware", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX 1.1 Pro", "Optimization": "Undisclosed", "URL": "https://runware.ai/models#", "PartiPromts (ARNIQA)": 0.659, "PartiPromts (ClipScore)": 27.4929, "PartiPromts (ClipIQA)": 0.9074, "PartiPromts (Sharpness - Laplacian Variance)": 6874.5826, "Long Text Bench (edit_distance)": 167.1325, "Long Text Bench (text_word_accuracy)": null, "DrawBench (ClipScore)": 27.7755, "DrawBench (Image Reward)": 0.9277, "HPS (v2.1)": 0.1971, "OneIG (Anime and Stylization) (Alignment Score)": null, "GenAI-Bench (VQA)": 0.7723, "Median Inference Time": 4.2135, "Price per Image": 0.04}
-{"Platform": "Runware", "Owner": "Runware", "Device": "Undisclosed", "Model": "FLUX Schnell", "Optimization": "Undisclosed", "URL": "https://runware.ai/models#", "HPS (v2.1)": 0.2026, "PartiPromts (ARNIQA)": 0.6344, "PartiPromts (ClipScore)": 27.7251, "PartiPromts (ClipIQA)": 0.8873, "PartiPromts (Sharpness - Laplacian Variance)": 7144.7132, "GenAI-Bench (VQA)": 0.769, "OneIG (Anime and Stylization) (Alignment Score)": null, "DrawBench (ClipScore)": 27.9708, "DrawBench (Image Reward)": 0.9571, "Long Text Bench (edit_distance)": 178.3812, "Long Text Bench (text_word_accuracy)": 0.0005, "Median Inference Time": 1.7584, "Price per Image": 0.0013}
-{"Platform": "Together AI", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX Krea", "Optimization": "dev", "URL": "https://www.together.ai/models/flux-1-krea-dev", "Long Text Bench (edit_distance)": 178.5125, "Long Text Bench (text_word_accuracy)": null, "DrawBench (ClipScore)": 28.2254, "DrawBench (Image Reward)": 1.101, "GenAI-Bench (VQA)": 0.797, "PartiPromts (ARNIQA)": 0.618, "PartiPromts (ClipScore)": 27.6353, "PartiPromts (ClipIQA)": 0.8776, "PartiPromts (Sharpness - Laplacian Variance)": 5297.8361, "OneIG (Anime and Stylization) (Alignment Score)": null, "HPS (v2.1)": 0.1981, "Median Inference Time": 4.3831, "Price per Image": 0.025}
-{"Platform": "Bria", "Owner": "Bria", "Device": "Undisclosed", "Model":"FIBO", Optimization: "Undisclosed", "URL": "https://bria.ai/models", "OneIG (Anime and Stylization) (Alignment Score)": 0.87, "Median Inference Time": 15.8328 , "Price per Image": 0.04}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX 1.1 Pro Ultra", "Optimization": "Undisclosed", "URL": "", "OneIG (Anime and Stylization) (Alignment Score)": 0.89, "OneIG (Portrait) (Alignment Score)": 0.8, "OneIG (General Object) (Alignment Score)": 0.85}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX 2 Pro", "Optimization": "", URL: "", "OneIG (Anime and Stylization) (Alignment Score)": 0.92, "OneIG (Portrait) (Alignment Score)": 0.84, "OneIG (General Object) (Alignment Score)": 0.88}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "FLUX 2 Flex", "Optimization": "", URL: "", "OneIG (Anime and Stylization) (Alignment Score)": 0.92, "OneIG (Portrait) (Alignment Score)": 0.84, "OneIG (General Object) (Alignment Score)": 0.90}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "Flux 2 Max", "Optimization": "", URL: "", "OneIG (Anime and Stylization) (Alignment Score)": 0.93, "OneIG (Portrait) (Alignment Score)": 0.85, "OneIG (General Object) (Alignment Score)": 0.89}
-{"Platform": "Replicate", "Owner": "Black Forest Labs", "Device": "Undisclosed", "Model": "Flux 2 Pro", "Optimization": "", URL: "", "OneIG (Anime and Stylization) (Alignment Score)": null, "OneIG (Portrait) (Alignment Score)": 0.84, "OneIG (General Object) (Alignment Score)": 0.90}
-{"Platform": "Replicate", "Owner": "Open AI", "Device": "Undisclosed", "Model": "GPT Image 1.5", "Optimization": "", URL: "", "OneIG (Anime and Stylization) (Alignment Score)": 0.92, "OneIG (Portrait) (Alignment Score)": 0.85, "OneIG (General Object) (Alignment Score)": null}
-{"Platform": "Replicate", "Owner": "Pruna AI", "Device": "Undisclosed", "Model": "Hidream I1 Dev", "Optimzation": "Extra Juiced", "URL":"", "OneIG (Anime and Stylization) (Alignment Score)": 0.87, "OneIG (Portrait) (Alignment Score)": 0.79, "OneIG (General Object) (Alignment Score)": 0.82}
-{"Platform": "Replicate", "Owner": "Pruna AI", "Device": "Undisclosed", "Model": "Hidream I1 Faast", "Optimzation": "Extra Juiced", "URL":"", "OneIG (Anime and Stylization) (Alignment Score)": 0.87, "OneIG (Portrait) (Alignment Score)": 0.79, "OneIG (General Object) (Alignment Score)": 0.82}
-
-

model_display.py

@@ -0,0 +1,214 @@
+"""UI-only model display names.
+
+Raw CSV / sample IDs stay unchanged; this maps aliases to a shared label
+shown in leaderboards, Pareto plots, dropdowns, and sample headers.
+"""
+
+from __future__ import annotations
+
+import re
+
+# Explicit aliases (any leaderboard / sample id) -> shared display label.
+MODEL_DISPLAY_NAMES = {
+    # FLUX
+    "flux_2_pro": "FLUX.2 [pro]",
+    "flux_2_max": "FLUX.2 [max]",
+    "flux_2_flex": "FLUX.2 [flex]",
+    "flux_2_dev": "FLUX.2 [dev]",
+    "flux_1_1_pro": "FLUX1.1 [pro]",
+    "flux_1_1_pro_ultra": "FLUX1.1 [pro] Ultra",
+    "flux_dev": "FLUX.1 [dev]",
+    "flux_schnell": "FLUX.1 [schnell]",
+    "flux_krea": "FLUX.1 Krea [dev]",
+    # GPT Image
+    "gpt_image_2": "GPT Image 2",
+    "GPT Image 2 (high)": "GPT Image 2",
+    "gpt_image_1_5": "GPT Image 1.5",
+    "GPT Image 1.5 (high)": "GPT Image 1.5",
+    "gpt_image_1": "GPT Image 1",
+    "GPT Image 1 (high)": "GPT Image 1",
+    "GPT Image 1 Mini (medium)": "GPT Image 1 Mini",
+    # Nano Banana / Gemini
+    "nano_banana_2_0": "Nano Banana 2",
+    "nano_banana_2": "Nano Banana 2",
+    "Nano Banana 2 (Gemini 3.1 Flash Image Preview)": "Nano Banana 2",
+    "Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image)": "Nano Banana 2 Lite",
+    "nano_banana_pro": "Nano Banana Pro",
+    "Nano Banana Pro (Gemini 3 Pro Image)": "Nano Banana Pro",
+    "Nano Banana (Gemini 2.5 Flash Image)": "Nano Banana",
+    # Seedream
+    "seedream_5_0": "Seedream 5.0",
+    "seedream_4_5": "Seedream 4.5",
+    "seedream_4_0": "Seedream 4.0",
+    "seedream_3": "Seedream 3.0",
+    # Qwen
+    "qwen_image": "Qwen Image",
+    "qwen_image_2_0_pro": "Qwen Image 2.0 Pro",
+    "Qwen Image 2.0 Pro (2026-04-22)": "Qwen Image 2.0 Pro",
+    "Qwen Image 2.0 (2026-03-03)": "Qwen Image 2.0",
+    "qwen_image_2512": "Qwen Image 2512",
+    "Qwen Image Max 2512": "Qwen Image 2512",
+    "qwen_image_fast": "Qwen Image Fast",
+    # Ideogram
+    "ideogram_4_0_quality": "Ideogram 4.0 Quality",
+    "Ideogram 4.0 (Quality)": "Ideogram 4.0 Quality",
+    "Ideogram 4.0 Fast (Quality)": "Ideogram 4.0 Fast Quality",
+    # Imagen
+    "imagen_4_0": "Imagen 4",
+    "imagen_4": "Imagen 4",
+    "Imagen 4 Standard": "Imagen 4",
+    "imagen_4_0_ultra": "Imagen 4 Ultra",
+    "imagen_4_ultra": "Imagen 4 Ultra",
+    "imagen_4_fast": "Imagen 4 Fast",
+    "Imagen 3 (v002)": "Imagen 3",
+    # HiDream
+    "hidream_i1_dev": "HiDream-I1 Dev",
+    "HiDream-I1-Dev": "HiDream-I1 Dev",
+    "hidream_i1_fast": "HiDream-I1 Fast",
+    "HiDream-I1-Fast": "HiDream-I1 Fast",
+    "hidream_i1_full": "HiDream-I1 Full",
+    "HiDream-O1-Image": "HiDream-O1",
+    "HiDream-O1-Image-1.5": "HiDream-O1 1.5",
+    "HiDream-O1-Image-Dev": "HiDream-O1 Dev",
+    # Reve
+    "reve_2_1": "Reve 2.1",
+    "Reve Image (Halfmoon)": "Reve Image",
+    # P-Image
+    "p_image": "P-Image",
+    "p_image_2_ideogram_very_low_1k": "P-Image-Ideogram Very Low 1K",
+    "p_image_2_ideogram_very_low_2k": "P-Image-Ideogram Very Low 2K",
+    "P-Image-Ideogram (Very Low)": "P-Image-Ideogram Very Low",
+    "p_image_2_ideogram_low_1k": "P-Image-Ideogram Low 1K",
+    "p_image_2_ideogram_low_2k": "P-Image-Ideogram Low 2K",
+    "P-Image-Ideogram (Low)": "P-Image-Ideogram Low",
+    "p_image_2_ideogram_medium_1k": "P-Image-Ideogram Medium 1K",
+    "p_image_2_ideogram_medium_2k": "P-Image-Ideogram Medium 2K",
+    "P-Image-Ideogram (Medium)": "P-Image-Ideogram Medium",
+    "p_image_2_ideogram_high_1k": "P-Image-Ideogram High 1K",
+    "p_image_2_ideogram_high_2k": "P-Image-Ideogram High 2K",
+    "P-Image-Ideogram (High)": "P-Image-Ideogram High",
+    # Others overlapping P-Bench
+    "z_image": "Z-Image",
+    "glm_image": "GLM-Image",
+    "hunyuanimage_3_0": "HunyuanImage 3.0",
+    "hunyuan_image_3": "HunyuanImage 3.0",
+    "HunyuanImage 3.0 (Fal)": "HunyuanImage 3.0",
+    "HunyuanImage 3.0 Instruct (Fal)": "HunyuanImage 3.0 Instruct",
+    "wan_2_2_image": "Wan 2.2 Image",
+    "Wan2.6 Text to Image": "Wan 2.6 Text to Image",
+    "kling_v2_1": "Kling v2.1",
+    "juggernaut_base_flux": "Juggernaut Base FLUX",
+    "juggernaut_pro_flux": "Juggernaut Pro FLUX",
+    "juggernaut_lightning_flux": "Juggernaut Lightning FLUX",
+    "bria_4_fibo": "Bria FIBO",
+    "sdxl": "SDXL 1.0",
+    "Stable Diffusion XL 1.0": "SDXL 1.0",
+    "sdxl_lightning": "SDXL Lightning",
+    # Arena AI (kebab / arena.ai ids)
+    "gpt-image-2 (medium)": "GPT Image 2",
+    "gpt-image-1.5-high-fidelity": "GPT Image 1.5",
+    "gpt-image-1": "GPT Image 1",
+    "gpt-image-1-mini": "GPT Image 1 Mini",
+    "mai-image-2.6-preview": "MAI-Image-2.6 Preview",
+    "mai-image-2.5": "MAI-Image-2.5",
+    "mai-image-2": "MAI-Image-2",
+    "mai-image-1": "MAI Image 1",
+    "grok-imagine-image-2.0 (low)": "Grok Imagine Image 2.0",
+    "grok-imagine-image": "Grok Imagine Image",
+    "grok-imagine-image-pro": "Grok Imagine Image Pro",
+    "reve-2.1": "Reve 2.1",
+    "reve-2.0": "Reve 2.0",
+    "reve-v1.5": "Reve 1.5",
+    "muse-image": "Muse Image",
+    "gemini-3.1-flash-image (nano-banana-2) [web-search]": "Nano Banana 2",
+    "gemini-3.1-flash-lite-image (nano-banana-2-lite)": "Nano Banana 2 Lite",
+    "gemini-3-pro-image-2k (nano-banana-pro)": "Nano Banana Pro 2K",
+    "gemini-3-pro-image-preview (nano-banana-pro)": "Nano Banana Pro",
+    "gemini-2.5-flash-image-preview (nano-banana)": "Nano Banana",
+    "gemini-2.0-flash-preview-image-generation": "Gemini 2.0 Flash Image",
+    "seedream-5.0-pro": "Seedream 5.0 Pro",
+    "seedream-5.0-lite": "Seedream 5.0 Lite",
+    "seedream-4.5": "Seedream 4.5",
+    "seedream-4-2k": "Seedream 4.0 2K",
+    "seedream-4-fal": "Seedream 4.0",
+    "seedream-4-high-res-fal": "Seedream 4.0 High Res",
+    "seedream-3": "Seedream 3.0",
+    "qwen-image-3.0-pro": "Qwen Image 3.0 Pro",
+    "qwen-image-2.0-pro-2026-06-22": "Qwen Image 2.0 Pro",
+    "qwen-image-2512": "Qwen Image 2512",
+    "qwen-image-prompt-extend": "Qwen Image Prompt Extend",
+    "qwen-image": "Qwen Image",
+    "uni-1.1-max": "Luma UNI 1 Max",
+    "uni-1.1": "Luma UNI 1",
+    "Cosmos3-Super-Text2Image (Agentic)": "Cosmos3 Super Text2Image (Agentic)",
+    "Cosmos3-Super-Text2Image": "Cosmos3 Super Text2Image",
+    "recraft-v4.1-utility-pro": "Recraft V4.1 Utility Pro",
+    "recraft-v4.1-pro": "Recraft V4.1 Pro",
+    "recraft-v4": "Recraft V4",
+    "recraft-v3": "Recraft V3",
+    "flux-2-max": "FLUX.2 [max]",
+    "flux-2-flex": "FLUX.2 [flex]",
+    "flux-2-pro": "FLUX.2 [pro]",
+    "flux-2-dev": "FLUX.2 [dev]",
+    "flux-2-klein-9b": "FLUX.2 [klein] 9B",
+    "flux-2-klein-4b": "FLUX.2 [klein] 4B",
+    "flux-1-kontext-max": "FLUX.1 Kontext [max]",
+    "flux-1-kontext-pro": "FLUX.1 Kontext [pro]",
+    "flux-1-kontext-dev": "FLUX.1 Kontext [dev]",
+    "flux-1.1-pro": "FLUX1.1 [pro]",
+    "flux-1-dev-fp8": "FLUX.1 [dev]",
+    "hunyuan-image-3.0": "HunyuanImage 3.0",
+    "imagen-ultra-4.0-generate-001": "Imagen 4 Ultra",
+    "imagen-4.0-generate-001": "Imagen 4",
+    "imagen-3.0-generate-002": "Imagen 3",
+    "wan2.6-t2i": "Wan 2.6 Text to Image",
+    "wan2.5-t2i-preview": "Wan 2.5 Preview",
+    "wan2.7-image-pro": "Wan 2.7 Pro",
+    "wan2.7-image": "Wan 2.7",
+    "ideogram-4.0-quality": "Ideogram 4.0 Quality",
+    "ideogram-v3-quality": "Ideogram 3.0",
+    "ideogram-v2": "Ideogram v2",
+    "krea-2-medium": "Krea 2 Medium",
+    "krea-2-turbo": "Krea 2 Medium Turbo",
+    "krea-2-large": "Krea 2 Large",
+    "hidream-o1-image": "HiDream-O1",
+    "z-image-turbo": "Z-Image Turbo",
+    "photon": "Luma Photon",
+    "p-image": "P-Image",
+    "runway-gen4": "Runway Gen-4 Image",
+    "lucid-origin": "Lucid Origin",
+    "glm-image": "GLM-Image",
+    "dall-e-3": "DALLE 3",
+    "stable-diffusion-v35-large": "Stable Diffusion 3.5 Large",
+    "bagel": "Bagel",
+}
+
+
+def _prettify_snake_case(model_id: str) -> str:
+    parts = [part for part in str(model_id).split("_") if part]
+    pretty = []
+    for part in parts:
+        if part.isdigit():
+            pretty.append(part)
+        elif re.fullmatch(r"\d+k", part, flags=re.IGNORECASE):
+            pretty.append(part.upper())
+        elif part.lower() in {"flux", "gpt", "sdxl", "glm"}:
+            pretty.append(part.upper())
+        else:
+            pretty.append(part.capitalize())
+    return " ".join(pretty)
+
+
+def display_model_name(model_id) -> str:
+    """Return the shared UI label for a raw model id / source name."""
+    if model_id is None:
+        return ""
+    raw = str(model_id).strip()
+    if not raw:
+        return ""
+    if raw in MODEL_DISPLAY_NAMES:
+        return MODEL_DISPLAY_NAMES[raw]
+    # Already a human label (spaces / punctuation) — keep as-is.
+    if re.search(r"[\s.\[\]()]", raw):
+        return raw
+    return _prettify_snake_case(raw)

requirements.txt

@@ -1,2 +1 @@
-gradio-leaderboard
-plotly
+plotly

ui.py

@@ -1,317 +1,416 @@
 from html import escape
+from pathlib import Path
+import base64
 import random
 
 import gradio as gr
 import pandas as pd
 import plotly.graph_objects as go
 
+from model_display import display_model_name
+
+_LOGO_PATH = Path(__file__).resolve().parent / "pruna-logo.png"
+_LOGO_DATA_URI = (
+    "data:image/png;base64,"
+    + base64.b64encode(_LOGO_PATH.read_bytes()).decode("ascii")
+    if _LOGO_PATH.exists()
+    else "https://playground.pruna.ai/logo.svg"
+)
+
 
-FILTER_COLUMNS = ["Platform", "Endpoint Owner", "Model", "Optimized"]
 MAX_COMPARE_MODELS = 4
 DEFAULT_COMPARE_PROMPTS = 3
 MAX_COMPARE_PROMPTS = 8
+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)"
+
+TAB_LEADERBOARDS = "leaderboards"
+TAB_PARETO = "pareto"
+TAB_SAMPLES = "samples"
+TAB_ABOUT = "about"
+
+_MODEL_CHOICES_CACHE = {}
+_VIEW_EVENTS = {
+    "show_progress": "hidden",
+    "trigger_mode": "always_last",
+    "concurrency_id": "workspace-views",
+    "concurrency_limit": 1,
+}
 
-ALL_LEADERBOARD_NOTE = """
-> **💡 Note:** Each efficiency metric and quality metric captures only one dimension of
-> model capacity. Rankings may vary when considering other metrics. "Endpoint Owner"
-> refers to the publisher of the evaluated endpoint and may differ from the original
-> model creator. "Optimized" indicates that the endpoint uses an explicit optimization
-> mode or serves a modified/accelerated variant.
-"""
-
-ONEIG_SCORES_CONTENT = """
-### Reported OneIG scores
-
-- **Anime Alignment** — alignment for anime and stylization prompts
-- **Human Alignment** — alignment for portrait prompts
-- **Object Alignment** — alignment for general-object prompts
-
-The leaderboard's **OneIG Overall Score** is the mean of each model's available
-category scores.
-"""
-
-ONEIG_RUN_DETAILS_CONTENT = """
-### Reading the results
-
-Each row records the evaluation date, generation time, price per image, and links to
-the source evaluation runs when available. Use the filters in the leaderboard to
-compare providers, models, and optimized variants.
-"""
-
-P_JUDGE_SCORES_CONTENT = """
-### Reported P-Judge scores
-
-- **P-Judge Overall** — automatic preference / quality score for generated images
-
-Higher scores indicate stronger performance on the P-Judge evaluation.
+ABOUT_OVERVIEW_CONTENT = """
+# About P-Bench
+
+P-Bench compares **text-to-image models**, including optimized or accelerated
+endpoints, on **quality, speed, and price**. Each view is a **dataset** scored
+with a **metric**, written as `Dataset | Metric`. There is no single score
+across P-Bench.
+
+## How to read it
+
+1. Pick a **dataset** and a **metric**.
+2. **Leaderboards**: ranked by that metric. Price and generation time sit in
+   the same table when the source publishes them.
+3. **Pareto plots**: mark models that are not beaten on both higher score
+   and lower price (or time). Only datasets with price or generation time
+   can open this tab (not Arena AI).
+4. **Samples**: the same prompts, side by side. Only for datasets we
+   generated (Qwen Image Dataset and OneIG Alignment Dataset).
+
+## How a score is made
+
+On **Qwen Image Dataset** and **OneIG Alignment Dataset**:
+
+1. Each endpoint is given the same prompt suite.
+2. It generates one image per prompt when the run succeeds. Not every model
+   has every prompt or every metric.
+3. Quality is scored automatically (OneIG alignment, P-Judger) and, where
+   available, by human preference (Datapoint Elo, Rapidata Elo).
+4. Price per image and generation time are joined from the evaluation table.
+
+**Artificial Analysis** and **Arena AI** are external leaderboards. We import
+their published Elos (and Artificial Analysis price). We do not run their
+prompt suites, so samples are not shown.
+
+## Current datasets
+
+### Qwen Image Dataset
+100 prompts from the 1,000-prompt Qwen Image Bench set, sampled for coverage
+across its fine-grained (L3) categories. Metrics include Datapoint Elo,
+Rapidata Elo, and P-Judger. Samples are available.
+
+### OneIG Alignment Dataset
+Prompt-image **alignment** on anime / stylization (100), human / portrait
+(100), and general object prompts (99). This is the alignment slice of
+OneIG, not the full suite. Alignment Overall is the mean of the category
+scores that exist for that row. Also includes Datapoint category Elo,
+Rapidata Elo, and P-Judger. Samples are available.
+
+### Artificial Analysis Dataset
+External text-to-image Elo and price per image from Artificial Analysis.
+Their prompt set is private, so samples are not shown. Pareto plots use
+price vs score only.
+
+### Arena AI Dataset
+External text-to-image Elo (overall and category) from Arena AI. Their
+prompt set is private, so samples are not shown. Price and generation time
+are not in this export, so Pareto plots are unavailable.
 """
 
-P_JUDGE_RUN_DETAILS_CONTENT = """
-### Reading the results
-
-Each row records the evaluation date, generation time, and price per image when
-available. Rankings are ordered by **P-Judge Overall**.
+ABOUT_DETAILS_CONTENT = """
+# Metrics & limits
+
+## Metrics
+
+- **Alignment**: how well the image matches the prompt (OneIG category scores).
+- **P-Judger**: Pruna's automatic judger. A private scoring model that rates
+  each (prompt, image) pair in one pass and returns an absolute quality score,
+  not a pairwise Elo. It is not a text-to-image model on the leaderboard. Use
+  it alongside Datapoint and Rapidata Elo, not instead of them.
+- **Datapoint Elo**: human-preference Elo from Datapoint pairwise comparisons.
+- **Rapidata Elo**: human-preference Elo from Rapidata pairwise comparisons.
+  Rapidata rejects prompts over 400 characters, so this Elo is on a subset
+  of each suite (see Setup). Rapidata is not a dataset.
+- **Artificial Analysis Elo**: Elo published by Artificial Analysis on their
+  own dataset.
+- **Arena Elo**: Elo published by Arena AI on their own dataset, plus
+  category Elos (branding, 3D, cartoon/anime, photorealistic, art, portraits,
+  text rendering).
+- **Generation time**: median and minimum generation time in seconds, as
+  reported in the evaluation table. This is not a p95, and we do not state
+  warm vs cold or concurrent load. Not available for Arena AI.
+- **Price**: USD per image in the evaluation table. We do not state list
+  price vs amount paid, or whether failed generations are included. Not
+  available for Arena AI.
+
+Scores from different datasets or metrics are **not interchangeable**. A high
+OneIG alignment score is not the same quantity as a Datapoint Elo. Compare
+models *within* a Dataset | Metric view.
+
+## Setup
+
+- **Evaluation window:** July–August 2026.
+- **Update policy:** numbers come from evaluation snapshots in the tables,
+  not a live API poll.
+- **Prompt counts:** OneIG Alignment uses 100 anime, 100 human, and 99 object
+  prompts (299 total). Qwen Image Dataset uses 100 prompts sampled from the
+  1,000-prompt pool for roughly even coverage of its fine-grained (L3)
+  categories. Artificial Analysis and Arena AI use their own private prompt
+  sets.
+- **Generation (Qwen and OneIG):** one image per prompt per endpoint when
+  the run exists. Default resolution is 1024×1024. Exceptions: FLUX 1.1 Pro
+  Ultra at 2K, FLUX 2 Flex at 1008×1008, and any endpoint labeled 2K. The
+  seed is derived from the prompt, so every model gets the same seed for the
+  same prompt. Steps, CFG, prompt rewrite, and safety filters follow each
+  endpoint's default. This does not describe Artificial Analysis or Arena AI.
+- **Datapoint (Qwen and OneIG):** every model pair is compared on every
+  prompt, with 10 votes per battle.
+- **Rapidata (Qwen and OneIG):** prompts longer than 400 characters are
+  dropped, leaving 212 OneIG prompts and 85 Qwen Image Dataset prompts. 4
+  votes per pair; about 26,000 votes on OneIG and 35,000 on Qwen Image
+  Dataset.
+
+## Limits
+
+- Empty cells mean that track was not run or not reported for that model.
+- Artificial Analysis and Arena AI samples, prompts, and (for Arena) price
+  or latency are not available to P-Bench.
+- Rapidata Elo is not on the full prompt suite, so it is not directly
+  comparable to Datapoint Elo even on the same dataset.
+- Elo ratings can shift when the comparison pool changes: treat them as
+  relative rankings for the snapshot, not absolute constants.
+- Close scores can be a tie in practice; the table does not show confidence
+  intervals.
+- Optimized or accelerated endpoints (when labeled) may differ from the base
+  model publisher's default serving stack.
+- APIs and prices drift; a rank is for the snapshot, not a guarantee.
+
+Built by [Pruna AI](https://www.pruna.ai/). If you have questions, reach out
+to us on [Discord](https://discord.gg/JFQmtFKCjd).
 """
 
-DATAPOINT_ELO_SCORES_CONTENT = """
-### Reported Datapoint Elo scores
-
-- **Datapoint Elo** — human-preference Elo rating from pairwise comparisons
-
-Elo values move whenever new models are added and re-evaluated against the field,
-so the Date column reflects the leaderboard snapshot date.
+FOOTER_CONTENT = """
+<div class="page-footer">
+  <h3>Join the Pruna AI community</h3>
+  <div class="community-footer-links">
+    <a rel="nofollow" href="https://x.com/PrunaAI" target="_blank">X</a>
+    <a rel="nofollow" href="https://www.linkedin.com/company/pruna-ai" target="_blank">LinkedIn</a>
+    <a rel="nofollow" href="https://www.instagram.com/pruna.ai/" target="_blank">Instagram</a>
+    <a rel="nofollow" href="https://discord.gg/JFQmtFKCjd" target="_blank">Discord</a>
+    <a rel="nofollow" href="https://github.com/PrunaAI/pruna" target="_blank">GitHub</a>
+    <a rel="nofollow" href="https://www.pruna.ai/" target="_blank">pruna.ai</a>
+  </div>
+</div>
 """
 
-DATAPOINT_ELO_RUN_DETAILS_CONTENT = """
-### Reading the results
-
-Each row records the snapshot date, generation time, and price per image when
-available. Rankings are ordered by **Datapoint Elo**.
+CITATION_CONTENT = """
+```bibtex
+@misc{P-Bench,
+    title={P-Bench: A Leaderboard for Text-to-Image Models},
+    author={PrunaAI},
+    year={2026},
+    howpublished={\\url{https://huggingface.co/spaces/PrunaAI/P-Bench}}
+}
+```
 """
 
-RAPIDATA_ELO_SCORES_CONTENT = """
-### Reported Rapidata Elo scores
 
-- **Rapidata Elo** — Elo rating from the Rapidata evaluation suite
-
-Higher Elo indicates stronger relative performance on that suite.
-"""
+def render_header():
+    gr.HTML(
+        f"""
+        <header class="app-header">
+          <div class="app-header-bar">
+            <div class="app-header-brand">
+              <img class="app-header-logo" src="{_LOGO_DATA_URI}" alt="" />
+              <h1>P-Bench</h1>
+            </div>
+            <button type="button" class="theme-toggle" data-mode="dark" aria-label="Switch to light mode" title="Switch to light mode">
+              <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <circle cx="12" cy="12" r="4"></circle>
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+              </svg>
+              <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5z"></path>
+              </svg>
+            </button>
+          </div>
+          <p class="app-header-tagline">Compare text-to-image models on quality, speed, and price</p>
+        </header>
+        """,
+        padding=False,
+        elem_classes="app-header-host",
+    )
 
-RAPIDATA_ELO_RUN_DETAILS_CONTENT = """
-### Reading the results
 
-Each row records generation time and price per image when available. Rankings are
-ordered by **Rapidata Elo**.
-"""
+def _item(items, item_id):
+    for item in items:
+        if item["id"] == item_id:
+            return item
+    return items[0] if items else None
 
-BENCHMARK_AI_ELO_SCORES_CONTENT = """
-### Reported Benchmark.ai Elo scores
 
-- **Benchmark.ai Elo** — Elo rating from the Benchmark.ai leaderboard
+def _dataset_choices(datasets, *, require_samples=False, require_pareto=False):
+    return [
+        (dataset["name"], dataset["id"])
+        for dataset in datasets
+        if (not require_samples or dataset.get("samples"))
+        and (not require_pareto or _dataset_has_pareto(datasets, dataset["id"]))
+    ]
 
-This score is not from the Qwen Image Bench prompt suite; it is shown alongside for
-cross-benchmark comparison.
-"""
 
-BENCHMARK_AI_ELO_RUN_DETAILS_CONTENT = """
-### Reading the results
+def _dataset_has_samples(datasets, dataset_id):
+    dataset = _item(datasets, dataset_id)
+    return bool(dataset and dataset.get("samples"))
 
-Each row records generation time and price per image when available. Rankings for
-this metric alone are ordered by **Benchmark.ai Elo**.
-"""
 
-ABOUT_OVERVIEW_CONTENT = """
-# About InferBench
+def _dataset_has_pareto(datasets, dataset_id):
+    dataset = _item(datasets, dataset_id)
+    columns = getattr(dataset.get("data") if dataset else None, "columns", [])
+    return _PARETO_PRICE_COLUMN in columns or _PARETO_TIME_COLUMN in columns
 
-InferBench compares **text-to-image models** on quality, preference, latency, and
-price. Results are organized by prompt suite (benchmark), not by a single opaque
-score.
 
-## What you can do here
+def _dataset_dropdown_update(datasets, tab, dataset_id):
+    """Limit the dataset list to what the current tab can show."""
+    return gr.update(
+        choices=_dataset_choices(
+            datasets,
+            require_samples=tab == TAB_SAMPLES
+            and _dataset_has_samples(datasets, dataset_id),
+            require_pareto=tab == TAB_PARETO
+            and _dataset_has_pareto(datasets, dataset_id),
+        ),
+        value=dataset_id,
+    )
 
-- **Home** — snapshot of each prompt suite and unique model count.
-- **Benchmarks** — open a prompt suite to see its metric columns, graphs (including a
-  quality-vs-price Pareto frontier), and side-by-side sample generations.
-- **About** — this page.
 
-## Current prompt suites
+ALL_METRICS_ID = "__all__"
 
-### OneIG Alignment
-The **alignment** slice of OneIG (not the full OneIG suite), across three categories:
 
-- Anime / stylization
-- Human / portrait
-- General object
+def _metric_choices(datasets, metrics, dataset_id):
+    dataset = _item(datasets, dataset_id)
+    if not dataset:
+        return []
+    allowed = set(dataset.get("metric_ids") or [])
+    data = dataset.get("data")
+    columns = getattr(data, "columns", [])
+    return [
+        (_display_label(metric["column"]), metric["id"])
+        for metric in metrics
+        if metric["id"] in allowed and metric["column"] in columns
+    ]
 
-The table reports category **alignment scores**, **Datapoint Elo** columns (Anime /
-Human / Object), median / min generation time, and price per image. Rankings use the
-mean of each model's available category alignment scores (missing categories are
-skipped for that model).
 
-### Qwen Image Bench
-A shared prompt suite with multiple evaluation tracks shown as columns:
+def _metric_dropdown_choices(datasets, metrics, dataset_id):
+    choices = _metric_choices(datasets, metrics, dataset_id)
+    if not choices:
+        return []
+    return [("Select all", ALL_METRICS_ID)] + choices
 
-- **P-Judge Overall** — automatic preference / quality score
-- **Datapoint Elo** — human-preference Elo (default sort key)
-- **Rapidata Elo** — Elo from the Rapidata evaluation on this suite
 
-Plus latency and price metadata, and combined generations for visual comparison.
+def _normalize_metric_ids(metric_id):
+    if metric_id is None or metric_id == "":
+        return []
+    if isinstance(metric_id, (list, tuple)):
+        return [item for item in metric_id if item]
+    return [metric_id]
 
-## How to read the numbers
 
-Quality metrics from different suites are **not interchangeable** — a high OneIG
-Alignment score is not the same quantity as a Datapoint Elo. Prefer comparing models
-*within* a benchmark column, and use price / generation time when you care about
-efficiency.
+def _coerce_metric(datasets, metrics, dataset_id, metric_id):
+    """Valid metric ids for this dataset. Empty means all metrics."""
+    wanted = _normalize_metric_ids(metric_id)
+    valid_ids = [choice[1] for choice in _metric_choices(datasets, metrics, dataset_id)]
+    valid = set(valid_ids)
+    if ALL_METRICS_ID in wanted:
+        return list(valid_ids)
+    return [item for item in wanted if item in valid]
 
-The Pareto plot highlights models that are not dominated on both **higher score** and
-**lower price**.
-"""
 
-ABOUT_DETAILS_CONTENT = """
-# Data & caveats
-
-- Endpoint **price** and **generation time** come from the evaluation snapshots linked
-  in each table where available.
-- Some models are missing individual metric columns; empty cells mean that track was
-  not run (or not reported) for that model.
-- Elo ratings can shift when the comparison pool changes — treat them as relative
-  rankings for the snapshot, not absolute constants.
-- Optimized / accelerated endpoints (when labeled) may differ from the base model
-  publisher's default serving stack.
-
-Built by [Pruna AI](https://www.pruna.ai/). Contributions and new evaluation runs welcome.
-"""
+def _metric_dropdown_value(metric_id):
+    return [
+        item
+        for item in _normalize_metric_ids(metric_id)
+        if item != ALL_METRICS_ID
+    ]
 
-COMMUNITY_CONTENT = """
-<div class="community-footer">
-  <h3>Join the Pruna AI community</h3>
-  <div class="community-footer-links">
-    <a rel="nofollow" href="https://x.com/PrunaAI" target="_blank">X / Twitter</a>
-    <a rel="nofollow" href="https://github.com/PrunaAI/pruna" target="_blank">GitHub</a>
-    <a rel="nofollow" href="https://www.linkedin.com/company/pruna-ai" target="_blank">LinkedIn</a>
-    <a rel="nofollow" href="https://discord.com/invite/rskEr4BZJx" target="_blank">Discord</a>
-    <a rel="nofollow" href="https://www.reddit.com/r/PrunaAI/" target="_blank">Reddit</a>
-    <a rel="nofollow" href="https://www.pruna.ai/" target="_blank">pruna.ai</a>
-  </div>
-</div>
-"""
 
-CITATION_CONTENT = """
-```bibtex
-@misc{InferBench,
-    title={InferBench: A Leaderboard for Text-to-Image Models},
-    author={PrunaAI},
-    year={2026},
-    howpublished={\\url{https://huggingface.co/spaces/PrunaAI/InferBench}}
-}
-```
-"""
+def _model_choices(datasets, dataset_id):
+    cached = _MODEL_CHOICES_CACHE.get(dataset_id)
+    if cached is not None:
+        return cached
+    dataset = _item(datasets, dataset_id)
+    data = dataset.get("data") if dataset else None
+    if data is None or "Model" not in getattr(data, "columns", []):
+        _MODEL_CHOICES_CACHE[dataset_id] = []
+        return []
+    models = data["Model"].dropna().astype(str).unique().tolist()
+    # (label, value) so the UI shows the shared name but filters on the raw id.
+    choices = sorted(
+        ((display_model_name(model), model) for model in models),
+        key=lambda item: item[0].casefold(),
+    )
+    _MODEL_CHOICES_CACHE[dataset_id] = choices
+    return choices
 
 
-def render_header():
-    gr.HTML(
-        """
-        <div style="text-align: center;">
-            <h1>InferBench</h1>
-            <h2>Compare text-to-image models on quality, speed, and price</h2>
-        </div>
-        """
-    )
+def _model_choice_values(choices):
+    return [choice[1] if isinstance(choice, tuple) else choice for choice in choices]
 
 
-def _top_models(data, score_column, n=3):
-    if score_column not in data.columns or "Model" not in data.columns:
+def _metric_columns(datasets, metrics, dataset_id):
+    dataset = _item(datasets, dataset_id)
+    if not dataset:
         return []
-    ranked = (
-        data[["Model", score_column]]
-        .dropna(subset=[score_column])
-        .loc[lambda df: ~df["Model"].astype(str).str.startswith("#")]
-        .sort_values(score_column, ascending=False)
-        .head(n)
-    )
+    data = dataset.get("data")
+    columns = getattr(data, "columns", [])
+    allowed = set(dataset.get("metric_ids") or [])
     return [
-        (str(row["Model"]), float(row[score_column]))
-        for _, row in ranked.iterrows()
+        metric["column"]
+        for metric in metrics
+        if metric["id"] in allowed and metric["column"] in columns
     ]
 
 
-def _home_highlights(benchmarks):
-    """Quality leaders per suite — more relevant than cheapest/fastest outliers."""
-    highlights = []
-    unique_models = set()
-    for benchmark in benchmarks:
-        data = benchmark.get("data")
-        if data is None or "Model" not in getattr(data, "columns", []):
-            continue
-        active = data[~data["Model"].astype(str).str.startswith("#")]
-        unique_models.update(active["Model"].astype(str).tolist())
-
-        score_column = benchmark.get("overall_column")
-        score_columns = benchmark.get("score_columns") or []
-        if not score_column or score_column not in data.columns:
-            score_column = score_columns[0] if score_columns else None
-        top = _top_models(data, score_column, n=1) if score_column else []
-        if not top:
-            continue
-        model, score = top[0]
-        highlights.append(
-            {
-                "label": f"BEST {benchmark['title'].upper()}",
-                "model": model,
-                "detail": f"{_display_label(score_column)} · {_format_score(score)}",
-            }
-        )
-
-    if unique_models:
-        highlights.append(
-            {
-                "label": "MODELS SCORED",
-                "model": str(len(unique_models)),
-                "detail": "unique across prompt suites",
-            }
-        )
-    return highlights
-
-
-def render_home(benchmarks):
-    highlights = _home_highlights(benchmarks)
-
-    gr.Markdown(
-        """
-        InferBench is organized by **prompt suite**. There is no single global
-        “best model” score — open a benchmark for full tables, graphs, and sample
-        comparisons.
-        """
+_LEADERBOARD_IDENTITY_COLUMNS = [
+    "Model",
+    "Platform",
+    "Endpoint Owner",
+    "Optimized",
+]
+_LEADERBOARD_META_COLUMNS = [
+    "Median Generation Time (s)",
+    "Min Generation Time (s)",
+    "Price / Image (USD)",
+    "Evaluation Date (UTC)",
+    "Date",
+]
+
+
+def _columns_for_metric(dataset, score_columns):
+    """When metrics are selected, show identity + those scores + time/price."""
+    available = list(getattr(dataset.get("data"), "columns", [])) or list(
+        dataset.get("columns") or []
     )
+    identity = [column for column in _LEADERBOARD_IDENTITY_COLUMNS if column in available]
+    meta = [column for column in _LEADERBOARD_META_COLUMNS if column in available]
+    scores = [column for column in (score_columns or []) if column in available]
+    if scores:
+        return [*identity, *scores, *meta]
+    return [column for column in (dataset.get("columns") or available) if column != "URL"]
 
-    if highlights:
-        callout_bits = [
-            f"<div><span>{escape(item['label'])}</span>"
-            f"<strong>{escape(item['model'])}</strong>"
-            f"<em>{escape(item['detail'])}</em></div>"
-            for item in highlights
+
+def resolve_view(datasets, metrics, dataset_id, metric_id):
+    dataset = _item(datasets, dataset_id)
+    if not dataset:
+        return None
+    data_columns = getattr(dataset.get("data"), "columns", [])
+    score_columns = []
+    for metric_key in _coerce_metric(datasets, metrics, dataset_id, metric_id):
+        metric = _item(metrics, metric_key)
+        if metric and metric["column"] in data_columns:
+            score_columns.append(metric["column"])
+    if score_columns:
+        columns = _columns_for_metric(dataset, score_columns)
+    else:
+        columns = [
+            column
+            for column in (dataset.get("columns") or [])
+            if column != "URL"
         ]
-        gr.HTML(f'<div class="home-callouts">{"".join(callout_bits)}</div>')
-
-    gr.Markdown("### Benchmark snapshots")
-    with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
-        for benchmark in benchmarks:
-            data = benchmark["data"]
-            score_column = benchmark.get("overall_column")
-            score_columns = benchmark.get("score_columns") or []
-            if not score_column or score_column not in data.columns:
-                score_column = score_columns[0] if score_columns else None
-            top = _top_models(data, score_column, n=3) if score_column else []
-            score_label = _display_label(score_column) if score_column else "Score"
-            rows_html = "".join(
-                f"<li><span class='home-rank'>{idx}</span>"
-                f"<span class='home-model'>{escape(model)}</span>"
-                f"<span class='home-score'>{_format_score(score)}</span></li>"
-                for idx, (model, score) in enumerate(top, start=1)
-            ) or "<li class='home-empty'>No scores yet.</li>"
-
-            with gr.Column(scale=1, min_width=280):
-                gr.HTML(
-                    f"""
-                    <div class="home-benchmark-card">
-                      <div class="home-benchmark-title">
-                        {escape(benchmark.get("emoji", "📊"))}
-                        {escape(benchmark["title"])}
-                      </div>
-                      <p class="home-benchmark-blurb">
-                        {escape(benchmark.get("card_description", ""))}
-                      </p>
-                      <div class="home-top-label">Top 3 by {escape(score_label)}</div>
-                      <ol class="home-top-list">{rows_html}</ol>
-                    </div>
-                    """
-                )
+        score_columns = _metric_columns(datasets, metrics, dataset_id)
+    return {
+        "data": dataset["data"],
+        "columns": columns,
+        "score_column": score_columns[0] if score_columns else None,
+        "score_columns": score_columns,
+        "samples": dataset.get("samples"),
+        "note": dataset.get("note"),
+    }
 
 
 def _format_leaderboard_cell(column, value):
     if pd.isna(value) or value is None or value == "":
-        return "—"
+        return "-"
     label = str(column).lower()
     if label == "rank":
         return str(int(value))
@@ -323,6 +422,8 @@ def _format_leaderboard_cell(column, value):
         except (TypeError, ValueError):
             return escape(str(value))
     if label in {"model", "platform", "endpoint owner", "optimized"}:
+        if label == "model":
+            return escape(display_model_name(value))
         return escape(str(value))
     try:
         number = float(value)
@@ -353,10 +454,34 @@ def _leaderboard_sort_type(column):
     return "number"
 
 
-def _leaderboard_html(data, columns, score_columns, overall_column):
-    leaderboard = _leaderboard_dataframe(
-        data, columns, score_columns, overall_column
-    )
+def _leaderboard_cell_class(column):
+    if column == "Rank":
+        return "rank"
+    if column == "Model":
+        return "model-cell"
+    if _leaderboard_sort_type(column) == "text":
+        return "text-cell"
+    return "metric-score"
+
+
+def _assign_leaderboard_ranks(data, overall_column):
+    """Rank the full table by the selected metric. Filters keep these numbers."""
+    if data is None:
+        return data
+    ranked = data.copy()
+    if "Rank" in ranked.columns:
+        ranked = ranked.drop(columns=["Rank"])
+    if overall_column and overall_column in ranked.columns:
+        ranked = ranked.sort_values(
+            overall_column, ascending=False, na_position="last"
+        )
+    ranked = ranked.reset_index(drop=True)
+    ranked.insert(0, "Rank", ranked.index + 1)
+    return ranked
+
+
+def _leaderboard_html(data, columns):
+    leaderboard = _leaderboard_dataframe(data, columns)
     if leaderboard.empty:
         return (
             '<div class="ranking-table-scroll">'
@@ -367,18 +492,19 @@ def _leaderboard_html(data, columns, score_columns, overall_column):
     header_cells = []
     for index, column in enumerate(leaderboard.columns):
         sort_type = _leaderboard_sort_type(column)
+        cell_class = _leaderboard_cell_class(column)
         header_cells.append(
-            f'<th class="sortable-col" data-col="{index}" data-type="{sort_type}" '
-            f'title="Sort by {escape(str(column))}">{escape(str(column))}</th>'
+            f'<th class="sortable-col {cell_class}" data-col="{index}" '
+            f'data-type="{sort_type}" title="Sort by {escape(str(column))}">'
+            f"{escape(str(column))}</th>"
         )
     body_rows = []
     for _, row in leaderboard.iterrows():
         cells = []
         for column in leaderboard.columns:
-            css = "rank" if column == "Rank" else "metric-score"
+            css = _leaderboard_cell_class(column)
             sort_value = escape(_leaderboard_sort_value(column, row[column]), quote=True)
             if column == "Model":
-                css = "model-cell"
                 cells.append(
                     f'<td class="{css}" data-sort-value="{sort_value}">'
                     f"<strong>{_format_leaderboard_cell(column, row[column])}</strong></td>"
@@ -402,130 +528,17 @@ def _leaderboard_html(data, columns, score_columns, overall_column):
     """
 
 
-def render_leaderboard(
-    data,
-    columns,
-    note=None,
-    score_columns=None,
-    overall_column=None,
-):
-    score_columns = list(score_columns or _infer_score_columns(columns))
-    overall_column = overall_column or _default_overall_column(score_columns)
-    platform_choices = _filter_choices(data, "Platform")
-    owner_choices = _filter_choices(data, "Endpoint Owner")
-    optimized_choices = _filter_choices(data, "Optimized")
-
-    if note:
-        gr.Markdown(note)
-
-    filter_inputs = []
-    with gr.Row(elem_classes="leaderboard-controls"):
-        search = gr.Textbox(
-            label="Search models",
-            placeholder="Search by model or provider",
-            scale=3,
-        )
-        filter_inputs.append(search)
-        platform = None
-        owner = None
-        optimized = None
-        if platform_choices:
-            platform = gr.Dropdown(
-                choices=platform_choices,
-                value=[],
-                label="Providers",
-                multiselect=True,
-                scale=1,
-            )
-            filter_inputs.append(platform)
-        if owner_choices:
-            owner = gr.Dropdown(
-                choices=owner_choices,
-                value=[],
-                label="Endpoint owners",
-                multiselect=True,
-                scale=1,
-            )
-            filter_inputs.append(owner)
-        if optimized_choices:
-            optimized = gr.Dropdown(
-                choices=optimized_choices,
-                value=[],
-                label="Optimized",
-                multiselect=True,
-                scale=1,
-            )
-            filter_inputs.append(optimized)
-
-    ranking = gr.HTML(
-        _leaderboard_html(data, columns, score_columns, overall_column),
-        elem_classes="ranking-table-host",
-    )
-
-    def update_ranking(
-        search_term,
-        platform_value=None,
-        owner_value=None,
-        optimized_value=None,
-    ):
-        filtered_data = _filter_leaderboard(
-            data,
-            search_term,
-            platform_value or [],
-            owner_value or [],
-            optimized_value or [],
-        )
-        return _leaderboard_html(
-            filtered_data, columns, score_columns, overall_column
-        )
-
-    # Wire only the filters that actually exist for this table.
-    change_inputs = [search]
-    if platform is not None:
-        change_inputs.append(platform)
-    if owner is not None:
-        change_inputs.append(owner)
-    if optimized is not None:
-        change_inputs.append(optimized)
-
-    for component in filter_inputs:
-        component.change(
-            update_ranking,
-            inputs=change_inputs,
-            outputs=ranking,
-        )
-
-
-def _infer_score_columns(columns):
-    return [column for column in columns if column.startswith("OneIG (")]
-
-
-def _default_overall_column(score_columns):
-    if len(score_columns) == 1:
-        return score_columns[0]
-    return "OneIG Overall Score"
-
-
 def _filter_choices(data, column):
-    if column not in data.columns:
+    if data is None or column not in data.columns:
         return []
     return sorted(data[column].dropna().astype(str).unique().tolist())
 
 
-def _filter_leaderboard(data, search_term, platform, owner, optimized):
+def _filter_leaderboard(data, platform, owner, optimized, models=None):
     filtered = data.copy()
-    if search_term:
-        search_columns = [
-            column
-            for column in ["Model", "Platform", "Endpoint Owner"]
-            if column in filtered.columns
-        ]
-        matches = pd.Series(False, index=filtered.index)
-        for column in search_columns:
-            matches |= filtered[column].astype(str).str.contains(
-                search_term, case=False, na=False
-            )
-        filtered = filtered[matches]
+    if models:
+        if "Model" in filtered.columns:
+            filtered = filtered[filtered["Model"].astype(str).isin(models)]
 
     for column, values in [
         ("Platform", platform),
@@ -537,64 +550,22 @@ def _filter_leaderboard(data, search_term, platform, owner, optimized):
     return filtered
 
 
-def _leaderboard_dataframe(data, columns, score_columns, overall_column):
-    # Honor the caller-provided column list so extra metrics (e.g. Elo) are not
-    # dropped just because they are not part of the ranking score_columns.
-    skip_columns = {"URL", "Rank"}
-    preferred_prefix = [
-        column
-        for column in ["Model", "Platform", "Endpoint Owner", "Optimized"]
-        if column in data.columns
-    ]
-    preferred_suffix = [
-        column
-        for column in [
-            "Median Generation Time (s)",
-            "Min Generation Time (s)",
-            "Price / Image (USD)",
-            "Evaluation Date (UTC)",
-            "Date",
-        ]
-        if column in data.columns
-    ]
-    # Keep overall_column visible when the caller includes it (e.g. Datapoint Elo).
-    # Synthetic aggregates like OneIG Overall Score are simply omitted from `columns`.
-    middle = [
-        column
-        for column in columns
-        if column in data.columns
-        and column not in skip_columns
-        and column not in preferred_prefix
-        and column not in preferred_suffix
-    ]
-
-    ordered_columns = []
-    seen = set()
-    for column in [*preferred_prefix, *middle, *preferred_suffix]:
-        if column not in seen:
-            seen.add(column)
-            ordered_columns.append(column)
-
-    leaderboard = data[ordered_columns].copy()
-
-    # Rank by overall when available, even if that column is not displayed.
-    if overall_column and overall_column in data.columns:
-        leaderboard = (
-            leaderboard.assign(_sort_key=data[overall_column])
-            .sort_values("_sort_key", ascending=False, na_position="last")
-            .drop(columns=["_sort_key"])
-            .reset_index(drop=True)
-        )
-    else:
-        leaderboard = leaderboard.reset_index(drop=True)
-
-    leaderboard.insert(0, "Rank", leaderboard.index + 1)
-    return leaderboard.rename(columns=_display_label)
+def _leaderboard_dataframe(data, columns):
+    ordered = []
+    if "Rank" in data.columns:
+        ordered.append("Rank")
+    for column in columns:
+        if (
+            column in data.columns
+            and column not in {"URL", "Rank"}
+            and column not in ordered
+        ):
+            ordered.append(column)
+    return data[ordered].rename(columns=_display_label)
 
 
 def _display_label(column):
     labels = {
-        "_overall_score": "Overall score",
         "OneIG Overall Score": "Overall",
         "OneIG (Anime Alignment)": "Anime",
         "OneIG (Human Alignment)": "Human",
@@ -602,10 +573,18 @@ def _display_label(column):
         "OneIG Anime Elo": "Anime Elo (Datapoint)",
         "OneIG Human Elo": "Human Elo (Datapoint)",
         "OneIG Object Elo": "Object Elo (Datapoint)",
-        "P-Judge Overall": "P-Judge",
+        "P-Judge Overall": "P-Judger (Pruna)",
         "Datapoint Elo": "Datapoint Elo",
         "Rapidata Elo": "Rapidata Elo",
-        "Benchmark.ai Elo": "Benchmark.ai Elo",
+        "Artificial Analysis Elo": "Artificial Analysis Elo",
+        "Arena Elo": "Overall Elo",
+        "Arena Branding / Commercial Elo": "Branding / Commercial",
+        "Arena 3D Imaging Elo": "3D Imaging",
+        "Arena Cartoon / Anime Elo": "Cartoon / Anime",
+        "Arena Photorealistic Elo": "Photorealistic",
+        "Arena Art Elo": "Art",
+        "Arena Portraits Elo": "Portraits",
+        "Arena Text Rendering Elo": "Text Rendering",
         "Raw Win Rate": "Raw win rate",
         "Median Generation Time (s)": "Median generation time",
         "Min Generation Time (s)": "Min generation time",
@@ -616,137 +595,325 @@ def _display_label(column):
     return labels.get(column, column)
 
 
-def _text_value(value):
-    return "—" if pd.isna(value) or value is None else escape(str(value))
+def _format_price(value):
+    return "-" if pd.isna(value) or value is None else f"${float(value):.3f}"
 
 
-def _format_score(value):
-    return "—" if pd.isna(value) or value is None else f"{float(value):.3f}"
+def _pareto_frontier_mask(x_values, scores):
+    """True for non-dominated points when maximizing score and minimizing x."""
+    n = len(x_values)
+    mask = [True] * n
+    for i in range(n):
+        for j in range(n):
+            if i == j:
+                continue
+            better_or_equal = x_values[j] <= x_values[i] and scores[j] >= scores[i]
+            strictly_better = x_values[j] < x_values[i] or scores[j] > scores[i]
+            if better_or_equal and strictly_better:
+                mask[i] = False
+                break
+    return mask
 
 
-def _format_price(value):
-    return "—" if pd.isna(value) or value is None else f"${float(value):.3f}"
+def _pareto_unavailable_html(message):
+    return (
+        "<p class='pareto-note-copy'>"
+        f"{escape(message)}"
+        "</p>"
+    )
 
 
-def render_benchmark_detail(benchmark):
-    gr.Markdown(
-        f"""
-        # {benchmark["title"]}
+def _pareto_note_update(message):
+    if message:
+        return gr.update(
+            value=_pareto_unavailable_html(message),
+            visible=True,
+        )
+    return gr.update(value="", visible=False)
+
+
+def _pareto_plot_update(fig):
+    if fig is not None:
+        return gr.update(value=fig, visible=True)
+    return gr.update(value=None, visible=False)
+
+
+def _skip_all(count):
+    return tuple(gr.skip() for _ in range(count))
+
 
-        {benchmark["intro"]}
-        """
+def _pareto_skip_updates():
+    return _skip_all(_PARETO_SLOT_COUNT)
+
+
+def _selection_key(dataset_id, metric_id, models):
+    return (
+        dataset_id,
+        tuple(_normalize_metric_ids(metric_id)),
+        tuple(models or ()),
     )
-    with gr.Tabs(elem_classes="subtabs", selected=0) as detail_tabs:
-        with gr.TabItem("Leaderboard"):
-            render_leaderboard(
-                benchmark["data"],
-                benchmark["columns"],
-                note=benchmark.get("note"),
-                score_columns=benchmark.get("score_columns"),
-                overall_column=benchmark.get("overall_column"),
-            )
-        with gr.TabItem("Graphs"):
-            render_benchmark_graphs(benchmark)
-        with gr.TabItem("Compare samples"):
-            render_compare_samples(benchmark)
-    return detail_tabs
 
 
-def render_compare_samples(benchmark):
-    samples = benchmark.get("samples")
-    if not samples:
-        gr.Markdown(
-            """
-            Sample comparison is not available for this benchmark yet.
+def _applied_key(view_state):
+    view_state = view_state or {}
+    return _selection_key(
+        view_state.get("dataset_id"),
+        view_state.get("metric_id"),
+        view_state.get("models"),
+    )
 
-            When generations are linked, you will be able to pick models and browse
-            side-by-side outputs for the same prompts.
-            """
-        )
-        return
 
-    models = samples["models"]
-    default_models = models[: min(2, len(models))]
+def _build_pareto_figure(
+    data,
+    score_column,
+    x_column,
+    x_title,
+    x_hover_prefix="",
+    x_hover_suffix="",
+):
+    scatter = (
+        data[["Model", score_column, x_column]]
+        .dropna()
+        .copy()
+        .reset_index(drop=True)
+    )
+    if scatter.empty:
+        return None
+
+    x_values = scatter[x_column].astype(float).tolist()
+    scores = scatter[score_column].astype(float).tolist()
+    on_frontier = _pareto_frontier_mask(x_values, scores)
 
-    gr.Markdown(
-        f"""
-        <p class="compare-samples-help">
-        Pick up to <strong>{MAX_COMPARE_MODELS}</strong> models, then browse shared
-        prompts side by side. Images come from the public generation URLs for this
-        benchmark.
-        </p>
-        """
+    dominated = scatter.loc[[not flag for flag in on_frontier]].copy()
+    frontier = scatter.loc[on_frontier].sort_values(x_column).copy()
+    if not dominated.empty:
+        dominated["Model"] = dominated["Model"].map(display_model_name)
+    if not frontier.empty:
+        frontier["Model"] = frontier["Model"].map(display_model_name)
+    hover = (
+        "<b>%{text}</b><br>"
+        f"{escape(x_title)}: {x_hover_prefix}%{{x:.4f}}{x_hover_suffix}"
+        "<br>Score: %{y:.4f}<extra></extra>"
     )
-    with gr.Row(elem_classes="leaderboard-controls"):
-        model_picker = gr.Dropdown(
-            choices=models,
-            value=default_models,
-            multiselect=True,
-            max_choices=MAX_COMPARE_MODELS,
-            label="Models",
-            info=f"Select 1–{MAX_COMPARE_MODELS} models to compare",
-            scale=3,
-        )
-        prompt_count = gr.Slider(
-            minimum=1,
-            maximum=MAX_COMPARE_PROMPTS,
-            value=DEFAULT_COMPARE_PROMPTS,
-            step=1,
-            label="Prompts to show",
-            scale=1,
+
+    fig = go.Figure()
+    if not dominated.empty:
+        fig.add_trace(
+            go.Scatter(
+                x=dominated[x_column],
+                y=dominated[score_column],
+                mode="markers",
+                name="Below frontier",
+                text=dominated["Model"],
+                hovertemplate=hover,
+                marker={
+                    "size": 9,
+                    "color": "#d8b4fe",
+                    "opacity": 0.8,
+                    "line": {"width": 0},
+                },
+            )
         )
-        shuffle_button = gr.Button("Shuffle prompts", scale=1)
-
-    gallery = gr.HTML(
-        value=_build_compare_samples_html(
-            samples,
-            default_models,
-            DEFAULT_COMPARE_PROMPTS,
-            seed=0,
+    if not frontier.empty:
+        fig.add_trace(
+            go.Scatter(
+                x=frontier[x_column],
+                y=frontier[score_column],
+                mode="lines+markers",
+                name="On frontier",
+                text=frontier["Model"],
+                hovertemplate=hover,
+                line={"color": "#69a45c", "width": 2.5},
+                marker={
+                    "size": 12,
+                    "color": "#69a45c",
+                    "line": {"width": 1.5, "color": "#86c077"},
+                },
+            )
         )
+
+    score_label = _display_label(score_column)
+    fig.update_layout(
+        title=None,
+        xaxis_title=x_title,
+        yaxis_title=score_label,
+        autosize=True,
+        height=420,
+        margin={"l": 56, "r": 28, "t": 28, "b": 80},
+        legend={
+            "orientation": "h",
+            "yanchor": "top",
+            "y": -0.24,
+            "xanchor": "center",
+            "x": 0.5,
+            "bgcolor": "rgba(0,0,0,0)",
+            "font": {"color": "#d4d4d4", "size": 12},
+        },
+        plot_bgcolor="#1d1429",
+        paper_bgcolor="#171021",
+        font={"color": "#d4d4d4", "size": 13},
     )
-    seed_state = gr.State(0)
-
-    def update_gallery(selected_models, num_prompts, seed):
-        return _build_compare_samples_html(
-            samples,
-            selected_models,
-            int(num_prompts),
-            seed=int(seed or 0),
-        )
+    axis_font = {"color": "#fafafa", "size": 13}
+    tick_font = {"color": "#a3a3a3", "size": 12}
+    fig.update_xaxes(
+        showgrid=True,
+        gridcolor="rgba(74, 57, 98, 0.55)",
+        zeroline=False,
+        title_font=axis_font,
+        tickfont=tick_font,
+        color="#d4d4d4",
+    )
+    fig.update_yaxes(
+        showgrid=True,
+        gridcolor="rgba(74, 57, 98, 0.55)",
+        zeroline=False,
+        title_font=axis_font,
+        tickfont=tick_font,
+        color="#d4d4d4",
+    )
+    return fig
 
-    def shuffle_gallery(selected_models, num_prompts, seed):
-        next_seed = int(seed or 0) + 1
-        return next_seed, _build_compare_samples_html(
-            samples,
-            selected_models,
-            int(num_prompts),
-            seed=next_seed,
-        )
 
-    model_picker.change(
-        update_gallery,
-        inputs=[model_picker, prompt_count, seed_state],
-        outputs=gallery,
+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
+    fig = _build_pareto_figure(
+        data,
+        score_column,
+        x_column=x_column,
+        x_title=x_title,
+        **hover,
     )
-    prompt_count.change(
-        update_gallery,
-        inputs=[model_picker, prompt_count, seed_state],
-        outputs=gallery,
+    if fig is None:
+        return None, empty_message
+    return fig, None
+
+
+def _pareto_pair(data, score_column):
+    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
+
+    price_fig, price_message = _pareto_axis(
+        data,
+        score_column,
+        _PARETO_PRICE_COLUMN,
+        "Price per image (USD)",
+        "Price per image isn't available for this dataset.",
+        "No models have both a score and a price for this metric.",
+        x_hover_prefix="$",
     )
-    shuffle_button.click(
-        shuffle_gallery,
-        inputs=[model_picker, prompt_count, seed_state],
-        outputs=[seed_state, gallery],
+    time_fig, time_message = _pareto_axis(
+        data,
+        score_column,
+        _PARETO_TIME_COLUMN,
+        "Min generation time (s)",
+        "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",
+    )
+    return price_fig, price_message, time_fig, time_message
+
+
+def _pareto_dataset_message(data):
+    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
+    if has_price or has_time:
+        return None
+    return (
+        "Price per image and min generation time aren't available for "
+        "this dataset, so these plots can't be drawn."
     )
 
 
+def _pareto_slot_note(price_fig, price_message, time_fig, time_message, data):
+    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
+    notes = []
+    if has_price and not has_time:
+        notes.append(
+            "Min generation time isn't available for this dataset, so only "
+            "price vs score is shown."
+        )
+    elif has_time and not has_price:
+        notes.append(
+            "Price per image isn't available for this dataset, so only min "
+            "generation time vs score is shown."
+        )
+    if price_fig is None and has_price:
+        notes.append(price_message)
+    if time_fig is None and has_time:
+        notes.append(time_message)
+    if len(notes) == 2 and notes[0] == notes[1]:
+        notes = notes[:1]
+    return " ".join(notes)
+
+
+def _pareto_slot_updates(data, score_columns):
+    """Updates for a fixed bank of Gradio Plot slots (visible/hidden)."""
+    score_columns = [column for column in (score_columns or []) if column]
+    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)
+    updates = [_pareto_note_update(dataset_note)]
+    hide_all_slots = not has_price and not has_time
+    hidden_slot = (
+        gr.update(visible=False),
+        "",
+        _pareto_note_update(""),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        _pareto_plot_update(None),
+        gr.update(visible=False),
+        _pareto_plot_update(None),
+    )
+    for index in range(MAX_PARETO_METRICS):
+        if hide_all_slots or index >= len(score_columns):
+            updates.extend(hidden_slot)
+            continue
+        score_column = score_columns[index]
+        price_fig, price_message, time_fig, time_message = _pareto_pair(
+            data, score_column
+        )
+        show_price = price_fig is not None
+        show_time = time_fig is not None
+        updates.extend(
+            [
+                gr.update(visible=True),
+                f"#### {_display_label(score_column)}",
+                _pareto_note_update(
+                    _pareto_slot_note(
+                        price_fig,
+                        price_message,
+                        time_fig,
+                        time_message,
+                        data,
+                    )
+                ),
+                gr.update(visible=show_price or show_time),
+                gr.update(visible=show_price),
+                _pareto_plot_update(price_fig),
+                gr.update(visible=show_time),
+                _pareto_plot_update(time_fig),
+            ]
+        )
+    return updates
+
+
+def _samples_html(samples, selected_models, num_prompts, seed=0):
+    if not samples:
+        return _pareto_unavailable_html(
+            "Samples aren't available for this dataset."
+        )
+    images = samples.get("images", {})
+    models = [model for model in (selected_models or []) if model in images]
+    if not models:
+        models = (samples.get("models") or [])[:2]
+    return _build_compare_samples_html(samples, models, num_prompts, seed)
+
+
 def _build_compare_samples_html(samples, selected_models, num_prompts, seed=0):
-    selected_models = [
-        model
-        for model in (selected_models or [])
-        if model in samples["images"]
-    ][:MAX_COMPARE_MODELS]
+    selected_models = list(selected_models or [])[:MAX_COMPARE_MODELS]
 
     if not selected_models:
         return (
@@ -787,9 +954,9 @@ def _build_compare_samples_html(samples, selected_models, num_prompts, seed=0):
             cells.append(
                 f"""
                 <div class="compare-cell">
-                    <div class="compare-model-label">{escape(model)}</div>
+                    <div class="compare-model-label">{escape(display_model_name(model))}</div>
                     <a href="{image_url}" target="_blank" rel="noopener noreferrer">
-                        <img src="{image_url}" alt="{escape(model)} sample" loading="lazy" />
+                        <img src="{image_url}" alt="{escape(display_model_name(model))} sample" loading="lazy" />
                     </a>
                 </div>
                 """
@@ -812,312 +979,1013 @@ def _build_compare_samples_html(samples, selected_models, num_prompts, seed=0):
     return "\n".join(blocks)
 
 
-def render_benchmarks(benchmarks):
-    """Catalogue cards + detail pages; back button returns to the catalogue."""
-    open_buttons = []
-    detail_entries = []
+def _leaderboard_intro_markdown(note):
+    parts = [
+        "Models are ranked by the selected metric, with price and generation "
+        "time in the same table."
+    ]
+    extra = (note or "").strip()
+    if extra:
+        parts.append(extra)
+    return "<p class='view-help'>" + " ".join(parts) + "</p>"
 
-    with gr.Column(visible=True, elem_classes="benchmark-catalogue") as catalogue:
-        gr.Markdown(
-            """
-            # Benchmarks
 
-            Choose a prompt suite. Each one has a **Leaderboard** table, **Graphs**,
-            and **Compare samples**.
-            """
+def _filter_row(datasets, metrics, default_dataset_id, default_metric_id=None):
+    metric_id = _coerce_metric(
+        datasets, metrics, default_dataset_id, default_metric_id
+    )
+    with gr.Row(elem_classes="view-filters"):
+        dataset_dd = gr.Dropdown(
+            choices=_dataset_choices(datasets),
+            value=default_dataset_id,
+            label="Dataset",
+            type="value",
+            filterable=False,
+            scale=2,
+            min_width=160,
         )
-        card_rows = [benchmarks[i : i + 2] for i in range(0, len(benchmarks), 2)]
-        for row in card_rows:
-            with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
-                for benchmark in row:
-                    with gr.Column(scale=1, min_width=280):
-                        with gr.Group(elem_classes="benchmark-card"):
-                            gr.Markdown(
-                                f"""
-                                ## {benchmark.get("emoji", "📊")} {benchmark["title"]}
-
-                                {benchmark["card_description"]}
-                                """
-                            )
-                            open_buttons.append(
-                                (
-                                    benchmark["id"],
-                                    gr.Button("View benchmark →", variant="primary"),
-                                )
-                            )
+        metric_dd = gr.Dropdown(
+            choices=_metric_dropdown_choices(datasets, metrics, default_dataset_id),
+            value=_metric_dropdown_value(metric_id),
+            label="Metric",
+            type="value",
+            multiselect=True,
+            allow_custom_value=False,
+            filterable=True,
+            scale=2,
+            min_width=180,
+            elem_classes="filter-chips",
+        )
+        models_dd = gr.Dropdown(
+            choices=_model_choices(datasets, default_dataset_id),
+            value=[],
+            multiselect=True,
+            label="Models",
+            type="value",
+            allow_custom_value=False,
+            filterable=True,
+            scale=2,
+            min_width=180,
+            elem_classes="filter-chips",
+        )
+    return dataset_dd, metric_dd, models_dd
 
-    for benchmark in benchmarks:
-        with gr.Column(visible=False) as detail:
-            back_button = gr.Button("← All benchmarks", size="sm")
-            render_benchmark_detail(benchmark)
-            detail_entries.append((benchmark["id"], detail, back_button))
 
-    nav_outputs = [catalogue, *[detail for _, detail, _ in detail_entries]]
+def render_image_workspace(datasets, metrics, default_dataset_id, default_metric_id):
+    default_metric_id = _coerce_metric(
+        datasets, metrics, default_dataset_id, default_metric_id
+    )
+    initial = resolve_view(datasets, metrics, default_dataset_id, default_metric_id)
+    initial_data = initial["data"]
+    initial_columns = initial["columns"]
+    initial_samples = initial.get("samples")
+    with gr.Column(elem_classes="workspace-shell"):
+        with gr.Column(elem_classes="workspace-filters") as filters_host:
+            gr.Markdown(
+                "<p class='filter-help'>"
+                "These filters apply to Leaderboards, Pareto plots, and Samples. "
+                "On Samples, only datasets we have generations for are listed. "
+                "On Pareto plots, only datasets with price or generation time "
+                "are listed. Search in Models, or leave it empty to include "
+                "every model."
+                "</p>",
+                elem_classes="filter-help-host",
+            )
+            dataset_dd, metric_dd, models_dd = _filter_row(
+                datasets, metrics, default_dataset_id, None
+            )
+        with gr.Tabs(elem_classes="main-tabs") as main_tabs:
+            with gr.TabItem("Leaderboards", id=TAB_LEADERBOARDS) as lb_tab:
+                lb_note = gr.Markdown(
+                    _leaderboard_intro_markdown(initial.get("note")),
+                    elem_classes="view-help-host",
+                )
+                platform_choices = _filter_choices(initial_data, "Platform")
+                owner_choices = _filter_choices(initial_data, "Endpoint Owner")
+                optimized_choices = _filter_choices(initial_data, "Optimized")
+                with gr.Row(
+                    elem_classes="leaderboard-controls",
+                    visible=bool(
+                        platform_choices or owner_choices or optimized_choices
+                    ),
+                ) as lb_controls:
+                    platform = gr.Dropdown(
+                        choices=platform_choices,
+                        value=[],
+                        label="Providers",
+                        multiselect=True,
+                        allow_custom_value=False,
+                        filterable=False,
+                        scale=1,
+                        visible=bool(platform_choices),
+                    )
+                    owner = gr.Dropdown(
+                        choices=owner_choices,
+                        value=[],
+                        label="Endpoint owners",
+                        multiselect=True,
+                        allow_custom_value=False,
+                        filterable=False,
+                        scale=1,
+                        visible=bool(owner_choices),
+                    )
+                    optimized = gr.Dropdown(
+                        choices=optimized_choices,
+                        value=[],
+                        label="Optimized",
+                        multiselect=True,
+                        allow_custom_value=False,
+                        filterable=False,
+                        scale=1,
+                        visible=bool(optimized_choices),
+                    )
+                ranking = gr.HTML(
+                    _leaderboard_html(
+                        _assign_leaderboard_ranks(
+                            initial_data, initial.get("score_column")
+                        ),
+                        initial_columns,
+                    ),
+                    padding=False,
+                    elem_classes="ranking-table-host",
+                )
 
-    def show_catalogue(_evt=None):
-        return (
-            gr.Column(visible=True),
-            *[gr.Column(visible=False) for _ in detail_entries],
-        )
+            with gr.TabItem(
+                "Pareto Plots",
+                id=TAB_PARETO,
+                interactive=_dataset_has_pareto(datasets, default_dataset_id),
+            ) 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."
+                    "</p>",
+                    elem_classes="view-help-host",
+                )
+                pareto_dataset_note = gr.HTML(
+                    "",
+                    padding=False,
+                    visible=False,
+                    elem_classes="pareto-note",
+                )
+                pareto_slots = []
+                for slot_index in range(MAX_PARETO_METRICS):
+                    with gr.Column(
+                        visible=False,
+                        elem_classes="pareto-metric-block",
+                    ) as slot_group:
+                        slot_title = gr.Markdown(
+                            "",
+                            elem_classes="pareto-metric-title",
+                        )
+                        with gr.Row(
+                            equal_height=True,
+                            elem_classes="pareto-layout",
+                        ) as slot_layout:
+                            with gr.Column(
+                                scale=1,
+                                min_width=320,
+                                elem_classes="pareto-col",
+                            ) as slot_price_col:
+                                gr.Markdown(
+                                    "#### Price vs score",
+                                    elem_classes="pareto-subhead",
+                                )
+                                slot_price = gr.Plot(
+                                    value=None,
+                                    show_label=False,
+                                    elem_classes="pareto-plot",
+                                )
+                            with gr.Column(
+                                scale=1,
+                                min_width=320,
+                                elem_classes="pareto-col",
+                            ) as slot_time_col:
+                                gr.Markdown(
+                                    "#### Min generation time vs score",
+                                    elem_classes="pareto-subhead",
+                                )
+                                slot_time = gr.Plot(
+                                    value=None,
+                                    show_label=False,
+                                    elem_classes="pareto-plot",
+                                )
+                        slot_note = gr.HTML(
+                            "",
+                            padding=False,
+                            visible=False,
+                            elem_classes="pareto-note",
+                        )
+                    pareto_slots.append(
+                        (
+                            slot_group,
+                            slot_title,
+                            slot_note,
+                            slot_layout,
+                            slot_price_col,
+                            slot_price,
+                            slot_time_col,
+                            slot_time,
+                        )
+                    )
 
-    def show_detail(selected_id):
+            with gr.TabItem(
+                "Samples",
+                id=TAB_SAMPLES,
+                interactive=_dataset_has_samples(datasets, default_dataset_id),
+            ) as sm_tab:
+                with gr.Column(visible=bool(initial_samples)) as samples_panel:
+                    gr.Markdown(
+                        f"<p class='view-help'>"
+                        f"The same prompts, side by side. Select up to "
+                        f"<strong>{MAX_COMPARE_MODELS}</strong> models above, or leave "
+                        f"Models empty for two defaults."
+                        f"</p>",
+                        elem_classes="view-help-host",
+                    )
+                    with gr.Row(equal_height=False, elem_classes="compare-controls"):
+                        prompt_count = gr.Slider(
+                            minimum=1,
+                            maximum=MAX_COMPARE_PROMPTS,
+                            value=DEFAULT_COMPARE_PROMPTS,
+                            step=1,
+                            label="Prompts to show",
+                            container=False,
+                            show_reset_button=False,
+                            scale=1,
+                            min_width=180,
+                            elem_classes="compare-prompt-count",
+                        )
+                        shuffle_button = gr.Button(
+                            "Shuffle prompts",
+                            variant="primary",
+                            scale=0,
+                            min_width=140,
+                            elem_classes="compare-shuffle",
+                        )
+                gallery = gr.HTML(
+                    value=_samples_html(
+                        initial_samples, [], DEFAULT_COMPARE_PROMPTS, seed=0
+                    ),
+                    elem_classes="compare-gallery",
+                )
+                seed_state = gr.State(0)
+
+            with gr.TabItem("About", id=TAB_ABOUT) as about_tab:
+                render_about()
+
+    def _synced_filters(dataset_id, metric_id, models, *, clear_metric=False):
+        if clear_metric:
+            metric_id = []
+        else:
+            metric_id = _coerce_metric(datasets, metrics, dataset_id, metric_id)
+        model_choices = _model_choices(datasets, dataset_id)
+        model_values = set(_model_choice_values(model_choices))
+        models = [model for model in (models or []) if model in model_values]
+        metric_choices = _metric_dropdown_choices(datasets, metrics, dataset_id)
         return (
-            gr.Column(visible=False),
-            *[
-                gr.Column(visible=(benchmark_id == selected_id))
-                for benchmark_id, _, _ in detail_entries
-            ],
+            dataset_id,
+            metric_id,
+            models,
+            gr.update(
+                choices=metric_choices,
+                value=_metric_dropdown_value(metric_id),
+            ),
+            gr.update(choices=model_choices, value=models),
         )
 
-    for benchmark_id, button in open_buttons:
-        button.click(
-            lambda selected_id=benchmark_id: show_detail(selected_id),
-            outputs=nav_outputs,
+    def _leaderboard_extras(data, platform_value, owner_value, optimized_value):
+        platform_choices = _filter_choices(data, "Platform")
+        owner_choices = _filter_choices(data, "Endpoint Owner")
+        optimized_choices = _filter_choices(data, "Optimized")
+        platform_value = [
+            value for value in (platform_value or []) if value in platform_choices
+        ]
+        owner_value = [
+            value for value in (owner_value or []) if value in owner_choices
+        ]
+        optimized_value = [
+            value for value in (optimized_value or []) if value in optimized_choices
+        ]
+        return (
+            gr.update(
+                choices=platform_choices,
+                value=platform_value,
+                visible=bool(platform_choices),
+            ),
+            gr.update(
+                choices=owner_choices,
+                value=owner_value,
+                visible=bool(owner_choices),
+            ),
+            gr.update(
+                choices=optimized_choices,
+                value=optimized_value,
+                visible=bool(optimized_choices),
+            ),
+            platform_value,
+            owner_value,
+            optimized_value,
+            gr.update(
+                visible=bool(
+                    platform_choices or owner_choices or optimized_choices
+                )
+            ),
         )
 
-    for _, _, back_button in detail_entries:
-        back_button.click(show_catalogue, outputs=nav_outputs)
+    def _content_flags(tab):
+        return {
+            "include_leaderboard": tab == TAB_LEADERBOARDS,
+            "include_pareto": tab == TAB_PARETO,
+            "include_samples": tab == TAB_SAMPLES,
+        }
+
+    def _commit_state(
+        view_state,
+        dataset_id,
+        metric_id,
+        models,
+        tab,
+        flags,
+        extras=None,
+    ):
+        prev = dict(view_state or {})
+        extras = extras or {}
+        return {
+            "dataset_id": dataset_id,
+            "metric_id": metric_id,
+            "models": list(models or []),
+            "current_tab": tab,
+            "platform": list(
+                extras.get("platform", prev.get("platform") or [])
+            ),
+            "owner": list(extras.get("owner", prev.get("owner") or [])),
+            "optimized": list(
+                extras.get("optimized", prev.get("optimized") or [])
+            ),
+            "stale": {
+                TAB_LEADERBOARDS: not flags["include_leaderboard"],
+                TAB_PARETO: not flags["include_pareto"],
+                TAB_SAMPLES: not flags["include_samples"],
+            },
+        }
+
+    def _save_leaderboard_filters(
+        view_state, platform_value, owner_value, optimized_value
+    ):
+        view_state["platform"] = list(platform_value or [])
+        view_state["owner"] = list(owner_value or [])
+        view_state["optimized"] = list(optimized_value or [])
+        return view_state
 
-    return show_catalogue, nav_outputs
+    def _restore_leaderboard_filters(
+        view_state, platform_value, owner_value, optimized_value
+    ):
+        stored_platform = (view_state or {}).get("platform") or []
+        stored_owner = (view_state or {}).get("owner") or []
+        stored_optimized = (view_state or {}).get("optimized") or []
+        view = resolve_view(
+            datasets,
+            metrics,
+            (view_state or {}).get("dataset_id"),
+            (view_state or {}).get("metric_id"),
+        )
+        extras = _leaderboard_extras(
+            view["data"] if view else None,
+            stored_platform,
+            stored_owner,
+            stored_optimized,
+        )
+        platform_update = extras[0] if list(platform_value or []) != extras[3] else gr.skip()
+        owner_update = extras[1] if list(owner_value or []) != extras[4] else gr.skip()
+        optimized_update = extras[2] if list(optimized_value or []) != extras[5] else gr.skip()
+        return (
+            extras[6],
+            platform_update,
+            owner_update,
+            optimized_update,
+            extras[3],
+            extras[4],
+            extras[5],
+        )
 
+    def _views(
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        *,
+        include_leaderboard=True,
+        include_pareto=False,
+        include_samples=False,
+    ):
+        view = resolve_view(datasets, metrics, dataset_id, metric_id)
+        data = view["data"]
+        if include_leaderboard:
+            note = _leaderboard_intro_markdown(view.get("note"))
+            ranking_html = _leaderboard_html(
+                _filter_leaderboard(
+                    _assign_leaderboard_ranks(data, view["score_column"]),
+                    platform_value or [],
+                    owner_value or [],
+                    optimized_value or [],
+                    models=models,
+                ),
+                view["columns"],
+            )
+        else:
+            note = gr.skip()
+            ranking_html = gr.skip()
+        if include_pareto:
+            pareto_data = _filter_leaderboard(data, [], [], [], models=models)
+            pareto_updates = _pareto_slot_updates(pareto_data, view["score_columns"])
+        else:
+            pareto_updates = _pareto_skip_updates()
+        if include_samples:
+            samples = view.get("samples")
+            samples_html = _samples_html(
+                samples,
+                models,
+                int(num_prompts or DEFAULT_COMPARE_PROMPTS),
+                int(seed or 0),
+            )
+            samples_visible = gr.update(visible=bool(samples))
+        else:
+            samples_html = gr.skip()
+            samples_visible = gr.skip()
+        return (
+            note,
+            ranking_html,
+            *pareto_updates,
+            samples_html,
+            samples_visible,
+        )
 
-def _pareto_frontier_mask(x_values, scores):
-    """True for non-dominated points when maximizing score and minimizing x."""
-    n = len(x_values)
-    mask = [True] * n
-    for i in range(n):
-        for j in range(n):
-            if i == j:
-                continue
-            better_or_equal = x_values[j] <= x_values[i] and scores[j] >= scores[i]
-            strictly_better = x_values[j] < x_values[i] or scores[j] > scores[i]
-            if better_or_equal and strictly_better:
-                mask[i] = False
-                break
-    return mask
+    def _apply_filter_change(
+        source,
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        view_state,
+    ):
+        view_state = dict(view_state or {})
+        tab = view_state.get("current_tab") or TAB_LEADERBOARDS
+        selected_raw = _normalize_metric_ids(metric_id)
+        incoming_models = list(models or [])
+        dataset_changed = source == "dataset" and dataset_id != view_state.get(
+            "dataset_id"
+        )
 
+        if source == "dataset":
+            synced = _synced_filters(
+                dataset_id, metric_id, models, clear_metric=dataset_changed
+            )
+            dataset_id, metric_id, models = synced[:3]
+            metric_update, models_update = synced[3], synced[4]
+        else:
+            metric_id = _coerce_metric(datasets, metrics, dataset_id, metric_id)
+            if source == "models":
+                allowed = set(
+                    _model_choice_values(_model_choices(datasets, dataset_id))
+                )
+                models = [model for model in incoming_models if model in allowed]
+                models_update = (
+                    gr.update(value=models)
+                    if models != incoming_models
+                    else gr.skip()
+                )
+            else:
+                models = incoming_models
+                models_update = gr.skip()
+            metric_update = (
+                gr.update(
+                    choices=_metric_dropdown_choices(datasets, metrics, dataset_id),
+                    value=_metric_dropdown_value(metric_id),
+                )
+                if source == "metric" and ALL_METRICS_ID in selected_raw
+                else gr.skip()
+            )
 
-def _build_pareto_figure(
-    data,
-    score_column,
-    x_column,
-    x_title,
-    x_hover_prefix="",
-    x_hover_suffix="",
-):
-    scatter = (
-        data[["Model", score_column, x_column]]
-        .dropna()
-        .copy()
-        .reset_index(drop=True)
-    )
-    if scatter.empty:
-        return None
+        unchanged = _applied_key(view_state) == _selection_key(
+            dataset_id, metric_id, models
+        )
+        if (
+            not dataset_changed
+            and not (source == "metric" and ALL_METRICS_ID in selected_raw)
+            and unchanged
+        ):
+            return None
 
-    x_values = scatter[x_column].astype(float).tolist()
-    scores = scatter[score_column].astype(float).tolist()
-    on_frontier = _pareto_frontier_mask(x_values, scores)
+        selected_tab = tab
+        extras = (
+            list(platform_value or []),
+            list(owner_value or []),
+            list(optimized_value or []),
+        )
+        extra_updates = None
+        can_pareto = _dataset_has_pareto(datasets, dataset_id)
+        can_samples = _dataset_has_samples(datasets, dataset_id)
+        if source == "dataset":
+            if tab == TAB_SAMPLES and not can_samples:
+                selected_tab = TAB_LEADERBOARDS
+            elif tab == TAB_PARETO and not can_pareto:
+                selected_tab = TAB_LEADERBOARDS
+            view = resolve_view(datasets, metrics, dataset_id, metric_id)
+            extra_updates = _leaderboard_extras(
+                view["data"] if view else None,
+                platform_value,
+                owner_value,
+                optimized_value,
+            )
+            extras = extra_updates[3:6]
 
-    dominated = scatter.loc[[not flag for flag in on_frontier]]
-    frontier = scatter.loc[on_frontier].sort_values(x_column)
-    hover = (
-        "<b>%{text}</b><br>"
-        f"{escape(x_title)}: {x_hover_prefix}%{{x:.4f}}{x_hover_suffix}"
-        "<br>Score: %{y:.4f}<extra></extra>"
-    )
+        flags = _content_flags(selected_tab)
+        extras_payload = (
+            {
+                "platform": extras[0],
+                "owner": extras[1],
+                "optimized": extras[2],
+            }
+            if selected_tab == TAB_LEADERBOARDS
+            else {}
+        )
+        return {
+            "dataset_id": dataset_id,
+            "metric_update": metric_update,
+            "models_update": models_update,
+            "selected_tab": selected_tab,
+            "tab": tab,
+            "extra_updates": extra_updates,
+            "can_pareto": can_pareto,
+            "can_samples": can_samples,
+            "views": _views(
+                dataset_id,
+                metric_id,
+                models,
+                extras[0],
+                extras[1],
+                extras[2],
+                num_prompts,
+                seed,
+                **flags,
+            ),
+            "state": _commit_state(
+                view_state,
+                dataset_id,
+                metric_id,
+                models,
+                selected_tab,
+                flags,
+                extras=extras_payload,
+            ),
+        }
+
+    def on_dataset(
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        view_state,
+    ):
+        result = _apply_filter_change(
+            "dataset",
+            dataset_id,
+            metric_id,
+            models,
+            platform_value,
+            owner_value,
+            optimized_value,
+            num_prompts,
+            seed,
+            view_state,
+        )
+        if result is None:
+            return _skip_all(len(dataset_outputs))
+        extras = result["extra_updates"]
+        return (
+            _dataset_dropdown_update(
+                datasets, result["selected_tab"], result["dataset_id"]
+            ),
+            result["metric_update"],
+            result["models_update"],
+            extras[6],
+            extras[0],
+            extras[1],
+            extras[2],
+            *result["views"],
+            gr.update(interactive=result["can_pareto"]),
+            gr.update(interactive=result["can_samples"]),
+            gr.update(selected=result["selected_tab"])
+            if result["selected_tab"] != result["tab"]
+            else gr.skip(),
+            result["state"],
+        )
 
-    fig = go.Figure()
-    if not dominated.empty:
-        fig.add_trace(
-            go.Scatter(
-                x=dominated[x_column],
-                y=dominated[score_column],
-                mode="markers",
-                name="Below frontier",
-                text=dominated["Model"],
-                hovertemplate=hover,
-                marker={
-                    "size": 9,
-                    "color": "#c4b5fd",
-                    "opacity": 0.75,
-                    "line": {"width": 0},
-                },
+    def on_metric(
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        view_state,
+    ):
+        result = _apply_filter_change(
+            "metric",
+            dataset_id,
+            metric_id,
+            models,
+            platform_value,
+            owner_value,
+            optimized_value,
+            num_prompts,
+            seed,
+            view_state,
+        )
+        if result is None:
+            return _skip_all(len(metric_outputs))
+        return (result["metric_update"], *result["views"], result["state"])
+
+    def on_models(
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        view_state,
+    ):
+        result = _apply_filter_change(
+            "models",
+            dataset_id,
+            metric_id,
+            models,
+            platform_value,
+            owner_value,
+            optimized_value,
+            num_prompts,
+            seed,
+            view_state,
+        )
+        if result is None:
+            return _skip_all(len(models_outputs))
+        return (result["models_update"], *result["views"], result["state"])
+
+    def on_tab_select(
+        tab,
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        num_prompts,
+        seed,
+        view_state,
+    ):
+        view_state = dict(view_state or {})
+        prev_tab = view_state.get("current_tab") or TAB_LEADERBOARDS
+        requested_tab = tab
+        if tab == TAB_SAMPLES and not _dataset_has_samples(datasets, dataset_id):
+            tab = TAB_LEADERBOARDS
+        elif tab == TAB_PARETO and not _dataset_has_pareto(datasets, dataset_id):
+            tab = TAB_LEADERBOARDS
+        if prev_tab == TAB_LEADERBOARDS:
+            _save_leaderboard_filters(
+                view_state,
+                platform_value,
+                owner_value,
+                optimized_value,
             )
+        dataset_update = _dataset_dropdown_update(datasets, tab, dataset_id)
+        metric_id = _coerce_metric(datasets, metrics, dataset_id, metric_id)
+        models = list(models or [])
+        view_state["current_tab"] = tab
+        view_state["dataset_id"] = dataset_id
+        view_state["metric_id"] = metric_id
+        view_state["models"] = models
+        show_filters = tab != TAB_ABOUT
+        show_metric = tab in (TAB_LEADERBOARDS, TAB_PARETO)
+        was_filters = prev_tab != TAB_ABOUT
+        was_metric = prev_tab in (TAB_LEADERBOARDS, TAB_PARETO)
+        filters_vis = (
+            gr.update(visible=show_filters)
+            if show_filters != was_filters
+            else gr.skip()
         )
-    if not frontier.empty:
-        fig.add_trace(
-            go.Scatter(
-                x=frontier[x_column],
-                y=frontier[score_column],
-                mode="lines+markers",
-                name="On frontier",
-                text=frontier["Model"],
-                hovertemplate=hover,
-                line={"color": "#7c3aed", "width": 2.5},
-                marker={
-                    "size": 12,
-                    "color": "#db2777",
-                    "line": {"width": 1.5, "color": "#7c3aed"},
-                },
+        metric_vis = (
+            gr.update(visible=show_metric)
+            if show_metric != was_metric
+            else gr.skip()
+        )
+        if tab == TAB_LEADERBOARDS:
+            restored = _restore_leaderboard_filters(
+                view_state,
+                platform_value,
+                owner_value,
+                optimized_value,
             )
+            platform_value = restored[4]
+            owner_value = restored[5]
+            optimized_value = restored[6]
+            lb_filters = restored[:4]
+        else:
+            lb_filters = _skip_all(4)
+        stale = dict(view_state.get("stale") or {})
+        chrome = (
+            filters_vis,
+            dataset_update,
+            metric_vis,
+            gr.skip(),
+            *lb_filters,
+        )
+        tab_select = (
+            gr.update(selected=tab)
+            if tab != requested_tab
+            else gr.skip()
+        )
+        if tab == TAB_ABOUT or not stale.get(tab, True):
+            return (
+                *chrome,
+                *_skip_all(len(view_outputs)),
+                tab_select,
+                view_state,
+            )
+        flags = _content_flags(tab)
+        views = _views(
+            dataset_id,
+            metric_id,
+            models,
+            platform_value,
+            owner_value,
+            optimized_value,
+            num_prompts,
+            seed,
+            **flags,
+        )
+        stale[tab] = False
+        view_state["stale"] = stale
+        return (*chrome, *views, tab_select, view_state)
+
+    def on_leaderboard_filters(
+        dataset_id,
+        metric_id,
+        models,
+        platform_value,
+        owner_value,
+        optimized_value,
+        view_state,
+    ):
+        view_state = dict(view_state or {})
+        _save_leaderboard_filters(
+            view_state,
+            platform_value,
+            owner_value,
+            optimized_value,
+        )
+        view = resolve_view(datasets, metrics, dataset_id, metric_id)
+        return (
+            _leaderboard_html(
+                _filter_leaderboard(
+                    _assign_leaderboard_ranks(view["data"], view["score_column"]),
+                    platform_value or [],
+                    owner_value or [],
+                    optimized_value or [],
+                    models=models,
+                ),
+                view["columns"],
+            ),
+            view_state,
         )
 
-    score_label = _display_label(score_column)
-    fig.update_layout(
-        title=None,
-        xaxis_title=x_title,
-        yaxis_title=score_label,
-        autosize=True,
-        height=420,
-        margin={"l": 56, "r": 28, "t": 28, "b": 80},
-        legend={
-            "orientation": "h",
-            "yanchor": "top",
-            "y": -0.24,
-            "xanchor": "center",
-            "x": 0.5,
-            "bgcolor": "rgba(0,0,0,0)",
-            "font": {"color": "#e9d5ff", "size": 12},
-        },
-        # Dark-theme plot: soft purple panel + light text (readable, not a white flash).
-        plot_bgcolor="#1e1b4b",
-        paper_bgcolor="#17153b",
-        font={"color": "#e9d5ff", "size": 13},
+    def on_samples_controls(dataset_id, models, num_prompts, seed):
+        view = resolve_view(datasets, metrics, dataset_id, None)
+        return _samples_html(
+            view.get("samples") if view else None,
+            models,
+            int(num_prompts or DEFAULT_COMPARE_PROMPTS),
+            int(seed or 0),
+        )
+
+    def on_shuffle(dataset_id, models, num_prompts, seed):
+        next_seed = int(seed or 0) + 1
+        view = resolve_view(datasets, metrics, dataset_id, None)
+        return next_seed, _samples_html(
+            view.get("samples") if view else None,
+            models,
+            int(num_prompts or DEFAULT_COMPARE_PROMPTS),
+            next_seed,
+        )
+
+    def _on_tab(tab):
+        def handler(
+            dataset_id,
+            metric_id,
+            models,
+            platform_value,
+            owner_value,
+            optimized_value,
+            num_prompts,
+            seed,
+            view_state,
+        ):
+            return on_tab_select(
+                tab,
+                dataset_id,
+                metric_id,
+                models,
+                platform_value,
+                owner_value,
+                optimized_value,
+                num_prompts,
+                seed,
+                view_state,
+            )
+
+        handler.__name__ = f"on_tab_{tab}"
+        return handler
+
+    view_state = gr.State(
+        {
+            "dataset_id": default_dataset_id,
+            "metric_id": None,
+            "models": [],
+            "current_tab": TAB_LEADERBOARDS,
+            "platform": [],
+            "owner": [],
+            "optimized": [],
+            "stale": {
+                TAB_LEADERBOARDS: False,
+                TAB_PARETO: True,
+                TAB_SAMPLES: False,
+            },
+        }
     )
-    axis_font = {"color": "#f3e8ff", "size": 13}
-    tick_font = {"color": "#ddd6fe", "size": 12}
-    fig.update_xaxes(
-        showgrid=True,
-        gridcolor="rgba(167, 139, 250, 0.28)",
-        zeroline=False,
-        title_font=axis_font,
-        tickfont=tick_font,
-        color="#e9d5ff",
+    pareto_outputs = [
+        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 component in (
+                slot_group,
+                slot_title,
+                slot_note,
+                slot_layout,
+                slot_price_col,
+                slot_price,
+                slot_time_col,
+                slot_time,
+            )
+        ],
+    ]
+    view_inputs = [
+        platform,
+        owner,
+        optimized,
+        prompt_count,
+        seed_state,
+        view_state,
+    ]
+    view_outputs = [
+        lb_note,
+        ranking,
+        *pareto_outputs,
+        gallery,
+        samples_panel,
+    ]
+    filter_inputs = [dataset_dd, metric_dd, models_dd, *view_inputs]
+
+    dataset_outputs = [
+        dataset_dd,
+        metric_dd,
+        models_dd,
+        lb_controls,
+        platform,
+        owner,
+        optimized,
+        *view_outputs,
+        pp_tab,
+        sm_tab,
+        main_tabs,
+        view_state,
+    ]
+    dataset_dd.change(
+        on_dataset,
+        inputs=filter_inputs,
+        outputs=dataset_outputs,
+        **_VIEW_EVENTS,
     )
-    fig.update_yaxes(
-        showgrid=True,
-        gridcolor="rgba(167, 139, 250, 0.28)",
-        zeroline=False,
-        title_font=axis_font,
-        tickfont=tick_font,
-        color="#e9d5ff",
+
+    metric_outputs = [
+        metric_dd,
+        *view_outputs,
+        view_state,
+    ]
+    metric_dd.change(
+        on_metric,
+        inputs=filter_inputs,
+        outputs=metric_outputs,
+        **_VIEW_EVENTS,
     )
-    return fig
 
+    models_outputs = [
+        models_dd,
+        *view_outputs,
+        view_state,
+    ]
+    models_dd.change(
+        on_models,
+        inputs=filter_inputs,
+        outputs=models_outputs,
+        **_VIEW_EVENTS,
+    )
 
-def render_benchmark_graphs(benchmark):
-    data = benchmark["data"]
-    score_columns = [
-        column
-        for column in (benchmark.get("score_columns") or [])
-        if column in data.columns
+    tab_outputs = [
+        filters_host,
+        dataset_dd,
+        metric_dd,
+        models_dd,
+        lb_controls,
+        platform,
+        owner,
+        optimized,
+        *view_outputs,
+        main_tabs,
+        view_state,
     ]
-    overall_column = benchmark.get("overall_column")
-
-    if not score_columns and overall_column and overall_column in data.columns:
-        score_columns = [overall_column]
-
-    if not score_columns:
-        gr.Markdown("No score data is available yet.")
-        return
-
-    # Pareto every displayed quality metric vs price.
-    # Skip only synthetic aggregates (e.g. OneIG mean), not real sort keys like Datapoint Elo.
-    pareto_skip = {
-        "Model",
-        "Platform",
-        "Endpoint Owner",
-        "Optimized",
-        "URL",
-        "Rank",
-        "Median Generation Time (s)",
-        "Min Generation Time (s)",
-        "Price / Image (USD)",
-        "Evaluation Date (UTC)",
-        "Date",
-        "Raw Win Rate",
-        "OneIG Overall Score",
-    }
+    for tab, tab_item in (
+        (TAB_LEADERBOARDS, lb_tab),
+        (TAB_PARETO, pp_tab),
+        (TAB_SAMPLES, sm_tab),
+        (TAB_ABOUT, about_tab),
+    ):
+        tab_item.select(
+            _on_tab(tab),
+            inputs=filter_inputs,
+            outputs=tab_outputs,
+            show_progress="hidden",
+        )
 
-    display_columns = benchmark.get("columns") or []
-    pareto_columns = []
-    for column in [*score_columns, *display_columns]:
-        if (
-            column in data.columns
-            and column not in pareto_skip
-            and column not in pareto_columns
-            and pd.api.types.is_numeric_dtype(data[column])
-        ):
-            pareto_columns.append(column)
-
-    price_column = "Price / Image (USD)"
-    time_column = "Min Generation Time (s)"
-    price_figures = []
-    time_figures = []
-    for plot_column in pareto_columns:
-        if price_column in data.columns:
-            price_fig = _build_pareto_figure(
-                data,
-                plot_column,
-                x_column=price_column,
-                x_title="Price per image (USD)",
-                x_hover_prefix="$",
-            )
-            if price_fig is not None:
-                price_figures.append((plot_column, price_fig))
-        if time_column in data.columns:
-            time_fig = _build_pareto_figure(
-                data,
-                plot_column,
-                x_column=time_column,
-                x_title="Min generation time (s)",
-                x_hover_suffix="s",
-            )
-            if time_fig is not None:
-                time_figures.append((plot_column, time_fig))
-
-    if price_figures or time_figures:
-        gr.Markdown(
-            "### Pareto frontiers\n\n"
-            "<span style='color:#4c1d95;font-size:0.95rem;'>"
-            "Pink = on the frontier (lower cost or time at the same or better score). "
-            "Light purple = below the frontier."
-            "</span>"
+    for component in (platform, owner, optimized):
+        component.change(
+            on_leaderboard_filters,
+            inputs=[
+                dataset_dd,
+                metric_dd,
+                models_dd,
+                platform,
+                owner,
+                optimized,
+                view_state,
+            ],
+            outputs=[ranking, view_state],
+            show_progress="hidden",
         )
-        with gr.Row(equal_height=False):
-            with gr.Column(scale=1, min_width=320):
-                gr.Markdown("#### Price vs score")
-                if not price_figures:
-                    gr.Markdown("_No price data available._")
-                for plot_column, pareto_fig in price_figures:
-                    gr.Markdown(f"**{_display_label(plot_column)}**")
-                    gr.Plot(
-                        value=pareto_fig,
-                        show_label=False,
-                        elem_classes="pareto-plot",
-                    )
-            with gr.Column(scale=1, min_width=320):
-                gr.Markdown("#### Min generation time vs score")
-                if not time_figures:
-                    gr.Markdown("_No min generation time data available._")
-                for plot_column, pareto_fig in time_figures:
-                    gr.Markdown(f"**{_display_label(plot_column)}**")
-                    gr.Plot(
-                        value=pareto_fig,
-                        show_label=False,
-                        elem_classes="pareto-plot",
-                    )
 
+    prompt_count.change(
+        on_samples_controls,
+        inputs=[dataset_dd, models_dd, prompt_count, seed_state],
+        outputs=gallery,
+        show_progress="hidden",
+    )
+    shuffle_button.click(
+        on_shuffle,
+        inputs=[dataset_dd, models_dd, prompt_count, seed_state],
+        outputs=[seed_state, gallery],
+        show_progress="hidden",
+    )
 
 def render_about():
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown(ABOUT_OVERVIEW_CONTENT)
-        with gr.Column():
-            gr.Markdown(ABOUT_DETAILS_CONTENT)
+    with gr.Row(elem_classes="about-layout", equal_height=False):
+        with gr.Column(scale=1, min_width=340, elem_classes="about-col"):
+            gr.Markdown(ABOUT_OVERVIEW_CONTENT, elem_classes="about-copy")
+        with gr.Column(scale=1, min_width=340, elem_classes="about-col"):
+            gr.Markdown(ABOUT_DETAILS_CONTENT, elem_classes="about-copy")
 
 
 def render_footer():
-    gr.HTML(COMMUNITY_CONTENT)
-    with gr.Accordion("Citation", open=False):
+    gr.HTML(FOOTER_CONTENT, padding=False, elem_classes="page-footer-host")
+    with gr.Accordion(
+        "Citation",
+        open=False,
+        elem_classes="citation-accordion",
+    ):
         gr.Markdown(CITATION_CONTENT)