Spaces:

mo378
/

degeneration-probe

Sleeping

File size: 12,496 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apertus-8B: Layer Structure (Interactive)</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 32px;
    }
    #stackGroup  { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
    #detailGroup { transition: opacity 0.35s ease; }
    #hintEl      { transition: opacity 0.3s ease; }
  </style>
</head>
<body>
<svg id="viz" width="1100" height="560" viewBox="0 -20 980 500"
     style="font-family:Helvetica, Arial, sans-serif; display:block;"></svg>

<script>
const svg = document.getElementById('viz');
const ns  = 'http://www.w3.org/2000/svg';

function el(tag, attrs, text) {
  const e = document.createElementNS(ns, tag);
  for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, v);
  if (text !== undefined) e.textContent = text;
  return e;
}
function txt(x, y, str, attrs = {}) {
  return el('text', { x, y, 'text-anchor': 'middle',
    'font-family': 'Inter,sans-serif', 'font-size': 13, fill: '#444', ...attrs }, str);
}
function arrowRight(x1, y1, x2, y2, color = '#bbb', dash = '') {
  const g = el('g', {});
  g.appendChild(el('line', { x1, y1, x2, y2, stroke: color,
    'stroke-width': 2, 'stroke-linecap': 'round',
    ...(dash ? { 'stroke-dasharray': dash } : {}) }));
  const a = Math.atan2(y2 - y1, x2 - x1), L = 9, s = 0.4;
  g.appendChild(el('polygon', {
    points: `${x2},${y2} ${x2 - L*Math.cos(a-s)},${y2 - L*Math.sin(a-s)} ${x2 - L*Math.cos(a+s)},${y2 - L*Math.sin(a+s)}`,
    fill: color
  }));
  return g;
}

// ── Layout ────────────────────────────────────────────────────
const CY        = 240;
const N_LAYERS  = 32;
const REKT_W    = 72;
const REKT_H    = 9;
const REKT_GAP  = 3;
const totalH    = N_LAYERS * REKT_H + (N_LAYERS - 1) * REKT_GAP;
const stackTopY = CY - totalH / 2;
const stackX    = 88;                  // original left-side X (used when detail is shown)
const INIT_OFFSET = 490 - stackX;      // translateX to center stack initially (= 402)

const detailX = 400;
const detailW = 210;
const detailH = 330;
const detailY = CY - detailH / 2;
const vecX    = 630;

// ── Groups (detail behind stack) ──────────────────────────────
const detailGroup = el('g', { id: 'detailGroup' });
detailGroup.style.opacity = '0';
const stackGroup = el('g', { id: 'stackGroup' });
stackGroup.style.transform = `translateX(${INIT_OFFSET}px)`;

// ── Top hint label (static) ───────────────────────────────
svg.appendChild(el('text', {
  x: 490, y: -8,
  'text-anchor': 'middle',
  'font-family': 'Inter,sans-serif',
  'font-size': 11,
  fill: '#bbb',
  'font-style': 'normal',
}, 'Select a layer to zoom into the Apertus-8B architecture'));

svg.appendChild(detailGroup);
svg.appendChild(stackGroup);

// ── Stack: header ─────────────────────────────────────────────
stackGroup.appendChild(txt(stackX, stackTopY - 28, 'Apertus-8B-Instruct',
  { 'font-size': 13, 'font-weight': 700, fill: '#2c4a7c' }));
stackGroup.appendChild(txt(stackX, stackTopY - 14, '32 transformer layers',
  { 'font-size': 10, fill: '#aaa' }));

const hintEl = txt(stackX, stackTopY + totalH + 18, 'hover to explore',
  { 'font-size': 10, fill: '#ccc', 'font-style': 'normal', id: 'hintEl' });
stackGroup.appendChild(hintEl);

// ── Stack: anchor labels (0 and 31) ───────────────────────────
stackGroup.appendChild(txt(stackX + REKT_W/2 + 18, stackTopY + 9,
  'Layer 0', { 'font-size': 9, fill: '#ccc', 'text-anchor': 'start' }));
stackGroup.appendChild(txt(stackX + REKT_W/2 + 18,
  stackTopY + (N_LAYERS - 1) * (REKT_H + REKT_GAP) + 9,
  'Layer 31', { 'font-size': 9, fill: '#ccc', 'text-anchor': 'start' }));

// ── Stack: layer rects ────────────────────────────────────────
const layerRects = [];
for (let i = 0; i < N_LAYERS; i++) {
  const ry = stackTopY + i * (REKT_H + REKT_GAP);
  const r = el('rect', {
    x: stackX - REKT_W / 2, y: ry,
    width: REKT_W, height: REKT_H,
    rx: 0,
    fill: '#e5e7eb', stroke: '#d1d5db', 'stroke-width': 0.8,
    'data-layer': i
  });
  r.style.cursor = 'pointer';
  stackGroup.appendChild(r);
  layerRects.push(r);
}

// Dynamic hover label (inside stackGroup: moves with stack)
const hoverLabel = txt(stackX + REKT_W/2 + 18, stackTopY,
  '', { 'font-size': 9, fill: '#2c4a7c', 'font-weight': 700,
        'text-anchor': 'start', opacity: 0 });
stackGroup.appendChild(hoverLabel);

// ── Detail: zoom fan (dynamic) ────────────────────────────────
const zoomGroup = el('g', {});
detailGroup.appendChild(zoomGroup);

function updateZoomLines(i) {
  while (zoomGroup.firstChild) zoomGroup.removeChild(zoomGroup.firstChild);
  const hlY     = stackTopY + i * (REKT_H + REKT_GAP);
  const hlRight = stackX + REKT_W / 2;
  const zDstX   = detailX - detailW / 2;
  zoomGroup.appendChild(el('polygon', {
    points: `${hlRight},${hlY} ${zDstX},${detailY} ${zDstX},${detailY+detailH} ${hlRight},${hlY+REKT_H}`,
    fill: '#f5f3ff', stroke: 'none'
  }));
  zoomGroup.appendChild(el('line', {
    x1: hlRight, y1: hlY, x2: zDstX, y2: detailY,
    stroke: '#aab9d2', 'stroke-width': 1, 'stroke-dasharray': '5 4'
  }));
  zoomGroup.appendChild(el('line', {
    x1: hlRight, y1: hlY + REKT_H, x2: zDstX, y2: detailY + detailH,
    stroke: '#aab9d2', 'stroke-width': 1, 'stroke-dasharray': '5 4'
  }));
}

// ── Detail: box ───────────────────────────────────────────────
// shadow
detailGroup.appendChild(el('rect', {
  x: detailX - detailW/2 + 4, y: detailY + 4,
  width: detailW, height: detailH, rx: 0, fill: '#eef1f6', opacity: 0.5
}));
// card
detailGroup.appendChild(el('rect', {
  x: detailX - detailW/2, y: detailY,
  width: detailW, height: detailH, rx: 0,
  fill: '#fff', stroke: '#aab9d2', 'stroke-width': 2
}));
// top accent bar
detailGroup.appendChild(el('rect', {
  x: detailX - detailW/2, y: detailY,
  width: detailW, height: 5, rx: 0, fill: '#2c4a7c'
}));

const layerNumLabel = txt(detailX, detailY + 22, 'Layer 0',
  { 'font-size': 13, 'font-weight': 700, fill: '#1e1b4b' });
detailGroup.appendChild(layerNumLabel);

function subBlock(cy, bg, border, label, sublabel) {
  const bW = detailW - 36, bH = sublabel ? 56 : 46;
  const bX = detailX - bW / 2;
  const bY = cy - bH / 2;
  detailGroup.appendChild(el('rect', { x: bX, y: bY, width: bW, height: bH,
    rx: 0, fill: bg, stroke: border, 'stroke-width': 1.3 }));
  detailGroup.appendChild(txt(detailX, bY + (sublabel ? bH/2 - 6 : bH/2 + 5),
    label, { 'font-size': 11, 'font-weight': 600, fill: '#333' }));
  if (sublabel) detailGroup.appendChild(txt(detailX, bY + bH/2 + 9,
    sublabel, { 'font-size': 9.5, fill: '#888' }));
  return { top: bY, bot: bY + bH };
}

const attn = subBlock(detailY + 88,  '#eef1f6', '#6c83a8', 'Multi-Head Self-Attention', '32Q / 8KV heads (GQA) · dₕ = 128');
const ffn  = subBlock(detailY + 192, '#fef3c7', '#fbbf24', 'Feed-Forward Network',      '4096 → 21504 → 4096');
const norm = subBlock(detailY + 282, '#f0fdf4', '#86efac', 'RMSNorm + Residual', null);

detailGroup.appendChild(arrowRight(detailX, attn.bot + 1, detailX, ffn.top - 1, '#bbb'));
detailGroup.appendChild(arrowRight(detailX, ffn.bot + 1,  detailX, norm.top - 1, '#bbb'));

const skipX = detailX - detailW / 2 + 12;
detailGroup.appendChild(el('path', {
  d: `M${skipX},${attn.top + 4} L${skipX},${norm.bot - 4}`,
  stroke: '#aab9d2', 'stroke-width': 1.5, 'stroke-dasharray': '4 3', fill: 'none'
}));
detailGroup.appendChild(txt(skipX, (attn.top + norm.bot) / 2 + 4, '+',
  { 'font-size': 11, fill: '#6c83a8', 'font-weight': 700 }));

// input arrow + label
detailGroup.appendChild(arrowRight(detailX, detailY - 28, detailX, detailY - 2, '#bbb'));
detailGroup.appendChild(txt(detailX, detailY - 36, 'hₜ  ∈  ℝ⁴⁰⁹⁶',
  { 'font-size': 13, fill: '#888', 'font-style': 'normal' }));

// output arrow to vec
detailGroup.appendChild(arrowRight(detailX + detailW/2 + 2, CY, vecX - 30, CY, '#555'));

// ── Detail: activation vector ─────────────────────────────────
const vecW    = 32;
const vecH    = 260;
const vecTopY = CY - vecH / 2;
detailGroup.appendChild(el('rect', {
  x: vecX - vecW/2, y: vecTopY, width: vecW, height: vecH,
  rx: 0, fill: '#e0e7ff', stroke: '#a5b4fc', 'stroke-width': 1.5
}));
detailGroup.appendChild(txt(vecX, vecTopY - 12, '4 096 activations',
  { 'font-size': 13, fill: '#2c4a7c', 'font-weight': 700 }));
detailGroup.appendChild(el('line', {
  x1: vecX+vecW/2+4, y1: vecTopY, x2: vecX+vecW/2+4, y2: vecTopY+vecH,
  stroke: '#bbb', 'stroke-width': 1 }));
detailGroup.appendChild(el('line', {
  x1: vecX+vecW/2+4, y1: vecTopY, x2: vecX+vecW/2+9, y2: vecTopY,
  stroke: '#bbb', 'stroke-width': 1 }));
detailGroup.appendChild(el('line', {
  x1: vecX+vecW/2+4, y1: vecTopY+vecH, x2: vecX+vecW/2+9, y2: vecTopY+vecH,
  stroke: '#bbb', 'stroke-width': 1 }));

// ── Detail: PCA + fan-out ─────────────────────────────────────
const pcaX = 780, pcaW = 64, pcaH = 40;
detailGroup.appendChild(arrowRight(vecX + vecW/2 + 2, CY, pcaX - pcaW/2 - 2, CY, '#555'));
detailGroup.appendChild(el('rect', {
  x: pcaX - pcaW/2, y: CY - pcaH/2, width: pcaW, height: pcaH,
  rx: 0, fill: '#f8fafc', stroke: '#94a3b8', 'stroke-width': 1.8
}));
detailGroup.appendChild(txt(pcaX, CY + 5, 'PCA',
  { 'font-size': 13, 'font-weight': 700, fill: '#334155' }));

const outX = 920;
[CY - 90, CY, CY + 90].forEach((oy, i) => {
  detailGroup.appendChild(arrowRight(pcaX + pcaW/2 + 2, CY, outX - 22, oy, '#94a3b8'));
  detailGroup.appendChild(el('circle', {
    cx: outX, cy: oy, r: 20,
    fill: '#f1f5f9', stroke: '#94a3b8', 'stroke-width': 1.5
  }));
  detailGroup.appendChild(txt(outX, oy - 3, ['1D','2D','3D'][i],
    { 'font-size': 11, 'font-weight': 700, fill: '#334155' }));
  detailGroup.appendChild(txt(outX, oy + 11, ['ℝ¹','ℝ²','ℝ³'][i],
    { 'font-size': 13, fill: '#94a3b8', 'font-style': 'normal' }));
});

// ── Interaction ───────────────────────────────────────────────
let current = null;

function show(i) {
  if (current === i) return;
  current = i;

  layerRects.forEach((r, idx) => {
    r.setAttribute('fill',         idx === i ? '#2c4a7c' : '#e5e7eb');
    r.setAttribute('stroke',       idx === i ? '#4338ca' : '#d1d5db');
    r.setAttribute('stroke-width', idx === i ? 1.5 : 0.8);
  });

  const ry = stackTopY + i * (REKT_H + REKT_GAP);
  hoverLabel.setAttribute('y', ry + 9);
  hoverLabel.textContent = `Layer ${i}`;
  hoverLabel.setAttribute('opacity', 1);

  updateZoomLines(i);
  layerNumLabel.textContent = `Layer ${i}`;

  stackGroup.style.transform = 'translateX(0)';
  detailGroup.style.opacity  = '1';
  hintEl.style.opacity       = '0';
}

function hide() {
  current = null;
  layerRects.forEach(r => {
    r.setAttribute('fill',         '#e5e7eb');
    r.setAttribute('stroke',       '#d1d5db');
    r.setAttribute('stroke-width', 0.8);
  });
  hoverLabel.setAttribute('opacity', 0);
  stackGroup.style.transform = `translateX(${INIT_OFFSET}px)`;
  detailGroup.style.opacity  = '0';
  hintEl.style.opacity       = '1';
}

// Show on rect hover, update active layer when moving between rects
layerRects.forEach((r, i) => r.addEventListener('mouseenter', () => show(i)));

// Only hide when mouse leaves the entire SVG
svg.addEventListener('mouseleave', hide);
</script>
</body>
</html>