Janady13/thatstupidcomputer / scripts/verify-native.mjs

1/** Exact native-byte rendering using official Canvas WASM; no browser, HTTP, CDP or WebGL. */ 2import { createRequire } from 'node:module'; 3import { readFileSync, mkdirSync, writeFileSync, copyFileSync } from 'node:fs'; 4import { fileURLToPath, pathToFileURL } from 'node:url'; 5import { resolve, dirname } from 'node:path'; 6import { createHash } from 'node:crypto'; 7import { createCanvas, Path2D, ImageData, loadImage } from '@napi-rs/canvas'; 8import { sampleClip } from '../apps/web/src/animation/mobile/character-controller.mjs'; 9import { CHARACTER_IDS, MOBILE_ACTIONS } from '../apps/web/src/animation/core/contracts.mjs'; 10import { PERFORMANCES } from '../apps/web/src/animation/performances/catalog.mjs'; 11const require = createRequire(import.meta.url); 12const root = fileURLToPath(new URL('..', import.meta.url)); 13const hash = bytes => createHash('sha256').update(bytes).digest('hex'); 14export const SAMPLE_FRACTIONS = Object.freeze([0, .125, .30, .50, .75, .98]); 15 16/** Reusable local-frame helper for contact sheets or an offline video encoder. */ 17export async function createNativeProofSession({ width = 360, height = 460 } = {}) { 18 if (![width, height].every(n => Number.isInteger(n) && n > 0 && n <= 2000)) throw new Error('Bounded native canvas dimensions required'); 19 const runtimeRoot = dirname(require.resolve('@rive-app/canvas')); 20 const version = JSON.parse(readFileSync(resolve(runtimeRoot, 'package.json'), 'utf8')).version; 21 if (version !== '2.42.1') throw new Error(`Re-review required for Canvas runtime ${version}; expected 2.42.1`); 22 Object.assign(globalThis, { 23 Path2D, ImageData, 24 document: { createElement: tag => { 25 if (tag !== 'canvas') throw new Error(`Unsupported DOM-free proof element ${tag}`); 26 const canvas = createCanvas(width, height), get = canvas.getContext.bind(canvas); 27 canvas.getContext = (type, options) => type === '2d' ? get(type, options) : null; 28 return canvas; 29 } }, 30 requestAnimationFrame: callback => setTimeout(() => callback(performance.now()), 16), 31 cancelAnimationFrame: id => clearTimeout(id), 32 }); 33 const { RuntimeLoader } = require('@rive-app/canvas'); 34 const wasm = readFileSync(resolve(runtimeRoot, 'rive.wasm')); 35 RuntimeLoader.setWasmBinary(wasm.buffer.slice(wasm.byteOffset, wasm.byteOffset + wasm.byteLength)); 36 RuntimeLoader.setWasmFallbackUrl(null); 37 const runtime = await RuntimeLoader.awaitInstance(); 38 const canvas = createCanvas(width, height), renderer = runtime.makeRenderer(canvas); 39 const handles = new Set(); 40 let closed = false; 41 return { 42 canvas, width, height, 43 runtime: { name: '@rive-app/canvas', version, wasmSHA256: hash(wasm), renderer: '@napi-rs/canvas', browser: false, networking: false }, 44 async loadCharacter(bytes, artboardName) { 45 if (closed) throw new Error('Native proof session is closed'); 46 const file = await runtime.load(new Uint8Array(bytes), undefined, false); 47 if (!file) throw new Error('Official native importer returned no file'); 48 const artboard = file.artboardByName(artboardName); 49 if (!artboard) { file.delete(); throw new Error(`Missing native artboard ${artboardName}`); } 50 const animations = []; 51 for (let index = 0; index < artboard.animationCount(); index++) animations.push(artboard.animationByIndex(index).name); 52 let instance, selected, disposed = false; 53 const handle = { 54 artboard: artboard.name, animations, 55 draw(clip, seconds) { 56 if (closed || disposed) throw new Error('Native actor has been disposed'); 57 if (!Number.isFinite(seconds) || seconds < 0 || !animations.includes(clip.name)) throw new Error('Invalid native action/time'); 58 if (selected !== clip.name) { 59 instance?.delete(); 60 instance = new runtime.LinearAnimationInstance(artboard.animationByName(clip.name), artboard); 61 selected = clip.name; 62 } 63 instance.time = clip.loop ? seconds % clip.seconds : Math.min(seconds, clip.seconds); 64 instance.apply(1); artboard.advance(0); 65 renderer.clear(); renderer.save(); 66 renderer.align(runtime.Fit.contain, runtime.Alignment.center, { minX: 0, minY: 0, maxX: width, maxY: height }, artboard.bounds); 67 artboard.draw(renderer); renderer.restore(); runtime.resolveAnimationFrame(); 68 return canvas; 69 }, 70 close() { if (disposed) return; disposed = true; instance?.delete(); artboard.delete(); file.delete(); handles.delete(handle); }, 71 }; 72 handles.add(handle); 73 return handle; 74 }, 75 close() { if (closed) return; for (const handle of [...handles]) handle.close(); renderer.delete(); closed = true; }, 76 }; 77} 78 79const escape = value => String(value).replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;'); 80export function referenceSVG(model, clip, seconds, width = 360, height = 460) { 81 const pose = sampleClip(clip, seconds), DEG = 180 / Math.PI; 82 const render = node => { 83 const values = pose[node.id] || {}; 84 const x = values.x ?? node.x ?? 0, y = values.y ?? node.y ?? 0; 85 const rotation = (values.rotation ?? ((node.rotation || 0) / DEG)) * DEG; 86 const sx = values.scaleX ?? node.scaleX ?? 1, sy = values.scaleY ?? node.scaleY ?? 1; 87 let opacity = values.opacity ?? node.opacity ?? 1; 88 if (node.id === 'hand-left-censor' || node.id === 'hand-right-censor') opacity = 1; 89 const common = `id="${escape(node.id)}" opacity="${opacity}"`; 90 if (node.type === 'group') return `<g ${common} transform="translate(${x} ${y}) rotate(${rotation}) scale(${sx} ${sy})">${(node.children || []).map(render).join('')}</g>`; 91 return `<path ${common} d="${escape(node.d)}" fill="${escape(node.fill)}" stroke="${escape(node.stroke)}" stroke-width="${node.strokeWidth}" stroke-linecap="round" stroke-linejoin="round"/>`; 92 }; 93 return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${model.width} ${model.height}">${render(model.root)}</svg>`; 94} 95export function comparePixels(a, b) { 96 if (a.length !== b.length || a.length % 4) throw new Error('Pixel buffers must match'); 97 let total = 0, large = 0, union = 0, missing = 0, filled = 0; 98 for (let i = 0; i < a.length; i += 4) { 99 const aa = a[i + 3] / 255, ba = b[i + 3] / 255; 100 let pixel = 0; 101 for (let color = 0; color < 3; color++) pixel += Math.abs(a[i + color] * aa - b[i + color] * ba); 102 total += pixel / 3; 103 if (pixel / 3 > 30) large++; 104 if (a[i + 3] > 20 || b[i + 3] > 20) { union++; if (Math.abs(a[i + 3] - b[i + 3]) > 100) missing++; } 105 if (a[i + 3] > 20) filled++; 106 } 107 const pixels = a.length / 4; 108 return { meanError: total / pixels / 255, largeDifference: large / pixels, geometryDifference: missing / Math.max(1, union), filledPixels: filled }; 109} 110export async function verifyNative({ projectRoot = root } = {}) { 111 const reports = resolve(projectRoot, 'native/reports'); mkdirSync(reports, { recursive: true }); 112 const output = resolve(reports, 'canvas'); mkdirSync(output, { recursive: true }); 113 const reportPath = resolve(reports, 'native-canvas.json'); 114 writeFileSync(reportPath, JSON.stringify({ status: 'RUNNING', startedAt: new Date().toISOString(), files: [] }) + '\n'); 115 writeFileSync(resolve(projectRoot, 'native/canvas-verified-assets.json'), '{}\n'); 116 writeFileSync(resolve(projectRoot, 'native/canvas-visual-review.json'), '{}\n'); 117 const assets = resolve(projectRoot, 'apps/web/public/animation'); 118 const manifest = JSON.parse(readFileSync(resolve(assets, 'manifest.json'), 'utf8')); 119 const compiled = JSON.parse(readFileSync(resolve(reports, 'native-compiled.json'), 'utf8')); 120 const report = { 121 status: 'PASS', testedAt: new Date().toISOString(), 122 scope: 'Official Canvas WASM exact-byte import and native timeline rendering in Node with @napi-rs/canvas; five normalized phase samples plus the authored peak per action. Not browser/WebGL, compositor, responsive layout, physical-device or user-interface verification.', 123 sampleFractions: SAMPLE_FRACTIONS, authoredPeakReplacesMidpoint: true, thresholds: { meanError: .025, geometryDifference: .08, filledPixelsMinimum: 1000 }, 124 sourceManifestSHA256: hash(readFileSync(resolve(assets, 'manifest.json'))), files: [], 125 }; 126 let session; 127 try { 128 if (compiled.status !== 'PASS') throw new Error('Current official compilation has not passed'); 129 if (JSON.stringify(manifest.characters.map(c => c.slug).sort()) !== JSON.stringify([...CHARACTER_IDS].sort())) throw new Error('Manifest character inventory mismatch'); 130 session = await createNativeProofSession(); report.runtime = session.runtime; 131 console.log(`Official DOM-free Canvas ${session.runtime.version} initialized; browser boundary remains BLOCKED.`); 132 for (const item of manifest.characters) { 133 const bytes = readFileSync(resolve(projectRoot, `native/compiled/${item.slug}.riv`)); 134 const motionBytes = readFileSync(resolve(assets, `mobile/${item.slug}/motion.json`)); 135 const modelBytes = readFileSync(resolve(assets, `mobile/${item.slug}/scene.json`)); 136 const source = compiled.files.find(file => file.slug === item.slug); 137 if (!source || source.sha256 !== hash(bytes) || source.motionSHA256 !== hash(motionBytes) || source.buildRmlSHA256 !== hash(readFileSync(resolve(projectRoot, `native/build-source/${item.slug}/scene.rml`)))) throw new Error(`Stale native bytes or compilation lineage: ${item.slug}`); 138 const model = JSON.parse(modelBytes), clips = JSON.parse(motionBytes); 139 const names = clips.map(clip => clip.name).sort(); 140 if (JSON.stringify(names) !== JSON.stringify([...MOBILE_ACTIONS].sort()) || JSON.stringify(names) !== JSON.stringify(item.clips.map(clip => clip.name).sort())) throw new Error(`Authoritative motion/manifest contract mismatch: ${item.slug}`); 141 const actor = await session.loadCharacter(bytes, item.artboard); 142 if (JSON.stringify([...actor.animations].sort()) !== JSON.stringify(names)) throw new Error(`Native timeline mismatch: ${item.slug}`); 143 const record = { slug: item.slug, artboard: actor.artboard, sha256: hash(bytes), bytes: bytes.length, motionSHA256: hash(motionBytes), sceneSHA256: hash(modelBytes), buildRmlSHA256: source.buildRmlSHA256, animations: actor.animations, checks: [] }; 144 report.files.push(record); 145 for (const clip of clips) { 146 const samples = []; 147 const peakSeconds = PERFORMANCES[clip.name]?.peakSeconds; 148 if (!Number.isFinite(peakSeconds) || peakSeconds < 0) throw new Error(`Missing authored peak for ${clip.name}`); 149 for (const fraction of SAMPLE_FRACTIONS) { 150 const seconds = fraction === .5 ? peakSeconds : clip.seconds * fraction; 151 const native = actor.draw(clip, seconds), refCanvas = createCanvas(session.width, session.height), ctx = refCanvas.getContext('2d'); 152 ctx.drawImage(await loadImage(Buffer.from(referenceSVG(model, clip, seconds))), 0, 0); 153 const result = { fraction: seconds / clip.seconds, phase: fraction === .5 ? 'authored-peak' : 'normalized', seconds, ...comparePixels(native.getContext('2d').getImageData(0, 0, session.width, session.height).data, ctx.getImageData(0, 0, session.width, session.height).data) }; 154 if (fraction === .5) { 155 writeFileSync(resolve(output, `${item.slug}--${clip.name}--native.png`), native.toBuffer('image/png')); 156 writeFileSync(resolve(output, `${item.slug}--${clip.name}--svg.png`), refCanvas.toBuffer('image/png')); 157 } 158 samples.push(result); 159 } 160 const pass = samples.every(sample => sample.filledPixels > 1000 && sample.meanError < .025 && sample.geometryDifference < .08); 161 record.checks.push({ action: clip.name, status: pass ? 'PASS' : 'FAIL', captureSeconds: peakSeconds, samples }); 162 if (!pass) report.status = 'FAIL'; 163 } 164 actor.close(); 165 console.log(`${item.slug}: ${record.checks.filter(check => check.status === 'PASS').length}/${record.checks.length} native parity checks`); 166 } 167 } catch (error) { report.status = 'FAIL'; report.error = error.stack || String(error); } 168 finally { session?.close(); } 169 const checks = report.files.flatMap(file => file.checks); 170 report.totals = { characters: report.files.length, actions: checks.length, samples: checks.reduce((sum, check) => sum + check.samples.length, 0), passed: checks.filter(check => check.status === 'PASS').length }; 171 if (report.totals.characters !== CHARACTER_IDS.length || report.totals.actions !== CHARACTER_IDS.length * MOBILE_ACTIONS.length || report.totals.samples !== CHARACTER_IDS.length * MOBILE_ACTIONS.length * SAMPLE_FRACTIONS.length) report.status = 'FAIL'; 172 writeFileSync(reportPath, JSON.stringify(report, null, 2) + '\n'); 173 if (report.status === 'PASS') { 174 const entries = {}; mkdirSync(resolve(assets, 'rive'), { recursive: true }); 175 for (const file of report.files) { 176 copyFileSync(resolve(projectRoot, `native/compiled/${file.slug}.riv`), resolve(assets, `rive/${file.slug}.riv`)); 177 entries[file.slug] = { slug: file.slug, src: `/animation/rive/${file.slug}.riv`, artboard: file.artboard, sha256: file.sha256, status: 'canvas-runtime-verified', runtimeVersion: report.runtime.version, testedAt: report.testedAt, animations: file.animations, actionCount: file.checks.length, sampleCount: file.checks.reduce((n, check) => n + check.samples.length, 0), motionSHA256: file.motionSHA256, browserWebGLVerified: false }; 178 } 179 writeFileSync(resolve(projectRoot, 'native/canvas-verified-assets.json'), JSON.stringify(entries, null, 2) + '\n'); 180 } 181 console.log(`${report.status}: ${report.totals.passed}/${report.totals.actions} actions, ${report.totals.samples} samples. ${report.error || ''}`); 182 return report; 183} 184if (process.argv[1] && import.meta.url === pathToFileURL(resolve(process.argv[1])).href) { 185 const report = await verifyNative(); 186 if (report.status !== 'PASS') process.exitCode = 1; 187} 188