feat: publish reasoning deep dive

2026-07-29 00:40:09 +08:00
parent 3db826dd4a
commit dce94b283f
18 changed files with 3449 additions and 33 deletions
@@ -177,7 +177,7 @@ if (layout.documentOverflow > 0 || mobile.documentOverflow > 0 || home.documentO
 }
 if (layout.navGap < 0) failures.push(`桌面导航碰撞：${layout.navGap}px`);
 if (!mobile.menuVisible) failures.push("移动端菜单按钮未显示");
-if (home.releaseCards !== 2) failures.push(`首页新章卡数量异常：${home.releaseCards}`);
+if (home.releaseCards !== 3) failures.push(`首页新章卡数量异常：${home.releaseCards}`);
 if (exceptions.length) failures.push(`浏览器脚本异常：${exceptions.join("; ")}`);

 socket.close();
@@ -0,0 +1,299 @@
+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.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.text);
+  return result.result.value;
+};
+const navigate = async (path) => {
+  await command("Page.navigate", { url: `${baseUrl}${path}` });
+  for (let attempt = 0; attempt < 40; 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("/reasoning/");
+await screenshot("/tmp/llm-atlas-reasoning-desktop.png");
+
+const budget = await evaluate(`(() => {
+  const root = document.querySelector("[data-reasoning-lab]");
+  const correlation = root.querySelector("[data-correlation]");
+  correlation.value = "0";
+  correlation.dispatchEvent(new Event("input", { bubbles: true }));
+  const independent = {
+    coverage: root.querySelector("[data-metric-coverage]").textContent,
+    effective: root.querySelector("[data-effective]").textContent,
+  };
+  correlation.value = "95";
+  correlation.dispatchEvent(new Event("input", { bubbles: true }));
+  const correlated = {
+    coverage: root.querySelector("[data-metric-coverage]").textContent,
+    effective: root.querySelector("[data-effective]").textContent,
+  };
+  root.querySelector('[data-budget-preset="agent"]').click();
+  return {
+    independent,
+    correlated,
+    preset: root.querySelector("[data-budget-name]").textContent,
+    buys: root.querySelector("[data-budget-buys]").textContent,
+    metrics: root.querySelectorAll(".budget-metrics > article").length,
+  };
+})()`);
+
+const grpo = await evaluate(`(() => {
+  const root = document.querySelector("[data-reasoning-lab]");
+  root.querySelector('[data-lab-tab="grpo"]').click();
+  root.querySelector('[data-rollout-profile="all-right"]').click();
+  const allRight = {
+    signal: root.querySelector("[data-group-signal]").textContent,
+    note: root.querySelector("[data-group-note]").textContent,
+  };
+  root.querySelector('[data-rollout-profile="rare"]').click();
+  const ratio = root.querySelector("[data-ratio-window]");
+  ratio.value = "10";
+  ratio.dispatchEvent(new Event("input", { bubbles: true }));
+  return {
+    allRight,
+    rareSignal: root.querySelector("[data-group-signal]").textContent,
+    masks: root.querySelector("[data-mask-count]").textContent,
+    rows: root.querySelectorAll("[data-gradient-row]").length,
+  };
+})()`);
+
+const mopd = await evaluate(`(() => {
+  const root = document.querySelector("[data-reasoning-lab]");
+  root.querySelector('[data-lab-tab="mopd"]').click();
+  root.querySelector('[data-teacher="coding-max"]').click();
+  const distance = root.querySelector("[data-distance]");
+  const clip = root.querySelector("[data-clip]");
+  distance.value = "90";
+  clip.value = "10";
+  distance.dispatchEvent(new Event("input", { bubbles: true }));
+  clip.dispatchEvent(new Event("input", { bubbles: true }));
+  return {
+    teacher: root.querySelector("[data-teacher-name]").textContent,
+    warning: root.querySelector("[data-mopd-warning]").textContent,
+    clipped: root.querySelector("[data-mopd-clipped]").textContent,
+    density: [...root.querySelectorAll(".mopd-metrics > article b")].at(-1).textContent,
+    tokens: root.querySelectorAll("[data-mopd-token]").length,
+  };
+})()`);
+
+const layout = await evaluate(`(() => {
+  const nav = document.querySelector(".top-nav");
+  const meta = document.querySelector(".header-meta");
+  const viewport = document.documentElement.clientWidth;
+  const overflowers = [...document.querySelectorAll("*")]
+    .map((node) => {
+      const rect = node.getBoundingClientRect();
+      return {
+        tag: node.tagName,
+        className: typeof node.className === "string" ? node.className : "",
+        parentClass: typeof node.parentElement?.className === "string" ? node.parentElement.className : "",
+        text: (node.textContent ?? "").trim().replace(/\\s+/g, " ").slice(0, 70),
+        left: Number(rect.left.toFixed(1)),
+        right: Number(rect.right.toFixed(1)),
+        width: Number(rect.width.toFixed(1)),
+        scrollWidth: node.scrollWidth,
+      };
+    })
+    .filter((item) => item.right > viewport + 1 || item.left < -1)
+    .sort((a, b) => Math.max(b.right - viewport, -b.left) - Math.max(a.right - viewport, -a.left))
+    .slice(0, 12);
+  const scrollNodes = [...document.querySelectorAll("*")]
+    .map((node) => ({
+      tag: node.tagName,
+      className: typeof node.className === "string" ? node.className : "",
+      parentClass: typeof node.parentElement?.className === "string" ? node.parentElement.className : "",
+      delta: node.scrollWidth - node.clientWidth,
+      clientWidth: node.clientWidth,
+      scrollWidth: node.scrollWidth,
+      overflowX: getComputedStyle(node).overflowX,
+    }))
+    .filter((item) => item.delta > 1)
+    .sort((a, b) => b.delta - a.delta)
+    .slice(0, 12);
+  return {
+    documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    navGap: Number((meta.getBoundingClientRect().left - nav.getBoundingClientRect().right).toFixed(1)),
+    navLinks: document.querySelectorAll(".top-nav a").length,
+    articleSections: document.querySelectorAll(".article-section").length,
+    paperLinks: document.querySelectorAll(".paper-chain a").length,
+    overflowers,
+  };
+})()`);
+
+await evaluate(`(() => {
+  document.documentElement.style.scrollBehavior = "auto";
+  document.querySelector("[data-reasoning-lab]").scrollIntoView({ block: "start", behavior: "instant" });
+})()`);
+await pause(150);
+await screenshot("/tmp/llm-atlas-reasoning-lab-desktop.png");
+
+await command("Emulation.setDeviceMetricsOverride", {
+  width: 390,
+  height: 844,
+  deviceScaleFactor: 1,
+  mobile: true,
+});
+await navigate("/reasoning/");
+await screenshot("/tmp/llm-atlas-reasoning-mobile-closed.png");
+const mobile = await evaluate(`(() => {
+  const toggle = document.querySelector("#menu-toggle");
+  toggle.click();
+  const viewport = document.documentElement.clientWidth;
+  const overflowers = [...document.querySelectorAll("*")]
+    .map((node) => {
+      const rect = node.getBoundingClientRect();
+      return {
+        tag: node.tagName,
+        className: typeof node.className === "string" ? node.className : "",
+        parentClass: typeof node.parentElement?.className === "string" ? node.parentElement.className : "",
+        text: (node.textContent ?? "").trim().replace(/\\s+/g, " ").slice(0, 70),
+        left: Number(rect.left.toFixed(1)),
+        right: Number(rect.right.toFixed(1)),
+        width: Number(rect.width.toFixed(1)),
+        scrollWidth: node.scrollWidth,
+      };
+    })
+    .filter((item) => item.right > viewport + 1 || item.left < -1)
+    .sort((a, b) => Math.max(b.right - viewport, -b.left) - Math.max(a.right - viewport, -a.left))
+    .slice(0, 12);
+  const scrollNodes = [...document.querySelectorAll("*")]
+    .map((node) => ({
+      tag: node.tagName,
+      className: typeof node.className === "string" ? node.className : "",
+      parentClass: typeof node.parentElement?.className === "string" ? node.parentElement.className : "",
+      delta: node.scrollWidth - node.clientWidth,
+      clientWidth: node.clientWidth,
+      scrollWidth: node.scrollWidth,
+      overflowX: getComputedStyle(node).overflowX,
+    }))
+    .filter((item) => item.delta > 1)
+    .sort((a, b) => b.delta - a.delta)
+    .slice(0, 12);
+  return {
+    documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    menuVisible: getComputedStyle(toggle).display !== "none",
+    menuOpen: toggle.getAttribute("aria-expanded"),
+    title: document.querySelector("h1").innerText,
+    overflowers,
+    scrollNodes,
+  };
+})()`);
+await screenshot("/tmp/llm-atlas-reasoning-mobile.png");
+
+await command("Emulation.setDeviceMetricsOverride", {
+  width: 1440,
+  height: 1100,
+  deviceScaleFactor: 1,
+  mobile: false,
+});
+await navigate("/");
+await evaluate("scrollTo(0, 0)");
+const home = await evaluate(`({
+  documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+  releaseCards: document.querySelectorAll(".release-card").length,
+  firstRelease: document.querySelector(".release-card h2").textContent,
+  navLinks: document.querySelectorAll(".top-nav a").length,
+})`);
+await evaluate(`document.querySelector("#new-chapters").scrollIntoView({ block: "start", behavior: "instant" })`);
+await pause(100);
+await screenshot("/tmp/llm-atlas-home-reasoning-release.png");
+
+const report = { budget, grpo, mopd, layout, mobile, home, exceptions };
+console.log(JSON.stringify(report, null, 2));
+
+const numeric = (value) => Number.parseFloat(value);
+const failures = [];
+if (numeric(budget.independent.coverage) <= numeric(budget.correlated.coverage)) {
+  failures.push("候选相关性没有降低 coverage");
+}
+if (numeric(budget.independent.effective) <= numeric(budget.correlated.effective)) {
+  failures.push("候选相关性没有降低有效独立样本");
+}
+if (!budget.preset.includes("TOOL AGENT") || !budget.buys.includes("新观察")) failures.push("Tool Agent 预设未生效");
+if (budget.metrics !== 4) failures.push(`预算指标数量异常：${budget.metrics}`);
+if (!grpo.allRight.signal.includes("零") || !grpo.allRight.note.includes("Dynamic Sampling")) {
+  failures.push("全对组零优势解释缺失");
+}
+if (grpo.rows !== 8 || numeric(grpo.masks) < 1) failures.push("GRPO 行数或 K2.5 mask 异常");
+if (!mopd.teacher.includes("CODING · MAX") || !mopd.warning.includes("高风险")) failures.push("MOPD 远教师预设未生效");
+if (mopd.tokens !== 12 || mopd.density.trim() !== "12 / 12") failures.push("MOPD 稠密 token 信号异常");
+if (layout.articleSections !== 15 || layout.paperLinks !== 30) failures.push("章节或论文链数量异常");
+if (layout.documentOverflow > 0 || mobile.documentOverflow > 0 || home.documentOverflow > 0) {
+  failures.push("页面存在横向溢出");
+}
+if (layout.navGap < 0) failures.push(`桌面导航碰撞：${layout.navGap}px`);
+if (!mobile.menuVisible || mobile.menuOpen !== "true") failures.push("移动端菜单不可用");
+if (home.releaseCards !== 3 || !home.firstRelease.includes("多想一会儿")) failures.push("首页推理新章入口异常");
+if (exceptions.length) failures.push(`浏览器脚本异常：${exceptions.join("; ")}`);
+
+socket.close();
+if (failures.length) {
+  failures.forEach((failure) => console.error(`- ${failure}`));
+  process.exit(1);
+}