Split benchmark into pages and clarify attribution

app.py

@@ -44,6 +44,8 @@ CSS = """
   --line-soft: #d4cab8;
   --green: #b9e7bd;
   --green-strong: #7fc98a;
+  --orange: #f4b36a;
+  --orange-soft: #ffe1ba;
   --link: #174f8a;
   --radius: 6px;
 }
@@ -281,6 +283,25 @@ gradio-app,
   color: var(--ink);
 }
 
+.record-card.needs-recovery {
+  background: var(--orange-soft);
+  border-color: #a65b0b;
+}
+
+.record-card.needs-recovery .record-case::after {
+  content: "needs recovery";
+  display: inline-block;
+  margin-left: 7px;
+  padding: 1px 5px;
+  border: 1px solid #a65b0b;
+  border-radius: 3px;
+  color: #5c3100;
+  font-family: Helvetica, Arial, sans-serif !important;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
 .record-top {
   padding: 9px 10px 0;
 }
@@ -432,6 +453,35 @@ gradio-app,
   font-size: 13px;
 }
 
+.page-card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 16px;
+}
+
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--paper);
+  border: 1px solid var(--line);
+}
+
+.leaderboard-table th,
+.leaderboard-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line-soft);
+  color: var(--ink);
+  text-align: left;
+  vertical-align: top;
+}
+
+.leaderboard-table th {
+  background: var(--paper-soft);
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
 .submit-shell,
 .schema-shell {
   width: min(1180px, calc(100% - 32px));
@@ -511,6 +561,16 @@ gradio-app,
   max-height: 315px;
 }
 
+.gradio-container .tab-nav {
+  background: var(--page) !important;
+  border-bottom: 1px solid var(--line) !important;
+}
+
+.gradio-container .tab-nav button {
+  background: transparent !important;
+  border: 0 !important;
+}
+
 @media (max-width: 720px) {
   .contain,
   .submit-shell,
@@ -614,6 +674,8 @@ MONTHS = (
     "December",
 )
 
+RECOVERY_TOLERANCE_REL = 1.0e-3
+
 
 def esc(value: Any) -> str:
     return html.escape("" if value is None else str(value), quote=True)
@@ -709,6 +771,18 @@ def author_name(record: dict[str, Any]) -> str:
     return str(record.get("submitted_by") or "unknown").strip() or "unknown"
 
 
+def display_author(record: dict[str, Any]) -> str:
+    if record.get("record_type") == "reference":
+        return reference_credit(record)
+    author = author_name(record)
+    notes = str(record.get("notes") or "").lower()
+    seeded = "seeded from" in notes or record.get("frontend_seed")
+    prior = reference_credit(record)
+    if author.lower().startswith("nathan roll") and seeded and prior not in {"unknown", "Erich Friedman Packing Center"}:
+        return prior
+    return author
+
+
 def metric_symbol(record: dict[str, Any]) -> str:
     return str(record.get("metric_symbol") or "s")
 
@@ -725,6 +799,17 @@ def metric_value(record: dict[str, Any]) -> str:
         return str(value)
 
 
+def numeric_metric(record: dict[str, Any]) -> float | None:
+    value = record.get("metric_value")
+    if value is None:
+        value = record.get("side")
+    try:
+        parsed = float(value)
+    except (TypeError, ValueError):
+        return None
+    return parsed if math.isfinite(parsed) else None
+
+
 def compact_expression(record: dict[str, Any]) -> str:
     expression = str(record.get("metric_expression") or "").strip()
     expression = re.sub(r"\s+", " ", expression)
@@ -864,9 +949,32 @@ def visual_provenance(record: dict[str, Any], visual_record: dict[str, Any]) ->
     return "Coordinate rendering attached to this case."
 
 
+def display_metric_record(record: dict[str, Any], visual_record: dict[str, Any]) -> dict[str, Any]:
+    if visual_record.get("verified") and visual_record.get("solution_path"):
+        return visual_record
+    return record
+
+
+def needs_recovery(record: dict[str, Any], visual_record: dict[str, Any]) -> bool:
+    if record.get("record_type") != "reference":
+        return False
+    reference = numeric_metric(record)
+    visual = numeric_metric(visual_record)
+    if reference is None or visual is None:
+        return True
+    return visual > reference * (1.0 + RECOVERY_TOLERANCE_REL)
+
+
 def record_details(record: dict[str, Any], visual_record: dict[str, Any], source: str, image_name: str, expression: str, analytical: Any) -> str:
     rows: list[str] = []
     rows.append(detail_row("Rendering", esc(visual_provenance(record, visual_record))))
+    if record.get("record_type") == "reference" and visual_record.get("verified"):
+        rows.append(
+            detail_row(
+                "Friedman reference",
+                f"{esc(metric_symbol(record))} = {esc(metric_value(record))} by {esc(reference_credit(record))}, {esc(reference_date(record))}",
+            )
+        )
     if record.get("record_type") == "verified":
         rows.append(detail_row("Submitted", esc(display_date(record))))
         notes = str(record.get("notes") or "").strip()
@@ -902,19 +1010,23 @@ def record_details(record: dict[str, Any], visual_record: dict[str, Any], source
 def record_card(record: dict[str, Any], coordinates: dict[str, dict[str, Any]]) -> str:
     verified = record.get("record_type") == "verified"
     visual_record = visual_record_for(record, coordinates)
+    display_record = display_metric_record(record, visual_record)
     source = source_link(record)
     expression = compact_expression(record)
     image_name = source_image_name(record)
     analytical = friedman_reference(record).get("analytical_or_proved")
-    visible_author = author_name(record) if verified else reference_credit(record)
+    visible_author = display_author(record)
+    card_class = "verified" if verified else "reference"
+    if needs_recovery(record, visual_record):
+        card_class += " needs-recovery"
     return f"""
-    <article class="record-card {'verified' if verified else 'reference'}">
+    <article class="record-card {card_class}">
       <div class="record-top">
         <div class="record-case">{esc(record.get("case"))}</div>
       </div>
       {record_visual(record, coordinates)}
       <div class="record-body">
-        <div class="metric"><strong>{esc(metric_symbol(record))} = {esc(metric_value(record))}</strong><span>n={esc(record.get("n"))}</span></div>
+        <div class="metric"><strong>{esc(metric_symbol(display_record))} = {esc(metric_value(display_record))}</strong><span>n={esc(record.get("n"))}</span></div>
         <div class="expression">{esc(expression)}</div>
         <div class="record-author">by <strong>{esc(visible_author)}</strong></div>
         {record_details(record, visual_record, source, image_name, expression, analytical)}
@@ -944,6 +1056,40 @@ def setup_summary(setup: str) -> dict[str, Any]:
     }
 
 
+def shape_phrase(code: str, plural: bool = False) -> str:
+    names = {
+        "cir": ("circle", "circles"),
+        "dom": ("domino", "dominoes"),
+        "tri": ("triangle", "triangles"),
+        "squ": ("square", "squares"),
+        "pen": ("regular pentagon", "regular pentagons"),
+        "hex": ("regular hexagon", "regular hexagons"),
+        "oct": ("regular octagon", "regular octagons"),
+    }
+    singular, many = names.get(code, (code, code + "s"))
+    return many if plural else singular
+
+
+def parse_setup_codes(setup: str) -> tuple[str, str]:
+    if "in" not in setup:
+        return setup, ""
+    return tuple(setup.split("in", 1))  # type: ignore[return-value]
+
+
+def family_description(summary: dict[str, Any]) -> str:
+    item_code, container_code = parse_setup_codes(str(summary["setup"]))
+    item = shape_phrase(item_code, plural=True)
+    container = shape_phrase(container_code)
+    updated = f" Friedman lists this family as updated {esc(summary['updated'])}." if summary.get("updated") else ""
+    return (
+        f"This page tracks the smallest known container metric for packing n equal {esc(item)} "
+        f"inside a {esc(container)}. The number shown on each card is the verified coordinate metric "
+        f"for the rendering; the Friedman reference value and source information are in Details. "
+        f"Orange cards need more recovery work because the verified coordinate JSON does not yet match "
+        f"the listed reference within {RECOVERY_TOLERANCE_REL:.2%}.{updated}"
+    )
+
+
 def family_preview(setup: str, coordinates: dict[str, dict[str, Any]]) -> str:
     record = coordinates.get(f"{setup}@10")
     if record is None:
@@ -965,7 +1111,7 @@ def family_preview(setup: str, coordinates: dict[str, dict[str, Any]]) -> str:
 def family_card(summary: dict[str, Any], coordinates: dict[str, dict[str, Any]]) -> str:
     setup = str(summary["setup"])
     return f"""
-    <a class="family-card" href="#setup-{esc(setup)}">
+    <div class="family-card">
       {family_preview(setup, coordinates)}
       <div class="family-card-top">
         <div>
@@ -973,32 +1119,54 @@ def family_card(summary: dict[str, Any], coordinates: dict[str, dict[str, Any]])
           <h3>{esc(summary["title"])}</h3>
         </div>
       </div>
-    </a>
+    </div>
     """
 
 
-def family_section(summary: dict[str, Any], coordinates: dict[str, dict[str, Any]]) -> str:
+def family_page_html(setup: str | None = None) -> str:
+    choices = setup_choices()
+    setup = setup if setup in choices else (choices[0] if choices else "")
+    summary = setup_summary(setup) if setup else {"records": [], "setup": "", "title": ""}
+    coordinates = coordinate_records_by_case()
     setup = str(summary["setup"])
     records = summary["records"]
     cards = "".join(record_card(record, coordinates) for record in records)
     return f"""
-    <section class="family-section" id="setup-{esc(setup)}">
+    <main class="packing-shell">
+    {top_nav()}
+    <section class="section">
+      <div class="contain">
       <div class="family-title-card">
-        <div class="family-code">{esc(setup)}</div>
-        <h2>{esc(summary["title"])}</h2>
-        <p class="family-subtitle">Entries ordered by n.</p>
+        <div>
+          <div class="family-code">{esc(setup)}</div>
+          <h2>{esc(summary["title"])}</h2>
+          <p class="family-subtitle">{family_description(summary)}</p>
+        </div>
       </div>
       <div class="record-grid">{cards}</div>
-      <a class="back-link" href="#families">Back to family directory</a>
+      </div>
     </section>
+    </main>
     """
 
 
-def browse_html() -> str:
+def top_nav() -> str:
+    return """
+      <nav class="top-nav">
+        <div class="contain top-nav-inner">
+          <a href="#top" aria-label="Packing Benchmark home">Packing Benchmark</a>
+          <div class="nav-links">
+            <a href="https://erich-friedman.github.io/packing/" target="_blank" rel="noopener noreferrer">Friedman</a>
+          </div>
+        </div>
+      </nav>
+    """
+
+
+def directory_html() -> str:
     summaries = [setup_summary(setup) for setup in setup_choices()]
     coordinates = coordinate_records_by_case()
     family_cards = "".join(family_card(summary, coordinates) for summary in summaries)
-    sections = "".join(family_section(summary, coordinates) for summary in summaries)
     return f"""
     <main class="packing-shell" id="top">
       <section class="hero-stage">
@@ -1006,39 +1174,114 @@ def browse_html() -> str:
           <div>
             <h1>Packing Benchmark</h1>
             <p class="hero-copy">
-              Equal-copy packing records with canonical coordinate JSON. Friedman rows keep their reported metric
-              and credited finder; when Friedman coordinates are unavailable, the drawing is a generated feasible
-              coordinate rendering and the details panel says so.
+              Equal-copy packing records with canonical coordinate JSON, initialized from the public reference
+              families on <a href="https://erich-friedman.github.io/packing/" target="_blank" rel="noopener noreferrer">Erich Friedman's Packing Center</a>.
+              Friedman rows keep their credited finder; rendered cards report our verified coordinate metric and
+              mark unrecovered references in orange.
             </p>
           </div>
         </div>
       </section>
-      <nav class="top-nav">
-        <div class="contain top-nav-inner">
-          <a href="#top" aria-label="Packing Benchmark home">Packing Benchmark</a>
-          <div class="nav-links">
-            <a href="#families">Families</a>
-            <a href="#records">Records</a>
-            <a href="#submit-panel">Submit</a>
-            <a href="#schema-panel">Schema</a>
-          </div>
-        </div>
-      </nav>
+      {top_nav()}
       <section class="section" id="families">
         <div class="contain">
           <div class="section-head">
             <div>
               <h2>Choose a family</h2>
               <p class="section-note">
-                Select a family to view records ordered by item count.
+                Use the Family Records page to open a family. Each tile previews the n=10 rendering for that setup.
               </p>
             </div>
           </div>
           <div class="family-grid">{family_cards}</div>
         </div>
       </section>
-      <section class="record-book" id="records">
-        <div class="contain">{sections}</div>
+    </main>
+    """
+
+
+def browse_html() -> str:
+    return directory_html()
+
+
+def leaderboard_html() -> str:
+    rows: dict[str, dict[str, Any]] = {}
+    coordinates = coordinate_records_by_case()
+    for record in STORE.public_records(show_all=False):
+        author = display_author(record)
+        entry = rows.setdefault(author, {"wins": 0, "verified": 0, "orange": 0, "examples": []})
+        entry["wins"] += 1
+        if record.get("record_type") == "verified":
+            entry["verified"] += 1
+        visual = visual_record_for(record, coordinates)
+        if needs_recovery(record, visual):
+            entry["orange"] += 1
+        if len(entry["examples"]) < 5:
+            entry["examples"].append(str(record.get("case")))
+
+    sorted_rows = sorted(rows.items(), key=lambda item: (-int(item[1]["wins"]), item[0].lower()))
+    body = "\n".join(
+        f"""
+        <tr>
+          <td>{rank}</td>
+          <td><strong>{esc(author)}</strong></td>
+          <td>{stats['wins']}</td>
+          <td>{stats['verified']}</td>
+          <td>{stats['orange']}</td>
+          <td>{esc(', '.join(stats['examples']))}</td>
+        </tr>
+        """
+        for rank, (author, stats) in enumerate(sorted_rows, start=1)
+    )
+    return f"""
+    <main class="packing-shell">
+      {top_nav()}
+      <section class="section">
+        <div class="contain">
+          <div class="section-head">
+            <div>
+              <h2>Leaderboard</h2>
+              <p class="section-note">
+                Counts current winning records by credited author. If an improved coordinate layout was seeded
+                from an existing Friedman reference, the credit stays with the prior finder rather than Nathan.
+              </p>
+            </div>
+          </div>
+          <table class="leaderboard-table">
+            <thead>
+              <tr><th>#</th><th>Author</th><th>Wins</th><th>Verified submissions</th><th>Needs recovery</th><th>Examples</th></tr>
+            </thead>
+            <tbody>{body}</tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+    """
+
+
+def submit_schema_intro_html() -> str:
+    return f"""
+    <main class="packing-shell">
+      {top_nav()}
+      <section class="section">
+        <div class="contain">
+          <div class="section-head">
+            <div>
+              <h2>Submit JSON</h2>
+              <p class="section-note">
+                Paste canonical coordinates, verify them locally in the browser session, then submit the verified
+                record. The schema is intentionally small: regular polygons, circles, and rectangles only.
+              </p>
+            </div>
+          </div>
+          <div class="page-card">
+            <p><strong>Coordinate convention:</strong> origin at the container center; item placements are item
+            centers; rotations are radians counterclockwise. Touching is legal. Overlap and protrusion are rejected.</p>
+            <p><strong>Supported shapes:</strong> <code>regular_polygon</code>, <code>circle</code>, and
+            <code>rectangle</code>. Include <code>case</code>, <code>item</code>, <code>container</code>, and
+            <code>placements</code>.</p>
+          </div>
+        </div>
       </section>
     </main>
     """
@@ -1107,44 +1350,62 @@ def submit_solution(
         pretty = json.dumps(stored, indent=2, sort_keys=True)
         sync_status = record.get("sync_status", "dataset sync disabled")
         message = result_markdown(result) + f"\n\nSaved as record `{record['id']}`.\n\nDataset sync: `{sync_status}`."
-        return message, preview_html(stored), pretty, browse_html()
+        return message, preview_html(stored), pretty, directory_html(), leaderboard_html()
     except Exception as exc:
-        return f"### Submission rejected\n\n- {exc}", "", json_text, browse_html()
+        return f"### Submission rejected\n\n- {exc}", "", json_text, directory_html(), leaderboard_html()
+
+
+def update_family_page(setup: str):
+    return family_page_html(setup)
 
 
 THEME = gr.themes.Base()
 
 
 with gr.Blocks(title="Packing Benchmark") as demo:
-    browse_page = gr.HTML(browse_html())
-
-    with gr.Group(elem_classes=["submit-shell"]):
-        with gr.Accordion("Submit a canonical coordinate JSON", open=False, elem_id="submit-panel"):
-            with gr.Row():
-                with gr.Column(scale=7):
-                    json_code = gr.Code(value=SAMPLE_JSON, language="json", label="Canonical coordinate JSON", lines=20)
-                    json_file = gr.File(label="or upload .json", file_types=[".json"], type="filepath")
-                with gr.Column(scale=5):
-                    submitter = gr.Textbox(label="Submitted by", placeholder="Name, handle, or lab")
-                    source_url = gr.Textbox(label="Source URL", placeholder="Optional paper, repo, or run link")
-                    notes = gr.Textbox(label="Notes", lines=3, placeholder="Optional method or provenance note")
-                    tolerance = gr.Number(value=DEFAULT_TOLERANCE, label="Verification tolerance")
-                    with gr.Row():
-                        verify_btn = gr.Button("Verify", variant="secondary")
-                        submit_btn = gr.Button("Submit Verified Record", variant="primary")
-                    report = gr.Markdown()
-                    preview = gr.HTML(label="Browser render")
-            normalized_json = gr.Code(label="Normalized JSON", language="json", lines=12)
-
-    with gr.Group(elem_classes=["schema-shell"]):
-        with gr.Accordion("Canonical JSON schema", open=False, elem_id="schema-panel"):
-            gr.Markdown(SCHEMA_TEXT)
-
+    with gr.Tabs():
+        with gr.Tab("Families"):
+            browse_page = gr.HTML(directory_html())
+
+        with gr.Tab("Family Records"):
+            choices = setup_choices()
+            initial_setup = choices[0] if choices else ""
+            family_select = gr.Dropdown(
+                choices=choices,
+                value=initial_setup,
+                label="Family",
+                elem_id="family-selector",
+            )
+            family_page = gr.HTML(family_page_html(initial_setup))
+
+        with gr.Tab("Leaderboard"):
+            leaderboard_page = gr.HTML(leaderboard_html())
+
+        with gr.Tab("Submit JSON"):
+            gr.HTML(submit_schema_intro_html())
+            with gr.Group(elem_classes=["submit-shell"]):
+                with gr.Row():
+                    with gr.Column(scale=7):
+                        json_code = gr.Code(value=SAMPLE_JSON, language="json", label="Canonical coordinate JSON", lines=18)
+                        json_file = gr.File(label="or upload .json", file_types=[".json"], type="filepath")
+                    with gr.Column(scale=5):
+                        submitter = gr.Textbox(label="Submitted by", placeholder="Name, handle, or lab")
+                        source_url = gr.Textbox(label="Source URL", placeholder="Optional paper, repo, or run link")
+                        notes = gr.Textbox(label="Notes", lines=3, placeholder="Optional method or provenance note")
+                        tolerance = gr.Number(value=DEFAULT_TOLERANCE, label="Verification tolerance")
+                        with gr.Row():
+                            verify_btn = gr.Button("Verify", variant="secondary")
+                            submit_btn = gr.Button("Submit Verified Record", variant="primary")
+                        report = gr.Markdown()
+                        preview = gr.HTML(label="Browser render")
+                normalized_json = gr.Code(label="Normalized JSON", language="json", lines=10)
+
+    family_select.change(update_family_page, inputs=[family_select], outputs=[family_page])
     verify_btn.click(verify_only, inputs=[json_code, json_file, tolerance], outputs=[report, preview, normalized_json])
     submit_btn.click(
         submit_solution,
         inputs=[json_code, json_file, submitter, notes, source_url, tolerance],
-        outputs=[report, preview, normalized_json, browse_page],
+        outputs=[report, preview, normalized_json, browse_page, leaderboard_page],
     )