llm-atlas/scripts/check-inference-serving-browser.mjs

import { writeFileSync } from "node:fs";

const cdpPort = process.env.CDP_PORT ?? "9227";
const baseUrl = process.env.SITE_URL ?? "http://127.0.0.1:4327";
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 < 70; attempt += 1) {
    await pause(100);
    if (await evaluate("document.readyState === 'complete'")) return;
  }
  throw new Error(`${path} 加载超时`);
};
const screenshot = async (path) => {
  const result = await command("Page.captureScreenshot", { format: "png", captureBeyondViewport: false });
  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("/systems/inference/");
await screenshot("/tmp/llm-atlas-inference-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-is-tab]").length,
  labPanels: document.querySelectorAll("[data-is-panel]").length,
  ledgers: document.querySelectorAll(".ledger-grid > article").length,
  navLinks: document.querySelectorAll(".top-nav a").length,
  documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
}))()`);

const memory = await evaluate(`(() => {
  const root = document.querySelector("[data-inference-lab]");
  const read = () => ({
    weight: root.querySelector("[data-memory-weight]").textContent.trim(),
    perToken: root.querySelector("[data-memory-kv-token]").textContent.trim(),
    request: root.querySelector("[data-memory-request]").textContent.trim(),
    active: root.querySelector("[data-memory-active]").textContent.trim(),
    fit: root.querySelector("[data-memory-fit]").textContent.trim(),
    status: root.querySelector("[data-memory-status]").textContent.trim(),
    note: root.querySelector("[data-memory-note]").textContent.trim(),
    visible: root.querySelector("[data-is-panel]:not([hidden])").dataset.isPanel,
  });
  const initial = read();
  root.querySelector('[data-memory-preset="mha"]').click();
  const params = root.querySelector("[data-memory-params]");
  const context = root.querySelector("[data-memory-context]");
  const concurrency = root.querySelector("[data-memory-concurrency]");
  params.value = "671";
  params.dispatchEvent(new Event("input", { bubbles: true }));
  context.value = "131072";
  context.dispatchEvent(new Event("input", { bubbles: true }));
  concurrency.value = "32";
  concurrency.dispatchEvent(new Event("input", { bubbles: true }));
  const exploded = read();
  root.querySelector('[data-memory-preset="k3"]').click();
  const k3 = read();
  return { initial, exploded, k3 };
})()`);

const phase = await evaluate(`(() => {
  const root = document.querySelector("[data-inference-lab]");
  root.querySelector('[data-is-tab="phase"]').click();
  const read = () => ({
    ttft: root.querySelector("[data-phase-ttft]").textContent.trim(),
    tpot: root.querySelector("[data-phase-tpot]").textContent.trim(),
    goodput: root.querySelector("[data-phase-goodput]").textContent.trim(),
    stall: root.querySelector("[data-phase-stall]").textContent.trim(),
    bottleneck: root.querySelector("[data-phase-bottleneck]").textContent.trim(),
    status: root.querySelector("[data-phase-status]").textContent.trim(),
  });
  const staticBatch = read();
  root.querySelector('[data-phase-strategy="chunked"]').click();
  const chunked = read();
  root.querySelector('[data-phase-strategy="pd"]').click();
  const network = root.querySelector("[data-phase-network]");
  network.value = "25";
  network.dispatchEvent(new Event("input", { bubbles: true }));
  const slowPd = read();
  return { staticBatch, chunked, slowPd };
})()`);

const speculative = await evaluate(`(() => {
  const root = document.querySelector("[data-inference-lab]");
  root.querySelector('[data-is-tab="speculative"]').click();
  const read = () => ({
    expected: root.querySelector("[data-spec-expected]").textContent.trim(),
    speedup: root.querySelector("[data-spec-speedup]").textContent.trim(),
    waste: root.querySelector("[data-spec-waste]").textContent.trim(),
    status: root.querySelector("[data-spec-status]").textContent.trim(),
    evidence: root.querySelector("[data-spec-evidence]").textContent.trim(),
    tokens: root.querySelectorAll("[data-spec-strip] i").length,
  });
  const k3 = read();
  const acceptance = root.querySelector("[data-spec-a]");
  acceptance.value = "20";
  acceptance.dispatchEvent(new Event("input", { bubbles: true }));
  const lowAcceptance = read();
  return { k3, lowAcceptance };
})()`);

const fleet = await evaluate(`(() => {
  const root = document.querySelector("[data-inference-lab]");
  root.querySelector('[data-is-tab="fleet"]').click();
  root.querySelector("[data-fleet-k3]").click();
  const read = () => ({
    avoided: root.querySelector("[data-fleet-avoided]").textContent.trim(),
    skew: root.querySelector("[data-fleet-skew]").textContent.trim(),
    recompute: root.querySelector("[data-fleet-recompute]").textContent.trim(),
    admitted: root.querySelector("[data-fleet-admitted]").textContent.trim(),
    rejected: root.querySelector("[data-fleet-rejected]").textContent.trim(),
    shortSlo: root.querySelector("[data-fleet-short-slo]").textContent.trim(),
    state: root.querySelector("[data-fleet-state]").textContent.trim(),
  });
  const k3 = read();
  const failure = root.querySelector("[data-fleet-failure]");
  failure.checked = true;
  failure.dispatchEvent(new Event("input", { bubbles: true }));
  const failed = read();
  failure.checked = false;
  failure.dispatchEvent(new Event("input", { bubbles: true }));
  const admission = root.querySelector("[data-fleet-admission]");
  const burst = root.querySelector("[data-fleet-burst]");
  admission.value = "average";
  admission.dispatchEvent(new Event("input", { bubbles: true }));
  burst.value = "100";
  burst.dispatchEvent(new Event("input", { bubbles: true }));
  const bursty = read();
  const firstTab = root.querySelector('[data-is-tab="memory"]');
  firstTab.focus();
  firstTab.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
  return {
    k3,
    failed,
    bursty,
    keyboardSelected: root.querySelector('[data-is-tab][aria-selected="true"]').dataset.isTab,
    keyboardVisible: root.querySelector("[data-is-panel]:not([hidden])").dataset.isPanel,
  };
})()`);

await evaluate(`document.querySelector("[data-inference-lab]").scrollIntoView({ block: "start", behavior: "instant" })`);
await pause(180);
await screenshot("/tmp/llm-atlas-inference-lab-desktop.png");

await navigate("/");
const home = await evaluate(`(() => ({
  releaseCards: document.querySelectorAll(".release-card").length,
  firstRelease: document.querySelector(".release-card h2").textContent.trim(),
  firstHref: document.querySelector(".release-card").getAttribute("href"),
  paperCount: document.querySelector(".hero-stats div:nth-child(3) b").textContent.trim(),
  navLinks: document.querySelectorAll(".top-nav a").length,
}))()`);

await navigate("/papers/");
const papers = await evaluate(`(() => {
  const button = [...document.querySelectorAll("[data-filter]")].find((node) => node.textContent.trim() === "推理服务");
  button?.click();
  return {
    total: document.querySelectorAll("[data-paper]").length,
    visible: document.querySelectorAll("[data-paper]:not([hidden])").length,
    hasFilter: Boolean(button),
  };
})()`);

await command("Emulation.setDeviceMetricsOverride", {
  width: 390,
  height: 844,
  deviceScaleFactor: 1,
  mobile: true,
});
await navigate("/systems/inference/");
const mobile = await evaluate(`(() => {
  const root = document.querySelector("[data-inference-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"),
    mobileLinks: document.querySelectorAll("#mobile-nav a").length,
    tabs: root.querySelectorAll("[data-is-tab]").length,
    offenders: [...document.querySelectorAll("body *")]
      .filter((node) => !node.closest(".chunk-schedule, .formula, .paper-chain, .scheduler-board"))
      .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-inference-mobile.png");

const report = { overview, memory, phase, speculative, fleet, home, papers, mobile, exceptions };
console.log(JSON.stringify(report, null, 2));

const numeric = (value) => Number.parseFloat(value.replaceAll(",", ""));
const failures = [];
if (!overview.title.includes("千万人用得起")) failures.push("章节标题异常");
if (overview.sections !== 31 || overview.tocLinks !== 31) failures.push("章节/目录数量异常");
if (overview.paperLinks !== 62) failures.push("正式论文链不是 62 个节点");
if (overview.ledgers !== 18) failures.push("十八本服务账结构异常");
if (overview.labTabs !== 4 || overview.labPanels !== 4) failures.push("四联实验结构异常");
if (overview.navLinks !== 18 || home.navLinks !== 18 || mobile.mobileLinks !== 18) failures.push("全站导航未同步推理服务专题");
if (overview.documentOverflow > 1 || mobile.documentOverflow > 1) failures.push("桌面或移动端存在横向溢出");
if (!memory.initial.weight.includes("32.6") || !memory.initial.perToken.includes("128") || memory.initial.visible !== "memory") failures.push("GQA 默认显存账异常");
if (!memory.exploded.status.includes("OOM") || !memory.exploded.fit.includes("over")) failures.push("极端 MHA 配置没有触发 OOM");
if (!memory.k3.note.includes("69") || !memory.k3.note.includes("24") || !memory.k3.note.includes("未伪造")) failures.push("K3 混合状态证据边界异常");
if (numeric(phase.chunked.stall) >= numeric(phase.staticBatch.stall) || numeric(phase.chunked.tpot) >= numeric(phase.staticBatch.tpot)) failures.push("Chunked prefill 没有降低教学 stall / TPOT");
if (!phase.slowPd.bottleneck.includes("慢网络") || !phase.slowPd.bottleneck.includes("KV")) failures.push("慢网络没有暴露 P/D 状态传输瓶颈");
if (numeric(speculative.k3.speedup) <= 1 || speculative.k3.tokens !== 8 || !speculative.k3.evidence.includes("7 步")) failures.push("K3 7-step 推测预设异常");
if (speculative.lowAcceptance.status !== "NO GAIN" || numeric(speculative.lowAcceptance.speedup) >= 1) failures.push("低验收率没有触发负加速");
if (!fleet.k3.avoided.includes("320K") || fleet.k3.shortSlo !== "PROTECTED") failures.push("K3 coding trace 缓存 / 准入预设异常");
if (!fleet.failed.state.includes("SECONDARY RE-PREFILL") || !fleet.failed.recompute.includes("FAILED PRIMARY")) failures.push("缓存故障没有触发原子失效后的重算");
if (fleet.bursty.shortSlo !== "VIOLATED") failures.push("平均并发阈值没有暴露长请求突发");
if (fleet.keyboardSelected !== "phase" || fleet.keyboardVisible !== "phase") failures.push("实验键盘 tab 导航异常");
if (home.releaseCards !== 13 || !home.firstRelease.includes("推理优化") || home.firstHref !== "/systems/inference/") failures.push("首页推理服务首发入口异常");
if (home.paperCount !== "400" || papers.total !== 400 || !papers.hasFilter || papers.visible !== 45) failures.push("论文库推理服务标签或总数异常");
if (!mobile.menuVisible || mobile.menuOpen !== "true" || mobile.tabs !== 4) failures.push("移动端导航或实验异常");
if (mobile.offenders.length) failures.push(`移动端越界元素：${JSON.stringify(mobile.offenders)}`);
if (exceptions.length) failures.push(`浏览器异常：${exceptions.join(" | ")}`);

if (failures.length) {
  console.error(`\nFAIL\n- ${failures.join("\n- ")}`);
  process.exitCode = 1;
} else {
  console.log("\nPASS inference serving browser regression");
}

socket.close();