mSnake

Runtime error

App Files Files Community

Match01 commited on Jun 18, 2025

Commit

ab305ca

verified ·

1 Parent(s): 1cc44b9

Create index.html

Browse files

Files changed (1) hide show

templates/index.html +247 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,247 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alexa - Live Connect</title>
+    <style>
+        body { margin: 0; overflow: hidden; background-color: #0a0a0a; color: #00ff00; font-family: 'Courier New', Courier, monospace; }
+        canvas { display: block; }
+        #overlay-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; }
+        #start-button { font-size: 1.5em; padding: 15px 30px; background-color: #00ff00; color: #0a0a0a; border: none; cursor: pointer; font-family: 'Courier New', Courier, monospace; box-shadow: 0 0 20px rgba(0, 255, 0, 0.7); }
+        #start-button:hover { background-color: #55ff55; }
+        #status { margin-top: 20px; font-size: 1.2em; text-shadow: 0 0 5px #00ff00; }
+        #chat-container { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 600px; z-index: 10; display: flex; flex-direction: column; align-items: center; visibility: hidden; /* Hidden by default */ }
+        #chat-input { width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: rgba(50, 50, 70, 0.8); color: #00ff00; font-family: 'Courier New', Courier, monospace; font-size: 1em; outline: none; box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); }
+        #chat-input::placeholder { color: rgba(0, 255, 0, 0.5); }
+    </style>
+</head>
+<body>
+    <canvas id="three-canvas"></canvas>
+    <!-- Overlay for starting the session -->
+    <div id="overlay-container">
+        <button id="start-button">Click to Awaken Alexa</button>
+        <div id="status">Waiting to connect...</div>
+    </div>
+    <div id="chat-container">
+        <input type="text" id="chat-input" placeholder="Say something...">
+    </div>
+    <!-- Dependencies -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.158.0/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js"></script>
+    <script>
+        // --- Global Variables ---
+        const canvas = document.getElementById('three-canvas');
+        const chatInput = document.getElementById('chat-input');
+        const startButton = document.getElementById('start-button');
+        const statusDiv = document.getElementById('status');
+        const overlay = document.getElementById('overlay-container');
+        const chatContainer = document.getElementById('chat-container');
+        let chatMessages = [];
+        const maxMessages = 10;
+        let scene, camera, renderer, terminalMesh, terminalTexture, textContext;
+        let mediaRecorder;
+        let audioContext;
+        let audioQueue = [];
+        let isPlaying = false;
+        // --- Socket.IO Connection ---
+        const socket = io();
+        // --- Core 3D Setup (from your original code, slightly adapted) ---
+        function initThree() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0a0a0a);
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 1.5, 3.5);
+            renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            const ambientLight = new THREE.AmbientLight(0x404040, 2);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            scene.add(directionalLight);
+            const terminalGeometry = new THREE.BoxGeometry(4, 2.5, 0.1);
+            const textCanvas = document.createElement('canvas');
+            textCanvas.width = 512;
+            textCanvas.height = 512;
+            textContext = textCanvas.getContext('2d');
+            terminalTexture = new THREE.CanvasTexture(textCanvas);
+            const terminalMaterial = new THREE.MeshStandardMaterial({
+                map: terminalTexture,
+                color: 0x222222,
+                emissive: 0x00ff00,
+                emissiveIntensity: 0.8,
+                metalness: 0.1,
+                roughness: 0.8,
+            });
+            terminalMesh = new THREE.Mesh(terminalGeometry, terminalMaterial);
+            terminalMesh.position.set(0, 1.5, 0);
+            scene.add(terminalMesh);
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            }, false);
+            animate();
+            addMessageToTerminal("System: Initializing...");
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            terminalMesh.rotation.y += 0.0005;
+            renderer.render(scene, camera);
+        }
+        function updateTerminalTexture() {
+            textContext.fillStyle = '#0a0a0a';
+            textContext.fillRect(0, 0, textContext.canvas.width, textContext.canvas.height);
+            textContext.font = 'Bold 30px Courier New';
+            textContext.fillStyle = '#00ff00';
+            textContext.textAlign = 'left';
+            textContext.textBaseline = 'top';
+            const padding = 20;
+            const lineHeight = 35;
+            let y = padding;
+            chatMessages.forEach(msg => {
+                textContext.fillText(msg, padding, y);
+                y += lineHeight;
+            });
+            terminalTexture.needsUpdate = true;
+        }
+        function addMessageToTerminal(message) {
+            chatMessages.push(message);
+            if (chatMessages.length > maxMessages) {
+                chatMessages.shift();
+            }
+            updateTerminalTexture();
+        }
+        // --- Web Audio and Media Recorder Setup ---
+        async function startAudioProcessing() {
+            // 1. Create AudioContext for playback (required by browsers to start after user interaction)
+            // The Gemini model sends audio at 24000 Hz.
+            audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 });
+            // 2. Get microphone access
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            // 3. Setup MediaRecorder to capture audio and send it to the server
+            // The `timeslice` parameter makes it emit data every 500ms.
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+            mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    socket.emit('client_audio', event.data);
+                }
+            };
+            mediaRecorder.start(500); // Send data every 500ms
+            statusDiv.textContent = 'Connection active. Speak now!';
+        }
+        function playNextInQueue() {
+            if (isPlaying || audioQueue.length === 0) {
+                return;
+            }
+            isPlaying = true;
+            const audioData = audioQueue.shift();
+            // Decode the ArrayBuffer into an AudioBuffer
+            audioContext.decodeAudioData(audioData, (buffer) => {
+                const source = audioContext.createBufferSource();
+                source.buffer = buffer;
+                source.connect(audioContext.destination);
+                source.onended = () => {
+                    isPlaying = false;
+                    playNextInQueue(); // Play the next chunk when this one is done
+                };
+                source.start();
+            }, (error) => {
+                console.error('Error decoding audio data:', error);
+                isPlaying = false;
+                playNextInQueue(); // Skip bad chunk
+            });
+        }
+        // --- Event Listeners ---
+        startButton.addEventListener('click', async () => {
+            statusDiv.textContent = "Connecting to Alexa...";
+            try {
+                // Initialize 3D scene and audio after user clicks
+                initThree();
+                await startAudioProcessing();
+                overlay.style.display = 'none'; // Hide the start button
+                chatContainer.style.visibility = 'visible'; // Show the chat input
+            } catch (error) {
+                console.error("Error starting session:", error);
+                statusDiv.textContent = "Error: Could not access microphone.";
+                addMessageToTerminal("Error: Mic access denied.");
+            }
+        });
+        chatInput.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                const message = chatInput.value.trim();
+                if (message) {
+                    addMessageToTerminal("You: " + message);
+                    socket.emit('client_text', { text: message });
+                    chatInput.value = '';
+                }
+            }
+        });
+        // --- SocketIO Event Listeners ---
+        socket.on('connect', () => {
+            console.log('Socket.IO connected!');
+            statusDiv.textContent = 'Connected. Waiting for session...';
+        });
+        socket.on('session_ready', () => {
+            console.log('Gemini session is ready on the server.');
+            addMessageToTerminal('Alexa: Hey there! What\'s on your mind? ;)');
+        });
+        socket.on('server_text', (data) => {
+            console.log('Received text:', data.text);
+            addMessageToTerminal("Alexa: " + data.text);
+        });
+        socket.on('server_audio', (data) => {
+            // data is an ArrayBuffer. Add it to our queue for smooth playback.
+            audioQueue.push(data);
+            playNextInQueue();
+        });
+        socket.on('disconnect', () => {
+            console.log('Socket.IO disconnected.');
+            statusDiv.textContent = 'Disconnected.';
+            addMessageToTerminal("System: Connection lost.");
+            if (mediaRecorder && mediaRecorder.state === 'recording') {
+                mediaRecorder.stop();
+            }
+        });
+        socket.on('error', (data) => {
+            console.error('Server error:', data.message);
+            statusDiv.textContent = `Error: ${data.message}`;
+            addMessageToTerminal(`System Error: ${data.message}`);
+        });
+    </script>
+</body>
+</html>