#!/usr/bin/env python3 """ Generator: builds dashboard.html + pages/..html from data/benchmark_history.json. Re-run after each grading batch to regenerate everything. Cyberpunk-terminal aesthetic. Pure stdlib + Chart.js via CDN. """ import json, html, os, sys HERE = os.path.dirname(os.path.abspath(__file__)) DATA = os.path.join(HERE, "data", "benchmark_history.json") OUT_DASH = os.path.join(HERE, "dashboard.html") PAGES_DIR = os.path.join(HERE, "pages") PILLARS = ["complexity", "concurrency", "isolation", "memory_edge_cases", "test_integrity"] PILLAR_LABELS = { "complexity": "Complexity (O(1))", "concurrency": "Concurrency / Races", "isolation": "Tx Isolation", "memory_edge_cases": "Memory & Edges", "test_integrity": "Test Integrity", } # ---- cyberpunk palette ---- NEON_CYAN = "#00ffc8" NEON_MAG = "#ff2bd6" NEON_LIME = "#b6ff3a" NEON_AMBER= "#ffb000" NEON_RED = "#ff3b5c" BG = "#0a0a0f" PANEL = "#101018" INK = "#d7e0e6" # body text INK_DIM = "#7a8590" # muted def verdict_meta(v): return { "Production Ready": (NEON_LIME, "PROD"), "Minor Logic Flaws": (NEON_AMBER, "FLAWS"), "Critical Bugs": (NEON_RED, "CRIT"), "Broken / Unusable": (NEON_RED, "DEAD"), }.get(v, (INK_DIM, "???")) def esc(s): return html.escape(str(s)) if s is not None else "" def speed_str(m): if m.get("tok_sec") is None: return "N/A" return f"{m['tok_sec']:.1f}" # series colors for charts (cycles through neon accents) SERIES = [NEON_CYAN, NEON_MAG, NEON_LIME, NEON_AMBER, "#5b8cff", "#c084fc", "#34d399", "#f472b6"] # shared CSS — embedded so each page is standalone def shared_css(): return """ :root{ --bg:#0a0a0f; --panel:#101018; --panel2:#14141f; --ink:#d7e0e6; --dim:#7a8590; --cyan:#00ffc8; --mag:#ff2bd6; --lime:#b6ff3a; --amber:#ffb000; --red:#ff3b5c; --blue:#5b8cff; --grid: rgba(0,255,200,0.04); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:'Fira Sans',system-ui,-apple-system,sans-serif; line-height:1.6; min-height:100vh; /* scanline + grid texture overlay */ background-image: repeating-linear-gradient(0deg, rgba(0,255,200,0.025) 0px, rgba(0,255,200,0.025) 1px, transparent 1px, transparent 3px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(1200px 600px at 70% -10%, rgba(91,139,255,0.10), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(255,43,214,0.08), transparent 60%); background-size: 3px 3px, 44px 44px, 44px 44px, 100% 100%, 100% 100%; background-attachment: fixed; } mono,.mono,h1,h2,h3,.hud,th,.code,.badge,.stat-num,.lead-model,.verdict-chip{font-family:'Fira Code',ui-monospace,'SF Mono',Menlo,monospace} a{color:var(--cyan);text-decoration:none} a:hover{text-shadow:0 0 8px var(--cyan)} .wrap{max-width:1180px;margin:0 auto;padding:28px 20px 80px} header.hud-bar{ border:1px solid rgba(0,255,200,0.25); background:linear-gradient(180deg,rgba(0,255,200,0.06),rgba(0,0,0,0)); box-shadow:0 0 24px rgba(0,255,200,0.08), inset 0 0 30px rgba(0,0,0,0.5); border-radius:6px; padding:18px 22px; margin-bottom:24px; position:relative; overflow:hidden; } header.hud-bar::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,255,200,0.03) 7px 8px); pointer-events:none; } .kicker{color:var(--cyan); letter-spacing:.32em; font-size:.72rem; text-transform:uppercase; text-shadow:0 0 10px rgba(0,255,200,0.5)} h1{font-size:1.5rem; margin:.3em 0 0; letter-spacing:.02em; text-shadow:0 0 16px rgba(0,255,200,0.35)} .subtitle{color:var(--dim); font-size:.9rem; margin-top:.35em} .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 26px} .stat{background:var(--panel); border:1px solid rgba(255,255,255,0.06); border-radius:6px; padding:14px 16px; position:relative; overflow:hidden} .stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)} .stat .lbl{color:var(--dim);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase} .stat .num{font-size:1.6rem;margin-top:4px;color:var(--ink)} .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:26px} .panel{background:var(--panel);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:18px} .panel h2{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px;text-shadow:0 0 10px rgba(0,255,200,0.35)} .chart-box{position:relative;height:340px} @media(max-width:900px){.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}} /* leaderboard */ table{width:100%;border-collapse:collapse;font-size:.86rem} thead th{text-align:left;color:var(--dim);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(0,255,200,0.2);padding:8px 10px} tbody td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:middle} tbody tr{transition:background .15s, box-shadow .15s} tbody tr:hover{background:rgba(0,255,200,0.05);box-shadow:inset 0 0 0 1px rgba(0,255,200,0.25)} .rank{color:var(--dim);width:34px} .rank.top{color:var(--lime);text-shadow:0 0 8px var(--lime)} .model-name{color:var(--ink)} .quant{color:var(--dim);font-size:.78rem} .badge{display:inline-block;padding:2px 9px;border-radius:3px;font-size:.68rem;letter-spacing:.1em;border:1px solid currentColor} .btn{display:inline-block;padding:5px 12px;border:1px solid var(--cyan);color:var(--cyan);border-radius:4px;font-size:.74rem;letter-spacing:.08em;cursor:pointer;transition:all .18s} .btn:hover{background:rgba(0,255,200,0.12);box-shadow:0 0 14px rgba(0,255,200,0.4)} .bar-cell{display:flex;align-items:center;gap:10px} .score-bar{flex:1;height:8px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;min-width:70px} .score-bar > i{display:block;height:100%;border-radius:2px;transition:width .4s, box-shadow .2s} tr:hover .score-bar > i{box-shadow:0 0 12px currentColor} .caveat{color:var(--amber);font-size:.72rem} .cloud-tag{color:var(--blue);font-size:.7rem;border:1px solid rgba(91,139,255,.4);padding:1px 6px;border-radius:3px;margin-left:6px} footer{color:var(--dim);font-size:.74rem;margin-top:40px;border-top:1px solid rgba(255,255,255,0.06);padding-top:14px;text-align:center} @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}} """ def head_html(title): return f""" {esc(title)}
""" FOOT = """
""" def render_dashboard(data): models = sorted(data["models"], key=lambda m: -m["total_score"]) n = len(models) avg = sum(m["total_score"] for m in models) / n if n else 0 top = models[0] if models else None prod = sum(1 for m in models if m["verdict"] == "Production Ready") # chart datasets (exclude cloud model from speed bars — has no tok/sec) local = [m for m in models if m.get("tok_sec") is not None] local_sorted = sorted(local, key=lambda m: -m["tok_sec"]) radar_models = [m for m in models if m.get("tok_sec") is not None or True][:3] # top 3 by score already rows = [] for i, m in enumerate(models, 1): col, chip = verdict_meta(m["verdict"]) caveat = "" if m.get("speed_caveat"): caveat = '
⚠ speed suspect
' cloud = 'CLOUD' if m.get("format") == "cloud" else "" bar_color = col rows.append(f""" #{i}
{esc(m['model_name'])}{cloud}
{esc(m['quant'])}
{caveat} {speed_str(m)} t/s
{m['total_score']}
{chip} {esc(m['best_for'])[:70]}… DECODE ▸ """) # JSON for charts bar_labels = json.dumps([m["model_name"].split("(")[0].strip()[:18] for m in local_sorted]) bar_speed = json.dumps([m["tok_sec"] for m in local_sorted]) bar_score = json.dumps([m["total_score"] for m in local_sorted]) radar_labels = json.dumps([PILLAR_LABELS[p] for p in PILLARS]) radar_sets = [] for idx, m in enumerate(radar_models): col = SERIES[idx % len(SERIES)] radar_sets.append({ "label": m["model_name"][:24], "data": [m["breakdown"][p] for p in PILLARS], "borderColor": col, "backgroundColor": col + "22", }) radar_json = json.dumps(radar_sets) stats = f"""
Models Tested
{n}
Top Score
{top['total_score'] if top else '—'}
Average
{avg:.1f}
Prod-Ready
{prod}/{n}
""" top_name = esc(top["model_name"]) if top else "—" body = f""" {head_html("LLM Benchmark Suite")}
▚ LOCAL LLM BENCHMARK SUITE // LFU CACHE & ACID AUDIT

// BENCHMARK_RESULTS .json

{n} models graded on a strict 5-pillar / 100-pt rubric · O(1) LFU + ACID transactions · M3 Max · LM Studio  ·  TOP: {top_name}
{stats}

▮ Score vs Throughput (tok/sec)

Local models only — cloud baseline (DeepSeek) excluded from speed axis. Gemma 4 bars flagged ⚠ (GPU-offload suspect).

▮ 5-Pillar Radar — Top 3

Each pillar scored 0–20. Outer = stronger.

▮ LEADERBOARD

{''.join(rows)}
#ModelSpeedScoreVerdictBest For
{FOOT}""" return body def render_detail(m, data): col, chip = verdict_meta(m["verdict"]) # derive "what went right" from high pillars, "wrong" from low + critical_bugs bd = m["breakdown"] ranked = sorted(PILLARS, key=lambda p: -bd[p]) rights = [f"{PILLAR_LABELS[p]} ({bd[p]}/20)" for p in ranked if bd[p] >= 16] wrongs_pillars = [f"{PILLAR_LABELS[p]} ({bd[p]}/20)" for p in ranked if bd[p] <= 13] pillar_bars = "" for p in PILLARS: v = bd[p] c = NEON_LIME if v >= 17 else (NEON_AMBER if v >= 13 else NEON_RED) pillar_bars += f"""
{PILLAR_LABELS[p]}
{v}/20
""" bugs_html = "".join(f"
  • {esc(b)}
    • " for b in m.get("critical_bugs", [])) patch = m.get("patch_code", "") metrics_block = "" if m.get("tok_sec") is not None: metrics_block = f"""
    tok/sec{m['tok_sec']:.2f}
    tokens{m.get('total_tokens') or '—'}
    TTFT{m.get('ttft_sec'):.2f}s
    """ else: metrics_block = '
    runtimeCLOUD — not measured
    ' caveat_html = f'
    ⚠ SPEED CAVEAT: {esc(m["speed_caveat"])}
    ' if m.get("speed_caveat") else "" tests_html = 'PASS' if m.get("tests_pass") else 'CRASH' cloud_tag = 'CLOUD BASELINE' if m.get("format") == "cloud" else "" rights_html = "".join(f"
  • {esc(r)}
    • " for r in rights) or "
  • No pillar reached 16+ — no standout strengths.
    • " wrongs_html = "".join(f"
  • {esc(w)}
    • " for w in wrongs_pillars) or "
  • No pillar fell below 14 — solid across the board.
    • " extra_css = """ .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0} .mini{background:var(--panel2);border:1px solid rgba(255,255,255,0.06);border-radius:5px;padding:10px 12px} .mlbl{display:block;color:var(--dim);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase} .mval{display:block;font-size:1.15rem;margin-top:3px} .caveat-box{background:rgba(255,176,0,0.08);border:1px solid rgba(255,176,0,0.4);color:var(--amber);padding:10px 14px;border-radius:5px;font-size:.82rem;margin:12px 0} .pillar-list{margin-top:8px} .prow{display:grid;grid-template-columns:170px 1fr 56px;align-items:center;gap:12px;margin:9px 0} .plabel{color:var(--ink);font-size:.84rem} .pbar{height:9px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden} .pbar > i{display:block;height:100%;border-radius:2px} .pval{text-align:right;font-size:.92rem} .ok{color:var(--lime);border:1px solid var(--lime);padding:1px 8px;border-radius:3px;font-size:.7rem} .bad{color:var(--red);border:1px solid var(--red);padding:1px 8px;border-radius:3px;font-size:.7rem} .section{background:var(--panel);border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:18px;margin-top:18px} .section h2{font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px;text-shadow:0 0 10px rgba(0,255,200,0.35)} ul.clean{list-style:none;padding:0;margin:0} ul.clean li{padding:7px 0 7px 18px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative;font-size:.88rem} ul.clean li::before{content:"▸";position:absolute;left:0;color:var(--cyan)} ul.clean li.dim{color:var(--dim)} ul.clean li.dim::before{color:var(--dim)} .bugs li::before{content:"✗";color:var(--red)} .rights li::before{content:"✓";color:var(--lime)} pre.code{background:#06060a;border:1px solid rgba(0,255,200,0.2);border-radius:6px;padding:14px;overflow-x:auto;color:#cfe;font-size:.78rem;line-height:1.5;box-shadow:inset 0 0 30px rgba(0,0,0,0.6)} pre.code::before{content:"// patch.py";display:block;color:var(--dim);font-size:.68rem;margin-bottom:8px} .back{display:inline-block;margin-bottom:18px;font-size:.8rem} .verdict-chip-lg{display:inline-block;padding:4px 14px;border-radius:3px;border:1px solid currentColor;font-size:.78rem;letter-spacing:.1em} .best-box{background:linear-gradient(135deg,rgba(0,255,200,0.08),rgba(91,139,255,0.05));border:1px solid rgba(0,255,200,0.25);border-radius:8px;padding:16px 18px;font-size:.95rem;line-height:1.6} @media(max-width:640px){.prow{grid-template-columns:1fr auto}.mini-grid{grid-template-columns:repeat(2,1fr)}} """ head = head_html(m["model_name"]) # inject extra css before head = head.replace("", extra_css + "") return f""" {head} ◂ BACK TO LEADERBOARD
    ▚ MODEL AUDIT // {esc(m['quant'])}

    // {esc(m['model_name'])} {cloud_tag}

    {chip} — {esc(m['verdict'])} {m['total_score']}/100 tests: {tests_html}
    {caveat_html}
    {metrics_block}

    ▮ PILLAR BREAKDOWN

    {pillar_bars}

    ✓ WENT RIGHT

      {rights_html}

    ✗ WENT WRONG

      {wrongs_html}

    ▮ CRITICAL BUGS

    ▮ RECOMMENDED USE

    {esc(m['best_for'])}

    ▮ REFACTORED PATCH

    {esc(patch)}
    {FOOT}""" def main(): with open(DATA) as f: data = json.load(f) os.makedirs(PAGES_DIR, exist_ok=True) with open(OUT_DASH, "w") as f: f.write(render_dashboard(data)) for m in data["models"]: with open(os.path.join(PAGES_DIR, m["id"] + ".html"), "w") as f: f.write(render_detail(m, data)) print(f"OK: dashboard.html + {len(data['models'])} pages in pages/") if __name__ == "__main__": main()