Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on Apr 12

Commit

f8a195e

verified ·

1 Parent(s): 060ac05

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -112

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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 Attempt)</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         :root {
@@ -19,6 +19,7 @@
             --header-bg: #ffffff; --header-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
             --container-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
         body {
@@ -28,10 +29,10 @@
         #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; /* Center button and status */
         }
         #loadModelButton {
-             padding: 10px 20px; font-size: 1em; background-color: var(--primary-color); /* Use 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); }
@@ -41,7 +42,6 @@
         #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); }
-        #model-status.tokenizer-only { background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-color); } /* Style for tokenizer only */
         #chat-container {
             width: 100%; max-width: 600px; height: 75vh; max-height: 700px; background-color: #ffffff;
@@ -57,6 +57,7 @@
         .bot-message { background-color: var(--bot-msg-bg); border: 1px solid var(--bot-msg-border); align-self: flex-start; border-bottom-left-radius: 4px; margin-right: auto; }
         .bot-message a { color: var(--primary-color); text-decoration: none; } .bot-message a:hover { text-decoration: underline; }
         .system-message { font-style: italic; color: var(--system-msg-color); text-align: center; font-size: 0.85em; background-color: transparent; box-shadow: none; align-self: center; max-width: 100%; padding: 5px 0; animation: none; }
         #input-area { display: flex; padding: 10px 12px; border-top: 1px solid var(--border-color); background-color: var(--header-bg); align-items: center; gap: 8px; flex-shrink: 0; }
         #userInput { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--input-border); border-radius: 20px; outline: none; font-size: 1em; font-family: 'Roboto', sans-serif; background-color: var(--input-bg); transition: border-color 0.2s ease; min-height: 42px; resize: none; overflow-y: auto; }
         #userInput:focus { border-color: var(--primary-color); }
@@ -65,7 +66,7 @@
         .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) {
              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; }
@@ -76,14 +77,20 @@
          }
     </style>
     <script type="importmap">
-    { "imports": { "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/[email protected]" } }
     </script>
 </head>
 <body>
     <div id="control-panel">
         <h2>Model Loader</h2>
-        <button id="loadModelButton">Load Gemma 3 1B Model</button>
-        <div id="model-status" class="info">Click the button to load the Gemma 3 1B model. Warning: Loading may fail due to incompatibility.</div>
     </div>
     <div id="chat-container">
@@ -102,16 +109,19 @@
     </div>
     <script type="module">
-        import { pipeline, AutoTokenizer, env } from '@xenova/transformers'; // Added AutoTokenizer
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA'; // Target model
         const TASK = 'text-generation';
-        const QUANTIZATION = 'q4'; // Attempting Q4 as per model card
         env.allowLocalModels = false;
         env.useBrowserCache = true;
-        env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
@@ -122,14 +132,12 @@
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
-        let generator = null; // Full pipeline
-        let tokenizer = null; // Separate tokenizer instance
-        let currentModelName = null;
         let isLoadingModel = false;
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_only_state_v1';
-        const historyKey = 'gemma3_1b_only_history_v1';
         let recognition = null;
         let synthesis = window.speechSynthesis;
@@ -142,10 +150,13 @@
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
-            updateChatUIState(false); // Initial state: model not loaded
-             if (conversationHistory.length > 0) displayHistory();
-             setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
         });
         function loadState() {
@@ -163,102 +174,80 @@
         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 (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, isTokenizerLoaded = false) {
-             const isReadyForChat = isModelLoadedSuccessfully; // Only enable full chat if pipeline loaded
-             userInput.disabled = !isReadyForChat || isLoadingModel;
-             sendButton.disabled = !isReadyForChat || isLoadingModel || userInput.value.trim() === '';
-             speechButton.disabled = !isReadyForChat || isLoadingModel || isListening || !recognition;
-             toggleSpeakerButton.disabled = !isReadyForChat || isLoadingModel || !synthesis;
-             loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; // Disable load button if loading or successful
-             if (isReadyForChat) { userInput.placeholder = "How can I help you today?"; }
-             else if (isLoadingModel) { userInput.placeholder = "Model loading..."; }
-             else if (isTokenizerLoaded) { userInput.placeholder = "Tokenizer loaded, but chat unavailable."; } // Tokenizer only state
-             else { userInput.placeholder = "Please 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, tokenizer !== null); }); }
         async function handleLoadModelClick() {
             if (isLoadingModel || generator) return;
             isLoadingModel = true;
-            currentModelName = MODEL_NAME; // Only one model now
-            generator = null; // Reset generator
-            tokenizer = null; // Reset tokenizer
-            updateChatUIState(false); // Disable UI while loading
-            await initializeModelAndTokenizer(currentModelName);
             isLoadingModel = false;
-            updateChatUIState(generator !== null, tokenizer !== null); // Update UI based on final state
         }
-        async function initializeModelAndTokenizer(modelId) {
-            updateModelStatus(`Loading ${modelId} (Q4)...`, 'loading');
-            let pipelineLoaded = false;
-            let tokenizerLoaded = false;
-            let loadError = null;
-            // --- Try loading the full pipeline first ---
             try {
                 generator = await pipeline(TASK, modelId, {
-                    dtype: QUANTIZATION, // Using Q4 as per model card
                     progress_callback: (progress) => {
-                         const msg = `[Loading Pipeline: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                          updateModelStatus(msg, 'loading');
                      }
                 });
-                pipelineLoaded = true;
-                tokenizer = generator.tokenizer; // Get tokenizer from successful pipeline
-                tokenizerLoaded = true;
-                updateModelStatus(`${modelId} pipeline loaded successfully!`, 'success');
-                displayMessage('system', `[SUCCESS] ${modelId} is ready for chat.`, false);
             } catch (error) {
-                console.error(`Pipeline loading failed for ${modelId}:`, error);
-                loadError = error; // Store error to check later
                 generator = null; // Ensure generator is null
-                updateModelStatus(`Pipeline loading failed for ${modelId}. Attempting tokenizer only...`, 'warning');
-                // --- If pipeline failed, try loading only the tokenizer ---
-                try {
-                    updateModelStatus(`Loading Tokenizer for ${modelId}...`, 'loading');
-                    tokenizer = await AutoTokenizer.from_pretrained(modelId, {
-                        progress_callback: (progress) => {
-                            const msg = `[Loading Tokenizer: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
-                            updateModelStatus(msg, 'loading');
-                        }
-                    });
-                    tokenizerLoaded = true;
-                    // Report specific failure for pipeline but success for tokenizer
-                    updateModelStatus(`Model Pipeline failed: ${loadError.message}. Tokenizer loaded successfully. Chat is disabled.`, 'tokenizer-only');
-                     displayMessage('system', `[WARNING] ${modelId} Model Pipeline failed to load. Tokenizer is available, but chat generation will not work.`, true, true);
-                } catch (tokenizerError) {
-                    console.error(`Tokenizer loading also failed for ${modelId}:`, tokenizerError);
-                    tokenizer = null; // Ensure tokenizer is null
-                    // Report double failure
-                     updateModelStatus(`FATAL: Failed to load both Pipeline and Tokenizer for ${modelId}. Pipeline Error: ${loadError.message}. Tokenizer Error: ${tokenizerError.message}`, 'error');
-                     displayMessage('system', `[FATAL ERROR] Could not load essential components for ${modelId}. Please check browser console and model compatibility.`, true, true);
-                }
             }
         }
         function buildPrompt() {
-             const historyLimit = 5; // Shorter context for 1B
-             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";
@@ -268,52 +257,39 @@
          function cleanupResponse(responseText, prompt) {
              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) { console.warn("Generated reply empty/short:", cleaned); 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() {
             const userText = userInput.value.trim();
-            // Check if GENERATOR (full pipeline) is loaded
             if (!userText || !generator || isLoadingModel) return;
-            userInput.value = ''; userInput.style.height = 'auto';
-            updateChatUIState(true); // Disable send button immediately
-            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 {
-                updateModelStatus(`${currentModelName} ready.`, "success");
-                updateChatUIState(true);
-                userInput.focus();
             }
         }
         // --- Speech API Functions ---
         function initializeSpeechAPI() {
               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, tokenizer !== 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 ? `${currentModelName} ready.` : (tokenizer ? 'Tokenizer loaded.' : 'No model loaded.'), generator ? 'success' : (tokenizer ? 'tokenizer-only' : 'info')), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null, tokenizer !== 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); // Initial state
           }
           function loadVoices() { if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
           function findAndSetVoice(voices) { 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."); } }
@@ -322,7 +298,7 @@
         // --- Event Listeners ---
         sendButton.addEventListener('click', handleUserMessage);
         userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleUserMessage(); } });
-        speechButton.addEventListener('click', () => { if (recognition && !isListening && generator && !isLoadingModel) { try { recognition.start(); } catch (error) { console.error("Rec start fail:", error); updateModelStatus(`Failed to start recognition`, 'error'); setTimeout(() => updateModelStatus(generator ? `${currentModelName} ready.` : (tokenizer ? 'Tokenizer loaded.' : 'No model loaded.'), generator ? 'success' : (tokenizer ? 'tokenizer-only' : 'info')), 2000); isListening = false; updateChatUIState(generator !== null, tokenizer !== null); } } });
     </script>
 </body>

 <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>
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         :root {
             --header-bg: #ffffff; --header-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
             --container-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
         }
+        /* 나머지 CSS는 이전과 동일하게 유지 */
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
         body {
         #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); }
         #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;
         .bot-message { background-color: var(--bot-msg-bg); border: 1px solid var(--bot-msg-border); align-self: flex-start; border-bottom-left-radius: 4px; margin-right: auto; }
         .bot-message a { color: var(--primary-color); text-decoration: none; } .bot-message a:hover { text-decoration: underline; }
         .system-message { font-style: italic; color: var(--system-msg-color); text-align: center; font-size: 0.85em; background-color: transparent; box-shadow: none; align-self: center; max-width: 100%; padding: 5px 0; animation: none; }
+        .error-message { color: var(--error-color); font-weight: 500; background-color: var(--error-bg); border: 1px solid var(--error-border); padding: 10px 15px; border-radius: 8px; align-self: stretch; text-align: left; }
         #input-area { display: flex; padding: 10px 12px; border-top: 1px solid var(--border-color); background-color: var(--header-bg); align-items: center; gap: 8px; flex-shrink: 0; }
         #userInput { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--input-border); border-radius: 20px; outline: none; font-size: 1em; font-family: 'Roboto', sans-serif; background-color: var(--input-bg); transition: border-color 0.2s ease; min-height: 42px; resize: none; overflow-y: auto; }
         #userInput:focus { border-color: var(--primary-color); }
         .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) { /* 반응형 스타일 유지 */
              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; }
          }
     </style>
     <script type="importmap">
+    {
+      "imports": {
+        "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest"
+        /* "/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest" */
+        /* "/transformers/": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest/" */
+      }
+    }
     </script>
 </head>
 <body>
     <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">
     </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';
         const TASK = 'text-generation';
+        const QUANTIZATION = 'q4';
         env.allowLocalModels = false;
         env.useBrowserCache = true;
+        env.backends.onnx.executionProviders = ['webgpu', 'wasm']; // Keep WebGPU priority
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
+        // Attempt to leverage WebGPU if available (v3 feature)
+        env.backends.onnx.prefer_alternative_execution_providers = true;
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
+        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'; // New key for v3 attempt
+        const historyKey = 'gemma3_1b_v3_history_v1';
         let recognition = null;
         let synthesis = window.speechSynthesis;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
+            updateChatUIState(false);
+            if (conversationHistory.length > 0) displayHistory();
+            setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
+             // Log the loaded library version (if possible, might not be exposed easily)
+             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);
         });
         function loadState() {
         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'; // Style system errors
              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 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); }); }
         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 Transformers.js...`, 'loading');
+            displayMessage('system', `Attempting to load ${modelId} using latest library version.`, false);
             try {
+                // Attempt pipeline creation with Q4 dtype and latest library
                 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');
                      }
                 });
+                // If successful (possible with v3+)
+                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; // Ensure generator is null
             }
         }
         function buildPrompt() {
+             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";
          function cleanupResponse(responseText, prompt) {
              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() {
             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() {
               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() { if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
           function findAndSetVoice(voices) { 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."); } }
         // --- Event Listeners ---
         sendButton.addEventListener('click', handleUserMessage);
         userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleUserMessage(); } });
+        speechButton.addEventListener('click', () => { if (recognition && !isListening && generator && !isLoadingModel) { try { recognition.start(); } catch (error) { console.error("Rec start fail:", error); updateModelStatus(`Failed to start recognition`, 'error'); setTimeout(() => updateModelStatus(generator ? `${MODEL_NAME} ready.` : 'Model not loaded.', generator ? 'success' : 'error'), 2000); isListening = false; updateChatUIState(generator !== null); } } });
     </script>
 </body>