@appinternalleads/ui 0.4.2 → 0.4.3

package/tools/ask/neon-render.mjs

@@ -1,143 +0,0 @@
-/**
- * **A neon request as a video file.** `render_neon_sign` calls this.
- *
- * The neon is an SVG with filters and web fonts, so a browser has to draw it — the same reason
- * `ask_user` goes to one (`serve.mjs`). The shape is the same too: a one-shot loopback server, a
- * token, a prebuilt page (`dist/neon.js`, the package's `NeonCanvas`) and the request in the
- * document. The difference is who looks: a headless browser steps the page through every frame,
- * photographs each, and ffmpeg joins them.
- *
- * ⚠ **Playwright and ffmpeg are found, not depended on.** The library takes five peers and no
- * more, so neither can be a dependency of the package. Playwright is resolved from the project
- * the server was launched in, then from the package; ffmpeg from `PATH`. When one is missing the
- * tool says which and how to get it, and every other tool of the server keeps working.
- *
- * No sleeps: the page's `ready` promise resolves when fonts, wall and the first frame are in,
- * and each frame's promise resolves after the browser has painted it.
- */
-import { createServer } from 'node:http';
-import { createRequire } from 'node:module';
-import { mkdirSync, mkdtempSync, readFileSync, rmSync, statSync } from 'node:fs';
-import { randomUUID } from 'node:crypto';
-import { spawn } from 'node:child_process';
-import { cpus, tmpdir } from 'node:os';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-const here = dirname(fileURLToPath(import.meta.url));
-
-/** A failure the caller can act on: reported in the tool's result, not as a protocol error. */
-export class NeonRenderError extends Error {}
-
-async function chromiumFrom() {
-  const tried = [];
-  for (const from of [join(process.cwd(), 'package.json'), import.meta.url]) {
-    const require = createRequire(from);
-    for (const name of ['playwright', 'playwright-core', '@playwright/test']) {
-      try {
-        const m = await import(pathToFileURL(require.resolve(name)).href);
-        const chromium = m.chromium ?? m.default?.chromium;
-        if (chromium) return chromium;
-      } catch (e) { tried.push(`${name}: ${e.code ?? e.message}`); }
-    }
-  }
-  throw new NeonRenderError(
-    'Rendering needs Playwright to draw the frames, and it is not installed in this project. '
-    + 'Run `npm install -D playwright && npx playwright install chromium`, then call again.',
-  );
-}
-
-async function launch(chromium) {
-  try { return await chromium.launch(); } catch (first) {
-    /* No downloaded browser: the machine's own Chrome draws the same SVG. */
-    try { return await chromium.launch({ channel: 'chrome' }); } catch {
-      throw new NeonRenderError(`No browser to render with (${String(first.message).split('\n')[0]}). Run \`npx playwright install chromium\`, then call again.`);
-    }
-  }
-}
-
-const CODECS = {
-  /* JPEG frames are full-range; players expect video range, so convert rather than tag. */
-  mp4: ['-vf', 'scale=out_range=tv', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-color_range', 'tv', '-crf', '16', '-preset', 'medium', '-movflags', '+faststart'],
-  webm: ['-vf', 'scale=out_range=tv', '-c:v', 'libvpx-vp9', '-pix_fmt', 'yuv420p', '-color_range', 'tv', '-crf', '28', '-b:v', '0'],
-  gif: ['-filter_complex', '[0:v]split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer'],
-};
-
-function encode(dir, output, outputPath) {
-  return new Promise((res, rej) => {
-    const ff = spawn('ffmpeg', ['-y', '-loglevel', 'error', '-framerate', String(output.fps), '-i', join(dir, 'f-%05d.jpg'), ...CODECS[output.format], outputPath], { stdio: ['ignore', 'ignore', 'pipe'] });
-    let err = '';
-    ff.stderr.on('data', (d) => { err += d; });
-    ff.on('error', (e) => rej(new NeonRenderError(e.code === 'ENOENT'
-      ? 'Rendering needs ffmpeg to join the frames into a video, and it is not on PATH. Install it (`brew install ffmpeg`, `apt install ffmpeg`), then call again.'
-      : `ffmpeg did not start: ${e.message}`)));
-    ff.on('exit', (code) => (code === 0 ? res() : rej(new NeonRenderError(`ffmpeg failed (${code}): ${err.trim().split('\n').slice(-3).join(' ')}`))));
-  });
-}
-
-/**
- * @param {{content: object, output: {format: string, width: number, height: number, durationSeconds: number, fps: number, frameCount: number},
- *          outputPath: string, backgroundColor?: string}} job  `content` is the request; `output` is what `buildNeonScene` resolved from it.
- * @returns {Promise<{errors: object[], elements?: object[], fonts?: object[], bytes?: number}>} `errors` are the page's validation errors.
- */
-export async function renderNeon({ content, output, outputPath, backgroundColor = 'black' }) {
-  let js;
-  try { js = readFileSync(resolve(here, 'dist/neon.js'), 'utf8'); } catch {
-    throw new NeonRenderError('The neon render page is missing (tools/ask/dist/neon.js). In this repository run `npm run ask:build`; as an installed package, reinstall without --ignore-scripts.');
-  }
-  const chromium = await chromiumFrom();
-
-  const token = randomUUID();
-  const json = JSON.stringify({ content }).replace(/</g, '\\u003c');
-  const html = '<!doctype html><html><head><meta charset="utf-8"><title>CompPack neon render</title>'
-    + `<style>html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;background:${backgroundColor}}</style></head>`
-    + `<body><div id="root"></div><script id="comppack-neon" type="application/json">${json}</script>`
-    + '<script type="module" src="/neon.js"></script></body></html>';
-  const server = createServer((req, res) => {
-    /* A throw in a request listener takes the process down (see serve.mjs). */
-    let url;
-    try { url = new URL(req.url, 'http://127.0.0.1'); } catch { res.writeHead(400).end('bad request'); return; }
-    if (req.method === 'GET' && url.pathname === '/' && url.searchParams.get('t') === token) {
-      res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' }).end(html);
-    } else if (req.method === 'GET' && url.pathname === '/neon.js' && req.headers.referer?.includes(token)) {
-      res.writeHead(200, { 'content-type': 'text/javascript; charset=utf-8' }).end(js);
-    } else res.writeHead(404).end();
-  });
-  server.on('clientError', (_e, socket) => socket.destroy());
-  const port = await new Promise((res, rej) => { server.once('error', rej); server.listen(0, '127.0.0.1', () => res(server.address().port)); });
-
-  const dir = mkdtempSync(join(tmpdir(), 'comppack-neon-'));
-  let browser;
-  try {
-    browser = await launch(chromium);
-    const context = await browser.newContext({ viewport: { width: output.width, height: output.height }, deviceScaleFactor: 1 });
-    const open = async () => {
-      const page = await context.newPage();
-      await page.goto(`http://127.0.0.1:${port}/?t=${token}`);
-      return { page, ready: await page.evaluate(() => globalThis.__neon.ready) };
-    };
-
-    /* The first page decides whether the request can be drawn at all, with real fonts measured. */
-    const first = await open();
-    if (first.ready.errors.length) return { errors: first.ready.errors };
-
-    /* Frames are independent (the canvas is pure in time), so a few pages draw them side by side. */
-    const workers = Math.max(1, Math.min(4, cpus().length - 1, Math.ceil(output.frameCount / 8)));
-    const pages = [first.page, ...(await Promise.all(Array.from({ length: workers - 1 }, open))).map((o) => o.page)];
-    let next = 0;
-    await Promise.all(pages.map(async (page) => {
-      for (let i = next++; i < output.frameCount; i = next++) {
-        await page.evaluate((ms) => globalThis.__neon.frame(ms), (i * 1000) / output.fps);
-        await page.screenshot({ path: join(dir, `f-${String(i).padStart(5, '0')}.jpg`), type: 'jpeg', quality: 95 });
-      }
-    }));
-
-    mkdirSync(dirname(outputPath), { recursive: true });
-    await encode(dir, output, outputPath);
-    return { errors: [], elements: first.ready.elements, fonts: first.ready.fonts, bytes: statSync(outputPath).size };
-  } finally {
-    await browser?.close().catch(() => {});
-    server.close();
-    rmSync(dir, { recursive: true, force: true });
-  }
-}