@amg555/frameforge-mcp 2.4.9 → 2.7.0

package/src/harness/lib/capture.mjs

@@ -1,192 +1,215 @@
-/**
- * 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;
-  const OriginalDate = window.Date;
-  class VirtualDate extends OriginalDate {
-    constructor(...args) {
-      if (args.length === 0) {
-        super(_startDate + _now);
-      } else {
-        super(...args);
-      }
-    }
-    static now() {
-      return Math.floor(_startDate + _now);
-    }
-  }
-  window.Date = VirtualDate;
-  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;
-  const resetSeed = (tSec) => {
-    _seed = (0x2F6E2B1 ^ Math.imul(Math.floor(tSec * 1000), 0x9E3779B9)) | 0;
-  };
-  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 {
-      if (document.getAnimations) {
-        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;
-    resetSeed(t);
-
-    // Pause & seek CSS animations
-    try {
-      if (document.getAnimations) {
-        document.getAnimations().forEach(a => {
-          if (a.playState !== 'paused') a.pause();
-          a.currentTime = _now;
-        });
-      }
-    } catch (_) {}
-
-    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,
-  });
-}
+/**
+ * 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 _realDateNow = Date.now;
+  const _realSetTimeout = window.setTimeout;
+  const _startDate = _realDateNow();
+  const _delayHandles = new Set();
+  let _delayId = 0;
+
+  window.delayRender = (label = 'asset') => {
+    const id = ++_delayId;
+    _delayHandles.add(id);
+    return id;
+  };
+  window.continueRender = (id) => {
+    _delayHandles.delete(id);
+  };
+  window.cancelRender = (err) => {
+    console.error("Render cancelled:", err);
+  };
+
+  window.__playwright = true;
+
+  // 1. Deterministic clocks
+  performance.now = () => _now;
+  const OriginalDate = window.Date;
+  class VirtualDate extends OriginalDate {
+    constructor(...args) {
+      if (args.length === 0) {
+        super(_startDate + _now);
+      } else {
+        super(...args);
+      }
+    }
+    static now() {
+      return Math.floor(_startDate + _now);
+    }
+  }
+  window.Date = VirtualDate;
+  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;
+  const resetSeed = (tSec) => {
+    _seed = (0x2F6E2B1 ^ Math.imul(Math.floor(tSec * 1000), 0x9E3779B9)) | 0;
+  };
+  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 {
+      if (document.getAnimations) {
+        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;
+    resetSeed(t);
+
+    // Pause & seek CSS animations
+    try {
+      if (document.getAnimations) {
+        document.getAnimations().forEach(a => {
+          if (a.playState !== 'paused') a.pause();
+          a.currentTime = _now;
+        });
+      }
+    } catch (_) {}
+
+    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;
+    }
+
+    if (_delayHandles.size > 0) {
+      const startW = _realDateNow();
+      while (_delayHandles.size > 0 && _realDateNow() - startW < 10000) {
+        await new Promise(r => _realSetTimeout(r, 10));
+      }
+    }
+  };
+})();
+`;
+
+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,
+  });
+}

package/src/harness/lib/verify-quality.mjs

@@ -204,18 +204,58 @@ export async function verifySceneQuality({
     });
   }
 
-  // Motion continuity delta: compare hashes of t=30% vs t=70%
-  // A static/stuck PPT slide will have hash(t1) === hash(t2)
-  const hashEarly = createHash('sha256').update(rawBuffers[1] || rawBuffers[0]).digest('hex');
-  const hashLate  = createHash('sha256').update(rawBuffers[3] || rawBuffers[rawBuffers.length - 1]).digest('hex');
-  const isStuckFrozen = (hashEarly === hashLate);
+  // Motion continuity delta: pixel-luminance MAD between t=30% and t=70% frames.
+  // A pure hash comparison misses slow-drift scenes (e.g. barely-visible zoom) that
+  // look frozen to a human viewer but differ by ≥1 pixel. We require at least 0.5%
+  // of pixels to change by >10 luminance units — this filters lens-flare flickers too.
+  const earlyBuf = rawBuffers[1] || rawBuffers[0];
+  const lateBuf  = rawBuffers[3] || rawBuffers[rawBuffers.length - 1];
+
+  const hashEarly = createHash('sha256').update(earlyBuf).digest('hex');
+  const hashLate  = createHash('sha256').update(lateBuf).digest('hex');
+  const identicalHash = (hashEarly === hashLate);
+
   let motionDelta = 1.0;
+  let isStuckFrozen = identicalHash;
+
+  if (!identicalHash) {
+    // Pixel-level MAD using Playwright canvas read (already done above, reuse page)
+    const pixelMotion = await page.evaluate(async (times) => {
+      const canvas = document.querySelector('canvas') || document.getElementById('stage');
+      if (!canvas) return null;
+      const ctx = canvas.getContext('2d');
+      const w = canvas.width;
+      const h = canvas.height;
+
+      await window.__seek(times[0]);
+      const d1 = ctx.getImageData(0, 0, w, h).data;
+
+      await window.__seek(times[1]);
+      const d2 = ctx.getImageData(0, 0, w, h).data;
+
+      const total = w * h;
+      let changedPixels = 0;
+      for (let i = 0; i < total; i++) {
+        const idx = i * 4;
+        const lum1 = 0.2126 * d1[idx] + 0.7152 * d1[idx + 1] + 0.0722 * d1[idx + 2];
+        const lum2 = 0.2126 * d2[idx] + 0.7152 * d2[idx + 1] + 0.0722 * d2[idx + 2];
+        if (Math.abs(lum1 - lum2) > 10) changedPixels++;
+      }
+      return changedPixels / total;
+    }, [sampleTimes[1] ?? sampleTimes[0], sampleTimes[3] ?? sampleTimes[sampleTimes.length - 1]]);
+
+    if (pixelMotion !== null) {
+      motionDelta = pixelMotion;
+      // Require at least 0.5% of pixels to have changed by >10 luminance units
+      isStuckFrozen = pixelMotion < 0.005;
+    }
+  }
 
   if (isStuckFrozen) {
-    motionDelta = 0.0;
+    motionDelta = identicalHash ? 0.0 : motionDelta;
     sampledFrames.forEach(f => {
       f.score = Math.max(1, f.score - 4);
-      f.issues.push('Stuck motion: zero visual delta between early and late frames');
+      f.issues.push(`Stuck motion: < 0.5% pixel luminance change between t=30% and t=70% (delta=${(motionDelta * 100).toFixed(2)}%)`);
     });
   }
 
@@ -249,3 +289,4 @@ export async function verifySceneQuality({
     sheetPath: renderedSheetPath,
   };
 }
+