Update script1.js

script1.js

@@ -1,12 +1,12 @@
 // Constants and Configuration
 const USER_SPEECH_INTERRUPT_DELAY = 500;
-const TEXT_TO_SPEECH_API_ENDPOINT = "https://api.streamelements.com/kappa/v2/speech"; 
+const TEXT_TO_SPEECH_API_ENDPOINT = "https://api.streamelements.com/kappa/v2/speech";
 const CHUNK_SIZE = 300;
-const MAX_PREFETCH_REQUESTS = 10; 
+const MAX_PREFETCH_REQUESTS = 10;
 const PREFETCH_CACHE_EXPIRATION = 60000; // 1 minute
 const AUDIO_CACHE_EXPIRATION = 3600000; // 1 hour
-const WEBCAM_INTERVAL = 5000; 
-const MAX_HISTORY_LENGTH = 6; 
+const WEBCAM_INTERVAL = 5000;
+const MAX_HISTORY_LENGTH = 6;
 
 // DOM Elements
 const startStopButton = document.getElementById('startStopButton');
@@ -50,7 +50,7 @@ const audioCache = new Map();
 
 // Image Captioning State
 let isCaptioningEnabled = false;
-let lastCaption = ""; 
+let lastCaption = "";
 
 // Webcam Integration
 import { client, handle_file } from 'https://cdn.jsdelivr.net/npm/@gradio/client/+esm';
@@ -155,8 +155,12 @@ const interruptAudioPlayback = (reason = 'unknown') => {
         requestAbortController = null;
     }
 
-    prefetchCache.clear();
-    prefetchQueue.length = 0;
+    // Clear prefetch cache and queue only if the interruption is due to user speech
+    if (reason === 'user is speaking' || reason === 'interim') {
+        prefetchCache.clear();
+        prefetchQueue.length = 0; 
+    }
+
     updateActivityIndicators();
 };
 
@@ -165,12 +169,16 @@ const interruptAudioPlayback = (reason = 'unknown') => {
 
 // Prefetch and cache the first TTS audio chunk
 const prefetchFirstAudioChunk = (query, voice) => {
-    const normalizedQuery = normalizeQueryText(query);
+    let combinedQuery = `{USER: "${query}"}`;
+    if (lastCaption !== "") {
+        combinedQuery += `, ${lastCaption} , {USER: "${query}"}`;
+    }
+    const normalizedQuery = normalizeQueryText(combinedQuery); // Normalize combined query
     const cacheKey = generateCacheKey(normalizedQuery, voice, conversationHistory, modelSelectionDropdown.value);
 
     if (pendingPrefetchRequests.has(cacheKey) || prefetchCache.has(cacheKey)) return;
 
-    prefetchQueue.push({ query: query.trim(), voice, cacheKey });
+    prefetchQueue.push({ query: combinedQuery.trim(), voice, cacheKey }); // Use combined query
     processPrefetchQueue();
 };
 
@@ -197,7 +205,11 @@ const processPrefetchQueue = async () => {
 
 // Cancel pending prefetch requests
 const cancelPrefetchRequests = (query) => {
-    const normalizedQuery = normalizeQueryText(query);
+    let combinedQuery = `{USER: "${query}"}`;
+    if (lastCaption !== "") {
+        combinedQuery += `, ${lastCaption} , {USER: "${query}"}`;
+    }
+    const normalizedQuery = normalizeQueryText(combinedQuery); // Normalize combined query
 
     for (const [cacheKey, abortController] of pendingPrefetchRequests) {
         if (cacheKey.startsWith(normalizedQuery)) {
@@ -224,7 +236,7 @@ async function sendQueryToAI(query) {
     try {
         let combinedQuery = `{USER: "${query}"}`;
         if (lastCaption !== "") {
-            combinedQuery += `, ${lastCaption} , {USER: "${query}"}`; 
+            combinedQuery += `, ${lastCaption} , {USER: "${query}"}`;
         }
 
         await streamAndHandleAudioResponse(combinedQuery, voiceSelectionDropdown.value, requestAbortController.signal);
@@ -243,8 +255,8 @@ const processSpeechTranscript = (transcript) => {
     const trimmedTranscript = transcript.trimStart();
     if (trimmedTranscript !== '' && !isRequestInProgress) {
         activeQuery = trimmedTranscript;
-        addToConversationHistory('user', activeQuery); 
-        sendQueryToAI(activeQuery); 
+        addToConversationHistory('user', activeQuery);
+        sendQueryToAI(activeQuery);
     }
 };
 
@@ -368,7 +380,7 @@ const handleStreamingResponse = async (responseStream, voice, abortSignal) => {
                     if (textContent) {
                         if (!firstResponseTextTimestamp) firstResponseTextTimestamp = Date.now();
 
-                        fullResponseText += textContent + " "; 
+                        fullResponseText += textContent + " ";
                         fullResponseText2 += textContent + " ";
                         textChunk += textContent + " ";
                         transcriptDiv.textContent = fullResponseText2;
@@ -380,13 +392,13 @@ const handleStreamingResponse = async (responseStream, voice, abortSignal) => {
                                 audioPlaybackQueue.push({ url: audioUrl });
                                 if (!currentAudio) playNextAudio();
                             }
-                            textChunk = ""; 
+                            textChunk = "";
                         }
                     }
                 }
             }
 
-            buffer = lines[lines.length - 1]; 
+            buffer = lines[lines.length - 1];
         }
     } catch (error) {
         console.error("Error in handleStreamingResponse:", error);
@@ -402,8 +414,8 @@ const handleStreamingResponse = async (responseStream, voice, abortSignal) => {
         }
 
         addToConversationHistory('assistant', fullResponseText2);
-        fullResponseText = ""; 
-        fullResponseText2 = ""; 
+        fullResponseText = "";
+        fullResponseText2 = "";
     }
 };
 
@@ -502,13 +514,13 @@ if ('webkitSpeechRecognition' in window) {
             isSpeechRecognitionActive = false;
             startStopButton.innerHTML = '<svg id="microphoneIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg> Start Listening';
             clearInterval(webcamInterval);
-            video.srcObject = null; 
+            video.srcObject = null;
             lastCaption = "";
         } else {
             speechRecognizer.start();
             isSpeechRecognitionActive = true;
             startStopButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 9h6v6h-6z"></path><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg> Stop Listening';
-            isCaptioningEnabled = true; 
+            isCaptioningEnabled = true;
             startWebcam();
         }
     });
@@ -525,7 +537,7 @@ async function startWebcam() {
     try {
         const stream = await navigator.mediaDevices.getUserMedia({ video: true });
         video.srcObject = stream;
-        webcamInterval = setInterval(captureAndProcessImage, WEBCAM_INTERVAL); 
+        webcamInterval = setInterval(captureAndProcessImage, WEBCAM_INTERVAL);
     } catch (error) {
         console.error("Error accessing webcam: ", error);
     }
@@ -551,7 +563,7 @@ async function processWithGradio(imageBlob) {
         const result = await app.predict("/process_image", [handledFile, "More Detailed Caption"]);
 
         const dataString = result.data[0];
-        lastCaption = dataString || lastCaption; 
+        lastCaption = dataString || lastCaption;
     } catch (error) {
         console.error("Error processing with Gradio:", error);
     }