@amg555/frameforge-mcp 2.3.2 → 2.3.3

package/src/harness/bin/harness.mjs

@@ -0,0 +1,324 @@
+#!/usr/bin/env node
+/**
+ * harness.mjs — Code-Driven Animation Production Harness CLI
+ *
+ * Implements the 9-part video production harness spec:
+ *   doctor     — Verify Chrome path, GPU flags, and WebGL context
+ *   storyboard — Validate STORYBOARD.md against the 4 gates
+ *   verify     — 3-point history-leak & purity gate (repeat, wander, cold-jump)
+ *   sheet      — Contact sheet of key timestamps
+ *   strip      — Full-rate motion strip of a time range
+ *   crop       — Full-res framing crop check
+ *   pixels     — Blind-spot frame analysis (blank, blown, corner-confined)
+ *   frames     — Parallel, atomic, resumable frame render
+ *   encode     — Master MP4 encoding with BT.709 tags and audio mux
+ *   all        — Complete gate-checked end-to-end production
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { doctorBrowser, launchHarnessBrowser } from '../lib/browser.mjs';
+import { openPageWithVirtualClock } from '../lib/capture.mjs';
+import { verifyScenePurity } from '../lib/verify-purity.mjs';
+import { renderSheet, renderStrip, renderCrop, renderStoryboard } from '../lib/sheets.mjs';
+import { renderFrameJobs } from '../lib/jobs.mjs';
+import { encodeFramesToMp4 } from '../lib/encode.mjs';
+import { analyzeImageFile } from '../lib/pixels.mjs';
+import { spawnSync } from 'child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const CWD = process.cwd();
+
+// Argument parsing
+const argv = process.argv.slice(2);
+const command = argv[0] || 'doctor';
+const flags = {};
+const extras = [];
+
+for (let i = 1; i < argv.length; i++) {
+  const arg = argv[i];
+  if (arg.startsWith('--')) {
+    const [k, v] = arg.slice(2).split('=');
+    flags[k] = v ?? true;
+  } else {
+    extras.push(arg);
+  }
+}
+
+function resolveProjectFile(filename, fallback) {
+  const inCwd = path.resolve(CWD, filename);
+  if (fs.existsSync(inCwd)) return inCwd;
+  if (fallback && fs.existsSync(fallback)) return fallback;
+  return inCwd;
+}
+
+const HTML_FILE   = flags.html ? path.resolve(CWD, flags.html) : resolveProjectFile('index.html', resolveProjectFile('studio.html'));
+const OUT_DIR     = flags.outDir ? path.resolve(CWD, flags.outDir) : path.join(CWD, 'out');
+const CHECK_DIR   = path.join(OUT_DIR, 'check');
+const FRAMES_DIR  = path.join(OUT_DIR, 'frames');
+const PURITY_LOG  = path.join(CHECK_DIR, 'purity_report.json');
+
+fs.mkdirSync(OUT_DIR, { recursive: true });
+fs.mkdirSync(CHECK_DIR, { recursive: true });
+
+async function cmdDoctor() {
+  console.log('🩺 FrameForge Harness — Doctor');
+  const res = await doctorBrowser({
+    softGl: flags['soft-gl'],
+    gpuAngle: flags['gpu-angle'],
+    chromePath: flags.chrome,
+  });
+
+  if (res.status === 'ok') {
+    console.log(`  ✅ Chrome:   ${res.chromePath}`);
+    console.log(`  ✅ WebGL:    ${res.webgl ? 'available' : 'unavailable'}`);
+    console.log(`  ✅ Renderer: ${res.renderer}`);
+    console.log(`  ✅ Vendor:   ${res.vendor}`);
+    console.log(`  Flags:      ${res.flags.join(' ')}`);
+  } else {
+    console.error(`  ❌ Doctor failed: ${res.error}`);
+    process.exit(1);
+  }
+}
+
+async function cmdStoryboard() {
+  const sbPath = flags.file ? path.resolve(CWD, flags.file) : resolveProjectFile('STORYBOARD.md');
+  console.log(`📋 Validating Storyboard: ${sbPath}`);
+
+  const validatorCandidates = [
+    path.join(CWD, 'scripts', 'storyboard-validator.mjs'),
+    path.resolve(__dirname, '../../../plugins/video-pipeline/skills/video-pipeline/assets/project/scripts/storyboard-validator.mjs'),
+    path.join(__dirname, 'storyboard-validator.mjs'),
+  ];
+  const validatorScript = validatorCandidates.find(p => fs.existsSync(p));
+  if (validatorScript) {
+    const res = spawnSync('node', [validatorScript, sbPath], { stdio: 'inherit' });
+    if (res.status !== 0) {
+      console.error('❌ Storyboard gate failed. Fix storyboard before proceeding to code.');
+      process.exit(1);
+    }
+  } else {
+    console.log('  ✅ Storyboard file present.');
+  }
+}
+
+async function cmdVerify() {
+  console.log(`🔬 Running 3-Point Purity Verification: ${HTML_FILE}`);
+  const { browser } = await launchHarnessBrowser({
+    softGl: flags['soft-gl'],
+    chromePath: flags.chrome,
+  });
+
+  let times = null;
+  if (flags.times) {
+    times = flags.times.split(',').map(Number).filter(n => !isNaN(n));
+  }
+
+  const duration = flags.duration ? parseFloat(flags.duration) : null;
+  const res = await verifyScenePurity({
+    browser,
+    htmlPath: HTML_FILE,
+    duration,
+    times,
+    width: 640,
+    height: 360,
+  });
+  await browser.close();
+
+  fs.writeFileSync(PURITY_LOG, JSON.stringify(res, null, 2), 'utf8');
+
+  console.log(`\n  Tested ${res.timesTested} sample points.`);
+  for (const r of res.results) {
+    const icon = r.ok ? '✅' : '❌';
+    console.log(`  ${icon} t=${r.time}s  hash=${r.a}${r.failure ? ' — ' + r.failure : ''}`);
+  }
+
+  if (res.passed) {
+    console.log(`\n  ✅ PURITY GATE PASSED — frames_sha256: ${res.framesSha256}`);
+    console.log(`  Report: ${PURITY_LOG}`);
+  } else {
+    console.error('\n  ❌ PURITY GATE FAILED — non-determinism or history leak detected!');
+    process.exit(1);
+  }
+}
+
+async function cmdSheet() {
+  const { browser } = await launchHarnessBrowser();
+  const page = await openPageWithVirtualClock({ browser, htmlPath: HTML_FILE });
+  const outPath = flags.out ? path.resolve(CWD, flags.out) : path.join(CHECK_DIR, 'sheet.jpg');
+
+  let times = [0.1, 0.5, 1.0, 1.5, 2.0];
+  if (flags.times) {
+    times = flags.times.split(',').map(Number).filter(n => !isNaN(n));
+  }
+
+  console.log(`🖼 Generating Contact Sheet (${times.length} frames) → ${outPath}`);
+  await renderSheet({
+    page,
+    times,
+    cols: parseInt(flags.cols || '5', 10),
+    thumbWidth: parseInt(flags.w || '320', 10),
+    outPath,
+  });
+  await browser.close();
+  console.log(`  ✅ Sheet ready: ${outPath}`);
+}
+
+async function cmdStrip() {
+  const range = (flags.range || extras[0] || '0.0:1.0').split(':').map(Number);
+  const start = range[0] || 0.0;
+  const end = range[1] || 1.0;
+  const outPath = flags.out ? path.resolve(CWD, flags.out) : path.join(CHECK_DIR, `strip_${start}_${end}s.jpg`);
+
+  const { browser } = await launchHarnessBrowser();
+  const page = await openPageWithVirtualClock({ browser, htmlPath: HTML_FILE });
+
+  console.log(`🎞 Generating Motion Strip [${start}s → ${end}s] → ${outPath}`);
+  await renderStrip({
+    page,
+    start,
+    end,
+    fps: parseInt(flags.fps || '30', 10),
+    thumbWidth: parseInt(flags.w || '320', 10),
+    outPath,
+  });
+  await browser.close();
+  console.log(`  ✅ Strip ready: ${outPath}`);
+}
+
+async function cmdCrop() {
+  const time = parseFloat(flags.time || extras[0] || '1.0');
+  const cropStr = flags.at || flags.crop || '9:16';
+  let cropParam = cropStr;
+  if (cropStr.includes(',')) {
+    cropParam = cropStr.split(',').map(Number);
+  }
+  const outPath = flags.out ? path.resolve(CWD, flags.out) : path.join(CHECK_DIR, `crop_${time}s.jpg`);
+
+  const { browser } = await launchHarnessBrowser();
+  const page = await openPageWithVirtualClock({ browser, htmlPath: HTML_FILE });
+
+  console.log(`✂ Generating Crop Check (at ${time}s, framing=${cropStr}) → ${outPath}`);
+  await renderCrop({
+    page,
+    time,
+    crop: cropParam,
+    outPath,
+  });
+  await browser.close();
+  console.log(`  ✅ Crop ready: ${outPath}`);
+}
+
+async function cmdFrames() {
+  const fps = parseInt(flags.fps || '30', 10);
+  const workers = parseInt(flags.workers || '4', 10);
+  const duration = flags.duration ? parseFloat(flags.duration) : 2.0;
+  const totalFrames = Math.round(duration * fps);
+
+  console.log(`📦 Rendering Frame Range [0..${totalFrames - 1}] (${duration}s @ ${fps}fps, workers=${workers})`);
+  const { browser } = await launchHarnessBrowser();
+
+  const res = await renderFrameJobs({
+    browser,
+    htmlPath: HTML_FILE,
+    framesDir: FRAMES_DIR,
+    first: 0,
+    last: totalFrames - 1,
+    fps,
+    workers,
+    width: parseInt(flags.width || '1920', 10),
+    height: parseInt(flags.height || '1080', 10),
+    format: flags.format || 'jpg',
+    onProgress: (done, total) => {
+      process.stdout.write(`\r  Frames: ${done}/${total} (${Math.round((done / total) * 100)}%)`);
+    },
+  });
+  process.stdout.write('\n');
+  await browser.close();
+
+  console.log(`  ✅ ${res.rendered} rendered, ${res.skipped} skipped (resumed). Total: ${res.total}`);
+}
+
+async function cmdEncode() {
+  // Purity report gate: refuse encode if purity report does not exist or failed
+  if (!flags['skip-verify']) {
+    if (!fs.existsSync(PURITY_LOG)) {
+      console.warn('⚠️ No purity report found. Running verify gate first...');
+      await cmdVerify();
+    } else {
+      const rep = JSON.parse(fs.readFileSync(PURITY_LOG, 'utf8'));
+      if (!rep.passed) {
+        console.error('❌ ENCODE REFUSED: Purity report in out/check/purity_report.json has FAIL status.');
+        process.exit(1);
+      }
+    }
+  }
+
+  const fps = parseInt(flags.fps || '30', 10);
+  const duration = parseFloat(flags.duration || '2.0');
+  const ext = flags.format === 'png' ? 'png' : 'jpg';
+  const outPath = flags.out ? path.resolve(CWD, flags.out) : path.join(OUT_DIR, 'film.mp4');
+  const framesPattern = path.join(FRAMES_DIR, `f%06d.${ext}`);
+  const audioPath = flags.audio ? path.resolve(CWD, flags.audio) : null;
+
+  console.log(`🎬 Encoding Master MP4 → ${outPath}`);
+  const encRes = await encodeFramesToMp4({
+    framesPattern,
+    duration,
+    fps,
+    crf: parseInt(flags.crf || '17', 10),
+    audioPath,
+    outPath,
+  });
+
+  console.log(`  ✅ Master encoded successfully (${(encRes.sizeBytes / 1024 / 1024).toFixed(2)} MB)`);
+}
+
+async function cmdPixels() {
+  const target = extras[0] || path.join(CHECK_DIR, 'sheet.jpg');
+  console.log(`🔍 Inspecting Pixels: ${target}`);
+  const analysis = analyzeImageFile(target);
+  console.log(`  Mean Color: RGB(${analysis.meanColor.join(', ')})`);
+  console.log(`  Bright Pixel Share: ${(analysis.brightPixelShare * 100).toFixed(2)}%`);
+  console.log(`  BBox: ${analysis.bbox ? analysis.bbox.join(', ') : 'none'}`);
+  console.log(`  Blank: ${analysis.isBlank} | Blown: ${analysis.isBlown} | Corner-confined: ${analysis.isCornerConfined}`);
+  if (analysis.flags.length > 0) {
+    console.warn(`  ⚠️ Visual Flags Triggered: ${analysis.flags.join(', ')}`);
+  } else {
+    console.log('  ✅ No visual anomalies detected.');
+  }
+}
+
+async function cmdAll() {
+  console.log('🚀 Running Complete Production Pipeline: Storyboard → Verify → Frames → Encode → Inspect');
+  await cmdDoctor();
+  await cmdStoryboard();
+  await cmdSheet();
+  await cmdVerify();
+  await cmdFrames();
+  await cmdEncode();
+  console.log('\n✨ Production complete! Output ready at out/film.mp4');
+}
+
+try {
+  switch (command) {
+    case 'doctor':     await cmdDoctor();     break;
+    case 'storyboard': await cmdStoryboard(); break;
+    case 'verify':     await cmdVerify();     break;
+    case 'sheet':      await cmdSheet();      break;
+    case 'strip':      await cmdStrip();      break;
+    case 'crop':       await cmdCrop();       break;
+    case 'frames':     await cmdFrames();     break;
+    case 'encode':     await cmdEncode();     break;
+    case 'pixels':     await cmdPixels();     break;
+    case 'all':        await cmdAll();        break;
+    default:
+      console.log(`Usage: harness <doctor|storyboard|verify|sheet|strip|crop|frames|encode|pixels|all> [options]`);
+      break;
+  }
+} catch (err) {
+  console.error(`\n❌ Harness error: ${err.message}`);
+  process.exit(1);
+}
+

package/src/harness/lib/browser.mjs

@@ -0,0 +1,137 @@
+/**
+ * browser.mjs — Chrome Resolution & Platform Launch Flags
+ *
+ * Resolves local Google Chrome / Chromium executable and applies platform-specific
+ * WebGL and sandbox flags (Metal on macOS, D3D11 on Win32, ANGLE on Linux, SwiftShader fallback).
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+export function findChromePath(customPath = null) {
+  const candidates = [
+    customPath,
+    process.env.CHROME_PATH,
+    'C:/Program Files/Google/Chrome/Application/chrome.exe',
+    'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+    process.env.LOCALAPPDATA ? path.join(process.env.LOCALAPPDATA, 'Google/Chrome/Application/chrome.exe') : null,
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/usr/bin/google-chrome',
+    '/usr/bin/google-chrome-stable',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+    '/snap/bin/chromium',
+  ].filter(Boolean);
+
+  for (const candidate of candidates) {
+    try {
+      if (fs.existsSync(candidate)) {
+        return candidate;
+      }
+    } catch (_) {}
+  }
+
+  return null;
+}
+
+export function getBrowserLaunchFlags({ softGl = false, gpuAngle = null } = {}) {
+  const isWin   = process.platform === 'win32';
+  const isMac   = process.platform === 'darwin';
+  const isLinux = process.platform === 'linux';
+
+  const ANGLE = {
+    d3d11:       ['--use-angle=d3d11'],
+    metal:       ['--use-angle=metal'],
+    gl:          ['--use-angle=gl'],
+    vulkan:      ['--use-angle=vulkan'],
+    swiftshader: ['--use-angle=swiftshader', '--enable-unsafe-swiftshader'],
+  };
+
+  const gpu = softGl
+    ? ANGLE.swiftshader
+    : gpuAngle && ANGLE[gpuAngle]
+      ? ANGLE[gpuAngle]
+      : isWin
+        ? ANGLE.d3d11
+        : isMac
+          ? ANGLE.metal
+          : ['--use-gl=angle'];
+
+  const sandbox = isLinux ? ['--no-sandbox', '--disable-setuid-sandbox'] : [];
+
+  return [
+    ...sandbox,
+    '--allow-file-access-from-files',
+    '--disable-web-security',
+    '--ignore-gpu-blocklist',
+    ...gpu,
+    '--enable-gpu-rasterization',
+    '--window-size=1920,1080',
+    '--disable-renderer-backgrounding',
+    '--disable-background-timer-throttling',
+    '--disable-gpu-watchdog',
+  ];
+}
+
+export async function launchHarnessBrowser(opts = {}) {
+  let chromium;
+  try {
+    ({ chromium } = await import('playwright'));
+  } catch (err) {
+    throw new Error('Playwright is required. Run: npm install playwright && npx playwright install chromium');
+  }
+
+  const execPath = findChromePath(opts.chromePath);
+  const args = getBrowserLaunchFlags(opts);
+
+  const launchOpts = {
+    headless: opts.headless !== false,
+    args: [...args, ...(opts.extraArgs || [])],
+  };
+
+  if (execPath) {
+    launchOpts.executablePath = execPath;
+  }
+
+  const browser = await chromium.launch(launchOpts);
+  return { browser, executablePath: execPath || 'bundled-chromium' };
+}
+
+export async function doctorBrowser(opts = {}) {
+  const resolvedPath = findChromePath(opts.chromePath);
+  const launchFlags = getBrowserLaunchFlags(opts);
+
+  try {
+    const { browser, executablePath } = await launchHarnessBrowser(opts);
+    const page = await browser.newPage();
+    const info = await page.evaluate(() => {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+      if (!gl) return { webgl: false, renderer: 'none', vendor: 'none' };
+      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+      return {
+        webgl: true,
+        vendor: debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : gl.getParameter(gl.VENDOR),
+        renderer: debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : gl.getParameter(gl.RENDERER),
+      };
+    });
+    await browser.close();
+
+    return {
+      status: 'ok',
+      chromePath: executablePath,
+      webgl: info.webgl,
+      renderer: info.renderer,
+      vendor: info.vendor,
+      flags: launchFlags,
+    };
+  } catch (err) {
+    return {
+      status: 'error',
+      chromePath: resolvedPath,
+      error: err.message,
+      flags: launchFlags,
+    };
+  }
+}
+

package/src/harness/lib/capture.mjs

@@ -0,0 +1,161 @@
+/**
+ * capture.mjs — Virtual Clock Injection & Deterministic Frame Stepper
+ *
+ * Replaces Date.now, performance.now, requestAnimationFrame, setTimeout/setInterval,
+ * and CSS animations with a virtual clock. Supports both canvas/WebGL renderAt(t)
+ * and DOM/canvas seek(t).
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+
+export const VIRTUAL_CLOCK_INJECTION = `
+(function () {
+  let _now = 0;
+  let _rafQueue = new Map();
+  let _rafId = 0;
+  let _timerQueue = [];
+  let _timerId = 0;
+  const _startDate = Date.now();
+
+  window.__playwright = true;
+
+  // 1. Deterministic clocks
+  performance.now = () => _now;
+  Date.now = () => _startDate + _now;
+
+  // 2. Deterministic requestAnimationFrame
+  window.requestAnimationFrame = (cb) => {
+    const id = ++_rafId;
+    _rafQueue.set(id, cb);
+    return id;
+  };
+  window.cancelAnimationFrame = (id) => {
+    _rafQueue.delete(id);
+  };
+
+  // 3. Virtual timer queue
+  window.setTimeout = (fn, delay = 0, ...args) => {
+    const id = ++_timerId;
+    _timerQueue.push({ id, runAt: _now + Math.max(0, delay), fn, args, repeat: 0 });
+    _timerQueue.sort((a, b) => a.runAt - b.runAt);
+    return id;
+  };
+  window.clearTimeout = (id) => {
+    const idx = _timerQueue.findIndex(t => t.id === id);
+    if (idx !== -1) _timerQueue.splice(idx, 1);
+  };
+  window.setInterval = (fn, interval = 0, ...args) => {
+    const id = ++_timerId;
+    const step = Math.max(16, interval);
+    _timerQueue.push({ id, runAt: _now + step, fn, args, repeat: step });
+    _timerQueue.sort((a, b) => a.runAt - b.runAt);
+    return id;
+  };
+  window.clearInterval = (id) => {
+    const idx = _timerQueue.findIndex(t => t.id === id);
+    if (idx !== -1) _timerQueue.splice(idx, 1);
+  };
+
+  // 4. Deterministic Seeded PRNG fallback for unseeded Math.random()
+  let _seed = 0x2F6E2B1;
+  window.Math.random = () => {
+    _seed = (_seed + 0x6D2B79F5) | 0;
+    let t = Math.imul(_seed ^ (_seed >>> 15), 1 | _seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+
+  // 5. Virtual time advance
+  window.__advance = (ms) => {
+    _now += ms;
+    while (_timerQueue.length > 0 && _timerQueue[0].runAt <= _now) {
+      const item = _timerQueue.shift();
+      try { item.fn(...item.args); } catch (_) {}
+      if (item.repeat > 0) {
+        item.runAt = _now + item.repeat;
+        _timerQueue.push(item);
+        _timerQueue.sort((a, b) => a.runAt - b.runAt);
+      }
+    }
+    const currentRafs = Array.from(_rafQueue.values());
+    _rafQueue.clear();
+    currentRafs.forEach(cb => { try { cb(_now); } catch (_) {} });
+
+    try {
+      document.getAnimations().forEach(a => {
+        if (a.playState !== 'paused') a.pause();
+        a.currentTime = _now;
+      });
+    } catch (_) {}
+  };
+
+  // 6. Absolute virtual seek
+  window.__seek = async (t) => {
+    _now = t * 1000;
+    if (window.renderAt) {
+      await window.renderAt(t);
+    } else if (window.seek) {
+      await window.seek(t);
+    }
+    while (_timerQueue.length > 0 && _timerQueue[0].runAt <= _now) {
+      const item = _timerQueue.shift();
+      try { item.fn(...item.args); } catch (_) {}
+    }
+    if (document.fonts && document.fonts.ready) {
+      await document.fonts.ready;
+    }
+  };
+})();
+`;
+
+export async function openPageWithVirtualClock(browserOrOpts, htmlPathArg, optsArg = {}) {
+  let browser, htmlPath, width, height;
+  if (browserOrOpts && typeof browserOrOpts === 'object' && browserOrOpts.browser) {
+    browser  = browserOrOpts.browser;
+    htmlPath = browserOrOpts.htmlPath;
+    width    = browserOrOpts.width || 1920;
+    height   = browserOrOpts.height || 1080;
+  } else {
+    browser  = browserOrOpts;
+    htmlPath = htmlPathArg;
+    width    = optsArg.width || 1920;
+    height   = optsArg.height || 1080;
+  }
+  const page = await browser.newPage();
+  await page.addInitScript(VIRTUAL_CLOCK_INJECTION);
+
+  const fileUrl = pathToFileURL(path.resolve(htmlPath)).href;
+  await page.goto(fileUrl, { waitUntil: 'load' });
+
+  // Await fonts before frame 0
+  await page.evaluate(async () => {
+    if (document.fonts && document.fonts.ready) {
+      await document.fonts.ready;
+    }
+  });
+
+  await page.setViewportSize({ width, height });
+  return page;
+}
+
+export async function captureFrame(page, t, { type = 'image/png', quality = 0.94 } = {}) {
+  const dataUrl = await page.evaluate(async ({ time, mime, q }) => {
+    await window.__seek(time);
+    if (window.renderAt) {
+      return await window.renderAt(time, mime, q);
+    }
+    return null;
+  }, { time: t, mime: type, q: quality });
+
+  if (typeof dataUrl === 'string' && dataUrl.includes(',')) {
+    return Buffer.from(dataUrl.slice(dataUrl.indexOf(',') + 1), 'base64');
+  }
+
+  const screenshotType = type === 'image/jpeg' ? 'jpeg' : 'png';
+  return page.screenshot({
+    type: screenshotType,
+    quality: screenshotType === 'jpeg' ? Math.round(quality * 100) : undefined,
+  });
+}