Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
12 kB · 379 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380/** * Offscreen Rendering Manager * * Creates two invisible offscreen BrowserWindows: * - Front: AC webview (localhost:8888 or aesthetic.computer) * - Back: Terminal with xterm.js + emacs * * Captures frames via paint events and sends to main renderer as textures. */
const { BrowserWindow, ipcMain } = require('electron');const path = require('path');const { spawn } = require('child_process');const fs = require('fs');
// Find docker binary pathfunction getDockerPath() { if (process.platform === 'darwin') { const dockerLocations = [ '/opt/homebrew/bin/docker', '/usr/local/bin/docker', '/Applications/Docker.app/Contents/Resources/bin/docker' ]; for (const loc of dockerLocations) { if (fs.existsSync(loc)) return loc; } } return 'docker';}
let pty;try { pty = require('node-pty');} catch (e) { console.warn('[offscreen] node-pty not available');}
// Try to load native OSR GPU addon for shared texture supportlet osrGpu;try { osrGpu = require('./native/osr-gpu'); osrGpu.initContext(); console.log('[offscreen] Native OSR GPU addon loaded - using shared textures');} catch (e) { console.warn('[offscreen] Native OSR GPU addon not available:', e.message); osrGpu = null;}
class OffscreenManager { constructor() { this.frontWindow = null; this.backWindow = null; this.mainWindow = null; this.frameRate = 30; this.ptyProcess = null; }
/** * Initialize offscreen rendering with the main 3D window */ init(mainWindow, options = {}) { this.mainWindow = mainWindow; this.frameRate = options.frameRate || 30; // Listen for start signal from renderer ipcMain.on('start-offscreen-rendering', () => { console.log('[offscreen] Starting offscreen rendering...'); this.createOffscreenWindows(options); }); // Handle PTY connection for offscreen terminal ipcMain.on('connect-offscreen-pty', (event) => { console.log('[offscreen] Connecting PTY for terminal...'); this.connectPTY(event.sender); }); // Handle PTY input from offscreen terminal ipcMain.on('offscreen-pty-input', (event, data) => { if (this.ptyProcess) { this.ptyProcess.write(data); } }); // ========== Input Event Forwarding ========== // Forward mouse events to front/back windows ipcMain.on('forward-mouse', (event, { target, type, x, y, button, clickCount }) => { const targetWindow = target === 'front' ? this.frontWindow : this.backWindow; if (!targetWindow || targetWindow.isDestroyed()) return; const wc = targetWindow.webContents; const modifiers = []; if (type === 'mouseDown') { wc.sendInputEvent({ type: 'mouseDown', x, y, button, clickCount, modifiers }); } else if (type === 'mouseUp') { wc.sendInputEvent({ type: 'mouseUp', x, y, button, clickCount, modifiers }); } else if (type === 'mouseMove') { wc.sendInputEvent({ type: 'mouseMove', x, y, modifiers }); } else if (type === 'mouseWheel') { wc.sendInputEvent({ type: 'mouseWheel', x, y, deltaX: 0, deltaY: button, modifiers }); } }); // Forward keyboard events to front/back windows ipcMain.on('forward-key', (event, { target, type, keyCode, modifiers }) => { const targetWindow = target === 'front' ? this.frontWindow : this.backWindow; if (!targetWindow || targetWindow.isDestroyed()) return; const wc = targetWindow.webContents; if (type === 'keyDown') { wc.sendInputEvent({ type: 'keyDown', keyCode, modifiers: modifiers || [] }); } else if (type === 'keyUp') { wc.sendInputEvent({ type: 'keyUp', keyCode, modifiers: modifiers || [] }); } else if (type === 'char') { wc.sendInputEvent({ type: 'char', keyCode, modifiers: modifiers || [] }); } }); // Forward text input directly to PTY for terminal ipcMain.on('forward-pty-input', (event, data) => { if (this.ptyProcess) { this.ptyProcess.write(data); } }); }
connectPTY(webContents) { if (!pty) { webContents.send('pty-data', '\r\n\x1b[31mError: node-pty not available\x1b[0m\r\n'); return; } const dockerPath = getDockerPath(); // First check if container is running, start it if needed this.ensureContainerRunning(dockerPath).then(() => { // Spawn docker exec into the aesthetic container with emacsclient this.ptyProcess = pty.spawn(dockerPath, [ 'exec', '-it', 'aesthetic', 'fish', '-c', 'emacsclient -nw -a "" || fish' ], { name: 'xterm-256color', cols: 120, rows: 40, cwd: process.env.HOME, env: { ...process.env, TERM: 'xterm-256color' } }); this.ptyProcess.onData((data) => { if (!webContents.isDestroyed()) { webContents.send('pty-data', data); } }); this.ptyProcess.onExit(() => { if (!webContents.isDestroyed()) { webContents.send('pty-data', '\r\n\x1b[33m[Session ended]\x1b[0m\r\n'); } }); console.log('[offscreen] PTY connected'); }).catch((err) => { webContents.send('pty-data', `\r\n\x1b[31mError starting container: ${err.message}\x1b[0m\r\n`); }); } async ensureContainerRunning(dockerPath) { const { spawn } = require('child_process'); // Check if container is running const isRunning = await new Promise((resolve) => { const check = spawn(dockerPath, ['ps', '--filter', 'name=aesthetic', '--format', '{{.Names}}'], { stdio: 'pipe' }); let output = ''; check.stdout.on('data', (data) => output += data.toString()); check.on('close', () => resolve(output.includes('aesthetic'))); check.on('error', () => resolve(false)); }); if (isRunning) { console.log('[offscreen] Container already running'); return; } // Check if container exists but is stopped const exists = await new Promise((resolve) => { const check = spawn(dockerPath, ['ps', '-a', '--filter', 'name=aesthetic', '--format', '{{.Names}}'], { stdio: 'pipe' }); let output = ''; check.stdout.on('data', (data) => output += data.toString()); check.on('close', () => resolve(output.includes('aesthetic'))); check.on('error', () => resolve(false)); }); if (exists) { console.log('[offscreen] Starting stopped container...'); await new Promise((resolve, reject) => { const start = spawn(dockerPath, ['start', 'aesthetic'], { stdio: 'pipe' }); start.on('close', (code) => code === 0 ? resolve() : reject(new Error(`Failed to start container: code ${code}`))); start.on('error', reject); }); // Wait a moment for container to be ready await new Promise(r => setTimeout(r, 1000)); // Start emacs daemon console.log('[offscreen] Starting emacs daemon...'); await new Promise((resolve) => { const emacs = spawn(dockerPath, ['exec', 'aesthetic', 'emacs', '--daemon'], { stdio: 'pipe' }); emacs.on('close', () => resolve()); emacs.on('error', () => resolve()); // Don't fail if emacs daemon already running }); await new Promise(r => setTimeout(r, 500)); return; } throw new Error('Container "aesthetic" does not exist. Run devcontainer first.'); }
createOffscreenWindows(options) { // Always use production for the front view (starfield) const url = 'https://aesthetic.computer/starfield'; // Use shared texture mode if native addon is available const useSharedTexture = osrGpu !== null; // ========== Front Window (AC App) ========== this.frontWindow = new BrowserWindow({ width: 1280, height: 800, show: false, // Offscreen - never shown webPreferences: { offscreen: { useSharedTexture: useSharedTexture }, nodeIntegration: false, contextIsolation: true } }); this.frontWindow.webContents.setFrameRate(this.frameRate); this.frontWindow.webContents.on('paint', (event, dirty, image) => { if (this.mainWindow && !this.mainWindow.isDestroyed()) { // Check if we have shared texture (GPU zero-copy path) if (event.texture && osrGpu) { try { const { data, width, height } = osrGpu.copyTextureToBuffer(event.texture.textureInfo); this.mainWindow.webContents.send('front-frame', { width, height, data: Buffer.from(data) // Convert to Buffer for IPC }); // CRITICAL: Release the texture back to the pool event.texture.release(); } catch (e) { console.error('[offscreen] Failed to copy shared texture:', e); } } else { // Fallback: Use bitmap (slower but works without native addon) const size = image.getSize(); const bitmap = image.toBitmap(); this.mainWindow.webContents.send('front-frame', { width: size.width, height: size.height, data: bitmap // Raw RGBA Uint8Array }); } } }); // Force periodic repainting this.frontWindow.webContents.on('did-finish-load', () => { console.log('[offscreen] Front window loaded'); // Invalidate to trigger paint this.frontWindow.webContents.invalidate(); }); this.frontWindow.loadURL(url); console.log(`[offscreen] Front window loading: ${url}`); // ========== Back Window (Terminal) ========== this.backWindow = new BrowserWindow({ width: 1280, height: 800, show: false, // Offscreen - never shown webPreferences: { offscreen: { useSharedTexture: useSharedTexture }, nodeIntegration: true, contextIsolation: false } }); this.backWindow.webContents.setFrameRate(this.frameRate); this.backWindow.webContents.on('paint', (event, dirty, image) => { if (this.mainWindow && !this.mainWindow.isDestroyed()) { // Check if we have shared texture (GPU zero-copy path) if (event.texture && osrGpu) { try { const { data, width, height } = osrGpu.copyTextureToBuffer(event.texture.textureInfo); this.mainWindow.webContents.send('back-frame', { width, height, data: Buffer.from(data) }); event.texture.release(); } catch (e) { console.error('[offscreen] Failed to copy shared texture:', e); } } else { // Fallback: Use bitmap const size = image.getSize(); const bitmap = image.toBitmap(); this.mainWindow.webContents.send('back-frame', { width: size.width, height: size.height, data: bitmap }); } } }); this.backWindow.webContents.on('did-finish-load', () => { console.log('[offscreen] Back window loaded'); this.backWindow.webContents.invalidate(); }); // Load the terminal renderer this.backWindow.loadFile(path.join(__dirname, 'renderer', 'terminal-offscreen.html')); console.log('[offscreen] Back window loading terminal...'); }
/** * Navigate front window to a different piece */ navigateFront(url) { if (this.frontWindow && !this.frontWindow.isDestroyed()) { this.frontWindow.loadURL(url); } }
/** * Send command to terminal */ sendToTerminal(data) { if (this.backWindow && !this.backWindow.isDestroyed()) { this.backWindow.webContents.send('terminal-input', data); } }
/** * Clean up */ destroy() { if (this.frontWindow && !this.frontWindow.isDestroyed()) { this.frontWindow.destroy(); } if (this.backWindow && !this.backWindow.isDestroyed()) { this.backWindow.destroy(); } if (this.ptyProcess) { this.ptyProcess.kill(); this.ptyProcess = null; } // Clean up native OSR GPU context if (osrGpu) { try { osrGpu.destroyContext(); } catch (e) { console.warn('[offscreen] Failed to destroy OSR GPU context:', e); } } }}
module.exports = OffscreenManager;