Spaces:

firobeid
/

PositionalEncondingHeatmapMatrix

Running

App Files Files Community

firobeid commited on 12 days ago

Commit

eb18fb8

verified ·

1 Parent(s): efb2859

Upload index.html

Browse files

Files changed (1) hide show

index.html +226 -19

index.html CHANGED Viewed

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

+<style>
+  .pe-wrap { font-family: var(--font-sans); padding: 1rem 0; }
+  .pe-title { font-size: 15px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
+  .pe-sub { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 16px; }
+  .pe-canvas-wrap { position: relative; width: 100%; }
+  .pe-axis-label { font-size: 12px; color: var(--color-text-secondary); text-align: center; }
+  .pe-y-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; min-width: 20px; }
+  .pe-row { display: flex; align-items: stretch; gap: 8px; }
+  .pe-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--color-text-secondary); }
+  .pe-legend-bar { flex: 1; height: 12px; border-radius: 3px; }
+  .annotation-box { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; }
+  .ann-row { display: flex; gap: 16px; }
+  .ann-col { flex: 1; }
+  .ann-head { font-weight: 500; font-size: 12px; color: var(--color-text-primary); margin-bottom: 3px; }
+  .highlight-col { border: 2px solid #EF9F27; border-radius: 3px; position: absolute; pointer-events: none; }
+  .highlight-row { border: 2px solid #1D9E75; border-radius: 3px; position: absolute; pointer-events: none; }
+  .pe-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
+  .pe-btn { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-secondary); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--color-text-primary); }
+  .pe-btn.active { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }
+  .tooltip { position: absolute; background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--color-text-primary); pointer-events: none; opacity: 0; transition: opacity 0.15s; white-space: nowrap; z-index: 10; }
+</style>
+<div class="pe-wrap">
+  <div class="pe-title">Positional Encoding Matrix</div>
+  <div class="pe-sub">Each cell = PE(pos, i). Hover to inspect. Click a column (dimension) or row (position) to highlight it.</div>
+  <div class="pe-controls">
+    <span style="font-size:12px;color:var(--color-text-secondary)">Hover mode:</span>
+    <button class="pe-btn active" id="btn-cell" onclick="setMode('cell')">Cell value</button>
+    <button class="pe-btn" id="btn-col" onclick="setMode('col')">Column (dimension)</button>
+    <button class="pe-btn" id="btn-row" onclick="setMode('row')">Row (position)</button>
+  </div>
+  <div class="pe-row">
+    <div class="pe-y-label" id="ylabel">Sequence position <em>(pos ↓)</em></div>
+    <div style="flex:1;position:relative;">
+      <canvas id="pe-canvas" style="width:100%;display:block;cursor:crosshair;"></canvas>
+      <div class="tooltip" id="tt"></div>
+    </div>
+  </div>
+  <div style="margin-left:28px">
+    <div class="pe-axis-label">Embedding dimension <em>(i →)</em></div>
+    <div style="display:flex;justify-content:space-between;font-size:10px;color:var(--color-text-secondary);margin-top:2px;margin-left:2px;margin-right:2px">
+      <span>i=0 (fast)</span><span>i=128</span><span>i=256 (slow)</span>
+    </div>
+  </div>
+  <div class="pe-legend" style="margin-left:28px">
+    <span>−1</span>
+    <canvas id="legend-bar" width="300" height="12" style="flex:1;border-radius:3px;"></canvas>
+    <span>+1</span>
+  </div>
+  <div class="annotation-box" id="ann-box">
+    <div class="ann-row">
+      <div class="ann-col">
+        <div class="ann-head">⚡ Fast dimensions (small <em>i</em>, left)</div>
+        The sine wave completes many full cycles across just a few positions. Adjacent words look very different here — the model uses this to detect <strong>neighbors</strong>.
+      </div>
+      <div class="ann-col">
+        <div class="ann-head">🐢 Slow dimensions (large <em>i</em>, right)</div>
+        The wavelength is enormous (up to 10,000·2π). Values barely change between consecutive words, but differ noticeably over hundreds of positions — telling the model about <strong>long-range structure</strong>.
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+const ROWS = 50;
+const COLS = 256;
+const D_MODEL = 512;
+function pe(pos, i) {
+  const denom = Math.pow(10000, (2 * Math.floor(i / 2)) / D_MODEL);
+  return (i % 2 === 0) ? Math.sin(pos / denom) : Math.cos(pos / denom);
+}
+const matrix = [];
+for (let r = 0; r < ROWS; r++) {
+  matrix[r] = [];
+  for (let c = 0; c < COLS; c++) {
+    matrix[r][c] = pe(r, c);
+  }
+}
+function valToColor(v, alpha) {
+  const t = (v + 1) / 2;
+  const isDark = matchMedia('(prefers-color-scheme: dark)').matches;
+  if (isDark) {
+    if (t > 0.5) {
+      const s = (t - 0.5) * 2;
+      const r = Math.round(30 + s * 200), g = Math.round(40 + s * 100), b = Math.round(80 + s * 80);
+      return `rgba(${r},${g},${b},${alpha})`;
+    } else {
+      const s = (0.5 - t) * 2;
+      const r = Math.round(30 + s * 180), g = Math.round(40 + s * 40), b = Math.round(80 + s * 120);
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+  } else {
+    if (t > 0.5) {
+      const s = (t - 0.5) * 2;
+      const r = Math.round(248 - s * 130), g = Math.round(248 - s * 30), b = Math.round(248 - s * 200);
+      return `rgba(${r},${g},${b},${alpha})`;
+    } else {
+      const s = (0.5 - t) * 2;
+      const r = Math.round(248 - s * 50), g = Math.round(248 - s * 140), b = Math.round(248 - s * 20);
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+  }
+}
+const canvas = document.getElementById('pe-canvas');
+const ctx = canvas.getContext('2d');
+let cellW, cellH, dpr;
+function drawMatrix(highlightCol = -1, highlightRow = -1) {
+  const w = canvas.offsetWidth;
+  const h = Math.round(w * (ROWS / COLS) * 1.4);
+  dpr = window.devicePixelRatio || 1;
+  canvas.width = w * dpr;
+  canvas.height = h * dpr;
+  canvas.style.height = h + 'px';
+  ctx.scale(dpr, dpr);
+  cellW = w / COLS;
+  cellH = h / ROWS;
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      const v = matrix[r][c];
+      const isHL = (highlightCol >= 0 && c === highlightCol) || (highlightRow >= 0 && r === highlightRow);
+      ctx.fillStyle = valToColor(v, isHL ? 1 : (highlightCol >= 0 || highlightRow >= 0 ? 0.35 : 1));
+      ctx.fillRect(c * cellW, r * cellH, cellW + 0.5, cellH + 0.5);
+    }
+  }
+  if (highlightCol >= 0) {
+    ctx.strokeStyle = '#EF9F27';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(highlightCol * cellW + 1, 1, cellW - 1, ROWS * cellH - 2);
+  }
+  if (highlightRow >= 0) {
+    ctx.strokeStyle = '#1D9E75';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(1, highlightRow * cellH + 1, COLS * cellW - 2, cellH - 1);
+  }
+}
+function drawLegend() {
+  const lb = document.getElementById('legend-bar');
+  const lctx = lb.getContext('2d');
+  const w = lb.offsetWidth || 300;
+  lb.width = w * (window.devicePixelRatio || 1);
+  lb.style.width = '100%';
+  for (let x = 0; x < w; x++) {
+    const v = (x / w) * 2 - 1;
+    lctx.fillStyle = valToColor(v, 1);
+    lctx.fillRect(x * (window.devicePixelRatio || 1), 0, (window.devicePixelRatio || 1), 12);
+  }
+}
+let mode = 'cell';
+function setMode(m) {
+  mode = m;
+  ['cell','col','row'].forEach(k => document.getElementById('btn-'+k).classList.toggle('active', k === m));
+  drawMatrix();
+}
+canvas.addEventListener('mousemove', function(e) {
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const col = Math.floor(x / (rect.width / COLS));
+  const row = Math.floor(y / (rect.height / ROWS));
+  if (col < 0 || col >= COLS || row < 0 || row >= ROWS) return;
+  const tt = document.getElementById('tt');
+  const v = matrix[row][col].toFixed(4);
+  if (mode === 'cell') {
+    drawMatrix();
+    tt.innerHTML = `<b>pos=${row}, i=${col}</b><br>value = ${v}<br>${col % 2 === 0 ? 'sin' : 'cos'} wave`;
+  } else if (mode === 'col') {
+    drawMatrix(-1, -1);
+    drawMatrix(col, -1);
+    const speed = col < 20 ? '⚡ fast' : col < 100 ? '⚡ moderate' : '🐢 slow';
+    tt.innerHTML = `<b>Dimension i=${col}</b> (${speed})<br>wavelength ≈ ${(2 * Math.PI * Math.pow(10000, col / D_MODEL)).toFixed(0)}`;
+  } else {
+    drawMatrix(-1, row);
+    tt.innerHTML = `<b>Position pos=${row}</b><br>Word at index ${row} in the sequence`;
+  }
+  tt.style.left = Math.min(x + 10, rect.width - 180) + 'px';
+  tt.style.top = Math.max(y - 36, 0) + 'px';
+  tt.style.opacity = '1';
+});
+canvas.addEventListener('mouseleave', function() {
+  document.getElementById('tt').style.opacity = '0';
+  drawMatrix();
+});
+canvas.addEventListener('click', function(e) {
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const col = Math.floor(x / (rect.width / COLS));
+  const row = Math.floor(y / (rect.height / ROWS));
+  if (mode === 'col') {
+    const speed = col < 20 ? 'fast (high frequency)' : col < 100 ? 'moderate frequency' : 'slow (low frequency)';
+    const ann = document.getElementById('ann-box');
+    ann.innerHTML = `<div class="ann-row"><div class="ann-col"><div class="ann-head" style="color:#BA7517">Dimension i=${col} — ${speed}</div>
+Looking down this column (vertical), the value at each row changes ${col < 30 ? '<strong>rapidly</strong> — adjacent words look very different. The model can distinguish neighbors.' : col > 150 ? '<strong>barely at all</strong> between neighbors — but significantly over hundreds of positions. Good for long-range context.' : 'at a moderate rate.'}<br><br>Wavelength ≈ ${(2 * Math.PI * Math.pow(10000, col / D_MODEL)).toFixed(0)} radians.</div></div>`;
+  } else if (mode === 'row') {
+    const ann = document.getElementById('ann-box');
+    ann.innerHTML = `<div class="ann-row"><div class="ann-col"><div class="ann-head" style="color:#0F6E56">Position pos=${row} — the lookup table row for word ${row}</div>
+Reading across this row (horizontal), you see how the 512-dimensional encoding vector for <em>any word at position ${row}</em> looks: left side oscillates fast, right side is nearly flat. When the Transformer sees a word here, it adds this entire row to the word's embedding.</div></div>`;
+  }
+});
+setTimeout(() => {
+  drawMatrix();
+  drawLegend();
+}, 50);
+window.addEventListener('resize', () => { drawMatrix(); drawLegend(); });
+</script>