Update static/conv.html

static/conv.html

@@ -442,361 +442,471 @@
     <!-- Bootstrap JS Bundle -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // DOM Elements
-        const listenBall = document.getElementById("listenBall");
-        const statusMessage = document.getElementById("statusMessage");
-        const audioPlayer = document.getElementById("audioPlayer");
-        const conversationArea = document.getElementById("conversationArea");
-        const emptyState = document.getElementById("emptyState");
-        const statusBadge = document.getElementById("statusBadge");
-        
-        // Global variables
-        let mediaRecorder;
-        let audioChunks = [];
-        let audioStream;
-        let chatHistory = [];
-        let isListening = false;
-        let isAutoListening = false;
-        let silenceDetectionInterval;
-        let lastAudioLevel = 0;
-        let currentUserGroup = null;
-        let currentAssistantGroup = null;
-        
-        // Functions
-        function updateStatus(message, icon = "bi-info-circle") {
-            statusMessage.textContent = message;
-            statusBadge.querySelector("i").className = `bi ${icon}`;
-        }
-        
-        function addMessageToChat(content, sender) {
-            // Hide empty state if it's visible
-            if (!emptyState.classList.contains("d-none")) {
-                emptyState.classList.add("d-none");
-            }
-            
-            const now = new Date();
-            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-            
-            // Create new message group or use existing one based on sender
-            let messageGroup;
-            
-            if (sender === 'user') {
-                if (!currentUserGroup || (currentAssistantGroup && currentAssistantGroup.classList.contains("assistant"))) {
-                    currentUserGroup = document.createElement("div");
-                    currentUserGroup.className = "message-group user";
-                    
-                    const avatar = document.createElement("div");
-                    avatar.className = "message-avatar";
-                    avatar.innerHTML = "<i class='bi bi-person'></i>";
-                    currentUserGroup.appendChild(avatar);
-                    
-                    conversationArea.appendChild(currentUserGroup);
-                }
-                messageGroup = currentUserGroup;
-                currentAssistantGroup = null;
-            } else {
-                if (!currentAssistantGroup || (currentUserGroup && currentUserGroup.classList.contains("user"))) {
-                    currentAssistantGroup = document.createElement("div");
-                    currentAssistantGroup.className = "message-group assistant";
-                    
-                    const avatar = document.createElement("div");
-                    avatar.className = "message-avatar";
-                    avatar.innerHTML = "<i class='bi bi-robot'></i>";
-                    currentAssistantGroup.appendChild(avatar);
-                    
-                    conversationArea.appendChild(currentAssistantGroup);
-                }
-                messageGroup = currentAssistantGroup;
-                currentUserGroup = null;
-            }
-            
-            // Create message element
-            const messageDiv = document.createElement("div");
-            messageDiv.className = `message ${sender}`;
-            messageDiv.textContent = content;
-            
-            const timestamp = document.createElement("div");
-            timestamp.className = "time-stamp";
-            timestamp.textContent = timeString;
+ // DOM Elements
+const listenBall = document.getElementById("listenBall");
+const statusMessage = document.getElementById("statusMessage");
+const audioPlayer = document.getElementById("audioPlayer");
+const conversationArea = document.getElementById("conversationArea");
+const emptyState = document.getElementById("emptyState");
+const statusBadge = document.getElementById("statusBadge");
+
+// Global variables
+let mediaRecorder;
+let audioChunks = [];
+let audioStream;
+let chatHistory = [];
+let isListening = false;
+let isAutoListening = false;
+let silenceDetectionInterval;
+let activityDetectionInterval;
+let lastAudioLevel = 0;
+let silenceCounter = 0;
+let activityCounter = 0;
+let currentUserGroup = null;
+let currentAssistantGroup = null;
+let audioContext;
+let analyzer;
+let isProcessing = false;
+
+// Constants
+const SILENCE_THRESHOLD = 15;
+const ACTIVITY_THRESHOLD = 20;
+const MIN_ACTIVITY_DURATION = 5; // Minimum counts of activity before recording
+const MAX_SILENCE_DURATION = 15; // Maximum counts of silence before stopping
+const MAX_RECORDING_DURATION = 8000; // Maximum recording duration in ms
+const COOLDOWN_PERIOD = 1000; // Cooldown between recordings
+
+// Functions
+function updateStatus(message, icon = "bi-info-circle") {
+    statusMessage.textContent = message;
+    statusBadge.querySelector("i").className = `bi ${icon}`;
+}
+
+function addMessageToChat(content, sender) {
+    // Hide empty state if it's visible
+    if (!emptyState.classList.contains("d-none")) {
+        emptyState.classList.add("d-none");
+    }
+    
+    const now = new Date();
+    const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    
+    // Create new message group or use existing one based on sender
+    let messageGroup;
+    
+    if (sender === 'user') {
+        if (!currentUserGroup || (currentAssistantGroup && currentAssistantGroup.classList.contains("assistant"))) {
+            currentUserGroup = document.createElement("div");
+            currentUserGroup.className = "message-group user";
             
-            messageGroup.appendChild(messageDiv);
-            messageGroup.appendChild(timestamp);
+            const avatar = document.createElement("div");
+            avatar.className = "message-avatar";
+            avatar.innerHTML = "<i class='bi bi-person'></i>";
+            currentUserGroup.appendChild(avatar);
             
-            // Scroll to bottom
-            conversationArea.scrollTop = conversationArea.scrollHeight;
+            conversationArea.appendChild(currentUserGroup);
+        }
+        messageGroup = currentUserGroup;
+        currentAssistantGroup = null;
+    } else {
+        if (!currentAssistantGroup || (currentUserGroup && currentUserGroup.classList.contains("user"))) {
+            currentAssistantGroup = document.createElement("div");
+            currentAssistantGroup.className = "message-group assistant";
             
-            // Add to chat history
-            chatHistory.push({
-                role: sender === 'user' ? 'user' : 'assistant',
-                content: content
-            });
-        }
-        
-        function startAnalyzingAudioLevels() {
-            if (!audioStream) return;
+            const avatar = document.createElement("div");
+            avatar.className = "message-avatar";
+            avatar.innerHTML = "<i class='bi bi-robot'></i>";
+            currentAssistantGroup.appendChild(avatar);
             
-            const audioContext = new AudioContext();
-            const source = audioContext.createMediaStreamSource(audioStream);
-            const analyzer = audioContext.createAnalyser();
-            analyzer.fftSize = 256;
-            source.connect(analyzer);
+            conversationArea.appendChild(currentAssistantGroup);
+        }
+        messageGroup = currentAssistantGroup;
+        currentUserGroup = null;
+    }
+    
+    // Create message element
+    const messageDiv = document.createElement("div");
+    messageDiv.className = `message ${sender}`;
+    messageDiv.textContent = content;
+    
+    const timestamp = document.createElement("div");
+    timestamp.className = "time-stamp";
+    timestamp.textContent = timeString;
+    
+    messageGroup.appendChild(messageDiv);
+    messageGroup.appendChild(timestamp);
+    
+    // Scroll to bottom
+    conversationArea.scrollTop = conversationArea.scrollHeight;
+    
+    // Add to chat history
+    chatHistory.push({
+        role: sender === 'user' ? 'user' : 'assistant',
+        content: content
+    });
+}
+
+async function setupAudioAnalysis() {
+    if (audioContext) {
+        audioContext.close();
+    }
+    
+    audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(audioStream);
+    analyzer = audioContext.createAnalyser();
+    analyzer.fftSize = 256;
+    source.connect(analyzer);
+    
+    const bufferLength = analyzer.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    
+    return { analyzer, dataArray, bufferLength };
+}
+
+function startContinuousListening() {
+    if (!audioStream) return;
+    
+    // Set up audio analysis
+    setupAudioAnalysis().then(({ analyzer, dataArray, bufferLength }) => {
+        // Start monitoring audio levels
+        clearInterval(activityDetectionInterval);
+        activityDetectionInterval = setInterval(() => {
+            if (isProcessing) return;
             
-            const bufferLength = analyzer.frequencyBinCount;
-            const dataArray = new Uint8Array(bufferLength);
+            analyzer.getByteFrequencyData(dataArray);
             
-            let silenceCounter = 0;
-            const SILENCE_THRESHOLD = 10;
-            const MAX_SILENCE_COUNT = 20; // About 2 seconds of silence
+            // Calculate average audio level
+            let sum = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                sum += dataArray[i];
+            }
+            const avg = sum / bufferLength;
+            lastAudioLevel = avg;
             
-            clearInterval(silenceDetectionInterval);
-            silenceDetectionInterval = setInterval(() => {
-                analyzer.getByteFrequencyData(dataArray);
+            // Detect significant sound
+            if (avg > ACTIVITY_THRESHOLD) {
+                activityCounter++;
+                silenceCounter = 0;
                 
-                // Calculate average audio level
-                let sum = 0;
-                for (let i = 0; i < bufferLength; i++) {
-                    sum += dataArray[i];
+                // If we have enough continuous activity and not already listening, start recording
+                if (activityCounter >= MIN_ACTIVITY_DURATION && !isListening && !isProcessing) {
+                    startRecording();
                 }
-                const avg = sum / bufferLength;
-                lastAudioLevel = avg;
-                
-                // Detect significant sound and silence
-                if (avg > SILENCE_THRESHOLD) {
-                    silenceCounter = 0;
-                    if (!isListening && isAutoListening) {
-                        startListening();
-                    }
-                } else {
-                    silenceCounter++;
-                    if (silenceCounter >= MAX_SILENCE_COUNT && isListening) {
-                        stopListening();
-                    }
-                }
-            }, 100);
+            } else {
+                activityCounter = 0;
+            }
+        }, 100);
+    });
+}
+
+function monitorSilenceDuringRecording() {
+    if (!audioStream || !isListening) return;
+    
+    clearInterval(silenceDetectionInterval);
+    silenceDetectionInterval = setInterval(() => {
+        if (!isListening) {
+            clearInterval(silenceDetectionInterval);
+            return;
+        }
+        
+        analyzer.getByteFrequencyData(new Uint8Array(analyzer.frequencyBinCount));
+        
+        // Calculate average audio level
+        let sum = 0;
+        for (let i = 0; i < analyzer.frequencyBinCount; i++) {
+            sum += dataArray[i];
+        }
+        const avg = sum / analyzer.frequencyBinCount;
+        
+        // If silent, increment counter
+        if (avg < SILENCE_THRESHOLD) {
+            silenceCounter++;
+            if (silenceCounter >= MAX_SILENCE_DURATION) {
+                stopRecording();
+            }
+        } else {
+            silenceCounter = 0;
         }
+    }, 100);
+}
+
+async function startRecording() {
+    if (isListening || isProcessing) return;
+    
+    try {
+        // Reset counters
+        silenceCounter = 0;
+        
+        // Start recording
+        mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
+        audioChunks = [];
         
-        async function startListening() {
-            if (isListening) return;
+        mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+        
+        mediaRecorder.onstop = async () => {
+            if (audioChunks.length === 0) {
+                updateState("idle");
+                isProcessing = false;
+                return;
+            }
+            
+            isProcessing = true;
+            updateState("processing");
             
             try {
-                // Stop any existing stream tracks
-                if (audioStream) {
-                    audioStream.getTracks().forEach(track => track.stop());
-                }
+                const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
+                const wavBlob = await convertWebMToWav(audioBlob);
                 
-                audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
+                // Create form data with the audio and chat history
+                const formData = new FormData();
+                formData.append("file", wavBlob, "recording.wav");
+                formData.append("chat_history", JSON.stringify(chatHistory));
                 
-                mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+                // Send to the continuous-chat endpoint using root-relative path
+                const response = await fetch("/continuous-chat/", {
+                    method: "POST",
+                    body: formData
+                });
                 
-                mediaRecorder.onstop = async () => {
-                    if (audioChunks.length === 0) {
-                        updateState("idle");
-                        return;
-                    }
+                if (response.ok) {
+                    const userMessage = response.headers.get("X-User-Message") || "No user message";
+                    const llmResponse = response.headers.get("X-LLM-Response") || "No response";
                     
-                    updateState("processing");
+                    // Add messages to chat
+                    addMessageToChat(userMessage, 'user');
+                    addMessageToChat(llmResponse, 'assistant');
                     
-                    try {
-                        const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
-                        const wavBlob = await convertWebMToWav(audioBlob);
-                        
-                        // Create form data with the audio and chat history
-                        const formData = new FormData();
-                        formData.append("file", wavBlob, "recording.wav");
-                        formData.append("chat_history", JSON.stringify(chatHistory));
-                        
-                        // Send to the continuous-chat endpoint using root-relative path
-                        const response = await fetch("/continuous-chat/", {
-                            method: "POST",
-                            body: formData
-                        });
-                        
-                        if (response.ok) {
-                            const userMessage = response.headers.get("X-User-Message") || "No user message";
-                            const llmResponse = response.headers.get("X-LLM-Response") || "No response";
-                            
-                            // Add messages to chat
-                            addMessageToChat(userMessage, 'user');
-                            addMessageToChat(llmResponse, 'assistant');
-                            
-                            // Get audio response and play it
-                            const audioData = await response.blob();
-                            audioPlayer.src = URL.createObjectURL(audioData);
-                            audioPlayer.play();
-                            
-                            updateState("idle");
-                            updateStatus("Ready for next sound input", "bi-broadcast");
-                            
-                            // If in auto mode, start listening again
-                            if (isAutoListening) {
-                                setTimeout(() => {
-                                    startAnalyzingAudioLevels();
-                                }, 1000);
-                            }
-                        } else {
-                            updateState("idle");
-                            updateStatus("Error processing audio", "bi-exclamation-triangle");
-                        }
-                    } catch (error) {
-                        console.error("Error:", error);
-                        updateState("idle");
-                        updateStatus("Error processing audio", "bi-exclamation-triangle");
-                    }
-                };
-                
-                audioChunks = [];
-                mediaRecorder.start();
-                
-                updateState("listening");
-                updateStatus("Listening...", "bi-ear");
-                
-                // Set max recording duration (8 seconds)
-                setTimeout(() => {
-                    if (mediaRecorder && mediaRecorder.state === "recording") {
-                        stopListening();
-                    }
-                }, 8000);
-                
-                isListening = true;
+                    // Get audio response and play it
+                    const audioData = await response.blob();
+                    audioPlayer.src = URL.createObjectURL(audioData);
+                    audioPlayer.play();
+                    
+                    updateState("idle");
+                    updateStatus("Listening for sound", "bi-broadcast");
+                } else {
+                    updateState("idle");
+                    updateStatus("Error processing audio", "bi-exclamation-triangle");
+                }
             } catch (error) {
-                console.error("Error accessing microphone:", error);
-                updateStatus("Microphone access denied", "bi-mic-mute");
+                console.error("Error:", error);
                 updateState("idle");
+                updateStatus("Error processing audio", "bi-exclamation-triangle");
             }
-        }
-        
-        function stopListening() {
-            if (!isListening) return;
-            
-            if (mediaRecorder && mediaRecorder.state === "recording") {
-                mediaRecorder.stop();
-            }
-            
-            isListening = false;
-        }
-        
-        function updateState(state) {
-            listenBall.classList.remove("listening", "processing");
-            
-            if (state === "listening") {
-                listenBall.classList.add("listening");
-                listenBall.innerHTML = `
-                    <div class="sound-wave"></div>
-                    <div class="sound-wave" style="animation-delay: 0.5s"></div>
-                    <div class="sound-wave" style="animation-delay: 1s"></div>
-                    <i class="bi bi-soundwave"></i>
-                `;
-            } else if (state === "processing") {
-                listenBall.classList.add("processing");
-                listenBall.innerHTML = `<i class="bi bi-arrow-repeat"></i>`;
-            } else {
-                listenBall.innerHTML = `<i class="bi bi-soundwave"></i>`;
-            }
-        }
-        
-        function toggleContinuousListening() {
-            isAutoListening = !isAutoListening;
             
-            if (isAutoListening) {
-                updateStatus("Auto-listening mode active", "bi-broadcast");
-                startAnalyzingAudioLevels();
-            } else {
-                updateStatus("Tap to listen", "bi-info-circle");
-                clearInterval(silenceDetectionInterval);
-            }
-        }
-        
-        async function convertWebMToWav(blob) {
-            return new Promise((resolve, reject) => {
-                try {
-                    const reader = new FileReader();
-                    reader.onload = function () {
-                        const audioContext = new AudioContext();
-                        audioContext.decodeAudioData(reader.result)
-                            .then(buffer => {
-                                const wavBuffer = audioBufferToWav(buffer);
-                                resolve(new Blob([wavBuffer], { type: "audio/wav" }));
-                            })
-                            .catch(error => {
-                                console.error("Error decoding audio data:", error);
-                                reject(error);
-                            });
-                    };
-                    reader.readAsArrayBuffer(blob);
-                } catch (error) {
-                    console.error("Error in convertWebMToWav:", error);
-                    reject(error);
-                }
-            });
-        }
-        
-        function audioBufferToWav(buffer) {
-            let numOfChan = buffer.numberOfChannels,
-                length = buffer.length * numOfChan * 2 + 44,
-                bufferArray = new ArrayBuffer(length),
-                view = new DataView(bufferArray),
-                channels = [],
-                sampleRate = buffer.sampleRate,
-                offset = 0,
-                pos = 0;
-            setUint32(0x46464952); // "RIFF"
-            setUint32(length - 8);
-            setUint32(0x45564157); // "WAVE"
-            setUint32(0x20746d66); // "fmt " chunk
-            setUint32(16); // length = 16
-            setUint16(1); // PCM (uncompressed)
-            setUint16(numOfChan);
-            setUint32(sampleRate);
-            setUint32(sampleRate * 2 * numOfChan);
-            setUint16(numOfChan * 2);
-            setUint16(16); // bits per sample
-            setUint32(0x61746164); // "data" chunk
-            setUint32(length - pos - 4);
-            for (let i = 0; i < buffer.numberOfChannels; i++)
-                channels.push(buffer.getChannelData(i));
-            while (pos < length) {
-                for (let i = 0; i < numOfChan; i++) {
-                    let sample = Math.max(-1, Math.min(1, channels[i][offset]));
-                    sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
-                    setUint16(sample);
+            // Set a cooldown before allowing the next recording
+            setTimeout(() => {
+                isProcessing = false;
+                if (isAutoListening) {
+                    updateStatus("Listening for sound", "bi-broadcast");
                 }
-                offset++;
-            }
-            function setUint16(data) {
-                view.setUint16(pos, data, true);
-                pos += 2;
-            }
-            function setUint32(data) {
-                view.setUint32(pos, data, true);
-                pos += 4;
-            }
-            return bufferArray;
-        }
+            }, COOLDOWN_PERIOD);
+        };
         
-        // Event Listeners
-        listenBall.addEventListener("click", () => {
-            if (isListening) {
-                stopListening();
-            } else if (isAutoListening) {
-                toggleContinuousListening();
-            } else {
-                startListening();
-            }
-        });
+        mediaRecorder.start();
+        isListening = true;
+        updateState("listening");
+        updateStatus("Recording...", "bi-ear");
         
-        listenBall.addEventListener("dblclick", toggleContinuousListening);
+        // Monitor for silence during recording
+        monitorSilenceDuringRecording();
         
-        audioPlayer.addEventListener("ended", () => {
-            if (isAutoListening) {
-                setTimeout(() => {
-                    startAnalyzingAudioLevels();
-                }, 500);
+        // Set max recording duration
+        setTimeout(() => {
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+                stopRecording();
             }
-        });
-        
-        // Initialize
+        }, MAX_RECORDING_DURATION);
+        
+    } catch (error) {
+        console.error("Error starting recording:", error);
+        updateState("idle");
+        updateStatus("Recording error", "bi-exclamation-triangle");
+        isListening = false;
+        isProcessing = false;
+    }
+}
+
+function stopRecording() {
+    if (!isListening) return;
+    
+    clearInterval(silenceDetectionInterval);
+    
+    if (mediaRecorder && mediaRecorder.state === "recording") {
+        mediaRecorder.stop();
+    }
+    
+    isListening = false;
+    updateStatus("Processing...", "bi-arrow-repeat");
+}
+
+function updateState(state) {
+    listenBall.classList.remove("listening", "processing");
+    
+    if (state === "listening") {
+        listenBall.classList.add("listening");
+        listenBall.innerHTML = `
+            <div class="sound-wave"></div>
+            <div class="sound-wave" style="animation-delay: 0.5s"></div>
+            <div class="sound-wave" style="animation-delay: 1s"></div>
+            <i class="bi bi-soundwave"></i>
+        `;
+    } else if (state === "processing") {
+        listenBall.classList.add("processing");
+        listenBall.innerHTML = `<i class="bi bi-arrow-repeat"></i>`;
+    } else {
+        listenBall.innerHTML = `<i class="bi bi-soundwave"></i>`;
+    }
+}
+
+async function toggleContinuousListening() {
+    isAutoListening = !isAutoListening;
+    
+    if (isAutoListening) {
+        try {
+            // Request microphone access if we don't have it
+            if (!audioStream) {
+                audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            }
+            
+            updateStatus("Auto-listening active", "bi-broadcast");
+            startContinuousListening();
+        } catch (error) {
+            console.error("Error accessing microphone:", error);
+            updateStatus("Microphone access denied", "bi-mic-mute");
+            isAutoListening = false;
+        }
+    } else {
+        // Stop continuous listening
+        clearInterval(activityDetectionInterval);
+        clearInterval(silenceDetectionInterval);
         updateStatus("Tap to listen", "bi-info-circle");
+        
+        // If currently recording, stop it
+        if (isListening) {
+            stopRecording();
+        }
+    }
+}
+
+async function manualListening() {
+    if (isListening || isProcessing) return;
+    
+    try {
+        // Request microphone access if we don't have it
+        if (!audioStream) {
+            audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            await setupAudioAnalysis();
+        }
+        
+        startRecording();
+    } catch (error) {
+        console.error("Error accessing microphone:", error);
+        updateStatus("Microphone access denied", "bi-mic-mute");
+    }
+}
+
+async function convertWebMToWav(blob) {
+    return new Promise((resolve, reject) => {
+        try {
+            const reader = new FileReader();
+            reader.onload = function () {
+                const audioContext = new AudioContext();
+                audioContext.decodeAudioData(reader.result)
+                    .then(buffer => {
+                        const wavBuffer = audioBufferToWav(buffer);
+                        resolve(new Blob([wavBuffer], { type: "audio/wav" }));
+                    })
+                    .catch(error => {
+                        console.error("Error decoding audio data:", error);
+                        reject(error);
+                    });
+            };
+            reader.readAsArrayBuffer(blob);
+        } catch (error) {
+            console.error("Error in convertWebMToWav:", error);
+            reject(error);
+        }
+    });
+}
+
+function audioBufferToWav(buffer) {
+    let numOfChan = buffer.numberOfChannels,
+        length = buffer.length * numOfChan * 2 + 44,
+        bufferArray = new ArrayBuffer(length),
+        view = new DataView(bufferArray),
+        channels = [],
+        sampleRate = buffer.sampleRate,
+        offset = 0,
+        pos = 0;
+    setUint32(0x46464952); // "RIFF"
+    setUint32(length - 8);
+    setUint32(0x45564157); // "WAVE"
+    setUint32(0x20746d66); // "fmt " chunk
+    setUint32(16); // length = 16
+    setUint16(1); // PCM (uncompressed)
+    setUint16(numOfChan);
+    setUint32(sampleRate);
+    setUint32(sampleRate * 2 * numOfChan);
+    setUint16(numOfChan * 2);
+    setUint16(16); // bits per sample
+    setUint32(0x61746164); // "data" chunk
+    setUint32(length - pos - 4);
+    for (let i = 0; i < buffer.numberOfChannels; i++)
+        channels.push(buffer.getChannelData(i));
+    while (pos < length) {
+        for (let i = 0; i < numOfChan; i++) {
+            let sample = Math.max(-1, Math.min(1, channels[i][offset]));
+            sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+            setUint16(sample);
+        }
+        offset++;
+    }
+    function setUint16(data) {
+        view.setUint16(pos, data, true);
+        pos += 2;
+    }
+    function setUint32(data) {
+        view.setUint32(pos, data, true);
+        pos += 4;
+    }
+    return bufferArray;
+}
+
+// Event Listeners
+listenBall.addEventListener("click", () => {
+    if (isAutoListening) {
+        toggleContinuousListening(); // Turn off auto mode
+    } else {
+        if (isListening) {
+            stopRecording(); // Stop manual recording
+        } else {
+            manualListening(); // Start manual recording
+        }
+    }
+});
+
+listenBall.addEventListener("dblclick", toggleContinuousListening);
+
+audioPlayer.addEventListener("ended", () => {
+    if (isAutoListening && !isProcessing) {
+        updateStatus("Listening for sound", "bi-broadcast");
+    }
+});
+
+// Initialize
+updateStatus("Tap to listen, double-tap for auto mode", "bi-info-circle");
+
+// Cleanup function for page unload
+window.addEventListener('beforeunload', () => {
+    if (audioStream) {
+        audioStream.getTracks().forEach(track => track.stop());
+    }
+    if (audioContext) {
+        audioContext.close();
+    }
+    clearInterval(silenceDetectionInterval);
+    clearInterval(activityDetectionInterval);
+});
     </script>
 </body>
 </html>