Spaces:

jeremierostan
/

Real-Time-Experts

Sleeping

App Files Files Community

jeremierostan commited on Mar 5, 2025

Commit

4cd60b2

verified ·

1 Parent(s): 05a24ef

Update index.html

Browse files

Files changed (1) hide show

index.html +165 -123

index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -69,7 +70,9 @@
             font-size: 0.875rem;
             font-weight: 500;
         }
-        input, select, textarea {
             padding: 0.75rem;
             border-radius: 0.5rem;
             border: 1px solid rgba(255, 255, 255, 0.1);
@@ -96,6 +99,45 @@
             opacity: 0.9;
             transform: translateY(-1px);
         }
         .toast {
             position: fixed;
             top: 20px;
@@ -116,17 +158,13 @@
             background-color: #ffd700;
             color: black;
         }
-        .radio-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-            margin-top: 0.5rem;
-        }
-        .radio-option {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            cursor: pointer;
         }
         .prompt-preview {
             padding: 0.5rem;
@@ -134,7 +172,7 @@
             margin-top: 0.25rem;
             background-color: rgba(0, 0, 0, 0.2);
             border-radius: 0.25rem;
-            max-height: 100px;
             overflow-y: auto;
             display: none;
         }
@@ -147,12 +185,17 @@
         }
     </style>
 </head>
 <body>
     <div id="error-toast" class="toast"></div>
     <div style="text-align: center">
         <h1>Gemini Voice Chat</h1>
         <p>Speak with Gemini using real-time audio streaming</p>
-        <p>Get a Gemini API key <a href="https://ai.google.dev/gemini-api/docs/api-key">here</a></p>
     </div>
     <div class="container">
         <div class="controls">
@@ -173,40 +216,16 @@
             <div class="input-group">
                 <label>System Prompt</label>
-                <div style="border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 1rem; background-color: rgba(0, 0, 0, 0.1);">
-                    <div class="radio-group" id="prompt-options">
-                        <label class="radio-option">
-                            <input type="radio" name="prompt-selection" value="default" checked>
-                            Default
-                            <span class="prompt-toggle" onclick="togglePromptPreview(this)">Show/Hide</span>
-                            <div class="prompt-preview"></div>
-                        </label>
-                        <label class="radio-option">
-                            <input type="radio" name="prompt-selection" value="Behavior Analyst">
-                            Behavior Analyst
-                            <span class="prompt-toggle" onclick="togglePromptPreview(this)">Show/Hide</span>
-                            <div class="prompt-preview"></div>
-                        </label>
-                        <label class="radio-option">
-                            <input type="radio" name="prompt-selection" value="UDL Expert">
-                            UDL Expert
-                            <span class="prompt-toggle" onclick="togglePromptPreview(this)">Show/Hide</span>
-                            <div class="prompt-preview"></div>
-                        </label>
-                        <label class="radio-option">
-                            <input type="radio" name="prompt-selection" value="prompt3">
-                            Prompt 3
-                            <span class="prompt-toggle" onclick="togglePromptPreview(this)">Show/Hide</span>
-                            <div class="prompt-preview"></div>
-                        </label>
-                        <label class="radio-option">
-                            <input type="radio" name="prompt-selection" value="custom">
-                            Custom Prompt
-                        </label>
-                    </div>
-                    <div id="custom-prompt-container" style="margin-top: 0.5rem; display: none;">
-                        <textarea id="custom-prompt" placeholder="Enter custom instructions for the AI assistant" rows="3"></textarea>
-                    </div>
                 </div>
             </div>
         </div>
@@ -223,57 +242,55 @@
     <audio id="audio-output"></audio>
     <script>
-        // System prompts data
         const SYSTEM_PROMPTS = __SYSTEM_PROMPTS__;
-        function initPromptPreviews() {
-            const previews = document.querySelectorAll('.prompt-preview');
-            previews.forEach(preview => {
-                const promptKey = preview.parentElement.querySelector('input[type="radio"]').value;
-                if (SYSTEM_PROMPTS[promptKey]) {
-                    preview.textContent = SYSTEM_PROMPTS[promptKey];
-                }
-            });
-        }
-        function togglePromptPreview(element) {
-            const preview = element.nextElementSibling;
-            if (preview.style.display === 'block') {
-                preview.style.display = 'none';
-            } else {
-                preview.style.display = 'block';
-            }
-            event.stopPropagation();
-        }
-        function handlePromptSelection() {
-            const customPromptContainer = document.getElementById('custom-prompt-container');
-            const selectedValue = document.querySelector('input[name="prompt-selection"]:checked').value;
             if (selectedValue === 'custom') {
                 customPromptContainer.style.display = 'block';
             } else {
                 customPromptContainer.style.display = 'none';
             }
-        }
-        function initRadioListeners() {
-            const radioButtons = document.querySelectorAll('input[name="prompt-selection"]');
-            radioButtons.forEach(radio => {
-                radio.addEventListener('change', handlePromptSelection);
-            });
         }
-        document.addEventListener('DOMContentLoaded', function() {
-            initPromptPreviews();
-            initRadioListeners();
-        });
         let peerConnection;
         let audioContext;
         let dataChannel;
         let isRecording = false;
         let webrtc_id;
         let animationId;
         const startButton = document.getElementById('start-button');
@@ -281,60 +298,65 @@
         const voiceSelect = document.getElementById('voice');
         const audioOutput = document.getElementById('audio-output');
         const boxContainer = document.querySelector('.box-container');
         const numBars = 32;
         for (let i = 0; i < numBars; i++) {
             const box = document.createElement('div');
             box.className = 'box';
             boxContainer.appendChild(box);
         }
         function updateButtonState() {
             if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) {
-                startButton.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;gap:12px;min-width:180px"><div style="width:20px;height:20px;border:2px solid white;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0"></div><span>Connecting...</span></div>';
             } else if (peerConnection && peerConnection.connectionState === 'connected') {
-                startButton.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;gap:12px;min-width:180px"><div class="pulse-circle" style="width:20px;height:20px;border-radius:50%;background-color:white;opacity:0.2;flex-shrink:0"></div><span>Stop Recording</span></div>';
             } else {
                 startButton.innerHTML = 'Start Recording';
             }
         }
         function showError(message) {
             const toast = document.getElementById('error-toast');
             toast.textContent = message;
             toast.className = 'toast error';
             toast.style.display = 'block';
             setTimeout(() => {
                 toast.style.display = 'none';
             }, 5000);
         }
-        function getSelectedPrompt() {
-            const selectedValue = document.querySelector('input[name="prompt-selection"]:checked').value;
-            const customPrompt = document.getElementById('custom-prompt').value;
-            return {
-                promptKey: selectedValue === 'custom' ? '' : selectedValue,
-                customPrompt: selectedValue === 'custom' ? customPrompt : ''
-            };
-        }
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
             webrtc_id = Math.random().toString(36).substring(7);
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                 stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
                 audioContext = new AudioContext();
                 const analyser_input = audioContext.createAnalyser();
                 const source = audioContext.createMediaStreamSource(stream);
                 source.connect(analyser_input);
                 analyser_input.fftSize = 64;
                 const dataArray_input = new Uint8Array(analyser_input.frequencyBinCount);
                 function updateAudioLevel() {
                     analyser_input.getByteFrequencyData(dataArray_input);
                     const average = Array.from(dataArray_input).reduce((a, b) => a + b, 0) / dataArray_input.length;
@@ -346,36 +368,32 @@
                     animationId = requestAnimationFrame(updateAudioLevel);
                 }
                 updateAudioLevel();
                 peerConnection.addEventListener('connectionstatechange', () => {
                     updateButtonState();
                 });
                 peerConnection.addEventListener('track', (evt) => {
                     if (audioOutput && audioOutput.srcObject !== evt.streams[0]) {
                         audioOutput.srcObject = evt.streams[0];
                         audioOutput.play();
                         audioContext = new AudioContext();
-                        const analyser = audioContext.createAnalyser();
                         const source = audioContext.createMediaStreamSource(evt.streams[0]);
                         source.connect(analyser);
                         analyser.fftSize = 2048;
-                        const dataArray = new Uint8Array(analyser.frequencyBinCount);
-                        function updateVisualization() {
-                            analyser.getByteFrequencyData(dataArray);
-                            const bars = document.querySelectorAll('.box');
-                            for (let i = 0; i < bars.length; i++) {
-                                const barHeight = (dataArray[i] / 255) * 2;
-                                bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
-                            }
-                            animationId = requestAnimationFrame(updateVisualization);
-                        }
                         updateVisualization();
                     }
                 });
                 dataChannel = peerConnection.createDataChannel('text');
                 dataChannel.onmessage = (event) => {
                     const eventJson = JSON.parse(event.data);
@@ -399,10 +417,22 @@
                         });
                     }
                 };
                 const offer = await peerConnection.createOffer();
                 await peerConnection.setLocalDescription(offer);
                 const response = await fetch('/webrtc/offer', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -412,22 +442,34 @@
                         webrtc_id: webrtc_id,
                     })
                 });
                 const serverResponse = await response.json();
                 if (serverResponse.status === 'failed') {
-                    showError(serverResponse.meta.error);
                     stopWebRTC();
                     return;
                 }
                 await peerConnection.setRemoteDescription(serverResponse);
             } catch (err) {
                 console.error('Error setting up WebRTC:', err);
                 showError('Failed to establish connection. Please try again.');
                 stopWebRTC();
             }
         }
         function stopWebRTC() {
             if (peerConnection) {
                 peerConnection.close();
@@ -440,7 +482,6 @@
             }
             updateButtonState();
         }
         startButton.addEventListener('click', () => {
             if (!isRecording) {
                 setupWebRTC();
@@ -453,4 +494,5 @@
         });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
             font-size: 0.875rem;
             font-weight: 500;
         }
+        input,
+        select,
+        textarea {
             padding: 0.75rem;
             border-radius: 0.5rem;
             border: 1px solid rgba(255, 255, 255, 0.1);
             opacity: 0.9;
             transform: translateY(-1px);
         }
+        .icon-with-spinner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            min-width: 180px;
+        }
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid white;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            flex-shrink: 0;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        .pulse-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            min-width: 180px;
+        }
+        .pulse-circle {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: white;
+            opacity: 0.2;
+            flex-shrink: 0;
+            transform: translateX(-0%) scale(var(--audio-level, 1));
+            transition: transform 0.1s ease;
+        }
+        /* Add styles for toast notifications */
         .toast {
             position: fixed;
             top: 20px;
             background-color: #ffd700;
             color: black;
         }
+        /* System prompt styles */
+        .prompt-selection {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0.5rem;
+            padding: 1rem;
+            background-color: rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
         }
         .prompt-preview {
             padding: 0.5rem;
             margin-top: 0.25rem;
             background-color: rgba(0, 0, 0, 0.2);
             border-radius: 0.25rem;
+            max-height: 60px;
             overflow-y: auto;
             display: none;
         }
         }
     </style>
 </head>
 <body>
+    <!-- Add toast element after body opening tag -->
     <div id="error-toast" class="toast"></div>
     <div style="text-align: center">
         <h1>Gemini Voice Chat</h1>
         <p>Speak with Gemini using real-time audio streaming</p>
+        <p>
+            Get a Gemini API key
+            <a href="https://ai.google.dev/gemini-api/docs/api-key">here</a>
+        </p>
     </div>
     <div class="container">
         <div class="controls">
             <div class="input-group">
                 <label>System Prompt</label>
+                <select id="prompt-select">
+                    <option value="default">Default</option>
+                    <option value="Behavior Analyst">Behavior Analyst</option>
+                    <option value="UDL Expert">UDL Expert</option>
+                    <option value="prompt3">Prompt 3</option>
+                    <option value="custom">Custom Prompt</option>
+                </select>
+                <div id="prompt-preview" class="prompt-preview"></div>
+                <div id="custom-prompt-container" style="margin-top: 0.5rem; display: none;">
+                    <textarea id="custom-prompt" placeholder="Enter custom instructions for the AI assistant" rows="3"></textarea>
                 </div>
             </div>
         </div>
     <audio id="audio-output"></audio>
     <script>
+        // System prompts data injected from the server
         const SYSTEM_PROMPTS = __SYSTEM_PROMPTS__;
+        // Initialize prompt elements
+        const promptSelect = document.getElementById('prompt-select');
+        const promptPreview = document.getElementById('prompt-preview');
+        const customPromptContainer = document.getElementById('custom-prompt-container');
+        const customPrompt = document.getElementById('custom-prompt');
+        // Update prompt preview when selection changes
+        promptSelect.addEventListener('change', function() {
+            const selectedValue = promptSelect.value;
             if (selectedValue === 'custom') {
                 customPromptContainer.style.display = 'block';
+                promptPreview.style.display = 'none';
             } else {
                 customPromptContainer.style.display = 'none';
+                if (SYSTEM_PROMPTS[selectedValue]) {
+                    promptPreview.textContent = SYSTEM_PROMPTS[selectedValue];
+                    promptPreview.style.display = 'block';
+                } else {
+                    promptPreview.style.display = 'none';
+                }
             }
+        });
+        // Show initial preview
+        if (SYSTEM_PROMPTS[promptSelect.value]) {
+            promptPreview.textContent = SYSTEM_PROMPTS[promptSelect.value];
+            promptPreview.style.display = 'block';
         }
+        // Get the currently selected prompt
+        function getSelectedPrompt() {
+            const selectedValue = promptSelect.value;
+            return {
+                promptKey: selectedValue === 'custom' ? '' : selectedValue,
+                customPrompt: selectedValue === 'custom' ? customPrompt.value : ''
+            };
+        }
         let peerConnection;
         let audioContext;
         let dataChannel;
         let isRecording = false;
         let webrtc_id;
+        let analyser;
+        let dataArray;
         let animationId;
         const startButton = document.getElementById('start-button');
         const voiceSelect = document.getElementById('voice');
         const audioOutput = document.getElementById('audio-output');
         const boxContainer = document.querySelector('.box-container');
         const numBars = 32;
         for (let i = 0; i < numBars; i++) {
             const box = document.createElement('div');
             box.className = 'box';
             boxContainer.appendChild(box);
         }
         function updateButtonState() {
             if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) {
+                startButton.innerHTML = `
+                    <div class="icon-with-spinner">
+                        <div class="spinner"></div>
+                        <span>Connecting...</span>
+                    </div>
+                `;
             } else if (peerConnection && peerConnection.connectionState === 'connected') {
+                startButton.innerHTML = `
+                    <div class="pulse-container">
+                        <div class="pulse-circle"></div>
+                        <span>Stop Recording</span>
+                    </div>
+                `;
             } else {
                 startButton.innerHTML = 'Start Recording';
             }
         }
         function showError(message) {
             const toast = document.getElementById('error-toast');
             toast.textContent = message;
             toast.className = 'toast error';
             toast.style.display = 'block';
+            // Hide toast after 5 seconds
             setTimeout(() => {
                 toast.style.display = 'none';
             }, 5000);
         }
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
             webrtc_id = Math.random().toString(36).substring(7);
+            const timeoutId = setTimeout(() => {
+                const toast = document.getElementById('error-toast');
+                toast.textContent = "Connection is taking longer than usual. Are you on a VPN?";
+                toast.className = 'toast warning';
+                toast.style.display = 'block';
+                // Hide warning after 5 seconds
+                setTimeout(() => {
+                    toast.style.display = 'none';
+                }, 5000);
+            }, 5000);
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                 stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
+                // Update audio visualization setup
                 audioContext = new AudioContext();
                 const analyser_input = audioContext.createAnalyser();
                 const source = audioContext.createMediaStreamSource(stream);
                 source.connect(analyser_input);
                 analyser_input.fftSize = 64;
                 const dataArray_input = new Uint8Array(analyser_input.frequencyBinCount);
                 function updateAudioLevel() {
                     analyser_input.getByteFrequencyData(dataArray_input);
                     const average = Array.from(dataArray_input).reduce((a, b) => a + b, 0) / dataArray_input.length;
                     animationId = requestAnimationFrame(updateAudioLevel);
                 }
                 updateAudioLevel();
+                // Add connection state change listener
                 peerConnection.addEventListener('connectionstatechange', () => {
+                    console.log('connectionstatechange', peerConnection.connectionState);
+                    if (peerConnection.connectionState === 'connected') {
+                        clearTimeout(timeoutId);
+                        const toast = document.getElementById('error-toast');
+                        toast.style.display = 'none';
+                    }
                     updateButtonState();
                 });
+                // Handle incoming audio
                 peerConnection.addEventListener('track', (evt) => {
                     if (audioOutput && audioOutput.srcObject !== evt.streams[0]) {
                         audioOutput.srcObject = evt.streams[0];
                         audioOutput.play();
+                        // Set up audio visualization on the output stream
                         audioContext = new AudioContext();
+                        analyser = audioContext.createAnalyser();
                         const source = audioContext.createMediaStreamSource(evt.streams[0]);
                         source.connect(analyser);
                         analyser.fftSize = 2048;
+                        dataArray = new Uint8Array(analyser.frequencyBinCount);
                         updateVisualization();
                     }
                 });
+                // Create data channel for messages
                 dataChannel = peerConnection.createDataChannel('text');
                 dataChannel.onmessage = (event) => {
                     const eventJson = JSON.parse(event.data);
                         });
                     }
                 };
+                // Create and send offer
                 const offer = await peerConnection.createOffer();
                 await peerConnection.setLocalDescription(offer);
+                await new Promise((resolve) => {
+                    if (peerConnection.iceGatheringState === "complete") {
+                        resolve();
+                    } else {
+                        const checkState = () => {
+                            if (peerConnection.iceGatheringState === "complete") {
+                                peerConnection.removeEventListener("icegatheringstatechange", checkState);
+                                resolve();
+                            }
+                        };
+                        peerConnection.addEventListener("icegatheringstatechange", checkState);
+                    }
+                });
                 const response = await fetch('/webrtc/offer', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                         webrtc_id: webrtc_id,
                     })
                 });
                 const serverResponse = await response.json();
                 if (serverResponse.status === 'failed') {
+                    showError(serverResponse.meta.error === 'concurrency_limit_reached'
+                        ? `Too many connections. Maximum limit is ${serverResponse.meta.limit}`
+                        : serverResponse.meta.error);
                     stopWebRTC();
+                    startButton.textContent = 'Start Recording';
                     return;
                 }
                 await peerConnection.setRemoteDescription(serverResponse);
             } catch (err) {
+                clearTimeout(timeoutId);
                 console.error('Error setting up WebRTC:', err);
                 showError('Failed to establish connection. Please try again.');
                 stopWebRTC();
+                startButton.textContent = 'Start Recording';
             }
         }
+        function updateVisualization() {
+            if (!analyser) return;
+            analyser.getByteFrequencyData(dataArray);
+            const bars = document.querySelectorAll('.box');
+            for (let i = 0; i < bars.length; i++) {
+                const barHeight = (dataArray[i] / 255) * 2;
+                bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
+            }
+            animationId = requestAnimationFrame(updateVisualization);
+        }
         function stopWebRTC() {
             if (peerConnection) {
                 peerConnection.close();
             }
             updateButtonState();
         }
         startButton.addEventListener('click', () => {
             if (!isRecording) {
                 setupWebRTC();
         });
     </script>
 </body>
 </html>