cleaning css

app.py

@@ -34,7 +34,6 @@ custom_css = """
     --pruna-accent: #9334e9;
     --pruna-accent-bright: #8f35ff;
     --pruna-lavender: #d8b4fe;
-    --pruna-green: #69a45c;
     --pruna-link: #bf8bff;
     --pruna-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
 }
@@ -59,20 +58,48 @@ body, .gradio-container {
 }
 
 /* —— App header (InferBench 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;
+}
 .app-header {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin: 8px 0 16px;
+    padding: 8px 0 0;
+    text-align: center;
+}
+.app-header-brand {
+    display: inline-flex !important;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 14px;
-    margin: 8px 0 20px;
-    padding: 8px 4px 4px;
-    text-align: left;
+    gap: 12px;
+    width: max-content !important;
+    max-width: 100%;
+    margin: 0 auto;
 }
 .app-header-logo {
-    width: 40px;
-    height: 47px;
+    display: block !important;
+    width: 44px !important;
+    height: 52px !important;
+    margin: 0 !important;
     object-fit: contain;
-    flex-shrink: 0;
+    flex: 0 0 auto;
 }
 
 /* —— Page tabs: centered underline nav (Gradio 5 uses tab-wrapper/container) —— */
@@ -123,6 +150,10 @@ body, .gradio-container {
     background: var(--pruna-accent-bright) !important;
     height: 2px !important;
 }
+.main-tabs .tabitem {
+    padding: 8px 0 0 !important;
+    border-radius: 0 !important;
+}
 
 /* —— Benchmark view menu (Leaderboard / Graphs / Compare) —— */
 .benchmark-back-btn,
@@ -297,6 +328,9 @@ body, .gradio-container {
     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;
@@ -388,11 +422,35 @@ body, .gradio-container {
     overflow-x: auto;
 }
 
+.home-callouts-host,
+.home-callouts-host .html-container,
+.home-callouts-host .prose,
+.home-callouts-host.block,
+.home-callouts-host .padded,
+.home-section-title,
+.home-section-title.block,
+.home-section-title .prose,
+.home-section-title.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;
+}
+.home-section-title h2,
+.home-section-title .prose h2,
+.gradio-container .home-section-title h2 {
+    margin: 1.25rem 0 0.6rem !important;
+}
 .home-callouts {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px;
-    margin: 8px 0 20px;
+    margin: 8px 0 8px;
+    width: 100%;
 }
 .home-callouts > div {
     padding: 14px 16px;
@@ -422,12 +480,15 @@ body, .gradio-container {
     box-shadow: none !important;
     padding: 0 !important;
     margin: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    overflow: visible !important;
 }
 .home-snapshots-table {
     display: table !important;
     width: 100% !important;
     border-collapse: separate !important;
-    border-spacing: 40px 14px !important;
+    border-spacing: 0 12px !important;
     margin: 0 !important;
     table-layout: fixed !important;
     border: none !important;
@@ -447,6 +508,9 @@ body, .gradio-container {
     border: 0 !important;
     background: transparent !important;
 }
+.home-snapshots-table td.home-snap-cell:first-child {
+    padding-right: 24px !important;
+}
 .home-snap-title,
 .prose .home-snap-title {
     display: flex !important;
@@ -514,7 +578,9 @@ body, .gradio-container {
         margin: 4px 0 8px;
         border-spacing: 0;
     }
-    .home-snapshots-table td.home-snap-cell {
+    .home-snapshots-table td.home-snap-cell,
+    .home-snapshots-table td.home-snap-cell:first-child {
+        padding: 0 !important;
         margin-bottom: 8px;
     }
     .home-snap-top {
@@ -554,11 +620,6 @@ body, .gradio-container {
 
 @media (max-width: 700px) {
     .home-callouts { grid-template-columns: 1fr; }
-    .app-header {
-        flex-direction: column;
-        text-align: center;
-    }
-    .app-header-copy { text-align: center; }
 }
 
 .pareto-plot { width: 100%; }
@@ -567,31 +628,6 @@ body, .gradio-container {
 .pareto-plot .plot-container { width: 100% !important; }
 .pareto-plot .modebar { display: none !important; }
 
-.leaderboard-summary {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 12px;
-    margin: 8px 0 16px;
-}
-.leaderboard-summary > div {
-    padding: 14px 16px;
-    border: 1px solid color-mix(in oklab, var(--pruna-border) 60%, transparent);
-    border-radius: 12px;
-    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%);
-}
-.leaderboard-summary span,
-.results-heading {
-    color: var(--pruna-text-muted);
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-}
-.leaderboard-summary strong {
-    display: block;
-    margin-top: 4px;
-    color: var(--pruna-text-primary);
-    font-size: 22px;
-}
 .leaderboard-controls {
     align-items: end !important;
     gap: 10px !important;
@@ -674,12 +710,6 @@ body, .gradio-container {
     width: 100% !important;
     --block-border-width: 0 !important;
 }
-.results-heading {
-    display: flex;
-    justify-content: space-between;
-    margin: 16px 0 8px;
-    text-transform: uppercase;
-}
 .ranking-table-scroll {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 12px;
@@ -885,29 +915,41 @@ body, .gradio-container {
     text-align: center;
 }
 
-@media (max-width: 700px) {
-    .leaderboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-
 /*
   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-copy h1 {
-    margin: 0;
+.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.1;
+    line-height: 1 !important;
     color: #ffffff !important;
 }
-.app-header-copy p {
-    margin: 6px 0 0;
+.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;
-    font-weight: 400;
+    line-height: 1.45 !important;
+    font-weight: 400 !important;
 }
 
 .gradio-container h1,
@@ -959,12 +1001,6 @@ body, .gradio-container {
     text-transform: none !important;
 }
 
-/* Brand header wins over generic h1 rules */
-.app-header .app-header-copy h1 {
-    font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
-    margin: 0 !important;
-}
-
 .markdown p, .md p, .prose p,
 .gradio-container .markdown p {
     margin: 0 0 0.8rem !important;
@@ -973,6 +1009,31 @@ body, .gradio-container {
     font-weight: 400 !important;
     line-height: 1.55 !important;
 }
+.home-intro,
+.home-intro.block,
+.home-intro .prose,
+.home-intro.prose,
+.home-intro.padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 auto 12px !important;
+    max-width: 42rem;
+    width: 100%;
+    text-align: center;
+    overflow: visible !important;
+}
+.home-intro p,
+.home-intro .prose p,
+.gradio-container .home-intro p {
+    color: #e4e4e7 !important;
+    font-size: 1.08rem !important;
+    font-weight: 400 !important;
+    line-height: 1.65 !important;
+    margin: 0 auto 0.7rem !important;
+    text-align: center !important;
+}
 .markdown li, .md li, .prose li {
     color: var(--pruna-text-body) !important;
     font-size: 0.95rem;
@@ -1422,7 +1483,7 @@ benchmarks = [
         "title": "OneIG Alignment",
         "emoji": "🎯",
         "card_description": (
-            "Anime/stylization, portrait, and general-object alignment prompts — "
+            "Anime/stylization, portrait, and general-object alignment prompts: "
             "alignment scores and Datapoint Elo (not the full OneIG suite), plus "
             "side-by-side generations."
         ),
@@ -1435,8 +1496,6 @@ benchmarks = [
         "columns": oneig_display_columns,
         "score_columns": oneig_metric_columns,
         "overall_column": "OneIG Overall Score",
-        "best_score_label": "BEST ONEIG ALIGNMENT",
-        "metrics_same_scale": True,
         "note": (
             "> Rankings are ordered by the mean of the available alignment category "
             "scores. Missing category scores are not included in that model's mean."
@@ -1460,8 +1519,6 @@ benchmarks = [
         "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 "

ui.py

@@ -16,100 +16,10 @@ _MASCOT_DATA_URI = (
 )
 
 
-FILTER_COLUMNS = ["Platform", "Endpoint Owner", "Model", "Optimized"]
 MAX_COMPARE_MODELS = 4
 DEFAULT_COMPARE_PROMPTS = 3
 MAX_COMPARE_PROMPTS = 8
 
-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.
-"""
-
-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**.
-"""
-
-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.
-"""
-
-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**.
-"""
-
-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.
-"""
-
-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**.
-"""
-
-BENCHMARK_AI_ELO_SCORES_CONTENT = """
-### Reported Benchmark.ai Elo scores
-
-- **Benchmark.ai Elo** — Elo rating from the Benchmark.ai leaderboard
-
-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
-
-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
 
@@ -119,10 +29,10 @@ score.
 
 ## What you can do here
 
-- **Home** — snapshot of each prompt suite and unique model count.
-- **Benchmarks** — open a prompt suite to see its metric columns, graphs (including a
+- **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.
+- **About**: this page.
 
 ## Current prompt suites
 
@@ -141,15 +51,15 @@ skipped for that model).
 ### Qwen Image Bench
 A shared prompt suite with multiple evaluation tracks shown as columns:
 
-- **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
+- **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.
 
 ## How to read the numbers
 
-Quality metrics from different suites are **not interchangeable** — a high OneIG
+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.
@@ -165,7 +75,7 @@ ABOUT_DETAILS_CONTENT = """
   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
+- 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.
@@ -203,13 +113,15 @@ def render_header():
     gr.HTML(
         f"""
         <header class="app-header">
-          <img class="app-header-logo" src="{_MASCOT_DATA_URI}" alt="" />
-          <div class="app-header-copy">
+          <div class="app-header-brand">
+            <img class="app-header-logo" src="{_MASCOT_DATA_URI}" alt="" />
             <h1>InferBench</h1>
-            <p>Compare text-to-image models on quality, speed, and price</p>
           </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",
     )
 
 
@@ -230,7 +142,7 @@ def _top_models(data, score_column, n=3):
 
 
 def _home_highlights(benchmarks):
-    """Quality leaders per suite — more relevant than cheapest/fastest outliers."""
+    """Quality leaders per suite: more relevant than cheapest/fastest outliers."""
     highlights = []
     unique_models = set()
     for benchmark in benchmarks:
@@ -272,10 +184,11 @@ def render_home(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.
-        """
+        InferBench ranks **text-to-image models** on quality, speed, and price using
+        the same prompt suites. Open a benchmark for tables, Pareto graphs, and
+        sample comparisons.
+        """,
+        elem_classes="home-intro",
     )
 
     if highlights:
@@ -285,9 +198,13 @@ def render_home(benchmarks):
             f"<em>{escape(item['detail'])}</em></div>"
             for item in highlights
         ]
-        gr.HTML(f'<div class="home-callouts">{"".join(callout_bits)}</div>')
+        gr.HTML(
+            f'<div class="home-callouts">{"".join(callout_bits)}</div>',
+            padding=False,
+            elem_classes="home-callouts-host",
+        )
 
-    gr.Markdown("## Benchmark snapshots")
+    gr.Markdown("## Benchmark snapshots", elem_classes="home-section-title")
     title_cells = []
     blurb_cells = []
     top_cells = []
@@ -337,7 +254,7 @@ def render_home(benchmarks):
 
 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))
@@ -656,16 +573,12 @@ 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_score(value):
-    return "—" if pd.isna(value) or value is None else f"{float(value):.3f}"
+    return "-" if pd.isna(value) or value is None else f"{float(value):.3f}"
 
 
 def _format_price(value):
-    return "—" if pd.isna(value) or value is None else f"${float(value):.3f}"
+    return "-" if pd.isna(value) or value is None else f"${float(value):.3f}"
 
 
 def render_benchmark_detail(benchmark):