Knowledge Lifecycle

main.js

@@ -1,6 +1,19 @@
-// LLM Knowledge Lifecycle: browser-side measurement on GPT-2.
+// =============================================================================
+// File        : main.js
+// Project     : The Knowledge Lifecycle of Large Language Models
+// Purpose     : Browser-side D_sync measurement engine: loads GPT-2, runs both prompt
+// conditions, and renders the narrative, bars, gauges, and diagnostics.
+// Tech Stack  : JavaScript (ES modules), transformers.js 3.4.0, ONNX Runtime Web (WASM)
+// Authors     : Amey Thakur (https://github.com/Amey-Thakur)
+//               Sarvesh Talele (https://github.com/sarveshtalele)
+// Repository  : https://github.com/Amey-Thakur/LLM-KNOWLEDGE-LIFECYCLE
+// Release Date: August 16, 2026
+// License     : CC BY 4.0
+// =============================================================================
+
 // The entire computation runs locally: the model is downloaded once from the
-// Hugging Face Hub, and every forward pass happens in this tab.
+// Hugging Face Hub, and every forward pass happens in this tab. Deterministic:
+// identical inputs give identical numbers on every run.
 
 import { AutoTokenizer, AutoModelForCausalLM } from
   "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.0";
@@ -10,7 +23,7 @@ const PRESETS = {
     query: "Question: Is Vioxx safe to prescribe? Answer: Vioxx is considered",
     context: "Context: In September 2004, Merck voluntarily withdrew Vioxx after trials revealed increased cardiovascular risks.",
     answer: " withdrawn",
-    reading: "The paper's headline case. The withdrawal notice is in the prompt, yet the correct answer stays near one in a hundred thousand. Expect D_sync deep past the 9.2-nat failure threshold; the paper's fp32 run measures 12.05 nats with I_ctx = 0.033.",
+    reading: "The paper's headline case. The withdrawal notice sits in the prompt, and the model still answers “safe”. Expect D_sync deep past the 9.2-nat failure threshold; the paper's fp32 run measures 12.05 nats with I_ctx = 0.033.",
   },
   monarch: {
     query: "Question: Who is the current British monarch? Answer: The current British monarch is",
@@ -29,6 +42,7 @@ const PRESETS = {
 const $ = (id) => document.getElementById(id);
 let tokenizer = null;
 let model = null;
+let last = null;   // logits and metadata of the most recent measurement
 
 // ---------- tabs ----------
 document.querySelectorAll(".tab").forEach((btn) => {
@@ -54,9 +68,9 @@ document.querySelectorAll(".preset").forEach((btn) =>
   btn.addEventListener("click", () => applyPreset(btn.dataset.preset)));
 applyPreset("vioxx");
 
-// ---------- model loading ----------
-$("load-btn").addEventListener("click", async () => {
-  $("load-btn").disabled = true;
+// ---------- model loading (on first Measure, so one button drives everything) ----------
+async function ensureModel() {
+  if (model) return;
   $("load-bar-wrap").hidden = false;
   const status = $("load-status");
   const seen = {};
@@ -66,47 +80,44 @@ $("load-btn").addEventListener("click", async () => {
       const vals = Object.values(seen);
       const pct = (vals.reduce((a, b) => a + b, 0) / vals.length) * 100;
       $("load-bar").style.width = pct.toFixed(1) + "%";
-      status.textContent = "downloading " + pct.toFixed(0) + "%";
+      status.textContent = "downloading GPT-2, " + pct.toFixed(0) + "% of 128 MB, one time only";
     }
   };
-  try {
-    status.textContent = "downloading";
-    tokenizer = await AutoTokenizer.from_pretrained("Xenova/gpt2", { progress_callback: progress });
-    // The Xenova/gpt2 repo uses legacy file naming: dtype "q8" maps to the
-    // "_quantized" suffix, and the merged decoder is the 128 MB build.
-    model = await AutoModelForCausalLM.from_pretrained("Xenova/gpt2", {
-      model_file_name: "decoder_model_merged",
-      dtype: "q8",
-      progress_callback: progress,
-    });
-    status.textContent = "ready (GPT-2 base, 8-bit quantized, running locally)";
-    $("load-bar").style.width = "100%";
-    $("run").disabled = false;
-  } catch (e) {
-    status.textContent = "failed to load: " + e.message;
-    $("load-btn").disabled = false;
-  }
-});
+  status.textContent = "downloading GPT-2 (128 MB, one time only)";
+  tokenizer = await AutoTokenizer.from_pretrained("Xenova/gpt2", { progress_callback: progress });
+  // The Xenova/gpt2 repo uses legacy file naming: dtype "q8" maps to the
+  // "_quantized" suffix, and the merged decoder is the 128 MB build.
+  model = await AutoModelForCausalLM.from_pretrained("Xenova/gpt2", {
+    model_file_name: "decoder_model_merged",
+    dtype: "q8",
+    progress_callback: progress,
+  });
+  status.textContent = "model ready: GPT-2 base, 8-bit quantized, running locally";
+  $("load-bar-wrap").hidden = true;
+}
 
-// ---------- measurement ----------
-async function nextTokenDistribution(text) {
+// ---------- measurement core ----------
+async function lastLogits(text) {
   const inputs = await tokenizer(text);
   const { logits } = await model(inputs);
   const [, T, V] = logits.dims;
-  const row = logits.data.slice((T - 1) * V, T * V);
-  // stable softmax
+  return Float32Array.from(logits.data.slice((T - 1) * V, T * V));
+}
+
+function softmax(row, temperature = 1.0) {
+  const V = row.length;
   let max = -Infinity;
   for (let i = 0; i < V; i++) if (row[i] > max) max = row[i];
   let sum = 0;
   const probs = new Float64Array(V);
-  for (let i = 0; i < V; i++) { probs[i] = Math.exp(row[i] - max); sum += probs[i]; }
+  for (let i = 0; i < V; i++) { probs[i] = Math.exp((row[i] - max) / temperature); sum += probs[i]; }
   for (let i = 0; i < V; i++) probs[i] /= sum;
   return probs;
 }
 
 function topK(probs, k) {
-  const idx = [];
   const taken = new Set();
+  const idx = [];
   for (let n = 0; n < k; n++) {
     let best = -1, bp = -1;
     for (let i = 0; i < probs.length; i++) {
@@ -118,27 +129,115 @@ function topK(probs, k) {
   return idx;
 }
 
-function renderTop(tableId, probs, targetId) {
-  const rows = topK(probs, 8).map((i) => {
-    const tok = tokenizer.decode([i]);
-    const hit = i === targetId ? ' class="hit"' : "";
-    return `<tr${hit}><td>${JSON.stringify(tok).slice(1, -1)}</td><td>${(probs[i] * 100).toFixed(4)}%</td></tr>`;
+// ---------- rendering ----------
+const fmtPct = (p) => p >= 0.0001 ? (p * 100).toFixed(2) + "%" : "<0.01%";
+const fmtTok = (t) => JSON.stringify(t).slice(1, -1);
+
+function renderBars(pPlain, pCtx, target) {
+  // Union of both top-5 sets, plus the correct answer, ordered by with-context
+  // probability. Linear scale on purpose: a correct answer you cannot see IS
+  // the finding.
+  const ids = [...new Set([...topK(pCtx, 5), ...topK(pPlain, 5), target])];
+  ids.sort((a, b) => pCtx[b] - pCtx[a]);
+  const maxP = Math.max(pCtx[ids[0]], pPlain[ids[0]], 1e-9);
+  const rows = ids.map((i) => {
+    const tok = fmtTok(tokenizer.decode([i]));
+    const cls = i === target ? "bar-row hit" : "bar-row";
+    const w0 = Math.max(0.4, (pPlain[i] / maxP) * 100);
+    const w1 = Math.max(0.4, (pCtx[i] / maxP) * 100);
+    return `<div class="${cls}">
+      <span class="bar-tok">${tok}</span>
+      <span class="bar-pair">
+        <span class="bar b-plain" style="width:${w0.toFixed(1)}%"></span><em>${fmtPct(pPlain[i])}</em>
+        <span class="bar b-ctx" style="width:${w1.toFixed(1)}%"></span><em>${fmtPct(pCtx[i])}</em>
+      </span>
+    </div>`;
   });
-  $(tableId).innerHTML = "<tr><th>token</th><th>probability</th></tr>" + rows.join("");
+  $("bars").innerHTML =
+    '<div class="bar-row bar-head"><span class="bar-tok"></span><span class="bar-pair"><em>without document</em><em>with document</em></span></div>'
+    + rows.join("");
 }
 
+function narrative(m) {
+  const s = [];
+  const topCtxTok = fmtTok(m.topCtx);
+  const ansTok = fmtTok(m.answerPiece).trim();
+  s.push(`With the corrective document in its prompt, the model's most likely continuation is “${topCtxTok}” at ${fmtPct(m.pTopCtx)}.`);
+  const odds = Math.round(1 / m.pt1);
+  s.push(`The correct answer “${ansTok}” receives ${fmtPct(m.pt1)}: about one chance in ${odds.toLocaleString()}.`);
+  if (m.topCtx === m.topPlain && m.ictx < 0.05) {
+    s.push(`The document changed almost nothing. The model's whole distribution moved by ${m.ictx.toFixed(3)} nats, and its preferred answer is the same one it gives with no document at all.`);
+  } else if (m.pt1 > m.pt0 * 1.5 && m.topCtx !== fmtTok(m.answerPiece)) {
+    const factor = (m.pt1 / m.pt0).toFixed(1);
+    s.push(`The document helped: it multiplied the correct answer's probability by ${factor}. It still loses.`);
+  } else if (m.pTopCtx > m.pTopPlainSameTok) {
+    s.push(`Counterintuitively, the document made the leading wrong answer stronger, raising it from ${fmtPct(m.pTopPlainSameTok)} to ${fmtPct(m.pTopCtx)}. Mentioning a fact, even to correct it, reinforces the association.`);
+  }
+  if (m.topCtx === fmtTok(m.answerPiece)) {
+    s.push("Here the document won: the model's top answer is the correct one. This is what synchronization looks like.");
+  }
+  return s.join(" ");
+}
+
+function renderStagebar(m) {
+  const r = $("sb-retrieve"), u = $("sb-update"), note = $("stagenote");
+  $("stagebar").classList.add("diagnosed");
+  document.querySelectorAll(".stagebar .s1, .stagebar .s2, .stagebar .s5")
+    .forEach((el) => el.classList.add("dimstage"));
+  r.textContent = "Retrieve ✓";
+  if (m.dsync > 9.2) {
+    u.textContent = "Update ✗";
+    note.textContent = "Retrieve succeeded: the document is in the context. Update failed: the conflict was resolved in favor of stale memory.";
+  } else if (m.dsync > 0.7) {
+    u.textContent = "Update △";
+    note.textContent = "Retrieve succeeded. Update is partial: the document shifted the model, but the stale memory still leads.";
+  } else {
+    u.textContent = "Update ✓";
+    note.textContent = "Retrieve succeeded and Update resolved the conflict: the context controls the answer.";
+  }
+}
+
+function renderTemperature() {
+  if (!last) return;
+  const T = parseFloat($("temp").value);
+  $("t-value").textContent = T.toFixed(1);
+  const p = softmax(last.rowCtx, T);
+  const pAns = Math.max(p[last.target], 1e-12);
+  const top = topK(p, 1)[0];
+  const draws = Math.round(1 / pAns);
+  $("temp-readout").textContent =
+    `At temperature ${T.toFixed(1)}, sampling one answer with the document present: ` +
+    `the correct answer comes up about once in ${draws.toLocaleString()} draws; ` +
+    `the most likely token is “${fmtTok(tokenizer.decode([top]))}” at ${fmtPct(p[top])}. ` +
+    (T > 1.0 ? "Higher temperature flattens the distribution but cannot rescue an answer this far down."
+             : "Lower temperature sharpens the model's existing preference.");
+}
+$("temp").addEventListener("input", renderTemperature);
+
+// ---------- the one-button flow ----------
 $("run").addEventListener("click", async () => {
   const runBtn = $("run");
   runBtn.disabled = true;
-  runBtn.textContent = "measuring...";
   try {
+    runBtn.textContent = model ? "measuring..." : "loading model...";
+    await ensureModel();
+    runBtn.textContent = "measuring...";
+
     const query = $("query").value.trim();
     const context = $("context").value.trim();
+    const repeat = parseInt($("repeat").value, 10);
     let answer = $("answer").value;
     if (!answer.startsWith(" ")) answer = " " + answer.trim();
+    if (!query || !context || !answer.trim()) {
+      $("load-status").textContent = "enter a query, a corrective document, and the correct continuation";
+      return;
+    }
 
-    const pPlain = await nextTokenDistribution(query);
-    const pCtx = await nextTokenDistribution(context + "\n" + query);
+    const doc = Array(repeat).fill(context).join("\n");
+    const rowPlain = await lastLogits(query);
+    const rowCtx = await lastLogits(doc + "\n" + query);
+    const pPlain = softmax(rowPlain);
+    const pCtx = softmax(rowCtx);
 
     const ids = tokenizer.encode(answer);
     const pieces = ids.map((i) => tokenizer.decode([i]));
@@ -152,6 +251,9 @@ $("run").addEventListener("click", async () => {
       if (pCtx[i] > 0 && pPlain[i] > 0) ictx += pCtx[i] * Math.log(pCtx[i] / pPlain[i]);
     }
 
+    const topPlainId = topK(pPlain, 1)[0];
+    const topCtxId = topK(pCtx, 1)[0];
+
     let chipText, chipClass, detail;
     if (dsync > 9.2) {
       if (ictx < 0.05) {
@@ -172,32 +274,46 @@ $("run").addEventListener("click", async () => {
       detail = "correct answer holds at least half the probability mass";
     }
 
-    // Marker positions follow the drawn zone boundaries: D_sync thresholds
+    // Gauge markers follow the drawn zone boundaries: D_sync thresholds
     // 0.7 / 4.6 / 9.2 sit at 5% / 33% / 66%, scale capped at 14 nats.
     const dPos = dsync <= 0.7 ? (dsync / 0.7) * 5
       : dsync <= 4.6 ? 5 + ((dsync - 0.7) / 3.9) * 28
       : dsync <= 9.2 ? 33 + ((dsync - 4.6) / 4.6) * 33
       : Math.min(100, 66 + ((dsync - 9.2) / 4.8) * 34);
-    // I_ctx thresholds 0.05 / 0.5 sit at 10% / 50%, scale capped at 2 nats.
     const iPos = ictx <= 0.05 ? (ictx / 0.05) * 10
       : ictx <= 0.5 ? 10 + ((ictx - 0.05) / 0.45) * 40
       : Math.min(100, 50 + ((ictx - 0.5) / 1.5) * 50);
 
+    const m = {
+      pt0, pt1, dsync, ictx,
+      answerPiece: pieces[0],
+      topPlain: fmtTok(tokenizer.decode([topPlainId])),
+      topCtx: fmtTok(tokenizer.decode([topCtxId])),
+      pTopCtx: pCtx[topCtxId],
+      pTopPlainSameTok: pPlain[topCtxId],
+    };
+
     const chip = $("verdict-chip");
     chip.textContent = chipText;
     chip.className = "chip " + chipClass;
-    $("r-verdict-detail").textContent = detail;
+    $("r-verdict-detail").textContent = detail + (repeat > 1 ? ` (document repeated ${repeat}x)` : "");
+    $("narrative").textContent = narrative(m);
+    renderBars(pPlain, pCtx, target);
     $("g-marker").style.left = dPos.toFixed(1) + "%";
     $("g-ictx").style.left = iPos.toFixed(1) + "%";
-
-    $("r-tok").textContent = `${JSON.stringify(pieces)} (${ids.length} piece(s); first piece measured)`;
-    $("r-p0").textContent = pt0.toExponential(2);
-    $("r-p1").textContent = pt1.toExponential(2);
     $("r-dsync").textContent = dsync.toFixed(2) + " nats";
     $("r-ictx").textContent = ictx.toFixed(3) + " nats";
-    renderTop("t-plain", pPlain, target);
-    renderTop("t-ctx", pCtx, target);
+    $("r-p0").textContent = pt0.toExponential(2);
+    $("r-p1").textContent = pt1.toExponential(2);
+    $("r-tok").textContent = `${JSON.stringify(pieces)} (${ids.length} piece(s); first piece measured)`;
+    renderStagebar({ dsync });
+
+    last = { rowCtx, target };
+    renderTemperature();
+
     $("results").hidden = false;
+  } catch (e) {
+    $("load-status").textContent = "error: " + e.message;
   } finally {
     runBtn.disabled = false;
     runBtn.textContent = "Measure";