Spaces:

aminediroHF
/

delta-weight-sync-diff

Running

App Files Files Community

aminediroHF HF Staff commited on May 22

Commit

daa5370

verified ·

1 Parent(s): 51b06ea

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

README.md +6 -5
index.html +659 -18

README.md CHANGED Viewed

@@ -1,10 +1,11 @@
 ---
-title: Delta Weight Sync Diff
-emoji: 💻
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Delta Weight Sync · Diff Transfer
+emoji: 🧬
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+short_description: End-to-end animation of one weight sync, delta vs NCCL
 ---
+Companion figure for the [Delta Weight Sync blogpost](https://huggingface.co/blog/aminediroHF/delta-weight-sync). Source PR: [huggingface/trl#5417](https://github.com/huggingface/trl/pull/5417).

index.html CHANGED Viewed

@@ -1,19 +1,660 @@
-<!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>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Delta weight transfer</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: #fff;
+    color: #1a1a2e;
+    display: flex;
+    justify-content: center;
+    padding: 24px 16px;
+  }
+  .container { width: 100%; max-width: 820px; }
+  h2 { font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.2px; margin-bottom: 2px; }
+  p.sub { font-size: 12px; color: #6b7280; margin-bottom: 18px; line-height: 1.45; }
+  .controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 12px 14px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+  .controls .group { display: flex; align-items: center; gap: 8px; }
+  .controls label { font-size: 11.5px; font-weight: 600; color: #334155; }
+  .toggle {
+    display: inline-flex;
+    background: #fff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .toggle button {
+    font-size: 11px;
+    padding: 5px 11px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    color: #475569;
+    font-family: inherit;
+  }
+  .toggle button.active { background: #1a1a2e; color: #fff; }
+  .play {
+    margin-left: auto;
+    font-size: 11.5px;
+    padding: 6px 14px;
+    background: #4a90d9;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 700;
+    font-family: inherit;
+  }
+  .play:hover { background: #3b7ec0; }
+  .play.playing { background: #dc2626; }
+  .stage {
+    background: #fafafa;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 18px;
+    margin-bottom: 14px;
+  }
+  svg.stage-svg { display: block; width: 100%; height: 420px; overflow: visible; }
+  .stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+    margin-top: 12px;
+  }
+  .stat {
+    background: #fafafa;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 10px 12px;
+  }
+  .stat .lbl { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
+  .stat .val { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: #0f172a; margin-top: 3px; }
+  .stat.delta .val { color: #16a34a; }
+  .stat.pause .val { color: #dc2626; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h2>One sync, end to end (frontier-scale model)</h2>
+  <p class="sub">
+    Llama-3.1-405B in bf16 is 810 GB on disk. At RL learning rates,
+    <a href="https://arxiv.org/html/2602.03839v2" target="_blank" style="color: #4a90d9;">PULSE (Mihai &amp; Belilovsky)</a>
+    reports ~99% per-step bf16 sparsity, so the actual delta is on the order of ~6 GB. Watch the two modes side by side.
+  </p>
+  <div class="controls">
+    <div class="group">
+      <label>mode</label>
+      <div class="toggle" id="modeToggle">
+        <button class="active" data-mode="delta">delta + bucket</button>
+        <button data-mode="nccl">NCCL broadcast</button>
+      </div>
+    </div>
+    <button class="play" id="playBtn">▶ play</button>
+  </div>
+  <div class="stage">
+    <svg class="stage-svg" id="stage" viewBox="0 0 820 420" preserveAspectRatio="xMidYMid meet"></svg>
+  </div>
+  <div class="stats">
+    <div class="stat">
+      <div class="lbl">payload sent</div>
+      <div class="val" id="statPayload">— MB</div>
+    </div>
+    <div class="stat pause">
+      <div class="lbl">inference paused</div>
+      <div class="val" id="statPause">— s</div>
+    </div>
+    <div class="stat delta">
+      <div class="lbl">reduction vs full</div>
+      <div class="val" id="statReduction">—</div>
+    </div>
+  </div>
+</div>
+<script>
+const svg = document.getElementById('stage');
+const NS = 'http://www.w3.org/2000/svg';
+let mode = 'delta';
+let playing = false;
+let rafId = null;
+let startMs = null;
+function el(tag, attrs = {}, parent = svg) {
+  const e = document.createElementNS(NS, tag);
+  for (const k in attrs) e.setAttribute(k, attrs[k]);
+  parent.appendChild(e);
+  return e;
+}
+// ===== Layout =====
+const TRAINER = { x: 40,  y: 70, gridX: 60,  gridY: 140, cell: 8, N: 16 };
+const REPLICA = { x: 640, y: 70, gridX: 660, gridY: 140, cell: 8, N: 16 };
+const BUCKET  = { x: 355, y: 110, w: 110, h: 200 };
+const STRIP   = { cell: 9, gap: 1, yTrainer: 290, yBucket: 220, yReplica: 290 };
+// ===== Cell model =====
+// 16x16 = 256 cells. PULSE paper (arXiv:2602.03839) reports ~99% mean sparsity per step at RL
+// learning rates, so well under 1% of bf16 elements actually flip. We show ~4 cells = 1.5% so
+// the dots are visible without overstating it.
+let cells = [];
+let changed = [];
+const CHANGED_FRAC = 4 / 256;
+function initCells() {
+  cells = [];
+  changed = [];
+  // deterministic-ish random for repeatability across replays
+  const N = TRAINER.N;
+  const flips = new Set();
+  while (flips.size < Math.round(N * N * CHANGED_FRAC)) {
+    flips.add(Math.floor(Math.random() * N * N));
+  }
+  let packIdx = 0;
+  for (let r = 0; r < N; r++) {
+    for (let c = 0; c < N; c++) {
+      const idx = r * N + c;
+      const isChanged = flips.has(idx);
+      const cell = { idx, row: r, col: c, changed: isChanged, packedIdx: -1 };
+      if (isChanged) {
+        cell.packedIdx = packIdx++;
+        changed.push(cell);
+      }
+      cells.push(cell);
+    }
+  }
+}
+// ===== Position helpers =====
+function gridPos(side, row, col) {
+  const g = (side === 'trainer') ? TRAINER : REPLICA;
+  return { x: g.gridX + col * g.cell, y: g.gridY + row * g.cell };
+}
+function stripPos(loc, packedIdx) {
+  const stripWidth = changed.length * (STRIP.cell + STRIP.gap);
+  let cx;
+  if (loc === 'trainer') cx = TRAINER.gridX + TRAINER.N * TRAINER.cell / 2;
+  else if (loc === 'bucket') cx = BUCKET.x + BUCKET.w / 2;
+  else cx = REPLICA.gridX + REPLICA.N * REPLICA.cell / 2;
+  const x0 = cx - stripWidth / 2;
+  let y;
+  if (loc === 'trainer') y = STRIP.yTrainer;
+  else if (loc === 'bucket') y = STRIP.yBucket;
+  else y = STRIP.yReplica;
+  return { x: x0 + packedIdx * (STRIP.cell + STRIP.gap), y };
+}
+function lerp(a, b, t) { return a + (b - a) * t; }
+function ease(t) { return t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2; }
+function lerpPt(p, q, t) { const e = ease(t); return { x: lerp(p.x, q.x, e), y: lerp(p.y, q.y, e) }; }
+// ===== Timeline =====
+// Each phase has a name, duration, and (implicit) animations.
+const DELTA_PHASES = [
+  { name: 'idle',     dur: 400, title: 'idle' },
+  { name: 'step',     dur: 700, title: '1. optimizer step  ·  ~5% of bf16 elements flip' },
+  { name: 'extract',  dur: 1100, title: '2. pack changed elements into a sparse safetensors patch' },
+  { name: 'upload',   dur: 900, title: '3. upload patch to HF bucket (inference still serving)' },
+  { name: 'settle',   dur: 500, title: '4. patch sits in the bucket' },
+  { name: 'pause',    dur: 500, title: '5. pause inference, signal /update_weights' },
+  { name: 'download', dur: 900, title: '6. replica pulls the patch from the bucket' },
+  { name: 'unpack',   dur: 1100, title: '7. unpack: indices route values back to their positions' },
+  { name: 'resume',   dur: 500, title: '8. resume inference' },
+];
+const NCCL_PHASES = [
+  { name: 'idle',     dur: 400, title: 'idle' },
+  { name: 'step',     dur: 700, title: '1. optimizer step' },
+  { name: 'pause',    dur: 400, title: '2. pause inference (every replica blocks)' },
+  { name: 'clone',    dur: 600, title: '3. serialize the entire model' },
+  { name: 'broadcast',dur: 1800, title: '4. NCCL broadcast: 810 GB across the wire' },
+  { name: 'apply',    dur: 700, title: '5. apply all weights on the replica' },
+  { name: 'resume',   dur: 500, title: '6. resume inference' },
+];
+function phasesFor(mode) { return mode === 'delta' ? DELTA_PHASES : NCCL_PHASES; }
+function phaseAtTime(phases, t) {
+  let acc = 0;
+  for (let i = 0; i < phases.length; i++) {
+    if (t < acc + phases[i].dur) {
+      return { phase: phases[i], local: (t - acc) / phases[i].dur, idx: i };
+    }
+    acc += phases[i].dur;
+  }
+  return { phase: phases[phases.length - 1], local: 1, idx: phases.length - 1 };
+}
+function totalDuration(phases) { return phases.reduce((s, p) => s + p.dur, 0); }
+// ===== Rendering =====
+function drawDefs() {
+  const defs = el('defs');
+  defs.innerHTML = `
+    <marker id="ah-up" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+      <path d="M0,0 L8,4 L0,8 Z" fill="#16a34a"/>
+    </marker>
+    <marker id="ah-down" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+      <path d="M0,0 L8,4 L0,8 Z" fill="#4a90d9"/>
+    </marker>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="2" result="b"/>
+      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  `;
+}
+function drawNodeBoxes(opts) {
+  const { trainerActive, replicaPaused } = opts;
+  // Trainer
+  el('rect', {
+    x: TRAINER.x, y: TRAINER.y, width: 200, height: 230, rx: 8,
+    fill: '#fff', stroke: trainerActive ? '#16a34a' : '#94a3b8', 'stroke-width': 1.5
+  });
+  el('text', { x: TRAINER.x + 12, y: TRAINER.y + 20, 'font-size': 12, 'font-weight': 700, fill: '#1a1a2e' })
+    .textContent = 'trainer';
+  el('text', { x: TRAINER.x + 12, y: TRAINER.y + 36, 'font-size': 9, fill: '#64748b', 'font-family': 'JetBrains Mono, monospace' })
+    .textContent = 'Llama-3.1-405B · bf16';
+  el('text', { x: TRAINER.x + 12, y: TRAINER.y + 50, 'font-size': 9, fill: '#64748b', 'font-family': 'JetBrains Mono, monospace' })
+    .textContent = '405B params · 810 GB';
+  // Replica
+  el('rect', {
+    x: REPLICA.x, y: REPLICA.y, width: 160, height: 230, rx: 8,
+    fill: replicaPaused ? '#fef2f2' : '#fff',
+    stroke: replicaPaused ? '#dc2626' : '#94a3b8',
+    'stroke-width': 1.5
+  });
+  el('text', { x: REPLICA.x + 12, y: REPLICA.y + 20, 'font-size': 12, 'font-weight': 700, fill: '#1a1a2e' })
+    .textContent = 'vLLM rollout';
+  el('text', { x: REPLICA.x + 12, y: REPLICA.y + 36, 'font-size': 9, fill: '#64748b', 'font-family': 'JetBrains Mono, monospace' })
+    .textContent = replicaPaused ? 'paused' : 'serving';
+}
+function drawBucket(opts = {}) {
+  const { bx, by, bw, bh } = { bx: BUCKET.x, by: BUCKET.y, bw: BUCKET.w, bh: BUCKET.h };
+  // bottom ellipse first
+  el('ellipse', { cx: bx + bw/2, cy: by + bh, rx: bw/2, ry: 12, fill: '#dbeafe', stroke: '#4a90d9', 'stroke-width': 1.5 });
+  el('rect',    { x: bx, y: by, width: bw, height: bh, fill: '#eff6ff', stroke: '#4a90d9', 'stroke-width': 1.5 });
+  el('ellipse', { cx: bx + bw/2, cy: by + bh, rx: bw/2, ry: 12, fill: '#dbeafe', stroke: '#4a90d9', 'stroke-width': 1.5, opacity: 0.4 });
+  el('ellipse', { cx: bx + bw/2, cy: by, rx: bw/2, ry: 12, fill: '#fff', stroke: '#4a90d9', 'stroke-width': 1.5 });
+  el('text', { x: bx + bw/2, y: by + 38, 'text-anchor': 'middle', 'font-size': 11, 'font-weight': 700, fill: '#1e40af' })
+    .textContent = 'HF bucket';
+  el('text', { x: bx + bw/2, y: by + 54, 'text-anchor': 'middle', 'font-size': 9, fill: '#1e40af', 'font-family': 'JetBrains Mono, monospace' })
+    .textContent = 'Xet';
+}
+function drawGridFill(side, predicate, color, opacity = 1) {
+  const g = (side === 'trainer') ? TRAINER : REPLICA;
+  for (const c of cells) {
+    if (!predicate(c)) continue;
+    el('rect', {
+      x: g.gridX + c.col * g.cell + 0.5,
+      y: g.gridY + c.row * g.cell + 0.5,
+      width: g.cell - 1,
+      height: g.cell - 1,
+      fill: color,
+      opacity
+    });
+  }
+}
+function drawGridFrame(side) {
+  const g = (side === 'trainer') ? TRAINER : REPLICA;
+  const W = g.cell * g.N;
+  el('rect', {
+    x: g.gridX - 1, y: g.gridY - 1, width: W + 2, height: W + 2,
+    fill: 'none', stroke: '#cbd5e1', 'stroke-width': 1, rx: 2
+  });
+}
+function drawFlyingCells(localT, fromLoc, toLoc, applied=false) {
+  // Each changed cell at lerp(from, to, localT)
+  for (const c of changed) {
+    let p0, p1;
+    if (fromLoc.kind === 'grid') p0 = gridPos(fromLoc.side, c.row, c.col);
+    else p0 = stripPos(fromLoc.loc, c.packedIdx);
+    if (toLoc.kind === 'grid') p1 = gridPos(toLoc.side, c.row, c.col);
+    else p1 = stripPos(toLoc.loc, c.packedIdx);
+    const p = lerpPt(p0, p1, localT);
+    const sz = lerp(
+      fromLoc.kind === 'grid' ? TRAINER.cell - 1 : STRIP.cell,
+      toLoc.kind === 'grid' ? REPLICA.cell - 1 : STRIP.cell,
+      localT
+    );
+    el('rect', {
+      x: p.x + 0.5, y: p.y + 0.5,
+      width: sz, height: sz,
+      fill: applied ? '#16a34a' : '#dc2626',
+      filter: 'url(#glow)'
+    });
+  }
+}
+function drawStrip(loc, label, sizeLabel) {
+  if (!changed.length) return;
+  const stripWidth = changed.length * (STRIP.cell + STRIP.gap);
+  const first = stripPos(loc, 0);
+  const last = stripPos(loc, changed.length - 1);
+  // Frame
+  el('rect', {
+    x: first.x - 3, y: first.y - 3,
+    width: (last.x - first.x) + STRIP.cell + 6, height: STRIP.cell + 6,
+    fill: '#fff', stroke: '#16a34a', 'stroke-width': 1.5, rx: 2
+  });
+  // Cells
+  for (const c of changed) {
+    const p = stripPos(loc, c.packedIdx);
+    el('rect', {
+      x: p.x + 0.5, y: p.y + 0.5,
+      width: STRIP.cell - 1, height: STRIP.cell - 1,
+      fill: '#dc2626'
+    });
+  }
+  // Label below
+  const cx = first.x + (last.x - first.x + STRIP.cell) / 2;
+  if (label) {
+    el('text', {
+      x: cx, y: first.y + STRIP.cell + 16,
+      'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, fill: '#15803d',
+      'font-family': 'JetBrains Mono, monospace'
+    }).textContent = label;
+  }
+  if (sizeLabel) {
+    el('text', {
+      x: cx, y: first.y - 6,
+      'text-anchor': 'middle', 'font-size': 9.5, 'font-weight': 700, fill: '#15803d',
+      'font-family': 'JetBrains Mono, monospace'
+    }).textContent = sizeLabel;
+  }
+}
+function drawFlyingStrip(t, locA, locB, sizeLabel) {
+  // Group flying with cells inside
+  const stripWidth = changed.length * (STRIP.cell + STRIP.gap);
+  const a = stripPos(locA, 0);
+  const b = stripPos(locB, 0);
+  const p = lerpPt(a, b, t);
+  // Frame
+  el('rect', {
+    x: p.x - 3, y: p.y - 3,
+    width: stripWidth + 6, height: STRIP.cell + 6,
+    fill: '#fff', stroke: '#16a34a', 'stroke-width': 1.5, rx: 2, filter: 'url(#glow)'
+  });
+  // Cells
+  for (let i = 0; i < changed.length; i++) {
+    el('rect', {
+      x: p.x + i * (STRIP.cell + STRIP.gap) + 0.5, y: p.y + 0.5,
+      width: STRIP.cell - 1, height: STRIP.cell - 1,
+      fill: '#dc2626'
+    });
+  }
+  // Label
+  if (sizeLabel) {
+    el('text', {
+      x: p.x + stripWidth / 2, y: p.y - 6,
+      'text-anchor': 'middle', 'font-size': 9.5, 'font-weight': 700, fill: '#15803d',
+      'font-family': 'JetBrains Mono, monospace'
+    }).textContent = sizeLabel;
+  }
+}
+function drawMiniGrid(x, y, scale, label, opacity = 1) {
+  const N = TRAINER.N;
+  const cell = TRAINER.cell * scale;
+  const W = N * cell;
+  const g = el('g', { opacity });
+  // Frame
+  el('rect', { x: x - 2, y: y - 2, width: W + 4, height: W + 4, fill: '#fff', stroke: '#dc2626', 'stroke-width': 1.5, rx: 2, filter: 'url(#glow)' }, g);
+  for (const c of cells) {
+    const fill = c.changed ? '#dc2626' : '#cbd5e1';
+    el('rect', {
+      x: x + c.col * cell, y: y + c.row * cell,
+      width: cell - (cell > 3 ? 0.5 : 0), height: cell - (cell > 3 ? 0.5 : 0),
+      fill
+    }, g);
+  }
+  if (label) {
+    el('text', { x: x + W/2, y: y - 6, 'text-anchor': 'middle', 'font-size': 10, 'font-weight': 700, fill: '#b91c1c', 'font-family': 'JetBrains Mono, monospace' }, g)
+      .textContent = label;
+  }
+}
+// ===== Phase renderer =====
+function renderDelta(phaseInfo) {
+  const { phase, local } = phaseInfo;
+  const name = phase.name;
+  // Replica grid: cells appear green only in unpack/resume
+  const replicaApplied = (c) => {
+    if (name === 'unpack') return local > 0.85 && c.changed;
+    if (name === 'resume') return c.changed;
+    return false;
+  };
+  const replicaPaused = (name === 'pause' || name === 'download' || name === 'unpack');
+  // ---- bucket (always visible in delta mode) ----
+  drawBucket();
+  // ---- node boxes ----
+  drawNodeBoxes({ trainerActive: name === 'step', replicaPaused });
+  // ---- trainer grid frame + base cells ----
+  drawGridFrame('trainer');
+  // Always draw all gray cells (unchanged)
+  drawGridFill('trainer', c => !c.changed, '#cbd5e1');
+  // Draw changed cells at trainer grid position ONLY if they haven't left yet
+  const changedAtTrainer = (name === 'idle' || name === 'step');
+  if (changedAtTrainer) {
+    const op = name === 'step' ? Math.min(1, local * 1.4) : 0.0;
+    drawGridFill('trainer', c => c.changed, '#dc2626', op);
+  }
+  // ---- replica grid ----
+  drawGridFrame('replica');
+  drawGridFill('replica', c => !c.changed, '#cbd5e1');
+  drawGridFill('replica', c => replicaApplied(c), '#16a34a');
+  // During unpack, draw the unchanged-replica cells where changed cells "will" land
+  if (name === 'unpack' && local <= 0.85) {
+    drawGridFill('replica', c => c.changed, '#cbd5e1');
+  } else if (name !== 'resume' && name !== 'unpack') {
+    drawGridFill('replica', c => c.changed, '#cbd5e1');
+  }
+  // ---- in-flight stuff ----
+  if (name === 'extract') {
+    // Cells fly from trainer grid (row,col) to trainer-side strip (packedIdx)
+    drawFlyingCells(local, { kind: 'grid', side: 'trainer' }, { kind: 'strip', loc: 'trainer' }, false);
+  } else if (name === 'upload') {
+    // Strip flies from trainer to bucket
+    drawFlyingStrip(local, 'trainer', 'bucket', '~6 GB');
+  } else if (name === 'settle') {
+    // Strip in bucket
+    drawStrip('bucket', 'delta.safetensors', '~6 GB');
+  } else if (name === 'pause') {
+    // Strip in bucket, replica becomes red
+    drawStrip('bucket', 'delta.safetensors', '~6 GB');
+  } else if (name === 'download') {
+    // Strip flies from bucket to replica
+    drawStrip('bucket', '', '');  // ghost in bucket
+    drawFlyingStrip(local, 'bucket', 'replica', '~6 GB');
+  } else if (name === 'unpack') {
+    if (local < 0.15) {
+      drawStrip('replica', 'delta.safetensors', '~6 GB');
+    } else {
+      // Cells fly from replica-side strip back to (row, col) in replica grid
+      const cellT = Math.min(1, (local - 0.15) / 0.85);
+      drawFlyingCells(cellT, { kind: 'strip', loc: 'replica' }, { kind: 'grid', side: 'replica' }, cellT > 0.9);
+    }
+  } else if (name === 'resume') {
+    // Apply complete
+  }
+  // ---- title ----
+  el('text', { x: 410, y: 30, 'text-anchor': 'middle', 'font-size': 12.5, 'font-weight': 700, fill: '#1a1a2e' })
+    .textContent = phase.title;
+}
+function renderNccl(phaseInfo) {
+  const { phase, local } = phaseInfo;
+  const name = phase.name;
+  const replicaPaused = (name !== 'idle' && name !== 'step' && name !== 'resume');
+  drawNodeBoxes({ trainerActive: name === 'step', replicaPaused });
+  // No bucket in NCCL: draw a "direct broadcast" hint
+  el('rect', { x: BUCKET.x - 10, y: BUCKET.y + 70, width: BUCKET.w + 20, height: 60, fill: 'transparent', stroke: 'none' });
+  if (name === 'idle' || name === 'step' || name === 'pause' || name === 'resume') {
+    el('text', { x: BUCKET.x + BUCKET.w/2, y: BUCKET.y + 110, 'text-anchor': 'middle', 'font-size': 10, fill: '#94a3b8', 'font-style': 'italic' })
+      .textContent = 'direct NCCL';
+    el('text', { x: BUCKET.x + BUCKET.w/2, y: BUCKET.y + 125, 'text-anchor': 'middle', 'font-size': 10, fill: '#94a3b8', 'font-style': 'italic' })
+      .textContent = 'no shared storage';
+  }
+  // Trainer grid
+  drawGridFrame('trainer');
+  drawGridFill('trainer', c => !c.changed, '#cbd5e1');
+  if (name === 'step') {
+    drawGridFill('trainer', c => c.changed, '#dc2626', Math.min(1, local * 1.4));
+  } else if (name !== 'idle') {
+    drawGridFill('trainer', c => c.changed, '#dc2626');
+  }
+  // Replica grid
+  drawGridFrame('replica');
+  drawGridFill('replica', c => !c.changed, '#cbd5e1');
+  if (name === 'apply' && local > 0.7) drawGridFill('replica', c => c.changed, '#16a34a');
+  else if (name === 'resume') drawGridFill('replica', c => c.changed, '#16a34a');
+  else drawGridFill('replica', c => c.changed, '#cbd5e1');
+  // In-flight: clone -> broadcast
+  // The whole grid duplicates and slides across
+  if (name === 'clone') {
+    const scale = 0.5;
+    const fx = TRAINER.x + 210, fy = TRAINER.y + 80;
+    drawMiniGrid(fx, fy, scale, '810 GB', local);
+  } else if (name === 'broadcast') {
+    const scale = 0.5;
+    const W = TRAINER.cell * TRAINER.N * scale;
+    const startX = TRAINER.x + 210;
+    const endX = REPLICA.x - 20 - W;
+    const y = TRAINER.y + 80;
+    const x = lerp(startX, endX, ease(local));
+    // Fat pipe behind
+    el('line', {
+      x1: TRAINER.x + 200, y1: TRAINER.y + 100,
+      x2: REPLICA.x, y2: REPLICA.y + 100,
+      stroke: '#dc2626', 'stroke-width': 6, opacity: 0.18, 'stroke-linecap': 'round'
+    });
+    drawMiniGrid(x, y, scale, '810 GB', 1);
+  } else if (name === 'apply') {
+    const scale = 0.5;
+    const fx = REPLICA.x - 20 - TRAINER.cell * TRAINER.N * scale;
+    const fy = TRAINER.y + 80;
+    const fade = Math.max(0, 1 - local * 1.5);
+    drawMiniGrid(fx, fy, scale, '810 GB', fade);
+  }
+  el('text', { x: 410, y: 30, 'text-anchor': 'middle', 'font-size': 12.5, 'font-weight': 700, fill: '#1a1a2e' })
+    .textContent = phase.title;
+}
+function renderAt(t) {
+  svg.innerHTML = '';
+  drawDefs();
+  const phases = phasesFor(mode);
+  const info = phaseAtTime(phases, t);
+  if (mode === 'delta') renderDelta(info);
+  else renderNccl(info);
+}
+// ===== Stats =====
+function updateStats() {
+  if (mode === 'delta') {
+    document.getElementById('statPayload').textContent = '~6 GB';
+    document.getElementById('statPause').textContent = '~2 s';
+    document.getElementById('statReduction').textContent = '135×';
+  } else {
+    document.getElementById('statPayload').textContent = '810 GB';
+    document.getElementById('statPause').textContent = '~10 s';
+    document.getElementById('statReduction').textContent = '1×';
+  }
+}
+// ===== Playback =====
+function play() {
+  if (playing) return;
+  initCells();
+  playing = true;
+  document.getElementById('playBtn').textContent = '⏸ stop';
+  document.getElementById('playBtn').classList.add('playing');
+  const phases = phasesFor(mode);
+  const total = totalDuration(phases);
+  startMs = performance.now();
+  function tick(now) {
+    if (!playing) return;
+    const t = now - startMs;
+    if (t >= total) {
+      renderAt(total - 1);
+      playing = false;
+      document.getElementById('playBtn').textContent = '↻ play again';
+      document.getElementById('playBtn').classList.remove('playing');
+      return;
+    }
+    renderAt(t);
+    rafId = requestAnimationFrame(tick);
+  }
+  rafId = requestAnimationFrame(tick);
+}
+function reset() {
+  if (rafId) cancelAnimationFrame(rafId);
+  playing = false;
+  initCells();
+  renderAt(0);
+  document.getElementById('playBtn').textContent = '▶ play';
+  document.getElementById('playBtn').classList.remove('playing');
+  updateStats();
+}
+document.getElementById('playBtn').addEventListener('click', () => {
+  if (playing) { reset(); } else { reset(); play(); }
+});
+document.getElementById('modeToggle').querySelectorAll('button').forEach(b => {
+  b.addEventListener('click', () => {
+    document.getElementById('modeToggle').querySelectorAll('button').forEach(x => x.classList.remove('active'));
+    b.classList.add('active');
+    mode = b.dataset.mode;
+    reset();
+  });
+});
+reset();
+</script>
+</body>
 </html>