Spaces:

Chunte
/

Top-Downloaded-Trending-Models

Running

App Files Files Community

Top-Downloaded-Trending-Models / index.html

Chunte HF Staff

Upload index.html

d094e2b verified 5 days ago

raw

history blame contribute delete

79.2 kB

	<!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;
	}
	#pinnedLabel {
	position: absolute;
	pointer-events: auto;
	font: 14px/1.4 'SF Mono', 'Menlo', 'Consolas', monospace;
	color: #161513;
	text-align: center;
	white-space: nowrap;
	}
	#pinnedLabel a {
	color: #161513;
	text-decoration: none;
	}

	/* ── Add Model Pill Button (top-right) ── */
	#addModelBtn {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 10;
	}
	#addPill {
	display: inline-flex;
	align-items: center;
	background: #161513;
	color: #F6F4EF;
	border-radius: 999px;
	height: 38px;
	padding: 0 16px;
	font: 500 13px/1 'Inter', sans-serif;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	}
	#addPill .label-text {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	}
	#addPill .label-text .hf-logo {
	width: 20px;
	height: 20px;
	vertical-align: -3px;
	}
	#addPill .input-wrap {
	display: none;
	align-items: center;
	gap: 6px;
	}
	#addPill.expanded {
	padding: 0 5px 0 14px;
	}
	#addPill.expanded .input-wrap {
	display: flex;
	}
	#addPill.expanded .label-text {
	display: none;
	}
	#addPill input[type="text"] {
	background: transparent;
	border: none;
	outline: none;
	color: #F6F4EF;
	font: 400 13px/1 'Inter', sans-serif;
	width: 176px;
	padding: 0;
	caret-color: #E8820C;
	}
	#addPill input[type="text"]::placeholder {
	color: rgba(246,244,239,0.4);
	}
	#addPill .add-btn {
	flex-shrink: 0;
	background: rgba(246,244,239,0.15);
	color: #F6F4EF;
	border: none;
	border-radius: 999px;
	height: 28px;
	padding: 0 12px;
	font: 500 12px/1 'Inter', sans-serif;
	cursor: pointer;
	transition: background 0.15s;
	}
	#addPill .add-btn:hover {
	background: rgba(246,244,239,0.25);
	}
	#addPill .error-msg {
	display: none;
	color: #E8820C;
	font-size: 11px;
	margin-left: 2px;
	margin-right: 10px;
	white-space: nowrap;
	}

	/* Active state: shows model name + remove */
	#addPill.active {
	cursor: pointer;
	}
	#addPill .active-wrap {
	display: none;
	align-items: center;
	gap: 8px;
	}
	#addPill.active .active-wrap {
	display: flex;
	}
	#addPill.active .label-text,
	#addPill.active .input-wrap {
	display: none;
	}
	#addPill .orange-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E8820C;
	flex-shrink: 0;
	}
	#addPill .model-name {
	font: 400 13px/1 'Inter', sans-serif;
	color: #F6F4EF;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	#addPill .remove-btn {
	flex-shrink: 0;
	background: rgba(246,244,239,0.15);
	color: #F6F4EF;
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s;
	}
	#addPill .remove-btn:hover {
	background: rgba(232,130,12,0.4);
	}

	/* Loading spinner */
	#addPill .spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(246,244,239,0.3);
	border-top-color: #E8820C;
	border-radius: 50%;
	animation: pillSpin 0.6s linear infinite;
	flex-shrink: 0;
	margin-left: 4px;
	margin-right: 10px;
	}
	#addPill.loading .spinner {
	display: block;
	}
	#addPill.loading .add-btn {
	display: none;
	}
	@keyframes pillSpin {
	to { transform: rotate(360deg); }
	}

	/* ── Model Dropdown (below pill) ── */
	#modelDropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 380px;
	max-height: 420px;
	background: #161513;
	border: 1px solid rgba(246,244,239,0.1);
	border-radius: 12px;
	overflow: hidden;
	display: none;
	flex-direction: column;
	box-shadow: 0 16px 48px rgba(0,0,0,0.35);
	z-index: 20;
	}
	#modelDropdown.open {
	display: flex;
	}

	.dropdown-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(246,244,239,0.08);
	}
	.dropdown-search svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.4;
	}
	.dropdown-search input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #F6F4EF;
	font: 400 13px/1 'Inter', sans-serif;
	caret-color: #E8820C;
	}
	.dropdown-search input::placeholder { color: rgba(246,244,239,0.3); }

	.dropdown-content {
	overflow-y: auto;
	flex: 1;
	padding: 4px 0;
	}

	.dropdown-section-header {
	padding: 10px 14px 4px;
	font: 500 11px/1 'Inter', sans-serif;
	color: #E8820C;
	display: flex;
	align-items: center;
	gap: 5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	}

	.dropdown-model {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	cursor: pointer;
	transition: background 0.1s;
	color: rgba(246,244,239,0.85);
	font: 400 13px/1 'Inter', sans-serif;
	}
	.dropdown-model:hover, .dropdown-model.selected {
	background: rgba(246,244,239,0.07);
	}
	.dropdown-model img {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	object-fit: cover;
	background: rgba(246,244,239,0.08);
	flex-shrink: 0;
	}
	.dropdown-avatar-placeholder {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: rgba(246,244,239,0.06);
	flex-shrink: 0;
	}

	.dropdown-loading {
	padding: 24px;
	text-align: center;
	}
	.dropdown-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(246,244,239,0.12);
	border-top-color: #E8820C;
	border-radius: 50%;
	animation: pillSpin 0.6s linear infinite;
	}
	.dropdown-empty {
	padding: 24px 14px;
	color: rgba(246,244,239,0.35);
	text-align: center;
	font: 400 13px/1 'Inter', sans-serif;
	}
	</style>
	</head>
	<body>
	<canvas id="c"></canvas>
	<div id="tooltip"></div>
	<div id="pinnedLabel"></div>
	<div id="addModelBtn">
	<div id="addPill">
	<span class="label-text">Add a model on <img class="hf-logo" src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-pirate.svg" alt="HF"></span>
	<div class="input-wrap">
	<input type="text" placeholder="owner/model-name" />
	<button class="add-btn">Add</button>
	<span class="spinner"></span>
	<span class="error-msg"></span>
	</div>
	<div class="active-wrap">
	<span class="orange-dot"></span>
	<span class="model-name"></span>
	<button class="remove-btn">×</button>
	</div>
	</div>
	<div id="modelDropdown">
	<div class="dropdown-search">
	<svg viewBox="0 0 18 18" fill="none" stroke="rgba(246,244,239,0.5)" stroke-width="2" stroke-linecap="round"><circle cx="7.5" cy="7.5" r="5.5"/><line x1="11.5" y1="11.5" x2="16" y2="16"/></svg>
	<input type="text" id="dropdownSearchInput" placeholder="Search models..." autocomplete="off" />
	</div>
	<div class="dropdown-content" id="dropdownContent"></div>
	</div>
	</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 ORANGE = '#E8820C';
	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');

	const DPR = window.devicePixelRatio \|\| 1;

	function resize() {
	const w = window.innerWidth;
	const h = window.innerHeight;
	canvas.width = w * DPR;
	canvas.height = h * DPR;
	canvas.style.width = w + 'px';
	canvas.style.height = h + 'px';
	ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
	}
	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;
	let allTrendingModels = [];
	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);
	allTrendingModels = all.slice();
	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: '' };
	});
	allTrendingModels = models.slice();
	}

	// Fetch author avatars in parallel (non-blocking) — covers all 50 trending models
	const uniqueAuthors = [...new Set(allTrendingModels.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];
	}
	for (const m of allTrendingModels) {
	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;
	let massNorm = massArr.map(m => (m - massMin) / massRange);

	// ── Per-Model Derived Values ───────────────────────────────
	const BASE_MODEL_COUNT = models.length;
	let activeModelCount = BASE_MODEL_COUNT;
	const CUSTOM_MODEL_IDX = BASE_MODEL_COUNT;
	let customModelActive = false;

	const modelOrbitBase = new Float64Array(BASE_MODEL_COUNT + 1);
	const modelCaptureRadius = new Float64Array(BASE_MODEL_COUNT + 1);
	for (let i = 0; i < activeModelCount; i++) {
	modelOrbitBase[i] = 30 + 180 * massNorm[i];
	modelCaptureRadius[i] = modelOrbitBase[i] * 1.2;
	}

	// Spawn weighting — dynamic rebalancing
	let totalMassNorm = massNorm.reduce((a, b) => a + b, 0);
	const modelOrbitCount = new Float64Array(BASE_MODEL_COUNT + 1);
	const modelTargetPop = new Float64Array(BASE_MODEL_COUNT + 1);
	const spawnWeight = new Float64Array(BASE_MODEL_COUNT + 1);
	let totalSpawnWeight = totalMassNorm;
	let rebalanceTimer = 0;

	const TARGET_ORBIT_FRACTION = 0.7;
	const totalTarget = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
	for (let j = 0; j < activeModelCount; j++) {
	modelTargetPop[j] = totalTarget * (massNorm[j] / totalMassNorm);
	spawnWeight[j] = massNorm[j];
	}

	// ── Layout: Download-Weighted Central Placement ─────────────
	function computePositions() {
	const cx = (canvas.width / DPR) / 2;
	const cy = (canvas.height / DPR) / 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 < activeModelCount; 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 < activeModelCount; a++) {
	for (let b = a + 1; b < activeModelCount; 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 < activeModelCount; 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 < activeModelCount; i++) {
	const r = modelCaptureRadius[i];
	positions[i].x = Math.max(r + EDGE_MARGIN, Math.min(canvas.width / DPR - r - EDGE_MARGIN, positions[i].x));
	positions[i].y = Math.max(r + EDGE_MARGIN, Math.min(canvas.height / DPR - r - EDGE_MARGIN, positions[i].y));
	}
	if (!moved) break;
	}

	return positions;
	}

	// ── Find best open position for custom model (center-biased) ─
	function findOpenPosition(idx) {
	const w = canvas.width / DPR;
	const h = canvas.height / DPR;
	const cx = w / 2, cy = h / 2;
	const myR = modelCaptureRadius[idx];
	const margin = myR + EDGE_MARGIN;
	const cols = 20, rows = 20;
	let bestX = cx, bestY = cy, bestScore = -Infinity;
	const maxDist = Math.sqrt(cx * cx + cy * cy);

	for (let r = 0; r < rows; r++) {
	for (let c = 0; c < cols; c++) {
	const px = margin + (w - 2 * margin) * (c / (cols - 1));
	const py = margin + (h - 2 * margin) * (r / (rows - 1));
	// Minimum clearance from any existing model
	let minClear = Infinity;
	for (let j = 0; j < activeModelCount; j++) {
	if (j === idx) continue;
	const dx = px - positions[j].x, dy = py - positions[j].y;
	const dist = Math.sqrt(dx * dx + dy * dy) - modelCaptureRadius[j] - myR;
	if (dist < minClear) minClear = dist;
	}
	// Score: 70% center proximity, 30% clearance
	const centerScore = 1 - Math.sqrt((px - cx) 2 + (py - cy) 2) / maxDist;
	const clearScore = Math.max(0, Math.min(minClear / 200, 1));
	const score = centerScore * 0.7 + clearScore * 0.3;
	if (score > bestScore) {
	bestScore = score;
	bestX = px; bestY = py;
	}
	}
	}
	return { x: bestX, y: bestY };
	}

	// ── Separate models in-place (no spiral reassignment) ────────
	// Starts from current positions, only resolves overlaps locally.
	// Models move the minimum distance needed — no cross-screen flights.
	function separateInPlace() {
	const cx = (canvas.width / DPR) / 2;
	const cy = (canvas.height / DPR) / 2;
	// Clone current positions as starting points
	const result = [];
	for (let i = 0; i < activeModelCount; i++) {
	result.push({ x: positions[i].x, y: positions[i].y });
	}

	// Run separation solver (same logic as computePositions but no spiral init)
	for (let iter = 0; iter < 200; iter++) {
	let moved = false;
	for (let a = 0; a < activeModelCount; a++) {
	for (let b = a + 1; b < activeModelCount; b++) {
	const dx = result[b].x - result[a].x;
	const dy = result[b].y - result[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;
	const wA = 1 - massNorm[a] * 0.7;
	const wB = 1 - massNorm[b] * 0.7;
	const total = wA + wB;
	result[a].x -= nx * overlap * (wA / total);
	result[a].y -= ny * overlap * (wA / total);
	result[b].x += nx * overlap * (wB / total);
	result[b].y += ny * overlap * (wB / total);
	moved = true;
	}
	}
	}
	// Edge clamping
	for (let i = 0; i < activeModelCount; i++) {
	const r = modelCaptureRadius[i];
	result[i].x = Math.max(r + EDGE_MARGIN, Math.min(canvas.width / DPR - r - EDGE_MARGIN, result[i].x));
	result[i].y = Math.max(r + EDGE_MARGIN, Math.min(canvas.height / DPR - r - EDGE_MARGIN, result[i].y));
	}
	if (!moved) break;
	}
	return result;
	}

	let positions = computePositions();

	// ── Model Data Array ───────────────────────────────────────
	const md = [];
	for (let i = 0; i < activeModelCount; i++) {
	md.push({
	x: positions[i].x,
	y: positions[i].y,
	massNorm: massNorm[i],
	captureRadius: modelCaptureRadius[i]
	});
	}

	function syncModelData() {
	for (let i = 0; i < activeModelCount; i++) {
	md[i].x = positions[i].x;
	md[i].y = positions[i].y;
	}
	}

	// ── Smooth Layout Animation State ────────────────────────────
	const layoutTargetX = new Float64Array(BASE_MODEL_COUNT + 1);
	const layoutTargetY = new Float64Array(BASE_MODEL_COUNT + 1);
	const layoutActive = new Uint8Array(BASE_MODEL_COUNT + 1);
	const LAYOUT_LERP = 0.07;

	// Saved positions before custom model insertion (for precise return on removal)
	const preInsertX = new Float64Array(BASE_MODEL_COUNT);
	const preInsertY = new Float64Array(BASE_MODEL_COUNT);

	// Orbit scale animation (shrinks all models when custom model is added)
	let orbitScale = 1.0;
	let orbitScaleTarget = 1.0;
	const ORBIT_SCALE_LERP = 0.05;

	// Store original orbit bases (at scale 1.0)
	const orbitBaseOriginal = new Float64Array(BASE_MODEL_COUNT + 1);
	for (let i = 0; i < BASE_MODEL_COUNT; i++) {
	orbitBaseOriginal[i] = modelOrbitBase[i];
	}

	function applyOrbitScale(scale) {
	for (let j = 0; j < activeModelCount; j++) {
	modelOrbitBase[j] = orbitBaseOriginal[j] * scale;
	modelCaptureRadius[j] = modelOrbitBase[j] * 1.2;
	md[j].captureRadius = modelCaptureRadius[j];
	}
	}

	function updateLayoutAnimation() {
	// Animate orbit scale
	if (Math.abs(orbitScale - orbitScaleTarget) > 0.001) {
	orbitScale += (orbitScaleTarget - orbitScale) * ORBIT_SCALE_LERP;
	applyOrbitScale(orbitScale);
	}
	// Animate positions toward targets
	for (let j = 0; j < activeModelCount; j++) {
	if (!layoutActive[j]) continue;
	const dx = layoutTargetX[j] - positions[j].x;
	const dy = layoutTargetY[j] - positions[j].y;
	if (dx * dx + dy * dy < 1) {
	positions[j].x = layoutTargetX[j];
	positions[j].y = layoutTargetY[j];
	layoutActive[j] = 0;
	} else {
	positions[j].x += dx * LAYOUT_LERP;
	positions[j].y += dy * LAYOUT_LERP;
	}
	}
	}

	// ── Pop Scale Animation (custom model) ──────────────────────
	let customPopScale = 0;
	let customPopTarget = 0;
	let customPopVelocity = 0;
	const POP_STIFFNESS = 0.08;
	const POP_DAMPING = 0.72;

	function updatePopAnimation() {
	if (!customModelActive && customPopScale <= 0.001) return;
	const force = (customPopTarget - customPopScale) * POP_STIFFNESS;
	customPopVelocity = customPopVelocity * POP_DAMPING + force;
	customPopScale += customPopVelocity;
	if (customPopScale < 0) { customPopScale = 0; customPopVelocity = 0; }
	// Scale custom model's capture radius with pop (on top of orbit scale)
	if (customModelActive && customPopTarget === 1) {
	const idx = CUSTOM_MODEL_IDX;
	const baseR = orbitBaseOriginal[idx] * orbitScale;
	modelOrbitBase[idx] = baseR;
	modelCaptureRadius[idx] = baseR * 1.2 * customPopScale;
	md[idx].captureRadius = modelCaptureRadius[idx];
	}
	// When shrinking and settled, finalize removal
	if (customPopTarget === 0 && customPopScale < 0.001 && Math.abs(customPopVelocity) < 0.001) {
	customPopScale = 0;
	customPopVelocity = 0;
	finalizeRemoval();
	}
	}

	function finalizeRemoval() {
	// Safety: eject any particles still referencing the custom model
	const cidx = CUSTOM_MODEL_IDX;
	for (let i = 0; i < PARTICLE_COUNT; i++) {
	const p = particles[i];
	if (p.attractorIdx === cidx) {
	p.phase = 0;
	p.attractorIdx = -1;
	}
	}
	activeModelCount = BASE_MODEL_COUNT;
	customModelActive = false;
	totalMassNorm = 0;
	for (let j = 0; j < activeModelCount; j++) totalMassNorm += massNorm[j];
	const totalTgt = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
	for (let j = 0; j < activeModelCount; j++) {
	modelTargetPop[j] = totalTgt * (massNorm[j] / totalMassNorm);
	spawnWeight[j] = massNorm[j];
	}
	totalSpawnWeight = totalMassNorm;
	// Scale orbits back to full size
	orbitScaleTarget = 1.0;
	// Return base models to their exact pre-insertion positions
	for (let j = 0; j < activeModelCount; j++) {
	const dx = preInsertX[j] - positions[j].x;
	const dy = preInsertY[j] - positions[j].y;
	if (dx * dx + dy * dy > 1) {
	layoutTargetX[j] = preInsertX[j];
	layoutTargetY[j] = preInsertY[j];
	layoutActive[j] = 1;
	} else {
	positions[j].x = preInsertX[j];
	positions[j].y = preInsertY[j];
	}
	}
	computeNeighbors();
	}

	// ── Elastic Pull State ──────────────────────────────────────
	const elasticDx = new Float64Array(BASE_MODEL_COUNT + 1);
	const elasticDy = new Float64Array(BASE_MODEL_COUNT + 1);
	const elasticVx = new Float64Array(BASE_MODEL_COUNT + 1);
	const elasticVy = new Float64Array(BASE_MODEL_COUNT + 1);

	let cursorX = -9999;
	let cursorY = -9999;
	let cursorOnCanvas = false;

	function updateElasticPull() {
	for (let j = 0; j < activeModelCount; 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 < activeModelCount; 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 < activeModelCount; j++) {
	const neighbors = [];
	for (let k = 0; k < activeModelCount; 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(BASE_MODEL_COUNT + 1);
	// Fixed rotation direction per model (set after pre-sim, ±1)
	const modelRotDir = new Int8Array(BASE_MODEL_COUNT + 1);

	// ── 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 / DPR;
	const h = canvas.height / DPR;
	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 < activeModelCount; 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;
	p.orangeBlend = 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,
	orangeBlend: 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 < activeModelCount; 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 < activeModelCount; 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 < activeModelCount; 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 < activeModelCount; 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 / DPR, canvas.height / DPR);
	}
	}
	}

	// Lock each model's rotation direction based on pre-sim consensus
	for (let j = 0; j < activeModelCount; j++) {
	modelRotDir[j] = modelRotBias[j] !== 0 ? modelRotBias[j] : (Math.random() < 0.5 ? 1 : -1);
	}

	// ── Task Icons (SVG assets, colored to match theme) ─────────
	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%)
	const ICON_DRAW_SIZE = ICON_SIZE * 2; // full icon draw dimension
	const ICON_RENDER_SIZE = Math.ceil(ICON_DRAW_SIZE * Math.max(window.devicePixelRatio \|\| 1, 2) * 2); // 4x supersampled raster

	// Map HuggingFace pipeline_tag → SVG asset filename
	const TASK_ICON_FILES = {
	'audio-classification': 'IconAudioClassification.svg',
	'audio-text-to-text': 'IconAudioTextToText.svg',
	'audio-to-audio': 'IconAudioToAudio.svg',
	'automatic-speech-recognition': 'IconAutomaticSpeechRecognition.svg',
	'conversational': 'IconConversational.svg',
	'depth-estimation': 'IconDepthEstimation.svg',
	'document-question-answering': 'IconDocumentQuestionAnswering.svg',
	'fill-mask': 'IconFillMask.svg',
	'graph-ml': 'IconGraphML.svg',
	'image-text-to-text': 'IconImageAndTextToText.svg',
	'image-classification': 'IconImageClassification.svg',
	'image-feature-extraction': 'IconImageFeatureExtraction.svg',
	'image-segmentation': 'IconImageSegmentation.svg',
	'image-to-3d': 'IconImageTo3D.svg',
	'image-to-image': 'IconImageToImage.svg',
	'image-to-text': 'IconImageToText.svg',
	'image-to-video': 'IconImageToVideo.svg',
	'keypoint-detection': 'IconKeypointDetection.svg',
	'mask-generation': 'IconMaskGeneration.svg',
	'object-detection': 'IconObjectDetection.svg',
	'question-answering': 'IconQuestionAnswering.svg',
	'ranking': 'IconRanking.svg',
	'reinforcement-learning': 'IconReinforcementLearning.svg',
	'robotics': 'IconRobotics.svg',
	'sentence-similarity': 'IconSentenceSimilarity.svg',
	'summarization': 'IconSummarization.svg',
	'table-question-answering': 'IconTabeQuestionAnswering.svg',
	'tabular-classification': 'IconTabularClassification.svg',
	'tabular-regression': 'IconTabularRegression.svg',
	'text2text-generation': 'IconText2textGeneration.svg',
	'text-classification': 'IconTextClassification.svg',
	'text-generation': 'IconTextGeneration.svg',
	'text-to-3d': 'IconTextTo3D.svg',
	'text-to-audio': 'IconTextToAudio.svg',
	'text-to-image': 'IconTextToImage.svg',
	'text-to-speech': 'IconTextToSpeech.svg',
	'text-to-video': 'IconTextToVideo.svg',
	'time-series-forecasting': 'IconTimeSeriesForecasting.svg',
	'token-classification': 'IconTokenClassification.svg',
	'translation': 'IconTranslation.svg',
	'unconditional-image-generation': 'IconUnconditionalImageGeneration.svg',
	'video-classification': 'IconVideoClassification.svg',
	'video-text-to-text': 'IconVideoTextToText.svg',
	'visual-question-answering': 'IconVisualQuestionAnswering.svg',
	'voice-activity-detection': 'IconVoiceActivityDetection.svg',
	'zero-shot-classification': 'IconZeroShotClassification.svg',
	'zero-shot-object-detection': 'IconZeroShotObjectDetection.svg',
	'any-to-any': 'iconAnyToAny.svg',
	'feature-extraction': 'img feature extraction.svg',
	};

	// Pre-loaded icon images: taskIconImgs[task][colorHex] = Image
	const taskIconImgs = {};
	const ICON_ASSET_DIR = 'model task icon assets/';

	function buildColoredSVGImage(svgText, hexColor, renderSize) {
	// Replace fill="black" and stroke="black" with the target color
	let colored = svgText
	.replace(/fill="black"/g, 'fill="' + hexColor + '"')
	.replace(/stroke="black"/g, 'stroke="' + hexColor + '"')
	.replace(/fill="#000000"/g, 'fill="' + hexColor + '"')
	.replace(/stroke="#000000"/g,'stroke="' + hexColor + '"')
	.replace(/fill="#000"/g, 'fill="' + hexColor + '"')
	.replace(/stroke="#000"/g, 'stroke="' + hexColor + '"');
	// Override SVG width/height so the browser rasterizes at hi-DPI resolution
	colored = colored
	.replace(/width="\d+"/, 'width="' + renderSize + '"')
	.replace(/height="\d+"/, 'height="' + renderSize + '"');
	const blob = new Blob([colored], { type: 'image/svg+xml' });
	const url = URL.createObjectURL(blob);
	const img = new Image();
	img.src = url;
	return img;
	}

	// Load SVG text via XHR (works on file:// unlike fetch)
	function loadSVGText(url) {
	return new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.onload = () => xhr.status === 200 \|\| xhr.status === 0 ? resolve(xhr.responseText) : reject();
	xhr.onerror = reject;
	xhr.send();
	});
	}

	// Preload all icon SVGs in both COLOR and ORANGE variants
	async function preloadTaskIcons() {
	const colors = [COLOR, ORANGE];
	const entries = Object.entries(TASK_ICON_FILES);
	await Promise.all(entries.map(async ([task, file]) => {
	try {
	const svgText = await loadSVGText(ICON_ASSET_DIR + file);
	if (!svgText) return;
	taskIconImgs[task] = {};
	for (const c of colors) {
	const img = buildColoredSVGImage(svgText, c, ICON_RENDER_SIZE);
	taskIconImgs[task][c] = img;
	// Wait for decode
	await img.decode().catch(() => {});
	}
	} catch (_) {}
	}));
	}

	// Start preloading immediately
	preloadTaskIcons();

	function drawTaskIcon(ctx, x, y, task, iconColor) {
	const s = ICON_SIZE;
	const pad = ICON_PAD;
	const ic = iconColor \|\| COLOR;

	// 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 SVG icon image
	const iconEntry = taskIconImgs[task];
	const img = iconEntry && iconEntry[ic];
	if (img && img.complete && img.naturalWidth > 0) {
	ctx.drawImage(img, x - s, y - s, ICON_DRAW_SIZE, ICON_DRAW_SIZE);
	}
	}

	// ── Render Loop ────────────────────────────────────────────
	const PS2 = PARTICLE_SIZE * 2;

	function frame() {
	const w = canvas.width / DPR;
	const h = canvas.height / DPR;

	// 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 < activeModelCount; 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 < activeModelCount; 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
	// Pinned label always keeps bounce active; hover tooltip fades in/out
	if (hoveredModel >= 0 \|\| pinnedLabelBounceActive) {
	labelBounceAlpha = Math.min(1, labelBounceAlpha + 0.08);
	} else {
	labelBounceAlpha = Math.max(0, labelBounceAlpha - 0.06);
	if (labelBounceAlpha <= 0) labelBounceRect = null;
	}

	// Animate pop scale for custom model
	updatePopAnimation();

	// Animate layout transitions (position + orbit scale)
	updateLayoutAnimation();

	// 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++) {
	const p = particles[i];
	updateParticle(p, w, h);
	if (doDeflect) deflectFromLabel(p);
	// Orange blend: ramp toward 1 if orbiting custom model, toward 0 otherwise
	if (customModelActive && p.attractorIdx === CUSTOM_MODEL_IDX) {
	p.orangeBlend = Math.min(1, p.orangeBlend + 0.02);
	} else if (p.orangeBlend > 0) {
	p.orangeBlend = Math.max(0, p.orangeBlend - 0.02);
	}
	}

	// ── 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();

	// ── Orange particle pass: redraw particles with orangeBlend > 0 ──
	// COLOR=#161513 → bright orange #FF9F1C interpolation
	// Parse once (constants)
	// COLOR rgb: 22, 21, 19 BRIGHT ORANGE rgb: 255, 159, 28
	for (let i = 0; i < PARTICLE_COUNT; i++) {
	const p = particles[i];
	if (p.orangeBlend <= 0 \|\| p.size <= 0) continue;
	const t = p.orangeBlend;
	const r = Math.round(22 + (255 - 22) * t);
	const g = Math.round(21 + (159 - 21) * t);
	const b = Math.round(19 + (28 - 19) * t);
	const col = 'rgb(' + r + ',' + g + ',' + b + ')';

	if (p.phase === 0) {
	const speedSq = p.vx * p.vx + p.vy * p.vy;
	if (speedSq > 9) {
	const sp = Math.sqrt(speedSq);
	const len = Math.min(sp * 1.5, 6);
	ctx.strokeStyle = col;
	ctx.beginPath();
	ctx.moveTo(p.x, p.y);
	ctx.lineTo(p.x - (p.vx / sp) * len, p.y - (p.vy / sp) * len);
	ctx.stroke();
	continue;
	}
	}

	ctx.fillStyle = col;
	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);
	}
	}

	// Draw model cores last — task icons
	for (let j = 0; j < activeModelCount; j++) {
	const iconCol = (customModelActive && j === CUSTOM_MODEL_IDX) ? ORANGE : COLOR;
	if (customModelActive && j === CUSTOM_MODEL_IDX && customPopScale < 1) {
	const sc = customPopScale;
	if (sc > 0.01) {
	ctx.save();
	ctx.translate(md[j].x, md[j].y);
	ctx.scale(sc, sc);
	drawTaskIcon(ctx, 0, 0, models[j].task, iconCol);
	ctx.restore();
	}
	} else {
	drawTaskIcon(ctx, md[j].x, md[j].y, models[j].task, iconCol);
	}
	}

	// Update pinned label position (follows elastic pull)
	pinnedLabel.style.left = md[topModelIdx].x + 'px';
	pinnedLabel.style.top = (md[topModelIdx].y + CORE_RADIUS + 12) + 'px';
	pinnedLabel.style.transform = 'translateX(-50%)';

	// Keep pinned label bounce zone updated (only when no other hover is active)
	if (hoveredModel < 0 \|\| hoveredModel === topModelIdx) {
	const pRect = pinnedLabel.getBoundingClientRect();
	const pMpos = md[topModelIdx];
	const pPad = 14;
	labelBounceRect = {
	cx: pMpos.x,
	cy: pMpos.y + CORE_RADIUS + 12 + pRect.height / 2,
	hw: pRect.width / 2 + pPad,
	hh: pRect.height / 2 + pPad + 8,
	};
	}

	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)

	// ── Pinned label for top model (always visible) ─────────
	const topModelIdx = 0; // models already sorted by downloads desc
	const pinnedLabel = document.getElementById('pinnedLabel');
	{
	const m = models[topModelIdx];
	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>'
	: '';
	pinnedLabel.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);
	}
	let pinnedLabelBounceActive = true;

	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 < activeModelCount; 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 === topModelIdx) {
	// Top model: pinned label already visible — kill hover tooltip instantly
	tooltip.classList.remove('visible');
	tooltip.style.opacity = '0';
	tooltip.innerHTML = '';
	} else 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 isCustom = customModelActive && found === CUSTOM_MODEL_IDX;
	const tColor = isCustom ? '#E8820C' : '#161513';
	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:' + tColor + ';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.style.opacity = ''; // clear inline override, let CSS class control
	tooltip.style.color = tColor;
	tooltip.innerHTML = authorLine + '<a href="' + url + '" target="_blank" style="color:' + tColor + '">'
	+ 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="' + tColor + '" 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 && hoveredModel !== topModelIdx) {
	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 < activeModelCount; 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
	});

	// ── Custom Model: Pill Button + Dropdown Logic ──────────────
	const addPill = document.getElementById('addPill');
	const pillInput = addPill.querySelector('input[type="text"]');
	const pillAddBtn = addPill.querySelector('.add-btn');
	const pillError = addPill.querySelector('.error-msg');
	const pillModelName = addPill.querySelector('.model-name');
	const pillRemoveBtn = addPill.querySelector('.remove-btn');
	const dropdown = document.getElementById('modelDropdown');
	const dropdownInput = document.getElementById('dropdownSearchInput');
	const dropdownContent = document.getElementById('dropdownContent');

	// Pill states: 'idle' \| 'expanded' \| 'loading' \| 'active'
	let pillState = 'idle';
	let pillAnim = null;
	let dropdownOpen = false;
	let searchTimer = null;
	let selectedIdx = -1;
	let currentItems = [];

	function animatePill(toState) {
	const fromW = addPill.offsetWidth;
	addPill.classList.remove('expanded', 'active', 'loading');
	pillError.textContent = '';
	pillError.style.display = 'none';
	if (toState === 'expanded') {
	addPill.classList.add('expanded');
	} else if (toState === 'loading') {
	addPill.classList.add('expanded', 'loading');
	} else if (toState === 'active') {
	addPill.classList.add('active');
	const m = models[CUSTOM_MODEL_IDX];
	const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
	pillModelName.textContent = shortName;
	}
	const toW = addPill.offsetWidth;
	if (pillAnim) pillAnim.cancel();
	if (fromW !== toW) {
	pillAnim = addPill.animate(
	[{ width: fromW + 'px' }, { width: toW + 'px' }],
	{ duration: 350, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'none' }
	);
	pillAnim.onfinish = () => { addPill.style.width = ''; pillAnim = null; };
	}
	}

	function setPillState(state) {
	pillState = state;
	animatePill(state);
	if (state === 'expanded') {
	setTimeout(() => pillInput.focus(), 80);
	openDropdown();
	} else {
	closeDropdown();
	}
	}

	// ── Dropdown open/close ──
	function openDropdown() {
	dropdownOpen = true;
	dropdown.classList.add('open');
	dropdownInput.value = '';
	selectedIdx = -1;
	renderTrending();
	}

	function closeDropdown() {
	dropdownOpen = false;
	dropdown.classList.remove('open');
	selectedIdx = -1;
	if (searchTimer) clearTimeout(searchTimer);
	}

	// ── Dropdown rendering ──
	function modelCardHTML(m, idx) {
	const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
	const avatarSrc = m.avatarUrl \|\| avatarMap[m.author] \|\| '';
	const imgTag = avatarSrc
	? '<img src="' + avatarSrc + '" alt="" />'
	: '<div class="dropdown-avatar-placeholder"></div>';
	return '<div class="dropdown-model" data-model-id="' + m.id + '" data-idx="' + idx + '">' + imgTag + '<span>' + shortName + '</span></div>';
	}

	function attachCardListeners() {
	dropdownContent.querySelectorAll('.dropdown-model').forEach(function(el) {
	el.addEventListener('click', function(e) {
	e.stopPropagation();
	const modelId = el.dataset.modelId;
	setPillState('idle');
	submitCustomModel(modelId);
	});
	});
	}

	function updateSelection() {
	const cards = dropdownContent.querySelectorAll('.dropdown-model');
	cards.forEach(function(el, i) { el.classList.toggle('selected', i === selectedIdx); });
	if (selectedIdx >= 0 && selectedIdx < cards.length) {
	cards[selectedIdx].scrollIntoView({ block: 'nearest' });
	}
	}

	function renderTrending() {
	currentItems = allTrendingModels.slice(0, 20);
	let html = '<div class="dropdown-section-header">\uD83D\uDD25 Trending</div>';
	currentItems.forEach(function(m, i) { html += modelCardHTML(m, i); });
	dropdownContent.innerHTML = html;
	selectedIdx = -1;
	attachCardListeners();
	}

	function renderSearchResults(query, items) {
	if (!items.length) {
	dropdownContent.innerHTML = '<div class="dropdown-empty">No models found</div>';
	currentItems = [];
	return;
	}
	const trendingIds = new Set(allTrendingModels.map(function(m) { return m.id; }));
	const q = query.toLowerCase();
	const trendingMatches = allTrendingModels.filter(function(m) { return m.id.toLowerCase().includes(q); });
	const others = items.filter(function(m) { return !trendingIds.has(m.id); });

	let html = '';
	let idx = 0;
	if (trendingMatches.length) {
	html += '<div class="dropdown-section-header">\uD83D\uDD25 Trending</div>';
	trendingMatches.forEach(function(m) { html += modelCardHTML(m, idx++); });
	}
	if (others.length) {
	html += '<div class="dropdown-section-header" style="color:rgba(246,244,239,0.35)">Other models</div>';
	others.forEach(function(m) { html += modelCardHTML(m, idx++); });
	}
	currentItems = trendingMatches.concat(others);
	dropdownContent.innerHTML = html;
	selectedIdx = -1;
	attachCardListeners();
	}

	async function searchModels(query) {
	if (!query.trim()) { renderTrending(); return; }
	dropdownContent.innerHTML = '<div class="dropdown-loading"><div class="dropdown-spinner"></div></div>';
	try {
	const res = await fetch('https://huggingface.co/api/models?search=' + encodeURIComponent(query) + '&sort=downloads&direction=-1&limit=20');
	if (!res.ok) throw new Error(res.status);
	const data = await res.json();
	const results = data.map(function(m) {
	const fullId = m.modelId \|\| m.id;
	return {
	id: fullId,
	downloads: m.downloads \|\| 0,
	task: m.pipeline_tag \|\| 'unknown',
	author: fullId.includes('/') ? fullId.split('/')[0] : '',
	avatarUrl: ''
	};
	});
	const newAuthors = [...new Set(results.map(function(m) { return m.author; }).filter(function(a) { return a && !avatarMap[a]; }))];
	await Promise.all(newAuthors.map(async function(author) {
	try {
	const r = await fetch('https://huggingface.co/api/organizations/' + author + '/avatar');
	if (r.ok) { const j = await r.json(); if (j.avatarUrl) avatarMap[author] = j.avatarUrl; }
	} catch (_) {}
	}));
	results.forEach(function(m) { if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author]; });
	renderSearchResults(query, results);
	} catch (e) {
	dropdownContent.innerHTML = '<div class="dropdown-empty">Search failed. Try again.</div>';
	}
	}

	// ── Pill event listeners ──

	// Idle → click → expand
	addPill.addEventListener('click', (e) => {
	if (pillState === 'idle') {
	setPillState('expanded');
	e.stopPropagation();
	} else if (pillState === 'active') {
	if (!e.target.classList.contains('remove-btn')) {
	removeCustomModel();
	setPillState('expanded');
	pillInput.value = '';
	e.stopPropagation();
	}
	}
	});

	// Remove button
	pillRemoveBtn.addEventListener('click', (e) => {
	e.stopPropagation();
	removeCustomModel();
	setPillState('idle');
	});

	// Add button
	pillAddBtn.addEventListener('click', (e) => {
	e.stopPropagation();
	const val = pillInput.value.trim();
	if (val) submitCustomModel(val);
	});

	// Enter key in pill input → submit typed model
	pillInput.addEventListener('keydown', (e) => {
	if (e.key === 'Enter') {
	e.preventDefault();
	const val = pillInput.value.trim();
	if (val) submitCustomModel(val);
	} else if (e.key === 'Escape') {
	setPillState(customModelActive ? 'active' : 'idle');
	}
	});

	pillInput.addEventListener('click', (e) => e.stopPropagation());

	// Dropdown search input
	dropdownInput.addEventListener('input', function() {
	if (searchTimer) clearTimeout(searchTimer);
	searchTimer = setTimeout(function() {
	searchModels(dropdownInput.value);
	}, 300);
	});

	dropdownInput.addEventListener('click', (e) => e.stopPropagation());

	// Keyboard navigation in dropdown search
	dropdownInput.addEventListener('keydown', function(e) {
	const cards = dropdownContent.querySelectorAll('.dropdown-model');
	if (e.key === 'ArrowDown') {
	e.preventDefault();
	selectedIdx = Math.min(selectedIdx + 1, cards.length - 1);
	updateSelection();
	} else if (e.key === 'ArrowUp') {
	e.preventDefault();
	selectedIdx = Math.max(selectedIdx - 1, -1);
	updateSelection();
	} else if (e.key === 'Enter') {
	e.preventDefault();
	if (selectedIdx >= 0 && selectedIdx < cards.length) {
	const modelId = cards[selectedIdx].dataset.modelId;
	setPillState('idle');
	submitCustomModel(modelId);
	}
	} else if (e.key === 'Escape') {
	setPillState(customModelActive ? 'active' : 'idle');
	}
	});

	// Click outside → collapse pill + close dropdown
	document.addEventListener('click', (e) => {
	if (pillState === 'expanded' && !document.getElementById('addModelBtn').contains(e.target)) {
	setPillState(customModelActive ? 'active' : 'idle');
	}
	});

	// ── submitCustomModel: fetch model data from HF API ─────────
	async function submitCustomModel(modelId) {
	modelId = modelId.replace(/^https?:\/\/huggingface\.co\//, '').replace(/\/$/, '');
	setPillState('loading');

	try {
	const res = await fetch('https://huggingface.co/api/models/' + modelId);
	if (!res.ok) {
	pillError.textContent = (res.status === 404 \|\| res.status === 401) ? 'Model not found' : 'Error ' + res.status;
	pillError.style.display = 'block';
	addPill.classList.remove('loading');
	addPill.classList.add('expanded');
	pillState = 'expanded';
	return;
	}
	const data = await res.json();
	const fullId = data.modelId \|\| data.id \|\| modelId;
	const author = fullId.includes('/') ? fullId.split('/')[0] : '';
	const task = data.pipeline_tag \|\| 'unknown';
	const downloads = data.downloads \|\| 1;

	let avatarUrl = '';
	if (author && avatarMap[author]) {
	avatarUrl = avatarMap[author];
	} else if (author) {
	try {
	const ar = await fetch('https://huggingface.co/api/organizations/' + author + '/avatar');
	if (ar.ok) {
	const aj = await ar.json();
	if (aj.avatarUrl) { avatarUrl = aj.avatarUrl; avatarMap[author] = aj.avatarUrl; }
	}
	} catch (_) {}
	}

	if (customModelActive) removeCustomModel();

	insertCustomModel({
	id: fullId,
	downloads: downloads,
	task: task,
	author: author,
	avatarUrl: avatarUrl
	});

	setPillState('active');
	} catch (err) {
	pillError.textContent = 'Network error';
	pillError.style.display = 'block';
	addPill.classList.remove('loading');
	addPill.classList.add('expanded');
	pillState = 'expanded';
	}
	}

	// ── insertCustomModel: add to physics world ─────────────────
	function insertCustomModel(customModel) {
	const idx = CUSTOM_MODEL_IDX;
	models[idx] = customModel;

	// Save base model positions BEFORE any changes (for precise return on removal)
	for (let j = 0; j < BASE_MODEL_COUNT; j++) {
	preInsertX[j] = positions[j].x;
	preInsertY[j] = positions[j].y;
	}

	// Compute mass normalization relative to existing base range
	const dl = Math.log(customModel.downloads);
	const rawMass = Math.pow(dl, exponent);
	const normVal = Math.max(0, Math.min(1, (rawMass - massMin) / massRange));
	if (massNorm.length <= idx) massNorm.push(normVal);
	else massNorm[idx] = normVal;

	// Store original orbit base for the custom model
	orbitBaseOriginal[idx] = 30 + 180 * normVal;

	// Activate
	activeModelCount = BASE_MODEL_COUNT + 1;
	customModelActive = true;

	// Create md entry BEFORE applyOrbitScale (which reads md[j].captureRadius)
	md[idx] = {
	x: 0, y: 0,
	massNorm: normVal,
	captureRadius: 0
	};

	// Shrink all orbits to fit the extra model (scale factor)
	const newScale = BASE_MODEL_COUNT / activeModelCount;
	orbitScaleTarget = newScale;
	applyOrbitScale(newScale);

	// Recompute total mass norm and spawn weights
	totalMassNorm = 0;
	for (let j = 0; j < activeModelCount; j++) totalMassNorm += massNorm[j];
	const totalTgt = PARTICLE_COUNT * TARGET_ORBIT_FRACTION;
	for (let j = 0; j < activeModelCount; j++) {
	modelTargetPop[j] = totalTgt * (massNorm[j] / totalMassNorm);
	spawnWeight[j] = massNorm[j];
	}
	totalSpawnWeight = totalMassNorm;

	// Find best open position for custom model (center-biased, clearance-aware)
	const openPos = findOpenPosition(idx);
	md[idx].x = openPos.x;
	md[idx].y = openPos.y;
	if (positions.length <= idx) positions.push({ x: openPos.x, y: openPos.y });
	else { positions[idx].x = openPos.x; positions[idx].y = openPos.y; }

	// Resolve any overlaps locally — models only move minimum distance needed
	const separated = separateInPlace();
	for (let j = 0; j < BASE_MODEL_COUNT; j++) {
	const dx = separated[j].x - positions[j].x;
	const dy = separated[j].y - positions[j].y;
	if (dx * dx + dy * dy > 4) {
	layoutTargetX[j] = separated[j].x;
	layoutTargetY[j] = separated[j].y;
	layoutActive[j] = 1;
	}
	}
	// Update custom model position from separation too
	positions[idx].x = separated[idx].x;
	positions[idx].y = separated[idx].y;
	md[idx].x = separated[idx].x;
	md[idx].y = separated[idx].y;

	computeNeighbors();

	// Reset elastic state for custom model only
	elasticDx[idx] = 0; elasticDy[idx] = 0;
	elasticVx[idx] = 0; elasticVy[idx] = 0;

	// Start pop-in animation (0% → 100% with elastic overshoot)
	customPopScale = 0;
	customPopVelocity = 0;
	customPopTarget = 1;

	// Set rotation direction (random)
	modelRotDir[idx] = Math.random() < 0.5 ? 1 : -1;
	}

	// ── removeCustomModel: eject particles, start pop-out ────────
	function removeCustomModel() {
	if (!customModelActive) return;
	const idx = CUSTOM_MODEL_IDX;

	// Eject all particles orbiting the custom model back to free-fall
	for (let i = 0; i < PARTICLE_COUNT; i++) {
	const p = particles[i];
	if (p.attractorIdx === idx) {
	const m = md[idx];
	const r = p.orbitRadius \|\| 1;
	const rawOmega = p.angularMomentum / (r * r);
	const omega = Math.sign(rawOmega) * Math.min(Math.abs(rawOmega), MAX_OMEGA);
	p.vx = -Math.sin(p.angle) * omega * r;
	p.vy = Math.cos(p.angle) * omega * r;
	p.phase = 0;
	p.attractorIdx = -1;
	}
	}

	// Prevent new captures during pop-out
	modelCaptureRadius[idx] = 0;
	md[idx].captureRadius = 0;

	// Start pop-out animation (finalizeRemoval called when scale reaches 0)
	customPopTarget = 0;
	}

	})();
	</script>
	</body>
	</html>