Spaces:

Chunte
/

Top-Downloaded-Trending-Models

Running

App Files Files Community

Chunte HF Staff commited on 10 days ago

Commit

b42409c

verified ·

1 Parent(s): b3a8ef8

Upload index.html

Browse files

Files changed (1) hide show

index.html +1565 -18

index.html CHANGED Viewed

@@ -1,19 +1,1566 @@
-<!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>Download Gravity Field</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { width: 100%; height: 100%; overflow: hidden; background: #F6F4EF; }
+canvas { display: block; }
+#tooltip {
+  position: absolute;
+  pointer-events: none;
+  font: 14px/1.4 'SF Mono', 'Menlo', 'Consolas', monospace;
+  color: #161513;
+  text-align: center;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+#tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+#tooltip a {
+  color: #161513;
+  text-decoration: none;
+}
+</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<div id="tooltip"></div>
+<script>
+(async function () {
+// ── Constants ──────────────────────────────────────────────
+const PARTICLE_COUNT = 4000;
+const G = 1.5;
+const BASE_ANGULAR = 0.02;
+const COLOR = '#161513';
+const BG = '#F6F4EF';
+const CORE_RADIUS = 5;
+const PARTICLE_SIZE = 1.2;
+const MAX_OMEGA = 0.02;              // max angular velocity in orbit (rad/frame)
+const MAX_OMEGA_ABSORB = 0.04;       // max angular velocity during absorption spiral
+const TARGET_CAPTURE_OMEGA = 0.015;  // desired angular velocity at capture
+// Phase 0: Free Fall
+const DRAG = 0.9998;
+const SPEED_CAP = 6;
+const NEAR_BOOST_RADIUS = 300;
+const NEAR_BOOST_FACTOR = 1.2;
+// Phase 1: Outer Orbit
+const SPIRAL_FRICTION = 0.0002;
+const SPIRAL_FRICTION_VAR = 0.0001;
+const OUTER_ORBIT_DURATION_BASE = 200;
+const OUTER_ORBIT_DURATION_MASS = 400;
+// Phase 3: Fade at Ring
+const CONSUMPTION_SIZE_RATE = 0.03;
+// Phase 4: Absorption Spiral (inward to core)
+const ABSORB_CHANCE_BASE = 0.04;
+const ABSORB_CHANCE_MASS = 0.06;
+const ABSORB_RADIAL_DRAIN = 0.01;     // angular momentum drain per frame (fraction of L)
+const ABSORB_INWARD_FORCE = 0.03;     // extra inward radial pull per frame
+const ABSORB_MIN_RADIUS = 8;
+// Capture blending (Phase 0 → Phase 1 smooth transition)
+const CAPTURE_BLEND_FRAMES = 30;       // frames to blend cartesian → polar
+// Physics effects
+const PRECESSION_RATE = 0.003;
+const SLINGSHOT_BOOST = 1.15;
+const SUBSTEP_SPEED_THRESHOLD = 3;
+// Pre-simulation
+const PRE_SIM_FRAMES = 300;
+// Layout
+const SEPARATION_PAD = 60;
+const EDGE_MARGIN = 30;
+// Elastic pull (iOS-style spring)
+const ELASTIC_ZONE_MULT = 1.8;        // elastic zone = captureRadius × this
+const ELASTIC_STIFFNESS = 0.06;       // spring stiffness (0.05-0.12 = iOS feel)
+const ELASTIC_DAMPING = 0.79;         // velocity damping (lower = bouncier)
+const ELASTIC_MAX_DISP = 30;          // max px displacement from rest
+const ELASTIC_PULL_STRENGTH = 0.35;   // how strongly cursor pulls (0-1)
+const ELASTIC_FALLOFF_POW = 2;        // distance falloff exponent
+const ELASTIC_SECONDARY = 0.3;        // secondary pull for non-closest models
+// ── Canvas ─────────────────────────────────────────────────
+const canvas = document.getElementById('c');
+const ctx = canvas.getContext('2d');
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resize);
+resize();
+// ── Data Source (trending models, sorted by downloads) ─────
+const FALLBACK = [
+  { id: 'hexgrad/Kokoro-82M', downloads: 8427252, task: 'text-to-speech' },
+  { id: 'openai/gpt-oss-20b', downloads: 5541163, task: 'text-generation' },
+  { id: 'openai/gpt-oss-120b', downloads: 3477982, task: 'text-generation' },
+  { id: 'Lightricks/LTX-2', downloads: 2021784, task: 'image-to-video' },
+  { id: 'zai-org/GLM-4.7-Flash', downloads: 1751035, task: 'text-generation' },
+  { id: 'zai-org/GLM-OCR', downloads: 1240960, task: 'image-to-text' },
+  { id: 'moonshotai/Kimi-K2.5', downloads: 1006690, task: 'image-text-to-text' },
+  { id: 'Qwen/Qwen3-TTS-12Hz-1.7B-CustomVoice', downloads: 877971, task: 'text-to-speech' },
+  { id: 'nvidia/personaplex-7b-v1', downloads: 509647, task: 'audio-to-audio' },
+  { id: 'unsloth/GLM-4.7-Flash-GGUF', downloads: 395137, task: 'text-generation' }
+];
+let models;
+try {
+  // Fetch trending models, then pick the top 10 by downloads
+  const res = await fetch('https://huggingface.co/api/models?sort=trendingScore&limit=50');
+  if (!res.ok) throw new Error(res.status);
+  const data = await res.json();
+  const all = data.map(m => {
+    const fullId = m.modelId || m.id;
+    const author = fullId.includes('/') ? fullId.split('/')[0] : '';
+    return {
+      id: fullId,
+      downloads: m.downloads || 1,
+      task: m.pipeline_tag || 'unknown',
+      author: author,
+      avatarUrl: ''
+    };
+  });
+  // Sort by downloads descending and take top 10
+  all.sort((a, b) => b.downloads - a.downloads);
+  models = all.slice(0, 10);
+} catch (e) {
+  models = FALLBACK.map(m => {
+    const author = m.id.includes('/') ? m.id.split('/')[0] : '';
+    return { ...m, author: author, avatarUrl: '' };
+  });
+}
+// Fetch author avatars in parallel (non-blocking)
+const uniqueAuthors = [...new Set(models.map(m => m.author).filter(Boolean))];
+const avatarMap = {};
+await Promise.all(uniqueAuthors.map(async (author) => {
+  try {
+    const r = await fetch('https://huggingface.co/api/organizations/' + author + '/avatar');
+    if (r.ok) {
+      const json = await r.json();
+      if (json.avatarUrl) avatarMap[author] = json.avatarUrl;
+    }
+  } catch (_) {}
+}));
+for (const m of models) {
+  if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author];
+}
+// ── Mass Mapping ───────────────────────────────────────────
+const D = models.map(m => m.downloads);
+const D1 = D[0];
+const D2 = D[1];
+const dominanceRatio = D1 / D2;
+const massBase = D.map(d => Math.log(d));
+const exponent = dominanceRatio >= 1.25 ? 1.15 : 0.95;
+const massArr = massBase.map(mb => Math.pow(mb, exponent));
+const massMin = Math.min(...massArr);
+const massMax = Math.max(...massArr);
+const massRange = massMax - massMin || 1;
+const massNorm = massArr.map(m => (m - massMin) / massRange);
+// ── Per-Model Derived Values ───────────────────────────────
+const MODEL_COUNT = models.length;
+const modelOrbitBase = new Float64Array(MODEL_COUNT);
+const modelCaptureRadius = new Float64Array(MODEL_COUNT);
+for (let i = 0; i < MODEL_COUNT; i++) {
+  modelOrbitBase[i] = 30 + 180 * massNorm[i];
+  modelCaptureRadius[i] = modelOrbitBase[i] * 1.2;
+}
+// Spawn weighting — dynamic rebalancing
+const totalMassNorm = massNorm.reduce((a, b) => a + b, 0);
+const modelOrbitCount = new Float64Array(MODEL_COUNT);
+const modelTargetPop = new Float64Array(MODEL_COUNT);
+const spawnWeight = new Float64Array(MODEL_COUNT);
+let totalSpawnWeight = totalMassNorm;
+let rebalanceTimer = 0;
+const TARGET_ORBIT_FRACTION = 0.7;
+const totalTarget = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
+for (let j = 0; j < MODEL_COUNT; j++) {
+  modelTargetPop[j] = totalTarget * (massNorm[j] / totalMassNorm);
+  spawnWeight[j] = massNorm[j];
+}
+// ── Layout: Download-Weighted Central Placement ─────────────
+function computePositions() {
+  const cx = canvas.width / 2;
+  const cy = canvas.height / 2;
+  const maxR = Math.min(cx, cy) * 0.72;
+  const positions = [];
+  // Golden angle for even angular spread
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5));  // ~137.5°
+  for (let i = 0; i < MODEL_COUNT; i++) {
+    // massNorm[i] ranges 0..1 — higher = more downloads
+    // Radius: heaviest near center, lightest near edge
+    // Use sqrt to spread inner models out (avoid central clumping)
+    const radialT = 1 - massNorm[i];  // 0 for heaviest, 1 for lightest
+    const r = maxR * (0.05 + 0.95 * Math.sqrt(radialT));
+    // Golden angle spiral for angular spread
+    const angle = goldenAngle * i;
+    positions.push({
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle)
+    });
+  }
+  // Iterative separation pass — prevent overlapping capture zones
+  for (let iter = 0; iter < 200; iter++) {
+    let moved = false;
+    for (let a = 0; a < MODEL_COUNT; a++) {
+      for (let b = a + 1; b < MODEL_COUNT; b++) {
+        const dx = positions[b].x - positions[a].x;
+        const dy = positions[b].y - positions[a].y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const minDist = modelCaptureRadius[a] + modelCaptureRadius[b] + SEPARATION_PAD;
+        if (dist < minDist) {
+          const overlap = (minDist - dist) / 2;
+          const nx = dx / dist;
+          const ny = dy / dist;
+          // Heavier models resist displacement more
+          const wA = 1 - massNorm[a] * 0.7;  // heavy=0.3, light=1.0
+          const wB = 1 - massNorm[b] * 0.7;
+          const total = wA + wB;
+          positions[a].x -= nx * overlap * (wA / total);
+          positions[a].y -= ny * overlap * (wA / total);
+          positions[b].x += nx * overlap * (wB / total);
+          positions[b].y += ny * overlap * (wB / total);
+          moved = true;
+        }
+      }
+    }
+    // Pull models back toward their ideal radius from center
+    // Prevents separation pass from pushing heavy models to the edge
+    for (let i = 0; i < MODEL_COUNT; i++) {
+      const dx = positions[i].x - cx;
+      const dy = positions[i].y - cy;
+      const currentR = Math.sqrt(dx * dx + dy * dy) || 1;
+      const radialT = 1 - massNorm[i];
+      const idealR = maxR * (0.05 + 0.95 * Math.sqrt(radialT));
+      const pullStrength = 0.1;  // gentle pull back toward ideal radius
+      const targetR = currentR + (idealR - currentR) * pullStrength;
+      if (currentR > 0.1) {
+        positions[i].x = cx + (dx / currentR) * targetR;
+        positions[i].y = cy + (dy / currentR) * targetR;
+      }
+    }
+    // Edge clamping
+    for (let i = 0; i < MODEL_COUNT; i++) {
+      const r = modelCaptureRadius[i];
+      positions[i].x = Math.max(r + EDGE_MARGIN, Math.min(canvas.width - r - EDGE_MARGIN, positions[i].x));
+      positions[i].y = Math.max(r + EDGE_MARGIN, Math.min(canvas.height - r - EDGE_MARGIN, positions[i].y));
+    }
+    if (!moved) break;
+  }
+  return positions;
+}
+let positions = computePositions();
+// ── Model Data Array ───────────────────────────────────────
+const md = [];
+for (let i = 0; i < MODEL_COUNT; i++) {
+  md.push({
+    x: positions[i].x,
+    y: positions[i].y,
+    massNorm: massNorm[i],
+    captureRadius: modelCaptureRadius[i]
+  });
+}
+function syncModelData() {
+  for (let i = 0; i < MODEL_COUNT; i++) {
+    md[i].x = positions[i].x;
+    md[i].y = positions[i].y;
+  }
+}
+// ── Elastic Pull State ──────────────────────────────────────
+const elasticDx = new Float64Array(MODEL_COUNT);
+const elasticDy = new Float64Array(MODEL_COUNT);
+const elasticVx = new Float64Array(MODEL_COUNT);
+const elasticVy = new Float64Array(MODEL_COUNT);
+let cursorX = -9999;
+let cursorY = -9999;
+let cursorOnCanvas = false;
+function updateElasticPull() {
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    let targetDx = 0, targetDy = 0;
+    if (cursorOnCanvas) {
+      const restX = positions[j].x, restY = positions[j].y;
+      const dx = cursorX - restX, dy = cursorY - restY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const zone = modelCaptureRadius[j] * ELASTIC_ZONE_MULT;
+      if (dist < zone && dist > 1) {
+        const t = dist / zone;
+        const falloff = 1 - Math.pow(t, ELASTIC_FALLOFF_POW);
+        const nx = dx / dist, ny = dy / dist;
+        let pull = ELASTIC_PULL_STRENGTH * falloff * dist;
+        // iOS dock effect: only closest model gets full strength
+        let isClosest = true;
+        for (let k = 0; k < MODEL_COUNT; k++) {
+          if (k === j) continue;
+          const dxk = cursorX - positions[k].x, dyk = cursorY - positions[k].y;
+          if (dxk * dxk + dyk * dyk < dist * dist) { isClosest = false; break; }
+        }
+        if (!isClosest) pull *= ELASTIC_SECONDARY;
+        pull = Math.min(pull, ELASTIC_MAX_DISP);
+        targetDx = nx * pull;
+        targetDy = ny * pull;
+      }
+    }
+    // Damped spring physics
+    elasticVx[j] = elasticVx[j] * ELASTIC_DAMPING + (targetDx - elasticDx[j]) * ELASTIC_STIFFNESS;
+    elasticVy[j] = elasticVy[j] * ELASTIC_DAMPING + (targetDy - elasticDy[j]) * ELASTIC_STIFFNESS;
+    elasticDx[j] += elasticVx[j];
+    elasticDy[j] += elasticVy[j];
+    // Settle threshold — kill micro-oscillations
+    if (Math.abs(elasticVx[j]) < 0.01 && Math.abs(elasticDx[j]) < 0.1) {
+      elasticVx[j] = 0;
+      if (targetDx === 0) elasticDx[j] = 0;
+    }
+    if (Math.abs(elasticVy[j]) < 0.01 && Math.abs(elasticDy[j]) < 0.1) {
+      elasticVy[j] = 0;
+      if (targetDy === 0) elasticDy[j] = 0;
+    }
+    // Apply displacement to model position
+    md[j].x = positions[j].x + elasticDx[j];
+    md[j].y = positions[j].y + elasticDy[j];
+  }
+}
+// ── Model Neighbors (for perturbation) ─────────────────────
+let modelNeighbors = [];
+function computeNeighbors() {
+  modelNeighbors = [];
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    const neighbors = [];
+    for (let k = 0; k < MODEL_COUNT; k++) {
+      if (k === j) continue;
+      const dx = md[j].x - md[k].x;
+      const dy = md[j].y - md[k].y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < modelCaptureRadius[j] + modelCaptureRadius[k] + 200) {
+        neighbors.push(k);
+      }
+    }
+    modelNeighbors.push(neighbors);
+  }
+}
+computeNeighbors();
+// Frame-dragging: per-model rotation bias
+const modelRotBias = new Float64Array(MODEL_COUNT);
+// Fixed rotation direction per model (set after pre-sim, ±1)
+const modelRotDir = new Int8Array(MODEL_COUNT);
+// ── Resize Handler ─────────────────────────────────────────
+window.addEventListener('resize', () => {
+  positions = computePositions();
+  syncModelData();
+  computeNeighbors();
+  // Reset elastic state — rest positions have changed
+  elasticDx.fill(0); elasticDy.fill(0);
+  elasticVx.fill(0); elasticVy.fill(0);
+});
+// ── Particles ──────────────────────────────────────────────
+const particles = new Array(PARTICLE_COUNT);
+function spawnAtEdge(p) {
+  const w = canvas.width;
+  const h = canvas.height;
+  const edge = Math.random() * 4 | 0;
+  if (edge === 0) { p.x = Math.random() * w; p.y = 0; }
+  else if (edge === 1) { p.x = Math.random() * w; p.y = h; }
+  else if (edge === 2) { p.x = 0; p.y = Math.random() * h; }
+  else { p.x = w; p.y = Math.random() * h; }
+  // Aim at a dynamically-weighted random model with ±8° spread
+  let r = Math.random() * totalSpawnWeight;
+  let target = 0;
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    r -= spawnWeight[j];
+    if (r <= 0) { target = j; break; }
+  }
+  const dx = md[target].x - p.x;
+  const dy = md[target].y - p.y;
+  const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+  const speed = 1.0 + Math.random() * 1.0;
+  const spread = (Math.random() - 0.5) * 0.28;
+  const cosS = Math.cos(spread);
+  const sinS = Math.sin(spread);
+  const ndx = dx / dist;
+  const ndy = dy / dist;
+  p.vx = (ndx * cosS - ndy * sinS) * speed;
+  p.vy = (ndx * sinS + ndy * cosS) * speed;
+  p.size = PARTICLE_SIZE;
+  p.phase = 0;
+  p.attractorIdx = -1;
+  p.orbitRadius = 0;
+  p.angle = 0;
+  p.angularMomentum = 0;
+  p.spiralFriction = 0;
+  p.orbitTimer = 0;
+  p.orbitDuration = 0;
+  p.radialVel = 0;
+  p.blendTimer = 0;
+}
+// Initialize all particles at edges with staggered spawn frames
+for (let i = 0; i < PARTICLE_COUNT; i++) {
+  particles[i] = {
+    x: 0, y: 0, vx: 0, vy: 0, size: PARTICLE_SIZE,
+    phase: 0, attractorIdx: -1,
+    orbitRadius: 0, angle: 0,
+    angularMomentum: 0, spiralFriction: 0,
+    orbitTimer: 0, orbitDuration: 0,
+    radialVel: 0, blendTimer: 0,
+    _spawnFrame: Math.floor(Math.random() * 200)
+  };
+  spawnAtEdge(particles[i]);
+}
+// ── Capture Helper ─────────────────────────────────────────
+function captureParticle(p, j, dist) {
+  const m = md[j];
+  p.phase = 1;
+  p.attractorIdx = j;
+  p.orbitRadius = dist;
+  p.angle = Math.atan2(p.y - m.y, p.x - m.x);
+  // Angular momentum from incoming velocity
+  const radX = (p.x - m.x) / dist;
+  const radY = (p.y - m.y) / dist;
+  const vRad = p.vx * radX + p.vy * radY;
+  const vTanX = p.vx - vRad * radX;
+  const vTanY = p.vy - vRad * radY;
+  const vTan = Math.sqrt(vTanX * vTanX + vTanY * vTanY);
+  // Force orbit direction to match model's locked rotation
+  const sign = modelRotDir[j] || 1;
+  // Compute L that produces TARGET_CAPTURE_OMEGA at this radius
+  // Blend with incoming velocity for organic variation
+  const targetL = TARGET_CAPTURE_OMEGA * dist * dist;
+  const incomingL = dist * vTan;
+  const blendedL = targetL * 0.7 + Math.min(incomingL, targetL * 1.5) * 0.3;
+  p.angularMomentum = blendedL * sign;
+  // Minimum angular momentum floor
+  const minL = dist * BASE_ANGULAR * 0.5;
+  if (Math.abs(p.angularMomentum) < minL) {
+    p.angularMomentum = minL * sign;
+  }
+  // Radial velocity preserved for smooth blending (will decay during blend)
+  p.radialVel = vRad;
+  p.blendTimer = CAPTURE_BLEND_FRAMES;
+  p.spiralFriction = SPIRAL_FRICTION + (Math.random() - 0.5) * SPIRAL_FRICTION_VAR * 2;
+  // Orbit duration: heavier models hold particles longer → denser rings
+  p.orbitTimer = 0;
+  p.orbitDuration = OUTER_ORBIT_DURATION_BASE + OUTER_ORBIT_DURATION_MASS * m.massNorm;
+}
+// ── Label Bounce Deflection ────────────────────────────────
+const BOUNCE_RESTITUTION = 0.85;  // energy retained — snappy cartoon bounce
+const BOUNCE_MIN_KICK = 2.25;     // outward kick on bounce (75%)
+const BOUNCE_ORBIT_PUNCH = 3.375; // radial punch for orbiting particles (75%)
+function deflectFromLabel(p) {
+  if (!labelBounceRect || labelBounceAlpha <= 0) return;
+  const b = labelBounceRect;
+  const alpha = labelBounceAlpha;
+  // Effective zone scales with animation alpha
+  const ehw = b.hw * alpha;
+  const ehh = b.hh * alpha;
+  // Signed distance from particle to rect center
+  const dx = p.x - b.cx;
+  const dy = p.y - b.cy;
+  // Quick bounding-box rejection
+  const ax = Math.abs(dx);
+  const ay = Math.abs(dy);
+  if (ax > ehw || ay > ehh) return;
+  // Inside the bounding box — find shortest exit wall
+  const overlapX = ehw - ax;
+  const overlapY = ehh - ay;
+  // Wall normal direction (points outward from label center)
+  let nx = 0, ny = 0;
+  if (overlapX < overlapY) {
+    nx = dx >= 0 ? 1 : -1;
+    p.x += nx * (overlapX + 1);
+  } else {
+    ny = dy >= 0 ? 1 : -1;
+    p.y += ny * (overlapY + 1);
+  }
+  if (p.phase === 0) {
+    // Free-fall: reflect velocity off the wall normal with cartoon punch
+    const vDotN = p.vx * nx + p.vy * ny;
+    if (vDotN < 0) {
+      p.vx -= 2 * vDotN * nx;
+      p.vy -= 2 * vDotN * ny;
+      p.vx *= BOUNCE_RESTITUTION;
+      p.vy *= BOUNCE_RESTITUTION;
+    }
+    // Strong outward kick
+    const outV = p.vx * nx + p.vy * ny;
+    if (outV < BOUNCE_MIN_KICK) {
+      p.vx += (BOUNCE_MIN_KICK - outV) * nx;
+      p.vy += (BOUNCE_MIN_KICK - outV) * ny;
+    }
+  } else if ((p.phase === 1 || p.phase === 3 || p.phase === 4) && p.attractorIdx >= 0) {
+    // Orbiting particle: convert orbital state to cartesian, reflect, convert back
+    const m = md[p.attractorIdx];
+    const r = p.orbitRadius || 1;
+    const rawOmega = p.angularMomentum / (r * r);
+    const omega = Math.sign(rawOmega) * Math.min(Math.abs(rawOmega), MAX_OMEGA);
+    const cosA = Math.cos(p.angle);
+    const sinA = Math.sin(p.angle);
+    const vTang = omega * r;
+    const vRad = p.radialVel || 0;
+    let ovx = -sinA * vTang + cosA * vRad;
+    let ovy = cosA * vTang + sinA * vRad;
+    // Reflect velocity off wall normal
+    const vDotN = ovx * nx + ovy * ny;
+    if (vDotN < 0) {
+      ovx -= 2 * vDotN * nx;
+      ovy -= 2 * vDotN * ny;
+      ovx *= BOUNCE_RESTITUTION;
+      ovy *= BOUNCE_RESTITUTION;
+    }
+    // Cartoon punch: strong outward kick along the wall normal
+    ovx += nx * BOUNCE_ORBIT_PUNCH;
+    ovy += ny * BOUNCE_ORBIT_PUNCH;
+    // Recompute polar coordinates from new position
+    const ndx = p.x - m.x;
+    const ndy = p.y - m.y;
+    const newR = Math.sqrt(ndx * ndx + ndy * ndy) || 1;
+    const newAngle = Math.atan2(ndy, ndx);
+    const newCosA = Math.cos(newAngle);
+    const newSinA = Math.sin(newAngle);
+    // Decompose reflected velocity back to tangential + radial
+    const newVRad = ovx * newCosA + ovy * newSinA;
+    const newVTan = -ovx * newSinA + ovy * newCosA;
+    // Update polar state — the big radial kick creates a visible outward arc
+    p.orbitRadius = newR;
+    p.angle = newAngle;
+    p.angularMomentum = newVTan * newR;
+    p.radialVel = newVRad;
+    // Longer blend so the bounce arc plays out before orbit reasserts
+    if (p.phase === 1 && p.blendTimer <= 0) {
+      p.blendTimer = 30;
+    }
+  }
+}
+// ── Particle Update ────────────────────────────────────────
+function updateParticle(p, w, h) {
+  // Phase 0: Free Fall
+  if (p.phase === 0) {
+    let captured = false;
+    // Accumulate gravity from all models
+    for (let j = 0; j < MODEL_COUNT; j++) {
+      const m = md[j];
+      const dx = m.x - p.x;
+      const dy = m.y - p.y;
+      const distSq = dx * dx + dy * dy;
+      const dist = Math.sqrt(distSq);
+      if (dist < 2) continue;
+      // Gravity: inverse-square near, softened at range
+      // At long range, use 1/(dist*softDist) instead of 1/dist² to prevent stalling
+      const softDist = Math.max(dist, 200);
+      let force = m.massNorm * G / (dist * softDist);
+      if (dist < NEAR_BOOST_RADIUS) {
+        force *= 1 + NEAR_BOOST_FACTOR * (1 - dist / NEAR_BOOST_RADIUS);
+      }
+      p.vx += (dx / dist) * force;
+      p.vy += (dy / dist) * force;
+    }
+    // Drag + speed cap
+    p.vx *= DRAG;
+    p.vy *= DRAG;
+    const speedSq = p.vx * p.vx + p.vy * p.vy;
+    if (speedSq > SPEED_CAP * SPEED_CAP) {
+      const s = Math.sqrt(speedSq);
+      p.vx = (p.vx / s) * SPEED_CAP;
+      p.vy = (p.vy / s) * SPEED_CAP;
+    }
+    // Sub-stepping for fast particles
+    const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+    const steps = speed > SUBSTEP_SPEED_THRESHOLD ? 2 : 1;
+    const svx = p.vx / steps;
+    const svy = p.vy / steps;
+    for (let s = 0; s < steps; s++) {
+      p.x += svx;
+      p.y += svy;
+      // Check capture at each sub-step
+      for (let j = 0; j < MODEL_COUNT; j++) {
+        const m = md[j];
+        const dx = m.x - p.x;
+        const dy = m.y - p.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist <= m.captureRadius) {
+          captureParticle(p, j, dist);
+          captured = true;
+          break;
+        }
+      }
+      if (captured) break;
+    }
+    if (!captured) {
+      // Slingshot: if near 2+ models, boost velocity
+      let nearCount = 0;
+      for (let j = 0; j < MODEL_COUNT; j++) {
+        const dx = md[j].x - p.x;
+        const dy = md[j].y - p.y;
+        if (dx * dx + dy * dy < md[j].captureRadius * md[j].captureRadius * 2.25) {
+          nearCount++;
+        }
+      }
+      if (nearCount >= 2) {
+        const spd = Math.sqrt(p.vx * p.vx + p.vy * p.vy) || 1;
+        const boost = Math.min(SLINGSHOT_BOOST, SPEED_CAP / spd);
+        p.vx *= boost;
+        p.vy *= boost;
+      }
+      // Out of bounds respawn
+      if (p.x < -50 || p.x > w + 50 || p.y < -50 || p.y > h + 50) {
+        spawnAtEdge(p);
+      }
+    }
+    return;
+  }
+  // Phase 1: Outer Orbit
+  if (p.phase === 1) {
+    const m = md[p.attractorIdx];
+    const r = p.orbitRadius;
+    // Angular velocity from conserved angular momentum
+    const rawOmega = p.angularMomentum / (r * r);
+    const omega = Math.sign(rawOmega) * Math.min(Math.abs(rawOmega), MAX_OMEGA);
+    // Advance angle with precession
+    p.angle += omega + PRECESSION_RATE * Math.sign(omega);
+    // ── Capture blending: smooth cartesian→polar transition ──
+    // During blend, the particle still has residual radial velocity
+    // from its free-fall trajectory. Decay it over CAPTURE_BLEND_FRAMES.
+    if (p.blendTimer > 0) {
+      p.blendTimer--;
+      // Radial velocity decays smoothly toward zero
+      p.radialVel *= 0.88;
+      // Apply residual radial motion to orbit radius
+      p.orbitRadius += p.radialVel;
+    } else {
+      // Very slow inward drift (ring thickness, not spiral to core)
+      p.orbitRadius -= r * p.spiralFriction;
+    }
+    // Position from polar coordinates
+    p.x = m.x + p.orbitRadius * Math.cos(p.angle);
+    p.y = m.y + p.orbitRadius * Math.sin(p.angle);
+    // Gravitational perturbation from neighboring models
+    const neighbors = modelNeighbors[p.attractorIdx];
+    for (let ni = 0; ni < neighbors.length; ni++) {
+      const k = neighbors[ni];
+      const mk = md[k];
+      const dx = mk.x - p.x;
+      const dy = mk.y - p.y;
+      const distSq = dx * dx + dy * dy;
+      const dist = Math.sqrt(distSq);
+      if (dist < 2) continue;
+      const pertForce = mk.massNorm * G * 0.3 / distSq;
+      const cr = p.orbitRadius || 1;
+      const radX = (p.x - m.x) / cr;
+      const radY = (p.y - m.y) / cr;
+      const forceX = (dx / dist) * pertForce;
+      const forceY = (dy / dist) * pertForce;
+      const tangForce = -forceX * radY + forceY * radX;
+      p.angularMomentum += tangForce * cr * 0.5;
+    }
+    // Ejection check
+    if (p.orbitRadius > modelCaptureRadius[p.attractorIdx]) {
+      const rawEOmega = p.angularMomentum / (p.orbitRadius * p.orbitRadius);
+      const eOmega = Math.sign(rawEOmega) * Math.min(Math.abs(rawEOmega), MAX_OMEGA);
+      p.vx = -Math.sin(p.angle) * eOmega * p.orbitRadius;
+      p.vy = Math.cos(p.angle) * eOmega * p.orbitRadius;
+      p.phase = 0;
+      p.attractorIdx = -1;
+      return;
+    }
+    // Timer: transition to Phase 3 (fade at ring) or Phase 4 (absorption spiral)
+    p.orbitTimer++;
+    if (p.orbitTimer >= p.orbitDuration) {
+      const absorbChance = ABSORB_CHANCE_BASE + ABSORB_CHANCE_MASS * md[p.attractorIdx].massNorm;
+      if (Math.random() < absorbChance) {
+        // Phase 4: begin absorption — continuous from current orbital state
+        p.phase = 4;
+        p.radialVel = 0; // will build naturally from inward force
+      } else {
+        p.phase = 3;
+      }
+    }
+    return;
+  }
+  // Phase 3: Fade at Ring (particles stay near outer edge)
+  if (p.phase === 3) {
+    const m = md[p.attractorIdx];
+    // Continue orbiting at current radius (no inward spiral)
+    const rawOmega = p.angularMomentum / (p.orbitRadius * p.orbitRadius);
+    const omega = Math.sign(rawOmega) * Math.min(Math.abs(rawOmega), MAX_OMEGA);
+    p.angle += omega + PRECESSION_RATE * Math.sign(omega);
+    p.x = m.x + p.orbitRadius * Math.cos(p.angle);
+    p.y = m.y + p.orbitRadius * Math.sin(p.angle);
+    // Mass-dependent fade: lighter models shed particles faster
+    const fadeRate = CONSUMPTION_SIZE_RATE * (1 + 0.5 * (1 - m.massNorm));
+    p.size -= fadeRate;
+    if (p.size <= 0) {
+      spawnAtEdge(p);
+    }
+    return;
+  }
+  // Phase 4: Absorption Spiral (inward to core — black hole consumption)
+  // Continuous from Phase 1: same orbital physics but with energy drain
+  {
+    const m = md[p.attractorIdx];
+    // Drain angular momentum — the particle loses orbital energy
+    p.angularMomentum *= (1 - ABSORB_RADIAL_DRAIN);
+    // Radial inward velocity builds up from gravitational pull
+    p.radialVel -= ABSORB_INWARD_FORCE;
+    p.radialVel *= 0.96; // friction prevents runaway plunge
+    // Apply radial motion — orbit radius shrinks naturally
+    p.orbitRadius += p.radialVel;
+    // Clamp minimum radius
+    if (p.orbitRadius < 1) p.orbitRadius = 1;
+    // Angular velocity from (draining) angular momentum — higher cap for absorption spiral
+    const rawOmega = p.angularMomentum / (p.orbitRadius * p.orbitRadius);
+    const omega = Math.sign(rawOmega) * Math.min(Math.abs(rawOmega), MAX_OMEGA_ABSORB);
+    p.angle += omega + PRECESSION_RATE * Math.sign(omega);
+    // Position from polar coordinates (continuous from Phase 1)
+    p.x = m.x + p.orbitRadius * Math.cos(p.angle);
+    p.y = m.y + p.orbitRadius * Math.sin(p.angle);
+    // Size stays full until near core, then shrinks rapidly
+    if (p.orbitRadius < ABSORB_MIN_RADIUS * 4) {
+      p.size -= 0.05;
+    }
+    // Die when reaching core or size gone
+    if (p.orbitRadius < ABSORB_MIN_RADIUS || p.size <= 0) {
+      spawnAtEdge(p);
+    }
+  }
+}
+// ── Pre-Simulation ─────────────────────────────────────────
+for (let pre = 0; pre < PRE_SIM_FRAMES; pre++) {
+  modelRotBias.fill(0);
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = particles[i];
+    if ((p.phase === 1 || p.phase === 4) && p.attractorIdx >= 0) {
+      modelRotBias[p.attractorIdx] += Math.sign(p.angularMomentum);
+    }
+  }
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    modelRotBias[j] = Math.sign(modelRotBias[j]);
+  }
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    if (pre >= particles[i]._spawnFrame) {
+      updateParticle(particles[i], canvas.width, canvas.height);
+    }
+  }
+}
+// Lock each model's rotation direction based on pre-sim consensus
+for (let j = 0; j < MODEL_COUNT; j++) {
+  modelRotDir[j] = modelRotBias[j] !== 0 ? modelRotBias[j] : (Math.random() < 0.5 ? 1 : -1);
+}
+// ── Task Icons (filled, monochrome, with BG pill) ───────────
+const ICON_SIZE = 11.5;  // icon half-size (+15%)
+const ICON_PAD = 7;      // padding around icon for BG pill (+15%)
+const ICON_CORNER = 6;   // rounded corner radius for BG pill (+15%)
+function drawTaskIcon(ctx, x, y, task) {
+  const s = ICON_SIZE;
+  const pad = ICON_PAD;
+  // Draw BG pill (same color as screen background) to mask particles behind icon
+  ctx.save();
+  ctx.fillStyle = BG;
+  const pillW = (s + pad) * 2;
+  const pillH = (s + pad) * 2;
+  const px = x - s - pad;
+  const py = y - s - pad;
+  ctx.beginPath();
+  ctx.roundRect(px, py, pillW, pillH, ICON_CORNER);
+  ctx.fill();
+  ctx.restore();
+  // Draw filled icon
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.fillStyle = COLOR;
+  switch (task) {
+    case 'sentence-similarity':
+      // Filled chat bubble
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.8, -s * 0.55);
+      ctx.quadraticCurveTo(-s * 0.8, -s * 0.85, -s * 0.4, -s * 0.85);
+      ctx.lineTo(s * 0.4, -s * 0.85);
+      ctx.quadraticCurveTo(s * 0.8, -s * 0.85, s * 0.8, -s * 0.55);
+      ctx.lineTo(s * 0.8, -s * 0.05);
+      ctx.quadraticCurveTo(s * 0.8, s * 0.25, s * 0.4, s * 0.25);
+      ctx.lineTo(-s * 0.1, s * 0.25);
+      ctx.lineTo(-s * 0.45, s * 0.65);
+      ctx.lineTo(-s * 0.35, s * 0.25);
+      ctx.lineTo(-s * 0.4, s * 0.25);
+      ctx.quadraticCurveTo(-s * 0.8, s * 0.25, -s * 0.8, -s * 0.05);
+      ctx.closePath();
+      ctx.fill();
+      // Three dots inside
+      ctx.fillStyle = BG;
+      ctx.beginPath();
+      ctx.arc(-s * 0.3, -s * 0.3, s * 0.1, 0, Math.PI * 2);
+      ctx.arc(0, -s * 0.3, s * 0.1, 0, Math.PI * 2);
+      ctx.arc(s * 0.3, -s * 0.3, s * 0.1, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    case 'fill-mask':
+      // Filled document with mask gap
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.7, -s * 0.85, s * 1.4, s * 1.7, s * 0.15);
+      ctx.fill();
+      // Text lines (negative space)
+      ctx.fillStyle = BG;
+      ctx.fillRect(-s * 0.45, -s * 0.55, s * 0.9, s * 0.12);
+      ctx.fillRect(-s * 0.45, -s * 0.25, s * 0.3, s * 0.12);
+      // Mask gap highlight
+      ctx.fillRect(s * 0.0, -s * 0.25, s * 0.45, s * 0.12);
+      ctx.fillRect(-s * 0.45, s * 0.05, s * 0.65, s * 0.12);
+      ctx.fillRect(-s * 0.45, s * 0.35, s * 0.5, s * 0.12);
+      // Cursor blink in mask gap
+      ctx.fillStyle = COLOR;
+      ctx.fillRect(-s * 0.08, -s * 0.3, s * 0.04, s * 0.22);
+      break;
+    case 'image-classification':
+      // Filled picture frame
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.85, -s * 0.75, s * 1.7, s * 1.5, s * 0.12);
+      ctx.fill();
+      // Mountain landscape (negative space)
+      ctx.fillStyle = BG;
+      // Sun
+      ctx.beginPath();
+      ctx.arc(s * 0.35, -s * 0.3, s * 0.2, 0, Math.PI * 2);
+      ctx.fill();
+      // Mountains
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.7, s * 0.55);
+      ctx.lineTo(-s * 0.2, -s * 0.05);
+      ctx.lineTo(s * 0.05, s * 0.2);
+      ctx.lineTo(s * 0.3, 0);
+      ctx.lineTo(s * 0.7, s * 0.55);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case 'image-text-to-text':
+      // Filled eye (vision)
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.9, 0);
+      ctx.quadraticCurveTo(-s * 0.45, -s * 0.7, 0, -s * 0.7);
+      ctx.quadraticCurveTo(s * 0.45, -s * 0.7, s * 0.9, 0);
+      ctx.quadraticCurveTo(s * 0.45, s * 0.7, 0, s * 0.7);
+      ctx.quadraticCurveTo(-s * 0.45, s * 0.7, -s * 0.9, 0);
+      ctx.fill();
+      // Pupil (negative space)
+      ctx.fillStyle = BG;
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 0.32, 0, Math.PI * 2);
+      ctx.fill();
+      // Inner pupil
+      ctx.fillStyle = COLOR;
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 0.16, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    case 'audio-classification':
+      // Filled speaker with sound waves
+      // Speaker body
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.35, -s * 0.25);
+      ctx.lineTo(-s * 0.7, -s * 0.25);
+      ctx.lineTo(-s * 0.7, s * 0.25);
+      ctx.lineTo(-s * 0.35, s * 0.25);
+      ctx.lineTo(0, s * 0.6);
+      ctx.lineTo(0, -s * 0.6);
+      ctx.closePath();
+      ctx.fill();
+      // Sound arcs (thick filled arcs)
+      ctx.lineWidth = s * 0.15;
+      ctx.strokeStyle = COLOR;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.arc(s * 0.1, 0, s * 0.32, -Math.PI * 0.32, Math.PI * 0.32);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(s * 0.1, 0, s * 0.58, -Math.PI * 0.32, Math.PI * 0.32);
+      ctx.stroke();
+      break;
+    case 'text-generation':
+      // Filled pencil
+      ctx.beginPath();
+      ctx.moveTo(s * 0.55, -s * 0.85);
+      ctx.lineTo(s * 0.85, -s * 0.55);
+      ctx.lineTo(-s * 0.45, s * 0.45);
+      ctx.lineTo(-s * 0.85, s * 0.55);
+      ctx.lineTo(-s * 0.75, s * 0.85);
+      ctx.lineTo(-s * 0.55, s * 0.45);
+      ctx.closePath();
+      ctx.fill();
+      // Eraser line (negative space)
+      ctx.strokeStyle = BG;
+      ctx.lineWidth = s * 0.08;
+      ctx.beginPath();
+      ctx.moveTo(s * 0.32, -s * 0.52);
+      ctx.lineTo(s * 0.52, -s * 0.32);
+      ctx.stroke();
+      break;
+    case 'text-classification':
+      // Filled tag
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.75, -s * 0.5);
+      ctx.lineTo(s * 0.15, -s * 0.5);
+      ctx.lineTo(s * 0.75, 0);
+      ctx.lineTo(s * 0.15, s * 0.5);
+      ctx.lineTo(-s * 0.75, s * 0.5);
+      ctx.closePath();
+      ctx.fill();
+      // Hole (negative space)
+      ctx.fillStyle = BG;
+      ctx.beginPath();
+      ctx.arc(s * 0.2, 0, s * 0.13, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    case 'feature-extraction':
+      // Filled funnel
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.75, -s * 0.7);
+      ctx.lineTo(s * 0.75, -s * 0.7);
+      ctx.lineTo(s * 0.15, s * 0.1);
+      ctx.lineTo(s * 0.15, s * 0.7);
+      ctx.lineTo(-s * 0.15, s * 0.7);
+      ctx.lineTo(-s * 0.15, s * 0.1);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case 'token-classification':
+      // Filled brackets with highlight
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.8, -s * 0.6, s * 1.6, s * 1.2, s * 0.12);
+      ctx.fill();
+      ctx.fillStyle = BG;
+      ctx.fillRect(-s * 0.55, -s * 0.3, s * 0.35, s * 0.15);
+      ctx.fillRect(-s * 0.55, s * 0.0, s * 0.6, s * 0.15);
+      ctx.fillRect(-s * 0.55, s * 0.3, s * 0.45, s * 0.15);
+      break;
+    case 'question-answering':
+      // Filled question mark bubble
+      ctx.beginPath();
+      ctx.arc(0, -s * 0.1, s * 0.7, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.15, s * 0.5);
+      ctx.lineTo(0, s * 0.85);
+      ctx.lineTo(s * 0.15, s * 0.5);
+      ctx.fill();
+      ctx.fillStyle = BG;
+      ctx.font = 'bold ' + (s * 1.0) + 'px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('?', 0, -s * 0.12);
+      break;
+    case 'text-to-speech':
+      // Filled waveform / speaker with sound
+      // Mouth/megaphone shape
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.5, -s * 0.2);
+      ctx.lineTo(-s * 0.75, -s * 0.2);
+      ctx.lineTo(-s * 0.75, s * 0.2);
+      ctx.lineTo(-s * 0.5, s * 0.2);
+      ctx.lineTo(-s * 0.15, s * 0.55);
+      ctx.lineTo(-s * 0.15, -s * 0.55);
+      ctx.closePath();
+      ctx.fill();
+      // Sound waves (three arcs)
+      ctx.strokeStyle = COLOR;
+      ctx.lineCap = 'round';
+      ctx.lineWidth = s * 0.12;
+      ctx.beginPath();
+      ctx.arc(-s * 0.05, 0, s * 0.3, -Math.PI * 0.35, Math.PI * 0.35);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(-s * 0.05, 0, s * 0.52, -Math.PI * 0.35, Math.PI * 0.35);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(-s * 0.05, 0, s * 0.74, -Math.PI * 0.35, Math.PI * 0.35);
+      ctx.stroke();
+      break;
+    case 'audio-to-audio':
+      // Two waveforms with arrow between
+      // Left waveform
+      ctx.lineWidth = s * 0.12;
+      ctx.strokeStyle = COLOR;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.85, s * 0.1);
+      ctx.lineTo(-s * 0.7, -s * 0.4);
+      ctx.lineTo(-s * 0.55, s * 0.5);
+      ctx.lineTo(-s * 0.4, -s * 0.2);
+      ctx.lineTo(-s * 0.25, s * 0.1);
+      ctx.stroke();
+      // Arrow
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.1, 0);
+      ctx.lineTo(s * 0.25, 0);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(s * 0.15, -s * 0.15);
+      ctx.lineTo(s * 0.25, 0);
+      ctx.lineTo(s * 0.15, s * 0.15);
+      ctx.fill();
+      // Right waveform
+      ctx.beginPath();
+      ctx.moveTo(s * 0.35, -s * 0.1);
+      ctx.lineTo(s * 0.5, s * 0.35);
+      ctx.lineTo(s * 0.65, -s * 0.5);
+      ctx.lineTo(s * 0.8, s * 0.2);
+      ctx.stroke();
+      break;
+    case 'image-to-image':
+      // Two picture frames with arrow
+      // Left frame
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.9, -s * 0.5, s * 0.7, s * 0.7, s * 0.08);
+      ctx.fill();
+      ctx.fillStyle = BG;
+      // Mini mountain in left frame
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.82, s * 0.12);
+      ctx.lineTo(-s * 0.6, -s * 0.15);
+      ctx.lineTo(-s * 0.3, s * 0.12);
+      ctx.closePath();
+      ctx.fill();
+      // Arrow
+      ctx.fillStyle = COLOR;
+      ctx.fillRect(-s * 0.1, -s * 0.06, s * 0.3, s * 0.12);
+      ctx.beginPath();
+      ctx.moveTo(s * 0.15, -s * 0.2);
+      ctx.lineTo(s * 0.3, 0);
+      ctx.lineTo(s * 0.15, s * 0.2);
+      ctx.fill();
+      // Right frame
+      ctx.beginPath();
+      ctx.roundRect(s * 0.25, -s * 0.5, s * 0.7, s * 0.7, s * 0.08);
+      ctx.fill();
+      ctx.fillStyle = BG;
+      // Sparkle in right frame
+      ctx.beginPath();
+      ctx.moveTo(s * 0.6, -s * 0.25);
+      ctx.lineTo(s * 0.63, -s * 0.1);
+      ctx.lineTo(s * 0.75, -s * 0.07);
+      ctx.lineTo(s * 0.63, -s * 0.04);
+      ctx.lineTo(s * 0.6, s * 0.1);
+      ctx.lineTo(s * 0.57, -s * 0.04);
+      ctx.lineTo(s * 0.45, -s * 0.07);
+      ctx.lineTo(s * 0.57, -s * 0.1);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case 'image-to-video':
+      // Film frame / clapperboard
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.8, -s * 0.65, s * 1.6, s * 1.3, s * 0.12);
+      ctx.fill();
+      // Film strip holes (negative space)
+      ctx.fillStyle = BG;
+      ctx.fillRect(-s * 0.65, -s * 0.5, s * 0.12, s * 0.15);
+      ctx.fillRect(-s * 0.65, s * 0.2, s * 0.12, s * 0.15);
+      ctx.fillRect(s * 0.53, -s * 0.5, s * 0.12, s * 0.15);
+      ctx.fillRect(s * 0.53, s * 0.2, s * 0.12, s * 0.15);
+      // Play triangle (negative space)
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.2, -s * 0.3);
+      ctx.lineTo(s * 0.3, 0);
+      ctx.lineTo(-s * 0.2, s * 0.3);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case 'image-to-text':
+      // Image frame + text lines (OCR)
+      // Frame
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.85, -s * 0.65, s * 0.9, s * 0.9, s * 0.08);
+      ctx.fill();
+      ctx.fillStyle = BG;
+      // Mountain in frame
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.75, s * 0.1);
+      ctx.lineTo(-s * 0.45, -s * 0.2);
+      ctx.lineTo(-s * 0.1, s * 0.1);
+      ctx.closePath();
+      ctx.fill();
+      // Text lines
+      ctx.fillStyle = COLOR;
+      ctx.fillRect(s * 0.15, -s * 0.5, s * 0.65, s * 0.12);
+      ctx.fillRect(s * 0.15, -s * 0.2, s * 0.5, s * 0.12);
+      ctx.fillRect(s * 0.15, s * 0.1, s * 0.6, s * 0.12);
+      break;
+    case 'text-to-image':
+      // Text lines + sparkle/brush (generation)
+      // Text lines on left
+      ctx.fillRect(-s * 0.85, -s * 0.5, s * 0.6, s * 0.12);
+      ctx.fillRect(-s * 0.85, -s * 0.2, s * 0.45, s * 0.12);
+      ctx.fillRect(-s * 0.85, s * 0.1, s * 0.55, s * 0.12);
+      // Arrow
+      ctx.fillRect(-s * 0.15, -s * 0.06, s * 0.25, s * 0.12);
+      ctx.beginPath();
+      ctx.moveTo(s * 0.05, -s * 0.2);
+      ctx.lineTo(s * 0.2, 0);
+      ctx.lineTo(s * 0.05, s * 0.2);
+      ctx.fill();
+      // Star / sparkle on right
+      ctx.beginPath();
+      ctx.moveTo(s * 0.55, -s * 0.55);
+      ctx.lineTo(s * 0.6, -s * 0.2);
+      ctx.lineTo(s * 0.85, -s * 0.1);
+      ctx.lineTo(s * 0.6, 0);
+      ctx.lineTo(s * 0.55, s * 0.35);
+      ctx.lineTo(s * 0.5, 0);
+      ctx.lineTo(s * 0.25, -s * 0.1);
+      ctx.lineTo(s * 0.5, -s * 0.2);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case 'any-to-any': {
+      // Four arrows pointing outward from center (versatility)
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 0.25, 0, Math.PI * 2);
+      ctx.fill();
+      // Four directional arrows
+      const dirs = [[0, -1], [1, 0], [0, 1], [-1, 0]];
+      for (const [adx, ady] of dirs) {
+        // Arrow shaft
+        ctx.fillRect(
+          (adx === 0 ? -s * 0.06 : adx > 0 ? s * 0.3 : -s * 0.3 - s * 0.35),
+          (ady === 0 ? -s * 0.06 : ady > 0 ? s * 0.3 : -s * 0.3 - s * 0.35),
+          adx === 0 ? s * 0.12 : s * 0.35,
+          ady === 0 ? s * 0.12 : s * 0.35
+        );
+        // Arrow head
+        ctx.beginPath();
+        ctx.moveTo(adx * s * 0.5 - ady * s * 0.18, ady * s * 0.5 - (-adx) * s * 0.18);
+        ctx.lineTo(adx * s * 0.8, ady * s * 0.8);
+        ctx.lineTo(adx * s * 0.5 + ady * s * 0.18, ady * s * 0.5 + (-adx) * s * 0.18);
+        ctx.fill();
+      }
+      break;
+    }
+    case 'automatic-speech-recognition':
+      // Microphone icon
+      // Mic body
+      ctx.beginPath();
+      ctx.roundRect(-s * 0.25, -s * 0.7, s * 0.5, s * 0.8, s * 0.25);
+      ctx.fill();
+      // Mic stand arc
+      ctx.strokeStyle = COLOR;
+      ctx.lineWidth = s * 0.12;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.arc(0, -s * 0.1, s * 0.45, 0, Math.PI);
+      ctx.stroke();
+      // Stand
+      ctx.beginPath();
+      ctx.moveTo(0, s * 0.35);
+      ctx.lineTo(0, s * 0.65);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(-s * 0.25, s * 0.65);
+      ctx.lineTo(s * 0.25, s * 0.65);
+      ctx.stroke();
+      break;
+    default: {
+      // Fallback: filled gear
+      ctx.beginPath();
+      const teeth = 6;
+      const outerR = s * 0.75;
+      const innerR = s * 0.5;
+      for (let i = 0; i < teeth; i++) {
+        const a1 = (i / teeth) * Math.PI * 2;
+        const a2 = ((i + 0.3) / teeth) * Math.PI * 2;
+        const a3 = ((i + 0.5) / teeth) * Math.PI * 2;
+        const a4 = ((i + 0.8) / teeth) * Math.PI * 2;
+        if (i === 0) ctx.moveTo(Math.cos(a1) * outerR, Math.sin(a1) * outerR);
+        else ctx.lineTo(Math.cos(a1) * outerR, Math.sin(a1) * outerR);
+        ctx.lineTo(Math.cos(a2) * outerR, Math.sin(a2) * outerR);
+        ctx.lineTo(Math.cos(a3) * innerR, Math.sin(a3) * innerR);
+        ctx.lineTo(Math.cos(a4) * innerR, Math.sin(a4) * innerR);
+      }
+      ctx.closePath();
+      ctx.fill();
+      // Center hole (negative space)
+      ctx.fillStyle = BG;
+      ctx.beginPath();
+      ctx.arc(0, 0, s * 0.2, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+  }
+  ctx.restore();
+}
+// ── Render Loop ────────────────────────────────────────────
+const PS2 = PARTICLE_SIZE * 2;
+function frame() {
+  const w = canvas.width;
+  const h = canvas.height;
+  // Clear
+  ctx.fillStyle = BG;
+  ctx.fillRect(0, 0, w, h);
+  // Compute per-model rotation bias
+  modelRotBias.fill(0);
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = particles[i];
+    if ((p.phase === 1 || p.phase === 4) && p.attractorIdx >= 0) {
+      modelRotBias[p.attractorIdx] += Math.sign(p.angularMomentum);
+    }
+  }
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    modelRotBias[j] = Math.sign(modelRotBias[j]);
+  }
+  // Rebalance spawn weights every 60 frames (~1 second)
+  rebalanceTimer++;
+  if (rebalanceTimer >= 60) {
+    rebalanceTimer = 0;
+    modelOrbitCount.fill(0);
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const p = particles[i];
+      if (p.attractorIdx >= 0 && (p.phase === 1 || p.phase === 3 || p.phase === 4)) {
+        modelOrbitCount[p.attractorIdx]++;
+      }
+    }
+    let tw = 0;
+    for (let j = 0; j < MODEL_COUNT; j++) {
+      const deficit = modelTargetPop[j] - modelOrbitCount[j];
+      spawnWeight[j] = Math.max(0.01, massNorm[j] + 0.3 * (deficit / totalTarget));
+      tw += spawnWeight[j];
+    }
+    totalSpawnWeight = tw;
+  }
+  // Animate label bounce zone
+  if (hoveredModel >= 0) {
+    labelBounceAlpha = Math.min(1, labelBounceAlpha + 0.08);
+  } else {
+    labelBounceAlpha = Math.max(0, labelBounceAlpha - 0.06);
+    if (labelBounceAlpha <= 0) labelBounceRect = null;
+  }
+  // Update elastic pull (before particles read md[j].x/y)
+  updateElasticPull();
+  // Update all particles
+  const doDeflect = labelBounceAlpha > 0;
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    updateParticle(particles[i], w, h);
+    if (doDeflect) deflectFromLabel(particles[i]);
+  }
+  // ── Draw ──
+  ctx.fillStyle = COLOR;
+  ctx.strokeStyle = COLOR;
+  ctx.lineWidth = 1;
+  // Batch velocity streaks into one path
+  ctx.beginPath();
+  let hasStreaks = false;
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = particles[i];
+    if (p.size <= 0) continue;
+    // Velocity streaking for fast free-fall particles
+    if (p.phase === 0) {
+      const speedSq = p.vx * p.vx + p.vy * p.vy;
+      if (speedSq > 9) {
+        const s = Math.sqrt(speedSq);
+        const len = Math.min(s * 1.5, 6);
+        ctx.moveTo(p.x, p.y);
+        ctx.lineTo(p.x - (p.vx / s) * len, p.y - (p.vy / s) * len);
+        hasStreaks = true;
+        continue;
+      }
+    }
+    // Shrinking particles during fade (Phase 3) or final absorption (Phase 4 near core)
+    if ((p.phase === 3 || p.phase === 4) && p.size < PARTICLE_SIZE) {
+      const s2 = p.size * 2;
+      ctx.fillRect(p.x - p.size, p.y - p.size, s2, s2);
+    } else {
+      ctx.fillRect(p.x - PARTICLE_SIZE, p.y - PARTICLE_SIZE, PS2, PS2);
+    }
+  }
+  if (hasStreaks) ctx.stroke();
+  // Draw model cores last — task icons
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    drawTaskIcon(ctx, md[j].x, md[j].y, models[j].task);
+  }
+  requestAnimationFrame(frame);
+}
+requestAnimationFrame(frame);
+// ── Hover Tooltip ──────────────────────────────────────────
+function fmtTask(tag) {
+  const names = {
+    'sentence-similarity': 'Sentence Similarity',
+    'fill-mask': 'Fill-Mask',
+    'image-classification': 'Image Classification',
+    'image-text-to-text': 'Image-Text-to-Text',
+    'audio-classification': 'Audio Classification',
+    'text-generation': 'Text Generation',
+    'text-classification': 'Text Classification',
+    'feature-extraction': 'Feature Extraction',
+    'token-classification': 'Token Classification',
+    'question-answering': 'Question Answering',
+    'text2text-generation': 'Text-to-Text',
+    'automatic-speech-recognition': 'Speech Recognition',
+    'translation': 'Translation',
+    'summarization': 'Summarization',
+    'object-detection': 'Object Detection',
+    'zero-shot-classification': 'Zero-Shot Classification',
+    'text-to-speech': 'Text-to-Speech',
+    'audio-to-audio': 'Audio-to-Audio',
+    'image-to-image': 'Image-to-Image',
+    'image-to-video': 'Image-to-Video',
+    'image-to-text': 'Image-to-Text',
+    'text-to-image': 'Text-to-Image',
+    'any-to-any': 'Any-to-Any',
+  };
+  return names[tag] || tag.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+function fmtDownloads(n) {
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return n.toString();
+}
+const tooltip = document.getElementById('tooltip');
+let hoveredModel = -1;
+let labelBounceRect = null;   // {cx, cy, hw, hh} — center + half-dims of bounce pill
+let labelBounceAlpha = 0;     // 0..1 animation progress (0=off, 1=full bounce)
+canvas.addEventListener('mousemove', (e) => {
+  // Global cursor state for elastic pull
+  cursorX = e.clientX;
+  cursorY = e.clientY;
+  cursorOnCanvas = true;
+  const mx = e.clientX;
+  const my = e.clientY;
+  let found = -1;
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    const dx = mx - md[j].x;
+    const dy = my - md[j].y;
+    if (dx * dx + dy * dy <= md[j].captureRadius * md[j].captureRadius) {
+      found = j;
+      break;
+    }
+  }
+  if (found !== hoveredModel) {
+    hoveredModel = found;
+    if (found >= 0) {
+      const m = models[found];
+      const mpos = md[found];
+      const url = 'https://huggingface.co/' + m.id;
+      const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
+      const authorUrl = 'https://huggingface.co/' + m.author;
+      const avatarHtml = m.avatarUrl
+        ? '<img src="' + m.avatarUrl + '" width="16" height="16" style="border-radius:3px;vertical-align:-2px;margin-right:4px">'
+        : '';
+      const authorLine = m.author
+        ? avatarHtml + '<a href="' + authorUrl + '" target="_blank" style="font-family:Inter,sans-serif;font-weight:400;font-size:13px;opacity:0.55;color:#161513;text-decoration:none">'
+          + m.author + '</a><span style="font-family:Inter,sans-serif;font-weight:400;font-size:13px;opacity:0.35;margin:0 2px">/</span>'
+        : '';
+      tooltip.innerHTML = authorLine + '<a href="' + url + '" target="_blank">'
+        + shortName + '</a><br><span style="font-family:Inter,sans-serif;font-weight:400;font-size:13px;opacity:0.7">' + fmtTask(m.task) + '</span><br><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#161513" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:3px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' + fmtDownloads(m.downloads);
+      tooltip.classList.add('visible');
+      // Position tooltip so we can measure it
+      tooltip.style.left = mpos.x + 'px';
+      tooltip.style.top = (mpos.y + CORE_RADIUS + 12) + 'px';
+      tooltip.style.transform = 'translateX(-50%)';
+      // Compute bounce zone from tooltip dimensions
+      const rect = tooltip.getBoundingClientRect();
+      const pad = 14;  // breathing room around text
+      labelBounceRect = {
+        cx: mpos.x,
+        cy: mpos.y + CORE_RADIUS + 12 + rect.height / 2,
+        hw: rect.width / 2 + pad,
+        hh: rect.height / 2 + pad + 8,  // extra top padding to cover core-tooltip gap
+      };
+    } else {
+      tooltip.classList.remove('visible');
+      // labelBounceRect stays set — will animate out via labelBounceAlpha
+    }
+  }
+  if (hoveredModel >= 0) {
+    const model = md[hoveredModel];
+    tooltip.style.left = model.x + 'px';
+    tooltip.style.top = (model.y + CORE_RADIUS + 12) + 'px';
+    tooltip.style.transform = 'translateX(-50%)';
+  }
+  canvas.style.cursor = hoveredModel >= 0 ? 'pointer' : 'default';
+});
+canvas.addEventListener('click', (e) => {
+  const mx = e.clientX;
+  const my = e.clientY;
+  for (let j = 0; j < MODEL_COUNT; j++) {
+    const dx = mx - md[j].x;
+    const dy = my - md[j].y;
+    if (dx * dx + dy * dy <= md[j].captureRadius * md[j].captureRadius) {
+      window.open('https://huggingface.co/' + models[j].id, '_blank');
+      break;
+    }
+  }
+});
+canvas.addEventListener('mouseleave', () => {
+  hoveredModel = -1;
+  tooltip.classList.remove('visible');
+  canvas.style.cursor = 'default';
+  cursorOnCanvas = false;  // triggers spring snapback
+});
+})();
+</script>
+</body>
 </html>