Extract embed SVG generator into embed.js and add version tracking

Move the embed-in-model-card feature (SVG generation, modal, upload
workflow) from app.js into a standalone embed.js module. Remove HF
token auto-upload logic, keeping only the manual Download & Open HF
workflow. Add data-commit metadata to generated SVGs for staleness
detection. Use variant-aware filenames so Llama-3.2-1B and 3B get
distinct SVGs. Right-align metric buttons in chart header.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.js

@@ -508,6 +508,9 @@ function buildChart(filtered) {
 
     chartHeader.appendChild(headerLeft);
 
+    const headerRight = document.createElement("div");
+    headerRight.className = "chart-header-right";
+
     // Only show metric buttons for metrics that have non-zero data
     const chartVisibleMetrics = config.metrics.filter(m =>
         gRows.some(r => r[m.column] !== null && r[m.column] !== 0)
@@ -518,9 +521,18 @@ function buildChart(filtered) {
             chartVisibleMetrics.map(m => ({ value: m.column, label: m.short || m.column })),
             filters.metric
         );
-        chartHeader.appendChild(metricGroup);
+        headerRight.appendChild(metricGroup);
     }
 
+    // Embed button
+    const embedBtn = document.createElement("button");
+    embedBtn.className = "embed-btn";
+    embedBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> Embed';
+    embedBtn.addEventListener("click", () => embed.showEmbedModal());
+    headerRight.appendChild(embedBtn);
+
+    chartHeader.appendChild(headerRight);
+
     section.appendChild(chartHeader);
 
     scenarioList.forEach(scenario => {
@@ -901,6 +913,15 @@ async function buildAccuracyTable() {
     section.appendChild(card);
 }
 
+// ─── Embed SVG module ────────────────────────────────────────────────────────
+
+const embed = initEmbed({
+    config, filters, activeFamilyKey, getActiveModelSet,
+    getData: () => DATA, MODEL_COL, FAMILY_COL, GROUP_BY, CHART_CFG,
+    MODEL_COLORS, MODEL_SHORT, isOOMRow, isExternalModel,
+    sortModels, parseModelSize,
+});
+
 // ─── Render ───────────────────────────────────────────────────────────────────
 
 function render() {

embed.js

@@ -0,0 +1,323 @@
+// ─── Embed SVG Generator ─────────────────────────────────────────────────────
+//
+// Extracted module. Call initEmbed(deps) from the main app once globals are
+// ready.  Returns { showEmbedModal }.
+
+// eslint-disable-next-line no-unused-vars
+function initEmbed(deps) {
+
+const {
+    config, filters, activeFamilyKey, getActiveModelSet,
+    getData, MODEL_COL, FAMILY_COL, GROUP_BY, CHART_CFG,
+    MODEL_COLORS, MODEL_SHORT, isOOMRow, isExternalModel,
+    sortModels, parseModelSize,
+} = deps;
+
+let embedModal = null;
+let cachedCommitHash = null;
+
+const HF_DOCS_REPO = "embedl/documentation-images";
+const HF_SVG_FOLDER = "Edge-Inference-Benchmarks";
+const HF_SPACES_REPO = "embedl/Edge-Inference-Benchmarks";
+const HF_SPACES_URL = "https://huggingface.co/spaces/" + HF_SPACES_REPO;
+
+async function loadCommitHash() {
+    if (cachedCommitHash) return cachedCommitHash;
+    try {
+        const resp = await fetch("https://huggingface.co/api/spaces/" + HF_SPACES_REPO);
+        if (resp.ok) {
+            const data = await resp.json();
+            cachedCommitHash = data.sha ? data.sha.substring(0, 7) : null;
+        }
+    } catch {}
+    return cachedCommitHash;
+}
+
+function embedFamilyKey() {
+    return filters.variant || activeFamilyKey();
+}
+
+function embedFileName() {
+    return embedFamilyKey() + "__" + filters[GROUP_BY] + ".svg";
+}
+
+function getEmbedChartData() {
+    const familyCfg = config.model_families?.[activeFamilyKey()] || {};
+    const chartCfg = familyCfg.chart || CHART_CFG;
+    const scenarios = chartCfg.scenarios || [];
+    const metricCol = filters.metric;
+    const metricCfg = config.metrics.find(m => m.column === metricCol) || {};
+    const groupFilterCfg = config.filters.find(f => f.column === GROUP_BY);
+    const groupVal = filters[GROUP_BY];
+
+    if (groupVal === "all") return null;
+
+    const groupLabel = groupFilterCfg?.value_labels?.[groupVal] || String(groupVal);
+    const familyModels = getActiveModelSet();
+    const filtered = getData().filter(r => {
+        if (!familyModels.has(r[MODEL_COL])) return false;
+        for (const f of config.filters) {
+            const fv = filters[f.column];
+            if (fv === "all" || fv === "" || fv === undefined) continue;
+            if (String(r[f.column]) !== String(fv)) return false;
+        }
+        return true;
+    });
+
+    const gRows = filtered.filter(r => String(r[GROUP_BY]) === String(groupVal));
+    if (!gRows.length) return null;
+
+    const uniqueModels = new Set(gRows.map(r => r[MODEL_COL]));
+    if (uniqueModels.size <= 1) return null;
+
+    const scenarioList = scenarios.length ? scenarios : [{ label: "", match: {} }];
+
+    // Find first scenario that produces data (mirrors buildChart logic)
+    let scenario = null;
+    let picked = [];
+    for (const sc of scenarioList) {
+        const matchRows = gRows.filter(r =>
+            Object.entries(sc.match || {}).every(([col, val]) =>
+                String(r[col]) === String(val)
+            )
+        );
+        const matchedModels = new Set(matchRows.map(r => r[MODEL_COL]));
+        const oomRows = gRows.filter(r => !matchedModels.has(r[MODEL_COL]) && isOOMRow(r)
+            && Object.entries(sc.match || {}).every(([col, val]) =>
+                r[col] === null || r[col] === "" || r[col] === "OOM" || String(r[col]) === String(val)
+            )
+        );
+        const allRows = matchRows.concat(oomRows);
+        const models = sortModels([...new Set(allRows.map(r => r[MODEL_COL]))]);
+        const candidates = models.map(m => allRows.find(r => r[MODEL_COL] === m)).filter(Boolean);
+        if (candidates.length) {
+            scenario = sc;
+            picked = candidates;
+            break;
+        }
+    }
+    if (!picked.length) return null;
+
+    const hib = metricCfg.higher_is_better !== false;
+    picked.sort((a, b) => {
+        const sizeA = parseModelSize(a[FAMILY_COL] || a[MODEL_COL]);
+        const sizeB = parseModelSize(b[FAMILY_COL] || b[MODEL_COL]);
+        if (sizeA !== sizeB) return sizeA - sizeB;
+        const extA = isExternalModel(a[MODEL_COL]) ? 0 : 1;
+        const extB = isExternalModel(b[MODEL_COL]) ? 0 : 1;
+        if (extA !== extB) return extA - extB;
+        const va = a[metricCol] ?? 0;
+        const vb = b[metricCol] ?? 0;
+        return hib ? va - vb : vb - va;
+    });
+
+    const rawLabels = picked.map(r => MODEL_SHORT[r[MODEL_COL]]);
+    const families = new Set(picked.map(r => r[FAMILY_COL]));
+    const needPrefix = families.size > 1;
+    const labels = rawLabels.map((lbl, i) => {
+        if (needPrefix) {
+            const fk = picked[i][FAMILY_COL] || "";
+            return lbl ? `${fk} ${lbl}` : fk;
+        }
+        return lbl;
+    });
+
+    return {
+        familyKey: embedFamilyKey(),
+        groupLabel,
+        scenarioLabel: scenario.label || "",
+        metricCol,
+        metricLabel: metricCfg.short || metricCol,
+        higherIsBetter: hib,
+        picked,
+        labels,
+    };
+}
+
+function generateEmbedSVG(version) {
+    const data = getEmbedChartData();
+    if (!data) return null;
+
+    const { familyKey, groupLabel, scenarioLabel, metricCol, metricLabel, higherIsBetter, picked, labels } = data;
+
+    const width = 800;
+    const barHeight = 32;
+    const barGap = 10;
+    const topPad = 76;
+    const bottomPad = 44;
+    const leftPad = 260;
+    const rightPad = 90;
+    const barAreaWidth = width - leftPad - rightPad;
+    const contentHeight = picked.length * (barHeight + barGap) - barGap;
+    const height = topPad + contentHeight + bottomPad;
+
+    const maxVal = Math.max(...picked.map(r => r[metricCol] ?? 0), 1);
+
+    function esc(s) {
+        return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    }
+
+    let bars = "";
+    picked.forEach((r, i) => {
+        const val = r[metricCol] ?? 0;
+        const barW = maxVal > 0 ? Math.max((val / maxVal) * barAreaWidth, 0) : 0;
+        const y = topPad + i * (barHeight + barGap);
+        const cy = y + barHeight / 2 + 5;
+        const color = MODEL_COLORS[r[MODEL_COL]]?.border || "#58b1c3";
+        const label = labels[i];
+        const oom = val === 0 && isOOMRow(r);
+        const valText = oom ? "OOM" : val.toFixed(1);
+        const valColor = oom ? "#ff4d6d" : "#e8e8e8";
+
+        bars += `  <text x="${leftPad - 14}" y="${cy}" text-anchor="end" fill="${color}" font-size="13" font-weight="500" font-family="system-ui,-apple-system,sans-serif">${esc(label)}</text>\n`;
+        if (!oom && barW > 0) {
+            bars += `  <rect x="${leftPad}" y="${y}" width="${barW.toFixed(1)}" height="${barHeight}" rx="4" fill="${color}" opacity="0.7"/>\n`;
+        }
+        bars += `  <text x="${leftPad + (oom ? 0 : barW) + 10}" y="${cy}" fill="${valColor}" font-size="13" font-weight="${oom ? "600" : "400"}" font-family="system-ui,-apple-system,sans-serif">${valText}</text>\n`;
+    });
+
+    const hint = higherIsBetter ? "(higher is better)" : "(lower is better)";
+    const subtitle = [familyKey, groupLabel, scenarioLabel, metricLabel + " " + hint].filter(Boolean).join(" \u00b7 ");
+    const commitAttr = version ? ` data-commit="${esc(version)}"` : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"${commitAttr}>
+  <defs>
+    <linearGradient id="topGlow" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#58b1c3" stop-opacity="0"/>
+      <stop offset="50%" stop-color="#58b1c3" stop-opacity="0.5"/>
+      <stop offset="100%" stop-color="#58b1c3" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <rect width="${width}" height="${height}" rx="12" fill="#0B1527"/>
+  <rect x="0" y="0" width="${width}" height="${height}" rx="12" fill="none" stroke="#58b1c3" stroke-opacity="0.15"/>
+  <rect x="80" y="1" width="${width - 160}" height="2" rx="1" fill="url(#topGlow)"/>
+  <text x="28" y="32" fill="#e8e8e8" font-size="17" font-weight="700" font-family="system-ui,-apple-system,sans-serif">Edge Inference Benchmarks</text>
+  <text x="28" y="54" fill="#8899aa" font-size="12" font-family="system-ui,-apple-system,sans-serif">${esc(subtitle)}</text>
+${bars}  <line x1="28" y1="${height - 36}" x2="${width - 28}" y2="${height - 36}" stroke="#58b1c3" stroke-opacity="0.15"/>
+  <text x="28" y="${height - 14}" fill="#5a6a7a" font-size="11" font-family="system-ui,-apple-system,sans-serif">embedl.com</text>
+  <text x="${width - 28}" y="${height - 14}" text-anchor="end" fill="#58b1c3" font-size="11" font-family="system-ui,-apple-system,sans-serif">View Benchmarks \u2192</text>
+</svg>`;
+}
+
+function createEmbedModal() {
+    const overlay = document.createElement("div");
+    overlay.className = "embed-overlay";
+    overlay.innerHTML = `
+        <div class="embed-modal">
+            <div class="embed-modal-header">
+                <h3>Embed in Model Card</h3>
+                <button class="embed-close" aria-label="Close">&times;</button>
+            </div>
+            <div class="embed-preview" id="embed-preview"></div>
+            <div class="embed-status-bar">
+                <span class="embed-status" id="embed-status"></span>
+            </div>
+            <div class="embed-actions">
+                <button class="btn embed-action-btn" id="embed-copy">Copy Embed Code</button>
+                <button class="btn embed-action-btn embed-secondary" id="embed-upload-manual">Download SVG & Open HF</button>
+            </div>
+            <div class="embed-code-section">
+                <label>Paste this into your HuggingFace model card README.md:</label>
+                <textarea class="embed-code" id="embed-code" readonly rows="6"></textarea>
+            </div>
+        </div>
+    `;
+
+    overlay.querySelector(".embed-close").addEventListener("click", () => overlay.classList.remove("visible"));
+    overlay.addEventListener("click", e => { if (e.target === overlay) overlay.classList.remove("visible"); });
+
+    overlay.querySelector("#embed-upload-manual").addEventListener("click", () => {
+        const svg = generateEmbedSVG(cachedCommitHash);
+        if (!svg) return;
+        const fileName = embedFileName();
+        const blob = new Blob([svg], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        URL.revokeObjectURL(url);
+        const commitMsg = "Update " + fileName + " (" + (cachedCommitHash || "latest") + ")";
+        window.open("https://huggingface.co/datasets/" + HF_DOCS_REPO + "/upload/main/" + HF_SVG_FOLDER + "?commit_message=" + encodeURIComponent(commitMsg), "_blank");
+    });
+
+    overlay.querySelector("#embed-copy").addEventListener("click", () => {
+        const textarea = overlay.querySelector("#embed-code");
+        navigator.clipboard.writeText(textarea.value);
+        const btn = overlay.querySelector("#embed-copy");
+        const orig = btn.textContent;
+        btn.textContent = "Copied!";
+        setTimeout(() => { btn.textContent = orig; }, 2000);
+    });
+
+    document.body.appendChild(overlay);
+    return overlay;
+}
+
+function setEmbedStatus(cls, html) {
+    const el = embedModal.querySelector("#embed-status");
+    el.className = "embed-status " + cls;
+    el.innerHTML = html;
+}
+
+function showUploadUI(show) {
+    embedModal.querySelector("#embed-upload-manual").style.display = show ? "" : "none";
+}
+
+async function runEmbedUpload() {
+    const version = cachedCommitHash;
+    const fileName = embedFileName();
+    const svgPath = HF_SVG_FOLDER + "/" + fileName;
+    const svgUrl = "https://huggingface.co/datasets/" + HF_DOCS_REPO + "/resolve/main/" + svgPath;
+
+    setEmbedStatus("checking", "Checking\u2026");
+    showUploadUI(false);
+
+    let remoteCommit = null;
+    let exists = false;
+    try {
+        const resp = await fetch(svgUrl, { cache: "no-store" });
+        if (resp.ok) {
+            exists = true;
+            const text = await resp.text();
+            const m = text.match(/data-commit="([^"]+)"/);
+            if (m) remoteCommit = m[1];
+        }
+    } catch {}
+
+    if (exists && version && remoteCommit === version) {
+        setEmbedStatus("up-to-date", "");
+        return;
+    }
+
+    if (exists) {
+        setEmbedStatus("needs-token", "SVG outdated \u2014 use Download SVG &amp; Open HF below to update");
+    } else {
+        setEmbedStatus("needs-token", "SVG not yet uploaded \u2014 use Download SVG &amp; Open HF below to upload manually");
+    }
+    showUploadUI(true);
+}
+
+async function showEmbedModal() {
+    if (!embedModal) embedModal = createEmbedModal();
+
+    const version = await loadCommitHash();
+    const svg = generateEmbedSVG(version);
+    if (!svg) return;
+
+    embedModal.querySelector("#embed-preview").innerHTML = svg;
+
+    const famKey = embedFamilyKey();
+    const fileName = embedFileName();
+    const svgUrl = "https://huggingface.co/datasets/" + HF_DOCS_REPO + "/resolve/main/" + HF_SVG_FOLDER + "/" + fileName;
+
+    const embedCode = '<a href="' + HF_SPACES_URL + '" target="_blank" rel="noopener">\n  <img\n    src="' + svgUrl + '"\n    alt="Edge Inference Benchmarks for ' + famKey + '"\n    width="100%"\n  />\n</a>';
+
+    embedModal.querySelector("#embed-code").value = embedCode;
+    embedModal.classList.add("visible");
+
+    runEmbedUpload();
+}
+
+return { showEmbedModal };
+
+} // end initEmbed

index.html

@@ -94,6 +94,7 @@
 </footer>
 
 <script src="demo/demo.js"></script>
+<script src="embed.js"></script>
 <script src="app.js"></script>
 </body>
 </html>

style.css

@@ -202,6 +202,13 @@
     gap: var(--space-md);
 }
 
+.chart-header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-left: auto;
+}
+
 .chart-header .filter-group {
     margin: 0;
 }
@@ -505,6 +512,267 @@ tbody tr.row-group-break td {
     color: var(--teal);
 }
 
+/* ── Embed ──────────────────────────────────────────── */
+.embed-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.15s;
+    margin-left: auto;
+    white-space: nowrap;
+}
+
+.embed-btn:hover {
+    color: var(--teal);
+    border-color: var(--btn-active-border);
+    background: var(--btn-active-bg);
+}
+
+.embed-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    backdrop-filter: blur(4px);
+}
+
+.embed-overlay.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.embed-modal {
+    background: #0e1a2e;
+    border: 1px solid rgba(88, 177, 195, 0.2);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 720px;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: var(--space-xl);
+    scrollbar-color: var(--text-dim) var(--border);
+    scrollbar-width: thin;
+}
+
+.embed-modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+.embed-modal::-webkit-scrollbar-track {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+.embed-modal::-webkit-scrollbar-thumb {
+    background: var(--text-dim);
+    border-radius: 4px;
+}
+
+.embed-modal::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+.embed-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-lg);
+}
+
+.embed-modal-header h3 {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--text);
+}
+
+.embed-close {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: var(--space-sm);
+    line-height: 1;
+    transition: color 0.15s;
+}
+
+.embed-close:hover {
+    color: var(--text);
+}
+
+.embed-preview {
+    background: #0B1527;
+    border-radius: 8px;
+    padding: var(--space-sm);
+    margin-bottom: var(--space-lg);
+    overflow: hidden;
+}
+
+.embed-preview svg {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.embed-status-bar {
+    margin-bottom: var(--space-md);
+}
+
+.embed-status {
+    font-size: var(--text-sm);
+    font-weight: 500;
+}
+
+.embed-status.checking {
+    color: var(--text-dim);
+}
+
+.embed-status.checking::before {
+    content: "\25CB  ";
+}
+
+.embed-status.up-to-date {
+    display: none;
+}
+
+.embed-status.uploading {
+    color: var(--teal);
+}
+
+.embed-status.uploading::before {
+    content: "\21BB  ";
+}
+
+.embed-status.uploaded {
+    color: var(--green);
+}
+
+.embed-status.uploaded::before {
+    content: "\2713  ";
+}
+
+.embed-status.needs-token {
+    color: #ffd166;
+}
+
+.embed-status.needs-token::before {
+    content: "\26A0  ";
+}
+
+.embed-status a {
+    color: var(--teal);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.embed-status a:hover {
+    text-decoration: underline;
+}
+
+.embed-status.error {
+    color: var(--red);
+    word-break: break-word;
+}
+
+.embed-status.error::before {
+    content: "\2717  ";
+}
+
+.embed-actions {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.embed-action-btn {
+    border-radius: 6px !important;
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--text-md);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.embed-action-btn:first-child {
+    background: var(--btn-active-bg);
+    border-color: var(--btn-active-border);
+    color: var(--teal);
+}
+
+.embed-action-btn:first-child:hover {
+    background: rgba(88, 177, 195, 0.2);
+}
+
+.embed-secondary {
+    opacity: 0.7;
+}
+
+.embed-secondary:hover {
+    opacity: 1;
+}
+
+.embed-code-section {
+    margin-bottom: var(--space-sm);
+}
+
+.embed-code-section label {
+    display: block;
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+    margin-bottom: var(--space-sm);
+}
+
+.embed-code {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--teal);
+    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
+    font-size: var(--text-sm);
+    padding: var(--space-md);
+    resize: vertical;
+    line-height: 1.5;
+    scrollbar-color: var(--text-dim) var(--border);
+    scrollbar-width: thin;
+}
+
+.embed-code::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.embed-code::-webkit-scrollbar-track {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+.embed-code::-webkit-scrollbar-thumb {
+    background: var(--text-dim);
+    border-radius: 4px;
+}
+
+.embed-code::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+.embed-code:focus {
+    outline: none;
+    border-color: var(--btn-active-border);
+}
+
 /* ── Responsive ──────────────────────────────────────── */
 @media (max-width: 900px) {
     .page {