widgets/matrix.js

/* Token-matrix tester — the SOURCE of the paper's data flow. Edit the token×feature matrix X and it is
 * published on the shared bus, so Q·Kᵀ, softmax and the weighted sum downstream all recompute from it:
 * change one number here and watch it ripple through every later card. Play reveals X row (token) by row. */
(function () {
  const k = MANIMO.kit, bus = MANIMO.bus;
  function mount(root, concept) {
    const p = (concept && concept.params) || {};
    const io = (concept && concept.io) || {};
    const toks = (p.tokens || ["the", "cat", "sat"]).slice(0, 6);
    const X0 = p.X || toks.map((_, i) => toks.map((__, j) => (i === j ? 1 : 0)));
    const rows = X0.length, cols = (X0[0] || []).length;
    const X = k.grid(rows, cols, X0);
    const key = io.produces || "X";
    const labels = k.el("div", { class: "rowlbls" }, toks.slice(0, rows).map((t) => k.el("span", { class: "rowlbl" }, [t])));
    const log = k.panel("steps");

    function publish() { bus.set(key, X.get()); }
    X.node.addEventListener("input", publish);
    publish();

    // detailed reveal: light up the matrix one token-row at a time.
    function render(step) {
      X.highlight(all(rows, cols), false);
      k.clear(log); log.appendChild(k.el("div", { class: "steps-h" }, ["X — token × feature  (" + step + "/" + rows + ")"]));
      for (let i = 0; i < step; i++) {
        X.highlight(rowCells(i, cols));
        k.logLine(log, "row " + i + " = “" + (toks[i] || ("t" + i)) + "” → [" + X.get()[i].map(k.fmt).join(", ") + "]", i === step - 1);
      }
    }
    const ctrl = k.stepper(new Array(rows), render);

    root.appendChild(k.row([col("X (" + rows + "×" + cols + ")", X.node), labels], "mats"));
    root.appendChild(k.row([k.button("▸ Step", () => ctrl.next()), k.button("▶ Play", () => ctrl.play(1100)), k.button("↺ Reset", () => ctrl.reset(), "ghost")], "ctrls"));
    root.appendChild(log);
    return k.player(ctrl, 1050);
  }
  function col(t, node) { return k.el("div", { class: "matcol" }, [k.el("div", { class: "matlbl" }, [t]), node]); }
  function all(r, c) { const o = []; for (let i = 0; i < r; i++) for (let j = 0; j < c; j++) o.push([i, j]); return o; }
  function rowCells(i, c) { const o = []; for (let j = 0; j < c; j++) o.push([i, j]); return o; }
  MANIMO.registry["matrix"] = { title: "Token Matrix", mount };
})();