Spaces:

jeremierostan
/

Real-Time-Experts

Sleeping

App Files Files Community

jeremierostan commited on Mar 5, 2025

Commit

87ab4e6

verified ·

1 Parent(s): 69e88b4

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -144

index.html CHANGED Viewed

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -70,9 +69,7 @@
             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);
@@ -99,45 +96,6 @@
             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;
@@ -158,12 +116,6 @@
             background-color: #ffd700;
             color: black;
         }
-        .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);
-        }
         .radio-group {
             display: flex;
             flex-direction: column;
@@ -176,12 +128,6 @@
             gap: 0.5rem;
             cursor: pointer;
         }
-        .radio-option input[type="radio"] {
-            margin: 0;
-            width: 16px;
-            height: 16px;
-            cursor: pointer;
-        }
         .prompt-preview {
             padding: 0.5rem;
             font-size: 0.8rem;
@@ -197,24 +143,16 @@
             text-decoration: underline;
             cursor: pointer;
             font-size: 0.8rem;
-            margin-top: 0.25rem;
             margin-left: 0.5rem;
-            display: inline-block;
         }
     </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">
@@ -235,7 +173,7 @@
             <div class="input-group">
                 <label>System Prompt</label>
-                <div class="prompt-selection">
                     <div class="radio-group" id="prompt-options">
                         <label class="radio-option">
                             <input type="radio" name="prompt-selection" value="default" checked>
@@ -285,10 +223,9 @@
     <audio id="audio-output"></audio>
     <script>
-        // System prompts data injected from the server
         const SYSTEM_PROMPTS = __SYSTEM_PROMPTS__;
-        // Initialize prompt previews
         function initPromptPreviews() {
             const previews = document.querySelectorAll('.prompt-preview');
             previews.forEach(preview => {
@@ -299,7 +236,6 @@
             });
         }
-        // Toggle prompt preview visibility
         function togglePromptPreview(element) {
             const preview = element.nextElementSibling;
             if (preview.style.display === 'block') {
@@ -307,11 +243,9 @@
             } else {
                 preview.style.display = 'block';
             }
-            // Prevent the radio button from being toggled
             event.stopPropagation();
         }
-        // Show/hide custom prompt textarea based on selection
         function handlePromptSelection() {
             const customPromptContainer = document.getElementById('custom-prompt-container');
             const selectedValue = document.querySelector('input[name="prompt-selection"]:checked').value;
@@ -323,7 +257,6 @@
             }
         }
-        // Initialize event listeners for radio buttons
         function initRadioListeners() {
             const radioButtons = document.querySelectorAll('input[name="prompt-selection"]');
             radioButtons.forEach(radio => {
@@ -331,7 +264,6 @@
             });
         }
-        // Initialize on page load
         document.addEventListener('DOMContentLoaded', function() {
             initPromptPreviews();
             initRadioListeners();
@@ -342,48 +274,41 @@
         let dataChannel;
         let isRecording = false;
         let webrtc_id;
         const startButton = document.getElementById('start-button');
         const apiKeyInput = document.getElementById('api-key');
         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);
         }
-        // Get the currently selected prompt
         function getSelectedPrompt() {
             const selectedValue = document.querySelector('input[name="prompt-selection"]:checked').value;
             const customPrompt = document.getElementById('custom-prompt').value;
@@ -398,26 +323,18 @@
             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();
-                analyser_input = audioContext.createAnalyser();
                 const source = audioContext.createMediaStreamSource(stream);
                 source.connect(analyser_input);
                 analyser_input.fftSize = 64;
-                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;
@@ -429,32 +346,36 @@
                     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);
@@ -478,22 +399,10 @@
                         });
                     }
                 };
-                // 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' },
@@ -503,34 +412,22 @@
                         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);
-                    stop();
-                    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.');
-                stop();
-                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();
@@ -543,6 +440,7 @@
             }
             updateButtonState();
         }
         startButton.addEventListener('click', () => {
             if (!isRecording) {
                 setupWebRTC();
@@ -555,5 +453,4 @@
         });
     </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);
         }
         .toast {
             position: fixed;
             top: 20px;
             background-color: #ffd700;
             color: black;
         }
         .radio-group {
             display: flex;
             flex-direction: column;
             gap: 0.5rem;
             cursor: pointer;
         }
         .prompt-preview {
             padding: 0.5rem;
             font-size: 0.8rem;
             text-decoration: underline;
             cursor: pointer;
             font-size: 0.8rem;
             margin-left: 0.5rem;
         }
     </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">
             <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>
     <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 => {
             });
         }
         function togglePromptPreview(element) {
             const preview = element.nextElementSibling;
             if (preview.style.display === 'block') {
             } 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;
             }
         }
         function initRadioListeners() {
             const radioButtons = document.querySelectorAll('input[name="prompt-selection"]');
             radioButtons.forEach(radio => {
             });
         }
         document.addEventListener('DOMContentLoaded', function() {
             initPromptPreviews();
             initRadioListeners();
         let dataChannel;
         let isRecording = false;
         let webrtc_id;
+        let animationId;
         const startButton = document.getElementById('start-button');
         const apiKeyInput = document.getElementById('api-key');
         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;
             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;
                     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);
                         });
                     }
                 };
                 const offer = await peerConnection.createOffer();
                 await peerConnection.setLocalDescription(offer);
                 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);
+                    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();
             }
             updateButtonState();
         }
         startButton.addEventListener('click', () => {
             if (!isRecording) {
                 setupWebRTC();
         });
     </script>
 </body>
 </html>