Spaces:
Sleeping
Sleeping
File size: 3,276 Bytes
2fb1736 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 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");
})();
|