Spaces:
Sleeping
Sleeping
File size: 2,626 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 | const puppeteer = require('puppeteer');
const fs = require('fs');
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();
ctx.fillStyle="red";
ctx.fillRect(0,0,500,500);
ctx.fillStyle="#0ff";
ctx.beginPath();
ctx.arc(200,200,100,0,7);
ctx.fill();
console.log("Canvas width:", canvas.width);
</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 });
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
const processedHtml = html.replace(/<head[^>]*>/i, (m) => m + '<script>' + TIME_SHIM + '</script>');
await page.setContent(processedHtml, { waitUntil: 'networkidle0' });
await page.evaluate((t) => window.__renderFrame(t), 1000);
await new Promise(r => setTimeout(r, 100));
await page.screenshot({ path: 'test_canvas.jpg', type: 'jpeg', quality: 100 });
await browser.close();
console.log("Done");
})();
|