| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Gemini Voice Chat</title> |
| <style> |
| :root { |
| --color-accent: #6366f1; |
| --color-background: #0f172a; |
| --color-surface: #1e293b; |
| --color-text: #e2e8f0; |
| --boxSize: 8px; |
| --gutter: 4px; |
| } |
| body { |
| margin: 0; |
| padding: 0; |
| background-color: var(--color-background); |
| color: var(--color-text); |
| font-family: system-ui, -apple-system, sans-serif; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| .container { |
| width: 90%; |
| max-width: 800px; |
| background-color: var(--color-surface); |
| padding: 2rem; |
| border-radius: 1rem; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| } |
| .wave-container { |
| position: relative; |
| display: flex; |
| min-height: 100px; |
| max-height: 128px; |
| justify-content: center; |
| align-items: center; |
| margin: 2rem 0; |
| } |
| .box-container { |
| display: flex; |
| justify-content: space-between; |
| height: 64px; |
| width: 100%; |
| } |
| .box { |
| height: 100%; |
| width: var(--boxSize); |
| background: var(--color-accent); |
| border-radius: 8px; |
| transition: transform 0.05s ease; |
| } |
| .controls { |
| display: grid; |
| gap: 1rem; |
| margin-bottom: 2rem; |
| } |
| .input-group { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| label { |
| font-size: 0.875rem; |
| font-weight: 500; |
| } |
| select { |
| padding: 0.75rem; |
| border-radius: 0.5rem; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| background-color: var(--color-background); |
| color: var(--color-text); |
| font-size: 1rem; |
| } |
| button { |
| padding: 1rem 2rem; |
| border-radius: 0.5rem; |
| border: none; |
| background-color: var(--color-accent); |
| color: white; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| min-width: 180px; |
| } |
| button:hover { |
| 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; |
| } |
| .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; |
| } |
| .toast { |
| position: fixed; |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 16px 24px; |
| border-radius: 4px; |
| font-size: 14px; |
| z-index: 1000; |
| display: none; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| } |
| .toast.error { |
| background-color: #f44336; |
| color: white; |
| } |
| .toast.warning { |
| background-color: #ffd700; |
| color: black; |
| } |
| .mute-toggle { |
| width: 24px; |
| height: 24px; |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
| .mute-toggle svg { |
| display: block; |
| } |
| #start-button { |
| margin-left: auto; |
| margin-right: auto; |
| } |
| .api-status { |
| background-color: var(--color-background); |
| padding: 1rem; |
| border-radius: 0.5rem; |
| margin-bottom: 1rem; |
| text-align: center; |
| border: 1px solid rgba(34, 197, 94, 0.3); |
| } |
| .api-status.success { |
| color: #22c55e; |
| } |
| .api-status.error { |
| color: #ef4444; |
| border-color: rgba(239, 68, 68, 0.3); |
| } |
| </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> |
| Using API key from environment variable |
| </p> |
| </div> |
| <div class="container"> |
| <div class="api-status success"> |
| ✓ API Key configured via environment variable |
| </div> |
| |
| <div class="controls"> |
| <div class="input-group"> |
| <label for="voice">Voice</label> |
| <select id="voice"> |
| <option value="Puck">Puck</option> |
| <option value="Charon">Charon</option> |
| <option value="Kore">Kore</option> |
| <option value="Fenrir">Fenrir</option> |
| <option value="Aoede">Aoede</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="wave-container"> |
| <div class="box-container"> |
| |
| </div> |
| </div> |
|
|
| <button id="start-button">Start Recording</button> |
| </div> |
|
|
| <audio id="audio-output"></audio> |
|
|
| <script> |
| let peerConnection; |
| let audioContext; |
| let dataChannel; |
| let isRecording = false; |
| let webrtc_id; |
| let isMuted = false; |
| let analyser_input, dataArray_input; |
| let analyser, dataArray; |
| let source_input = null; |
| let source_output = null; |
| 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); |
| } |
| |
| |
| const micIconSVG = ` |
| <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> |
| <line x1="12" y1="19" x2="12" y2="23"></line> |
| <line x1="8" y1="23" x2="16" y2="23"></line> |
| </svg>`; |
| const micMutedIconSVG = ` |
| <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> |
| <line x1="12" y1="19" x2="12" y2="23"></line> |
| <line x1="8" y1="23" x2="16" y2="23"></line> |
| <line x1="1" y1="1" x2="23" y2="23"></line> |
| </svg>`; |
| |
| function updateButtonState() { |
| startButton.innerHTML = ''; |
| startButton.onclick = null; |
| if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) { |
| startButton.innerHTML = ` |
| <div class="icon-with-spinner"> |
| <div class="spinner"></div> |
| <span>Connecting...</span> |
| </div> |
| `; |
| startButton.disabled = true; |
| } else if (peerConnection && peerConnection.connectionState === 'connected') { |
| const pulseContainer = document.createElement('div'); |
| pulseContainer.className = 'pulse-container'; |
| pulseContainer.innerHTML = ` |
| <div class="pulse-circle"></div> |
| <span>Stop Recording</span> |
| `; |
| const muteToggle = document.createElement('div'); |
| muteToggle.className = 'mute-toggle'; |
| muteToggle.title = isMuted ? 'Unmute' : 'Mute'; |
| muteToggle.innerHTML = isMuted ? micMutedIconSVG : micIconSVG; |
| muteToggle.addEventListener('click', toggleMute); |
| startButton.appendChild(pulseContainer); |
| startButton.appendChild(muteToggle); |
| startButton.disabled = false; |
| } else { |
| startButton.innerHTML = 'Start Recording'; |
| startButton.disabled = false; |
| } |
| } |
| |
| 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 toggleMute(event) { |
| event.stopPropagation(); |
| if (!peerConnection || peerConnection.connectionState !== 'connected') return; |
| isMuted = !isMuted; |
| console.log("Mute toggled:", isMuted); |
| peerConnection.getSenders().forEach(sender => { |
| if (sender.track && sender.track.kind === 'audio') { |
| sender.track.enabled = !isMuted; |
| console.log(`Audio track ${sender.track.id} enabled: ${!isMuted}`); |
| } |
| }); |
| updateButtonState(); |
| } |
| |
| 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'; |
| setTimeout(() => { |
| toast.style.display = 'none'; |
| }, 5000); |
| }, 5000); |
| try { |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); |
| stream.getTracks().forEach(track => peerConnection.addTrack(track, stream)); |
| if (!audioContext || audioContext.state === 'closed') { |
| audioContext = new AudioContext(); |
| } |
| if (source_input) { |
| try { source_input.disconnect(); } catch (e) { console.warn("Error disconnecting previous input source:", e); } |
| source_input = null; |
| } |
| source_input = audioContext.createMediaStreamSource(stream); |
| analyser_input = audioContext.createAnalyser(); |
| source_input.connect(analyser_input); |
| analyser_input.fftSize = 64; |
| dataArray_input = new Uint8Array(analyser_input.frequencyBinCount); |
| updateAudioLevel(); |
| peerConnection.addEventListener('connectionstatechange', () => { |
| console.log('connectionstatechange', peerConnection.connectionState); |
| if (peerConnection.connectionState === 'connected') { |
| clearTimeout(timeoutId); |
| const toast = document.getElementById('error-toast'); |
| toast.style.display = 'none'; |
| if (analyser_input) updateAudioLevel(); |
| if (analyser) updateVisualization(); |
| } |
| updateButtonState(); |
| }); |
| peerConnection.onicecandidate = ({ candidate }) => { |
| if (candidate) { |
| console.debug("Sending ICE candidate", candidate); |
| fetch('/webrtc/offer', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| candidate: candidate.toJSON(), |
| webrtc_id: webrtc_id, |
| type: "ice-candidate", |
| }) |
| }) |
| } |
| }; |
| peerConnection.addEventListener('track', (evt) => { |
| if (evt.track.kind === 'audio' && audioOutput) { |
| if (audioOutput.srcObject !== evt.streams[0]) { |
| audioOutput.srcObject = evt.streams[0]; |
| audioOutput.play().catch(e => console.error("Audio play failed:", e)); |
| if (!audioContext || audioContext.state === 'closed') { |
| console.warn("AudioContext not ready for output track analysis."); |
| return; |
| } |
| if (source_output) { |
| try { source_output.disconnect(); } catch (e) { console.warn("Error disconnecting previous output source:", e); } |
| source_output = null; |
| } |
| source_output = audioContext.createMediaStreamSource(evt.streams[0]); |
| analyser = audioContext.createAnalyser(); |
| source_output.connect(analyser); |
| analyser.fftSize = 2048; |
| dataArray = new Uint8Array(analyser.frequencyBinCount); |
| updateVisualization(); |
| } |
| } |
| }); |
| dataChannel = peerConnection.createDataChannel('text'); |
| dataChannel.onmessage = (event) => { |
| const eventJson = JSON.parse(event.data); |
| if (eventJson.type === "error") { |
| showError(eventJson.message); |
| } else if (eventJson.type === "send_input") { |
| fetch('/input_hook', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| webrtc_id: webrtc_id, |
| voice_name: voiceSelect.value |
| |
| }) |
| }); |
| } |
| }; |
| const offer = await peerConnection.createOffer(); |
| await peerConnection.setLocalDescription(offer); |
| const response = await fetch('/webrtc/offer', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| sdp: peerConnection.localDescription.sdp, |
| type: peerConnection.localDescription.type, |
| 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 || !peerConnection || !['connected', 'connecting'].includes(peerConnection.connectionState)) { |
| const bars = document.querySelectorAll('.box'); |
| bars.forEach(bar => bar.style.transform = 'scaleY(0.1)'); |
| 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)})`; |
| } |
| requestAnimationFrame(updateVisualization); |
| } |
| |
| function updateAudioLevel() { |
| if (!analyser_input || !peerConnection || !['connected', 'connecting'].includes(peerConnection.connectionState)) { |
| const pulseCircle = document.querySelector('.pulse-circle'); |
| if (pulseCircle) { |
| pulseCircle.style.setProperty('--audio-level', 1); |
| } |
| return; |
| } |
| analyser_input.getByteFrequencyData(dataArray_input); |
| const average = Array.from(dataArray_input).reduce((a, b) => a + b, 0) / dataArray_input.length; |
| const audioLevel = average / 255; |
| const pulseCircle = document.querySelector('.pulse-circle'); |
| if (pulseCircle) { |
| pulseCircle.style.setProperty('--audio-level', 1 + audioLevel); |
| } |
| requestAnimationFrame(updateAudioLevel); |
| } |
| |
| function stopWebRTC() { |
| console.log("Running stopWebRTC"); |
| if (peerConnection) { |
| peerConnection.getSenders().forEach(sender => { |
| if (sender.track) { |
| sender.track.stop(); |
| } |
| }); |
| peerConnection.ontrack = null; |
| peerConnection.onicegatheringstatechange = null; |
| peerConnection.onconnectionstatechange = null; |
| if (dataChannel) { |
| dataChannel.onmessage = null; |
| try { dataChannel.close(); } catch (e) { console.warn("Error closing data channel:", e); } |
| dataChannel = null; |
| } |
| try { peerConnection.close(); } catch (e) { console.warn("Error closing peer connection:", e); } |
| peerConnection = null; |
| } |
| if (audioOutput) { |
| audioOutput.pause(); |
| audioOutput.srcObject = null; |
| } |
| if (source_input) { |
| try { source_input.disconnect(); } catch (e) { console.warn("Error disconnecting input source:", e); } |
| source_input = null; |
| } |
| if (source_output) { |
| try { source_output.disconnect(); } catch (e) { console.warn("Error disconnecting output source:", e); } |
| source_output = null; |
| } |
| if (audioContext && audioContext.state !== 'closed') { |
| audioContext.close().then(() => { |
| console.log("AudioContext closed successfully."); |
| audioContext = null; |
| }).catch(e => { |
| console.error("Error closing AudioContext:", e); |
| audioContext = null; |
| }); |
| } else { |
| audioContext = null; |
| } |
| analyser_input = null; |
| dataArray_input = null; |
| analyser = null; |
| dataArray = null; |
| isMuted = false; |
| isRecording = false; |
| updateButtonState(); |
| const bars = document.querySelectorAll('.box'); |
| bars.forEach(bar => bar.style.transform = 'scaleY(0.1)'); |
| const pulseCircle = document.querySelector('.pulse-circle'); |
| if (pulseCircle) { |
| pulseCircle.style.setProperty('--audio-level', 1); |
| } |
| } |
| |
| startButton.addEventListener('click', (event) => { |
| if (event.target.closest('.mute-toggle')) { |
| return; |
| } |
| if (peerConnection && peerConnection.connectionState === 'connected') { |
| console.log("Stop button clicked"); |
| stopWebRTC(); |
| } else if (!peerConnection || ['new', 'closed', 'failed', 'disconnected'].includes(peerConnection.connectionState)) { |
| console.log("Start button clicked"); |
| setupWebRTC(); |
| isRecording = true; |
| updateButtonState(); |
| } |
| }); |
| |
| updateButtonState(); |
| </script> |
| </body> |
|
|
| </html> |
