npm - loukai-app - Versions diffs - 0.3.0 - Mend

loukai-app 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (290) hide show

package/static/screenshot-generator.html ADDED Viewed

@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Butterchurn Screenshot Generator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background: #1a1a1a;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        .controls {
+            margin-bottom: 20px;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        button {
+            padding: 10px 20px;
+            background: #007acc;
+            border: none;
+            border-radius: 4px;
+            color: white;
+            cursor: pointer;
+        }
+        button:disabled {
+            background: #555;
+            cursor: not-allowed;
+        }
+        #micBtn {
+            background: #d32f2f;
+        }
+        #micBtn:hover {
+            background: #f44336;
+        }
+        #micBtn.active {
+            background: #4caf50;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.7; }
+            100% { opacity: 1; }
+        }
+        #canvas {
+            border: 2px solid #007acc;
+            display: block;
+            width: 640px;
+            height: 360px;
+        }
+        #progress {
+            margin-top: 10px;
+            padding: 10px;
+            background: #2a2a2a;
+            border-radius: 4px;
+            min-height: 200px;
+            overflow-y: auto;
+            font-family: monospace;
+            font-size: 12px;
+        }
+        .preset-info {
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Butterchurn Screenshot Generator</h1>
+    <div class="controls">
+        <button id="generateBtn">Generate All Screenshots</button>
+        <button id="downloadZipBtn" disabled>Download ZIP</button>
+        <button id="micBtn">🎤 Use Microphone</button>
+        <label>
+            Capture Duration:
+            <input type="number" id="durationInput" value="3" min="1" max="10" step="0.5"> seconds
+        </label>
+        <label>
+            <input type="checkbox" id="individualDownloads"> Download Individual Files
+        </label>
+    </div>
+    <canvas id="canvas" width="480" height="270"></canvas>
+    <div class="preset-info">
+        <strong>Current Preset:</strong> <span id="currentPreset">None</span><br>
+        <strong>Progress:</strong> <span id="progressText">0/0</span>
+    </div>
+    <div id="progress">Ready to generate screenshots...</div>
+    <!-- Butterchurn Libraries -->
+    <script src="lib/butterchurn.min.js"></script>
+    <script src="lib/butterchurnPresets.min.js"></script>
+    <!-- JSZip for ZIP downloads -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script>
+        // Debug library loading
+        console.log('Butterchurn loaded:', typeof window.butterchurn);
+        console.log('Butterchurn presets loaded:', typeof window.butterchurnPresets);
+        console.log('JSZip loaded:', typeof window.JSZip);
+        // Test WebGL support
+        const testCanvas = document.createElement('canvas');
+        const testGL = testCanvas.getContext('webgl') || testCanvas.getContext('experimental-webgl');
+        console.log('WebGL test context:', testGL ? 'supported' : 'not supported');
+        if (testGL) {
+            console.log('WebGL version:', testGL.getParameter(testGL.VERSION));
+            console.log('WebGL vendor:', testGL.getParameter(testGL.VENDOR));
+            console.log('WebGL renderer:', testGL.getParameter(testGL.RENDERER));
+        }
+    </script>
+    <script>
+        class ButterchurnScreenshotGenerator {
+            constructor() {
+                this.canvas = document.getElementById('canvas');
+                // Don't get 2D context yet - Butterchurn needs WebGL context first
+                this.ctx = null;
+                this.butterchurn = null;
+                this.audioContext = null;
+                this.microphoneStream = null;
+                this.microphoneSource = null;
+                this.analyser = null;
+                this.presets = [];
+                this.screenshots = new Map();
+                this.currentIndex = 0;
+                this.progressDiv = document.getElementById('progress');
+                this.progressText = document.getElementById('progressText');
+                this.currentPresetSpan = document.getElementById('currentPreset');
+                this.init();
+            }
+            async init() {
+                try {
+                    this.log('Initializing Butterchurn...');
+                    // Initialize audio context
+                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    this.log('Audio context created');
+                    // Create Butterchurn visualizer
+                    this.log('Checking Butterchurn availability...');
+                    this.log('window.butterchurn:', typeof window.butterchurn);
+                    this.log('window.butterchurnPresets:', typeof window.butterchurnPresets);
+                    if (!window.butterchurn) {
+                        throw new Error('Butterchurn library not loaded - check console for 404 errors');
+                    }
+                    if (!window.butterchurnPresets) {
+                        throw new Error('Butterchurn presets library not loaded - check console for 404 errors');
+                    }
+                    let butterchurnAPI = window.butterchurn;
+                    if (butterchurnAPI.default) {
+                        butterchurnAPI = butterchurnAPI.default;
+                    }
+                    this.log('Creating Butterchurn visualizer...');
+                    this.butterchurn = butterchurnAPI.createVisualizer(this.audioContext, this.canvas, {
+                        width: 480,
+                        height: 270,
+                        pixelRatio: 1,
+                        textureRatio: 1,
+                        preserveDrawingBuffer: true
+                    });
+                    this.log('Butterchurn visualizer created successfully');
+                    // Load presets
+                    if (window.butterchurnPresets && window.butterchurnPresets.getPresets) {
+                        const presetData = window.butterchurnPresets.getPresets();
+                        this.presets = Object.keys(presetData).map(name => ({
+                            name,
+                            data: presetData[name],
+                            displayName: this.parseDisplayName(name)
+                        }));
+                        this.log(`Loaded ${this.presets.length} presets`);
+                        this.updateProgress();
+                        // Load the first preset to initialize Butterchurn systems
+                        if (this.presets.length > 0) {
+                            this.log('Loading initial preset to warm up Butterchurn...');
+                            this.butterchurn.loadPreset(this.presets[0].data, 0.0);
+                            // Render a few frames to initialize everything
+                            for (let i = 0; i < 30; i++) {
+                                this.butterchurn.render();
+                                await new Promise(resolve => setTimeout(resolve, 16));
+                            }
+                            this.log('Butterchurn warmed up and ready');
+                        }
+                    } else {
+                        throw new Error('Butterchurn presets not available');
+                    }
+                    // Start render loop
+                    this.startRenderLoop();
+                    // Setup event listeners
+                    this.setupEventListeners();
+                    this.log('Initialization complete!');
+                } catch (error) {
+                    this.log(`Initialization failed: ${error.message}`, 'error');
+                }
+            }
+            parseDisplayName(name) {
+                // Parse preset name for display
+                if (name.includes(' - ')) {
+                    const parts = name.split(' - ');
+                    return parts.slice(1).join(' - ');
+                }
+                return name.replace(/_/g, ' ');
+            }
+            setupEventListeners() {
+                document.getElementById('generateBtn').addEventListener('click', () => {
+                    this.generateAllScreenshots();
+                });
+                document.getElementById('downloadZipBtn').addEventListener('click', () => {
+                    this.downloadZip();
+                });
+                document.getElementById('micBtn').addEventListener('click', () => {
+                    this.toggleMicrophone();
+                });
+            }
+            startRenderLoop() {
+                const render = () => {
+                    if (this.butterchurn) {
+                        this.butterchurn.render();
+                    }
+                    requestAnimationFrame(render);
+                };
+                render();
+            }
+            async generateAllScreenshots() {
+                const generateBtn = document.getElementById('generateBtn');
+                generateBtn.disabled = true;
+                generateBtn.textContent = 'Generating...';
+                const duration = parseFloat(document.getElementById('durationInput').value) * 1000;
+                const downloadIndividual = document.getElementById('individualDownloads').checked;
+                this.screenshots.clear();
+                this.currentIndex = 0;
+                try {
+                    for (let i = 0; i < this.presets.length; i++) {
+                        const preset = this.presets[i];
+                        this.currentIndex = i;
+                        this.updateProgress();
+                        this.log(`Capturing ${i + 1}/${this.presets.length}: ${preset.displayName}`);
+                        this.currentPresetSpan.textContent = preset.displayName;
+                        try {
+                            // Load the preset
+                            this.butterchurn.loadPreset(preset.data, 0.0);
+                            // First preset needs much more time since it's being reloaded
+                            const actualDuration = i === 0 ? duration * 3 : duration;
+                            this.log(`Rendering preset for ${actualDuration/1000}s...`);
+                            // Render continuously for the specified duration
+                            const renderStart = Date.now();
+                            while (Date.now() - renderStart < actualDuration) {
+                                this.butterchurn.render();
+                                await this.sleep(16); // ~60fps
+                            }
+                            // One final render to ensure we have the latest frame
+                            this.butterchurn.render();
+                            await this.sleep(50);
+                            // Capture screenshot using the WebGL-safe method
+                            const dataURL = await this.captureWebGLCanvas();
+                            if (dataURL && !dataURL.includes('data:,')) {
+                                this.screenshots.set(preset.name, dataURL);
+                                // Debug: Show all screenshots in console
+                                console.log(`Screenshot ${i + 1} (${preset.displayName}):`);
+                                console.log(`%c `, `
+                                    font-size: 1px;
+                                    padding: 100px 150px;
+                                    background-image: url(${dataURL});
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                    background-position: center;
+                                `);
+                                // Don't download individual files - we'll do ZIP instead
+                                this.log(`✅ Captured: ${preset.displayName}`);
+                            } else {
+                                this.log(`❌ Failed to capture: ${preset.displayName} (empty data)`);
+                            }
+                        } catch (error) {
+                            this.log(`Failed to capture ${preset.name}: ${error.message}`, 'error');
+                        }
+                        // Small delay between captures
+                        await this.sleep(100);
+                    }
+                    this.log(`Screenshot generation complete! Captured ${this.screenshots.size} screenshots.`);
+                    document.getElementById('downloadZipBtn').disabled = false;
+                    // Auto-download ZIP when complete
+                    if (this.screenshots.size > 0) {
+                        this.log('Auto-downloading ZIP file...');
+                        await this.downloadZip();
+                    }
+                } catch (error) {
+                    this.log(`Generation failed: ${error.message}`, 'error');
+                } finally {
+                    generateBtn.disabled = false;
+                    generateBtn.textContent = 'Generate All Screenshots';
+                    this.currentPresetSpan.textContent = 'Complete';
+                }
+            }
+            async downloadZip() {
+                if (this.screenshots.size === 0) {
+                    this.log('No screenshots to download', 'error');
+                    return;
+                }
+                this.log('Creating ZIP file...');
+                const zip = new JSZip();
+                for (const [presetName, dataURL] of this.screenshots.entries()) {
+                    // Convert data URL to blob
+                    const response = await fetch(dataURL);
+                    const blob = await response.blob();
+                    zip.file(`${this.sanitizeFilename(presetName)}.png`, blob);
+                }
+                const zipBlob = await zip.generateAsync({ type: 'blob' });
+                this.downloadFile(URL.createObjectURL(zipBlob), 'butterchurn-screenshots.zip');
+                this.log('ZIP download started');
+            }
+            async captureWebGLCanvas() {
+                try {
+                    // Force a render right before capture to ensure fresh frame
+                    if (this.butterchurn) {
+                        this.butterchurn.render();
+                    }
+                    // Wait a frame to ensure render is complete
+                    await new Promise(resolve => requestAnimationFrame(resolve));
+                    // Try to get WebGL context (Butterchurn should have created it)
+                    const gl = this.canvas.getContext('webgl', { preserveDrawingBuffer: true }) ||
+                              this.canvas.getContext('webgl2', { preserveDrawingBuffer: true });
+                    if (gl) {
+                        const width = this.canvas.width;
+                        const height = this.canvas.height;
+                        const pixels = new Uint8Array(width * height * 4);
+                        // Read pixels directly from WebGL framebuffer
+                        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+                        // Create a new 2D canvas to convert pixels to image
+                        const tempCanvas = document.createElement('canvas');
+                        tempCanvas.width = width;
+                        tempCanvas.height = height;
+                        const tempCtx = tempCanvas.getContext('2d');
+                        const imageData = new ImageData(width, height);
+                        // Copy and flip pixels (WebGL origin is bottom-left, canvas is top-left)
+                        for (let y = 0; y < height; y++) {
+                            for (let x = 0; x < width; x++) {
+                                const srcIndex = ((height - 1 - y) * width + x) * 4;
+                                const dstIndex = (y * width + x) * 4;
+                                imageData.data[dstIndex] = pixels[srcIndex];         // R
+                                imageData.data[dstIndex + 1] = pixels[srcIndex + 1]; // G
+                                imageData.data[dstIndex + 2] = pixels[srcIndex + 2]; // B
+                                imageData.data[dstIndex + 3] = 255; // Force full opacity
+                            }
+                        }
+                        tempCtx.putImageData(imageData, 0, 0);
+                        return tempCanvas.toDataURL('image/png');
+                    } else {
+                        // Fallback to standard toDataURL
+                        return this.canvas.toDataURL('image/png');
+                    }
+                } catch (error) {
+                    console.error('Error capturing WebGL canvas:', error);
+                    // Last resort fallback
+                    try {
+                        return this.canvas.toDataURL('image/png');
+                    } catch (e) {
+                        return null;
+                    }
+                }
+            }
+            downloadFile(url, filename) {
+                const link = document.createElement('a');
+                link.download = filename;
+                link.href = url;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+            sanitizeFilename(name) {
+                return name.replace(/[^a-zA-Z0-9-_\s]/g, '_');
+            }
+            updateProgress() {
+                this.progressText.textContent = `${this.currentIndex}/${this.presets.length}`;
+            }
+            sleep(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+            async toggleMicrophone() {
+                const micBtn = document.getElementById('micBtn');
+                if (this.microphoneStream) {
+                    // Stop microphone
+                    this.stopMicrophone();
+                    micBtn.classList.remove('active');
+                    micBtn.textContent = '🎤 Use Microphone';
+                    this.log('Microphone stopped');
+                } else {
+                    // Start microphone
+                    try {
+                        await this.startMicrophone();
+                        micBtn.classList.add('active');
+                        micBtn.textContent = '🔴 Stop Microphone';
+                        this.log('Microphone started - audio now driving visualizations');
+                    } catch (error) {
+                        this.log(`Failed to start microphone: ${error.message}`, 'error');
+                    }
+                }
+            }
+            async startMicrophone() {
+                try {
+                    // First, list all available audio devices
+                    const devices = await navigator.mediaDevices.enumerateDevices();
+                    const audioInputs = devices.filter(device => device.kind === 'audioinput');
+                    console.log('Available audio input devices:');
+                    audioInputs.forEach((device, i) => {
+                        console.log(`${i}: ${device.label || 'Unknown Device'} (${device.deviceId})`);
+                    });
+                    // Request microphone access
+                    this.microphoneStream = await navigator.mediaDevices.getUserMedia({
+                        audio: {
+                            echoCancellation: false,
+                            noiseSuppression: false,
+                            autoGainControl: false
+                        }
+                    });
+                    // Show which device was actually selected
+                    const audioTrack = this.microphoneStream.getAudioTracks()[0];
+                    const settings = audioTrack.getSettings();
+                    // Find the matching device from our list
+                    const selectedDevice = audioInputs.find(device => device.deviceId === settings.deviceId);
+                    const deviceName = selectedDevice ? selectedDevice.label : 'Unknown Device';
+                    console.log('=== SELECTED AUDIO DEVICE ===');
+                    console.log('Device ID:', settings.deviceId);
+                    console.log('Device Name:', deviceName);
+                    console.log('Track Label:', audioTrack.label);
+                    console.log('Full Settings:', settings);
+                    console.log('============================');
+                    // Debug microphone stream
+                    console.log('Microphone stream:', this.microphoneStream);
+                    console.log('Stream tracks:', this.microphoneStream.getTracks());
+                    this.microphoneStream.getTracks().forEach((track, i) => {
+                        console.log(`Track ${i}:`, track.kind, track.enabled, track.readyState, track.getSettings());
+                    });
+                    // Create audio nodes
+                    this.microphoneSource = this.audioContext.createMediaStreamSource(this.microphoneStream);
+                    this.analyser = this.audioContext.createAnalyser();
+                    this.analyser.fftSize = 2048;
+                    this.analyser.smoothingTimeConstant = 0.8;
+                    console.log('Audio context state:', this.audioContext.state);
+                    console.log('Sample rate:', this.audioContext.sampleRate);
+                    // Resume audio context if suspended (required by Chrome)
+                    if (this.audioContext.state === 'suspended') {
+                        console.log('Resuming suspended audio context...');
+                        await this.audioContext.resume();
+                        console.log('Audio context resumed, new state:', this.audioContext.state);
+                    }
+                    // Connect the nodes
+                    this.microphoneSource.connect(this.analyser);
+                    // Also try connecting to destination to hear the audio (for testing)
+                    // this.microphoneSource.connect(this.audioContext.destination);
+                    // Debug what methods are available on butterchurn
+                    console.log('Butterchurn methods:', Object.getOwnPropertyNames(this.butterchurn));
+                    console.log('Butterchurn connectAudio:', typeof this.butterchurn.connectAudio);
+                    // Try different ways to connect audio
+                    if (this.butterchurn && this.butterchurn.connectAudio) {
+                        this.butterchurn.connectAudio(this.analyser);
+                        this.log('✅ Microphone connected via connectAudio');
+                    } else if (this.butterchurn && this.butterchurn.audio && this.butterchurn.audio.connectAudio) {
+                        this.butterchurn.audio.connectAudio(this.analyser);
+                        this.log('✅ Microphone connected via audio.connectAudio');
+                    } else {
+                        // Check if we can set the audio context directly
+                        console.log('Butterchurn audio object:', this.butterchurn.audio);
+                        this.log('❌ Could not find connectAudio method - audio may not be reactive');
+                    }
+                    // Log audio levels to verify microphone is working
+                    setInterval(() => {
+                        if (this.analyser) {
+                            // Check both frequency and time domain data
+                            const freqData = new Uint8Array(this.analyser.frequencyBinCount);
+                            const timeData = new Uint8Array(this.analyser.frequencyBinCount);
+                            this.analyser.getByteFrequencyData(freqData);
+                            this.analyser.getByteTimeDomainData(timeData);
+                            const freqAvg = freqData.reduce((a, b) => a + b) / freqData.length;
+                            const timeAvg = timeData.reduce((a, b) => a + b) / timeData.length;
+                            const freqMax = Math.max(...freqData);
+                            const timeMax = Math.max(...timeData);
+                            console.log(`Audio - Freq avg: ${freqAvg.toFixed(1)}, max: ${freqMax}, Time avg: ${timeAvg.toFixed(1)}, max: ${timeMax}`);
+                        }
+                    }, 1000);
+                } catch (error) {
+                    console.error('Microphone error:', error);
+                    throw error;
+                }
+            }
+            stopMicrophone() {
+                if (this.microphoneSource) {
+                    this.microphoneSource.disconnect();
+                    this.microphoneSource = null;
+                }
+                if (this.microphoneStream) {
+                    this.microphoneStream.getTracks().forEach(track => track.stop());
+                    this.microphoneStream = null;
+                }
+                if (this.analyser) {
+                    this.analyser = null;
+                }
+            }
+            log(message, type = 'info') {
+                const timestamp = new Date().toLocaleTimeString();
+                const className = type === 'error' ? 'style="color: #ff6b6b"' : '';
+                this.progressDiv.innerHTML += `<div ${className}>[${timestamp}] ${message}</div>`;
+                this.progressDiv.scrollTop = this.progressDiv.scrollHeight;
+                console.log(`[ScreenshotGen] ${message}`);
+            }
+        }
+        // Initialize when page loads
+        window.addEventListener('load', () => {
+            window.screenshotGenerator = new ButterchurnScreenshotGenerator();
+        });
+    </script>
+</body>
+</html>