Update index.html

index.html

@@ -198,7 +198,7 @@
         const sendButton = document.getElementById('sendButton');
 
         // --- API Endpoint ---
-        const API_ENDPOINT_URL = "https://k2labsym7o48yj4r.us-east-1.aws.endpoints.huggingface.cloud";
+        const API_ENDPOINT_URL = "https://k2labsym7o48yj4r.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions";
 
         // --- State Variables ---
         let recognition;
@@ -316,7 +316,7 @@
             const textToSpeak = ttsQueue.shift();
 
             setTimeout(() => {
-                synth.cancel();
+                synth.cancel(); // Clear any previous utterances
                 const utterance = new SpeechSynthesisUtterance(textToSpeak);
                 utterance.lang = 'en-US';
                 utterance.rate = 1.2;
@@ -373,7 +373,7 @@
             currentAssistantMessageElement = null;
             sentenceBuffer = "";
             spokenTextPointer = 0;
-            ttsQueue = [];
+            ttsQueue = []; // Clear TTS queue for new response
             recognitionWasRunning = false;
 
             if (isListening && recognition) {
@@ -383,23 +383,27 @@
                      console.log("Stopped recognition temporarily for API call.");
                  } catch(e) { console.warn("Could not stop recognition before API call:", e); }
             }
-             if (synth && synth.speaking) {
+             if (synth && synth.speaking) { // Cancel any ongoing speech
                 synth.cancel();
                 isSpeaking = false;
              }
 
             const requestBody = {
+                model: "mradermacher/XortronCriminalComputingConfig-GGUF", // Specify your model
                 messages: conversationHistory,
                 max_tokens: 750,
                 stream: true
+                // Add other OpenAI-compatible parameters if needed, e.g., temperature: 0.7
             };
             const requestHeaders = {
                 'Content-Type': 'application/json',
                 'Accept': 'text/event-stream'
+                // No 'Authorization' header for public endpoints, add if required by your specific setup
+                // 'Authorization': 'Bearer YOUR_HF_TOKEN_OR_DUMMY_IF_NEEDED'
             };
 
             try {
-                console.log("Sending request to:", apiEndpoint);
+                console.log("Sending request to:", apiEndpoint, "with body:", JSON.stringify(requestBody).substring(0, 200) + "...");
                 const response = await fetch(apiEndpoint, { method: 'POST', headers: requestHeaders, body: JSON.stringify(requestBody) });
 
                 if (!response.ok) {
@@ -408,6 +412,10 @@
                     try {
                         const errorJson = JSON.parse(errorText);
                         detail = errorJson.detail || errorJson.error?.message || errorJson.message || JSON.stringify(errorJson);
+                         // If the error is about a missing API key for OpenAI, it might come from the HF endpoint expecting one
+                        if (detail.toLowerCase().includes("api key") && detail.toLowerCase().includes("openai")) {
+                            detail += " (This error might be from the Hugging Face endpoint if it's configured to require an API key, even if it's mimicking OpenAI.)";
+                        }
                     } catch (parseError) {}
                     throw new Error(`API Error: ${response.status} ${response.statusText} - ${detail}`);
                  }
@@ -428,15 +436,20 @@
                         isDoneProcessingStream = true;
                          if (partialChunk.trim()) {
                            console.warn("Stream ended by reader 'done' with unprocessed partial chunk:", partialChunk);
+                           // Process any remaining partial chunk if it seems valid
+                           // This part might need careful handling depending on how your stream ends
                         }
                         break;
                     }
 
                     const chunkText = partialChunk + decoder.decode(value, { stream: true });
+                    // OpenAI-compatible streams usually send events like "data: {...}\n\n"
+                    // And a final "data: [DONE]\n\n"
                     const eventStrings = chunkText.split("\n\n");
 
+
                     if (!chunkText.endsWith("\n\n") && eventStrings.length > 0) {
-                        partialChunk = eventStrings.pop();
+                        partialChunk = eventStrings.pop(); // Keep the incomplete event for the next chunk
                     } else {
                         partialChunk = "";
                     }
@@ -444,34 +457,27 @@
                     for (const eventString of eventStrings) {
                         if (!eventString.trim()) continue;
 
-                        let content = "";
-                        let isDoneSignalFound = false;
-
-                        const lines = eventString.split("\n");
-                        for (const line of lines) {
-                            if (line.startsWith("data:")) {
-                                const dataJson = line.substring(5).trim();
-                                if (dataJson === "[DONE]") {
-                                    console.log("Received [DONE] signal in stream.");
-                                    isDoneSignalFound = true;
-                                    isDoneProcessingStream = true;
-                                    break;
-                                }
-                                try {
-                                    const data = JSON.parse(dataJson);
-                                    if (data.choices && data.choices[0]?.delta?.content) {
-                                        content += data.choices[0].delta.content;
-                                    }
-                                } catch (e) {
-                                    console.error("Error parsing stream data JSON:", e, "Data:", dataJson);
-                                }
-                            }
+                        if (eventString.startsWith("data: [DONE]")) {
+                            console.log("Received [DONE] signal in stream.");
+                            isDoneProcessingStream = true;
+                            break;
                         }
 
-                        if (isDoneSignalFound) break;
-
-                        if (content) {
-                            processStreamContent(content);
+                        if (eventString.startsWith("data:")) {
+                            const dataJson = eventString.substring(5).trim();
+                            try {
+                                const data = JSON.parse(dataJson);
+                                if (data.choices && data.choices[0]?.delta?.content) {
+                                    processStreamContent(data.choices[0].delta.content);
+                                } else if (data.choices && data.choices[0]?.finish_reason) {
+                                    console.log("Stream finished with reason:", data.choices[0].finish_reason);
+                                    // isDoneProcessingStream = true; // The [DONE] signal is more reliable
+                                }
+                            } catch (e) {
+                                console.error("Error parsing stream data JSON:", e, "Data:", dataJson);
+                            }
+                        } else {
+                             console.warn("Received non-data event in stream (or malformed data):", eventString);
                         }
                     }
                 }
@@ -497,7 +503,7 @@
                             console.log("Rendered final sanitized HTML for assistant message.");
                          } catch (e) {
                              console.error("Error processing final Markdown/HTML:", e);
-                             currentAssistantMessageElement.textContent = sentenceBuffer;
+                             currentAssistantMessageElement.textContent = sentenceBuffer; // Fallback to text
                          }
                     }
                 }
@@ -505,10 +511,12 @@
                 if (sentenceBuffer) {
                     conversationHistory.push({ role: "assistant", content: sentenceBuffer });
                 } else {
-                     console.log("API call successful but no content received. Removing last user message from history.");
-                      if (conversationHistory.length > 0 && conversationHistory[conversationHistory.length - 1].role === 'user') {
-                         conversationHistory.pop();
-                     }
+                     console.log("API call successful but no content received. Removing last user message from history if appropriate.");
+                     // Check if last user message should be popped if API returned empty consistently
+                     // For now, let's assume empty content is possible and valid.
+                     // if (conversationHistory.length > 0 && conversationHistory[conversationHistory.length - 1].role === 'user') {
+                     //    conversationHistory.pop();
+                     // }
                 }
 
             } catch (error) {
@@ -517,13 +525,21 @@
 
                  let userFriendlyError = `Sorry, I encountered an error: ${error.message}`;
                  if (error instanceof TypeError && error.message.toLowerCase().includes('fetch')) {
-                     userFriendlyError = `Connection Error: Could not connect to the API at ${apiEndpoint}. Please check the URL and network connection.`;
+                     userFriendlyError = `Connection Error: Could not connect to the API. Please check the URL and network connection.`;
                      statusDiv.textContent = 'Connection Error';
-                 } else {
-                     statusDiv.textContent = `API Error: ${error.message.substring(0, 100)}...`;
+                 } else if (response && response.status === 401) {
+                     userFriendlyError = `Authentication Error: The API endpoint requires authentication. Please check if an API key/token is needed.`;
+                     statusDiv.textContent = 'Auth Error';
+                 } else if (response && response.status === 422) {
+                     userFriendlyError = `Input Error: The data sent to the API was invalid. (${error.message})`;
+                     statusDiv.textContent = 'Invalid Input';
+                 }
+                 else {
+                     statusDiv.textContent = `API Error`;
                  }
                  addMessageToChatbox('assistant', userFriendlyError);
 
+                 // Clean up conversation history if the user's message led to an error and no assistant response was formed
                  if (conversationHistory.length > 0 && conversationHistory[conversationHistory.length - 1].role === 'user') {
                     conversationHistory.pop();
                 }
@@ -532,16 +548,18 @@
                 console.log("API processing finished or errored. Entering finally block.");
                 isApiProcessing = false;
 
-                setTimeout(() => {
+                // Wait for TTS to finish before enabling inputs
+                const checkTTSDone = setInterval(() => {
                     if (ttsQueue.length === 0 && !isSpeaking) {
+                        clearInterval(checkTTSDone);
                         console.log("Finally: TTS idle. Enabling inputs and checking recognition restart.");
                         enableInputs();
                         statusDiv.textContent = isListening ? 'Listening...' : '';
                         restartRecognitionIfNeeded(recognitionWasRunning);
                     } else {
-                        console.log("Finally: TTS queue active or speaking. Inputs remain disabled. TTS onend will handle enabling/restart.");
+                         console.log("Finally: TTS queue active or speaking. Waiting for TTS to complete...");
                     }
-                }, 100);
+                }, 200);
             }
         }
 
@@ -550,12 +568,15 @@
                 currentAssistantMessageElement = addMessageToChatbox('assistant', '', true);
             }
             sentenceBuffer += content;
+            // Update text content for live streaming display (Markdown rendering happens at the end)
             currentAssistantMessageElement.textContent = sentenceBuffer;
             chatbox.scrollTop = chatbox.scrollHeight;
 
+            // Sentence-based TTS
             let searchStart = spokenTextPointer;
             while (searchStart < sentenceBuffer.length) {
-                 const sentenceEndMatch = sentenceBuffer.substring(searchStart).match(/([.?!])(?:\s|\n|$)/);
+                 // Regex to find sentence endings more robustly, including after quotes or newlines
+                 const sentenceEndMatch = sentenceBuffer.substring(searchStart).match(/([.?!])(\s|[\n\r]|$|["'])/);
                  if (sentenceEndMatch) {
                      const sentenceEndIndex = searchStart + sentenceEndMatch.index + sentenceEndMatch[1].length;
                      const textToSpeak = sentenceBuffer.substring(spokenTextPointer, sentenceEndIndex).trim();
@@ -564,9 +585,9 @@
                          speakText(textToSpeak);
                          spokenTextPointer = sentenceEndIndex;
                      }
-                      searchStart = spokenTextPointer;
+                      searchStart = spokenTextPointer; // Continue search from new pointer
                  } else {
-                     break;
+                     break; // No more complete sentences found yet
                  }
             }
         }
@@ -599,6 +620,7 @@
         function addMessageToChatbox(role, text, isStreaming = false) {
              const messageDiv = document.createElement('div');
              messageDiv.classList.add('chat-bubble');
+             // For Markdown, set initial text content. Final HTML rendering happens after stream or for non-streamed.
              messageDiv.textContent = text;
              messageDiv.classList.add(role === 'user' ? 'user-bubble' : 'assistant-bubble');
              if (role === 'assistant' && isStreaming) {
@@ -626,7 +648,7 @@
              console.log("Disabling inputs.");
              textInput.disabled = true;
              sendButton.disabled = true;
-             if (recognition) {
+             if (recognition) { // Only disable recordButton if recognition is supported
                  recordButton.disabled = true;
                  recordButton.classList.add('opacity-50');
              }
@@ -636,20 +658,22 @@
              console.log("Enabling inputs.");
              textInput.disabled = false;
              sendButton.disabled = textInput.value.trim() === '' || isApiProcessing;
-             if (recognition) {
+              if (recognition) { // Only enable recordButton if recognition is supported
                  recordButton.disabled = false;
                  recordButton.classList.remove('opacity-50');
              }
          }
 
-        function stopListening(forceStop = false) {
-             if (!recognition) return;
+        function stopListening(forceStop = false) { // Added forceStop parameter, though not explicitly used differently yet
+             if (!recognition) return; // Ensure recognition exists
              const wasListening = isListening;
-             isListening = false;
-             if (wasListening) {
+             isListening = false; // Set state immediately
+
+             if (wasListening) { // Only act if it was actually listening
                  console.log("Stopping listening session.");
-                 clearTimeout(restartTimer);
+                 clearTimeout(restartTimer); // Clear any pending restart
                  updateButtonUI(false);
+
                  if (!isApiProcessing && !isSpeaking && ttsQueue.length === 0) {
                     statusDiv.textContent = 'Stopping...';
                     setTimeout(() => {
@@ -657,32 +681,40 @@
                     }, 500);
                  }
                  try {
-                     recognition.abort();
+                     recognition.abort(); // Abort ongoing recognition
                      console.log("Recognition aborted.");
                  } catch (e) {
                      console.warn("Error aborting recognition (might have already stopped):", e);
                  }
              }
-             if (synth) {
+
+             if (synth) { // Ensure synth exists
                 console.log("Cancelling any TTS on stopListening.");
-                synth.cancel();
-                ttsQueue = [];
-                isSpeaking = false;
+                synth.cancel(); // Stop any speech
+                ttsQueue = [];    // Clear the queue
+                isSpeaking = false; // Reset speaking state
              }
-             if (!isApiProcessing) {
+
+             if (!isApiProcessing) { // Only enable inputs if API is not busy
                 enableInputs();
-                if (!isSpeaking && ttsQueue.length === 0) {
+                if (!isSpeaking && ttsQueue.length === 0) { // If TTS also idle, clear status
                     statusDiv.textContent = '';
                 }
              }
         }
 
         function startListening() {
-             if (!recognition || isListening) return;
+             if (!recognition || isListening) return; // Ensure recognition exists and not already listening
+
+             // Check for microphone permission first
              navigator.mediaDevices.getUserMedia({ audio: true })
                  .then(stream => {
+                     // We got permission. We don't need to use the stream object itself here,
+                     // as Web Speech API handles microphone access internally.
+                     // It's good practice to stop the tracks immediately if you only needed the permission check.
                      stream.getTracks().forEach(track => track.stop());
                      console.log("Microphone permission granted or already available.");
+
                      isListening = true;
                      updateButtonUI(true);
                      statusDiv.textContent = 'Starting...';
@@ -691,7 +723,7 @@
                      } catch (e) {
                          console.error("Error starting recognition:", e);
                          statusDiv.textContent = "Error starting listening.";
-                         isListening = false;
+                         isListening = false; // Reset state
                          updateButtonUI(false);
                      }
                  })
@@ -699,55 +731,60 @@
                      console.error("Microphone access error:", err);
                      if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
                         statusDiv.textContent = 'Microphone access denied.';
-                        addMessageToChatbox('assistant', 'Error: Microphone access is required for voice input.');
+                        addMessageToChatbox('assistant', 'Error: Microphone access is required for voice input. Please allow microphone access in your browser settings.');
                      } else {
                         statusDiv.textContent = `Mic Error: ${err.name}`;
                         addMessageToChatbox('assistant', `Error accessing microphone: ${err.message}`);
                      }
-                     isListening = false;
+                     isListening = false; // Reset state
                      updateButtonUI(false);
                  });
          }
 
-        recordButton.addEventListener('click', () => {
-            if (!recognition) return;
-            if (!isListening) {
-                startListening();
-            } else {
-                stopListening();
-            }
-        });
+        // --- Event Listeners & Initialization ---
+        if (recordButton && recognition) { // Ensure button exists before adding listener
+            recordButton.addEventListener('click', () => {
+                if (!isListening) {
+                    startListening();
+                } else {
+                    stopListening();
+                }
+            });
+        }
+
 
         sendButton.addEventListener('click', () => {
             const text = textInput.value.trim();
             if (text && !isApiProcessing) {
                 handleUserInput(text);
                 textInput.value = '';
-                sendButton.disabled = true;
+                sendButton.disabled = true; // Disable after sending
             }
         });
 
         textInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
+            if (e.key === 'Enter' && !e.shiftKey) { // Send on Enter, but not Shift+Enter
+                e.preventDefault(); // Prevent default newline in input
                 const text = textInput.value.trim();
-                if (text && !sendButton.disabled) {
+                if (text && !sendButton.disabled) { // Check if sendButton is enabled (not processing)
                     handleUserInput(text);
                     textInput.value = '';
-                    sendButton.disabled = true;
+                    sendButton.disabled = true; // Disable after sending
                 }
             }
         });
 
         textInput.addEventListener('input', () => {
+             // Enable send button only if there's text and not processing
              sendButton.disabled = textInput.value.trim() === '' || isApiProcessing;
          });
 
-        chatbox.innerHTML = '';
+        // Initial Setup
+        chatbox.innerHTML = ''; // Clear chatbox on load
         addMessageToChatbox('assistant', 'Hello! Use the microphone or type a message below.');
-        console.log("Voice/Text Chat App Initialized (Markdown Enabled)");
-        updateButtonUI(false);
-        enableInputs();
+        console.log("Voice/Text Chat App Initialized (OpenAI-compatible Streaming & Markdown Enabled)");
+        updateButtonUI(false); // Set initial button state
+        enableInputs(); // Enable inputs initially
 
     </script>
 
@@ -795,15 +832,16 @@
             }
         }
 
-        let matrixInterval = setInterval(drawMatrix, 40);
+        let matrixInterval = setInterval(drawMatrix, 40); // Adjusted for potentially smoother animation
 
         window.addEventListener('resize', () => {
             const oldWidth = matrixCanvas.width;
             const oldHeight = matrixCanvas.height;
-            
+
             matrixCanvas.width = window.innerWidth;
             matrixCanvas.height = window.innerHeight;
 
+            // Re-initialize drops only if dimensions actually changed to avoid unnecessary resets
             if (matrixCanvas.width !== oldWidth || matrixCanvas.height !== oldHeight) {
                 initializeMatrixDrops();
             }