feat: add MTP benchmark page with dedicated data summary and visualization components
This commit is contained in:
Donato Capitella
@@ -0,0 +1,111 @@
|
||||
.description {
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
max-width: 800px;
|
||||
line-height: 1.5;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.description a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mtp-layout-inner {
|
||||
max-width: 1050px;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mtp-table {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mtp-table.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mtp-table th {
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mtp-table td {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.mtp-table th.metric-col {
|
||||
text-align: right;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.mtp-table td.metric-col {
|
||||
text-align: right;
|
||||
font-feature-settings: "tnum";
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mtp-table td.metric-col .measure {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mtp-table th.model, .mtp-table td.model {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.mtp-table th .sub {
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.speedup-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.speedup-high {
|
||||
background: #d7f5e3;
|
||||
color: #025333;
|
||||
}
|
||||
|
||||
.speedup-med {
|
||||
background: #eef9ff;
|
||||
color: #0a517a;
|
||||
}
|
||||
|
||||
.speedup-low {
|
||||
background: #fdf2f8;
|
||||
color: #9d174d;
|
||||
}
|
||||
|
||||
.toolbox-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
background: #f1f5ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.toolbox-pill.radv {
|
||||
background: #fdf2f8;
|
||||
color: #9d174d;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const statsLine = document.getElementById("stats-line");
|
||||
const table = document.getElementById("mtp-table");
|
||||
const tbody = document.getElementById("mtp-tbody");
|
||||
|
||||
try {
|
||||
const res = await fetch("mtp-summary.json");
|
||||
if (!res.ok) throw new Error("Network response was not ok");
|
||||
const data = await res.json();
|
||||
|
||||
renderTable(data, tbody);
|
||||
table.classList.remove("hidden");
|
||||
statsLine.textContent = `Showing ${data.length} benchmark runs`;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to load mtp-summary.json", err);
|
||||
statsLine.textContent = "Failed to load mtp-summary.json. Ensure the file is present in the docs folder.";
|
||||
}
|
||||
});
|
||||
|
||||
function renderTable(runs, tbody) {
|
||||
// Group by model and toolbox
|
||||
const grouped = new Map();
|
||||
|
||||
runs.forEach(run => {
|
||||
const key = `${run.model}|${run.toolbox}`;
|
||||
if (!grouped.has(key)) {
|
||||
grouped.set(key, {
|
||||
model: run.model,
|
||||
toolbox: run.toolbox,
|
||||
baseline: null,
|
||||
mtp2: null,
|
||||
mtp3: null
|
||||
});
|
||||
}
|
||||
|
||||
const entry = grouped.get(key);
|
||||
if (run.mode === "baseline") entry.baseline = run;
|
||||
if (run.mode === "mtp-2") entry.mtp2 = run;
|
||||
if (run.mode === "mtp-3") entry.mtp3 = run;
|
||||
});
|
||||
|
||||
const rows = Array.from(grouped.values()).sort((a, b) => {
|
||||
if (a.model !== b.model) return a.model.localeCompare(b.model);
|
||||
return a.toolbox.localeCompare(b.toolbox);
|
||||
});
|
||||
|
||||
tbody.innerHTML = "";
|
||||
|
||||
rows.forEach(row => {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
// Model
|
||||
const tdModel = document.createElement("td");
|
||||
tdModel.className = "model";
|
||||
const modelHead = document.createElement("div");
|
||||
modelHead.className = "model-head";
|
||||
const nameSpan = document.createElement("span");
|
||||
nameSpan.className = "model-name";
|
||||
nameSpan.textContent = row.model;
|
||||
modelHead.appendChild(nameSpan);
|
||||
tdModel.appendChild(modelHead);
|
||||
tr.appendChild(tdModel);
|
||||
|
||||
// Toolbox
|
||||
const tdToolbox = document.createElement("td");
|
||||
const tbPill = document.createElement("span");
|
||||
tbPill.className = "toolbox-pill";
|
||||
if (row.toolbox.includes("vulkan") || row.toolbox.includes("radv")) {
|
||||
tbPill.classList.add("radv");
|
||||
}
|
||||
tbPill.textContent = row.toolbox;
|
||||
tdToolbox.appendChild(tbPill);
|
||||
tr.appendChild(tdToolbox);
|
||||
|
||||
// Baseline
|
||||
const baseSpeed = row.baseline ? row.baseline.avg_tok_s : null;
|
||||
tr.appendChild(makeMetricCell(baseSpeed));
|
||||
|
||||
// MTP-2
|
||||
const mtp2Speed = row.mtp2 ? row.mtp2.avg_tok_s : null;
|
||||
tr.appendChild(makeMetricCell(mtp2Speed));
|
||||
tr.appendChild(makeSpeedupCell(baseSpeed, mtp2Speed));
|
||||
|
||||
// MTP-3
|
||||
const mtp3Speed = row.mtp3 ? row.mtp3.avg_tok_s : null;
|
||||
tr.appendChild(makeMetricCell(mtp3Speed));
|
||||
tr.appendChild(makeSpeedupCell(baseSpeed, mtp3Speed));
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
function makeMetricCell(val) {
|
||||
const td = document.createElement("td");
|
||||
td.className = "metric-col";
|
||||
if (val !== null && val !== undefined) {
|
||||
td.innerHTML = `<span class="measure">${val.toFixed(1)}</span>`;
|
||||
} else {
|
||||
td.innerHTML = `<span class="cell-empty">—</span>`;
|
||||
}
|
||||
return td;
|
||||
}
|
||||
|
||||
function makeSpeedupCell(base, mtp) {
|
||||
const td = document.createElement("td");
|
||||
td.className = "metric-col";
|
||||
|
||||
if (base && mtp && base > 0) {
|
||||
const ratio = mtp / base;
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "speedup-badge";
|
||||
badge.textContent = `${ratio.toFixed(2)}×`;
|
||||
|
||||
if (ratio >= 1.8) {
|
||||
badge.classList.add("speedup-high");
|
||||
} else if (ratio >= 1.3) {
|
||||
badge.classList.add("speedup-med");
|
||||
} else {
|
||||
badge.classList.add("speedup-low");
|
||||
}
|
||||
|
||||
td.appendChild(badge);
|
||||
} else {
|
||||
td.innerHTML = `<span class="cell-empty">—</span>`;
|
||||
}
|
||||
return td;
|
||||
}
|
||||
Reference in New Issue
Block a user