Spaces:

sofdog
/

live-transcription-english

Running on L4

App Files Files Community

Sofia Casadei commited on 19 days ago

Commit

e0c1694

1 Parent(s): 2e32fcb

fix: connection, add: language via env var

Browse files

Files changed (5) hide show

index-screen.html +0 -632
main.py +34 -23
static/client.js +479 -0
static/index-screen.html +191 -0
index.html → static/index.html +3 -227

index-screen.html DELETED Viewed

@@ -1,632 +0,0 @@
-<!DOCTYPE html>
-<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 !important;  /* 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>

main.py CHANGED Viewed

@@ -1,6 +1,5 @@
 import os
 import logging
-import uvicorn
 import json
 import gradio as gr
@@ -8,7 +7,7 @@ import numpy as np
 from dotenv import load_dotenv
 from fastapi import FastAPI
 from fastapi.responses import StreamingResponse, HTMLResponse
 from fastrtc import (
     AdditionalOutputs,
     ReplyOnPause,
@@ -25,39 +24,46 @@ from transformers import (
 from transformers.utils import is_flash_attn_2_available
 from utils.logger_config import setup_logging
-from utils.device import get_device, get_torch_and_np_dtypes, cuda_version_check
 from utils.turn_server import get_rtc_credentials
 load_dotenv()
-setup_logging(level=logging.DEBUG)
 logger = logging.getLogger(__name__)
-APP_MODE = os.getenv("APP_MODE", "deployed")
 MODEL_ID = os.getenv("MODEL_ID", "openai/whisper-large-v3-turbo")
-UI_FILE = os.getenv("UI_FILE", "index.html")
 device = get_device(force_cpu=False)
 torch_dtype, np_dtype = get_torch_and_np_dtypes(device, use_bfloat16=False)
 logger.info(f"Using device: {device}, torch_dtype: {torch_dtype}, np_dtype: {np_dtype}")
-cuda_version, device_name = cuda_version_check()
-logger.info(f"CUDA Version: {cuda_version}, GPU Device: {device_name}")
 attention = "flash_attention_2" if is_flash_attn_2_available() else "sdpa"
 logger.info(f"Using attention: {attention}")
 logger.info(f"Loading Whisper model: {MODEL_ID}")
-model = AutoModelForSpeechSeq2Seq.from_pretrained(
-    MODEL_ID,
-    torch_dtype=torch_dtype,
-    low_cpu_mem_usage=True,
-    use_safetensors=True,
-    attn_implementation=attention
-)
-model.to(device)
 processor = AutoProcessor.from_pretrained(MODEL_ID)
@@ -83,11 +89,11 @@ async def transcribe(audio: tuple[int, np.ndarray]):
     outputs = transcribe_pipeline(
         audio_to_bytes(audio),
-        chunk_length_s=3,
         batch_size=1,
         generate_kwargs={
             'task': 'transcribe',
-            'language': 'english',
         },
         #return_timestamps="word"
     )
@@ -102,7 +108,7 @@ stream = Stream(
             # Duration in seconds of audio chunks (default 0.6)
             audio_chunk_duration=0.6,
             # If the chunk has more than started_talking_threshold seconds of speech, the user started talking (default 0.2)
-            started_talking_threshold=0.2,
             # If, after the user started speaking, there is a chunk with less than speech_threshold seconds of speech, the user stopped speaking. (default 0.1)
             speech_threshold=0.1,
         ),
@@ -112,13 +118,13 @@ stream = Stream(
             # Final speech chunks shorter min_speech_duration_ms are thrown out (default 250)
             min_speech_duration_ms=250,
             # Max duration of speech chunks, longer will be split (default float('inf'))
-            max_speech_duration_s=3,
             # Wait for ms at the end of each speech chunk before separating it (default 2000)
-            min_silence_duration_ms=2000,
             # Chunk size for VAD model. Can be 512, 1024, 1536 for 16k s.r. (default 1024)
             window_size_samples=1024,
             # Final speech chunks are padded by speech_pad_ms each side (default 400)
-            speech_pad_ms=400,
         ),
     ),
     # send-receive: bidirectional streaming (default)
@@ -135,11 +141,16 @@ stream = Stream(
 )
 app = FastAPI()
 stream.mount(app)
 @app.get("/")
 async def index():
-    html_content = open(UI_FILE).read()
     rtc_config = get_rtc_credentials(provider="hf") if APP_MODE == "deployed" else None
     return HTMLResponse(content=html_content.replace("__RTC_CONFIGURATION__", json.dumps(rtc_config)))

 import os
 import logging
 import json
 import gradio as gr
 from dotenv import load_dotenv
 from fastapi import FastAPI
 from fastapi.responses import StreamingResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from fastrtc import (
     AdditionalOutputs,
     ReplyOnPause,
 from transformers.utils import is_flash_attn_2_available
 from utils.logger_config import setup_logging
+from utils.device import get_device, get_torch_and_np_dtypes
 from utils.turn_server import get_rtc_credentials
 load_dotenv()
+setup_logging()
 logger = logging.getLogger(__name__)
+UI_MODE = os.getenv("UI_MODE", "fastapi").lower() # gradio | fastapi
+UI_TYPE = os.getenv("UI_TYPE", "base").lower() # base | screen
+APP_MODE = os.getenv("APP_MODE", "local").lower() # local | deployed
 MODEL_ID = os.getenv("MODEL_ID", "openai/whisper-large-v3-turbo")
+LANGUAGE = os.getenv("LANGUAGE", "english").lower()
 device = get_device(force_cpu=False)
 torch_dtype, np_dtype = get_torch_and_np_dtypes(device, use_bfloat16=False)
 logger.info(f"Using device: {device}, torch_dtype: {torch_dtype}, np_dtype: {np_dtype}")
 attention = "flash_attention_2" if is_flash_attn_2_available() else "sdpa"
 logger.info(f"Using attention: {attention}")
 logger.info(f"Loading Whisper model: {MODEL_ID}")
+logger.info(f"Using language: {LANGUAGE}")
+try:
+    model = AutoModelForSpeechSeq2Seq.from_pretrained(
+        MODEL_ID,
+        torch_dtype=torch_dtype,
+        low_cpu_mem_usage=True,
+        use_safetensors=True,
+        attn_implementation=attention
+    )
+    model.to(device)
+except Exception as e:
+    logger.error(f"Error loading ASR model: {e}")
+    logger.error(f"Are you providing a valid model ID? {MODEL_ID}")
+    raise
 processor = AutoProcessor.from_pretrained(MODEL_ID)
     outputs = transcribe_pipeline(
         audio_to_bytes(audio),
+        chunk_length_s=6,
         batch_size=1,
         generate_kwargs={
             'task': 'transcribe',
+            'language': LANGUAGE,
         },
         #return_timestamps="word"
     )
             # Duration in seconds of audio chunks (default 0.6)
             audio_chunk_duration=0.6,
             # If the chunk has more than started_talking_threshold seconds of speech, the user started talking (default 0.2)
+            started_talking_threshold=0.1,
             # If, after the user started speaking, there is a chunk with less than speech_threshold seconds of speech, the user stopped speaking. (default 0.1)
             speech_threshold=0.1,
         ),
             # Final speech chunks shorter min_speech_duration_ms are thrown out (default 250)
             min_speech_duration_ms=250,
             # Max duration of speech chunks, longer will be split (default float('inf'))
+            max_speech_duration_s=6,
             # Wait for ms at the end of each speech chunk before separating it (default 2000)
+            min_silence_duration_ms=100,
             # Chunk size for VAD model. Can be 512, 1024, 1536 for 16k s.r. (default 1024)
             window_size_samples=1024,
             # Final speech chunks are padded by speech_pad_ms each side (default 400)
+            speech_pad_ms=200,
         ),
     ),
     # send-receive: bidirectional streaming (default)
 )
 app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
 stream.mount(app)
 @app.get("/")
 async def index():
+    if UI_TYPE == "base":
+        html_content = open("static/index.html").read()
+    else:
+        html_content = open("static/index-screen.html").read()
     rtc_config = get_rtc_credentials(provider="hf") if APP_MODE == "deployed" else None
     return HTMLResponse(content=html_content.replace("__RTC_CONFIGURATION__", json.dumps(rtc_config)))

static/client.js ADDED Viewed

	@@ -0,0 +1,479 @@

+// Wait for the DOM to be fully loaded before running any code
+document.addEventListener('DOMContentLoaded', function() {
+    // 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
+    // Log debug info at start
+    console.log('DOM loaded. startButton:', startButton, 'transcriptDiv:', transcriptDiv);
+    // 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) {
+        console.error('Error:', 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
+        }
+        console.log('Button state updated. isRecording:', isRecording);
+    }
+    // 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() {
+        console.log('Setting up WebRTC connection...');
+        try {
+            // Get WebRTC configuration from global variable
+            const config = window.__RTC_CONFIGURATION__ || null;
+            console.log('WebRTC configuration:', config);
+            // Create new peer connection
+            peerConnection = new RTCPeerConnection(config);
+            console.log('Created peer connection:', peerConnection);
+            // 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);
+            // Update button to show connecting state
+            updateButtonState();
+            // Request access to user's microphone
+            console.log('Requesting microphone access...');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                audio: true // Only request audio access
+            });
+            console.log('Microphone access granted:', stream);
+            // Set up audio visualization
+            setupAudioVisualization(stream);
+            // Add audio tracks to WebRTC connection
+            stream.getTracks().forEach(track => {
+                peerConnection.addTrack(track, stream);
+            });
+            console.log('Added audio tracks to connection');
+            // 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';
+                    console.log('Connection established successfully');
+                // 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
+            console.log('Created data channel');
+            // Create connection offer
+            console.log('Creating connection offer...');
+            const offer = await peerConnection.createOffer();
+            // Set local description (our end of connection)
+            await peerConnection.setLocalDescription(offer);
+            console.log('Local description set');
+            // Wait for ICE gathering to complete (finding connection methods)
+            console.log('Waiting for ICE gathering...');
+            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);
+                }
+            });
+            console.log('ICE gathering complete');
+            // Generate random ID for this connection
+            webrtc_id = Math.random().toString(36).substring(7);
+            console.log('Generated webrtc_id:', webrtc_id);
+            // Send connection offer to server
+            console.log('Sending 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
+                })
+            });
+            console.log('Server responded to offer');
+            // Parse server response
+            const serverResponse = await response.json();
+            console.log('Server response:', serverResponse);
+            // 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
+            console.log('Setting remote description...');
+            await peerConnection.setRemoteDescription(serverResponse);
+            console.log('Remote description set');
+            // Create event source for receiving transcription results
+            console.log('Creating event source for transcription...');
+            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);
+            });
+            console.log('WebRTC setup complete, waiting for connection...');
+        } catch (err) {
+            // Handle any setup errors
+            console.error('Error setting up WebRTC:', err);
+            showError('Failed to establish connection: ' + err.message);
+            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() {
+        console.log('Stopping recording...');
+        // 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();
+        console.log('Recording stopped');
+    }
+    // Clean up resources when page is closed
+    window.addEventListener('beforeunload', () => {
+        stop();  // Stop recording and release resources
+    });
+    // Handle start/stop button clicks
+    startButton.addEventListener('click', () => {
+        console.log('Start button clicked. isRecording:', isRecording);
+        if (!isRecording) {
+            // Start recording if not already recording
+            setupWebRTC();
+        } else {
+            // Stop recording if currently recording
+            stop();
+        }
+    });
+    // Initialize UI when page loads
+    console.log('Initializing UI...');
+    // 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';
+    console.log('UI initialization complete');
+});

static/index-screen.html ADDED Viewed

	@@ -0,0 +1,191 @@

+<!DOCTYPE html>
+<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>
+    <script>
+        window.__RTC_CONFIGURATION__ = __RTC_CONFIGURATION__;
+    </script>
+    <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 !important;  /* 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 src="/static/client.js"></script>
+</body>
+</html>

index.html → static/index.html RENAMED Viewed

@@ -188,8 +188,8 @@
     <!-- Add toast element after body opening tag -->
     <div id="error-toast" class="toast"></div>
     <div class="hero">
-        <h1>PyCon Italia 2025 Real-time Transcription</h1>
-        <p>Powered by FastRTC and Local Whisper</p>
     </div>
     <div class="container">
@@ -199,231 +199,7 @@
         </div>
     </div>
-    <script>
-        let peerConnection;
-        let webrtc_id;
-        let audioContext, analyser, audioSource;
-        let audioLevel = 0;
-        let animationFrame;
-        let eventSource;
-        const startButton = document.getElementById('start-button');
-        const transcriptDiv = document.getElementById('transcript');
-        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);
-        }
-        function handleMessage(event) {
-            // Handle any WebRTC data channel messages if needed
-            const eventJson = JSON.parse(event.data);
-            if (eventJson.type === "error") {
-                showError(eventJson.message);
-            }
-            console.log('Received message:', event.data);
-        }
-        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 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();
-                });
-                // 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);
-                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);
-                    }
-                });
-                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
-                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);
-            }
-            if (audioContext) {
-                audioContext.close();
-                audioContext = null;
-                analyser = null;
-                audioSource = null;
-            }
-            if (peerConnection) {
-                if (peerConnection.getTransceivers) {
-                    peerConnection.getTransceivers().forEach(transceiver => {
-                        if (transceiver.stop) {
-                            transceiver.stop();
-                        }
-                    });
-                }
-                if (peerConnection.getSenders) {
-                    peerConnection.getSenders().forEach(sender => {
-                        if (sender.track && sender.track.stop) sender.track.stop();
-                    });
-                }
-                peerConnection.close();
-                peerConnection = null;
-            }
-            // Close EventSource connection
-            if (eventSource) {
-                eventSource.close();
-                eventSource = null;
-            }
-            audioLevel = 0;
-            updateButtonState();
-        }
-        startButton.addEventListener('click', () => {
-            if (startButton.textContent === 'Start Recording') {
-                setupWebRTC();
-            } else {
-                stop();
-            }
-        });
-    </script>
 </body>
 </html>

     <!-- 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 FastRTC and Local Whisper 🤗</p>
     </div>
     <div class="container">
         </div>
     </div>
+    <script src="/static/client.js"></script>
 </body>
 </html>