Update script2.js

script2.js

@@ -1 +1,582 @@
-eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 X=1a.1b(\'X\');9 2U=1a.1b(\'4r\');9 1p=1a.1b(\'4s\');9 4t=1a.1b(\'4u\');9 2V=1a.1b(\'4v\');9 2W=1a.1b(\'4w\');9 Y=1a.1b(\'4x\');9 2X=1a.1b(\'1j\');e y;e 2s=Q;e 2t=0;e 1c=\'\';e Z=D;e U=D;e E=D;e 1k=Q;e 4y=\'\';e 2Y=Q;e 2u="";e 1q=Q;9 4z=1l;9 3v="4A://4B.4C.4D/4E/4F/4G";9 3w=11;e v=Q;e 1d=[];e 2d=[];9 1m=q 2Z();9 1n=q 2Z();9 3x=10;9 3y=4H;e z=[];9 2e=q 2Z();9 3A=4I;9 2f=l=>l.1r().4J().30(/[^\\w\\s]/g,\'\');9 31=(1e,p,2v,3B)=>`${1e}-${p}-${32.33(2v)}-${3B}`;9 3C=(l,p)=>{9 1e=2f(l);9 j=31(1e,p,z,1p.R);a(1n.2w(j)||1m.2w(j))1o;2d.1s({l:l.1r(),p,j});34()};9 34=1t()=>{35(2d.t>0&&1n.4K<3x){9{l,p,j}=2d.3D();9 1u=q 3E();1n.36(j,1u);2g{9 x=u 37(`/3F?l=${38(l)}&2v=${32.33(z)}&3G=${1p.R}`,{39:\'3a\',3H:{\'3I\':\'F/13-2x\',\'2h-3J\':\'3K/3L\'},1v:1u.1v});a(!x.1w)2i q 1f(\'3b x 3c 2y 1w\');9 3d=u 3e(x.3M,p,1u.1v);a(3d)1m.36(j,{S:3d,2z:15.17()})}2j(k){a(k.3N!==\'2A\')T.k("1f 4L 18:",k)}2B{1n.2C(j);34()}}};9 3e=1t(2D,p,2E)=>{9 1x=2D.3O();9 2F=q 3P("3Q-8");e 1g="";2g{35(C){9{2G,R}=u 1x.3R();a(2G)3f;a(2E.2H)2i q 3S(\'3T 2H\',\'2A\');9 2I=2F.3U(R,{2x:C});1g+=2I;9 V=1g.3V(\'\\n\');2J(e i=0;i<V.t-1;i++){9 b=V[i];a(b.3g(\'3W: \')){9 m=b.3X(6).1r();a(m){9 A=u 2k(m,p);1o A}}}1g=V[V.t-1]}}2j(k){T.k("1f 2K 3e:",k)}2B{1x.3Y()}1o Q};9 1y=1t()=>{a(1d.t>0){9 3Z=1d.3D();9 18=q 4M(3Z.S);W();a(E){y.40();E=D;X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>41 1h`}9 42=q 43(2l=>{18.4N=2l;18.44=2l});a(v){v.45();v.46=0}v=18;u 18.4O();u 42;1y()}M{W();47(()=>{a(!E){y.2m();E=C;X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="3h 3i-3j"></c><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>3k 2n`}},4P)}};9 2k=1t(F,p)=>{9 48=2f(F);9 j=`${48}-${p}`;a(2e.2w(j)){9 1U=2e.49(j);a(15.17()-1U.2z<3A){1o 1U.S}M{2e.2C(j)}}2g{9 x=u 37(`${3v}?p=${p}&F=${38(F)}`,{39:\'3a\'});a(!x.1w)2i q 1f(\'3b x 3c 2y 1w\');9 4a=u x.4Q();9 A=4R.4S(4a);2e.36(j,{S:A,2z:15.17()});1o A}2j(k){T.k("1f 4T 4U 18:",k);1o Q}};9 3l=1t(l)=>{T.2o("4V l f 1h:",l);Z=C;W();2t=15.17();1q=Q;9 1e=2f(l);9 j=31(1e,1p.R,z,1p.R);a(1m.2w(j)){9 1U=1m.49(j);a(15.17()-1U.2z<3y){9 4b=1U.S;1d.1s({S:4b,2L:C});1y()}M{1m.2C(j)}}1k=q 3E();9 S=`/3F?l=${38(l)}&3G=${1p.R}&2v=${32.33(z)}`;2g{9 x=u 37(S,{39:\'3a\',3H:{\'3I\':\'F/13-2x\',\'2h-3J\':\'3K/3L\'},1v:1k.1v});a(!x.1w){a(x.4c===4W){T.2o("4X 4Y 4Z, 50 2K 1 51...");u q 43(2l=>47(2l,52));u 3l(l);1o}2i q 1f(`3b x 3c 2y 1w:${x.4c}`)}T.2o("53 18 x 54");u 3m(x.3M,2U.R,1k.1v)}2j(k){a(k.3N!==\'2A\'){T.k("1f 55 l f 1h:",k)}}2B{Z=D;W()}};9 3m=1t(2D,p,2E)=>{9 1x=2D.3O();9 2F=q 3P("3Q-8");e 1g="";e 3n=0;e 1V="";e 2p="";e 2M="";2g{35(C){9{2G,R}=u 1x.3R();a(2G)3f;a(2E.2H)2i q 3S(\'3T 2H\',\'2A\');a(U){2N(\'4d 56 57\');3f}9 2I=2F.3U(R,{2x:C});1g+=2I;9 V=1g.3V(\'\\n\');2J(e i=0;i<V.t-1;i++){9 b=V[i];a(b.3g(\'3W: \')){9 m=b.3X(6).1r();a(m){a(!1q)1q=15.17();1V+=m+" ";2p+=m+" ";2X.m=1V;a(3n<2){9 A=u 2k(m,p);a(A){1d.1s({S:A,2L:D});a(!v)1y()}2M+=m+" ";3n++}M{e 1W=2p.30(2M,\'\').1r();a(1W.t>=3w){9 A=u 2k(1W,p);a(A){1d.1s({S:A,2L:D});a(!v)1y()}2p=""}}}}}1g=V[V.t-1]}}2j(k){T.k("1f 2K 3m:",k)}2B{1x.3Y();e 1W=2p.30(2M,\'\').1r();a(1W!==""){9 A=u 2k(1W,p);a(A){1d.1s({S:A,2L:D});a(!v)1y()}}a(1V!==\'\'){3o(\'4e\',1V);1V=\'\'}}};9 W=(4f=Q)=>{2W.m=U?"4g: 4h":"4g: 4i";2W.2q=U?"1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-2O-1i f-2O-2P 2b:N-O-f-r B-2O-1l f-2O-2c":"1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-P-11 f-P-1i 2Q:B-P-2c 2Q:f-P-4j 2b:N-O-f-r B-P-1i f-P-1l";a(Z&&!v){Y.m="1h: 58...";Y.2q="1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-2R-1i f-2R-2P 2b:N-O-f-r B-2R-1l f-2R-2c"}M a(v&&!U){Y.m=4f||"1h: 4h";Y.2q="1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-2S-1i f-2S-2P 2b:N-O-f-r B-2S-1l f-2S-2c"}M a(U){Y.m="1h: 2n";Y.2q="1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-2T-1i f-2T-2P 2b:N-O-f-r B-2T-1l f-2T-2c"}M{Y.m="1h: 4i";Y.2q="1X 1Y-1Z 20-4 21-2 F-22 25 26-27 28-29 2a-11 N-O-f-r B-P-11 f-P-1i 2Q:B-P-2c 2Q:f-P-4j 2b:N-O-f-r B-P-1i f-P-1l"}};a(\'4k\'2K 59){y=q 4k();5a.5b(y,{5c:C,5d:C,5e:\'5f-5g\',5h:3});y.5i=()=>{T.2o("3p 4l 5j");1c=\'\';U=C;2Y=15.17();W();X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="3h 3i-3j"></c><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>3k 2n`};y.5k=(13)=>{e 2r=\'\';2J(e i=13.5l;i<13.3q.t;i++){9 1j=13.3q[i][0].1j;a(13.3q[i].5m){1c+=1j;2N(\'5n\');3r(1c);1c=\'\';U=D;W();2t=15.17()}M{2r+=1j;U=C;2Y=15.17();W();a(2r.t>2u.t+5){4m(2u)}2u=2r;3C(2r,2U.R)}}};y.44=(13)=>{T.k(\'3p 4l k:\',13.k);a(E)y.2m()};y.5o=()=>{U=D;W();a(!Z&&1c!==\'\'){3r(1c);1c=\'\'}a(E)y.2m()};X.5p(\'5q\',()=>{a(E&&!Z){y.40();E=D;X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>5r 2n`}M a(E&&Z||v){2N(\'5s 5t\');y.2m();E=C;X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>41 1h`}M{y.2m();E=C;X.1z=`<o 1A="1B://1C.1D.1E/1F/o"G="24"1G="24"1H="0 0 24 24"1I="1J"h="1K"h-G="2"h-1L="H"h-1M="H"><c d="3h 3i-3j"></c><c d="1N 1O 3 0 0 0-3 1P 3 0 0 0 6 1Q 3 0 0 0-3-3z"></c><c d="1R 1S 7 0 0 1-14 1T-2"></c><b I="12"J="19"K="12"L="23"></b><b I="8"J="23"K="16"L="23"></b></o>3k 2n`}})}M{5u(\'5v 5w 5x 2y 5y 5z 5A 3p 5B.\')}9 3o=(3s,2h)=>{a(z.t>0&&z[z.t-1].3s===\'4e\'&&z[z.t-1].2h===""){z.5C()}z.1s({3s,2h});a(z.t>6)z.5D(0,2)};9 3r=(1j)=>{9 3t=1j.5E();a(3t!==\'\'&&!Z){2s=3t;3l(2s);3o(\'4d\',2s);2X.m=\'\'}};9 2N=(3u=\'5F\')=>{T.2o(`5G 18(3u:${3u})...`);a(v){v.45();v.46=0;v=Q}1d.t=0;Z=D;a(1k){1k.4n();1k=Q}1m.5H();2d.t=0;W()};9 4m=(l)=>{9 1e=2f(l);2J(9[j,1u]5I 1n){a(j.3g(1e)){1u.4n();1n.2C(j)}}};9 4o=()=>{a(1q){9 4p=1q-2t;2V.m=`4q:${4p}5J`}M{2V.m="4q: 5K"}};5L(4o,5M);',62,359,'|||||||||const|if|line|path||let|to||stroke||cacheKey|error|query|textContent||svg|voice|new|||length|await|currentAudio||response|speechRecognizer|conversationHistory|audioUrl|from|true|false|isSpeechRecognitionActive|text|width|round|x1|y1|x2|y2|else|bg|gradient|gray|null|value|url|console|isUserSpeaking|lines|updateActivityIndicators|startStopButton|aiActivityIndicator|isRequestInProgress||300||event||Date||now|audio||document|getElementById|completeTranscript|audioPlaybackQueue|normalizedQuery|Error|buffer|AI|400|transcript|requestAbortController|500|prefetchCache|pendingPrefetchRequests|return|modelSelectionDropdown|firstResponseTextTimestamp|trim|push|async|abortController|signal|ok|reader|playNextAudio|innerHTML|xmlns|http|www|w3|org|2000|height|viewBox|fill|none|currentColor|linecap|linejoin|M12|1a3|3v8a3|0V4a3|M19|10v2a7|0v|cachedData|fullResponseText|unsentTextChunk|indicator|rounded|full|px|py|white|||flex|items|center|transition|colors|duration|hover|700|prefetchQueue|audioCache|normalizeQueryText|try|content|throw|catch|generateTextToSpeechAudio|resolve|start|Listening|log|textChunk|className|interimTranscript|activeQuery|queryStartTime|prefetchTextQuery|history|has|stream|not|timestamp|AbortError|finally|delete|responseStream|abortSignal|decoder|done|aborted|chunk|for|in|isPrefetched|sentText|interruptAudioPlayback|blue|600|dark|purple|green|yellow|voiceSelectionDropdown|responseTimeDisplay|userActivityIndicator|transcriptDiv|lastUserSpeechTimestamp|Map|replace|generateCacheKey|JSON|stringify|processPrefetchQueue|while|set|fetch|encodeURIComponent|method|GET|Network|was|firstAudioUrl|handleStreamingResponseForPrefetch|break|startsWith|M9|9h6v6h|6z|Stop|sendQueryToAI|handleStreamingResponse|initialChunksSent|addToConversationHistory|Speech|results|processSpeechTranscript|role|trimmedTranscript|reason|TEXT_TO_SPEECH_API_ENDPOINT|CHUNK_SIZE|MAX_PREFETCH_REQUESTS|prefetchCacheExpiration||audioCacheExpiration|modelName|prefetchFirstAudioChunk|shift|AbortController|stream_audio|model|headers|accept|type|application|json|body|name|getReader|TextDecoder|utf|read|DOMException|Request|decode|split|data|substring|releaseLock|audioData|stop|Interrupt|audioPromise|Promise|onerror|pause|currentTime|setTimeout|normalizedText|get|audioBlob|prefetchedAudioUrl|status|user|assistant|state|User|Speaking|Idle|800|webkitSpeechRecognition|recognition|cancelPrefetchRequests|abort|updateLatency|latency|Latency|voiceSelect|modelSelect|noiseSuppressionCheckbox|noiseSuppression|responseTime|userIndicator|aiIndicator|partialTranscript|USER_SPEECH_INTERRUPT_DELAY|https|api|streamelements|com|kappa|v2|speech|60000|3600000|toLowerCase|size|prefetching|Audio|onended|play|100|blob|URL|createObjectURL|generating|TTS|Sending|429|Rate|limit|hit|retrying|second|1000|Streaming|received|sending|is|speaking|Processing|window|Object|assign|continuous|interimResults|language|en|US|maxAlternatives|onstart|started|onresult|resultIndex|isFinal|final|onend|addEventListener|click|Start|button|interrupt|alert|Your|browser|does|support|the|Web|API|pop|splice|trimStart|unknown|Interrupting|clear|of|ms|0ms|setInterval|200'.split('|'),0,{}))
+const startStopButton = document.getElementById('startStopButton');
+const voiceSelectionDropdown = document.getElementById('voiceSelect');
+const modelSelectionDropdown = document.getElementById('modelSelect');
+const noiseSuppressionCheckbox = document.getElementById('noiseSuppression');
+const responseTimeDisplay = document.getElementById('responseTime');
+const userActivityIndicator = document.getElementById('userIndicator');
+const aiActivityIndicator = document.getElementById('aiIndicator');
+const transcriptDiv = document.getElementById('transcript');
+
+let speechRecognizer;
+let activeQuery = null;
+let queryStartTime = 0;
+let completeTranscript = '';
+let isRequestInProgress = false;
+let isUserSpeaking = false;
+let isSpeechRecognitionActive = false;
+let requestAbortController = null;
+let partialTranscript = '';
+let lastUserSpeechTimestamp = null;
+let prefetchTextQuery = "";
+let firstResponseTextTimestamp = null;
+
+// Configuration 
+const USER_SPEECH_INTERRUPT_DELAY = 500;
+const TEXT_TO_SPEECH_API_ENDPOINT = "https://api.streamelements.com/kappa/v2/speech";
+const CHUNK_SIZE = 300; 
+
+// Audio Management
+let currentAudio = null;
+let audioPlaybackQueue = [];
+let prefetchQueue = [];
+
+// Enhanced Prefetching and Caching
+const prefetchCache = new Map(); 
+const pendingPrefetchRequests = new Map();
+const MAX_PREFETCH_REQUESTS = 10;
+const prefetchCacheExpiration = 60000; // 1 minute
+
+// Global Conversation History
+let conversationHistory = [];
+
+// Audio Caching
+const audioCache = new Map(); 
+const audioCacheExpiration = 3600000; // 1 hour
+
+// Normalize query text
+const normalizeQueryText = query => query.trim().toLowerCase().replace(/[^\w\s]/g, '');
+
+// Generate a cache key
+const generateCacheKey = (normalizedQuery, voice, history, modelName) => 
+  `${normalizedQuery}-${voice}-${JSON.stringify(history)}-${modelName}`;
+
+// Prefetch and cache the first TTS audio chunk
+const prefetchFirstAudioChunk = (query, voice) => {
+  const normalizedQuery = normalizeQueryText(query);
+  const cacheKey = generateCacheKey(normalizedQuery, voice, conversationHistory, modelSelectionDropdown.value);
+
+  if (pendingPrefetchRequests.has(cacheKey) || prefetchCache.has(cacheKey)) return; 
+
+  prefetchQueue.push({ query:query.trim(), voice, cacheKey });
+  processPrefetchQueue();
+};
+
+// Process the prefetch queue
+const processPrefetchQueue = async () => {
+  while (prefetchQueue.length > 0 && pendingPrefetchRequests.size < MAX_PREFETCH_REQUESTS) {
+    const { query, voice, cacheKey } = prefetchQueue.shift();
+    const abortController = new AbortController();
+    pendingPrefetchRequests.set(cacheKey, abortController);
+
+    const url = '/stream_text';
+    const requestBody = {
+        query: query,
+        history: JSON.stringify(conversationHistory),
+        model: modelSelectionDropdown.value
+    };
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Accept': 'text/event-stream',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(requestBody),
+        signal: abortController.signal
+    });
+
+      if (!response.ok) throw new Error('Network response was not ok');
+
+      const firstAudioUrl = await handleStreamingResponseForPrefetch(response.body, voice, abortController.signal);
+
+      if (firstAudioUrl) prefetchCache.set(cacheKey, { url: firstAudioUrl, timestamp: Date.now() });
+
+    } catch (error) {
+      if (error.name !== 'AbortError') console.error("Error prefetching audio:", error);
+    } finally {
+      pendingPrefetchRequests.delete(cacheKey);
+      processPrefetchQueue();
+    }
+  }
+};
+
+// Handle the streaming response for prefetching
+const handleStreamingResponseForPrefetch = async (responseStream, voice, abortSignal) => {
+  const reader = responseStream.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let buffer = "";
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (abortSignal.aborted) throw new DOMException('Request aborted', 'AbortError');
+
+      const chunk = decoder.decode(value, { stream: true });
+      buffer += chunk;
+      const lines = buffer.split('\n');
+
+      for (let i = 0; i < lines.length - 1; i++) {
+        const line = lines[i];
+        if (line.startsWith('data: ')) {
+          const textContent = line.substring(6).trim();
+          if (textContent) {
+            const audioUrl = await generateTextToSpeechAudio(textContent, voice);
+            return audioUrl; 
+          }
+        }
+      }
+
+      buffer = lines[lines.length - 1];
+    }
+  } catch (error) {
+    console.error("Error in handleStreamingResponseForPrefetch:", error);
+  } finally {
+    reader.releaseLock();
+  }
+
+  return null;
+};
+
+// Play audio from the queue
+const playNextAudio = async () => {
+  if (audioPlaybackQueue.length > 0) {
+    const audioData = audioPlaybackQueue.shift();
+    const audio = new Audio(audioData.url);
+    updateActivityIndicators(); 
+
+    // Pause speech recognition if it's active
+    if (isSpeechRecognitionActive) {
+      speechRecognizer.stop();
+      isSpeechRecognitionActive = false;
+      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="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>
+        Interrupt AI
+      `;
+    }
+
+    const audioPromise = new Promise(resolve => {
+      audio.onended = resolve;
+      audio.onerror = resolve;
+    });
+    if (currentAudio) {
+      currentAudio.pause();
+      currentAudio.currentTime = 0;
+    }
+
+    currentAudio = audio;
+    await audio.play();
+    await audioPromise;
+    playNextAudio();
+  } else {
+    updateActivityIndicators(); 
+
+    // Resume speech recognition if it was paused with a delay
+    setTimeout(() => {
+      if (!isSpeechRecognitionActive) { 
+        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
+        `;
+      }
+    }, 100);
+  }
+};
+
+// Generate Text-to-Speech audio with caching
+const generateTextToSpeechAudio = async (text, voice) => {
+  const normalizedText = normalizeQueryText(text);
+  const cacheKey = `${normalizedText}-${voice}`;
+
+  if (audioCache.has(cacheKey)) {
+    const cachedData = audioCache.get(cacheKey);
+    if (Date.now() - cachedData.timestamp < audioCacheExpiration) {
+      return cachedData.url;
+    } else {
+      audioCache.delete(cacheKey);
+    }
+  }
+
+  try {
+    const response = await fetch(`${TEXT_TO_SPEECH_API_ENDPOINT}?voice=${voice}&text=${encodeURIComponent(text)}`, { method: 'GET' });
+    if (!response.ok) throw new Error('Network response was not ok');
+    const audioBlob = await response.blob();
+    const audioUrl = URL.createObjectURL(audioBlob);
+
+    audioCache.set(cacheKey, { url: audioUrl, timestamp: Date.now() });
+    return audioUrl;
+  } catch (error) {
+    console.error("Error generating TTS audio:", error);
+    return null;
+  }
+};
+
+// Send a query to the AI
+const sendQueryToAI = async (query) => {
+    console.log("Sending query to AI:", query);
+    isRequestInProgress = true;
+    updateActivityIndicators(); 
+    queryStartTime = Date.now();
+    firstResponseTextTimestamp = null;
+
+    const normalizedQuery = normalizeQueryText(query);
+    const cacheKey = generateCacheKey(normalizedQuery, modelSelectionDropdown.value, conversationHistory, modelSelectionDropdown.value);
+
+    if (prefetchCache.has(cacheKey)) {
+        const cachedData = prefetchCache.get(cacheKey);
+        if (Date.now() - cachedData.timestamp < prefetchCacheExpiration) {
+            const prefetchedAudioUrl = cachedData.url;
+            audioPlaybackQueue.push({ url: prefetchedAudioUrl, isPrefetched: true });
+            playNextAudio();
+        } else {
+            prefetchCache.delete(cacheKey);
+        }
+    }
+
+    requestAbortController = new AbortController();
+
+    const url = '/stream_text';
+    const requestBody = {
+        query: query,
+        history: JSON.stringify(conversationHistory),
+        model: modelSelectionDropdown.value
+    };
+    
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'text/event-stream',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody),
+            signal: requestAbortController.signal
+        });
+
+        if (!response.ok) {
+            if (response.status === 429) {
+                console.log("Rate limit hit, retrying in 1 second...");
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await sendQueryToAI(query); 
+                return; 
+            }
+            throw new Error(`Network response was not ok: ${response.status}`);
+        }
+
+        console.log("Streaming audio response received");
+        await handleStreamingResponse(response.body, voiceSelectionDropdown.value, requestAbortController.signal);
+    } catch (error) {
+        if (error.name !== 'AbortError') {
+            console.error("Error sending query to AI:", error);
+        }
+    } finally {
+        isRequestInProgress = false;
+        updateActivityIndicators(); 
+    }
+};
+
+// Handle the streaming audio response
+const handleStreamingResponse = async (responseStream, voice, abortSignal) => {
+  const reader = responseStream.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let buffer = "";
+  let initialChunksSent = 0;
+  let fullResponseText = "";
+  let textChunk = "";
+  let sentText = ""; 
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (abortSignal.aborted) throw new DOMException('Request aborted', 'AbortError');
+
+      if (isUserSpeaking) {
+        interruptAudioPlayback('user is speaking');
+        break; 
+      }
+
+      const chunk = decoder.decode(value, { stream: true });
+      buffer += chunk;
+      const lines = buffer.split('\n');
+
+      for (let i = 0; i < lines.length - 1; i++) {
+        const line = lines[i];
+        if (line.startsWith('data: ')) {
+          const textContent = line.substring(6).trim();
+          if (textContent) {
+            if (!firstResponseTextTimestamp) firstResponseTextTimestamp = Date.now();
+
+            fullResponseText += textContent + " ";
+            textChunk += textContent + " ";
+            transcriptDiv.textContent = fullResponseText; // Update transcriptDiv
+
+            if (initialChunksSent < 2) {
+              const audioUrl = await generateTextToSpeechAudio(textContent, voice);
+              if (audioUrl) {
+                audioPlaybackQueue.push({ url: audioUrl, isPrefetched: false });
+                if (!currentAudio) playNextAudio();
+              }
+              sentText += textContent + " "; 
+              initialChunksSent++;
+            } else {
+              let unsentTextChunk = textChunk.replace(sentText, '').trim();
+
+              if (unsentTextChunk.length >= CHUNK_SIZE) {
+                const audioUrl = await generateTextToSpeechAudio(unsentTextChunk, voice);
+                if (audioUrl) {
+                  audioPlaybackQueue.push({ url: audioUrl, isPrefetched: false });
+                  if (!currentAudio) playNextAudio();
+                }
+                textChunk = ""; 
+              }
+            }
+          }
+        }
+      }
+
+      buffer = lines[lines.length - 1];
+    }
+  } catch (error) {
+    console.error("Error in handleStreamingResponse:", error);
+  } finally {
+    reader.releaseLock();
+
+    let unsentTextChunk = textChunk.replace(sentText, '').trim();
+    if (unsentTextChunk !== "") {
+      const audioUrl = await generateTextToSpeechAudio(unsentTextChunk, voice);
+      if (audioUrl) {
+        audioPlaybackQueue.push({ url: audioUrl, isPrefetched: false });
+        if (!currentAudio) playNextAudio();
+      }
+    }
+
+    if (fullResponseText !== '') {
+      addToConversationHistory('assistant', fullResponseText);
+      fullResponseText = ''; // Clear fullResponseText for the next response
+    }
+  }
+};
+
+// Update activity indicators
+const updateActivityIndicators = (state = null) => {
+  userActivityIndicator.textContent = isUserSpeaking ? "User: Speaking" : "User: Idle";
+  userActivityIndicator.className = isUserSpeaking 
+    ? "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-blue-400 to-blue-600 hover:bg-gradient-to-r from-blue-500 to-blue-700" 
+    : "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 hover:bg-gradient-to-r from-gray-400 to-gray-500"; // Tailwind classes
+
+  if (isRequestInProgress && !currentAudio) {
+    aiActivityIndicator.textContent = "AI: Processing...";
+    aiActivityIndicator.className = "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-purple-400 to-purple-600 hover:bg-gradient-to-r from-purple-500 to-purple-700"; // Tailwind class for thinking
+  } else if (currentAudio && !isUserSpeaking) {
+    aiActivityIndicator.textContent = state || "AI: Speaking";
+    aiActivityIndicator.className = "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-green-400 to-green-600 hover:bg-gradient-to-r from-green-500 to-green-700"; // Tailwind class for speaking
+  } else if (isUserSpeaking) {
+    aiActivityIndicator.textContent = "AI: Listening";
+    aiActivityIndicator.className = "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-yellow-400 to-yellow-600 hover:bg-gradient-to-r from-yellow-500 to-yellow-700"; // Tailwind class for listening
+  } else {
+    aiActivityIndicator.textContent = "AI: Idle";
+    aiActivityIndicator.className = "indicator rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 hover:bg-gradient-to-r from-gray-400 to-gray-500"; // Tailwind classes
+  }
+};
+
+// Initialize speech recognition
+if ('webkitSpeechRecognition' in window) {
+  speechRecognizer = new webkitSpeechRecognition();
+  Object.assign(speechRecognizer, {
+    continuous: true,
+    interimResults: true,
+    language: 'en-US',
+    maxAlternatives: 3
+  });
+
+  speechRecognizer.onstart = () => {
+    console.log("Speech recognition started");
+    completeTranscript = '';
+    isUserSpeaking = true;
+    lastUserSpeechTimestamp = Date.now();
+    updateActivityIndicators(); 
+    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
+    `; 
+  };
+
+  speechRecognizer.onresult = (event) => {
+    let interimTranscript = '';
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript;
+      if (event.results[i].isFinal) {
+        completeTranscript += transcript;
+        interruptAudioPlayback('final');
+        processSpeechTranscript(completeTranscript);
+        completeTranscript = '';
+        isUserSpeaking = false;
+        updateActivityIndicators(); 
+        queryStartTime = Date.now();
+      } else {
+        interimTranscript += transcript;
+        isUserSpeaking = true;
+        lastUserSpeechTimestamp = Date.now();
+        updateActivityIndicators(); 
+
+        if (interimTranscript.length > prefetchTextQuery.length + 5) {
+          cancelPrefetchRequests(prefetchTextQuery);
+        }
+        prefetchTextQuery = interimTranscript;
+        prefetchFirstAudioChunk(interimTranscript, voiceSelectionDropdown.value);
+      }
+    }
+  };
+
+  speechRecognizer.onerror = (event) => {
+    console.error('Speech recognition error:', event.error);
+    if (isSpeechRecognitionActive) speechRecognizer.start();
+  };
+
+  speechRecognizer.onend = () => {
+    isUserSpeaking = false;
+    updateActivityIndicators(); 
+
+    if (!isRequestInProgress && completeTranscript !== '') {
+      processSpeechTranscript(completeTranscript);
+      completeTranscript = '';
+    }
+
+    if (isSpeechRecognitionActive) speechRecognizer.start();
+  };
+
+  startStopButton.addEventListener('click', () => {
+    if (isSpeechRecognitionActive && !isRequestInProgress) { // Stop Listening
+      speechRecognizer.stop();
+      isSpeechRecognitionActive = false;
+      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="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
+      `; 
+    } else if (isSpeechRecognitionActive && isRequestInProgress || currentAudio) { // Interrupt AI
+      interruptAudioPlayback('button interrupt');
+      speechRecognizer.start();
+      isSpeechRecognitionActive = true; // Keep recognition active
+      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="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>
+        Interrupt AI
+      `; // Replace with your SVG
+    } else { // Start Listening
+      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
+      `; // Replace with your SVG
+    }
+  });
+} else {
+  alert('Your browser does not support the Web Speech API.');
+}
+
+// Add to conversation history
+const addToConversationHistory = (role, content) => {
+  if (conversationHistory.length > 0 &&
+    conversationHistory[conversationHistory.length - 1].role === 'assistant' &&
+    conversationHistory[conversationHistory.length - 1].content === "") {
+    conversationHistory.pop();
+  }
+
+  conversationHistory.push({ role, content });
+
+  if (conversationHistory.length > 6) conversationHistory.splice(0, 2);
+};
+
+// Process the final speech transcript
+const processSpeechTranscript = (transcript) => {
+  const trimmedTranscript = transcript.trimStart();
+  if (trimmedTranscript !== '' && !isRequestInProgress) {
+    activeQuery = trimmedTranscript;
+    sendQueryToAI(activeQuery);
+    addToConversationHistory('user', activeQuery);
+    transcriptDiv.textContent = ''; 
+  }
+};
+
+// Interrupt audio playback
+const interruptAudioPlayback = (reason = 'unknown') => {
+  console.log(`Interrupting audio (reason: ${reason})...`);
+  if (currentAudio) {
+    currentAudio.pause();
+    currentAudio.currentTime = 0;
+    currentAudio = null;
+  }
+
+  audioPlaybackQueue.length = 0;
+  isRequestInProgress = false;
+
+  if (requestAbortController) {
+    requestAbortController.abort();
+    requestAbortController = null;
+  }
+
+  prefetchCache.clear();
+  prefetchQueue.length = 0; 
+  updateActivityIndicators();
+};
+
+// Cancel pending prefetch requests
+const cancelPrefetchRequests = (query) => {
+  const normalizedQuery = normalizeQueryText(query);
+
+  for (const [cacheKey, abortController] of pendingPrefetchRequests) {
+    if (cacheKey.startsWith(normalizedQuery)) {
+      abortController.abort();
+      pendingPrefetchRequests.delete(cacheKey);
+    }
+  }
+};
+
+// Update latency display
+const updateLatency = () => {
+  if (firstResponseTextTimestamp) {
+    const latency = firstResponseTextTimestamp - queryStartTime;
+    responseTimeDisplay.textContent = `Latency: ${latency}ms`;
+  } else {
+    responseTimeDisplay.textContent = "Latency: 0ms";
+  }
+};
+
+setInterval(updateLatency, 200);