Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on 11 days ago

Commit

ebcf47f

verified ·

1 Parent(s): 35c0ea2

Update index.html

Browse files

Files changed (1) hide show

index.html +180 -67

index.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <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 - v3 Attempt)</title>
     <style>
-        /* CSS styles remain the same as the previous correct version */
         @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;
@@ -22,19 +22,9 @@
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
-        body {
-            font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
-            min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); padding: 10px; overscroll-behavior: none;
-        }
-        #control-panel {
-            background: var(--header-bg); padding: 15px; border-radius: 8px; margin-bottom: 10px;
-            box-shadow: var(--header-shadow); width: 100%; max-width: 600px; border: 1px solid var(--border-color);
-            text-align: center;
-        }
-        #loadModelButton {
-             padding: 10px 20px; font-size: 1em; background-color: var(--primary-color);
-             color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; margin-bottom: 10px;
-        }
         #loadModelButton:hover:not(:disabled) { background-color: var(--button-hover-bg); }
         #loadModelButton:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; }
         #model-status { font-size: 0.9em; padding: 10px; border-radius: 4px; text-align: center; min-height: 40px; line-height: 1.4; }
@@ -42,12 +32,7 @@
         #model-status.loading { background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-color); }
         #model-status.success { background-color: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-color); }
         #model-status.error { background-color: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-color); }
-        #chat-container {
-            width: 100%; max-width: 600px; height: 75vh; max-height: 700px; background-color: #ffffff;
-            border-radius: 12px; box-shadow: var(--container-shadow); display: flex; flex-direction: column;
-            overflow: hidden; border: 1px solid var(--border-color);
-        }
         h1 { text-align: center; color: var(--primary-color); padding: 15px; background-color: var(--header-bg); border-bottom: 1px solid var(--border-color); font-size: 1.2em; font-weight: 500; flex-shrink: 0; box-shadow: var(--header-shadow); position: relative; z-index: 10; }
         #chatbox { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); background-color: var(--bg-color); }
         #chatbox::-webkit-scrollbar { width: 6px; } #chatbox::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; } #chatbox::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; }
@@ -66,9 +51,8 @@
         .control-button:active:not(:disabled) { transform: scale(0.95); }
         .control-button:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; transform: none; box-shadow: none; }
         #toggleSpeakerButton.muted { background-color: #aaa; }
-         @media (max-width: 600px) { /* Responsive styles */
-             body { padding: 5px; justify-content: flex-start; }
-             #control-panel { margin-bottom: 5px; padding: 12px; }
              #chat-container { width: 100%; height: auto; flex-grow: 1; border-radius: 12px; max-height: none; margin-bottom: 5px; }
              h1 { font-size: 1.1em; padding: 12px; } #chatbox { padding: 12px 8px; gap: 10px; }
              #messages div { max-width: 90%; font-size: 0.95em; padding: 9px 14px;}
@@ -88,7 +72,7 @@
     <div id="control-panel">
         <h2>Model Loader</h2>
         <button id="loadModelButton">Load Gemma 3 1B Model (Q4)</button>
-        <div id="model-status" class="info">Click button to load Gemma 3 1B (using Transformers.js v3+). Success depends on library support for 'gemma3_text'.</div>
     </div>
     <div id="chat-container">
@@ -99,7 +83,7 @@
             </div>
         </div>
         <div id="input-area">
-             <textarea id="userInput" placeholder="Please load the model first..." rows="1" disabled></textarea>
             <button id="speechButton" class="control-button" title="Speak message" disabled>🎤</button>
             <button id="toggleSpeakerButton" class="control-button" title="Toggle AI speech output" disabled>🔊</button>
             <button id="sendButton" class="control-button" title="Send message" disabled>➤</button>
@@ -107,7 +91,6 @@
     </div>
     <script type="module">
-        // Importing from the latest version specified in import map
         import { pipeline, env } from '@xenova/transformers';
         const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
@@ -120,7 +103,7 @@
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
         env.backends.onnx.prefer_alternative_execution_providers = true;
-        // DOM Elements (no changes)
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
@@ -130,15 +113,15 @@
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
-        // State Management (no changes)
         let generator = null;
         let isLoadingModel = false;
-        let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_v3_state_v1';
-        const historyKey = 'gemma3_1b_v3_history_v1';
-        // Web Speech API (no changes)
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
@@ -146,78 +129,208 @@
         // --- Initialization ---
         window.addEventListener('load', () => {
-            loadState();
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
-            updateChatUIState(false);
-            if (conversationHistory.length > 0) displayHistory();
             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. Attempting to load ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
-        function loadState() { /* No changes */
              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); } catch(e) { conversationHistory = []; } }
          }
-         function saveState() { /* No changes */
              localStorage.setItem(stateKey, JSON.stringify(botState));
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
-         function displayHistory() { /* No changes */
-             chatbox.innerHTML = ''; conversationHistory.forEach(msg => displayMessage(msg.sender, msg.text, false));
          }
         // --- UI Update Functions ---
-        function displayMessage(sender, text, animate = true, isError = false) { /* No changes */
-             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') { /* No changes */
             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
         }
-        function updateChatUIState(isModelLoadedSuccessfully) { /* No changes */
-            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 load the model first..."; }
         }
-        function updateSpeakerButtonUI() { /* No changes */
             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); }
         function setupInputAutosize() { userInput.addEventListener('input', () => { userInput.style.height = 'auto'; userInput.style.height = userInput.scrollHeight + 'px'; updateChatUIState(generator !== null); }); }
         // --- Model & AI Logic ---
-        async function handleLoadModelClick() { /* No changes */
-            if (isLoadingModel || generator) return; isLoadingModel = true; generator = null; updateChatUIState(false); await initializeModel(MODEL_NAME); isLoadingModel = false; updateChatUIState(generator !== null);
         }
-        async function initializeModel(modelId) { /* No changes */
-            updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" } using latest Transformers.js...`, 'loading'); displayMessage('system', `Attempting to load ${modelId} using latest library version.`, false);
             try {
-                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 with latest library!`, 'success'); displayMessage('system', `[SUCCESS] ${modelId} loaded. The newer library version might support it.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId} (with latest library):`, error); let errorMsg = `Failed to load ${modelId}: ${error.message}.`; if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) { errorMsg += " The 'gemma3_text' type is still likely unsupported even in the latest library version, or the ONNX conversion has issues."; } else if (error.message.includes("split")) { errorMsg += " A TypeError occurred, possibly related to model config parsing incompatibility."; } else { errorMsg += " Check console for details. Memory limits on HF Spaces could also be a factor."; } updateModelStatus(errorMsg, 'error'); displayMessage('system', `[ERROR] ${errorMsg}`, true, true); generator = null;
             }
         }
-        function buildPrompt() { /* No changes */
-             const historyLimit = 5; const recentHistory = conversationHistory.slice(-historyLimit); let prompt = "<start_of_turn>system\nYou are 'AI Assistant', a helpful AI assistant. Answer the user's questions clearly and concisely in English.\n<end_of_turn>\n"; recentHistory.forEach(msg => { const role = msg.sender === 'user' ? 'user' : 'model'; prompt += `<start_of_turn>${role}\n${msg.text}\n<end_of_turn>\n`; }); prompt += "<start_of_turn>model\n"; console.log("Generated Prompt:", prompt); return prompt;
-         }
-         function cleanupResponse(responseText, prompt) { /* No changes */
-             let cleaned = responseText; if (cleaned.startsWith(prompt)) { cleaned = cleaned.substring(prompt.length); } else { cleaned = cleaned.replace(/^model\n?/, '').trim(); } cleaned = cleaned.replace(/<end_of_turn>/g, '').trim(); cleaned = cleaned.replace(/<start_of_turn>/g, '').trim(); cleaned = cleaned.replace(/^['"]/, '').replace(/['"]$/, ''); if (!cleaned || cleaned.length < 2) { const fallbacks = [ "Sorry, I didn't quite understand.", "Could you please rephrase that?", "I'm not sure how to respond." ]; return fallbacks[Math.floor(Math.random() * fallbacks.length)]; } return cleaned;
-         }
-        async function handleUserMessage() { /* No changes */
-            const userText = userInput.value.trim(); if (!userText || !generator || isLoadingModel) return; userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true); displayMessage('user', userText); conversationHistory.push({ sender: 'user', text: userText }); updateModelStatus("AI thinking...", "loading"); const prompt = buildPrompt(); try { const outputs = await generator(prompt, { max_new_tokens: 300, temperature: 0.7, repetition_penalty: 1.1, top_k: 50, top_p: 0.9, do_sample: true }); const rawResponse = Array.isArray(outputs) ? outputs[0].generated_text : outputs.generated_text; const replyText = cleanupResponse(rawResponse, prompt); displayMessage('bot', replyText); conversationHistory.push({ sender: 'bot', text: 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); const errorReply = "Sorry, I encountered an error generating the response."; displayMessage('bot', errorReply); conversationHistory.push({ sender: 'bot', text: errorReply }); } 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 - 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;
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
+        body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); padding: 10px; overscroll-behavior: none; }
+        #control-panel { background: var(--header-bg); padding: 15px; border-radius: 8px; margin-bottom: 10px; box-shadow: var(--header-shadow); width: 100%; max-width: 600px; border: 1px solid var(--border-color); text-align: center; }
+        #loadModelButton { padding: 10px 20px; font-size: 1em; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; margin-bottom: 10px; }
         #loadModelButton:hover:not(:disabled) { background-color: var(--button-hover-bg); }
         #loadModelButton:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; }
         #model-status { font-size: 0.9em; padding: 10px; border-radius: 4px; text-align: center; min-height: 40px; line-height: 1.4; }
         #model-status.loading { background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-color); }
         #model-status.success { background-color: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-color); }
         #model-status.error { background-color: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-color); }
+        #chat-container { width: 100%; max-width: 600px; height: 75vh; max-height: 700px; background-color: #ffffff; border-radius: 12px; box-shadow: var(--container-shadow); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); }
         h1 { text-align: center; color: var(--primary-color); padding: 15px; background-color: var(--header-bg); border-bottom: 1px solid var(--border-color); font-size: 1.2em; font-weight: 500; flex-shrink: 0; box-shadow: var(--header-shadow); position: relative; z-index: 10; }
         #chatbox { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); background-color: var(--bg-color); }
         #chatbox::-webkit-scrollbar { width: 6px; } #chatbox::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 3px; } #chatbox::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 3px; }
         .control-button:active:not(:disabled) { transform: scale(0.95); }
         .control-button:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; transform: none; box-shadow: none; }
         #toggleSpeakerButton.muted { background-color: #aaa; }
+        @media (max-width: 600px) { /* Responsive styles */
+             body { padding: 5px; justify-content: flex-start; } #control-panel { margin-bottom: 5px; padding: 12px; }
              #chat-container { width: 100%; height: auto; flex-grow: 1; border-radius: 12px; max-height: none; margin-bottom: 5px; }
              h1 { font-size: 1.1em; padding: 12px; } #chatbox { padding: 12px 8px; gap: 10px; }
              #messages div { max-width: 90%; font-size: 0.95em; padding: 9px 14px;}
     <div id="control-panel">
         <h2>Model Loader</h2>
         <button id="loadModelButton">Load Gemma 3 1B Model (Q4)</button>
+        <div id="model-status" class="info">Click button to load Gemma 3 1B (using Transformers.js v3+ & Q4 dtype). **Warning:** Model loading is expected to fail due to library incompatibility.</div>
     </div>
     <div id="chat-container">
             </div>
         </div>
         <div id="input-area">
+             <textarea id="userInput" placeholder="Please attempt to load the model first..." rows="1" disabled></textarea>
             <button id="speechButton" class="control-button" title="Speak message" disabled>🎤</button>
             <button id="toggleSpeakerButton" class="control-button" title="Toggle AI speech output" disabled>🔊</button>
             <button id="sendButton" class="control-button" title="Send message" disabled>➤</button>
     </div>
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
         const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
         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');
         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;
         // --- 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}`);
         }
+        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); }
         function setupInputAutosize() { userInput.addEventListener('input', () => { userInput.style.height = 'auto'; userInput.style.height = userInput.scrollHeight + 'px'; updateChatUIState(generator !== null); }); }
         // --- 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);