Spaces:
Runtime error
Runtime error
| <!-- | |
| NEON AI (TM) SOFTWARE, Software Development Kit & Application Development System | |
| All trademark and other rights reserved by their respective owners | |
| Copyright 2008-2025 Neongecko.com Inc. | |
| BSD-3 License | |
| Redistribution and use in source and binary forms, with or without modification, are permitted provided that the | |
| following conditions are met: | |
| 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following | |
| disclaimer. | |
| 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following | |
| disclaimer in the documentation and/or other materials provided with the distribution. | |
| 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products | |
| derived from this software without specific prior written permission. | |
| THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, | |
| INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | |
| DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, | |
| SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR | |
| SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, | |
| WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | |
| THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <title>Neon Leaderboard</title> | |
| <style> | |
| :root { | |
| --bg: #0f1419; | |
| --bg-elev: #161c24; | |
| --bg-elev2: #1c242e; | |
| --panel: #131a22; | |
| --border: #283441; | |
| --border-soft: #1f2a35; | |
| --text: #d7dee7; | |
| --text-dim: #93a1b0; | |
| --text-faint: #64727f; | |
| --accent: #3fb6a8; /* neon teal */ | |
| --accent-dim: #2c7a72; | |
| --neon: #5ad1c2; | |
| --good-h: 168; /* teal-green */ | |
| --bad-h: 28; /* warm amber */ | |
| --chip-bg: #1d2731; | |
| --shadow: 0 4px 18px rgba(0,0,0,.35); | |
| --radius: 9px; | |
| --row-h: 26px; | |
| --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; | |
| } | |
| html[data-theme="light"] { | |
| --bg: #f3f5f8; | |
| --bg-elev: #ffffff; | |
| --bg-elev2: #eef1f5; | |
| --panel: #ffffff; | |
| --border: #d4dbe3; | |
| --border-soft: #e4e9ef; | |
| --text: #1f2933; | |
| --text-dim: #56636f; | |
| --text-faint: #8a97a3; | |
| --accent: #1f8f82; | |
| --accent-dim: #5fb5ab; | |
| --neon: #178a7c; | |
| --chip-bg: #eef2f6; | |
| --shadow: 0 4px 18px rgba(40,55,75,.12); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; margin: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 13px; | |
| line-height: 1.35; | |
| -webkit-font-smoothing: antialiased; | |
| overflow: hidden; /* single viewport, no page scroll */ | |
| } | |
| button { font-family: inherit; color: inherit; cursor: pointer; } | |
| select, input { font-family: inherit; font-size: 12.5px; } | |
| .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } | |
| /* ---------- Header ---------- */ | |
| header.top { | |
| display: flex; align-items: center; gap: 18px; | |
| padding: 0 16px; height: 50px; flex: 0 0 auto; | |
| background: var(--bg-elev); border-bottom: 1px solid var(--border); | |
| } | |
| .brand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; } | |
| .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); | |
| box-shadow: 0 0 9px var(--accent); align-self: center; } | |
| .brand h1 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: .2px; } | |
| .brand .meta { color: var(--text-faint); font-size: 11px; } | |
| nav.tabs { display: flex; gap: 2px; margin-left: 4px; } | |
| nav.tabs button { | |
| background: transparent; border: 0; padding: 8px 14px; border-radius: 7px; | |
| color: var(--text-dim); font-size: 13px; font-weight: 550; letter-spacing: .2px; | |
| transition: background .12s, color .12s; | |
| } | |
| nav.tabs button:hover { background: var(--bg-elev2); color: var(--text); } | |
| nav.tabs button.active { background: var(--accent); color: #06231f; } | |
| html[data-theme="light"] nav.tabs button.active { color: #fff; } | |
| .spacer { flex: 1 1 auto; } | |
| .icon-btn { | |
| background: var(--bg-elev2); border: 1px solid var(--border); border-radius: 7px; | |
| width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-dim); | |
| font-size: 15px; | |
| } | |
| .icon-btn:hover { color: var(--text); border-color: var(--accent-dim); } | |
| /* ---------- Controls bar ---------- */ | |
| .controls { | |
| display: flex; align-items: center; gap: 14px; flex-wrap: wrap; | |
| padding: 9px 16px; flex: 0 0 auto; | |
| background: var(--panel); border-bottom: 1px solid var(--border-soft); | |
| min-height: 46px; | |
| } | |
| .ctl { display: flex; align-items: center; gap: 7px; } | |
| .ctl label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; } | |
| .field { | |
| background: var(--bg-elev2); border: 1px solid var(--border); color: var(--text); | |
| border-radius: 7px; padding: 6px 9px; min-width: 90px; outline: none; | |
| } | |
| .field:focus { border-color: var(--accent-dim); } | |
| select.field { padding-right: 26px; appearance: none; | |
| background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), | |
| linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); | |
| background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; | |
| background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } | |
| .seg { display: inline-flex; background: var(--bg-elev2); border: 1px solid var(--border); | |
| border-radius: 7px; overflow: hidden; } | |
| .seg button { background: transparent; border: 0; padding: 6px 11px; color: var(--text-dim); font-size: 12px; } | |
| .seg button.active { background: var(--accent); color: #06231f; } | |
| html[data-theme="light"] .seg button.active { color: #fff; } | |
| .toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; user-select: none; } | |
| .toggle input { accent-color: var(--accent); } | |
| /* combobox (searchable dropdown) */ | |
| .combo { position: relative; } | |
| .combo .menu { | |
| position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 360px; | |
| max-height: 320px; overflow: auto; background: var(--bg-elev); border: 1px solid var(--border); | |
| border-radius: 8px; box-shadow: var(--shadow); padding: 5px; display: none; | |
| } | |
| .combo.open .menu { display: block; } | |
| .combo .opt { padding: 6px 9px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; } | |
| .combo .opt:hover, .combo .opt.kbd { background: var(--bg-elev2); } | |
| .combo .opt.sel { color: var(--accent); } | |
| .combo .opt small { color: var(--text-faint); margin-left: auto; } | |
| /* ---------- Main ---------- */ | |
| main { flex: 1 1 auto; min-height: 0; display: flex; position: relative; } | |
| .view { display: none; flex: 1; min-height: 0; flex-direction: column; padding: 12px 16px 8px; } | |
| .view.active { display: flex; } | |
| .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border-soft); | |
| border-radius: var(--radius); background: var(--panel); } | |
| table { border-collapse: separate; border-spacing: 0; width: 100%; } | |
| thead th { | |
| position: sticky; top: 0; z-index: 5; background: var(--bg-elev); | |
| text-align: right; padding: 7px 9px; font-size: 11px; font-weight: 600; color: var(--text-dim); | |
| border-bottom: 1px solid var(--border); white-space: nowrap; cursor: help; user-select: none; | |
| } | |
| thead th.lbl, thead th.sortable { cursor: pointer; } | |
| thead th.txt { text-align: left; } | |
| thead th .arrow { color: var(--accent); font-size: 9px; margin-left: 3px; } | |
| tbody td { padding: 4px 9px; text-align: right; font-variant-numeric: tabular-nums; | |
| border-bottom: 1px solid var(--border-soft); white-space: nowrap; height: var(--row-h); } | |
| tbody td.txt { text-align: left; font-family: var(--mono); font-size: 12px; } | |
| tbody tr:hover td { background: rgba(127,150,170,.07); } | |
| tbody tr.neon td.txt .pipe { font-weight: 600; } | |
| .badge { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 650; | |
| letter-spacing: .3px; vertical-align: middle; } | |
| /* NEON marker: plain text, no pill / background (per design request). */ | |
| .badge.neon { background: none; border: 0; padding: 0; color: var(--neon); font-size: 10px; font-weight: 700; letter-spacing: .5px; } | |
| .badge.pareto { background: rgba(120,170,255,.14); color: #8fb6ff; } | |
| .badge.dq { background: rgba(255,120,90,.13); color: #ff9b7d; border: 1px solid rgba(255,120,90,.25); } | |
| html[data-theme="light"] .badge.pareto { color: #2f5fc0; } | |
| .star { color: #d6b24a; font-size: 12px; } | |
| html[data-theme="light"] .star { color: #b8860b; } | |
| .pipe small { color: var(--text-faint); } | |
| /* Retriever component badges */ | |
| .rbadge { display: inline-block; padding: 1px 6px; margin: 1px 4px 1px 0; border-radius: 5px; | |
| font-size: 10px; font-weight: 600; letter-spacing: .2px; border: 1px solid transparent; white-space: nowrap; } | |
| .rbadge small { font-size: 1em; opacity: .8; font-weight: 500; margin-left: 4px; } | |
| .rbadge.bm25 { background: rgba(120,160,255,.28); color: #c2d4ff; border-color: rgba(120,160,255,.55); } | |
| .rbadge.emb { background: rgba(63,182,168,.28); color: #7ee6d6; border-color: rgba(63,182,168,.55); } | |
| .rbadge.splade { background: rgba(190,140,255,.28); color: #ddc4ff; border-color: rgba(190,140,255,.55); } | |
| .rbadge.web { background: rgba(230,170,90,.28); color: #f3c98e; border-color: rgba(230,170,90,.55); } | |
| html[data-theme="light"] .rbadge.bm25 { background: rgba(47,95,192,.18); color: #244a99; border-color: rgba(47,95,192,.55); } | |
| html[data-theme="light"] .rbadge.emb { background: rgba(31,143,130,.18); color: #146b61; border-color: rgba(31,143,130,.55); } | |
| html[data-theme="light"] .rbadge.splade { background: rgba(122,63,192,.18); color: #5f2f99; border-color: rgba(122,63,192,.55); } | |
| html[data-theme="light"] .rbadge.web { background: rgba(154,106,26,.18); color: #7a5214; border-color: rgba(154,106,26,.55); } | |
| td.rerank-col { text-align: right; color: var(--text-dim); font-size: 12px; } | |
| th.dq-col, td.dq-col { text-align: center; } | |
| td.dq-col .dq-ok { color: var(--text-faint); } | |
| th.comp-col, td.comp-col { text-align: center; } | |
| td.comp-col .dq-ok { color: var(--text-faint); } | |
| td.comp-col .rbadge { margin: 1px 0; } | |
| .verdict { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; } | |
| .v-clear { background: rgba(63,182,168,.18); color: var(--neon); } | |
| .v-inconclusive { background: rgba(190,170,90,.16); color: #d9c178; } | |
| .v-dq { background: rgba(255,120,90,.13); color: #ff9b7d; } | |
| .v-none { background: var(--chip-bg); color: var(--text-faint); } | |
| /* Picks grid + Metrics grid share matrix styles */ | |
| .matrix-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border-soft); | |
| border-radius: var(--radius); background: var(--panel); } | |
| .matrix { width: 100%; border-collapse: separate; border-spacing: 0; } | |
| .matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); } | |
| .matrix thead th { position: sticky; top: 0; background: var(--bg-elev); z-index: 5; cursor: help; font-size: 11.5px; } | |
| .matrix tbody th { position: sticky; left: 0; background: var(--bg-elev); z-index: 4; text-align: left; cursor: help; } | |
| .matrix td { text-align: center; font-variant-numeric: tabular-nums; } | |
| .matrix .cell-sub { display: block; font-size: 10px; color: var(--text-faint); margin-top: 2px; } | |
| /* Models tab */ | |
| .model-page { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 280px 1fr; gap: 14px; } | |
| .card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px; } | |
| .card.scroll { overflow: auto; } | |
| .kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; } | |
| .kv:last-child { border-bottom: 0; } | |
| .kv .k { color: var(--text-faint); } | |
| .kv .v { color: var(--text); text-align: right; font-family: var(--mono); } | |
| .stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } | |
| .stat { background: var(--bg-elev2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 9px 13px; min-width: 92px; } | |
| .stat .n { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; } | |
| .stat .l { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; cursor: help; } | |
| /* Guide tab */ | |
| .guide-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } | |
| .guide-col { overflow: auto; } | |
| .guide-col h3 { margin: 0 0 8px; font-size: 13px; color: var(--accent); } | |
| .gloss { width: 100%; border-collapse: collapse; } | |
| .gloss td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: 12px; } | |
| .gloss td.term { color: var(--text); font-weight: 600; white-space: nowrap; width: 78px; font-family: var(--mono); } | |
| .gloss td.def { color: var(--text-dim); } | |
| .prof { background: var(--bg-elev2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; } | |
| .prof h4 { margin: 0 0 4px; font-size: 12.5px; } | |
| .prof .gates { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .gate { background: var(--chip-bg); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--text-dim); font-family: var(--mono); } | |
| footer.bottom { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 4px 16px; | |
| height: 26px; background: var(--bg-elev); border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-faint); } | |
| footer .lg { display: inline-flex; align-items: center; gap: 5px; } | |
| footer .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } | |
| /* tooltip */ | |
| #tip { position: fixed; z-index: 200; max-width: 320px; background: #0a0e12; color: #e7edf3; | |
| border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.45; | |
| box-shadow: var(--shadow); pointer-events: none; opacity: 0; transition: opacity .1s; } | |
| html[data-theme="light"] #tip { background: #1f2933; color: #f3f5f8; border-color: #1f2933; } | |
| #tip b { color: var(--neon); } | |
| .empty { color: var(--text-faint); padding: 30px; text-align: center; font-size: 13px; } | |
| ::-webkit-scrollbar { width: 10px; height: 10px; } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header class="top"> | |
| <div class="brand"><span class="dot"></span><h1>Neon Leaderboard</h1><span class="meta" id="headerMeta"></span></div> | |
| <nav class="tabs" id="tabs"> | |
| <button data-tab="compare" class="active">Compare</button> | |
| <button data-tab="picks">Picks</button> | |
| <button data-tab="models">Models</button> | |
| <button data-tab="metrics">Metrics</button> | |
| <button data-tab="guide">Guide</button> | |
| </nav> | |
| <span class="spacer"></span> | |
| <button class="icon-btn" id="themeBtn" title="Toggle light / dark">◐</button> | |
| </header> | |
| <!-- COMPARE --> | |
| <div class="controls" id="ctl-compare"> | |
| <div class="ctl"><label>View</label> | |
| <div class="seg" id="cmpModeSeg"> | |
| <button data-mode="byBench" class="active">By benchmark</button> | |
| <button data-mode="byModel">By model</button> | |
| </div> | |
| </div> | |
| <div class="ctl" id="benchPickWrap"><label>Benchmark</label><div class="combo" id="benchCombo"></div></div> | |
| <div class="ctl" id="modelPickWrap" style="display:none"><label>Model</label><div class="combo" id="modelCombo"></div></div> | |
| <div class="ctl"><label>Filter model</label><div class="combo" id="filterCombo"></div></div> | |
| <div class="ctl"><label>Sort</label><select class="field" id="sortSel"></select> | |
| <button class="icon-btn" id="sortDir" title="Sort direction" style="width:30px;height:30px">▾</button> | |
| <label style="margin-left:8px">then</label><select class="field" id="sortSel2"></select> | |
| <button class="icon-btn" id="sortDir2" title="Secondary sort direction" style="width:30px;height:30px">▾</button> | |
| <label style="margin-left:8px">then</label><select class="field" id="sortSel3"></select> | |
| <button class="icon-btn" id="sortDir3" title="Tertiary sort direction" style="width:30px;height:30px">▾</button> | |
| </div> | |
| <span class="spacer"></span> | |
| <label class="toggle"><input type="checkbox" id="neonOnly" /> Neon only</label> | |
| <label class="toggle"><input type="checkbox" id="showDQ" checked /> Show DQ</label> | |
| <label class="toggle"><input type="checkbox" id="heat" checked /> Color</label> | |
| </div> | |
| <!-- PICKS --> | |
| <div class="controls" id="ctl-picks" style="display:none"> | |
| <div class="ctl"><label>Router recommendations</label></div> | |
| <span class="meta" style="color:var(--text-faint);font-size:11.5px">Pick = model · retriever · reranker per client profile. Hover a profile column for its hard gates.</span> | |
| </div> | |
| <!-- MODELS --> | |
| <div class="controls" id="ctl-models" style="display:none"> | |
| <div class="ctl"><label>Model</label><div class="combo" id="modelPageCombo"></div></div> | |
| <span class="meta" id="modelPageBadge"></span> | |
| </div> | |
| <!-- METRICS --> | |
| <div class="controls" id="ctl-metrics" style="display:none"> | |
| <div class="ctl"><label>Show</label> | |
| <div class="seg" id="metricModeSeg"> | |
| <button data-mode="scores" class="active">Mean scores</button> | |
| <button data-mode="winloss">Wins / losses</button> | |
| </div> | |
| </div> | |
| <div class="ctl"><label>Sort by</label><select class="field" id="metricSortSel"></select></div> | |
| <span class="spacer"></span> | |
| <label class="toggle"><input type="checkbox" id="metricNeonOnly" /> Neon only</label> | |
| <label class="toggle"><input type="checkbox" id="metricHeat" checked /> Color</label> | |
| </div> | |
| <!-- GUIDE --> | |
| <div class="controls" id="ctl-guide" style="display:none"> | |
| <div class="ctl"><label>Reference</label></div> | |
| <span class="meta" style="color:var(--text-faint);font-size:11.5px">Every column, profile gate, and provenance source behind the numbers.</span> | |
| </div> | |
| <main> | |
| <section class="view active" id="view-compare"><div class="table-wrap"><table id="cmpTable"></table></div></section> | |
| <section class="view" id="view-picks"><div class="matrix-wrap"><table class="matrix" id="picksTable"></table></div></section> | |
| <section class="view" id="view-models"><div class="model-page" id="modelPage"></div></section> | |
| <section class="view" id="view-metrics"><div class="matrix-wrap"><table class="matrix" id="metricsTable"></table></div></section> | |
| <section class="view" id="view-guide"><div class="guide-grid" id="guideGrid"></div></section> | |
| </main> | |
| <footer class="bottom"> | |
| <span class="lg"><span class="sw" id="lgGood"></span> higher rank</span> | |
| <span class="lg"><span class="sw" id="lgBad"></span> lower rank</span> | |
| <span class="lg"><span class="badge neon">NEON</span> Neon.ai model</span> | |
| <span class="lg"><span class="star">★</span> Pareto-optimal</span> | |
| <span class="lg"><span class="badge dq-heat" id="lgDQ" style="padding:0 6px">DQ</span> gate failed — accuracy › cost › latency (green ✓ passes)</span> | |
| <span class="spacer"></span> | |
| <span id="provFoot"></span> | |
| </footer> | |
| </div> | |
| <div id="tip"></div> | |
| <script src="data.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |