Spaces:
Sleeping
Sleeping
| const puppeteer = require('puppeteer'); | |
| const html = `<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>LLM Documentary</title> | |
| <style> | |
| html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Arial,sans-serif} | |
| canvas{position:fixed;inset:0} | |
| .scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform:scale(.9);transition:all 1.2s} | |
| .active{opacity:1;transform:scale(1)} | |
| h1{font-size:5vw;margin:0;text-align:center;text-shadow:0 0 20px #0ff} | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="c"></canvas> | |
| <div class="scene active"><h1>LARGE LANGUAGE MODELS</h1></div> | |
| <script> | |
| const canvas=document.getElementById('c'),ctx=canvas.getContext('2d'); | |
| function resize(){canvas.width=innerWidth;canvas.height=innerHeight} | |
| resize(); | |
| const p=[...Array(180)].map(()=>({x:Math.random()*innerWidth,y:Math.random()*innerHeight, | |
| vx:(Math.random()-.5)*0.5,vy:(Math.random()-.5)*0.5,r:Math.random()*2+1})); | |
| function anim(){ | |
| ctx.fillStyle="rgba(0,0,0,.25)";ctx.fillRect(0,0,canvas.width,canvas.height); | |
| ctx.fillStyle="#0ff"; | |
| for(let a of p){ | |
| a.x+=a.vx;a.y+=a.vy; | |
| if(a.x<0||a.x>canvas.width)a.vx*=-1; | |
| if(a.y<0||a.y>canvas.height)a.vy*=-1; | |
| ctx.beginPath();ctx.arc(a.x,a.y,a.r,0,7);ctx.fill(); | |
| } | |
| requestAnimationFrame(anim); | |
| } | |
| anim(); | |
| </script> | |
| </body> | |
| </html>`; | |
| const TIME_SHIM = ` | |
| window.__VTIME_INSTALLED__ = true; | |
| var vtime = 0; | |
| var _origRaf = window.requestAnimationFrame; | |
| var rafCallbacks = []; var rafId = 0; | |
| window.requestAnimationFrame = function(cb){ rafId++; rafCallbacks.push({id: rafId, cb: cb}); return rafId; }; | |
| window.__advanceVTime = function(target){ | |
| var STEP = 8; | |
| while (vtime < target) { | |
| vtime = Math.min(vtime + STEP, target); | |
| var cbs = rafCallbacks; rafCallbacks = []; | |
| for (var j = 0; j < cbs.length; j++) { try { cbs[j].cb(vtime); } catch(e){} } | |
| } | |
| }; | |
| window.__renderFrame = function(target) { | |
| return new Promise(function(resolve) { | |
| window.__advanceVTime(target); | |
| if (typeof _origRaf === 'function') { | |
| _origRaf(function() { _origRaf(resolve); }); | |
| } else { | |
| setTimeout(resolve, 0); | |
| } | |
| }); | |
| }; | |
| `; | |
| (async () => { | |
| const browser = await puppeteer.launch({ | |
| headless: 'new', | |
| args: ['--no-sandbox', '--disable-setuid-sandbox'] | |
| }); | |
| const page = await browser.newPage(); | |
| await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 1.6 }); | |
| const processedHtml = html.replace(/<head[^>]*>/i, (m) => m + '<script>' + TIME_SHIM + '</script>'); | |
| await page.setContent(processedHtml, { waitUntil: 'networkidle0' }); | |
| // Advance time to 5000ms (Worker 2 Simulation) | |
| for (let i = 0; i <= 300; i++) { | |
| const timeMs = i * 16.666; | |
| await page.evaluate((t) => window.__renderFrame(t), timeMs); | |
| // Simulate fast-forwarding (skip screenshots) | |
| await new Promise(r => setTimeout(r, 5)); | |
| } | |
| // Take screenshot at exactly frame 300 (5 seconds) | |
| await page.screenshot({ path: 'test_canvas_worker2.jpg', type: 'jpeg', quality: 100 }); | |
| await page.screenshot({ | |
| path: 'test_canvas3.jpg', | |
| type: 'jpeg', | |
| quality: 100, | |
| clip: { x: 160, y: 90, width: 1600, height: 900 } | |
| }); | |
| await browser.close(); | |
| console.log("Done"); | |
| })(); | |