Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on 10 days ago

Commit

5772021

verified ·

1 Parent(s): ebcf47f

Update index.html

Browse files

Files changed (1) hide show

index.html +107 -107

index.html CHANGED Viewed

@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>AI Assistant (Gemma 3 1B - Doc Example Attempt)</title>
     <style>
-        /* CSS는 이전과 동일 */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        :root {
             --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529;
             --bg-color: #f8f9fa; --user-msg-bg: #e7f5ff; --user-msg-text: #004085;
             --bot-msg-bg: #ffffff; --bot-msg-border: #dee2e6; --system-msg-color: #6c757d;
@@ -60,6 +60,11 @@
              .control-button { width: 40px; height: 40px; font-size: 1.2em; }
          }
     </style>
     <script type="importmap">
     {
       "imports": {
@@ -91,19 +96,24 @@
     </div>
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
         const TASK = 'text-generation';
-        const QUANTIZATION = 'q4';
-        env.allowLocalModels = false;
-        env.useBrowserCache = true;
-        env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
-        env.backends.onnx.prefer_alternative_execution_providers = true;
-        // DOM Elements
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
@@ -113,15 +123,15 @@
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
-        // State
-        let generator = null;
-        let isLoadingModel = false;
-        let conversationHistory = []; // Will store messages in { role: '...', content: '...' } format
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_doc_state_v1'; // New key
-        const historyKey = 'gemma3_1b_doc_history_v1';
-        // Speech API
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
@@ -129,50 +139,35 @@
         // --- Initialization ---
         window.addEventListener('load', () => {
-            loadState(); // Load state, including potentially saved history
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
-            updateChatUIState(false); // Initial UI state: disabled
-            displayHistory(); // Display saved history after elements are ready
             setTimeout(loadVoices, 500);
-            loadModelButton.addEventListener('click', handleLoadModelClick);
-            console.log("Attempting to use Transformers.js (latest version from CDN)");
-            displayMessage('system', `Using latest Transformers.js from CDN. Ready to attempt loading ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
-         function loadState() {
              const savedState = localStorage.getItem(stateKey); if (savedState) { try { const loaded = JSON.parse(savedState); botState = { ...botState, ...loaded, botSettings: { ...botState.botSettings, ...(loaded.botSettings || {}) } }; } catch(e) {} }
-             // Load history - it should already be in the correct [{role:'...', content:'...'}, ...] format if saved previously
              const savedHistory = localStorage.getItem(historyKey); if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); if (!Array.isArray(conversationHistory)) conversationHistory = []; } catch(e) { conversationHistory = []; } }
          }
          function saveState() {
              localStorage.setItem(stateKey, JSON.stringify(botState));
-             // Ensure history is saved in the messages format
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
          function displayHistory() {
-             chatbox.innerHTML = '';
-             // Display history assuming it's in messages format
-             conversationHistory.forEach(msg => {
-                 // Only display user and model messages visually
-                 if (msg.role === 'user' || msg.role === 'model') {
-                     displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false);
-                 }
-             });
          }
         // --- UI Update Functions ---
         function displayMessage(sender, text, animate = true, isError = false) {
-             const messageDiv = document.createElement('div');
-             let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message';
-             if (sender === 'system' && isError) messageClass = 'error-message';
-             messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none';
-             text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>');
-             messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
         function updateModelStatus(message, type = 'info') {
             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
@@ -180,7 +175,7 @@
         function updateChatUIState(isModelLoadedSuccessfully) {
             userInput.disabled = !isModelLoadedSuccessfully || isLoadingModel; sendButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || userInput.value.trim() === ''; speechButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || isListening || !recognition; toggleSpeakerButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || !synthesis; loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; if (isModelLoadedSuccessfully) { userInput.placeholder = "How can I help you today?"; } else if (isLoadingModel) { userInput.placeholder = "Model loading..."; } else { userInput.placeholder = "Please attempt to load the model first..."; }
         }
-        function updateSpeakerButtonUI() { /* No change */
             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇'; toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
         }
         function showSpeechStatus(message) { console.log("Speech Status:", message); }
@@ -189,148 +184,153 @@
         // --- Model & AI Logic ---
         async function handleLoadModelClick() {
             if (isLoadingModel || generator) return;
-            isLoadingModel = true; generator = null;
             updateChatUIState(false);
-            await initializeModel(MODEL_NAME);
             isLoadingModel = false;
-            updateChatUIState(generator !== null);
         }
         async function initializeModel(modelId) {
-            updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" } using latest library...`, 'loading');
-            displayMessage('system', `Attempting to load ${modelId} using latest library & Q4 dtype (as per docs)...`, false);
             try {
-                // Use pipeline exactly as in the documentation example
                 generator = await pipeline(TASK, modelId, {
-                    dtype: QUANTIZATION,
                     progress_callback: (progress) => {
                          const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                          updateModelStatus(msg, 'loading');
                      }
                 });
-                updateModelStatus(`${modelId} loaded successfully! (Unexpected?)`, 'success');
-                displayMessage('system', `[SUCCESS] ${modelId} loaded. If this worked, the library/model compatibility might have changed.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId} (with latest library, Q4):`, error);
                 let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
-                // Provide specific feedback based on the likely errors
                 if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
-                    errorMsg += " The 'gemma3_text' model type is likely still unsupported by this library version.";
                 } else if (error.message.includes("split is not a function")) {
-                     errorMsg += " A TypeError occurred, possibly due to config parsing issues (incompatibility).";
                  } else {
-                     errorMsg += " Check console for details. Memory limits or network issues could also be factors.";
                  }
                 updateModelStatus(errorMsg, 'error');
                 displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
-                generator = null;
             }
         }
-        // Builds the messages array for the pipeline
         function buildMessages(newUserMessage) {
-            // Start with a system prompt if desired (optional but good practice)
             let messages = [{ role: "system", content: "You are a helpful assistant." }];
-            // Add history, ensuring it alternates user/model roles correctly
-            // Note: conversationHistory already stores {role, content}
             messages = messages.concat(conversationHistory);
-            // Add the new user message
             messages.push({ role: "user", content: newUserMessage });
             console.log("Input Messages:", messages);
             return messages;
         }
-        // Cleans the response from the generator output
         function cleanupResponse(output) {
-            // The documentation example uses output[0].generated_text.at(-1).content
-            // Let's try that structure first, with checks.
-            try {
-                if (output && output.length > 0 && output[0].generated_text && Array.isArray(output[0].generated_text)) {
-                    const lastMessage = output[0].generated_text.at(-1); // Get the last message object
-                    if (lastMessage && lastMessage.role === 'assistant' && lastMessage.content) { // Check role and content
-                        let cleaned = lastMessage.content.trim();
-                        // Additional cleanup for potential artifacts
-                        cleaned = cleaned.replace(/<end_of_turn>/g, '').trim();
-                        cleaned = cleaned.replace(/<start_of_turn>/g, '').trim(); // Just in case
-                        if (cleaned.length > 0) return cleaned;
-                    }
-                }
-            } catch (e) {
-                 console.error("Error parsing generator output structure:", e, "Output:", output);
-             }
-             // Fallback if the expected structure isn't found or parsing fails
-             console.warn("Could not extract response using standard messages structure. Using fallback.");
-             const fallbacks = [ "Sorry, I had trouble formatting my response.", "My response might be incomplete.", "Something went wrong displaying the answer." ];
-             return fallbacks[Math.floor(Math.random() * fallbacks.length)];
-        }
         // --- Main Interaction Logic ---
         async function handleUserMessage() {
             const userText = userInput.value.trim();
             if (!userText || !generator || isLoadingModel) return;
             userInput.value = ''; userInput.style.height = 'auto';
-            updateChatUIState(true); // Disable send button during processing
-            // Add user message to UI *and* history in the correct format
             displayMessage('user', userText);
             conversationHistory.push({ role: 'user', content: userText });
             updateModelStatus("AI thinking...", "loading");
-            // Prepare messages array for the model
-            const messages = buildMessages(userText); // No need to pass userText separately
             try {
-                // Call generator with the messages array
                 const outputs = await generator(messages, {
                     max_new_tokens: 300,
                     temperature: 0.7,
-                    // repetition_penalty: 1.1, // May not be supported by all models/tasks in message format
                     top_k: 50,
-                    // top_p: 0.9, // May not be supported
-                    do_sample: true, // Sample for more varied responses
-                    // streamer: streamer // Streaming could be added later if needed
                 });
-                const replyText = cleanupResponse(outputs); // Process the output
                 console.log("Cleaned AI Output:", replyText);
-                // Add AI response to UI *and* history
                 displayMessage('bot', replyText);
-                conversationHistory.push({ role: 'assistant', content: replyText }); // Use 'assistant' or 'model' role
                 if (botState.botSettings.useSpeechOutput && synthesis && targetVoice) {
                     speakText(replyText);
                 }
-                saveState(); // Save updated history
             } catch (error) {
                 console.error("AI response generation error:", error);
                 displayMessage('system', `[ERROR] Failed to generate response: ${error.message}`, true, true);
-                // Optionally remove the last user message from history if generation fails?
-                // conversationHistory.pop();
             } finally {
                 if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success");
-                updateChatUIState(generator !== null);
                 userInput.focus();
             }
         }
         // --- Speech API Functions ---
-        function initializeSpeechAPI() { /* No changes */
               const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { isListening = true; updateChatUIState(generator !== null); console.log('Listening...'); }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${MODEL_NAME} ready.` : 'Model not loaded.', generator ? 'success' : 'error'), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null); console.log('Stopped listening.'); }; } else { console.warn("Speech Recognition not supported."); } if (!synthesis) { console.warn("Speech Synthesis not supported."); } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); } updateChatUIState(false);
           }
-        function loadVoices() { /* No changes */ if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
-        function findAndSetVoice(voices) { /* No changes */ targetVoice = voices.find(v => v.lang === 'en-US') || voices.find(v => v.lang.startsWith('en-')); if (targetVoice) { console.log("Using English voice:", targetVoice.name, targetVoice.lang); } else { console.warn("No suitable English voice found."); } }
-        function speakText(text) { /* No changes */ if (!synthesis || !botState.botSettings.useSpeechOutput || !targetVoice) return; synthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = targetVoice; utterance.lang = targetVoice.lang; utterance.rate = 1.0; utterance.pitch = 1.0; synthesis.speak(utterance); }
         // --- Event Listeners ---
         sendButton.addEventListener('click', handleUserMessage);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>AI Assistant (Gemma 3 1B - Strict Load Attempt)</title>
     <style>
+        /* CSS styles remain the same as the previous valid version */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        :root { /* Using the neutral blue theme */
             --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529;
             --bg-color: #f8f9fa; --user-msg-bg: #e7f5ff; --user-msg-text: #004085;
             --bot-msg-bg: #ffffff; --bot-msg-border: #dee2e6; --system-msg-color: #6c757d;
              .control-button { width: 40px; height: 40px; font-size: 1.2em; }
          }
     </style>
+    <!--
+      Import Map: Specifies how to resolve the '@xenova/transformers' module specifier.
+      We load the latest stable version directly from the jsDelivr CDN.
+      This is a standard way to load ES modules in modern browsers without a build step.
+    -->
     <script type="importmap">
     {
       "imports": {
     </div>
     <script type="module">
+        // Import necessary functions from the loaded library.
+        // This relies on the import map defined above.
         import { pipeline, env } from '@xenova/transformers';
+        // --- Configuration ---
+        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA'; // The specific model requested
         const TASK = 'text-generation';
+        const QUANTIZATION = 'q4'; // As specified in the model card example
+        // --- Environment Setup ---
+        // Basic setup for Transformers.js environment
+        env.allowLocalModels = false; // Only load from Hub/CDN
+        env.useBrowserCache = true;   // Cache models in the browser
+        env.backends.onnx.executionProviders = ['webgpu', 'wasm']; // Prioritize WebGPU
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
+        env.backends.onnx.prefer_alternative_execution_providers = true; // Try WebGPU first if available
+        // --- DOM Elements ---
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
+        // --- State Management ---
+        let generator = null;       // Holds the loaded pipeline if successful
+        let isLoadingModel = false; // Flag to prevent concurrent loading attempts
+        let conversationHistory = []; // Stores chat history in messages format
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
+        const stateKey = 'gemma3_1b_strict_state_v1'; // Unique key for this version
+        const historyKey = 'gemma3_1b_strict_history_v1';
+        // --- Web Speech API ---
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
         // --- Initialization ---
         window.addEventListener('load', () => {
+            loadState();
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
+            updateChatUIState(false); // Initially, UI is disabled
+            displayHistory();
             setTimeout(loadVoices, 500);
+            loadModelButton.addEventListener('click', handleLoadModelClick); // Attach button listener
+            console.log("Attempting to use Transformers.js library loaded via import map.");
+            displayMessage('system', `Using Transformers.js (latest). Ready to attempt loading ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
+        function loadState() {
              const savedState = localStorage.getItem(stateKey); if (savedState) { try { const loaded = JSON.parse(savedState); botState = { ...botState, ...loaded, botSettings: { ...botState.botSettings, ...(loaded.botSettings || {}) } }; } catch(e) {} }
              const savedHistory = localStorage.getItem(historyKey); if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); if (!Array.isArray(conversationHistory)) conversationHistory = []; } catch(e) { conversationHistory = []; } }
          }
          function saveState() {
              localStorage.setItem(stateKey, JSON.stringify(botState));
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
          function displayHistory() {
+             chatbox.innerHTML = ''; conversationHistory.forEach(msg => { if (msg.role === 'user' || msg.role === 'assistant') { displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false); } });
          }
         // --- UI Update Functions ---
         function displayMessage(sender, text, animate = true, isError = false) {
+             const messageDiv = document.createElement('div'); let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message'; if (sender === 'system' && isError) messageClass = 'error-message'; messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none'; text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>'); messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
         function updateModelStatus(message, type = 'info') {
             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
         function updateChatUIState(isModelLoadedSuccessfully) {
             userInput.disabled = !isModelLoadedSuccessfully || isLoadingModel; sendButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || userInput.value.trim() === ''; speechButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || isListening || !recognition; toggleSpeakerButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || !synthesis; loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; if (isModelLoadedSuccessfully) { userInput.placeholder = "How can I help you today?"; } else if (isLoadingModel) { userInput.placeholder = "Model loading..."; } else { userInput.placeholder = "Please attempt to load the model first..."; }
         }
+        function updateSpeakerButtonUI() {
             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇'; toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
         }
         function showSpeechStatus(message) { console.log("Speech Status:", message); }
         // --- Model & AI Logic ---
         async function handleLoadModelClick() {
             if (isLoadingModel || generator) return;
+            isLoadingModel = true; generator = null; // Reset state
             updateChatUIState(false);
+            await initializeModel(MODEL_NAME); // Attempt to load
             isLoadingModel = false;
+            updateChatUIState(generator !== null); // Update UI based on outcome
         }
+        // Initialize model exactly as per documentation example for this model
         async function initializeModel(modelId) {
+            updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" }... (Strict doc example)`, 'loading');
+            displayMessage('system', `Attempting to load ${modelId} using documented method (dtype: ${QUANTIZATION})...`, false);
             try {
+                // Directly use the pipeline function as shown in the model card
                 generator = await pipeline(TASK, modelId, {
+                    dtype: QUANTIZATION, // Explicitly use q4
                     progress_callback: (progress) => {
                          const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                          updateModelStatus(msg, 'loading');
                      }
                 });
+                // If successful (still unlikely given previous errors)
+                updateModelStatus(`${modelId} loaded successfully!`, 'success');
+                displayMessage('system', `[SUCCESS] ${modelId} loaded. The environment might be different or the library was updated.`, false);
             } catch (error) {
+                // Catch and report the inevitable error
+                console.error(`Model loading failed for ${modelId} (Strict Attempt):`, error);
                 let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
                 if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
+                    errorMsg += " Confirmed: The 'gemma3_text' model type is unsupported by this library version.";
                 } else if (error.message.includes("split is not a function")) {
+                     errorMsg += " Confirmed: TypeError during config parsing, likely due to unsupported 'gemma3_text' type.";
                  } else {
+                     errorMsg += " Unknown error. Check console and consider Space resource limits.";
                  }
                 updateModelStatus(errorMsg, 'error');
                 displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
+                generator = null; // Ensure it's null on failure
             }
         }
+        // Build messages array as per documentation example
         function buildMessages(newUserMessage) {
+            // Start with system prompt (can be customized)
             let messages = [{ role: "system", content: "You are a helpful assistant." }];
+            // Append history
             messages = messages.concat(conversationHistory);
+            // Append new user message
             messages.push({ role: "user", content: newUserMessage });
             console.log("Input Messages:", messages);
             return messages;
         }
+        // Cleanup response based on messages output format
         function cleanupResponse(output) {
+             // Expecting output like: [{ generated_text: [..., {role: 'assistant', content: '...'}] }]
+             try {
+                 if (output && output.length > 0 && output[0].generated_text && Array.isArray(output[0].generated_text)) {
+                     const lastMessage = output[0].generated_text.at(-1);
+                     if (lastMessage && lastMessage.role === 'assistant' && typeof lastMessage.content === 'string') {
+                         let cleaned = lastMessage.content.trim();
+                         cleaned = cleaned.replace(/<end_of_turn>/g, '').trim();
+                         if (cleaned.length > 0) return cleaned;
+                     }
+                 }
+                 // If structure is different (e.g., older library version returned flat text)
+                 if (output && output.length > 0 && typeof output[0].generated_text === 'string') {
+                    // Fallback for potentially different output structure
+                    let cleaned = output[0].generated_text;
+                    // Need to remove the prompt part if it's included
+                    // This part is tricky without knowing the exact prompt format used internally by the pipeline for messages
+                    // Let's just remove common artifacts for now
+                    cleaned = cleaned.split("<start_of_turn>model").pop().trim(); // Attempt to get text after last model turn
+                    cleaned = cleaned.replace(/<end_of_turn>/g, '').trim();
+                     if (cleaned.length > 0) return cleaned;
+                 }
+             } catch (e) { console.error("Error parsing generator output structure:", e, "Output:", output); }
+             console.warn("Could not reliably extract assistant response from output:", output);
+             const fallbacks = [ "Sorry, response format was unexpected.", "My response might be garbled.", "Error processing the AI answer." ];
+             return fallbacks[Math.floor(Math.random() * fallbacks.length)];
+         }
         // --- Main Interaction Logic ---
         async function handleUserMessage() {
             const userText = userInput.value.trim();
+            // Proceed only if generator is loaded and not currently loading
             if (!userText || !generator || isLoadingModel) return;
             userInput.value = ''; userInput.style.height = 'auto';
+            updateChatUIState(true); // Disable input during generation
+            // Add user message to UI and history
             displayMessage('user', userText);
             conversationHistory.push({ role: 'user', content: userText });
             updateModelStatus("AI thinking...", "loading");
+            const messages = buildMessages(userText); // Use the messages array format
             try {
+                // Call generator with messages array
                 const outputs = await generator(messages, {
                     max_new_tokens: 300,
+                    // Generation parameters from docs example:
+                    do_sample: true, // Typically true for more natural chat
                     temperature: 0.7,
                     top_k: 50,
+                    // repetition_penalty: 1.1, // Check if supported with messages format
+                    // top_p: 0.9, // Check if supported
                 });
+                const replyText = cleanupResponse(outputs); // Process the potentially complex output
                 console.log("Cleaned AI Output:", replyText);
+                // Add AI response to UI and history
                 displayMessage('bot', replyText);
+                // Ensure the role matches what the model/library uses ('assistant' is common)
+                conversationHistory.push({ role: 'assistant', content: replyText });
                 if (botState.botSettings.useSpeechOutput && synthesis && targetVoice) {
                     speakText(replyText);
                 }
+                saveState();
             } catch (error) {
                 console.error("AI response generation error:", error);
                 displayMessage('system', `[ERROR] Failed to generate response: ${error.message}`, true, true);
+                 // Don't add a bot message on error, the system message covers it
             } finally {
                 if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success");
+                updateChatUIState(generator !== null); // Re-enable UI
                 userInput.focus();
             }
         }
         // --- Speech API Functions ---
+        function initializeSpeechAPI() { /* No changes needed */
               const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { isListening = true; updateChatUIState(generator !== null); console.log('Listening...'); }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${MODEL_NAME} ready.` : 'Model not loaded.', generator ? 'success' : 'error'), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null); console.log('Stopped listening.'); }; } else { console.warn("Speech Recognition not supported."); } if (!synthesis) { console.warn("Speech Synthesis not supported."); } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); } updateChatUIState(false);
           }
+          function loadVoices() { /* No changes needed */ if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
+          function findAndSetVoice(voices) { /* No changes needed */ targetVoice = voices.find(v => v.lang === 'en-US') || voices.find(v => v.lang.startsWith('en-')); if (targetVoice) { console.log("Using English voice:", targetVoice.name, targetVoice.lang); } else { console.warn("No suitable English voice found."); } }
+          function speakText(text) { /* No changes needed */ if (!synthesis || !botState.botSettings.useSpeechOutput || !targetVoice) return; synthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = targetVoice; utterance.lang = targetVoice.lang; utterance.rate = 1.0; utterance.pitch = 1.0; synthesis.speak(utterance); }
         // --- Event Listeners ---
         sendButton.addEventListener('click', handleUserMessage);