scripts/render-tone-comparison.mjs

import { mkdir, readFile, writeFile } from "node:fs/promises";
import { createRequire } from "node:module";
import { join } from "node:path";
import { pathToFileURL } from "node:url";
import { exportHtml } from "../src/export-html.js";

const workspace = new URL("../", import.meta.url);
const realOutput = new URL("../output/real-e2e/", import.meta.url);
const comparisonRoot = new URL("../output/tone-comparison/", import.meta.url);
const design = JSON.parse(await readFile(new URL("design.json", realOutput), "utf8"));
const cache = JSON.parse(await readFile(new URL("tone-cache-v2.json", realOutput), "utf8"));
const directions = cache.directions || [];
const summary = JSON.parse(await readFile(new URL("e2e-summary.json", realOutput), "utf8"));
const images = [];

for (const sectionId of summary.imageSections || []) {
  const bytes = await readFile(new URL(`images/${sectionId}.png`, realOutput));
  images.push({ sectionId, textIntegrated: true, src: `data:image/png;base64,${bytes.toString("base64")}` });
}

await mkdir(comparisonRoot, { recursive: true });
for (const direction of directions) {
  const code = String(direction.code || direction.id).toLowerCase();
  const directory = new URL(`${code}/`, comparisonRoot);
  await mkdir(directory, { recursive: true });
  const html = exportHtml(design.project, design.sections, direction, images, {});
  await writeFile(new URL("index.html", directory), html, "utf8");
}

const playwrightPath = process.env.CODEX_PLAYWRIGHT_PATH
  || "C:/Users/takum/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/playwright/index.mjs";
const chromePath = process.env.CHROME_PATH || "C:/Program Files/Google/Chrome/Application/chrome.exe";
const { chromium } = await import(pathToFileURL(playwrightPath).href);
const require = createRequire(import.meta.url);
const sharp = require("C:/Users/takum/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/sharp");
const browser = await chromium.launch({ executablePath: chromePath, headless: true });
const captures = [];
const metrics = [];

try {
  for (const direction of directions) {
    const code = String(direction.code || direction.id).toLowerCase();
    const page = await browser.newPage({ viewport: { width: 1280, height: 900 }, deviceScaleFactor: 1 });
    await page.goto(pathToFileURL(join(new URL(comparisonRoot).pathname.slice(1), code, "index.html")).href, { waitUntil: "load" });
    await page.evaluate(async () => { await document.fonts.ready; });
    const screenshot = await page.screenshot({ fullPage: true });
    await writeFile(new URL(`${code}/full-1280.png`, comparisonRoot), screenshot);
    const meta = await sharp(screenshot).metadata();
    captures.push({ code, screenshot, width: meta.width, height: meta.height });
    metrics.push(await page.evaluate((name) => {
      const root = getComputedStyle(document.documentElement);
      const body = document.body;
      return {
        name,
        bodyClass: body.className,
        ink: root.getPropertyValue("--ink").trim(),
        accent: root.getPropertyValue("--accent").trim(),
        paper: root.getPropertyValue("--paper").trim(),
        scrollWidth: document.documentElement.scrollWidth,
        scrollHeight: document.documentElement.scrollHeight,
      };
    }, direction.name));
    await page.close();
  }
} finally {
  await browser.close();
}

const targetWidth = 420;
const targetHeight = Math.max(...captures.map((capture) => Math.round(capture.height * targetWidth / capture.width)));
const panels = [];
for (let index = 0; index < captures.length; index += 1) {
  const capture = captures[index];
  const resized = await sharp(capture.screenshot).resize({ width: targetWidth }).png().toBuffer();
  panels.push({ input: resized, left: index * targetWidth, top: 0 });
}
const comparison = await sharp({ create: { width: targetWidth * captures.length, height: targetHeight, channels: 4, background: "#ffffff" } })
  .composite(panels)
  .png()
  .toBuffer();
await writeFile(new URL("comparison-1280.png", comparisonRoot), comparison);
await writeFile(new URL("metrics.json", comparisonRoot), JSON.stringify(metrics, null, 2), "utf8");
console.log(JSON.stringify(metrics, null, 2));