Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Real-time Whisper Transcription</title> | |
| <style> | |
| :root { | |
| --primary-gradient: linear-gradient(135deg, #f9a45c 0%, #e66465 100%); | |
| --background-cream: #faf8f5; | |
| --background-cream-end: #f7f5f2; | |
| /* Slightly warmer end color for body gradient */ | |
| --text-dark: #2d2d2d; | |
| --transcript-bg: #ffffff; | |
| /* White background for transcript area */ | |
| --transcript-border: #e0e0e0; | |
| /* Light border for transcript items */ | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| /* Apply a subtle vertical gradient to the body */ | |
| background: linear-gradient(to bottom, var(--background-cream), var(--background-cream-end)); | |
| color: var(--text-dark); | |
| min-height: 100vh; | |
| } | |
| .hero { | |
| background: var(--primary-gradient); | |
| color: white; | |
| padding: 2.5rem 2rem; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin: 0; | |
| font-weight: 600; | |
| letter-spacing: -0.5px; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| margin-top: 0.5rem; | |
| opacity: 0.9; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 2.5rem auto; | |
| /* Increased top/bottom margin */ | |
| padding: 0 2rem; | |
| } | |
| .transcript-container { | |
| border-radius: 12px; | |
| /* Slightly larger radius */ | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); | |
| /* Enhanced shadow */ | |
| padding: 1.5rem; | |
| height: 350px; | |
| /* Increased height */ | |
| overflow-y: auto; | |
| margin-bottom: 2rem; | |
| /* Increased margin */ | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| /* Softer border */ | |
| background-color: var(--transcript-bg); | |
| /* Use the new variable */ | |
| } | |
| .controls { | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| } | |
| button { | |
| background: var(--primary-gradient); | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| font-size: 0.95rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-weight: 500; | |
| min-width: 180px; | |
| position: relative; | |
| padding-right: 50px; | |
| } | |
| button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(230, 100, 101, 0.15); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| /* Transcript text styling */ | |
| .transcript-container p { | |
| margin: 0.6rem 0; | |
| /* Increased vertical margin */ | |
| padding: 0.8rem 1rem; | |
| /* Increased padding */ | |
| background: var(--background-cream); | |
| /* Use the lighter cream for contrast */ | |
| border-radius: 6px; | |
| /* Slightly larger radius */ | |
| line-height: 1.5; | |
| /* Improved line spacing */ | |
| font-size: 0.98rem; | |
| /* Slightly larger font */ | |
| border-left: 3px solid var(--transcript-border); | |
| /* Add a subtle left border */ | |
| transition: background-color 0.2s ease; | |
| /* Smooth hover effect */ | |
| } | |
| .transcript-container p:hover { | |
| background-color: #fdfbf9; | |
| /* Slightly change background on hover */ | |
| } | |
| /* Custom scrollbar - update track color */ | |
| .transcript-container::-webkit-scrollbar { | |
| width: 8px; | |
| /* Slightly wider scrollbar */ | |
| } | |
| .transcript-container::-webkit-scrollbar-track { | |
| background: var(--background-cream-end); | |
| /* Match body end gradient */ | |
| border-radius: 4px; | |
| } | |
| .transcript-container::-webkit-scrollbar-thumb { | |
| background: #e66465; | |
| border-radius: 3px; | |
| opacity: 0.8; | |
| } | |
| .transcript-container::-webkit-scrollbar-thumb:hover { | |
| background: #f9a45c; | |
| } | |
| /* Add styles for toast notifications */ | |
| .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; | |
| } | |
| /* Add styles for audio visualization */ | |
| .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; | |
| } | |
| .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; | |
| } | |
| /* Styles for the mute button */ | |
| .mute-toggle { | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 24px; | |
| height: 24px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .mute-toggle svg { | |
| width: 20px; | |
| height: 20px; | |
| stroke: white; | |
| } | |
| /* Adjust layout for button content when mute is present */ | |
| .button-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: calc(100% - 40px); | |
| margin-right: 40px; | |
| } | |
| .icon-with-spinner, | |
| .pulse-container { | |
| width: 100%; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Add toast element after body opening tag --> | |
| <div id="error-toast" class="toast"></div> | |
| <div class="hero"> | |
| <h1>Real-time Transcription</h1> | |
| <p>Powered by Groq and FastRTC</p> | |
| </div> | |
| <div class="container"> | |
| <div class="transcript-container" id="transcript"> | |
| </div> | |
| <div class="controls"> | |
| <button id="start-button">Start Recording</button> | |
| </div> | |
| </div> | |
| <script> | |
| let peerConnection; | |
| let webrtc_id; | |
| let audioContext, analyser, audioSource; | |
| let audioLevel = 0; | |
| let animationFrame; | |
| let isMuted = false; | |
| const startButton = document.getElementById('start-button'); | |
| const transcriptDiv = document.getElementById('transcript'); | |
| // SVG Icons | |
| 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 showError(message) { | |
| const toast = document.getElementById('error-toast'); | |
| toast.textContent = message; | |
| toast.style.display = 'block'; | |
| // Hide toast after 5 seconds | |
| setTimeout(() => { | |
| toast.style.display = 'none'; | |
| }, 5000); | |
| } | |
| async function handleMessage(event) { | |
| // Handle any WebRTC data channel messages if needed | |
| const eventJson = JSON.parse(event.data); | |
| if (eventJson.type === "error") { | |
| showError(eventJson.message); | |
| } else if (eventJson.type === "send_input") { | |
| const response = await fetch('/send_input', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| webrtc_id: webrtc_id, | |
| transcript: "" | |
| }) | |
| }); | |
| } | |
| console.log('Received message:', event.data); | |
| } | |
| function updateButtonState() { | |
| // Remove existing mute listener if present | |
| const existingMuteButton = startButton.querySelector('.mute-toggle'); | |
| if (existingMuteButton) { | |
| existingMuteButton.removeEventListener('click', toggleMute); | |
| existingMuteButton.remove(); | |
| } | |
| if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) { | |
| startButton.innerHTML = ` | |
| <div class="button-content"> | |
| <div class="icon-with-spinner"> | |
| <div class="spinner"></div> | |
| <span>Connecting...</span> | |
| </div> | |
| </div> | |
| `; | |
| startButton.disabled = true; | |
| } else if (peerConnection && peerConnection.connectionState === 'connected') { | |
| startButton.innerHTML = ` | |
| <div class="button-content"> | |
| <div class="pulse-container"> | |
| <div class="pulse-circle"></div> | |
| <span>Stop Recording</span> | |
| </div> | |
| </div> | |
| <div class="mute-toggle" title="${isMuted ? 'Unmute' : 'Mute'}"> | |
| ${isMuted ? micMutedIconSVG : micIconSVG} | |
| </div> | |
| `; | |
| startButton.disabled = false; | |
| const muteButton = startButton.querySelector('.mute-toggle'); | |
| if (muteButton) { | |
| muteButton.addEventListener('click', toggleMute); | |
| } | |
| } else { | |
| startButton.innerHTML = 'Start Recording'; | |
| startButton.disabled = false; | |
| } | |
| } | |
| 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(); | |
| } | |
| function setupAudioVisualization(stream) { | |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| analyser = audioContext.createAnalyser(); | |
| audioSource = audioContext.createMediaStreamSource(stream); | |
| audioSource.connect(analyser); | |
| analyser.fftSize = 64; | |
| const dataArray = new Uint8Array(analyser.frequencyBinCount); | |
| function updateAudioLevel() { | |
| analyser.getByteFrequencyData(dataArray); | |
| const average = Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length; | |
| audioLevel = average / 255; | |
| const pulseCircle = document.querySelector('.pulse-circle'); | |
| if (pulseCircle) { | |
| pulseCircle.style.setProperty('--audio-level', 1 + audioLevel); | |
| } | |
| animationFrame = requestAnimationFrame(updateAudioLevel); | |
| } | |
| updateAudioLevel(); | |
| } | |
| async function setupWebRTC() { | |
| const config = __RTC_CONFIGURATION__; | |
| peerConnection = new RTCPeerConnection(config); | |
| 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 | |
| }); | |
| setupAudioVisualization(stream); | |
| stream.getTracks().forEach(track => { | |
| peerConnection.addTrack(track, stream); | |
| }); | |
| // 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(); | |
| }); | |
| 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", | |
| }) | |
| }) | |
| } | |
| }; | |
| // Create data channel for messages | |
| const dataChannel = peerConnection.createDataChannel('text'); | |
| dataChannel.onmessage = handleMessage; | |
| // Create and send offer | |
| const offer = await peerConnection.createOffer(); | |
| await peerConnection.setLocalDescription(offer); | |
| webrtc_id = Math.random().toString(36).substring(7); | |
| 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); | |
| stop(); | |
| startButton.textContent = 'Start Recording'; | |
| return; | |
| } | |
| await peerConnection.setRemoteDescription(serverResponse); | |
| // Create event stream to receive transcripts | |
| const eventSource = new EventSource('/transcript?webrtc_id=' + webrtc_id); | |
| eventSource.addEventListener("output", (event) => { | |
| appendTranscript(event.data); | |
| }); | |
| } 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 appendTranscript(text) { | |
| const p = document.createElement('p'); | |
| p.textContent = text; | |
| transcriptDiv.appendChild(p); | |
| transcriptDiv.scrollTop = transcriptDiv.scrollHeight; | |
| } | |
| function stop() { | |
| if (animationFrame) { | |
| cancelAnimationFrame(animationFrame); | |
| animationFrame = null; | |
| } | |
| if (audioContext) { | |
| audioContext.close().catch(e => console.error("Error closing AudioContext:", e)); | |
| audioContext = null; | |
| analyser = null; | |
| audioSource = null; | |
| } | |
| if (peerConnection) { | |
| if (peerConnection.getSenders) { | |
| peerConnection.getSenders().forEach(sender => { | |
| if (sender.track) { | |
| sender.track.stop(); | |
| console.log(`Track ${sender.track.id} stopped.`); | |
| } | |
| }); | |
| } | |
| peerConnection.close(); | |
| peerConnection = null; | |
| console.log("Peer connection closed."); | |
| } | |
| audioLevel = 0; | |
| isMuted = false; | |
| updateButtonState(); | |
| } | |
| startButton.addEventListener('click', (event) => { | |
| if (event.target.closest('.mute-toggle')) { | |
| return; | |
| } | |
| if (peerConnection && peerConnection.connectionState === 'connected') { | |
| console.log("Stop button clicked"); | |
| stop(); | |
| } else if (!peerConnection || ['new', 'closed', 'failed', 'disconnected'].includes(peerConnection.connectionState)) { | |
| console.log("Start button clicked"); | |
| transcriptDiv.innerHTML = ''; | |
| setupWebRTC(); | |
| updateButtonState(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |