Spaces:
Sleeping
Sleeping
| <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 { | |
| --background-dark: #000000; | |
| --text-light: #ffffff; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| margin: 0; /* Removes default margin */ | |
| padding: 0; /* Removes default padding */ | |
| background-color: var(--background-dark); /* Sets background to black */ | |
| color: var(--text-light); /* Sets text to white */ | |
| min-height: 100vh; /* Ensures page fills entire viewport height */ | |
| } | |
| /* Hide the header in presentation mode */ | |
| .hero { | |
| display: none; /* Hides the hero section completely */ | |
| } | |
| .container { | |
| max-width: 100%; /* Makes container full width */ | |
| margin: 0; /* Removes margin */ | |
| padding: 1rem; /* Adds small padding all around */ | |
| } | |
| /* Base styling for transcript container */ | |
| .transcript-container { | |
| height: 90vh; /* Sets height to 90% of viewport height */ | |
| border: none; /* Removes border */ | |
| padding: 2rem; /* Adds generous padding inside */ | |
| background: var(--background-dark); /* Ensures background is black */ | |
| color: var(--text-light); /* Ensures text is white */ | |
| overflow-y: auto; /* Enables vertical scrolling when content overflows */ | |
| margin-bottom: 0; /* Removes bottom margin */ | |
| display: block; /* Makes element a block to take full width */ | |
| width: 100%; /* Sets width to 100% */ | |
| } | |
| /* Styling for transcript paragraphs */ | |
| .transcript-container p { | |
| margin: 0.5rem 0; /* Small vertical margin between paragraphs */ | |
| padding: 0.5rem 0; /* Small vertical padding within paragraphs */ | |
| background: transparent; /* Transparent background (no highlighting) */ | |
| border-radius: 0; /* No rounded corners */ | |
| line-height: 1.6; /* Increases line spacing for readability */ | |
| font-size: 3.5rem; /* rem means relative to the root font size */ | |
| font-weight: 500; /* 500 = medium weight, 700 = bold */ | |
| max-width: 98%; /* Full width within container */ | |
| white-space: normal; /* Allows text to wrap normally */ | |
| word-wrap: break-word; /* Prevents overflow of long words */ | |
| color: white; /* Explicitly sets text color to white */ | |
| display: block; /* Each paragraph takes full width */ | |
| } | |
| /* Current paragraph styling - slightly brighter for emphasis */ | |
| .transcript-container p.current { | |
| background: transparent; /* No background color */ | |
| color: rgba(255, 255, 255, 1.0); /* Full brightness white for current text */ | |
| } | |
| /* Ensure all paragraphs have full opacity (keeps history visible) */ | |
| .transcript-container p:nth-last-child(n+4) { | |
| opacity: 1.0; /* Shows all paragraphs at full opacity */ | |
| } | |
| /* Controls for starting/stopping transcription */ | |
| .controls { | |
| position: fixed; /* Fixes controls to viewport */ | |
| bottom: 2rem; /* Positions 2rem from bottom */ | |
| right: 2rem; /* Positions 2rem from right */ | |
| margin: 0; /* No margin */ | |
| opacity: 0.8; /* Slightly transparent when not hovered */ | |
| transition: opacity 0.3s ease; /* Smooth transition for opacity changes */ | |
| z-index: 1000; /* Ensures controls appear above other elements */ | |
| } | |
| .controls:hover { | |
| opacity: 1; /* Full opacity on hover */ | |
| } | |
| /* Button styling - orange with black text for good contrast */ | |
| button { | |
| background: rgba(249, 164, 92, 1.0); /* Solid orange background */ | |
| backdrop-filter: blur(5px); /* Blur effect for elements behind */ | |
| font-size: 1.2rem; /* Large text */ | |
| min-width: 160px; /* Minimum width for button */ | |
| padding: 15px 30px; /* Generous padding inside button */ | |
| color: black ; /* Forces black text color */ | |
| font-weight: bold; /* Bold text for better visibility */ | |
| border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */ | |
| border-radius: 8px; /* Rounded corners */ | |
| cursor: pointer; /* Shows pointer cursor on hover */ | |
| transition: all 0.2s ease; /* Smooth transition for hover effects */ | |
| display: block; /* Makes button take up full width */ | |
| } | |
| button:hover { | |
| background: rgba(249, 164, 92, 0.9); /* Slightly more transparent on hover */ | |
| transform: translateY(-2px); /* Slight upward movement on hover */ | |
| } | |
| /* Spinner animation for loading state */ | |
| .icon-with-spinner .spinner { | |
| border: 3px solid black; /* Spinner border */ | |
| border-top: 3px solid transparent; /* Transparent top creates spinning effect */ | |
| border-radius: 50%; /* Makes it circular */ | |
| width: 24px; /* Width of spinner */ | |
| height: 24px; /* Height of spinner */ | |
| animation: spin 1s linear infinite; /* Animation for spinning effect */ | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } /* Starting rotation */ | |
| 100% { transform: rotate(360deg); } /* Full 360° rotation */ | |
| } | |
| /* Recording indicator pulse animation */ | |
| .pulse-circle { | |
| display: inline-block; /* Allows other elements inline */ | |
| width: 12px; /* Width of pulse circle */ | |
| height: 12px; /* Height of pulse circle */ | |
| border-radius: 50%; /* Makes it circular */ | |
| background-color: red; /* Red color for recording indicator */ | |
| margin-right: 8px; /* Space to right of circle */ | |
| animation: pulse 1.5s ease infinite; /* Continuous pulsing animation */ | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); opacity: 0.7; } /* Slightly smaller and transparent */ | |
| 50% { transform: scale(1.1); opacity: 1; } /* Larger and fully opaque */ | |
| 100% { transform: scale(0.95); opacity: 0.7; } /* Back to starting state */ | |
| } | |
| /* Custom scrollbar styling */ | |
| .transcript-container::-webkit-scrollbar { | |
| width: 8px; /* Width of scrollbar */ | |
| } | |
| .transcript-container::-webkit-scrollbar-track { | |
| background: var(--background-dark); /* Black scrollbar track */ | |
| } | |
| .transcript-container::-webkit-scrollbar-thumb { | |
| background: rgba(249, 164, 92, 0.3); /* Semi-transparent orange scrollbar thumb */ | |
| border-radius: 4px; /* Rounded corners on scrollbar thumb */ | |
| } | |
| /* Error toast styling */ | |
| .toast { | |
| background: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */ | |
| backdrop-filter: blur(5px); /* Blur effect behind toast */ | |
| color: var(--text-light); /* White text */ | |
| font-size: 1.2rem; /* Large text size */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Error message container that slides in when needed --> | |
| <div id="error-toast" class="toast"></div> | |
| <!-- Header section (hidden in presentation mode) --> | |
| <div class="hero"> | |
| <h1>Real-time Transcription</h1> | |
| <p>Powered by FastRTC and Local Whisper 🤗</p> | |
| </div> | |
| <!-- Main content container --> | |
| <div class="container"> | |
| <!-- Container for transcript text --> | |
| <div class="transcript-container" id="transcript"></div> | |
| <!-- Controls for starting/stopping recording --> | |
| <div class="controls"> | |
| <button id="start-button">Start Recording</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Global variables for WebRTC connection | |
| let peerConnection; // Stores the WebRTC connection object for audio streaming | |
| let webrtc_id; // A unique ID to identify this connection on the server | |
| let audioContext, analyser, audioSource; // Audio processing objects for visualization | |
| let audioLevel = 0; // Stores the current audio level (volume) from 0-1 | |
| let animationFrame; // Reference to the animation frame for audio visualization | |
| let isRecording = false; // Tracks whether we're currently recording or not | |
| let eventSource; // Object that receives transcription results from the server | |
| // DOM element references | |
| const startButton = document.getElementById('start-button'); // The button to start/stop recording | |
| const transcriptDiv = document.getElementById('transcript'); // The container for transcription text | |
| // Variables for managing the transcript display | |
| let currentParagraph = null; // Reference to the current paragraph being updated | |
| let lastUpdateTime = Date.now(); // Timestamp of when we last updated the transcript | |
| // Show error messages to the user in a toast notification | |
| function showError(message) { | |
| const toast = document.getElementById('error-toast'); // Get the toast element | |
| toast.textContent = message; // Set the error message | |
| toast.style.display = 'block'; // Make the toast visible | |
| // Hide toast after 5 seconds | |
| setTimeout(() => { | |
| toast.style.display = 'none'; // Hide the toast | |
| }, 5000); | |
| } | |
| // Handle messages received from the server through WebRTC data channel | |
| function handleMessage(event) { | |
| // Parse JSON message | |
| const eventJson = JSON.parse(event.data); | |
| // Display errors to the user | |
| if (eventJson.type === "error") { | |
| showError(eventJson.message); | |
| } | |
| // Log all messages to console for debugging | |
| console.log('Received message:', event.data); | |
| } | |
| // Update button appearance based on connection state | |
| function updateButtonState() { | |
| // If connecting, show spinner | |
| if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) { | |
| startButton.innerHTML = ` | |
| <div class="icon-with-spinner"> | |
| <div class="spinner"></div> | |
| <span>Connecting...</span> | |
| </div> | |
| `; | |
| isRecording = false; // Not recording while connecting | |
| // If connected, show pulsing recording indicator | |
| } else if (peerConnection && peerConnection.connectionState === 'connected') { | |
| startButton.innerHTML = ` | |
| <div class="pulse-container"> | |
| <div class="pulse-circle"></div> | |
| <span>Stop Recording</span> | |
| </div> | |
| `; | |
| isRecording = true; // Set recording state to true | |
| // Default state - ready to start | |
| } else { | |
| startButton.innerHTML = 'Start Recording'; | |
| isRecording = false; // Not recording when not connected | |
| } | |
| } | |
| // Set up audio visualization to show when the user is speaking | |
| function setupAudioVisualization(stream) { | |
| // Create or resume the audio context | |
| if (!audioContext) { | |
| // Create new audio context with browser compatibility handling | |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| } else { | |
| // Resume context if it was suspended | |
| if (audioContext.state === 'suspended') { | |
| audioContext.resume(); | |
| } | |
| } | |
| // Create audio analyzer for processing audio data | |
| analyser = audioContext.createAnalyser(); | |
| // Create media source from microphone stream | |
| audioSource = audioContext.createMediaStreamSource(stream); | |
| // Connect source to analyzer | |
| audioSource.connect(analyser); | |
| // Set FFT size (controls frequency data resolution) | |
| analyser.fftSize = 64; | |
| // Create array to store frequency data | |
| const dataArray = new Uint8Array(analyser.frequencyBinCount); | |
| // Function to continuously update audio level visualization | |
| function updateAudioLevel() { | |
| // Get audio frequency data | |
| analyser.getByteFrequencyData(dataArray); | |
| // Calculate average volume across all frequencies | |
| const average = Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length; | |
| // Convert to 0-1 scale | |
| audioLevel = average / 255; | |
| // Update pulse circle size based on audio level | |
| const pulseCircle = document.querySelector('.pulse-circle'); | |
| if (pulseCircle) { | |
| pulseCircle.style.setProperty('--audio-level', 1 + audioLevel); | |
| } | |
| // Continue animation loop | |
| animationFrame = requestAnimationFrame(updateAudioLevel); | |
| } | |
| // Start audio visualization loop | |
| updateAudioLevel(); | |
| } | |
| // Set up WebRTC connection for streaming audio to server | |
| async function setupWebRTC() { | |
| // Get WebRTC configuration from global variable | |
| const config = __RTC_CONFIGURATION__; | |
| // Create new peer connection | |
| peerConnection = new RTCPeerConnection(config); | |
| // Set connection timeout (15 seconds) | |
| const connectionTimeout = setTimeout(() => { | |
| if (peerConnection && peerConnection.connectionState !== 'connected') { | |
| showError('Connection timeout. Please check your network and try again.'); | |
| stop(); // Stop connection attempt | |
| } | |
| }, 15000); | |
| // Set warning for slow connection (5 seconds) | |
| 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 { | |
| // Request access to user's microphone | |
| const stream = await navigator.mediaDevices.getUserMedia({ | |
| audio: true // Only request audio access | |
| }); | |
| // Set up audio visualization | |
| setupAudioVisualization(stream); | |
| // Add audio tracks to WebRTC connection | |
| stream.getTracks().forEach(track => { | |
| peerConnection.addTrack(track, stream); | |
| }); | |
| // Monitor connection state changes | |
| peerConnection.addEventListener('connectionstatechange', () => { | |
| // Log state changes | |
| console.log('connectionstatechange', peerConnection.connectionState); | |
| // Handle successful connection | |
| if (peerConnection.connectionState === 'connected') { | |
| clearTimeout(timeoutId); | |
| clearTimeout(connectionTimeout); | |
| const toast = document.getElementById('error-toast'); | |
| toast.style.display = 'none'; | |
| // Handle connection failures | |
| } else if (peerConnection.connectionState === 'failed' || | |
| peerConnection.connectionState === 'disconnected' || | |
| peerConnection.connectionState === 'closed') { | |
| showError('Connection lost. Please try again.'); | |
| stop(); | |
| } | |
| // Update button appearance | |
| updateButtonState(); | |
| }); | |
| // Create data channel for server messages | |
| const dataChannel = peerConnection.createDataChannel('text'); | |
| dataChannel.onmessage = handleMessage; // Set message handler | |
| // Create connection offer | |
| const offer = await peerConnection.createOffer(); | |
| // Set local description (our end of connection) | |
| await peerConnection.setLocalDescription(offer); | |
| // Wait for ICE gathering to complete (finding connection methods) | |
| await new Promise((resolve) => { | |
| if (peerConnection.iceGatheringState === "complete") { | |
| resolve(); // Already complete | |
| } else { | |
| // Function to check ICE gathering state | |
| const checkState = () => { | |
| if (peerConnection.iceGatheringState === "complete") { | |
| peerConnection.removeEventListener("icegatheringstatechange", checkState); | |
| resolve(); // Complete gathering | |
| } | |
| }; | |
| // Listen for ICE gathering state changes | |
| peerConnection.addEventListener("icegatheringstatechange", checkState); | |
| } | |
| }); | |
| // Generate random ID for this connection | |
| webrtc_id = Math.random().toString(36).substring(7); | |
| // Send connection offer to server | |
| const response = await fetch('/webrtc/offer', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| sdp: peerConnection.localDescription.sdp, // Session description | |
| type: peerConnection.localDescription.type, // Offer type | |
| webrtc_id: webrtc_id // Unique connection ID | |
| }) | |
| }); | |
| // Parse server response | |
| const serverResponse = await response.json(); | |
| // Handle server errors | |
| 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; | |
| } | |
| // Complete connection with server's description | |
| await peerConnection.setRemoteDescription(serverResponse); | |
| // Create event source for receiving transcription results | |
| eventSource = new EventSource('/transcript?webrtc_id=' + webrtc_id); | |
| // Handle event source errors | |
| eventSource.onerror = (event) => { | |
| console.error("EventSource error:", event); | |
| showError("Transcription connection lost. Please try again."); | |
| }; | |
| // Process transcription results as they arrive | |
| eventSource.addEventListener("output", (event) => { | |
| console.log("Received transcript chunk:", event.data); | |
| // Add text to display | |
| appendTranscript(event.data); | |
| //appendTranscriptSimple(event.data); | |
| }); | |
| } catch (err) { | |
| // Handle any setup errors | |
| clearTimeout(timeoutId); | |
| console.error('Error setting up WebRTC:', err); | |
| showError('Failed to establish connection. Please try again.'); | |
| stop(); | |
| startButton.textContent = 'Start Recording'; | |
| } | |
| } | |
| function appendTranscriptSimple(text) { | |
| const p = document.createElement('p'); | |
| p.textContent = text; | |
| transcriptDiv.appendChild(p); | |
| transcriptDiv.scrollTop = transcriptDiv.scrollHeight; | |
| } | |
| // Add transcription text to display | |
| function appendTranscript(text) { | |
| // Clean up text | |
| const formattedText = text.trim(); | |
| if (!formattedText) return; | |
| const now = Date.now(); | |
| const timeSinceLastUpdate = now - lastUpdateTime; | |
| lastUpdateTime = now; | |
| // Handle transcript display | |
| if (!currentParagraph) { | |
| // Create new paragraph | |
| currentParagraph = document.createElement('p'); | |
| currentParagraph.classList.add('current'); | |
| transcriptDiv.appendChild(currentParagraph); | |
| currentParagraph.textContent = formattedText; | |
| } else { | |
| // Get current text | |
| const currentText = currentParagraph.textContent; | |
| // Fix spacing issues by normalizing | |
| let cleanedText = formattedText; | |
| // 1. Check for simple word repetition - last word repeated | |
| const words = currentText.split(/\s+/); | |
| const lastWord = words[words.length - 1].replace(/[^\w]/g, '').toLowerCase(); | |
| if (lastWord && lastWord.length > 2) { | |
| // Check if new text starts with the same word | |
| const regex = new RegExp(`^${lastWord}`, 'i'); | |
| if (regex.test(cleanedText.replace(/[^\w]/g, ''))) { | |
| // Remove the first word if it's a duplicate | |
| cleanedText = cleanedText.replace(regex, '').trim(); | |
| } | |
| } | |
| // 2. Add proper spacing | |
| let finalText = currentText; | |
| // Only add space if current text doesn't end with space or punctuation | |
| // and new text doesn't start with punctuation | |
| if (!/[\s.,!?]$/.test(finalText) && !/^[.,!?]/.test(cleanedText) && cleanedText) { | |
| finalText += ' '; | |
| } | |
| // 3. Add the cleaned text | |
| finalText += cleanedText; | |
| // 4. Fix any run-together words by adding spaces after punctuation | |
| finalText = finalText.replace(/([.,!?])([a-zA-Z])/g, '$1 $2'); | |
| // Update the paragraph text | |
| currentParagraph.textContent = finalText; | |
| } | |
| // Create new paragraph on sentence end or pause | |
| if (/[.!?]$/.test(formattedText) || timeSinceLastUpdate > 5000) { | |
| // End current paragraph | |
| if (currentParagraph) { | |
| currentParagraph.classList.remove('current'); | |
| } | |
| // Prepare for next paragraph | |
| currentParagraph = null; | |
| } | |
| // Limit number of displayed paragraphs | |
| const paragraphs = transcriptDiv.getElementsByTagName('p'); | |
| while (paragraphs.length > 10) { // Keep last 10 paragraphs | |
| transcriptDiv.removeChild(paragraphs[0]); | |
| } | |
| // Scroll to show newest text | |
| requestAnimationFrame(() => { | |
| transcriptDiv.scrollTop = transcriptDiv.scrollHeight; | |
| }); | |
| } | |
| // Stop recording and clean up resources | |
| function stop() { | |
| // Stop audio visualization | |
| if (animationFrame) { | |
| cancelAnimationFrame(animationFrame); | |
| animationFrame = null; | |
| } | |
| // Pause audio processing | |
| if (audioContext) { | |
| audioContext.suspend(); | |
| } | |
| // Stop all media tracks | |
| if (peerConnection) { | |
| const senders = peerConnection.getSenders(); | |
| if (senders) { | |
| senders.forEach(sender => { | |
| if (sender.track) { | |
| sender.track.stop(); // Release microphone | |
| } | |
| }); | |
| } | |
| // Close WebRTC connection | |
| peerConnection.close(); | |
| peerConnection = null; | |
| } | |
| // Close transcription connection | |
| if (eventSource) { | |
| eventSource.close(); | |
| eventSource = null; | |
| } | |
| // Reset audio level | |
| audioLevel = 0; | |
| // Update button display | |
| updateButtonState(); | |
| // Ask about clearing transcript | |
| if (window.confirm('Clear transcript?')) { | |
| // Clear all transcript text | |
| transcriptDiv.innerHTML = ''; | |
| currentParagraph = null; | |
| } else { | |
| // Just end current paragraph | |
| if (currentParagraph) { | |
| currentParagraph.classList.remove('current'); | |
| currentParagraph = null; | |
| } | |
| } | |
| // Reset timestamp | |
| lastUpdateTime = Date.now(); | |
| } | |
| // Clean up resources when page is closed | |
| window.addEventListener('beforeunload', () => { | |
| stop(); // Stop recording and release resources | |
| }); | |
| // Handle start/stop button clicks | |
| startButton.addEventListener('click', () => { | |
| if (!isRecording) { | |
| // Start recording if not already recording | |
| setupWebRTC(); | |
| } else { | |
| // Stop recording if currently recording | |
| stop(); | |
| } | |
| }); | |
| // Initialize UI when page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Ensure all UI elements are visible | |
| const elementsToCheck = [ | |
| transcriptDiv, | |
| startButton, | |
| document.getElementById('error-toast') | |
| ]; | |
| // Set appropriate display for each element | |
| elementsToCheck.forEach(el => { | |
| if (el) { | |
| // Set appropriate display style based on element type | |
| el.style.display = el.tagName.toLowerCase() === 'button' ? 'block' : | |
| (el.id === 'transcript' ? 'block' : 'none'); | |
| } | |
| }); | |
| // Apply CSS variables to ensure theme is working | |
| document.body.style.backgroundColor = 'var(--background-dark)'; | |
| document.body.style.color = 'var(--text-light)'; | |
| // Force button colors for consistency | |
| startButton.style.backgroundColor = 'rgba(249, 164, 92, 1.0)'; | |
| startButton.style.color = 'black'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |