Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on 21 days ago

Commit

4ec33a2

verified ·

1 Parent(s): 6b44370

Update index.html

Browse files

Files changed (1) hide show

index.html +97 -90

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 ONNX Attempt)</title> {/* Updated Title */}
     <style>
         /* CSS는 이전과 동일 */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@@ -23,16 +23,21 @@
         * { 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; }
@@ -53,6 +58,7 @@
         #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;}
@@ -60,32 +66,34 @@
              .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 to explicitly trigger model loading -->
-        <button id="loadModelButton">Load Gemma 3 1B ONNX (Q4)</button> {/* Updated Button Text */}
-        <div id="model-status" class="info">Click button to load `onnx-community/gemma-3-1b-it-ONNX` (Q4). **Warning:** Loading may still fail due to library incompatibility.</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>
@@ -95,10 +103,9 @@
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
-        // Configuration based on the LATEST user request
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX'; // Using the non-GQA version
         const TASK = 'text-generation';
-        const QUANTIZATION = 'q4'; // Using Q4 as specified in the example structure
         // Environment setup
         env.allowRemoteModels = true;
@@ -116,14 +123,15 @@
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
         // State
         let generator = null;
         let isLoadingModel = false;
-        let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_onnx_state_v1'; // New key for this specific model
-        const historyKey = 'gemma3_1b_onnx_history_v1';
         // Speech API
         let recognition = null;
@@ -133,43 +141,37 @@
         // --- Initialization ---
         window.addEventListener('load', () => {
-            loadState();
-            chatbotNameElement.textContent = botState.botName;
-            updateSpeakerButtonUI();
-            initializeSpeechAPI();
-            setupInputAutosize();
-            updateChatUIState(false);
-            displayHistory();
-            setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
-            console.log("Attempting to use Transformers.js (latest) loaded via import map.");
-            displayMessage('system', `Using latest Transformers.js. Ready to load ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
-         function loadState() {
              const savedState = localStorage.getItem(stateKey); if (savedState) { try { const loaded = JSON.parse(savedState); botState = { ...botState, ...loaded, botSettings: { ...botState.botSettings, ...(loaded.botSettings || {}) } }; } catch(e) {} }
              const savedHistory = localStorage.getItem(historyKey); if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); if (!Array.isArray(conversationHistory)) conversationHistory = []; } catch(e) { conversationHistory = []; } }
          }
-         function saveState() {
-             localStorage.setItem(stateKey, JSON.stringify(botState));
-             localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
-         function displayHistory() {
              chatbox.innerHTML = ''; conversationHistory.forEach(msg => { if (msg.role === 'user' || msg.role === 'assistant') { displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false); } });
          }
         // --- UI Update Functions ---
-        function displayMessage(sender, text, animate = true, isError = false) {
              const messageDiv = document.createElement('div'); let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message'; if (sender === 'system' && isError) messageClass = 'error-message'; messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none'; text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>'); messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
-        function updateModelStatus(message, type = 'info') {
             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
         }
-        function updateChatUIState(isModelLoadedSuccessfully) {
-            userInput.disabled = !isModelLoadedSuccessfully || isLoadingModel; sendButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || userInput.value.trim() === ''; speechButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || isListening || !recognition; toggleSpeakerButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || !synthesis; loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; if (isModelLoadedSuccessfully) { userInput.placeholder = "How can I help you today?"; } else if (isLoadingModel) { userInput.placeholder = "Model loading..."; } else { userInput.placeholder = "Please attempt to load the model first..."; }
         }
-        function updateSpeakerButtonUI() {
             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇'; toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
         }
         function showSpeechStatus(message) { console.log("Speech Status:", message); }
@@ -179,41 +181,46 @@
         async function handleLoadModelClick() {
             if (isLoadingModel || generator) return;
             isLoadingModel = true; generator = null;
             updateChatUIState(false);
-            // Pass the specific model name requested by the user
-            await initializeModel(MODEL_NAME);
             isLoadingModel = false;
             updateChatUIState(generator !== null);
         }
-        // Initialize model using the exact parameters from the latest example structure
-        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 per the example structure provided by user
-                generator = await pipeline(TASK, modelId, {
-                    dtype: QUANTIZATION, // Explicitly use q4
-                    progress_callback: (progress) => {
-                         const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
-                         updateModelStatus(msg, 'loading');
-                     }
-                });
-                updateModelStatus(`${modelId} loaded successfully!`, 'success');
-                displayMessage('system', `[SUCCESS] ${modelId} loaded.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId} (Strict Attempt):`, error);
                 let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
-                // Provide specific feedback based on likely errors
                 if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
-                    errorMsg += " The 'gemma3_text' model type is likely unsupported by this library version.";
                 } else if (error.message.includes("split is not a function")) {
-                     errorMsg += " A TypeError occurred, likely due to config parsing incompatibility.";
                  } else {
-                     errorMsg += " Unknown error. Check console/network/memory.";
                  }
                 updateModelStatus(errorMsg, 'error');
                 displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
@@ -221,46 +228,46 @@
             }
         }
-        // Build messages array as per documentation example
         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 for Pipeline:", messages);
-             return messages;
          }
-        // Cleanup response as per documentation example structure
         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 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 or generation failed.", 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;
             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 EXACTLY as in the example
                 const outputs = await generator(messages, {
                     max_new_tokens: 512,
-                    do_sample: false // From example
                 });
                 const replyText = cleanupResponse(outputs);
                 console.log("Cleaned AI Output:", replyText);
@@ -270,18 +277,18 @@
             } 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);

 <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');
         * { 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; }
         #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;}
              .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>
     <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;
         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;
         // --- 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 ---
+        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); if (!Array.isArray(conversationHistory)) conversationHistory = []; } 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 => { if (msg.role === 'user' || msg.role === 'assistant') { displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false); } });
          }
         // --- UI Update Functions ---
+        function displayMessage(sender, text, animate = true, isError = false) { /* 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; 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);
         }
         function showSpeechStatus(message) { console.log("Speech Status:", message); }
         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);
             }
         }
+        // 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);
             } 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);