/* global React, ReactDOM */
(function () {
const { useState, useRef, useMemo } = React;
/* =====================================================================
* Projective-Attention Framework Playground
* Embedded via:
*
* Illustrates the core framework claim:
* attention is a token-conditioned hyperplane activation layer
*
* Each key kⱼ defines a hyperplane Hⱼ = {q : qᵀkⱼ = 0}. The query q
* produces a vector of signed incidences sⱼ = qᵀkⱼ. An activation
* function φ (softmax / ReLU / sigmoid) maps incidences to attention
* weights αⱼ = φ(τ·sⱼ). Drag q or any kⱼ and watch the activation
* code change.
*
* No external libraries beyond React are used.
* ===================================================================*/
const W = 480;
const H = 440;
const CX = W / 2;
const CY = H / 2;
const SCALE = 120;
const toSvg = (v) => ({ sx: CX + v.x * SCALE, sy: CY - v.y * SCALE });
const toMath = (sx, sy) => ({ x: (sx - CX) / SCALE, y: (CY - sy) / SCALE });
const dot = (a, b) => a.x * b.x + a.y * b.y;
const norm = (v) => Math.hypot(v.x, v.y) || 1e-12;
const scl = (v, c) => ({ x: v.x * c, y: v.y * c });
function softmax(xs) {
const m = Math.max(...xs);
const e = xs.map((x) => Math.exp(x - m));
const Z = e.reduce((a, b) => a + b, 0) || 1;
return e.map((x) => x / Z);
}
function reluActivate(xs) {
const r = xs.map((v) => Math.max(0, v));
const Z = r.reduce((a, b) => a + b, 0);
return Z > 1e-9 ? r.map((v) => v / Z) : r.map(() => 0);
}
function sigmoidActivate(xs) {
// independent gates, NOT normalized to a simplex — divide by T to keep
// the strip totals bounded so the bar chart remains readable
return xs.map((v) => 1 / (1 + Math.exp(-v))).map((v) => v / xs.length);
}
const TOKEN_COLORS = [
"#6c8cff", // blue
"#ef7ab8", // pink
"#34c08f", // green
"#f59e0b", // amber
"#a78bfa", // violet
];
const PHI_OPTIONS = [
{ id: "softmax", label: "softmax", short: "competitive simplex" },
{ id: "relu", label: "ReLU", short: "halfspace gates (avg)" },
{ id: "sigmoid", label: "sigmoid", short: "independent gates" },
];
const INITIAL_KEYS = [
{ x: 1.05, y: 0.30 },
{ x: 0.35, y: 0.95 },
{ x: -0.60, y: 0.75 },
{ x: -0.85, y: -0.45 },
{ x: 0.45, y: -0.85 },
];
function ProjectiveAttentionFramework() {
const [phi, setPhi] = useState("softmax");
const [keyNorm, setKeyNorm] = useState(true);
const [showHyperplanes, setShowHyperplanes] = useState(true);
const [tau, setTau] = useState(2.5);
const [keys, setKeys] = useState(INITIAL_KEYS);
const [query, setQuery] = useState({ x: 0.55, y: 0.25 });
const computed = useMemo(() => {
const khat = keys.map((k) => {
const n = norm(k);
return { x: k.x / n, y: k.y / n };
});
// raw incidence, with optional KeyNorm
const scores = keys.map((k, j) => {
const refK = keyNorm ? khat[j] : k;
return tau * dot(query, refK);
});
let alpha;
if (phi === "softmax") alpha = softmax(scores);
else if (phi === "relu") alpha = reluActivate(scores);
else alpha = sigmoidActivate(scores);
const sNorm = khat.map((kh) => dot(query, kh));
return { khat, scores, alpha, sNorm };
}, [keys, query, keyNorm, tau, phi]);
// ---- drag ----
const svgRef = useRef(null);
const [drag, setDrag] = useState(null);
const startDrag = (kind, idx) => (e) => {
e.preventDefault();
e.stopPropagation();
setDrag({ kind, idx });
};
const onPointerMove = (e) => {
if (!drag) return;
const rect = svgRef.current.getBoundingClientRect();
const sx = e.clientX - rect.left;
const sy = e.clientY - rect.top;
const p = toMath(sx, sy);
const n = norm(p);
const max = 1.65;
const clamped = n > max ? scl(p, max / n) : p;
if (drag.kind === "query") setQuery(clamped);
else if (drag.kind === "key") {
setKeys((ks) => ks.map((k, i) => (i === drag.idx ? clamped : k)));
}
};
const onPointerUp = () => setDrag(null);
// ---- drawing helpers ----
const drawArrow = (from, to, color, width = 2, opacity = 1, dash = null) => {
const A = toSvg(from);
const B = toSvg(to);
const dx = B.sx - A.sx;
const dy = B.sy - A.sy;
const len = Math.hypot(dx, dy);
if (len < 1) return null;
const ux = dx / len;
const uy = dy / len;
const head = 8;
const hx = B.sx - ux * head;
const hy = B.sy - uy * head;
const px = -uy;
const py = ux;
const headPath =
`M ${B.sx} ${B.sy} ` +
`L ${hx + px * head * 0.55} ${hy + py * head * 0.55} ` +
`L ${hx - px * head * 0.55} ${hy - py * head * 0.55} Z`;
return (
);
};
const drawHyperplane = (kh, color, j) => {
const t = { x: -kh.y, y: kh.x };
const a = scl(t, 4);
const b = scl(t, -4);
const A = toSvg(a);
const B = toSvg(b);
return (
);
};
const axes = (
);
const fmt = (x, d = 2) => (x >= 0 ? "+" : "") + x.toFixed(d);
return (
{/* Header */}
Token-conditioned hyperplane activation
Drag the query q or any key{" "}
kⱼ.
Each key defines a hyperplane through the origin; the activation function
φ maps signed incidences
into the attention pattern α.
{/* φ pills */}
{PHI_OPTIONS.map((m) => (
))}
{/* --- canvas --- */}
{/* Controls under canvas */}
τ
setTau(+e.target.value)}
/>
{tau.toFixed(1)}
{/* --- side panel --- */}
SIGNED INCIDENCE sⱼ = q̂ᵀk̂ⱼ
ACTIVATION CODE αⱼ = φ(τ·sⱼ)
What changes with φ?
{phi === "softmax" && (
Softmax forces the row to a simplex — tokens compete. Sharp τ approaches
argmax (hard retrieval); flat τ approaches uniform mixing.
)}
{phi === "relu" && (
ReLU keeps each halfspace gate independent then averages over active tokens.
Below the hyperplane a token contributes zero — its halfspace test fails.
)}
{phi === "sigmoid" && (
Sigmoid replaces competition with independent bounded gates. Far on the
positive side of any hyperplane the gate opens; far on the negative
side it closes — and many can fire at once.
)}
Note. A 2D cartoon of the framework. In a real attention head each
token contributes a hyperplane in ℝdk. The geometry —
signed incidences, hyperplane arrangement, activation code — is the same.