Donato Capitella
129 lines
4.1 KiB
JavaScript
129 lines
4.1 KiB
JavaScript
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;
|
||
}
|