Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on 21 days ago

Commit

276a148

verified ·

1 Parent(s): 4ec33a2

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -125

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 - Quantization Select)</title>
     <style>
         /* CSS는 이전과 동일 */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@@ -23,21 +23,16 @@
         * { 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); }
-        #control-panel h2 { font-size: 1.1em; margin-bottom: 10px; color: var(--primary-color); font-weight: 500; text-align: center; }
-        .option-group { margin-bottom: 10px; text-align: center; }
-        .option-group label { margin-right: 15px; font-size: 0.95em; }
-        .option-group select { padding: 5px 8px; border-radius: 4px; border: 1px solid var(--input-border); font-size: 0.95em; }
-        #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-top: 10px; display: block; margin-left: auto; margin-right: auto; }
         #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; margin-top: 10px; }
         #model-status.info { background-color: #e2e3e5; border: 1px solid #d6d8db; color: #383d41; }
         #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: 70vh; /* Adjusted height */ max-height: 650px; 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; }
@@ -58,7 +53,6 @@
         #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; }
-             .option-group { text-align: left; } .option-group label { display: block; margin-bottom: 8px; margin-right: 0; }
              #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;}
@@ -66,34 +60,31 @@
              .control-button { width: 40px; height: 40px; font-size: 1.2em; }
          }
     </style>
     <script type="importmap">
-    { "imports": { "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest" } }
     </script>
 </head>
 <body>
     <div id="control-panel">
         <h2>Model Loader</h2>
-        <div class="option-group">
-            <label for="quantization-select">Select Quantization (dtype):</label>
-            <select id="quantization-select">
-                <option value="q4" selected>Q4 (Recommended by Doc)</option>
-                <option value="fp16">FP16 (Half Precision)</option>
-                <option value="int8">INT8 (Integer Quantized)</option>
-                <!-- Add other dtypes if supported/tested, e.g., 'fp32' -->
-                 <option value="">Default (No dtype specified)</option>
-            </select>
-        </div>
-        <button id="loadModelButton">Load Gemma 3 1B Model</button>
-        <div id="model-status" class="info">Select quantization and click load. **Warning:** Loading `gemma3_text` models is expected to fail due to library incompatibility.</div>
     </div>
     <div id="chat-container">
         <h1 id="chatbot-name">AI Assistant</h1>
         <div id="chatbox">
-            <div id="messages"></div>
         </div>
         <div id="input-area">
-             <textarea id="userInput" placeholder="Please load a 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>
@@ -101,20 +92,22 @@
     </div>
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
-        // Using the GQA version as consistently referred to in user prompts
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
         const TASK = 'text-generation';
-        // Environment setup
         env.allowRemoteModels = true;
         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');
@@ -123,17 +116,16 @@
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
-        const quantizationSelect = document.getElementById('quantization-select'); // Dropdown
-        // State
         let generator = null;
         let isLoadingModel = false;
-        let conversationHistory = []; // Stores { role: 'user' | 'assistant', content: '...' }
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_quant_state_v1';
-        const historyKey = 'gemma3_1b_quant_history_v1';
-        // Speech API
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
@@ -141,12 +133,17 @@
         // --- Initialization ---
         window.addEventListener('load', () => {
-            loadState(); chatbotNameElement.textContent = botState.botName;
-            updateSpeakerButtonUI(); initializeSpeechAPI(); setupInputAutosize();
-            updateChatUIState(false); displayHistory(); setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
-            console.log("Using latest Transformers.js. Ready to load model.");
-            displayMessage('system', `Ready to load ${MODEL_NAME}. Select quantization type.`, false);
         });
         // --- State Persistence ---
@@ -169,7 +166,7 @@
             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; quantizationSelect.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 a 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);
@@ -178,117 +175,69 @@
         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;
-            const selectedQuantization = quantizationSelect.value || null; // Get selected dtype, null if empty string
-            updateChatUIState(false);
-            await initializeModel(MODEL_NAME, selectedQuantization); // Pass selected dtype
-            isLoadingModel = false;
-            updateChatUIState(generator !== null);
         }
-        // Initialize model with selected quantization type (dtype)
-        async function initializeModel(modelId, quantizationType) {
-            let options = {
-                 progress_callback: (progress) => {
-                     const msg = `[Loading ${quantizationType || 'Default'}]: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
-                     updateModelStatus(msg, 'loading');
-                 }
-            };
-            if (quantizationType) {
-                 options.dtype = quantizationType; // Set dtype only if selected
-             }
-            const loadingMsg = `Loading ${modelId} ${quantizationType ? `with dtype: "${quantizationType}"` : '(default dtype)'}... (Still expected to fail)`;
-            updateModelStatus(loadingMsg, 'loading');
-            displayMessage('system', `Attempting to load ${modelId} with ${quantizationType ? `dtype: ${quantizationType}` : 'default dtype'}...`, false);
             try {
-                // Create pipeline with selected options
-                generator = await pipeline(TASK, modelId, options);
-                // UNLIKELY TO REACH HERE
-                updateModelStatus(`${modelId} (dtype: ${quantizationType || 'auto'}) loaded successfully!`, 'success');
-                displayMessage('system', `[SUCCESS] ${modelId} loaded with ${quantizationType || 'auto'} dtype.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId} (dtype: ${quantizationType || 'auto'}):`, 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' model type is likely unsupported regardless of dtype.";
                 } else if (error.message.includes("split is not a function")) {
-                     errorMsg += " TypeError during config parsing, likely due to unsupported type.";
                  } else {
-                     errorMsg += " Check console/network/memory.";
                  }
                 updateModelStatus(errorMsg, 'error');
                 displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
-                generator = null;
             }
         }
-        // Build messages array (same as before)
-        function buildMessages(newUserMessage) {
-             let messages = [{ role: "system", content: "You are a helpful assistant." }];
-             messages = messages.concat(conversationHistory);
-             messages.push({ role: "user", content: newUserMessage });
-             console.log("Input Messages:", messages); return messages;
          }
-         // Cleanup response (same as before, assuming messages format output)
-        function cleanupResponse(output) {
-             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' || lastMessage.role === 'model') && typeof lastMessage.content === 'string') {
-                          let content = lastMessage.content.trim(); content = content.replace(/<end_of_turn>/g, '').trim(); if (content.length > 0) return content;
-                      }
-                 }
-             } catch (e) { console.error("Error parsing output:", e, output); }
-             console.warn("Could not extract response using standard structure.", 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();
-            if (!userText || !generator || isLoadingModel) return; // Check if generator is ready
-            userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true);
-            displayMessage('user', userText); conversationHistory.push({ role: 'user', content: userText });
-            updateModelStatus("AI thinking...", "loading");
-            const messages = buildMessages(userText); // Use messages format
-            try {
-                // Call generator with messages array and parameters
-                const outputs = await generator(messages, {
-                    max_new_tokens: 512,
-                    do_sample: true, // Example: enable sampling
-                    temperature: 0.7,
-                    top_k: 50
-                });
-                const replyText = cleanupResponse(outputs);
-                console.log("Cleaned AI Output:", replyText);
-                displayMessage('bot', replyText); 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);
-            } finally {
-                if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success"); // Assuming MODEL_NAME hasn't changed
-                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 - Final HTML Attempt)</title>
     <style>
         /* CSS는 이전과 동일 */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         * { 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.info { background-color: #e2e3e5; border: 1px solid #d6d8db; color: #383d41; }
         #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; }
         #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;}
              .control-button { width: 40px; height: 40px; font-size: 1.2em; }
          }
     </style>
+    <!-- Using LATEST version of Transformers.js via CDN -->
     <script type="importmap">
+    {
+      "imports": {
+        "@xenova/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 `onnx-community/gemma-3-1b-it-ONNX-GQA` (Q4). **Warning:** This model is known to be incompatible with Transformers.js via CDN and loading is expected to fail.</div>
     </div>
     <div id="chat-container">
         <h1 id="chatbot-name">AI Assistant</h1>
         <div id="chatbox">
+            <div id="messages">
+                <!-- Chat messages appear here -->
+            </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 necessary functions from the loaded library.
         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 ---
         env.allowRemoteModels = true;
         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');
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
+        // --- State Management ---
         let generator = null;
         let isLoadingModel = false;
+        let conversationHistory = []; // Stores { role: 'user' | 'assistant' | 'system', content: '...' }
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
+        const stateKey = 'gemma3_1b_strict_state_v2'; // Adjusted key
+        const historyKey = 'gemma3_1b_strict_history_v2';
+        // --- 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);
+            displayHistory();
+            setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
+            console.log("Using Transformers.js (latest) loaded via import map.");
+            displayMessage('system', `Using latest Transformers.js. Ready to load ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
             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 attempt to 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 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);
         }
+        // Initialize model EXACTLY as per the documentation example
+        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 {
+                // Pipeline creation EXACTLY as in the example
+                generator = await pipeline(TASK, modelId, {
+                    dtype: QUANTIZATION, // Use q4 as requested
+                    progress_callback: (progress) => {
+                         const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
+                         updateModelStatus(msg, 'loading');
+                     }
+                });
+                // If successful (HIGHLY UNLIKELY)
+                updateModelStatus(`${modelId} loaded successfully!`, 'success');
+                displayMessage('system', `[SUCCESS] ${modelId} loaded.`, false);
             } catch (error) {
+                // Catch and report the expected 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 += " As expected, the 'gemma3_text' model type is unsupported by this library version.";
                 } else if (error.message.includes("split is not a function")) {
+                     errorMsg += " As expected, a TypeError occurred during config parsing (incompatibility).";
                  } else {
+                     errorMsg += " Unknown error. Check console/network/memory.";
                  }
                 updateModelStatus(errorMsg, 'error');
                 displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
+                generator = null; // Ensure generator is null on failure
             }
         }
+        // Build messages array EXACTLY as per documentation example
+        function buildMessages(newUserMessage) { /* No changes */
+             let messages = [{ role: "system", content: "You are a helpful assistant." }]; messages = messages.concat(conversationHistory); messages.push({ role: "user", content: newUserMessage }); console.log("Input Messages for Pipeline:", messages); return messages;
          }
+         // Cleanup response EXACTLY as per documentation example (with safety checks)
+        function cleanupResponse(output) { /* No changes */
+             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' || lastMessage.role === 'model') && typeof lastMessage.content === 'string') { let content = lastMessage.content.trim(); content = content.replace(/<end_of_turn>/g, '').trim(); if (content.length > 0) return content; } } } catch (e) { console.error("Error parsing generator output with .at(-1):", e, "Output:", output); } console.warn("Could not extract response using output[0].generated_text.at(-1).content. Output structure might differ.", 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() { /* No changes needed, uses messages format */
+            const userText = userInput.value.trim(); if (!userText || !generator || isLoadingModel) return; userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true); displayMessage('user', userText); conversationHistory.push({ role: 'user', content: userText }); updateModelStatus("AI thinking...", "loading"); const messages = buildMessages(userText); try { const outputs = await generator(messages, { max_new_tokens: 512, do_sample: false }); const replyText = cleanupResponse(outputs); console.log("Cleaned AI Output:", replyText); displayMessage('bot', replyText); 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); } finally { if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success"); updateChatUIState(generator !== null); 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);