Upload folder using huggingface_hub

README.md

@@ -1,10 +1,16 @@
 ---
-title: Torch Neuronx Model Support
-emoji: 🐠
+title: torch-neuronx model support
+emoji: ✅
 colorFrom: yellow
-colorTo: indigo
+colorTo: gray
 sdk: static
 pinned: false
+short_description: Which Hub models run on AWS Trainium with torch-neuronx
+datasets:
+- aws-neuron/torch-neuronx-model-support
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Lists the models of the
+[aws-neuron/torch-neuronx-model-support](https://huggingface.co/datasets/aws-neuron/torch-neuronx-model-support)
+dataset, by library and `(neuronx-cc, library version)` pair, in the order the
+sweep selected them or by their trending score or downloads on the Hub.

app.js

@@ -0,0 +1,237 @@
+// Lists the models of the aws-neuron/torch-neuronx-model-support dataset, one
+// tab per library, ordered and filtered by each model's live Hub stats.
+import { parquetReadObjects } from "https://cdn.jsdelivr.net/npm/hyparquet@1.31.2/src/index.js";
+
+const HUB = "https://huggingface.co";
+const DATASET = "aws-neuron/torch-neuronx-model-support";
+const NEFF_CACHE = "hf://buckets/aws-neuron/torch-neuronx-neff-cache";
+const LIBRARIES = ["transformers", "diffusers", "sentence-transformers"];
+const ORDERS = ["selected", "trending", "downloads"];
+const COLUMNS = ["model_id", "runner", "tp", "result", "wall (s)", "Memory (GB)", "notes"];
+const STATS_QUERY = new URLSearchParams([
+  ["expand[]", "trendingScore"], ["expand[]", "downloads"], ["expand[]", "pipeline_tag"],
+]);
+const NO_STATS = { trending: 0, downloads: 0, task: "unknown" };
+
+// An element with attributes and children. Strings become text nodes, never HTML.
+function h(tag, attrs = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.startsWith("on")) el.addEventListener(key.slice(2), value);
+    else if (value === true) el.setAttribute(key, "");
+    else if (value !== false && value != null) el.setAttribute(key, value);
+  }
+  el.append(...children.flat(Infinity).filter((c) => c != null && c !== false));
+  return el;
+}
+
+const encodePath = (path) => path.split("/").map(encodeURIComponent).join("/");
+
+async function fetchOk(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`${url}: HTTP ${response.status}`);
+  return response;
+}
+
+// Promises by key, dropped on failure so that the next render retries.
+const cache = new Map();
+function cached(key, load) {
+  if (!cache.has(key)) cache.set(key, load().catch((e) => { cache.delete(key); throw e; }));
+  return cache.get(key);
+}
+
+// The dataset's files at its latest commit: one per (neuronx-cc, library version)
+// pair, and one selection per library.
+async function loadIndex() {
+  const info = await (await fetchOk(`${HUB}/api/datasets/${DATASET}`)).json();
+  const pairs = [];
+  const selections = new Map();
+  for (const { rfilename: path } of info.siblings) {
+    const pair = path.match(/^data\/neuronxcc-([^/]+)\/(.+)-([^-/]+)\.parquet$/);
+    if (pair) pairs.push({ sdk: pair[1], library: pair[2], version: pair[3], path });
+    const selection = path.match(/^selection\/(.+)\.csv$/);
+    if (selection) selections.set(selection[1], path);
+  }
+  return { sha: info.sha, pairs, selections };
+}
+
+const index = await loadIndex().catch((e) => e);
+const fileUrl = (path) => `${HUB}/datasets/${DATASET}/resolve/${index.sha}/${encodePath(path)}`;
+
+const loadRuns = (path) => cached(path, async () =>
+  parquetReadObjects({ file: await (await fetchOk(fileUrl(path))).arrayBuffer() }));
+
+// Each model's position in a selection, best-ranked first.
+const loadSelection = (path) => cached(path, async () => {
+  const [header, ...lines] = (await (await fetchOk(fileUrl(path))).text()).trim().split("\n");
+  const column = header.split(",").indexOf("model_id");
+  return new Map(lines.map((line, rank) => [line.split(",")[column], rank]));
+});
+
+// A model's trending score, downloads and task on the Hub today.
+const loadStats = (id) => cached(`stats:${id}`, async () => {
+  const response = await fetch(`${HUB}/api/models/${encodePath(id)}?${STATS_QUERY}`);
+  if (response.status === 404) return NO_STATS;
+  if (!response.ok) throw new Error(`${id}: HTTP ${response.status}`);
+  const model = await response.json();
+  return {
+    trending: model.trendingScore ?? 0,
+    downloads: model.downloads ?? 0,
+    task: model.pipeline_tag ?? "unknown",
+  };
+}).catch(() => NO_STATS);
+
+// Newest first. A version that is not a release, such as a git commit pin,
+// comes before the releases.
+function newestFirst(a, b) {
+  const release = (v) => v.match(/^\d+(?:\.\d+)+/)?.[0].split(".").map(Number);
+  const [ra, rb] = [release(a), release(b)];
+  if (!ra || !rb) return Boolean(ra) - Boolean(rb) || a.localeCompare(b);
+  for (let i = 0; i < Math.max(ra.length, rb.length); i++) {
+    const d = (rb[i] ?? 0) - (ra[i] ?? 0);
+    if (d) return d;
+  }
+  // A pre-release, such as 5.21.0rc1, is older than its release.
+  const pre = (v) => /^\d+(?:\.\d+)+(?:a|b|rc|\.?dev)/.test(v);
+  return pre(a) - pre(b);
+}
+
+const badge = (result) => `${result === "PASS" ? "✅" : "❌"} ${result}`;
+const memory = (run) => run.hbm_peak_gb == null ? ""
+  : `${run.hbm_peak_gb.toFixed(2)} / ${Number(run.hbm_capacity_gb.toFixed(1))}`;
+const day = (date) => new Date(date).toISOString().slice(0, 10);
+
+const tabs = document.getElementById("tabs");
+const panel = document.getElementById("panel");
+const dialog = document.getElementById("run");
+const state = new Map(LIBRARIES.map((library) =>
+  [library, { order: ORDERS[0], sdk: null, version: null, hiddenTasks: new Set() }]));
+let active = LIBRARIES[0];
+let rendering = 0;
+
+function renderTabs() {
+  tabs.replaceChildren(...LIBRARIES.map((library) => h("button", {
+    role: "tab",
+    "aria-selected": String(library === active),
+    onclick: () => { active = library; renderTabs(); renderPanel(); },
+  }, library)));
+}
+
+async function renderPanel() {
+  const render = ++rendering;
+  if (index instanceof Error) {
+    panel.replaceChildren(h("p", { class: "status" }, `Could not read the dataset: ${index.message}`));
+    return;
+  }
+  const pairs = index.pairs.filter((p) => p.library === active);
+  if (!pairs.length) {
+    panel.replaceChildren(h("p", { class: "status" }, "No records yet."));
+    return;
+  }
+  const s = state.get(active);
+  const sdks = [...new Set(pairs.map((p) => p.sdk))].sort(newestFirst);
+  if (!sdks.includes(s.sdk)) s.sdk = sdks[0];
+  const versions = pairs.filter((p) => p.sdk === s.sdk).map((p) => p.version).sort(newestFirst);
+  if (!versions.includes(s.version)) s.version = versions[0];
+
+  const select = (label, key, options, onchange) => h("label", {}, label, h("select", {
+    onchange: (e) => { s[key] = e.target.value; onchange?.(); renderPanel(); },
+  }, options.map((o) => h("option", { value: o, selected: o === s[key] }, o))));
+  const tasks = h("div", { class: "tasks", role: "group", "aria-label": "Tasks" }, h("span", {}, "Tasks"));
+  const results = h("div", { class: "results" }, h("p", { class: "status" }, "Loading…"));
+  panel.replaceChildren(
+    h("div", { class: "controls" },
+      select("Order", "order", ORDERS),
+      select("SDK (neuronx-cc)", "sdk", sdks, () => { s.version = null; }),
+      select(active, "version", versions)),
+    tasks,
+    results);
+
+  let runs, rank, stats;
+  try {
+    const selection = index.selections.get(active);
+    [runs, rank] = await Promise.all([
+      loadRuns(pairs.find((p) => p.sdk === s.sdk && p.version === s.version).path),
+      selection ? loadSelection(selection) : new Map(),
+    ]);
+    stats = new Map(await Promise.all(runs.map(async (run) => [run.model_id, await loadStats(run.model_id)])));
+  } catch (e) {
+    if (render === rendering) results.replaceChildren(h("p", { class: "status" }, `Could not load the results: ${e.message}`));
+    return;
+  }
+  if (render !== rendering) return;
+
+  const task = (run) => stats.get(run.model_id).task;
+  const renderResults = () => {
+    const order = {
+      selected: (a, b) => (rank.get(a.model_id) ?? Infinity) - (rank.get(b.model_id) ?? Infinity),
+      trending: (a, b) => stats.get(b.model_id).trending - stats.get(a.model_id).trending
+        || stats.get(b.model_id).downloads - stats.get(a.model_id).downloads,
+      downloads: (a, b) => stats.get(b.model_id).downloads - stats.get(a.model_id).downloads,
+    }[s.order];
+    const shown = runs.filter((run) => !s.hiddenTasks.has(task(run)))
+      .sort((a, b) => order(a, b) || a.model_id.localeCompare(b.model_id) || a.tp - b.tp);
+    const counts = new Map();
+    for (const run of shown) counts.set(run.result, (counts.get(run.result) ?? 0) + 1);
+    const failures = [...counts].filter(([result]) => result !== "PASS").sort(([a], [b]) => a.localeCompare(b));
+    results.replaceChildren(
+      h("p", { class: "summary" },
+        h("strong", {}, `${counts.get("PASS") ?? 0} of ${shown.length}`), " models pass",
+        failures.map(([result, n]) => ` · ${badge(result)}: ${n}`)),
+      h("div", { class: "scroll" }, h("table", {},
+        h("thead", {}, h("tr", {}, COLUMNS.map((c) => h("th", {}, c)))),
+        h("tbody", {}, shown.map((run) => h("tr", {
+          tabindex: 0,
+          onclick: () => showRun(run),
+          onkeydown: (e) => { if (e.key === "Enter") showRun(run); },
+        },
+        h("td", {}, h("code", {}, run.model_id)),
+        h("td", {}, run.runner),
+        h("td", { class: "num" }, run.tp),
+        h("td", { class: "result" }, badge(run.result)),
+        h("td", { class: "num" }, run.wall_s ?? ""),
+        h("td", { class: "num" }, memory(run)),
+        h("td", { class: "notes" }, run.notes ?? "")))))));
+  };
+  tasks.append(...[...new Set(runs.map(task))].sort().map((t) => h("label", {},
+    h("input", {
+      type: "checkbox",
+      checked: !s.hiddenTasks.has(t),
+      onchange: (e) => { if (e.target.checked) s.hiddenTasks.delete(t); else s.hiddenTasks.add(t); renderResults(); },
+    }),
+    t)));
+  renderResults();
+}
+
+let scriptUrl;
+function showRun(run) {
+  URL.revokeObjectURL(scriptUrl);
+  scriptUrl = URL.createObjectURL(new Blob([run.run_py], { type: "text/x-python" }));
+  const pip = run.run_py.match(/^#   (pip install .*)$/m)?.[1];
+  const stack = [
+    ["neuronx-cc", run.neuronx_cc], ["torch-neuronx", run.torch_neuronx], ["torch", run.torch],
+    ["nki", run.nki], ["Python", run.python], ["Neuron driver", run.neuron_driver],
+  ].filter(([, version]) => version);
+  dialog.replaceChildren(h("div", { class: "dialog" },
+    h("form", { method: "dialog" }, h("button", { class: "close", "aria-label": "Close" }, "×")),
+    h("h2", {}, h("a", { href: `${HUB}/${run.model_id}`, target: "_blank", rel: "noopener" }, run.model_id)),
+    h("p", {}, `${badge(run.result)} · TP=${run.tp} · ${run.runner} · ${run.library} ${run.library_version}`
+      + ` · tested ${day(run.tested_at)}`),
+    h("h3", {}, "Run it"),
+    h("p", {}, "On a Trainium2 (trn2) instance with this Neuron stack, for example in the AWS Neuron"
+      + " Deep Learning Container:"),
+    h("dl", {}, stack.map(([name, version]) => [h("dt", {}, name), h("dd", {}, h("code", {}, version))])),
+    h("ol", {},
+      pip && h("li", {}, "Install the packages the script adds:", h("pre", {}, pip)),
+      h("li", {}, "Optionally, skip compilation with the graphs this compiler already built:",
+        h("pre", {}, `hf buckets sync ${NEFF_CACHE}/neuronxcc-${run.neuronx_cc} /tmp/neff_cache`)),
+      h("li", {}, "Download ", h("a", { href: scriptUrl, download: "run.py" }, "run.py"), " and run it",
+        run.tp > 1 ? ". It launches its own torch.distributed ranks:" : ":", h("pre", {}, "python3 run.py"))),
+    run.error && [h("h3", {}, "Error"), h("pre", { class: "error" }, run.error)],
+    h("details", {}, h("summary", {}, "run.py"), h("pre", {}, run.run_py))));
+  dialog.showModal();
+}
+dialog.addEventListener("click", (e) => { if (e.target === dialog) dialog.close(); });
+
+renderTabs();
+renderPanel();

index.html

@@ -1,19 +1,115 @@
 <!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">
+<title>torch-neuronx model support</title>
+<style>
+:root {
+  color-scheme: light dark;
+  --bg: #ffffff;
+  --fg: #1f2328;
+  --muted: #59636e;
+  --border: #d1d9e0;
+  --stripe: #f6f8fa;
+  --hover: #ddeeff;
+  --accent: #0969da;
+  --code: #eff1f3;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d1117;
+    --fg: #e6edf3;
+    --muted: #9198a1;
+    --border: #3d444d;
+    --stripe: #151b23;
+    --hover: #1c2b41;
+    --accent: #4493f8;
+    --code: #262c36;
+  }
+}
+body {
+  margin: 0 auto;
+  max-width: 1280px;
+  padding: 16px;
+  background: var(--bg);
+  color: var(--fg);
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+}
+a { color: var(--accent); }
+code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
+h1 { font-size: 24px; margin: 8px 0; }
+.intro { color: var(--muted); max-width: 90ch; }
+[role=tablist] { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0; overflow-x: auto; }
+[role=tab] {
+  background: none;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  margin-bottom: -1px;
+  padding: 8px 16px;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+[role=tab][aria-selected=true] { background: var(--bg); border-color: var(--border); color: var(--fg); font-weight: 600; }
+.controls { display: flex; flex-wrap: wrap; gap: 12px 24px; }
+.controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
+select {
+  font: inherit;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+}
+.tasks { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 12px 0; }
+.tasks > span { color: var(--muted); font-size: 12px; }
+.tasks label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
+.status { color: var(--muted); }
+.scroll { overflow-x: auto; }
+table { border-collapse: collapse; width: 100%; min-width: 960px; }
+th, td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; vertical-align: top; }
+th { font-weight: 600; white-space: nowrap; }
+tbody tr { cursor: pointer; }
+tbody tr:nth-child(even) { background: var(--stripe); }
+tbody tr:hover, tbody tr:focus-visible { background: var(--hover); outline: none; }
+td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+td.result { white-space: nowrap; }
+td.notes { word-break: break-word; }
+dialog {
+  width: min(900px, calc(100vw - 32px));
+  max-height: calc(100vh - 64px);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  color: var(--fg);
+}
+dialog::backdrop { background: rgb(0 0 0 / 0.5); }
+.dialog { padding: 16px 24px; }
+.dialog h2 { margin: 0 32px 4px 0; font-size: 18px; overflow-wrap: anywhere; }
+.close { float: right; border: none; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
+pre { background: var(--code); padding: 8px 12px; border-radius: 6px; overflow-x: auto; }
+pre.error { white-space: pre-wrap; overflow-wrap: anywhere; }
+dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 8px 0; }
+dt { color: var(--muted); }
+dd { margin: 0; overflow-wrap: anywhere; }
+summary { cursor: pointer; color: var(--accent); margin: 12px 0 4px; }
+</style>
+<script type="module" src="app.js"></script>
+</head>
+<body>
+<h1>torch-neuronx model support</h1>
+<p class="intro">
+  Which Hugging Face Hub models run unmodified on AWS Trainium through the native PyTorch backend
+  <a href="https://github.com/aws-neuron/torch-neuronx">torch-neuronx</a>. Select a model to see how
+  to run it. The <a href="https://huggingface.co/datasets/aws-neuron/torch-neuronx-model-support">dataset
+  card</a> describes each test and what each result means.
+</p>
+<nav id="tabs" role="tablist"></nav>
+<main id="panel"><p class="status">Loading…</p></main>
+<dialog id="run"></dialog>
+</body>
 </html>