react-native-webrtc-kaleidoscope 2.7.5 → 2.7.6

package/tools/thumbnails/make-thumbnails.ts

@@ -1,287 +0,0 @@
-#!/usr/bin/env bun
-// Thumbnail maker (issue #65): generate a standardized 320x180 WebP thumbnail
-// for EVERY preset in a declared preset book, stomping existing files.
-//
-//   bunx kaleidoscope-thumbnails --book ./kaleidoscope.preset-book.ts --out ./assets/thumbnails
-//   bun run thumbs        # this repo: demo book, repo conventions (see --repo)
-//
-// What it does: loads the book as data (see book-loader.ts), projects each
-// preset's NON-SUBJECT layer stack (no mask, no person) into a render spec,
-// and drives a headless-Chromium page (render-page.ts) that composites the
-// stack — generative shaders at their exact preset uniforms over control
-// defaults, image layers cover-fit, blur layers blurring the bundled
-// "virtual scene" office fixture standing in for the camera — then encodes
-// the smallest WebP that survives an RMSE gate against the raw render.
-//
-// Output: `<out>/<preset-id>.thumb.webp` per preset, plus printed `thumbnail:`
-// wiring suggestions. The tool never rewrites the book. With --repo (this
-// repository's convention) two preset classes are redirected:
-//   - a preset whose id matches a packaged composite stomps
-//     `catalog/composites/<id>/<id>.thumb.webp` (already wired by id);
-//   - a single-image preset whose plate lives under `catalog/images/`
-//     stomps the sibling `<leaf>.thumb.webp` (the existing image-thumb
-//     convention).
-//
-// Requirements: Bun, and `playwright` resolvable from the working directory
-// (it is a devDependency here; consumers install it themselves — this is an
-// opt-in command, not runtime code). The default browser flags reach a real
-// GPU through WSLg/ANGLE; pass --no-gl-flags on platforms where they fight
-// the default (macOS).
-
-import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import path from 'node:path';
-import { type LoadedPreset, loadPresetBook } from './book-loader';
-import { type PageLayerSpec, type PagePresetSpec, type PageResult, generatePage } from './render-page';
-
-const TOOL_DIR = path.dirname(new URL(import.meta.url).pathname);
-const PKG_ROOT = path.resolve(TOOL_DIR, '..', '..');
-
-type Args = {
-  book: string;
-  out: string;
-  fixture: string;
-  repo: boolean;
-  glFlags: boolean;
-};
-
-function parseArgs(argv: string[]): Args {
-  const a: Args = {
-    book: 'kaleidoscope.preset-book.ts',
-    out: 'assets/thumbnails',
-    fixture: path.join(TOOL_DIR, 'office-fixture.webp'),
-    repo: false,
-    glFlags: true,
-  };
-  for (let i = 0; i < argv.length; i++) {
-    const k = argv[i];
-    if (k === '--book') a.book = argv[++i] ?? a.book;
-    else if (k === '--out') a.out = argv[++i] ?? a.out;
-    else if (k === '--fixture') a.fixture = argv[++i] ?? a.fixture;
-    else if (k === '--repo') a.repo = true;
-    else if (k === '--no-gl-flags') a.glFlags = false;
-    else if (k === '--help' || k === '-h') {
-      console.log(
-        'usage: kaleidoscope-thumbnails --book <preset-book.ts> --out <dir> [--fixture <img>] [--repo] [--no-gl-flags]',
-      );
-      process.exit(0);
-    }
-  }
-  return a;
-}
-
-function toDataUrl(filePath: string): string {
-  const ext = path.extname(filePath).slice(1).toLowerCase();
-  const mime = ext === 'jpg' ? 'jpeg' : ext;
-  return `data:image/${mime};base64,${readFileSync(filePath).toString('base64')}`;
-}
-
-/** Find `catalog/images/<category>/<id>.webp` for a native image id. */
-function findCatalogImage(id: string): string | null {
-  const root = path.join(PKG_ROOT, 'catalog', 'images');
-  if (!existsSync(root)) return null;
-  for (const cat of readdirSync(root, { withFileTypes: true })) {
-    if (!cat.isDirectory()) continue;
-    const candidate = path.join(root, cat.name, `${id}.webp`);
-    if (existsSync(candidate)) return candidate;
-  }
-  return null;
-}
-
-/** Resolve an image layer's source (path, native id, or book-relative) to a file. */
-function resolveImagePath(source: string, bookDir: string): string | null {
-  if (existsSync(source)) return source;
-  const catalogHit = findCatalogImage(source);
-  if (catalogHit) return catalogHit;
-  const rel = path.resolve(bookDir, source);
-  if (existsSync(rel)) return rel;
-  return null;
-}
-
-/** Shader-name -> default-uniform map, read from the built control descriptors. */
-async function loadShaderDefaults(): Promise<Record<string, Record<string, number | number[]>>> {
-  const mod = (await import(path.join(PKG_ROOT, 'dist', 'catalog', 'shaders', 'index.js'))) as Record<
-    string,
-    unknown
-  >;
-  const defaults: Record<string, Record<string, number | number[]>> = {};
-  for (const [exportName, value] of Object.entries(mod)) {
-    if (!exportName.endsWith('_CONTROLS') || !Array.isArray(value)) continue;
-    const shader = exportName.slice(0, -'_CONTROLS'.length).toLowerCase().replace(/_/g, '-');
-    const map: Record<string, number | number[]> = {};
-    for (const c of value as Array<{ name: string; default: number | readonly number[] }>) {
-      map[c.name] = Array.isArray(c.default) ? [...c.default] : (c.default as number);
-    }
-    defaults[shader] = map;
-  }
-  return defaults;
-}
-
-type Job = {
-  readonly id: string;
-  readonly spec: PagePresetSpec;
-  readonly dest: string;
-  readonly extraDests: readonly string[]; // additional copies (catalog stomp + book-local)
-  readonly wire: boolean; // whether to print a thumbnail: wiring suggestion
-};
-
-function buildJobs(
-  book: Record<string, LoadedPreset>,
-  args: Args,
-  bookDir: string,
-  defaults: Record<string, Record<string, number | number[]>>,
-  shaderNames: ReadonlySet<string>,
-): Job[] {
-  const jobs: Job[] = [];
-  for (const [id, preset] of Object.entries(book)) {
-    const layers: PageLayerSpec[] = [];
-    const imagePaths: string[] = [];
-    let skip: string | null = null;
-
-    for (const layer of preset.layers) {
-      if (layer.target === 'subject' || layer.shader === 'direct') continue;
-      const blend = layer.blend;
-      if (layer.shader === 'image') {
-        const resolved = layer.source ? resolveImagePath(layer.source, bookDir) : null;
-        if (!resolved) {
-          skip = `image layer '${layer.id ?? '?'}' source '${layer.source}' not found`;
-          break;
-        }
-        imagePaths.push(resolved);
-        layers.push({ kind: 'image', dataUrl: toDataUrl(resolved), blend });
-      } else if (layer.shader === 'blur') {
-        const sigma = Number(layer.uniforms?.sigma ?? defaults.blur?.sigma ?? 3);
-        layers.push({ kind: 'blur', sigma, blend });
-      } else if (shaderNames.has(layer.shader)) {
-        const uniforms = { ...(defaults[layer.shader] ?? {}), ...(layer.uniforms ?? {}) };
-        const plain: Record<string, number | number[]> = {};
-        for (const [k, v] of Object.entries(uniforms)) plain[k] = Array.isArray(v) ? [...v] : (v as number);
-        layers.push({ kind: 'shader', name: layer.shader, uniforms: plain, blend });
-      } else {
-        skip = `unknown layer shader '${layer.shader}'`;
-        break;
-      }
-    }
-    if (skip) {
-      console.warn(`  skip ${id}: ${skip}`);
-      continue;
-    }
-    if (layers.length === 0) {
-      console.warn(`  skip ${id}: no renderable background layers`);
-      continue;
-    }
-
-    // Destination: repo conventions split composites and catalog images.
-    let dest = path.resolve(args.out, `${id}.thumb.webp`);
-    const extraDests: string[] = [];
-    let wire = true;
-    if (args.repo) {
-      const compositeDir = path.join(PKG_ROOT, 'catalog', 'composites', id);
-      const onlyImage = layers.length === 1 && layers[0]?.kind === 'image' && imagePaths[0];
-      if (existsSync(compositeDir)) {
-        dest = path.join(compositeDir, `${id}.thumb.webp`);
-        wire = false; // already wired by id (native) and by module (web)
-      } else if (onlyImage && imagePaths[0]?.startsWith(path.join(PKG_ROOT, 'catalog', 'images'))) {
-        // Stomp the catalog's image-thumb convention AND keep a book-local
-        // copy: the package's exports map does not expose catalog thumbs, so
-        // the book wires the local one.
-        const img = imagePaths[0];
-        extraDests.push(path.join(path.dirname(img), `${path.basename(img, '.webp')}.thumb.webp`));
-      }
-    }
-    jobs.push({ id, spec: { id, layers }, dest, extraDests, wire });
-  }
-  return jobs;
-}
-
-async function main(): Promise<void> {
-  const args = parseArgs(process.argv.slice(2));
-  if (!existsSync(args.book)) {
-    console.error(`book not found: ${args.book}`);
-    process.exit(2);
-  }
-  if (!existsSync(args.fixture)) {
-    console.error(`camera fixture not found: ${args.fixture}`);
-    process.exit(2);
-  }
-
-  let chromium: typeof import('playwright').chromium;
-  try {
-    ({ chromium } = await import('playwright'));
-  } catch {
-    console.error(
-      'playwright is required: install it as a devDependency (`bun add -d playwright && bunx playwright install chromium`).',
-    );
-    process.exit(2);
-  }
-
-  const book = await loadPresetBook(args.book);
-  const bookDir = path.dirname(path.resolve(args.book));
-  const defaults = await loadShaderDefaults();
-
-  const generated = (await import(
-    path.join(PKG_ROOT, 'dist', 'web-driver', 'shaders.generated.js')
-  )) as {
-    SHADER_SOURCES: Readonly<Record<string, string>>;
-    COMPOSITE_BLUR_FRAG_SRC: string;
-  };
-
-  const jobs = buildJobs(book, args, bookDir, defaults, new Set(Object.keys(generated.SHADER_SOURCES)));
-  console.log(`${jobs.length} preset(s) to render from ${path.relative(process.cwd(), args.book)}`);
-
-  const html = generatePage({
-    shaderSources: generated.SHADER_SOURCES,
-    blurFragSrc: generated.COMPOSITE_BLUR_FRAG_SRC,
-    fixtureDataUrl: toDataUrl(args.fixture),
-  });
-  const pagePath = path.join(tmpdir(), `kaleidoscope-thumbs-${process.pid}.html`);
-  writeFileSync(pagePath, html);
-
-  const browser = await chromium.launch({
-    args: args.glFlags ? ['--use-gl=angle', '--use-angle=gl'] : [],
-  });
-  const page = await browser.newPage({ viewport: { width: 800, height: 500 } });
-  page.on('pageerror', (e) => console.error(`  page error: ${e.message}`));
-  await page.goto(`file://${pagePath}`);
-
-  const wires: string[] = [];
-  let failures = 0;
-  for (const job of jobs) {
-    try {
-      const result = (await page.evaluate(
-        // biome-ignore lint/suspicious/noExplicitAny: page-scope function injected by render-page
-        (spec) => (window as any).renderPreset(spec),
-        job.spec,
-      )) as PageResult;
-      const b64 = result.dataUrl.slice('data:image/webp;base64,'.length);
-      for (const dest of [job.dest, ...job.extraDests]) {
-        mkdirSync(path.dirname(dest), { recursive: true });
-        writeFileSync(dest, Buffer.from(b64, 'base64'));
-      }
-      const kb = (Buffer.byteLength(b64, 'base64') / 1024).toFixed(1);
-      console.log(
-        `  ok ${job.id}  ->  ${path.relative(process.cwd(), job.dest)}  (${kb} KB, q ${result.q}, rmse ${result.rmse.toFixed(2)})`,
-      );
-      if (job.wire) wires.push(job.id);
-    } catch (e) {
-      failures++;
-      console.error(`  FAIL ${job.id}: ${e instanceof Error ? e.message : e}`);
-    }
-  }
-  await browser.close();
-
-  if (wires.length > 0) {
-    console.log('\nWire these into the book (the tool never edits it):');
-    for (const id of wires) {
-      console.log(
-        `  '${id}': thumbnail: Asset.fromModule(require('./${path.relative(bookDir, path.resolve(args.out, `${id}.thumb.webp`)).replace(/\\\\/g, '/')}')).uri,`,
-      );
-    }
-  }
-  if (failures > 0) {
-    console.error(`\n${failures} preset(s) failed`);
-    process.exit(1);
-  }
-}
-
-main();

package/tools/thumbnails/render-page.ts

@@ -1,259 +0,0 @@
-// The thumbnail maker's render page (issue #65): a self-contained HTML
-// document that composites one preset's non-subject layer stack and encodes a
-// 320x180 WebP, all in-browser (the browser's own encoder; no native image
-// deps). The CLI drives it per preset via `window.renderPreset(spec)`.
-//
-// Rendering model (mirrors the web compositor's semantics at thumbnail scale):
-//   - shader layers draw on a WebGL2 canvas (the generated single-source
-//     frags, exact preset uniforms over control defaults, fixed mid-animation
-//     uTime so output is deterministic and past initialization);
-//   - image layers cover-fit onto the 2D compositing canvas;
-//   - blur layers run the real composite-blur two-pass over the bundled
-//     "virtual scene" office fixture (the camera stand-in);
-//   - `additive` blend maps to canvas 'lighter', everything else paints over.
-//
-// Render happens at 2x (640x360) and downscales to 320x180 for antialiasing.
-// Encoding sweeps WebP quality from low to high and keeps the first level
-// whose decode round-trips within an RMSE gate against the uncompressed
-// canvas: smallest file with no visible artifacting.
-
-export type PageLayerSpec =
-  | {
-      readonly kind: 'shader';
-      readonly name: string;
-      readonly uniforms: Record<string, number | readonly number[]>;
-      readonly blend?: string;
-    }
-  | { readonly kind: 'image'; readonly dataUrl: string; readonly blend?: string }
-  | { readonly kind: 'blur'; readonly sigma: number; readonly blend?: string };
-
-export type PagePresetSpec = {
-  readonly id: string;
-  readonly layers: readonly PageLayerSpec[];
-};
-
-export type PageResult = {
-  readonly dataUrl: string;
-  readonly q: number;
-  readonly bytes: number;
-  readonly rmse: number;
-};
-
-const FULLSCREEN_VERT = `#version 300 es
-out highp vec2 vUv;
-void main() {
-  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
-  vUv = p;
-  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
-}`;
-
-export function generatePage(opts: {
-  readonly shaderSources: Readonly<Record<string, string>>;
-  readonly blurFragSrc: string;
-  readonly fixtureDataUrl: string;
-}): string {
-  const data = JSON.stringify({
-    vert: FULLSCREEN_VERT,
-    sources: opts.shaderSources,
-    blurSrc: opts.blurFragSrc,
-    fixture: opts.fixtureDataUrl,
-  });
-  return `<!doctype html>
-<html><head><meta charset="utf-8"><title>kaleidoscope thumbnails</title></head>
-<body>
-<script>
-const DATA = ${data};
-const W = 640, H = 360, TW = 320, TH = 180;
-// Fixed mid-animation clock: deterministic, and well past t=0 initialization.
-const T = 7.0;
-// RMSE gate (0..255 scale) for "no visible artifacting" on a 320x180 thumb.
-const RMSE_MAX = 2.6;
-const QUALITIES = [0.5, 0.6, 0.68, 0.76, 0.84, 0.92];
-
-const glc = document.createElement('canvas');
-glc.width = W; glc.height = H;
-const gl = glc.getContext('webgl2', { antialias: false, preserveDrawingBuffer: true });
-
-const progCache = {};
-function compile(type, src) {
-  const s = gl.createShader(type);
-  gl.shaderSource(s, src); gl.compileShader(s);
-  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
-    throw new Error('shader compile: ' + (gl.getShaderInfoLog(s) || '?'));
-  }
-  return s;
-}
-function program(key, fragSrc) {
-  if (progCache[key]) return progCache[key];
-  const p = gl.createProgram();
-  gl.attachShader(p, compile(gl.VERTEX_SHADER, DATA.vert));
-  gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fragSrc));
-  gl.linkProgram(p);
-  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
-    throw new Error('link ' + key + ': ' + (gl.getProgramInfoLog(p) || '?'));
-  }
-  progCache[key] = p;
-  return p;
-}
-
-function setUniform(p, name, v) {
-  const loc = gl.getUniformLocation(p, name) || gl.getUniformLocation(p, name + '[0]');
-  if (!loc) return;
-  if (typeof v === 'number') { gl.uniform1f(loc, v); return; }
-  if (!Array.isArray(v)) return;
-  if (v.length === 2) gl.uniform2f(loc, v[0], v[1]);
-  else if (v.length === 3) gl.uniform3f(loc, v[0], v[1], v[2]);
-  else if (v.length === 4) gl.uniform4f(loc, v[0], v[1], v[2], v[3]);
-  else gl.uniform2fv(loc, new Float32Array(v)); // a flat vec2[] (polygon)
-}
-function setUniforms(p, uniforms, w, h) {
-  gl.useProgram(p);
-  setUniform(p, 'uTime', T);
-  setUniform(p, 'uResolution', [w, h]);
-  for (const k in uniforms) setUniform(p, k, uniforms[k]);
-}
-
-function renderShader(name, uniforms) {
-  const src = DATA.sources[name];
-  if (!src) throw new Error('no shader source registered for "' + name + '"');
-  const p = program(name, src);
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  gl.viewport(0, 0, W, H);
-  setUniforms(p, uniforms, W, H);
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-}
-
-function imgToTexture(img) {
-  const tex = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, tex);
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-  return tex;
-}
-function makeFbo(w, h) {
-  const tex = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, tex);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  const fbo = gl.createFramebuffer();
-  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
-  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  return { fbo, tex };
-}
-
-let fixtureImgP = null;
-function fixtureImg() {
-  if (!fixtureImgP) fixtureImgP = loadImg(DATA.fixture);
-  return fixtureImgP;
-}
-function loadImg(url) {
-  return new Promise((res, rej) => {
-    const i = new Image();
-    i.onload = () => res(i);
-    i.onerror = () => rej(new Error('image failed to load'));
-    i.src = url;
-  });
-}
-
-// The real composite-blur, both separable passes, over the camera stand-in.
-async function renderBlur(sigma) {
-  const img = await fixtureImg();
-  const srcTex = imgToTexture(img);
-  const pass = makeFbo(W, H);
-  const p = program('composite-blur', DATA.blurSrc);
-  gl.activeTexture(gl.TEXTURE0);
-
-  gl.bindFramebuffer(gl.FRAMEBUFFER, pass.fbo);
-  gl.viewport(0, 0, W, H);
-  gl.bindTexture(gl.TEXTURE_2D, srcTex);
-  gl.useProgram(p);
-  setUniform(p, 'uTex', 0);
-  const texLoc = gl.getUniformLocation(p, 'uTex');
-  if (texLoc) gl.uniform1i(texLoc, 0);
-  setUniform(p, 'uSigma', sigma);
-  setUniform(p, 'uDir', [1 / W, 0]);
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  gl.viewport(0, 0, W, H);
-  gl.bindTexture(gl.TEXTURE_2D, pass.tex);
-  if (texLoc) gl.uniform1i(texLoc, 0);
-  setUniform(p, 'uSigma', sigma);
-  setUniform(p, 'uDir', [0, 1 / H]);
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-}
-
-function coverDraw(ctx, img, w, h) {
-  const s = Math.max(w / img.naturalWidth, h / img.naturalHeight);
-  const dw = img.naturalWidth * s, dh = img.naturalHeight * s;
-  ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
-}
-
-async function rmseAgainst(ref, dataUrl) {
-  const img = await loadImg(dataUrl);
-  const c = document.createElement('canvas');
-  c.width = TW; c.height = TH;
-  const x = c.getContext('2d');
-  x.drawImage(img, 0, 0);
-  const got = x.getImageData(0, 0, TW, TH).data;
-  let sum = 0, n = 0;
-  for (let i = 0; i < got.length; i += 4) {
-    for (let ch = 0; ch < 3; ch++) {
-      const d = got[i + ch] - ref.data[i + ch];
-      sum += d * d; n++;
-    }
-  }
-  return Math.sqrt(sum / n);
-}
-
-window.renderPreset = async (spec) => {
-  const comp = document.createElement('canvas');
-  comp.width = W; comp.height = H;
-  const ctx = comp.getContext('2d');
-  ctx.fillStyle = '#000';
-  ctx.fillRect(0, 0, W, H);
-
-  for (const layer of spec.layers) {
-    ctx.globalCompositeOperation = layer.blend === 'additive' ? 'lighter' : 'source-over';
-    if (layer.kind === 'image') {
-      coverDraw(ctx, await loadImg(layer.dataUrl), W, H);
-    } else if (layer.kind === 'blur') {
-      await renderBlur(layer.sigma);
-      ctx.drawImage(glc, 0, 0, W, H);
-    } else {
-      renderShader(layer.name, layer.uniforms);
-      ctx.drawImage(glc, 0, 0, W, H);
-    }
-  }
-  ctx.globalCompositeOperation = 'source-over';
-
-  const tc = document.createElement('canvas');
-  tc.width = TW; tc.height = TH;
-  const tctx = tc.getContext('2d');
-  tctx.drawImage(comp, 0, 0, TW, TH);
-  const ref = tctx.getImageData(0, 0, TW, TH);
-
-  for (const q of QUALITIES) {
-    const url = tc.toDataURL('image/webp', q);
-    const rmse = await rmseAgainst(ref, url);
-    if (rmse <= RMSE_MAX) {
-      return { dataUrl: url, q, bytes: Math.round((url.length - 'data:image/webp;base64,'.length) * 0.75), rmse };
-    }
-  }
-  // Noisy content (dot lattices, starfields, confetti) never satisfies an
-  // RMSE gate; the per-pixel error is invisible dither. Cap at the sweep's
-  // top quality instead of escalating further.
-  const url = tc.toDataURL('image/webp', 0.92);
-  const rmse = await rmseAgainst(ref, url);
-  return { dataUrl: url, q: 0.92, bytes: Math.round((url.length - 'data:image/webp;base64,'.length) * 0.75), rmse };
-};
-</script>
-</body></html>`;
-}