| |
| (function () { |
| "use strict"; |
| var D = window.BENCH_DATA; |
| var app = document.getElementById("app"); |
| var tip = document.getElementById("tooltip"); |
| if (!D || !app) return; |
|
|
| var VENDORS = ["openai", "anthropic", "google", "xai", "meta", "mistral", "deepseek", "qwen", "groq", "other"]; |
| var MARK = "./sidebar-logo-a.svg"; |
| var WORDMARK = "./aligned-ai-lockup-no-beta-54.png"; |
|
|
| function esc(s) { |
| return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) { |
| return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]; |
| }); |
| } |
| function fmt(v) { return v === 100 || v === 0 ? v + "%" : Number(v).toFixed(1) + "%"; } |
| function vendorLogo(v) { return "./" + (VENDORS.indexOf(v) >= 0 ? v : "other") + ".png"; } |
| function hostOf(u) { try { return new URL(u).hostname.replace(/^www\./, ""); } catch (e) { return u; } } |
|
|
| |
| var boards = D.boards.filter(function (b) { |
| return !b.pending && b.aligned && typeof b.aligned.score === "number" && isFinite(b.aligned.score); |
| }); |
| var byId = {}; |
| boards.forEach(function (b) { byId[b.id] = b; }); |
|
|
| |
| function rows(b) { |
| var hib = b.higherIsBetter !== false; |
| var list = [{ model: "Aligned AI", vendor: "aligned", score: b.aligned.score, aligned: true }]; |
| (b.competitors || []).forEach(function (c) { |
| if (c && typeof c.score === "number" && isFinite(c.score) && c.source) list.push(c); |
| }); |
| list.sort(function (x, y) { return hib ? y.score - x.score : x.score - y.score; }); |
| return list; |
| } |
| |
| function rank(b) { |
| var r = rows(b); |
| if (r.length < 2) return null; |
| var hib = b.higherIsBetter !== false, a = b.aligned.score; |
| var better = r.filter(function (x) { return !x.aligned && (hib ? x.score > a : x.score < a); }).length; |
| return { n: b.aligned.rank || (better + 1), of: Math.max(r.length, b.fieldSize || 0) }; |
| } |
|
|
| function tag(cat) { |
| var c = D.categories[cat] || {}; |
| return '<span class="tag" style="background:' + c.tagBg + ";color:" + c.tagText + ";box-shadow:inset 0 0 0 1px " + c.tagRing + '">' + |
| '<span class="dot" style="background:' + c.dot + '"></span>' + esc(cat) + "</span>"; |
| } |
|
|
| function chart(b) { |
| var r = rows(b), rk = rank(b), hasComp = r.length > 1; |
| var hib = b.higherIsBetter !== false; |
| var list = r.map(function (x) { |
| var n = x.aligned ? (rk ? rk.n : 1) : (typeof x.rank === "number" ? x.rank : |
| 1 + r.filter(function (y) { return hib ? y.score > x.score : y.score < x.score; }).length); |
| var w = Math.max(0, Math.min(100, x.score)); |
| var tip = x.aligned |
| ? 'data-tip-model="Aligned AI" data-tip-score="' + esc(fmt(x.score)) + '" data-tip-src="' + esc(b.aligned.sample || "Measured " + D.meta.measured) + '"' |
| : 'data-tip-model="' + esc(x.model) + '" data-tip-score="' + esc(fmt(x.score)) + '" data-tip-src="' + esc("Source: " + (x.sourceLabel || hostOf(x.source))) + '"'; |
| return '<li class="lb-row' + (x.aligned ? " aligned" : "") + '" tabindex="0" ' + tip + '>' + |
| '<span class="lb-rank">#' + n + '</span>' + |
| '<img class="lb-logo" src="' + (x.aligned ? MARK : vendorLogo(x.vendor)) + '" alt="" />' + |
| '<span class="lb-name">' + esc(x.model) + (x.lab && !x.aligned ? '<small>' + esc(x.lab) + '</small>' : '') + '</span>' + |
| '<span class="lb-track"><span class="lb-fill" style="width:' + w + '%"></span></span>' + |
| '<span class="lb-score">' + esc(fmt(x.score)) + '</span></li>'; |
| }).join(""); |
| var pendingSlot = hasComp ? "" : '<div class="pending-slot">Competitor scores pending</div>'; |
| return '<div class="chart">' + |
| '<div class="chart-top"><span>' + esc(b.unit) + (hib ? " 路 higher is better" : " 路 lower is better") + "</span>" + |
| (rk ? '<span class="rank">#' + rk.n + " of " + rk.of + "</span>" : "") + "</div>" + |
| (hasComp ? '<ol class="lb">' + list + '</ol>' : pendingSlot) + |
| (rk && rk.of > r.length ? '<p class="lb-foot">Showing ' + r.length + ' of ' + rk.of + ' ranked models.</p>' : '') + |
| "</div>"; |
| } |
|
|
| function card(b) { |
| var a = b.aligned, rk = rank(b), L = b.links || {}; |
| var prov = ["Measured " + esc(D.meta.measured)]; |
| if (a.sample) prov.push(esc(a.sample)); |
| if (a.runId) prov.push("run " + esc(a.runId)); |
| var links = []; |
| if (L.dataset) links.push('<a href="' + esc(L.dataset) + '" target="_blank" rel="noopener">' + esc(L.datasetLabel || "Dataset") + "</a>"); |
| if (L.paper) links.push('<a href="' + esc(L.paper) + '" target="_blank" rel="noopener">' + esc(L.paperLabel || "Paper") + "</a>"); |
| (L.extra || []).forEach(function (e) { links.push('<a href="' + esc(e.url) + '" target="_blank" rel="noopener">' + esc(e.label) + "</a>"); }); |
| return '<article class="card" id="board-' + esc(b.id) + '">' + |
| '<div class="card-head"><h3>' + esc(b.name) + "</h3>" + tag(b.category) + "</div>" + |
| '<p class="desc">' + esc(b.description) + "</p>" + |
| chart(b) + |
| '<div class="callout"><img src="' + MARK + '" alt="" /><b>Aligned AI</b><span class="score">' + esc(fmt(a.score)) + "</span>" + |
| (rk ? "<span>路 #" + rk.n + " of " + rk.of + "</span>" : "") + |
| ((b.competitors || []).length ? "" : '<span class="pending">Competitor scores pending</span>') + "</div>" + |
| '<div class="card-foot"><div class="src">' + links.join(" 路 ") + "</div></div>" + |
| "</article>"; |
| } |
|
|
| function hero() { |
| var m = D.meta; |
| var stats = m.headlineStats ? m.headlineStats.slice(0, 5).map(function (s) { |
| return '<a class="stat" href="#' + esc(s.jump || "") + '">' + '<div class="stat-label">' + esc(s.label) + "</div>" + |
| '<div class="stat-value">' + esc(s.value) + "</div>" + (s.detail ? '<div class="stat-detail">' + esc(s.detail) + "</div>" : "") + "</a>"; |
| }).join("") : (m.headlineBoards || []).map(function (id) { return byId[id]; }).filter(Boolean).slice(0, 4).map(function (b) { |
| var rk = rank(b); |
| return '<a class="stat" href="#board-' + esc(b.id) + '" data-jump="' + esc(b.id) + '">' + |
| '<div class="stat-label">' + esc(b.name) + "</div>" + |
| '<div class="stat-value">' + (rk ? "#" + rk.n + " 路 " : "") + esc(fmt(b.aligned.score)) + "</div>" + |
| '<div class="stat-detail">' + (b.aligned.sample ? esc(b.aligned.sample) : "Measured " + esc(m.measured)) + "</div></a>"; |
| }).join(""); |
| var withComp = boards.filter(function (b) { return (b.competitors || []).length; }).length; |
| var meta = ["Measured " + m.measured, boards.length + " boards", "Official graders", "Scores from Aligned AI's production pipeline", |
| withComp ? withComp + " boards with competitor rankings" : "Competitor scores pending"]; |
| return '<section class="hero">' + |
| '<div class="hero-top"><span class="wordmark"><img src="' + WORDMARK + '" alt="Aligned AI" /></span>' + |
| "<h1>" + esc(m.title) + '</h1><span class="badge">' + esc(m.badge) + "</span>" + |
| (m.preview ? '<span class="pill-preview">Preview</span>' : "") + "</div>" + |
| '<div class="stats">' + stats + "</div>" + |
| "</section>"; |
| } |
|
|
| function strengths() { |
| var items = (D.meta.strengths || []).filter(function (s) { return byId[s.id]; }).slice(0, 3); |
| if (!items.length) return { html: "", ids: [] }; |
| var html = '<section><div class="section-head"><h2>Where Aligned AI is strong</h2>' + |
| "<p>Where Aligned AI ranks at or near the top of recent models.</p></div>" + |
| '<div class="strengths">' + items.map(function (s) { |
| var b = byId[s.id], rk = rank(b); |
| return '<div class="strength"><p class="strength-why" style="margin:0"><b>' + |
| (rk ? "#" + rk.n + " of " + rk.of + " 路 " : "") + esc(fmt(b.aligned.score)) + " 路 " + esc(b.name) + "</b>" + esc(s.why) + "</p>" + |
| card(b) + "</div>"; |
| }).join("") + "</div></section>"; |
| return { html: html, ids: items.map(function (s) { return s.id; }) }; |
| } |
|
|
| var state = { cat: "all" }; |
| function suite(strengthIds) { |
| var cats = []; |
| boards.forEach(function (b) { if (cats.indexOf(b.category) < 0) cats.push(b.category); }); |
| var order = Object.keys(D.categories); |
| cats.sort(function (a, b) { return order.indexOf(a) - order.indexOf(b); }); |
| var chips = '<button class="chip" data-cat="all" aria-pressed="' + (state.cat === "all") + '">All 路 ' + boards.length + "</button>" + |
| cats.map(function (c) { |
| var n = boards.filter(function (b) { return b.category === c; }).length; |
| return '<button class="chip" data-cat="' + esc(c) + '" aria-pressed="' + (state.cat === c) + '"><span class="dot" style="background:' + D.categories[c].dot + '"></span>' + esc(c) + " 路 " + n + "</button>"; |
| }).join(""); |
| |
| var list = state.cat === "all" ? boards.filter(function (b) { return strengthIds.indexOf(b.id) < 0; }) : boards.filter(function (b) { return b.category === state.cat; }); |
| return '<section id="suite"><div class="section-head"><h2>Full suite</h2>' + |
| "<p>Every scored board. The three featured above appear under their category filters. Each card states its sample size and shows its run ID, with links to the dataset and paper.</p></div>" + |
| '<div class="chips" role="group" aria-label="Filter by category">' + chips + "</div>" + |
| '<div class="grid">' + list.map(card).join("") + "</div></section>"; |
| } |
|
|
| function costSection() { |
| var C = D.cost; if (!C) return ""; |
| var all = [C.aligned]; C.groups.forEach(function (g) { g.rows.forEach(function (r) { all.push(r[2]); }); }); |
| var max = Math.max.apply(null, all); |
| function money(v) { return "$" + v.toFixed(5); } |
| function row(name, vendor, v, isA) { |
| return '<tr class="' + (isA ? "c-aligned" : "") + '"><td class="c-model"><img src="' + (isA ? MARK : vendorLogo(vendor)) + '" alt="" />' + esc(name) + '</td>' + |
| '<td class="c-bar"><span class="c-track"><span class="c-fill" style="width:' + Math.max(0.6, v / max * 100) + '%"></span></span></td>' + |
| '<td class="c-num">' + money(v) + '</td><td class="c-num">$' + (v * 1000).toFixed(2) + '</td>' + |
| '<td class="c-x">' + (isA ? "\u2014" : (v / C.aligned < 10 ? (v / C.aligned).toFixed(1) : Math.round(v / C.aligned)) + "\u00d7") + '</td></tr>'; |
| } |
| var body = C.groups.map(function (g, i) { |
| return '<tr class="c-group"><td colspan="5">' + esc(g.name) + '</td></tr>' + (i === 0 ? row("Aligned AI", "aligned", C.aligned, true) : "") + |
| g.rows.map(function (r) { return row(r[0], r[1], r[2], false); }).join(""); |
| }).join(""); |
| return '<section class="cost card" id="cost"><h2>' + esc(C.title) + '<sup>[1]</sup></h2><p class="c-sum">' + esc(C.summary) + '</p>' + |
| '<div class="c-explain">' + esc(C.explainer) + '</div>' + |
| '<table class="c-table"><thead><tr><th>Model</th><th></th><th class="c-num">Per answer</th><th class="c-num">Per 1,000<br>answers</th><th class="c-x">vs.<br>Aligned AI</th></tr></thead><tbody>' + body + '</tbody></table>' + |
| '<p class="c-foot">' + esc(C.footnote) + '</p></section>'; |
| } |
|
|
| function method() { |
| return '<section class="method" id="methodology"><div class="section-head"><h2>Methodology</h2></div><ol>' + |
| (D.meta.methodology || []).map(function (p) { return "<li><span>" + esc(p) + "</span></li>"; }).join("") + "</ol></section>"; |
| } |
|
|
| function footer() { |
| return '<footer class="site-foot"><span class="brand"><img src="' + MARK + '" alt="" />Aligned AI</span>' + |
| "<span>" + esc(D.meta.summary) + " Measured " + esc(D.meta.measured) + ".</span>" + |
| '<span class="right"><a href="https://joinaligned.ai" target="_blank" rel="noopener">joinaligned.ai</a> 路 <a href="#methodology">Methodology</a></span></footer>'; |
| } |
|
|
| function render() { |
| var st = strengths(); |
| app.innerHTML = hero() + st.html + suite(st.ids) + costSection() + method() + footer(); |
| } |
| render(); |
|
|
| |
| app.addEventListener("click", function (e) { |
| var chip = e.target.closest(".chip"); |
| if (chip) { |
| state.cat = chip.getAttribute("data-cat"); |
| var st = strengths(); |
| var old = document.getElementById("suite"); |
| var tmp = document.createElement("div"); |
| tmp.innerHTML = suite(st.ids); |
| old.replaceWith(tmp.firstChild); |
| return; |
| } |
| var jump = e.target.closest("[data-jump]"); |
| if (jump) { |
| var el = document.getElementById("board-" + jump.getAttribute("data-jump")); |
| if (el) { |
| e.preventDefault(); |
| el.scrollIntoView({ behavior: "smooth", block: "start" }); |
| el.classList.add("flash"); |
| setTimeout(function () { el.classList.remove("flash"); }, 1800); |
| } |
| } |
| }); |
|
|
| |
| function showTip(col) { |
| tip.innerHTML = "<b>" + esc(col.getAttribute("data-tip-model")) + ' <span class="tv">' + esc(col.getAttribute("data-tip-score")) + "</span></b>" + |
| '<span class="ts">' + esc(col.getAttribute("data-tip-src")) + "</span>"; |
| var bar = col.querySelector(".bar").getBoundingClientRect(); |
| tip.hidden = false; |
| tip.style.left = Math.max(140, Math.min(window.innerWidth - 140, bar.left + bar.width / 2)) + "px"; |
| tip.style.top = bar.top + "px"; |
| requestAnimationFrame(function () { tip.classList.add("show"); }); |
| } |
| function hideTip() { tip.classList.remove("show"); } |
| app.addEventListener("mouseover", function (e) { var c = e.target.closest(".lb-row"); if (c) showTip(c); }); |
| app.addEventListener("mouseout", function (e) { var c = e.target.closest(".lb-row"); if (c && !c.contains(e.relatedTarget)) hideTip(); }); |
| app.addEventListener("focusin", function (e) { var c = e.target.closest(".lb-row"); if (c) showTip(c); }); |
| app.addEventListener("focusout", hideTip); |
| window.addEventListener("scroll", hideTip, { passive: true }); |
| })(); |
|
|
