feat: publish language model origins chapter

2026-07-29 04:47:36 +08:00
parent 2997434f7f
commit a54152dc24
22 changed files with 5521 additions and 35 deletions
@@ -0,0 +1,218 @@
+import { writeFileSync } from "node:fs";
+
+const cdpPort = process.env.CDP_PORT ?? "9224";
+const baseUrl = process.env.SITE_URL ?? "http://127.0.0.1:4323";
+const pages = await fetch(`http://127.0.0.1:${cdpPort}/json/list`).then((response) => response.json());
+const page = pages.find((entry) => entry.type === "page");
+if (!page) throw new Error(`CDP ${cdpPort} 没有可用页面`);
+
+const socket = new WebSocket(page.webSocketDebuggerUrl);
+await new Promise((resolve, reject) => {
+  socket.addEventListener("open", resolve, { once: true });
+  socket.addEventListener("error", reject, { once: true });
+});
+
+let nextId = 0;
+const pending = new Map();
+const exceptions = [];
+socket.addEventListener("message", (event) => {
+  const message = JSON.parse(event.data);
+  if (message.id && pending.has(message.id)) {
+    const { resolve, reject } = pending.get(message.id);
+    pending.delete(message.id);
+    if (message.error) reject(new Error(message.error.message));
+    else resolve(message.result);
+  }
+  if (message.method === "Runtime.exceptionThrown") {
+    exceptions.push(message.params.exceptionDetails.exception?.description ?? message.params.exceptionDetails.text);
+  }
+});
+
+const command = (method, params = {}) => new Promise((resolve, reject) => {
+  const id = ++nextId;
+  pending.set(id, { resolve, reject });
+  socket.send(JSON.stringify({ id, method, params }));
+});
+const pause = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+const evaluate = async (expression) => {
+  const result = await command("Runtime.evaluate", { expression, returnByValue: true, awaitPromise: true });
+  if (result.exceptionDetails) throw new Error(result.exceptionDetails.exception?.description ?? result.exceptionDetails.text);
+  return result.result.value;
+};
+const navigate = async (path) => {
+  await command("Page.navigate", { url: `${baseUrl}${path}` });
+  for (let attempt = 0; attempt < 60; attempt += 1) {
+    await pause(100);
+    if (await evaluate("document.readyState === 'complete'")) return;
+  }
+  throw new Error(`${path} 加载超时`);
+};
+const screenshot = async (path, full = false) => {
+  const params = { format: "png", captureBeyondViewport: full };
+  if (full) {
+    const metrics = await command("Page.getLayoutMetrics");
+    params.clip = {
+      x: 0,
+      y: 0,
+      width: metrics.cssContentSize.width,
+      height: metrics.cssContentSize.height,
+      scale: 1,
+    };
+  }
+  const result = await command("Page.captureScreenshot", params);
+  writeFileSync(path, Buffer.from(result.data, "base64"));
+};
+
+await command("Page.enable");
+await command("Runtime.enable");
+await command("Emulation.setDeviceMetricsOverride", {
+  width: 1440,
+  height: 1100,
+  deviceScaleFactor: 1,
+  mobile: false,
+});
+await navigate("/foundations/language-models/");
+await screenshot("/tmp/llm-atlas-language-history-desktop.png");
+
+const overview = await evaluate(`(() => ({
+  title: document.querySelector("h1")?.textContent.trim(),
+  sections: document.querySelectorAll(".article-section").length,
+  tocLinks: document.querySelectorAll(".side-rail a").length,
+  paperLinks: document.querySelectorAll(".paper-chain a").length,
+  labTabs: document.querySelectorAll("[data-history-tab]").length,
+  labPanels: document.querySelectorAll("[data-history-panel]").length,
+  documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+  mainObjective: document.querySelector(".objective-stack .main h3")?.textContent,
+}))()`);
+
+const probability = await evaluate(`(() => {
+  const root = document.querySelector("[data-history-lab]");
+  const read = () => ({
+    probability: root.querySelector("[data-sequence-probability]").textContent,
+    nll: root.querySelector("[data-sequence-nll]").textContent,
+    ppl: root.querySelector("[data-sequence-ppl]").textContent,
+    zeroSteps: root.querySelectorAll(".sequence-readout .zero").length,
+  });
+  const initial = read();
+  const slider = root.querySelector("[data-smoothing]");
+  slider.value = "20";
+  slider.dispatchEvent(new Event("input", { bubbles: true }));
+  const smoothed = read();
+  root.querySelector("[data-ngram-order]").value = "1";
+  root.querySelector("[data-ngram-order]").dispatchEvent(new Event("change", { bubbles: true }));
+  const unigram = read();
+  return { initial, smoothed, unigram };
+})()`);
+
+const embedding = await evaluate(`(() => {
+  const root = document.querySelector("[data-history-lab]");
+  root.querySelector('[data-history-tab="embedding"]').click();
+  root.querySelector('[data-word="dog"]').click();
+  return {
+    selected: root.querySelector("[data-selected-word]").textContent,
+    onehot: [...root.querySelectorAll("[data-onehot-vector] i")].map((node) => node.textContent).join(""),
+    activeMap: root.querySelector(".map-point.selected b").textContent,
+    visiblePanel: root.querySelector("[data-history-panel]:not([hidden])").dataset.historyPanel,
+  };
+})()`);
+
+const memory = await evaluate(`(() => {
+  const root = document.querySelector("[data-history-lab]");
+  root.querySelector('[data-history-tab="memory"]').click();
+  const distance = root.querySelector("[data-memory-distance]");
+  const retention = root.querySelector("[data-memory-retention]");
+  distance.value = "50";
+  distance.dispatchEvent(new Event("input", { bubbles: true }));
+  retention.value = "0.99";
+  retention.dispatchEvent(new Event("change", { bubbles: true }));
+  return {
+    signal: root.querySelector("[data-memory-signal]").textContent,
+    distance: root.querySelector("[data-distance-label]").textContent,
+    rnn: root.querySelector("[data-rnn-value]").textContent,
+    lstm: root.querySelector("[data-lstm-value]").textContent,
+  };
+})()`);
+
+const seq2seq = await evaluate(`(() => {
+  const root = document.querySelector("[data-history-lab]");
+  root.querySelector('[data-history-tab="seq2seq"]').click();
+  root.querySelector('[data-seq-mode="attention"]').click();
+  root.querySelector('[data-decoder-step="1"]').click();
+  const weights = [...root.querySelectorAll("[data-source-value]")].map((node) => node.textContent);
+  const firstTab = root.querySelector('[data-history-tab="probability"]');
+  firstTab.focus();
+  firstTab.dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
+  return {
+    token: root.querySelector("[data-decoder-token]").textContent,
+    weights,
+    note: root.querySelector("[data-seq-note]").textContent,
+    bridge: root.querySelector("[data-bridge-label]").textContent,
+    keyboardSelected: root.querySelector('[data-history-tab][aria-selected="true"]').dataset.historyTab,
+    keyboardVisible: root.querySelector("[data-history-panel]:not([hidden])").dataset.historyPanel,
+  };
+})()`);
+
+await evaluate(`document.querySelector("[data-history-lab]").scrollIntoView({ block: "start", behavior: "instant" })`);
+await pause(180);
+await screenshot("/tmp/llm-atlas-language-history-lab-desktop.png");
+
+await command("Emulation.setDeviceMetricsOverride", {
+  width: 390,
+  height: 844,
+  deviceScaleFactor: 1,
+  mobile: true,
+});
+await navigate("/foundations/language-models/");
+const mobile = await evaluate(`(() => {
+  const root = document.querySelector("[data-history-lab]");
+  root.scrollIntoView({ block: "start", behavior: "instant" });
+  const toggle = document.querySelector("#menu-toggle");
+  toggle?.click();
+  return {
+    documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    menuVisible: getComputedStyle(toggle).display !== "none",
+    menuOpen: toggle.getAttribute("aria-expanded"),
+    tabs: root.querySelectorAll("[data-history-tab]").length,
+    offenders: [...document.querySelectorAll("body *")]
+      .filter((node) => node.getBoundingClientRect().right > document.documentElement.clientWidth + 1)
+      .slice(0, 12)
+      .map((node) => ({
+        tag: node.tagName,
+        className: typeof node.className === "string" ? node.className : "",
+        right: Math.round(node.getBoundingClientRect().right),
+        width: Math.round(node.getBoundingClientRect().width),
+      })),
+  };
+})()`);
+await pause(180);
+await screenshot("/tmp/llm-atlas-language-history-mobile.png");
+
+const report = { overview, probability, embedding, memory, seq2seq, mobile, exceptions };
+console.log(JSON.stringify(report, null, 2));
+
+const numeric = (value) => Number.parseFloat(value);
+const failures = [];
+if (overview.sections !== 21 || overview.tocLinks !== 21) failures.push("章节/目录数量异常");
+if (overview.paperLinks !== 33) failures.push("正式论文链不是 33 个节点");
+if (overview.labTabs !== 4 || overview.labPanels !== 4) failures.push("四联实验结构异常");
+if (overview.documentOverflow > 1 || mobile.documentOverflow > 1) failures.push("桌面或移动端存在横向溢出");
+if (overview.mainObjective?.trim() !== "Next-token NLL") failures.push("当代目标主次标签异常");
+if (probability.initial.ppl !== "∞" || probability.initial.zeroSteps !== 1) failures.push("零概率未击穿初始序列");
+if (!Number.isFinite(numeric(probability.smoothed.ppl)) || numeric(probability.smoothed.probability) <= 0) failures.push("平滑没有救活未见序列");
+if (probability.unigram.zeroSteps !== 0) failures.push("Unigram 不应出现零概率步骤");
+if (embedding.selected.trim() !== "狗" || embedding.onehot !== "0100000" || embedding.activeMap.trim() !== "狗") failures.push("Embedding 选择状态不同步");
+if (memory.distance.trim() !== "50 步" || numeric(memory.signal) < 60 || numeric(memory.signal) > 61) failures.push("记忆指数衰减计算异常");
+if (seq2seq.token.trim() !== "猫" || seq2seq.weights[2] !== "72%" || !seq2seq.note.includes("cat")) failures.push("Attention 对齐状态异常");
+if (seq2seq.bridge.trim() !== "Σ αᵢhᵢ") failures.push("Attention context 标签异常");
+if (seq2seq.keyboardSelected !== "seq2seq" || seq2seq.keyboardVisible !== "seq2seq") failures.push("实验 tab 键盘导航异常");
+if (!mobile.menuVisible || mobile.menuOpen !== "true") failures.push("移动导航异常");
+if (exceptions.length) failures.push(`浏览器异常：${exceptions.join(" | ")}`);
+
+if (failures.length) {
+  console.error(`\\nFAIL\\n- ${failures.join("\\n- ")}`);
+  process.exitCode = 1;
+} else {
+  console.log("\\nPASS language-model-history browser regression");
+}
+
+socket.close();