Initial website

app.js

@@ -0,0 +1,604 @@
+// ─── Benchmark Viewer — config-driven from config.json + data.csv ─────────────
+
+(async function () {
+
+// ─── Theme-aware color helper ─────────────────────────────────────────────────
+
+function cssVar(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+// ─── Load config + data ───────────────────────────────────────────────────────
+
+const [config, csvText] = await Promise.all([
+    fetch("config.json").then(r => r.json()),
+    fetch("data.csv").then(r => r.text()),
+]);
+
+// ─── Parse CSV ────────────────────────────────────────────────────────────────
+
+function parseCSV(text) {
+    const lines = text.replace(/\r/g, "").trim().split("\n");
+    const headers = lines[0].split(",");
+    // Determine which columns are numeric (metrics + numeric filters + numeric display columns)
+    const numericCols = new Set(
+        config.metrics.map(m => m.column).concat(
+            config.filters.filter(f => f.type === "number").map(f => f.column),
+            (config.display_columns || []).filter(d => d.type === "number").map(d => d.column)
+        )
+    );
+    return lines.slice(1).map(line => {
+        const vals = line.split(",");
+        const row = {};
+        headers.forEach((h, i) => {
+            const raw = (vals[i] || "").trim();
+            if (raw === "") {
+                row[h] = numericCols.has(h) ? null : "";
+            } else if (numericCols.has(h)) {
+                row[h] = raw.toUpperCase() === "OOM" ? null : parseFloat(raw);
+            } else {
+                row[h] = raw;
+            }
+        });
+        return row;
+    });
+}
+
+const DATA = parseCSV(csvText);
+
+// ─── Config shortcuts ─────────────────────────────────────────────────────────
+
+const MODEL_COL     = config.model_column;
+const FAMILY_COL    = config.model_family_column || "";
+const LINK_PREFIX   = config.model_link_prefix || "";
+const OPT_ORG       = config.optimized_org || "embedl";
+const CHART_CFG     = config.chart || {};
+const GROUP_BY      = CHART_CFG.group_by || config.filters[config.filters.length - 1]?.column || "";
+const SCENARIOS     = CHART_CFG.scenarios || [];
+
+function isExternalModel(model) {
+    return !model.startsWith(OPT_ORG + "/");
+}
+
+// ─── Derive unique values ─────────────────────────────────────────────────────
+
+const ALL_MODELS = [...new Set(DATA.map(r => r[MODEL_COL]))];
+
+// ─── Model Family Detection ───────────────────────────────────────────────────
+
+function detectFamilies() {
+    const families = {};
+
+    if (FAMILY_COL) {
+      // Use explicit family column from data
+      DATA.forEach(row => {
+          const fk    = row[FAMILY_COL];
+          const model = row[MODEL_COL];
+          if (!fk) return;
+          if (!families[fk]) families[fk] = { base: fk, models: [] };
+          if (!families[fk].models.includes(model)) families[fk].models.push(model);
+      });
+    } else {
+        // Fallback: auto-detect from model name prefixes
+        const externalNames = ALL_MODELS.filter(isExternalModel).map(m => m.split("/").pop());
+        externalNames.sort((a, b) => b.length - a.length);
+
+        ALL_MODELS.forEach(model => {
+            const shortName = model.split("/").pop();
+            if (isExternalModel(model)) {
+                if (!families[shortName]) families[shortName] = { base: shortName, models: [] };
+                families[shortName].models.push(model);
+            } else {
+                const match = externalNames.find(base => shortName.startsWith(base));
+                const key = match || shortName;
+                if (!families[key]) families[key] = { base: key, models: [] };
+                families[key].models.push(model);
+            }
+        });
+    }
+
+    return families;
+}
+
+const MODEL_FAMILIES  = detectFamilies();
+const ALL_FAMILY_KEYS = Object.keys(MODEL_FAMILIES);
+
+// ─── Model colors & short labels ──────────────────────────────────────────────
+
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function buildColorPalette() {
+    const barAlpha = 0.75;
+    const neutralAlpha = 0.45;
+    const teal = cssVar("--teal"), green = cssVar("--green"), pink = cssVar("--pink"),
+          purple = cssVar("--purple"), red = cssVar("--red");
+    return {
+        palette: [
+            { bg: hexToRgba(teal, barAlpha),   border: teal },
+            { bg: hexToRgba(green, barAlpha),   border: green },
+            { bg: hexToRgba(pink, barAlpha),    border: pink },
+            { bg: hexToRgba(purple, barAlpha),  border: purple },
+            { bg: "rgba(255,209,102," + barAlpha + ")", border: "#ffd166" },
+        ],
+        neutral: { bg: hexToRgba(cssVar("--neutral"), neutralAlpha), border: cssVar("--neutral") },
+    };
+}
+
+let COLOR_PALETTE, NEUTRAL_COLOR;
+
+const MODEL_COLORS = {};
+const MODEL_SHORT  = {};
+
+function assignModelColors() {
+    let colorIdx = 0;
+    const { palette, neutral } = buildColorPalette();
+    COLOR_PALETTE = palette; NEUTRAL_COLOR = neutral;
+    ALL_FAMILY_KEYS.forEach(fk => {
+        const family = MODEL_FAMILIES[fk];
+        family.models.forEach(model => {
+            if (isExternalModel(model)) {
+                MODEL_COLORS[model] = NEUTRAL_COLOR;
+            } else {
+                MODEL_COLORS[model] = COLOR_PALETTE[colorIdx % COLOR_PALETTE.length];
+                colorIdx++;
+            }
+            const name   = model.split("/").pop();
+            const suffix = name.slice(family.base.length).replace(/^-/, "");
+            MODEL_SHORT[model] = suffix || (isExternalModel(model) ? "Original" : name);
+        });
+    });
+}
+assignModelColors();
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function isOOMRow(row) {
+    return config.metrics.every(m => row[m.column] === null);
+}
+
+function familyRows(familyKey) {
+    const models = new Set((MODEL_FAMILIES[familyKey] || { models: [] }).models);
+    return DATA.filter(r => models.has(r[MODEL_COL]));
+}
+
+function availableOptions(familyKey) {
+    const rows = familyRows(familyKey);
+    const opts = {};
+    config.filters.forEach(f => {
+        const vals = [...new Set(rows.map(r => r[f.column]).filter(v => v !== "" && v !== null && v !== undefined))];
+        if (f.type === "number") vals.sort((a, b) => a - b);
+        opts[f.column] = vals;
+    });
+    return opts;
+}
+
+// Resolve display label for a filter value
+function valueLabel(filterCfg, val) {
+    if (filterCfg.value_labels && filterCfg.value_labels[val]) return filterCfg.value_labels[val];
+    if (typeof val === "string") return val.charAt(0).toUpperCase() + val.slice(1);
+    return String(val);
+}
+
+// Sort models: external (original) first, then optimized
+function sortModels(models) {
+    return [...models].sort((a, b) => {
+        const aExt = isExternalModel(a) ? 0 : 1;
+        const bExt = isExternalModel(b) ? 0 : 1;
+        return aExt - bExt || a.localeCompare(b);
+    });
+}
+
+// ─── Populate page from config ────────────────────────────────────────────────
+
+// Hero
+if (config.title)    document.getElementById("hero-title").innerHTML = config.title.replace(/^(.*?)(\s\S+)$/, '$1 <span class="accent">$2</span>');
+if (config.subtitle) document.getElementById("hero-sub").textContent = config.subtitle;
+
+// Sidebar: model families
+const familyNav = document.getElementById("family-nav");
+function renderSidebar() {
+    familyNav.innerHTML = ALL_FAMILY_KEYS.map(fk =>
+        `<div class="sidebar-item${fk === filters.family ? " active" : ""}" data-family="${fk}">${fk}</div>`
+    ).join("");
+}
+
+
+
+familyNav.addEventListener("click", e => {
+    const item = e.target.closest(".sidebar-item");
+    if (!item) return;
+    filters.family = item.dataset.family;
+    renderSidebar();
+    updateDependentFilters();
+    render();
+});
+
+// Build filter groups container dynamically (no family filter here)
+const filtersBar = document.getElementById("filters-bar");
+filtersBar.innerHTML = "";
+
+config.filters.forEach(f => {
+    filtersBar.appendChild(createFilterGroup(f.label, "filter-" + f.column));
+});
+
+// Metric filter (always last)
+filtersBar.appendChild(createFilterGroup("Metric", "filter-metric"));
+
+function createFilterGroup(label, id) {
+    const div = document.createElement("div");
+    div.className = "filter-group";
+    div.innerHTML = `<label>${label}</label><div class="btn-group" id="${id}"></div>`;
+    return div;
+}
+
+// Metric legend
+const legendGrid = document.getElementById("legend-grid");
+legendGrid.innerHTML = config.metrics.map(m =>
+    `<div><strong>${m.short || m.column}</strong> ${m.description || m.label}</div>`
+).join("");
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const filters = { family: ALL_FAMILY_KEYS[0] || "" };
+config.filters.forEach(f => { filters[f.column] = ""; });
+filters.metric = CHART_CFG.default_metric || config.metrics[0]?.column || "";
+
+// ─── Render button groups ─────────────────────────────────────────────────────
+
+function renderBtnGroup(container, items, activeValue) {
+    container.innerHTML = items.map(({ value, label }) =>
+        `<button class="btn${String(value) === String(activeValue) ? " active" : ""}" data-value="${value}">${label}</button>`
+    ).join("");
+}
+
+function populateFilters() {
+    renderSidebar();
+
+    // Metric buttons
+    const metricEl = document.getElementById("filter-metric");
+    renderBtnGroup(metricEl,
+        config.metrics.map(m => ({ value: m.column, label: m.short || m.column })),
+        filters.metric
+    );
+    metricEl.closest(".filter-group").style.display = config.metrics.length <= 1 ? "none" : "";
+
+    updateDependentFilters();
+}
+
+function updateDependentFilters() {
+    const opts = availableOptions(filters.family);
+
+    config.filters.forEach(f => {
+        let vals = opts[f.column] || [];
+        // Sort by value_labels key order if defined
+        if (f.value_labels) {
+            const labelOrder = Object.keys(f.value_labels);
+            vals = [...vals].sort((a, b) => {
+                const ai = labelOrder.indexOf(String(a));
+                const bi = labelOrder.indexOf(String(b));
+                return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
+            });
+        }
+        const strVals = vals.map(String);
+        if (!strVals.includes(String(filters[f.column]))) {
+            filters[f.column] = vals[0] ?? "";
+        }
+
+        // For the group_by filter, add "All" option
+        const items = [];
+        if (f.column === GROUP_BY) {
+            items.push({ value: "all", label: "All" });
+        }
+        vals.forEach(v => items.push({ value: String(v), label: valueLabel(f, v) }));
+
+        const el = document.getElementById("filter-" + f.column);
+        if (el) {
+            renderBtnGroup(el, items, String(filters[f.column]));
+            // Hide the entire filter group if only one effective choice
+            const effectiveCount = f.column === GROUP_BY ? items.length - 1 : items.length;
+            el.closest(".filter-group").style.display = effectiveCount <= 1 ? "none" : "";
+        }
+    });
+}
+
+// ─── Event binding ────────────────────────────────────────────────────────────
+
+filtersBar.addEventListener("click", e => {
+    const btn = e.target.closest(".btn");
+    if (!btn) return;
+    const group = btn.closest(".btn-group");
+    group.querySelectorAll(".btn").forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    const key = group.id.replace("filter-", "");
+    filters[key] = btn.dataset.value;
+    render();
+});
+
+// ─── Chart ────────────────────────────────────────────────────────────────────
+
+let charts = [];
+
+function buildChart(filtered) {
+    const section = document.getElementById("charts-section");
+    section.innerHTML = "";
+    charts.forEach(c => c.destroy());
+    charts = [];
+
+    const metricCol = filters.metric;
+    const metricCfg = config.metrics.find(m => m.column === metricCol) || {};
+    const groupCol  = GROUP_BY;
+    const groupFilterCfg = config.filters.find(f => f.column === groupCol);
+
+    const groupVal = filters[groupCol];
+    if (groupVal === "all") return;
+
+    const groupLabel = groupFilterCfg?.value_labels?.[groupVal] || String(groupVal);
+    const gRows = filtered.filter(r => String(r[groupCol]) === String(groupVal));
+    if (!gRows.length) return;
+
+    // If no scenarios configured, show one chart with all rows
+    const scenarioList = SCENARIOS.length
+        ? SCENARIOS
+        : [{ label: "", match: {} }];
+
+    scenarioList.forEach(scenario => {
+        // Filter rows matching this scenario
+        const matchRows = gRows.filter(r =>
+            Object.entries(scenario.match || {}).every(([col, val]) =>
+                String(r[col]) === String(val)
+            )
+        );
+        // For models with only OOM rows (no scenario match), include one OOM row
+        // but only if it matches the active filter values (e.g. type)
+        const matchedModels = new Set(matchRows.map(r => r[MODEL_COL]));
+        const oomRows = gRows.filter(r => !matchedModels.has(r[MODEL_COL]) && isOOMRow(r)
+            && Object.entries(scenario.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 picked = models.map(m => allRows.find(r => r[MODEL_COL] === m)).filter(Boolean);
+        if (!picked.length) return;
+
+        const labels = picked.map(r => MODEL_SHORT[r[MODEL_COL]]);
+        const data = picked.map(r => r[metricCol] === null ? 0 : r[metricCol]);
+        const bgColors = picked.map(r => MODEL_COLORS[r[MODEL_COL]].bg);
+        const borderColors = picked.map(r => MODEL_COLORS[r[MODEL_COL]].border);
+
+        const metricHint = metricCfg.higher_is_better ? " (higher is better)" : " (lower is better)";
+        const yLabel = (metricCfg.label || metricCol) + metricHint;
+
+        const chartBlock = document.createElement("div");
+        chartBlock.className = "chart-block";
+
+        const heading = document.createElement("h3");
+        heading.className = "chart-heading";
+        heading.textContent = groupLabel;
+        chartBlock.appendChild(heading);
+
+        if (scenario.label) {
+            const sub = document.createElement("p");
+            sub.className = "chart-subtitle";
+            sub.textContent = scenario.label;
+            chartBlock.appendChild(sub);
+        }
+
+        const wrap = document.createElement("div");
+        wrap.className = "chart-wrap";
+        const canvas = document.createElement("canvas");
+        wrap.appendChild(canvas);
+        chartBlock.appendChild(wrap);
+        section.appendChild(chartBlock);
+
+        const c = new Chart(canvas, {
+            type: "bar",
+            data: {
+                labels,
+                datasets: [{
+                    data,
+                    backgroundColor: bgColors,
+                    borderColor: borderColors,
+                    borderWidth: 2, borderRadius: 6, minBarLength: 4,
+                }],
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: {
+                    legend: { display: false },
+                    title: { display: false },
+                    tooltip: {
+                        backgroundColor: cssVar("--tooltip-bg"), titleColor: cssVar("--tooltip-text"), bodyColor: cssVar("--tooltip-body"),
+                        borderColor: cssVar("--btn-active-border"), borderWidth: 1,
+                        callbacks: {
+                            label: ctx => {
+                                const orig = picked[ctx.dataIndex]?.[metricCol];
+                                return orig === null ? "OOM" : orig.toLocaleString();
+                            },
+                        },
+                    },
+                },
+                scales: {
+                    y: { beginAtZero: true, title: { display: true, text: yLabel, color: cssVar("--text-muted") }, grid: { color: cssVar("--chart-grid") }, ticks: { color: cssVar("--text-dim") } },
+                    x: { grid: { display: false }, ticks: { color: cssVar("--text-muted"), font: { size: 14 } } },
+                },
+            },
+        });
+        charts.push(c);
+    });
+}
+
+// ─── Tables ───────────────────────────────────────────────────────────────────
+
+function buildTables(filtered, chartsShown) {
+    const section   = document.getElementById("tables-section");
+    section.innerHTML = "";
+    const groupCol  = GROUP_BY;
+    const groupFilterCfg = config.filters.find(f => f.column === groupCol);
+    const groupVal  = filters[groupCol];
+    const opts      = availableOptions(filters.family);
+    const groupVals = groupVal === "all" ? (opts[groupCol] || []) : [groupVal];
+
+    // Determine which display columns are visible given current filter state
+    const visibleDisplay = (config.display_columns || []).filter(dc => {
+        if (!dc.visible_when) return true;
+        return Object.entries(dc.visible_when).every(([filterCol, allowedVals]) =>
+            allowedVals.includes(filters[filterCol])
+        );
+    });
+
+    // Build column list: Model + visible display cols + metrics
+    const colDefs = [
+        { key: MODEL_COL, label: "Model", isModel: true },
+        ...visibleDisplay.map(dc => ({ key: dc.column, label: dc.label, description: dc.description || "" })),
+        ...config.metrics.map(m => ({ key: m.column, label: m.short || m.column, isMetric: true, description: m.description || "" })),
+    ];
+
+    // Resolve table_sort: family-specific overrides global
+    const familyCfg = config.model_families?.[filters.family] || {};
+    const sortRules = familyCfg.table_sort || config.table_sort || [];
+    const tableGroupBy = familyCfg.table_group_by || config.table_group_by || "";
+
+    groupVals.forEach(gv => {
+        const rows = filtered.filter(r => String(r[groupCol]) === String(gv));
+        if (!rows.length) return;
+        rows.sort((a, b) => {
+            for (const rule of sortRules) {
+                const col = rule.column;
+                const mul = rule.direction === "desc" ? -1 : 1;
+                if (rule.external_first && col === MODEL_COL) {
+                    const aExt = isExternalModel(a[col]) ? 0 : 1;
+                    const bExt = isExternalModel(b[col]) ? 0 : 1;
+                    if (aExt !== bExt) return (aExt - bExt) * mul;
+                }
+                const av = a[col], bv = b[col];
+                if (av === bv || (av == null && bv == null)) continue;
+                if (av == null) return 1;
+                if (bv == null) return -1;
+                if (typeof av === "number" && typeof bv === "number") {
+                    if (av !== bv) return (av - bv) * mul;
+                } else {
+                    const aNum = parseFloat(String(av));
+                    const bNum = parseFloat(String(bv));
+                    if (!isNaN(aNum) && !isNaN(bNum)) {
+                        if (aNum !== bNum) return (aNum - bNum) * mul;
+                    }
+                    const cmp = String(av).localeCompare(String(bv));
+                    if (cmp !== 0) return cmp * mul;
+                }
+            }
+            return 0;
+        });
+
+        // Track row group index for alternating backgrounds
+        let prevGroupVal = undefined;
+
+        const card = document.createElement("div");
+        card.className = "table-card";
+
+        const heading = groupFilterCfg?.value_labels?.[gv] || String(gv);
+
+        let html = chartsShown ? '' : `<h3>${heading}</h3>`;
+        html += `<div class="table-scroll"><table><thead><tr>`;
+        html += colDefs.map(c => {
+            const tip = c.description ? ` data-tip="${c.description.replace(/"/g, '&quot;')}"` : '';
+            return `<th${tip}>${c.label}</th>`;
+        }).join("");
+        html += `</tr></thead><tbody>`;
+
+        rows.forEach(r => {
+            const oom = isOOMRow(r);
+            let rowClass = "";
+            if (tableGroupBy) {
+                const curVal = String(r[tableGroupBy] ?? "");
+                if (prevGroupVal !== undefined && curVal !== prevGroupVal) {
+                    rowClass = "row-group-break";
+                }
+                prevGroupVal = curVal;
+            }
+            html += `<tr class="${rowClass}">`;
+            colDefs.forEach(c => {
+                const val = r[c.key];
+                if (c.isModel) {
+                    const hfUrl = LINK_PREFIX + val;
+                    const modelColor = MODEL_COLORS[val]?.border || '#888';
+                    html += `<td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${hfUrl}" target="_blank" rel="noopener" style="color:${modelColor}">${val}</a></td>`;
+                } else if (oom) {
+                    html += `<td><span class="oom">OOM</span></td>`;
+                } else if (c.isMetric) {
+                    html += `<td>${val === null ? '<span class="oom">OOM</span>' : (val ?? "—")}</td>`;
+                } else {
+                    html += `<td>${val || "—"}</td>`;
+                }
+            });
+            html += "</tr>";
+        });
+
+        html += "</tbody></table></div>";
+        card.innerHTML = html;
+        section.appendChild(card);
+    });
+}
+
+// ─── Experiment Setup ─────────────────────────────────────────────────────────
+
+function buildExperimentSetup() {
+    const section = document.getElementById("experiment-setup");
+    section.innerHTML = "";
+    const familyCfg = config.model_families?.[filters.family] || {};
+    const setupMap = familyCfg.experiment_setup || {};
+    const groupCol = GROUP_BY;
+    const groupVal = filters[groupCol];
+
+    const deviceVals = groupVal === "all"
+        ? []
+        : (setupMap[groupVal] ? [groupVal] : []);
+
+    if (!deviceVals.length) {
+        section.style.display = "none";
+        return;
+    }
+    section.style.display = "";
+
+    deviceVals.forEach(dv => {
+        const text = setupMap[dv];
+        if (!text) return;
+        const p = document.createElement("p");
+        p.textContent = text;
+        section.appendChild(p);
+    });
+}
+
+// ─── Render ───────────────────────────────────────────────────────────────────
+
+function render() {
+    const familyModels = MODEL_FAMILIES[filters.family]
+        ? new Set(MODEL_FAMILIES[filters.family].models)
+        : new Set(ALL_MODELS);
+
+    const filtered = DATA.filter(r => {
+        if (!familyModels.has(r[MODEL_COL])) return false;
+        for (const f of config.filters) {
+            const fv = filters[f.column];
+            if (fv === "all") continue;
+            if (String(r[f.column]) !== String(fv)) return false;
+        }
+        return true;
+    });
+
+    buildChart(filtered);
+    const chartsShown = filters[GROUP_BY] !== "all";
+    buildTables(filtered, chartsShown);
+    buildExperimentSetup();
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────────
+
+populateFilters();
+render();
+
+})();

config.json

@@ -0,0 +1,139 @@
+{
+  "title": "Edge Inference Benchmarks",
+  "subtitle": "Compare throughput and latency across devices and model variants. Use filters to focus on what matters.",
+  "model_column": "model",
+  "model_family_column": "model_family",
+  "model_link_prefix": "https://huggingface.co/",
+  "optimized_org": "embedl",
+  "filters": [
+    {
+      "column": "type",
+      "label": "Inference Type"
+    },
+    {
+      "column": "batch",
+      "label": "Batch Size",
+      "type": "number"
+    },
+    {
+      "column": "device",
+      "label": "Device",
+      "value_labels": {
+        "orin_nano": "Jetson Orin Nano Super",
+        "orin_nano_super": "Jetson Orin Nano Super",
+        "agx_orin": "Jetson AGX Orin",
+        "agx_thor": "Jetson AGX Thor"
+      }
+    }
+  ],
+  "metrics": [
+    {
+      "column": "tps",
+      "label": "Tokens / sec",
+      "short": "TPS ↑",
+      "higher_is_better": true,
+      "description": "Tokens per second (higher is better). Number of output tokens generated per second during the decoding phase. "
+    },
+    {
+      "column": "tpot",
+      "label": "Time per Output Token (ms)",
+      "short": "TPOT ↓",
+      "higher_is_better": false,
+      "description": "Time per output token in ms (lower is better). Average time (in milliseconds) required to generate one output token during decoding. Computed as TPOT = (last_token_ts - first_token_ts) / total_output_tokens."
+    },
+    {
+      "column": "ttft",
+      "label": "Time to First Token (ms)",
+      "short": "TTFT ↓",
+      "higher_is_better": false,
+      "description": "Time to first token in ms (lower is better). Time from request submission to generation of the first output token. This includes vision encoding, prompt prefill, KV cache initialization."
+    },
+    {
+      "column": "e2e",
+      "label": "End-to-End Latency (s)",
+      "short": "E2E ↓",
+      "higher_is_better": false,
+      "description": "End-to-end latency in seconds (lower is better). Total time from request submission to completion of the full generated response. This reflects real user-perceived latency."
+    }
+  ],
+  "display_columns": [
+    {
+      "column": "res",
+      "label": "Resolution",
+      "visible_when": {
+        "type": [
+          "video",
+          "image"
+        ]
+      }
+    },
+    {
+      "column": "fps",
+      "label": "FPS",
+      "type": "number",
+      "visible_when": {
+        "type": [
+          "video"
+        ]
+      }
+    },
+    {
+      "column": "frames",
+      "label": "Frames",
+      "type": "number",
+      "visible_when": {
+        "type": [
+          "video"
+        ]
+      }
+    }
+  ],
+  "chart": {
+    "default_metric": "tps",
+    "group_by": "device",
+    "scenarios": [
+      {
+        "label": "Text",
+        "match": {
+          "type": "text"
+        }
+      },
+      {
+        "label": "Image · 1280×720",
+        "match": {
+          "type": "image",
+          "res": "1280x720"
+        }
+      },
+      {
+        "label": "Video · 1280×720 · 4 FPS",
+        "match": {
+          "type": "video",
+          "res": "1280x720",
+          "fps": 4
+        }
+      }
+    ]
+  },
+  "table_sort": [
+    {
+      "column": "res",
+      "direction": "asc"
+    },
+    {
+      "column": "fps",
+      "direction": "desc"
+    }
+  ],
+  "table_group_by": "model",
+  "model_families": {
+    "Cosmos-Reason2-2B": {
+      "table_group_by": "res",
+      "experiment_setup": {
+        "agx_thor": "Measurement setup: NVIDIA vLLM 26.01, 256 tokens generated, 10 warm-up runs, averaged over 25 runs.",
+        "agx_orin": "Measurement setup: NVIDIA vLLM 0.14.0 for Jetson, 256 tokens generated, 10 warm-up runs, averaged over 25 runs.",
+        "orin_nano": "Measurement setup: NVIDIA vLLM 0.14.0 for Jetson, 256 tokens generated, 10 warm-up runs, averaged over 25 runs."
+      }
+    }
+  }
+}

data.csv

@@ -0,0 +1,134 @@
+model_family,model,type,batch,device,res,fps,frames,e2e,tps,tpot,ttft
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,1,agx_thor,1920x1080,N/A,N/A,2.8774,88.97,9.78,28.01
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,8,agx_thor,1920x1080,N/A,N/A,7.7989,262.60,13.22,29.21
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,1,agx_thor,854x480,N/A,N/A,3.2376,79.07,10.24,28.37
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,8,agx_thor,854x480,N/A,N/A,7.0134,292.01,13.61,63.15
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,1,agx_thor,1280x720,N/A,N/A,3.0668,83.48,9.68,27.34
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,image,8,agx_thor,1280x720,N/A,N/A,8.0958,252.97,13.77,60.15
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,text,1,agx_thor,N/A,N/A,N/A,2.2147,115.59,8.61,10.17
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,text,8,agx_thor,N/A,N/A,N/A,2.5627,799.15,9.88,26.92
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,1,agx_thor,1280x720,4,12,2.8978,88.34,10.27,186.62
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,1280x720,2,6,5.1466,397.93,12.00,776.65
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,1280x720,4,12,5.1346,398.87,11.96,779.69
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,1,agx_thor,1920x1080,2,6,3.7115,68.98,11.99,411.17
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,1,agx_thor,1920x1080,4,12,3.7154,68.90,12.00,412.31
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,1920x1080,2,6,8.4629,242.00,16.00,1744.43
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,1920x1080,4,12,8.3780,244.45,15.64,1741.12
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,1,agx_thor,854x480,2,6,2.6527,96.50,9.63,115.92
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,1,agx_thor,854x480,4,12,2.6462,96.74,9.60,115.65
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,854x480,2,6,3.8647,529.93,11.02,349.41
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-NVFP4A16,video,8,agx_thor,854x480,4,12,4.0195,509.52,11.55,349.17
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_orin,1280x720,N/A,N/A,3.2759,70.82,11.80,54.90
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_orin,1920x1080,N/A,N/A,3.1621,73.37,11.75,53.14
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_orin,854x480,N/A,N/A,3.2648,71.06,11.76,55.98
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,text,1,agx_orin,N/A,N/A,N/A,2.5601,100.00,9.85,35.56
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,1280x720,4,12,3.4416,74.38,11.71,243.54
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,1280x720,2,6,3.4448,74.31,11.75,248.53
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,1920x1080,2,6,4.4439,57.61,14.06,507.71
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,1920x1080,4,12,4.4386,57.68,14.00,508.39
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,854x480,2,6,3.0156,84.89,10.77,143.20
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_orin,854x480,4,12,3.0035,85.23,10.76,144.12
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_thor,1280x720,N/A,N/A,3.0483,83.98,9.81,15.44
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,8,agx_thor,1280x720,N/A,N/A,9.1849,222.97,12.98,28.81
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_thor,1920x1080,N/A,N/A,2.8439,90.02,9.71,15.53
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,8,agx_thor,1920x1080,N/A,N/A,6.2494,327.71,12.81,28.80
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,agx_thor,854x480,N/A,N/A,3.1369,81.61,10.18,15.95
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,8,agx_thor,854x480,N/A,N/A,6.9387,295.15,12.96,28.91
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,text,1,agx_thor,N/A,N/A,N/A,2.2340,114.59,8.67,11.13
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,text,8,agx_thor,N/A,N/A,N/A,2.2974,891.44,8.86,24.25
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_thor,1280x720,4,12,2.5977,98.55,9.10,185.63
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,1280x720,2,6,5.0695,403.98,11.64,779.90
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,1280x720,4,12,5.0521,405.37,11.63,775.99
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_thor,1920x1080,2,6,3.5969,71.17,11.52,412.00
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_thor,1920x1080,4,12,3.5756,71.60,11.39,415.89
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,1920x1080,2,6,8.2949,246.90,15.34,1742.22
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,1920x1080,4,12,8.2769,247.43,15.30,1741.64
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_thor,854x480,2,6,2.5015,102.34,9.06,113.30
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,agx_thor,854x480,4,12,2.5516,100.33,9.23,116.53
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,854x480,2,6,3.8613,530.39,10.92,350.04
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,8,agx_thor,854x480,4,12,3.9974,512.34,11.43,349.00
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,orin_nano_super,1280x720,N/A,N/A,5.5010,42.36,20.87,105.69
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,orin_nano_super,1920x1080,N/A,N/A,5.4421,42.81,20.88,105.89
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,image,1,orin_nano_super,854x480,N/A,N/A,5.5183,42.22,20.88,107.25
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,text,1,orin_nano_super,N/A,N/A,N/A,4.5489,56.28,17.42,84.61
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,1280x720,4,12,5.8635,43.66,20.80,334.08
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,1280x720,2,6,5.8696,43.61,20.79,324.38
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,1920x1080,2,6,4.8353,31.02,25.20,650.74
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,1920x1080,4,12,4.8483,30.94,25.23,657.56
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,854x480,2,6,5.1020,50.18,18.89,154.79
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16,video,1,orin_nano_super,854x480,4,12,5.1017,50.18,18.88,154.10
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,1280x720,N/A,N/A,3.5585,71.94,11.69,57.02
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,agx_orin,1280x720,N/A,N/A,10.3196,198.46,21.81,170.71
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,1920x1080,N/A,N/A,3.4224,74.80,11.68,54.49
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,agx_orin,1920x1080,N/A,N/A,9.8926,207.02,21.15,160.66
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,agx_orin,854x480,N/A,N/A,3.5028,73.08,11.67,56.27
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,agx_orin,854x480,N/A,N/A,11.6759,175.40,21.40,182.25
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,text,1,agx_orin,N/A,N/A,N/A,2.5640,99.84,9.86,36.08
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,text,8,agx_orin,N/A,N/A,N/A,2.8152,727.47,10.67,67.26
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,1280x720,4,12,3.4165,74.93,11.57,248.51
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,1280x720,2,6,3.4151,74.96,11.61,247.64
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,1280x720,4,12,7.7852,263.06,19.56,914.51
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,1280x720,2,6,7.6469,267.82,19.09,913.91
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,1920x1080,2,6,4.3864,58.36,13.93,504.30
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,1920x1080,4,12,4.4294,57.80,13.95,505.19
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,1920x1080,2,6,11.4902,178.24,22.12,2020.67
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,1920x1080,4,12,11.5039,178.03,22.19,2020.49
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,854x480,2,6,2.9761,86.02,10.62,141.70
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,agx_orin,854x480,4,12,2.9778,85.97,10.62,143.88
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,854x480,2,6,6.4896,315.58,19.83,422.90
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,agx_orin,854x480,4,12,6.4374,318.14,19.69,423.10
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,orin_nano_super,1280x720,N/A,N/A,6.0481,42.33,20.90,110.47
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,orin_nano_super,1280x720,N/A,N/A,26.8477,76.28,22.36,8962.49
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,orin_nano_super,1920x1080,N/A,N/A,5.7896,44.22,20.88,101.76
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,orin_nano_super,1920x1080,N/A,N/A,27.6012,74.20,22.41,8993.50
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,1,orin_nano_super,854x480,N/A,N/A,5.9725,42.86,20.92,109.79
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,image,8,orin_nano_super,854x480,N/A,N/A,26.7869,76.46,22.36,8956.04
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,text,1,orin_nano_super,N/A,N/A,N/A,4.4947,56.96,17.24,77.06
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,text,8,orin_nano_super,N/A,N/A,N/A,18.4232,111.16,17.55,7032.02
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,1280x720,4,12,5.8692,43.62,20.82,335.23
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,1280x720,2,6,5.8388,43.84,20.77,336.45
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,1280x720,4,12,25.2331,81.16,22.34,8713.41
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,1280x720,2,6,25.2252,81.19,22.34,8712.80
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,1920x1080,2,6,7.5462,33.92,25.29,648.85
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,1920x1080,4,12,7.5770,33.79,25.35,666.99
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,1920x1080,2,6,35.2481,58.10,29.46,11375.65
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,1920x1080,4,12,35.0017,58.51,29.46,11354.12
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,854x480,2,6,5.1049,50.15,18.91,151.20
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,1,orin_nano_super,854x480,4,12,5.1000,50.20,18.90,152.69
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,854x480,2,6,21.5985,94.82,19.83,7764.67
+Cosmos-Reason2-2B,embedl/Cosmos-Reason2-2B-W4A16-Edge2,video,8,orin_nano_super,854x480,4,12,21.5877,94.87,19.80,7750.95
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_orin,1280x720,N/A,N/A,8.6497,26.47,23.64,68.63
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_orin,1920x1080,N/A,N/A,5.9558,38.45,23.63,57.30
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_orin,854x480,N/A,N/A,6.0213,38.03,23.66,58.22
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,text,1,agx_orin,N/A,N/A,N/A,5.6196,45.55,21.79,36.40
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,1280x720,4,12,6.4673,39.58,23.56,249.17
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,1280x720,2,6,6.4872,39.46,23.58,250.17
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,1920x1080,2,6,7.4784,34.23,25.92,521.39
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,1920x1080,4,12,7.5190,34.05,25.93,523.36
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,854x480,2,6,6.0471,42.33,22.59,146.10
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_orin,854x480,4,12,6.0397,42.39,22.63,145.79
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_thor,1280x720,N/A,N/A,4.8338,52.96,16.96,28.90
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,8,agx_thor,1280x720,N/A,N/A,10.6920,191.55,25.67,74.92
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_thor,1920x1080,N/A,N/A,4.9062,52.18,16.89,28.89
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,8,agx_thor,1920x1080,N/A,N/A,11.3606,180.27,25.21,76.51
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,agx_thor,854x480,N/A,N/A,4.6755,54.75,16.79,27.95
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,8,agx_thor,854x480,N/A,N/A,10.4721,195.57,25.16,73.86
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,text,1,agx_thor,N/A,N/A,N/A,3.9263,65.20,15.27,16.72
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,text,8,agx_thor,N/A,N/A,N/A,5.9494,344.24,22.92,65.90
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,1280x720,4,12,4.5537,56.22,16.73,192.67
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1280x720,2,6,7.0704,289.66,19.80,778.89
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1280x720,4,12,7.0242,291.56,19.61,779.39
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,1920x1080,2,6,5.2182,49.06,18.16,408.99
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,1920x1080,4,12,5.2752,48.53,18.38,409.24
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1920x1080,2,6,10.1481,201.81,22.92,1749.06
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,1920x1080,4,12,10.4564,195.86,23.66,1746.96
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,854x480,2,6,5.0284,50.91,18.87,124.78
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,agx_thor,854x480,4,12,4.5504,56.26,17.01,123.61
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,854x480,2,6,5.6951,359.61,18.47,351.83
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,agx_thor,854x480,4,12,5.6608,361.79,18.33,354.19
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,1,orin_nano_super,OOM,N/A,N/A,OOM,OOM,OOM,OOM
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,text,1,orin_nano_super,N/A,N/A,N/A,OOM,OOM,OOM,OOM
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,1,orin_nano_super,OOM,OOM,OOM,OOM,OOM,OOM,OOM
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,image,8,orin_nano_super,OOM,N/A,N/A,OOM,OOM,OOM,OOM
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,text,8,orin_nano_super,N/A,N/A,N/A,OOM,OOM,OOM,OOM
+Cosmos-Reason2-2B,nvidia/Cosmos-Reason2-2B,video,8,orin_nano_super,OOM,OOM,OOM,OOM,OOM,OOM,OOM

index.html

@@ -1,19 +1,90 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Edge Inference Benchmarks — Embedl</title>
+    <link rel="stylesheet" href="style.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+</head>
+<body>
+
+<div class="page">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+        <a href="https://embedl.com" target="_blank" class="sidebar-logo">
+            <img src="embedl_logo_black_bg.svg" alt="Embedl" height="28">
+        </a>
+        <nav class="sidebar-nav" id="family-nav"></nav>
+    </aside>
+
+    <!-- Main -->
+    <main class="main">
+        <div class="main-inner">
+            <!-- Hero -->
+            <header class="hero">
+                <div class="hero-badge"><span>Embedl Models</span></div>
+                <h1 id="hero-title">Edge Inference <span class="accent">Benchmarks</span></h1>
+                <p class="hero-sub" id="hero-sub">Compare throughput and latency across devices and model variants.</p>
+            </header>
+
+            <!-- Filters -->
+            <section class="filters-bar" id="filters-bar"></section>
+
+            <!-- Charts -->
+            <section id="charts-section"></section>
+
+            <!-- Tables -->
+            <section id="tables-section"></section>
+
+            <!-- Metric Legend -->
+            <section class="legend-section">
+                <div class="legend-grid" id="legend-grid"></div>
+                <div class="experiment-setup" id="experiment-setup"></div>
+            </section>
+        </div>
+    </main>
+</div>
+
+<footer class="footer">
+    <div class="footer-inner">
+        <div class="footer-grid">
+            <div class="footer-col">
+                <a href="https://embedl.com" target="_blank" class="footer-logo-img">
+                    <img src="embedl_logo_black_bg.svg" alt="Embedl" height="24">
+                </a>
+                <div class="footer-logo">&copy; 2026 Embedl All rights reserved. <a href="https://www.embedl.com/contact" target="_blank">Contact Us.</a></div>
+                <div class="footer-social">
+                    <a href="https://www.linkedin.com/company/13991327/" target="_blank" rel="noopener" aria-label="LinkedIn">
+                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+                    </a>
+                    <a href="https://www.instagram.com/embedl_/" target="_blank" rel="noopener" aria-label="Instagram">
+                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
+                    </a>
+                    <a href="https://www.facebook.com/people/Embedl-AB/100088717652886/" target="_blank" rel="noopener" aria-label="Facebook">
+                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+                    </a>
+                    <a href="https://www.youtube.com/channel/UCR2uU2PnTzr4D1hOn3nsBwg" target="_blank" rel="noopener" aria-label="YouTube">
+                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+                    </a>
+                    <a href="https://github.com/embedl" target="_blank" rel="noopener" aria-label="GitHub">
+                        <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+                    </a>
+                </div>
+            </div>
+            <div class="footer-col">
+                <div class="footer-col-title">Sweden</div>
+                <p>Gamla Almedalsvägen 21,<br>412 63 Gothenburg, Sweden</p>
+                <p>SE +46 31 105 891</p>
+            </div>
+            <div class="footer-col">
+                <div class="footer-col-title">USA</div>
+                <p>470 Ramona Street,<br>Palo Alto, CA 94301, USA</p>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<script src="app.js"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,378 @@
+/* ── Palette ──────────────────────────────────────────── */
+:root {
+--bg:          #0B1527;
+--bg-opaque:   rgba(11, 21, 39,0.45);
+--bg-surface:  #1a1a2e;
+--teal:        #58b1c3;
+--green:       #6fcf97;
+--red:         #ff4d6d;
+--pink:        #ff6ec7;
+--purple:      #9b5de5;
+--blue:        #007F9E;
+--neutral:     #667788;
+--text:        #e8e8e8;
+--text-muted:  #8899aa;
+--text-dim:    #5a6a7a;
+--border:      rgba(255,255,255,0.06);
+--chart-grid:  rgba(255,255,255,0.06);
+--btn-hover-bg: rgba(255,255,255,0.03);
+--btn-active-bg: rgba(88,177,195,0.12);
+--btn-active-border: rgba(88,177,195,0.3);
+--sidebar-hover-bg: rgba(255,255,255,0.02);
+--sidebar-active-bg: rgba(88,177,195,0.04);
+--row-hover-bg: rgba(255,255,255,0.02);
+--row-border:  rgba(255,255,255,0.03);
+--code-bg:     rgba(88,177,195,0.1);
+--tooltip-bg:  #2c3e50;
+--tooltip-text: #f1f1f1;
+--tooltip-body: #d9d9d9;
+}
+
+/* ── Reset & Base ─────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; }
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+background: var(--bg);
+color: var(--text);
+line-height: 1.6;
+-webkit-font-smoothing: antialiased;
+position: relative;
+}
+body::before {
+content: "";
+position: fixed;
+top: -260px;
+left: 50%;
+transform: translateX(-50%);
+width: 69rem;
+height: 42rem;
+background: radial-gradient(circle, rgba(0,226,213,0.25) 0%, rgba(18,208,254,0.15) 30%, transparent 70%);
+filter: blur(80px);
+pointer-events: none;
+z-index: 0;
+}
+code {
+background: var(--code-bg);
+color: var(--teal);
+padding: 0.15em 0.45em;
+border-radius: 4px;
+font-size: 0.95em;
+}
+
+/* ── Page Layout ─────────────────────────────────────── */
+.page {
+position: relative;
+z-index: 1;
+display: flex;
+flex-direction: row;
+min-height: 100vh;
+max-width: 1440px;
+margin: 0 auto;
+}
+
+/* ── Sidebar ─────────────────────────────────────────── */
+.sidebar {
+width: 280px;
+max-width: 300px;
+flex-shrink: 0;
+padding: 2rem 0;
+position: sticky;
+top: 0;
+height: 100vh;
+overflow-y: auto;
+}
+.sidebar-logo {
+display: block;
+padding: 0 1.25rem 3.25rem;
+}
+.sidebar-nav {
+display: flex;
+flex-direction: column;
+}
+.sidebar-item {
+display: block;
+padding: 0.5rem 1.25rem;
+font-size: 1.25rem;
+font-weight: 400;
+color: var(--text-dim);
+text-decoration: none;
+cursor: pointer;
+border-left: 2px solid transparent;
+transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.sidebar-item:hover {
+color: var(--text-muted);
+}
+.sidebar-item.active {
+color: var(--teal);
+font-weight: 600;
+}
+
+/* ── Main Column ─────────────────────────────────────── */
+.main {
+flex: 1;
+min-width: 0;
+}
+.main-inner {
+max-width: 1100px;
+width: 100%;
+padding: 0 2rem 2rem;
+}
+
+/* ── Hero ────────────────────────────────────────────── */
+.hero {
+position: relative;
+padding: 2rem 0 2.5rem;
+}
+.hero-badge {
+display: inline-block;
+padding: 1px;
+border-radius: 999px;
+background: linear-gradient(90deg, var(--teal),var(--blue));
+margin-bottom: 1rem;
+}
+.hero-badge span {
+display: inline-block;
+padding: 0.35rem 1rem;
+border-radius: 999px;
+background: var(--bg-opaque);
+color: var(--teal);
+font-size: 1rem;
+font-weight: 600;
+letter-spacing: 0.03em;
+text-transform: uppercase;
+}
+.hero h1 {
+font-size: clamp(1.8rem, 3.5vw, 3.0rem);
+font-weight: 700;
+margin-bottom: 0.5rem;
+letter-spacing: -0.02em;
+}
+.hero .accent { color: var(--teal); }
+.hero-sub {
+color: var(--text-muted);
+font-size: 1.1rem;
+max-width: 620px;
+line-height: 1.6;
+}
+
+/* ── Filters ─────────────────────────────────────────── */
+.filters-bar {
+display: flex;
+flex-wrap: wrap;
+gap: 1.25rem;
+padding: 1rem 0;
+top: 0;
+z-index: 10;
+}
+.filter-group label {
+display: block;
+font-size: 0.8rem;
+font-weight: 600;
+text-transform: uppercase;
+letter-spacing: 0.08em;
+color: var(--text-dim);
+margin-bottom: 0.25rem;
+}
+.btn-group { display: flex; gap: 0; }
+.btn {
+background: transparent;
+border: 1px solid var(--border);
+color: var(--text-muted);
+font-size: 1rem;
+font-weight: 400;
+padding: 0.45rem 1rem;
+cursor: pointer;
+transition: all 0.15s;
+}
+.btn:first-child { border-radius: 6px 0 0 6px; }
+.btn:last-child  { border-radius: 0 6px 6px 0; }
+.btn:not(:first-child) { margin-left: -1px; }
+.btn:hover {
+color: var(--text);
+background: var(--btn-hover-bg);
+}
+.btn.active {
+background: var(--btn-active-bg);
+color: var(--teal);
+border-color: var(--btn-active-border);
+font-weight: 600;
+z-index: 1;
+position: relative;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* ── Chart ───────────────────────────────────────────── */
+.chart-block {
+margin: 1.5rem 0;
+}
+.chart-heading {
+font-size: 1.25rem;
+font-weight: 600;
+color: var(--text);
+margin-bottom: 0.25rem;
+}
+.chart-subtitle {
+font-size: 1rem;
+color: var(--text-muted);
+margin-bottom: 0.75rem;
+}
+.chart-wrap {
+height: 340px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* ── Tables ──────────────────────────────────────────── */
+.table-card {
+margin: 1.5rem 0 2rem;
+}
+.table-card h3 {
+font-size: 1.15rem;
+font-weight: 600;
+color: var(--text);
+margin-bottom: 0.5rem;
+padding-bottom: 0.5rem;
+border-bottom: 1px solid var(--border);
+}
+.table-scroll {
+overflow-x: auto;
+scrollbar-color: var(--text-dim) var(--border);
+scrollbar-width: thin;
+}
+.table-scroll::-webkit-scrollbar { height: 8px; }
+.table-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
+.table-scroll::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 4px; }
+.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+table { width: 100%; border-collapse: collapse; font-size: 1rem; }
+thead th {
+text-align: left;
+font-weight: 600;
+font-size: 0.8rem;
+text-transform: uppercase;
+letter-spacing: 0.05em;
+color: var(--text-dim);
+padding: 0.5rem 0.75rem;
+border-bottom: 1px solid var(--border);
+white-space: nowrap;
+}
+tbody td {
+padding: 0.5rem 0.75rem;
+border-bottom: 1px solid var(--row-border);
+white-space: nowrap;
+color: var(--text-muted);
+}
+tbody tr:last-child td { border-bottom: none; }
+tbody tr:hover { background: var(--row-hover-bg); }
+.model-cell { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text); }
+.model-cell a { color: var(--teal); text-decoration: none; transition: color 0.15s; }
+.model-cell a:hover { text-decoration: underline; }
+.model-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.oom { color: var(--red); font-weight: 600; }
+tbody tr.row-group-break td { border-top: 2px solid var(--border); }
+
+/* ── Legend ───────────────────────────────────────────── */
+.legend-section {
+margin: 2rem 0;
+padding-top: 1.5rem;
+}
+.legend-grid {
+display: grid;
+grid-template-columns: 1fr;
+gap: 0.25rem;
+font-size: 0.8rem;
+color: var(--text-dim);
+}
+.legend-grid strong { color: var(--text-muted); font-weight: 500; }
+.experiment-setup {
+margin-top: 0.75rem;
+font-size: 0.95rem;
+color: var(--text-dim);
+font-style: italic;
+line-height: 1.6;
 }
+.experiment-setup p { margin-bottom: 0.25rem; }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* ── Footer ──────────────────────────────────────────── */
+.footer {
+padding: 2.5rem 0;
+margin-top: 2rem;
+}
+.footer-inner {
+max-width: 1440px;
+margin: 0 auto;
+padding: 0 2rem;
+}
+.footer-grid {
+display: flex;
+gap: 3rem;
+flex-wrap: wrap;
+}
+.footer-col {
+font-size: 1rem;
+color: var(--text-dim);
+line-height: 1.7;
+}
+.footer-col p { margin: 0; }
+.footer-col-title {
+font-size: 0.85rem;
+font-weight: 600;
+text-transform: uppercase;
+letter-spacing: 0.08em;
+color: var(--text);
+}
+.footer-logo-img {
+display: block;
+margin-bottom: 0.5rem;
+}
+.footer-logo {
+font-size: 1rem;
+color: var(--text-muted);
+margin-bottom: 1.2rem;
+}
+.footer-logo a { color: var(--text-muted); text-decoration: none; }
+.footer-logo a:hover { text-decoration: underline; }
+.footer-social {
+display: flex;
+gap: 0.75rem;
+}
+.footer-social a {
+color: var(--text-dim);
+transition: color 0.15s;
+display: flex;
+align-items: center;
+}
+.footer-social a:hover {
+color: var(--teal);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* ── Responsive ──────────────────────────────────────── */
+@media (max-width: 768px) {
+.page { flex-direction: column; }
+.sidebar {
+width: 100%;
+max-width: none;
+height: auto;
+position: static;
+border-right: none;
+border-bottom: 1px solid var(--border);
+padding: 0.75rem 0;
+}
+.sidebar-nav {
+flex-direction: row;
+flex-wrap: wrap;
+padding: 0 0.75rem;
+}
+.sidebar-item {
+border-left: none;
+border-bottom: 2px solid transparent;
+padding: 0.4rem 0.75rem;
+font-size: 0.9rem;
+}
+.sidebar-item.active {
+border-left-color: transparent;
+border-bottom-color: var(--teal);
+}
+.main-inner { padding: 0 1rem 2rem; }
+.filters-bar { gap: 0.75rem; }
+.btn { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
+.chart-wrap { height: 260px; }
 }