Upload folder using huggingface_hub

index.html

@@ -145,6 +145,9 @@
     border-bottom: 2px solid var(--border-strong);
     text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem;
   }
+  table.dt th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
+  table.dt th[data-sort]:hover { color: var(--navy); }
+  table.dt th .sort-ind { color: var(--gold); margin-left: 0.2rem; }
   table.dt td {
     padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border);
     vertical-align: middle;
@@ -182,6 +185,8 @@
     font-family: var(--mono); font-weight: 600; font-size: 0.72rem;
   }
   .cell-val { color: var(--good); background: var(--good-bg); padding: 0.15rem 0.35rem; border-radius: 3px; }
+  a.cell-val { text-decoration: none; cursor: pointer; }
+  a.cell-val:hover { background: var(--good); color: #fff; }
   .cell-plan { color: var(--warn); background: var(--warn-bg); padding: 0.15rem 0.35rem; border-radius: 3px; }
   .cell-none { color: var(--text-muted); opacity: 0.5; }
   .cell-target { color: var(--text-muted); background: #f4f4f4; padding: 0.15rem 0.35rem; border-radius: 3px; }
@@ -452,19 +457,6 @@
       </div>
     </div>
 
-    <div class="section">
-      <div class="section-header"><h2>Accuracy vs On-target Throughput</h2>
-        <span class="section-note">COCO val2017 · pipelined FPS measured on each platform by the <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler</a></span>
-      </div>
-      <div class="chart-host" style="height:420px"><canvas id="chart-det-fps"></canvas></div>
-      <p style="font-family:var(--serif);color:var(--text-muted);font-size:0.82rem;margin-top:0.5rem">
-        Each point is a public validation session: color = platform, shape = model family
-        (● YOLOv5 · ■ YOLOv8 · ▲ YOLO11 · ◆ YOLO26). X axis is sustained pipelined throughput on a log
-        scale — the full image load → decode → preprocess → inference → postprocess pipeline, not bare
-        inference time. ⚠ flagged sessions are shown at their measured accuracy.
-      </p>
-    </div>
-
     <div class="section">
       <div class="section-header"><h2>Nano Segmentation — Mask mAP</h2>
         <span class="section-note">YOLOv8 / YOLO11 / YOLO26, COCO val2017</span>
@@ -482,12 +474,25 @@
     </div>
 
     <div class="section">
-      <div class="section-header"><h2>On-target Timing</h2>
-        <span class="section-note">Measured by the <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler</a> on deployment hardware</span>
+      <div class="section-header"><h2>Accuracy vs On-target Throughput</h2>
+        <span class="section-note">COCO val2017 · pipelined FPS measured on each platform by the <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler</a></span>
+      </div>
+      <div class="chart-host" style="height:420px"><canvas id="chart-det-fps"></canvas></div>
+      <p style="font-family:var(--serif);color:var(--text-muted);font-size:0.82rem;margin-top:0.5rem">
+        Each point is a public validation session: color = platform, shape = model family
+        (● YOLOv5 · ■ YOLOv8 · ▲ YOLO11 · ◆ YOLO26). X axis is sustained pipelined throughput on a log
+        scale — the full image load → decode → preprocess → inference → postprocess pipeline, not bare
+        inference time. ⚠ flagged sessions are shown at their measured accuracy.
+      </p>
+    </div>
+
+    <div class="section">
+      <div class="section-header"><h2>Accuracy vs On-target Latency</h2>
+        <span class="section-note">End-to-end per-image latency measured by the <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler</a> on deployment hardware</span>
       </div>
       <div id="timing-host">
         <p style="font-family:var(--serif);color:var(--text-muted);font-size:0.92rem">
-          On-target latency and throughput results are being collected across the platform matrix.
+          On-target latency results are being collected across the platform matrix.
           See the <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler documentation</a>
           for how profiling and validation are performed.
         </p>
@@ -509,16 +514,16 @@
       </div>
       <table class="dt" id="studio-table" style="display:none">
         <thead><tr>
-          <th>Session</th>
-          <th>Family · Task</th>
-          <th>Target</th>
-          <th>Precision</th>
-          <th>Det mAP<sub>50</sub></th>
-          <th>Det mAP<sub>50-95</sub></th>
-          <th>Mask mAP<sub>50-95</sub></th>
-          <th>Inf (ms)</th>
-          <th>E2E (ms)</th>
-          <th>FPS</th>
+          <th data-sort="session">Session</th>
+          <th data-sort="family">Family · Task</th>
+          <th data-sort="target">Target</th>
+          <th data-sort="precision">Precision</th>
+          <th data-sort="det50">Det mAP<sub>50</sub></th>
+          <th data-sort="det5095">Det mAP<sub>50-95</sub></th>
+          <th data-sort="mask">Mask mAP<sub>50-95</sub></th>
+          <th data-sort="inf">Inf (ms)</th>
+          <th data-sort="e2e">E2E (ms)</th>
+          <th data-sort="fps">FPS</th>
           <th>Studio</th>
         </tr></thead>
         <tbody id="studio-body"></tbody>
@@ -545,7 +550,7 @@
       <div class="coverage-wrap"><table class="matrix" id="coverage-seg"></table></div>
     </div>
     <div class="legend">
-      <span><span class="swatch" style="background:var(--good-bg);border:1px solid var(--good)"></span>Validated — public results on EdgeFirst Studio</span>
+      <span><span class="swatch" style="background:var(--good-bg);border:1px solid var(--good)"></span>Validated — click ✓ to open the proving session on EdgeFirst Studio</span>
       <span><span class="swatch" style="background:transparent;border:1px solid var(--border)"></span>Validation pending</span>
     </div>
   </section>
@@ -568,7 +573,7 @@
   <section class="tab-panel" id="tab-leaderboard">
     <div class="section">
       <div class="section-header"><h2>Platform Throughput Leaderboard</h2>
-        <span class="section-note">Best sustained pipelined throughput measured per platform · full image load → decode → preprocess → inference → postprocess pipeline</span>
+        <span class="section-note">Top 20 fastest validated model × platform results · full image load → decode → preprocess → inference → postprocess pipeline</span>
       </div>
       <table class="dt">
         <thead><tr>
@@ -634,9 +639,14 @@
 // Platforms as rows: hosts (reference) first, then embedded targets, then Jetson.
 // `match` is tested (in order) against the Studio target/footer string to map a
 // validation session onto a platform row.
+// The three CoreML compute units are separate accelerators on one host —
+// each gets its own coverage row, but only the ANE (the fastest) is ranked
+// in leaderboards; CPU/GPU numbers remain in the validation sessions table.
 const PLATFORM_ROWS = [
   { key: "linux-x86", label: "Linux x86_64",            detail: "ONNX Runtime + CUDA",            group: "reference", color: "#6C757D", match: /linux|x86|cuda/ },
-  { key: "m2max",     label: "Apple M2 Max",            detail: "ONNX + CoreML (CPU, GPU, ANE)",  group: "reference", color: "#4B0082", match: /macos|coreml/ },
+  { key: "m2max-ane", label: "Apple M2 Max",            detail: "ONNX + CoreML ANE",              group: "reference", color: "#4B0082", match: /coreml-ane/ },
+  { key: "m2max-gpu", label: "Apple M2 Max",            detail: "ONNX + CoreML GPU",              group: "reference", color: "#7A4FB3", match: /coreml-gpu/, leaderboard: false },
+  { key: "m2max-cpu", label: "Apple M2 Max",            detail: "ONNX + CoreML CPU",              group: "reference", color: "#A98FD0", match: /coreml-cpu|macos|coreml/, leaderboard: false },
   { key: "imx8mp",    label: "NXP i.MX 8M Plus",        detail: "VSI NPU · TFLite INT8",          group: "embedded",  color: "#E8B820", match: /imx8mp/ },
   { key: "imx93",     label: "NXP i.MX 93",             detail: "Ethos-U65 · VELA TFLite",        group: "embedded",  color: "#8B7DC4", match: /imx93/ },
   { key: "imx95",     label: "NXP i.MX 95",             detail: "eIQ Neutron · TFLite INT8",      group: "embedded",  color: "#1FA0A8", match: /imx95/ },
@@ -822,13 +832,20 @@ const COVERAGE_SIZES = ["n", "s", "m"];
 const SIZE_NAMES = { n: "Nano", s: "Small", m: "Medium" };
 
 // Build a lookup of validated (task, version, size, platform) cells from the
-// embedded Studio sessions.
+// embedded Studio sessions. Each cell keeps the best proving session (smart
+// decoder preferred, then highest mAP) so the ✓ can link to it.
 function coverageLookup() {
   const seen = {};
   for (const s of (STUDIO?.sessions ?? [])) {
     const p = platformRowForSession(s);
     if (!p || !s.has_metrics) continue;
-    seen[`${s.task_key}|${s.version_key}|${s.size}|${p.key}`] = true;
+    const key = `${s.task_key}|${s.version_key}|${s.size}|${p.key}`;
+    const metric = s.det_map_50_95 ?? s.mask_map_50_95 ?? 0;
+    const isSmart = isSmartSession(s);
+    const cur = seen[key];
+    if (!cur || (isSmart && !cur.isSmart) || (isSmart === cur.isSmart && metric > cur.metric)) {
+      seen[key] = { s, metric, isSmart };
+    }
   }
   return seen;
 }
@@ -868,8 +885,9 @@ function renderCoverageTable(taskKey, tableId, seen) {
     for (const v of versions) {
       for (const sz of COVERAGE_SIZES) {
         const td = el("td");
-        if (seen[`${taskKey}|${v}|${sz}|${p.key}`]) {
-          td.innerHTML = '<span class="cell cell-val">✓</span>';
+        const hit = seen[`${taskKey}|${v}|${sz}|${p.key}`];
+        if (hit) {
+          td.innerHTML = `<a class="cell cell-val" href="${hit.s.url}" target="_blank" rel="noopener" title="Open validation session ${hit.s.session_id} on EdgeFirst Studio">✓</a>`;
         } else {
           td.innerHTML = '<span class="cell cell-none">—</span>';
         }
@@ -971,23 +989,27 @@ function leaderboardEntries(platformKey, metricKey) {
     }));
 }
 
-// Cross-platform throughput board: ranks platforms by their best measured
-// pipelined FPS (accuracy intentionally not ranked here).
+// Cross-platform throughput board: the top 20 fastest validated
+// model × platform results by pipelined FPS (accuracy intentionally not
+// ranked here; smart decoder preferred over logical duplicates).
 function renderPlatformThroughput() {
   const host = document.getElementById("platform-fps-body");
   if (!host) return;
   host.innerHTML = "";
-  const rows = [];
-  for (const p of PLATFORM_ROWS) {
-    let top = null;
-    for (const s of (STUDIO?.sessions ?? [])) {
-      const pr = platformRowForSession(s);
-      if (!pr || pr.key !== p.key || s.fps_median == null) continue;
-      if (!top || s.fps_median > top.fps_median) top = s;
+  const best = {};
+  for (const s of (STUDIO?.sessions ?? [])) {
+    const p = platformRowForSession(s);
+    if (!p || p.leaderboard === false || s.fps_median == null) continue;
+    const key = `${p.key}|${s.task_key}|${s.version_key}|${s.size}`;
+    const isSmart = isSmartSession(s);
+    const cur = best[key];
+    if (!cur || (isSmart && !cur.isSmart) || (isSmart === cur.isSmart && s.fps_median > cur.s.fps_median)) {
+      best[key] = { p, s, isSmart };
     }
-    if (top) rows.push({ p, s: top });
   }
-  rows.sort((a, b) => b.s.fps_median - a.s.fps_median);
+  const rows = Object.values(best)
+    .sort((a, b) => b.s.fps_median - a.s.fps_median)
+    .slice(0, 20);
   for (let i = 0; i < rows.length; i++) {
     const { p, s } = rows[i];
     const tr = el("tr");
@@ -1005,7 +1027,8 @@ function renderPlatformThroughput() {
 function renderLeaderboard() {
   const grid = document.getElementById("leaderboard-grid");
   grid.innerHTML = "";
-  const platforms = PLATFORM_ROWS.filter(p => lbGroup === "all" || p.group === lbGroup);
+  const platforms = PLATFORM_ROWS.filter(p =>
+    p.leaderboard !== false && (lbGroup === "all" || p.group === lbGroup));
   const metricLabel = lbMetric === "fps"
     ? "Pipelined throughput FPS (higher is better)"
     : "mAP@0.5-0.95 (higher is better)";
@@ -1120,7 +1143,7 @@ function chartDetFps() {
   const datasets = PLATFORM_ROWS.filter(p => byPlatform[p.key]).map(p => {
     const pts = byPlatform[p.key];
     return {
-      label: p.label,
+      label: `${p.label} ${p.detail.includes("CoreML") ? p.detail.replace("ONNX + ", "") : ""}`.trim(),
       data: pts.map(s => ({
         x: s.fps_median,
         y: s.det_map_50_95,
@@ -1309,13 +1332,6 @@ function totalMs(s) {
   return v > 0 ? v : null;
 }
 
-function studioSessionLabel(s) {
-  const sz = s.size ? s.size.toUpperCase() : "?";
-  const tk = s.task_key === "det" ? "Det" : "Seg";
-  const tgt = s.target_label || s.target_raw || s.format_key || "?";
-  return `${s.version_key?.toUpperCase()}${sz}-${tk} · ${tgt}`;
-}
-
 function renderStudio() {
   const table = document.getElementById("studio-table");
   const empty = document.getElementById("studio-empty");
@@ -1329,27 +1345,93 @@ function renderStudio() {
   empty.style.display = "none";
   table.style.display = "";
   const okCount = STUDIO.counts?.sessions_ok ?? STUDIO.counts?.ok ?? STUDIO.sessions.length;
-  source.innerHTML = `updated <code>${STUDIO.generated_at}</code> · ${okCount} public sessions · every row links to <a href="https://edgefirst.studio" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Studio</a>`;
+  source.innerHTML = `updated <code>${STUDIO.generated_at}</code> · ${okCount} public sessions · every row links to <a href="https://edgefirst.studio" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Studio</a> · click a column header to sort`;
+
+  // Attach sort handlers once
+  table.querySelectorAll("th[data-sort]").forEach(th => {
+    if (th.dataset.bound) return;
+    th.dataset.bound = "1";
+    th.addEventListener("click", () => {
+      const key = th.dataset.sort;
+      if (studioSortKey === key) {
+        studioSortDir = -studioSortDir;
+      } else {
+        studioSortKey = key;
+        // Metrics default to descending (best first), text to ascending.
+        studioSortDir = ["session", "family", "target", "precision"].includes(key) ? 1 : -1;
+      }
+      renderStudioBody();
+    });
+  });
 
-  const body = document.getElementById("studio-body");
-  body.innerHTML = "";
+  renderStudioBody();
+}
+
+const SIZE_ORDER = ["n", "s", "m", "l", "x"];
+
+const STUDIO_SORT_ACCESSORS = {
+  session: s => s.session_name || s.session_id || "",
+  family: s => `${String(VERSION_ORDER.indexOf(s.version_key)).padStart(2, "0")}|${s.task_key}|${SIZE_ORDER.indexOf(s.size)}`,
+  target: s => s.target_label || s.target_raw || "",
+  precision: s => s.precision || "",
+  det50: s => s.det_map_50,
+  det5095: s => s.det_map_50_95,
+  mask: s => s.mask_map_50_95,
+  inf: s => s.avg_inference_ms,
+  e2e: s => totalMs(s),
+  fps: s => s.fps_median,
+};
 
-  // Sort: detection first, then by version, size, target_key/raw, precision
-  const sizeOrder = ["n", "s", "m", "l", "x"];
+let studioSortKey = null;
+let studioSortDir = 1;
+
+function sortedStudioSessions() {
+  const sessions = STUDIO.sessions.slice();
+  if (studioSortKey && STUDIO_SORT_ACCESSORS[studioSortKey]) {
+    const acc = STUDIO_SORT_ACCESSORS[studioSortKey];
+    sessions.sort((a, b) => {
+      const va = acc(a), vb = acc(b);
+      if (va == null && vb == null) return 0;
+      if (va == null) return 1;   // nulls always last
+      if (vb == null) return -1;
+      const c = (typeof va === "number" && typeof vb === "number")
+        ? va - vb
+        : String(va).localeCompare(String(vb));
+      return c * studioSortDir;
+    });
+    return sessions;
+  }
+  // Default: detection first, then by version, size, target, precision
   const targetOrder = ["onnx", "tflite", "imx93", "imx95", "imx8mp", "ara240", "hailo8l", "hailo8", "hailo10", "engine"];
-  const sessions = STUDIO.sessions.slice().sort((a, b) => {
+  return sessions.sort((a, b) => {
     if (a.task_key !== b.task_key) return a.task_key.localeCompare(b.task_key);
     const ai = VERSION_ORDER.indexOf(a.version_key);
     const bi = VERSION_ORDER.indexOf(b.version_key);
     if (ai !== bi) return ai - bi;
-    const si = sizeOrder.indexOf(a.size), sj = sizeOrder.indexOf(b.size);
+    const si = SIZE_ORDER.indexOf(a.size), sj = SIZE_ORDER.indexOf(b.size);
     if (si !== sj) return si - sj;
     const ti = targetOrder.indexOf(a.target_key) === -1 ? 99 : targetOrder.indexOf(a.target_key);
     const tj = targetOrder.indexOf(b.target_key) === -1 ? 99 : targetOrder.indexOf(b.target_key);
     if (ti !== tj) return ti - tj;
     return (a.precision || "").localeCompare(b.precision || "");
   });
+}
+
+function renderStudioBody() {
+  const table = document.getElementById("studio-table");
+  const body = document.getElementById("studio-body");
+  body.innerHTML = "";
+
+  // Header sort indicators
+  table.querySelectorAll("th[data-sort]").forEach(th => {
+    th.querySelector(".sort-ind")?.remove();
+    if (th.dataset.sort === studioSortKey) {
+      th.insertAdjacentHTML("beforeend",
+        `<span class="sort-ind">${studioSortDir === 1 ? "▲" : "▼"}</span>`);
+    }
+  });
 
+  const sessions = sortedStudioSessions();
   for (const s of sessions) {
     const total = totalMs(s);
     const tr = el("tr");
@@ -1377,13 +1459,13 @@ function renderStudio() {
   }
 }
 
-// On-target timing — Pareto chart using Studio inference timing if available
+// Accuracy vs on-target latency — end-to-end per-image wall time, encoded
+// like the throughput chart: color = platform, shape = model family.
 function renderTiming() {
   const host = document.getElementById("timing-host");
   if (!host) return;
   const usable = (STUDIO?.sessions ?? []).filter(s =>
-    typeof s.avg_inference_ms === "number" && s.avg_inference_ms > 0 &&
-    typeof s.det_map_50_95 === "number"
+    s.task_key === "det" && totalMs(s) != null && typeof s.det_map_50_95 === "number"
   );
   if (usable.length === 0) {
     // leave the default placeholder copy
@@ -1391,29 +1473,38 @@ function renderTiming() {
   }
 
   host.innerHTML = `
-    <div class="chart-host" style="height:360px"><canvas id="chart-timing"></canvas></div>
+    <div class="chart-host" style="height:420px"><canvas id="chart-timing"></canvas></div>
     <p style="font-family:var(--serif);color:var(--text-muted);font-size:0.82rem;margin-top:0.5rem">
-      Each point is a public Studio validation session · X = average inference time (ms) · Y = mAP@0.5-0.95 ·
-      colored by model family. Timing is measured on the deployment hardware by the
-      <a href="https://doc.edgefirst.ai/latest/profiler/" target="_blank" rel="noopener" style="color:var(--teal-text)">EdgeFirst Profiler</a>.
+      Each point is a public validation session: color = platform, shape = model family
+      (● YOLOv5 · ■ YOLOv8 · ▲ YOLO11 · ◆ YOLO26). X axis is end-to-end per-image latency on a log
+      scale — the sequential image load → decode → preprocess → inference → postprocess wall time, not
+      bare inference. Throughput exceeds 1000 ÷ latency because stages pipeline across frames.
     </p>
   `;
 
-  const byVersion = {};
+  const byPlatform = {};
   for (const s of usable) {
-    (byVersion[s.version_key] ||= []).push({
-      x: s.avg_inference_ms,
-      y: s.det_map_50_95,
-      label: studioSessionLabel(s),
-    });
+    const p = platformRowForSession(s);
+    if (!p) continue;
+    (byPlatform[p.key] ||= []).push(s);
   }
-  const datasets = Object.entries(byVersion).map(([v, pts]) => ({
-    label: v.toUpperCase(),
-    data: pts,
-    backgroundColor: COLORS[v] ?? "#888",
-    borderColor: COLORS[v] ?? "#888",
-    pointRadius: 7, pointHoverRadius: 10,
-  }));
+
+  const datasets = PLATFORM_ROWS.filter(p => byPlatform[p.key]).map(p => {
+    const pts = byPlatform[p.key];
+    return {
+      label: `${p.label} ${p.detail.includes("CoreML") ? p.detail.replace("ONNX + ", "") : ""}`.trim(),
+      data: pts.map(s => ({
+        x: totalMs(s),
+        y: s.det_map_50_95,
+        name: sessionModelName(s),
+        flagged: isBelowExpectations(s),
+      })),
+      backgroundColor: p.color,
+      borderColor: p.color,
+      pointStyle: pts.map(s => FAMILY_SHAPES[s.version_key] ?? "circle"),
+      pointRadius: 7, pointHoverRadius: 10,
+    };
+  });
 
   destroyChart("timing");
   charts.timing = new Chart(document.getElementById("chart-timing"), {
@@ -1425,13 +1516,15 @@ function renderTiming() {
         legend: { display: true, position: "bottom" },
         tooltip: {
           callbacks: {
-            label: (ctx) => `${ctx.raw.label}: ${ctx.parsed.y}% mAP @ ${ctx.parsed.x} ms`,
+            label: (ctx) => `${ctx.raw.name} on ${ctx.dataset.label}: ${ctx.parsed.y.toFixed(1)} mAP @ ${ctx.parsed.x.toFixed(1)} ms E2E${ctx.raw.flagged ? " ⚠" : ""}`,
           },
         },
       },
       scales: {
-        x: { title: { display: true, text: "Avg inference time (ms, lower = faster)" }, beginAtZero: true,
-             ticks: { font: { family: "monospace", size: 10 } } },
+        x: { type: "logarithmic",
+             title: { display: true, text: "End-to-end latency (ms, log scale — lower is better)" },
+             ticks: { font: { family: "monospace", size: 10 },
+                      callback: (v) => ([1,2,5,10,20,50,100,200,500,1000,2000].includes(v) ? String(v) : null) } },
         y: { title: { display: true, text: "mAP@0.5-0.95 (%)" }, beginAtZero: false,
              ticks: { font: { family: "monospace", size: 10 } } },
       },