Janady13/thatstupidcomputer / scripts/render-desktop-preview.mjs

1/** Actual desktop SVG/controller proof. Local XML attribute composition and rasterization only. 2 * Run: node --import tsx scripts/render-desktop-preview.mjs [--sheets-only] 3 * No browser, browser engine, HTTP server, Rive conversion or network request is used. 4 */ 5import React from 'react'; 6import { renderToStaticMarkup } from 'react-dom/server'; 7import { DOMParser, XMLSerializer } from '@xmldom/xmldom'; 8import { createCanvas, loadImage } from '@napi-rs/canvas'; 9import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'; 10import { createHash } from 'node:crypto'; 11import { fileURLToPath } from 'node:url'; 12import { resolve, relative } from 'node:path'; 13import { spawn, spawnSync } from 'node:child_process'; 14import { once } from 'node:events'; 15import { tsImport } from 'tsx/esm/api'; 16import { ComputerMotion } from '../apps/web/src/animation/desktop/computer-motion.mjs'; 17 18export const PROJECT_ROOT = fileURLToPath(new URL('..', import.meta.url)); 19export const OUTPUT_DIR = resolve(PROJECT_ROOT, 'docs/desktop-preview'); 20export const sha256 = bytes => createHash('sha256').update(bytes).digest('hex'); 21const serializer = new XMLSerializer(); 22let sessionActive = false; 23 24/** These are explicitly bounded controller-test primitives, not a DOM/browser engine. */ 25function installControllerPrimitives(reducedMotion) { 26 const previous = new Map(); 27 const listeners = new Set(); 28 const replace = (key, value) => { previous.set(key, Object.getOwnPropertyDescriptor(globalThis, key)); Object.defineProperty(globalThis, key, { configurable: true, writable: true, value }); }; 29 replace('document', { hidden: false, addEventListener: (_, fn) => listeners.add(fn), removeEventListener: (_, fn) => listeners.delete(fn) }); 30 replace('matchMedia', query => ({ media: query, matches: reducedMotion, addEventListener: (_, fn) => listeners.add(fn), removeEventListener: (_, fn) => listeners.delete(fn) })); 31 replace('requestAnimationFrame', () => { throw new Error('Offline proof must use the external controller clock; no animation scheduler is permitted'); }); 32 replace('cancelAnimationFrame', () => {}); 33 return () => { for (const [key, descriptor] of previous) { if (descriptor) Object.defineProperty(globalThis, key, descriptor); else delete globalThis[key]; } }; 34} 35 36export async function createDesktopProofSession({ reducedMotion = false, attitudeEnabled = true } = {}) { 37 if (sessionActive) throw new Error('Desktop proof sessions must be sequential because controller-test primitives are scoped globals'); 38 sessionActive = true; 39 let restore = () => {}; 40 try { 41 const [{ ComputerGeometry }, { DEFAULT_PALETTE }] = await Promise.all([ 42 tsImport('../apps/web/src/animation/desktop/ComputerGeometry.tsx', import.meta.url), 43 tsImport('../apps/web/src/animation/office/catalog.ts', import.meta.url), 44 ]); 45 const markup = renderToStaticMarkup(React.createElement(ComputerGeometry, { idPrefix: 'desktop-proof', palette: DEFAULT_PALETTE, artRef: null })); 46 if (/<(?:script|foreignObject|image)\b|(?:href|src)="(?:https?:|\/\/)/i.test(markup)) throw new Error('Proof geometry must be self-contained vector markup'); 47 const document = new DOMParser().parseFromString(markup, 'image/svg+xml'); 48 const svg = document.documentElement; 49 svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); 50 const nodes = Array.from(svg.getElementsByTagName('*')); 51 // The controller only needs named-element discovery and dataset state attributes. 52 svg.querySelectorAll = selector => { 53 if (selector !== '[id]') throw new Error(`Unsupported offline controller selector: ${selector}`); 54 return nodes.filter(node => node.hasAttribute('id')); 55 }; 56 for (const node of nodes) Object.defineProperty(node, 'id', { configurable: true, get: () => node.getAttribute('id') }); 57 svg.dataset = new Proxy({}, { set(_, key, value) { svg.setAttribute('data-' + String(key).replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()), String(value)); return true; } }); 58 svg.addEventListener = () => {}; svg.removeEventListener = () => {}; 59 restore = installControllerPrimitives(reducedMotion); 60 const cables = JSON.parse(readFileSync(resolve(PROJECT_ROOT, 'apps/web/src/animation/desktop/cable-poses.json'), 'utf8')); 61 const controller = new ComputerMotion(svg, { cables, externalClock: true, pointer: false, autoplay: false, attitudeEnabled }); 62 if (typeof controller.seek !== 'function' || typeof controller.getSnapshot !== 'function') throw new Error('The upgraded actual desktop controller must provide seek() and getSnapshot()'); 63 let closed = false; 64 return { 65 svg, controller, originalMarkup: markup, palette: DEFAULT_PALETTE, 66 render(state, seconds) { 67 if (closed) throw new Error('Proof session is closed'); 68 controller.setState(state, { immediate: true }); 69 controller.seek(seconds); 70 const snapshot = controller.getSnapshot(); 71 const xml = serializer.serializeToString(svg); 72 if (/NaN|Infinity|undefined/.test(xml)) throw new Error(`Invalid rendered SVG attributes: ${state}`); 73 return { svg: xml, snapshot, sha256: sha256(xml) }; 74 }, 75 serialize() { return serializer.serializeToString(svg); }, 76 close() { if (closed) return; closed = true; controller.destroy(); restore(); sessionActive = false; }, 77 }; 78 } catch (error) { restore(); sessionActive = false; throw error; } 79} 80 81export async function rasterizeDesktop(svg, { width = 640, height = 640, background = '#F4E5C4' } = {}) { 82 const canvas = createCanvas(width, height), ctx = canvas.getContext('2d'); 83 if (background) { ctx.fillStyle = background; ctx.fillRect(0, 0, width, height); } 84 const image = await loadImage(Buffer.from(svg)); 85 ctx.drawImage(image, 0, 0, width, height); 86 return canvas; 87} 88 89function sourceBindings() { 90 const desktop = 'apps/web/src/animation/desktop'; 91 // Bind actual rendering inputs. React lifecycle/page wrappers are outside this proof's scope. 92 const paths = ['ComputerGeometry.tsx', 'DesktopGestures.tsx', 'gesture-geometry.mjs', 'computer-motion.mjs', 'performances.mjs', 'cable-poses.json'].map(name => `${desktop}/${name}`); 93 paths.push('apps/web/src/animation/office/catalog.ts', 'apps/web/src/animation/core/contracts.mjs', 'scripts/render-desktop-preview.mjs', 'package-lock.json'); 94 return paths.sort().map(path => ({ path, sha256: sha256(readFileSync(resolve(PROJECT_ROOT, path))) })); 95} 96function assertUnchanged(bindings) { for (const record of bindings) if (sha256(readFileSync(resolve(PROJECT_ROOT, record.path))) !== record.sha256) throw new Error(`Source changed during proof generation: ${record.path}`); } 97function artifact(path) { const bytes = readFileSync(path); return { path: relative(PROJECT_ROOT, path), sha256: sha256(bytes), bytes: bytes.length }; } 98const writeJSON = (path, value) => writeFileSync(path, JSON.stringify(value, null, 2) + '\n'); 99function text(ctx, value, x, y, size = 18, color = '#29261F', weight = 400) { ctx.fillStyle = color; ctx.font = `${weight} ${size}px sans-serif`; ctx.fillText(value, x, y); } 100 101export async function renderDesktopPreview({ sheetsOnly = false } = {}) { 102 const { DESKTOP_PERFORMANCES } = await import('../apps/web/src/animation/desktop/performances.mjs'); 103 if (DESKTOP_PERFORMANCES.length !== 32) throw new Error('Desktop proof requires the complete 32-performance contract'); 104 const sources = sourceBindings(), session = await createDesktopProofSession(); 105 mkdirSync(resolve(OUTPUT_DIR, 'states'), { recursive: true }); 106 const proof = { schema: 'tsc-desktop-runtime-proof/v3', status: 'RUNNING', generatedAt: new Date().toISOString(), source: 'React ComputerGeometry -> xmldom named attributes -> actual ComputerMotion.setState/seek/_draw/getSnapshot -> napi Canvas SVG rasterizer. Offline character proof, not a browser or website recording.', browserVerified: false, browserPolicy: 'BLOCKED', stateCount: DESKTOP_PERFORMANCES.length, sources, environment: { node: process.version, react: React.version, canvas: JSON.parse(readFileSync(resolve(PROJECT_ROOT, 'node_modules/@napi-rs/canvas/package.json'))).version, xmldom: JSON.parse(readFileSync(resolve(PROJECT_ROOT, 'node_modules/@xmldom/xmldom/package.json'))).version }, states: [], sheets: [], limitations: ['No browser, CSS layout, interaction, navigation, form submission or real device validation.', 'The controller is exercised through a deterministic external clock; no browser scheduling or pointer events are replayed.', 'The reel uses authored excerpts and mock captions; it does not demonstrate a completed demo request.', 'The SVG and procedural cable/gesture controller remain the real implementation; mobile Rive bytes are unchanged.'] }; 107 writeJSON(resolve(OUTPUT_DIR, 'desktop-proof.json'), proof); 108 try { 109 const captures = []; 110 for (const performance of DESKTOP_PERFORMANCES) { 111 const frame = session.render(performance.id, performance.peakSeconds); 112 const image = await rasterizeDesktop(frame.svg); 113 const svgPath = resolve(OUTPUT_DIR, `states/${performance.id}.svg`), pngPath = resolve(OUTPUT_DIR, `states/${performance.id}.png`); 114 writeFileSync(svgPath, frame.svg); writeFileSync(pngPath, image.toBuffer('image/png')); 115 proof.states.push({ id: performance.id, label: performance.label, seconds: performance.peakSeconds, snapshot: frame.snapshot, svg: artifact(svgPath), png: artifact(pngPath) }); 116 captures.push({ performance, image }); 117 } 118 async function sheet(records, path, columns, size, title) { 119 const gap = 22, top = 110, cellH = size + 66, width = columns * (size + gap) + gap, height = top + Math.ceil(records.length / columns) * cellH + 34; 120 const canvas = createCanvas(width, height), ctx = canvas.getContext('2d'); ctx.fillStyle = '#eee8da'; ctx.fillRect(0, 0, width, height); 121 text(ctx, title, 26, 42, 28, '#29261f', 700); text(ctx, 'Original CRT drawing · actual SVG controller · offline rendered proof · attitudes remain censored', 27, 77, 17, '#645d51'); 122 records.forEach(({ performance, image }, index) => { const x = gap + index % columns * (size + gap), y = top + Math.floor(index / columns) * cellH; ctx.drawImage(image, x, y, size, size); text(ctx, performance.label, x + 8, y + size + 28, 23, '#29261f', 700); text(ctx, `${performance.id} · ${performance.peakSeconds.toFixed(2)}s`, x + 8, y + size + 51, 16, '#645d51'); }); 123 writeFileSync(path, canvas.toBuffer('image/png')); proof.sheets.push({ ...artifact(path), width, height, states: records.map(({ performance }) => performance.id) }); 124 } 125 await sheet(captures, resolve(OUTPUT_DIR, 'TSC-Desktop-32-States.png'), 4, 440, 'That Stupid Computer / 32 desktop performances'); 126 for (let start = 0; start < captures.length; start += 8) await sheet(captures.slice(start, start + 8), resolve(OUTPUT_DIR, `TSC-Desktop-Details-${String(start / 8 + 1).padStart(2, '0')}.png`), 2, 640, `Desktop performance details / ${start + 1}–${start + 8}`); 127 assertUnchanged(sources); proof.status = 'SHEETS_READY'; writeJSON(resolve(OUTPUT_DIR, 'desktop-proof.json'), proof); 128 console.log(`Desktop contact sheets ready: ${proof.states.length} actual controller states.`); 129 if (!sheetsOnly) proof.video = await renderReel(session, DESKTOP_PERFORMANCES, sources); 130 assertUnchanged(sources); proof.status = 'PASS'; proof.completedAt = new Date().toISOString(); 131 writeJSON(resolve(OUTPUT_DIR, 'desktop-proof.json'), proof); console.log(JSON.stringify({ status: proof.status, states: proof.states.length, sheets: proof.sheets.length, video: proof.video?.path })); 132 return proof; 133 } catch (error) { proof.status = 'FAIL'; proof.error = error.message; writeJSON(resolve(OUTPUT_DIR, 'desktop-proof.json'), proof); throw error; } 134 finally { session.close(); } 135} 136 137async function renderReel(session, performances, bindings) { 138 const byId = Object.fromEntries(performances.map(item => [item.id, item])); 139 // Explicit authored excerpts: a proof edit, not a recording of page or form behavior. 140 const selections = [ 141 ['idle', 'Still here. Still a little skeptical.'], ['amused', 'A sense of humor comes standard.'], 142 ['skeptical', 'Some ideas deserve a second look.'], ['facepalm', 'We have all been there.'], 143 ['rude-flip-off', 'A little attitude. Always censored.'], ['double-flip-off', 'Okay. A lot of attitude.'], 144 ['point-left', 'Look this way.'], ['point-right', 'Now over here.'], 145 ['beckon', 'Come take a closer look.'], ['demo-invite', 'Get my demo'], 146 ['revived', 'Ready for a fresh start.'], ['bow', 'Your corner of the internet. With character.'], 147 ]; 148 for (const [id] of selections) if (!byId[id]) throw new Error(`Missing reel state ${id}; use the actual desktop metadata ID`); 149 const probe = spawnSync('ffmpeg', ['-version'], { encoding: 'utf8', timeout: 10000 }); 150 if (probe.status !== 0) throw new Error('A local ffmpeg encoder is required'); 151 const width = 1280, height = 720, fps = 24, shotSeconds = 2.5; 152 const canvas = createCanvas(width, height), ctx = canvas.getContext('2d'); 153 const output = resolve(OUTPUT_DIR, 'TSC-Desktop-Character-v3.mp4'); 154 const encoder = spawn('ffmpeg', ['-y', '-loglevel', 'error', '-f', 'rawvideo', '-pixel_format', 'rgba', '-video_size', `${width}x${height}`, '-framerate', String(fps), '-i', 'pipe:0', '-an', '-c:v', 'libx264', '-threads', '2', '-preset', 'fast', '-crf', '19', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', output], { stdio: ['pipe', 'ignore', 'pipe'] }); 155 let errors = '', frames = 0; const frameHashes = [], shots = [], chapterCaptures = []; 156 mkdirSync(resolve(OUTPUT_DIR, 'reel-captures'), { recursive: true }); 157 encoder.stderr.on('data', chunk => { errors = (errors + chunk).slice(-5000); }); 158 const done = once(encoder, 'close'); const deadline = setTimeout(() => encoder.kill('SIGTERM'), 180000); 159 try { 160 for (const [id, caption] of selections) { 161 const performance = byId[id]; 162 const start = Math.max(0, Math.min(performance.peakSeconds - shotSeconds / 2, Math.max(0, performance.seconds - shotSeconds))); 163 shots.push({ id, sourceStartSeconds: start, excerptSeconds: shotSeconds, firstFrame: frames, caption, mockCaption: true }); 164 for (let frame = 0; frame < fps * shotSeconds; frame++) { 165 const seconds = Math.min(performance.seconds, start + frame / fps); 166 const rendered = session.render(id, seconds), actor = await loadImage(Buffer.from(rendered.svg)); 167 ctx.fillStyle = '#eee8da'; ctx.fillRect(0, 0, width, height); 168 text(ctx, 'THAT STUPID COMPUTER / THE ORIGINAL DESKTOP CHARACTER', 44, 42, 14, '#a24d25', 700); 169 text(ctx, 'Offline animation reel · actual SVG controller', 44, 70, 15, '#645d51'); 170 ctx.drawImage(actor, 24, 77, 636, 636); 171 text(ctx, performance.label, 682, 247, 37, '#29261f', 700); 172 const words = caption.split(' '); let line = '', y = 296; 173 for (const word of words) { const next = line ? line + ' ' + word : word; ctx.font = '24px sans-serif'; if (ctx.measureText(next).width > 510 && line) { text(ctx, line, 684, y, 24, '#645d51'); y += 35; line = word; } else line = next; } 174 if (line) text(ctx, line, 684, y, 24, '#645d51'); 175 if (id === 'demo-invite') { ctx.fillStyle = '#29261f'; ctx.fillRect(684, 369, 236, 60); text(ctx, 'Get my demo', 720, 408, 23, '#f4e5c4', 700); text(ctx, 'Mock caption — not an interactive form', 684, 465, 15, '#645d51'); } 176 text(ctx, `${String(shots.length).padStart(2, '0')} / ${selections.length} ${id} · t=${seconds.toFixed(2)}s`, 45, 694, 13, '#645d51'); 177 text(ctx, 'Browser validation remains blocked', 920, 694, 13, '#645d51'); 178 if (frame === fps * shotSeconds / 2) { 179 const png = canvas.toBuffer('image/png'), capturePath = resolve(OUTPUT_DIR, `reel-captures/${id}.png`); 180 writeFileSync(capturePath, png); chapterCaptures.push({ id, frame: frames, seconds, ...artifact(capturePath) }); 181 if (id === 'demo-invite') writeFileSync(resolve(OUTPUT_DIR, 'TSC-Desktop-Character-v3-poster.png'), png); 182 } 183 const rgba = ctx.getImageData(0, 0, width, height).data; 184 frameHashes.push({ frame: frames, state: id, seconds, svgSHA256: rendered.sha256, rgbaSHA256: sha256(rgba) }); 185 if (!encoder.stdin.write(Buffer.from(rgba.buffer, rgba.byteOffset, rgba.byteLength))) await once(encoder.stdin, 'drain'); 186 frames++; 187 } 188 } 189 encoder.stdin.end(); const [code] = await done; 190 if (code !== 0) throw new Error(`ffmpeg failed (${code}): ${errors}`); 191 assertUnchanged(bindings); 192 writeJSON(resolve(OUTPUT_DIR, 'desktop-reel-frames.json'), { frames: frameHashes, shots }); 193 return { ...artifact(output), width, height, fps, frames, seconds: frames / fps, ffmpeg: probe.stdout.split('\n')[0], frameEvidence: artifact(resolve(OUTPUT_DIR, 'desktop-reel-frames.json')), poster: artifact(resolve(OUTPUT_DIR, 'TSC-Desktop-Character-v3-poster.png')), chapterCaptures, shots }; 194 } finally { clearTimeout(deadline); if (encoder.exitCode === null) encoder.kill('SIGTERM'); } 195} 196 197if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) { 198 await renderDesktopPreview({ sheetsOnly: process.argv.includes('--sheets-only') }); 199} 200