Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on 21 days ago

Commit

3ba6123

verified ·

1 Parent(s): fa541aa

Update index.html

Browse files

Files changed (1) hide show

index.html +109 -303

index.html CHANGED Viewed

@@ -1,158 +1,80 @@
 <!DOCTYPE html>
-<html lang="en"> {/* Language set to English */}
 <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)</title> {/* English Title */}
     <style>
-        /* Google Fonts (Using a common English font) */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        /* CSS Variables (Neutral theme) */
         :root {
-            --primary-color: #007bff; /* Standard blue */
-            --secondary-color: #6c757d; /* Gray */
-            --text-color: #212529;
-            --bg-color: #f8f9fa;
-            --user-msg-bg: #e7f5ff; /* Light blue */
-            --user-msg-text: #004085;
-            --bot-msg-bg: #ffffff;
-            --bot-msg-border: #dee2e6;
-            --system-msg-color: #6c757d;
-            --border-color: #dee2e6;
-            --input-bg: #ffffff;
-            --input-border: #ced4da;
-            --button-bg: var(--primary-color);
-            --button-hover-bg: #0056b3;
-            --button-disabled-bg: #adb5bd;
-            --scrollbar-thumb: var(--primary-color);
-            --scrollbar-track: #e9ecef;
-            --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);
         }
-        /* Reset and Base Styles */
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
         body {
-            font-family: 'Roboto', sans-serif; /* Changed Font */
-            display: flex; flex-direction: column; align-items: center; justify-content: center;
-            min-height: 100vh; background-color: var(--bg-color); color: var(--text-color);
-            padding: 5px; overscroll-behavior: none;
         }
-        /* Chat Container */
         #chat-container {
             width: 100%; max-width: 600px; height: calc(100vh - 10px); max-height: 800px;
-            background-color: #ffffff; border-radius: 12px; /* Less rounded */
-            box-shadow: var(--container-shadow); display: flex; flex-direction: column;
-            overflow: hidden; border: 1px solid var(--border-color);
         }
-        /* Header */
         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 Area */
         #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); /* Match body background */
         }
         #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; }
-        /* Message Bubbles */
         #messages div {
-            padding: 10px 15px; border-radius: 16px; max-width: 85%; word-wrap: break-word;
-            line-height: 1.5; font-size: 1em; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-            position: relative; animation: fadeIn 0.25s ease-out;
         }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-        .user-message {
-            background: var(--user-msg-bg); color: var(--user-msg-text); align-self: flex-end;
-            border-bottom-right-radius: 4px; margin-left: auto;
-        }
-        .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;
-        }
-        /* Loading & Status Indicators */
-        .status-indicator {
-            text-align: center; padding: 8px 0; color: var(--system-msg-color); font-size: 0.9em;
-            height: 24px; display: flex; align-items: center; justify-content: center; gap: 8px;
-            flex-shrink: 0; background-color: var(--bg-color);
-        }
-        #loading span.spinner {
-            display: inline-block; width: 14px; height: 14px; border: 2px solid var(--primary-color);
-            border-bottom-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle;
-        }
         @keyframes spin { to { transform: rotate(360deg); } }
-        /* Input Area */
-        #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); }
-        /* Buttons */
-        .control-button {
-            padding: 0; border: none; border-radius: 50%; cursor: pointer;
-            background-color: var(--button-bg); color: white; width: 42px; height: 42px;
-            font-size: 1.3em; display: flex; align-items: center; justify-content: center;
-            flex-shrink: 0; transition: background-color 0.2s ease, transform 0.1s ease;
-            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
-        }
         .control-button:hover:not(:disabled) { background-color: var(--button-hover-bg); transform: translateY(-1px); }
         .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; }
-        /* Responsive Design */
         @media (max-width: 600px) {
-            body { padding: 0; }
-            #chat-container { width: 100%; height: 100vh; max-height: none; border-radius: 0; border: none; box-shadow: none; }
-            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;}
-            #input-area { padding: 8px; gap: 5px; }
-            #userInput { padding: 9px 14px; min-height: 40px; }
             .control-button { width: 40px; height: 40px; font-size: 1.2em; }
         }
     </style>
-    <!-- Import map -->
     <script type="importmap">
     { "imports": { "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/[email protected]" } }
     </script>
 </head>
 <body>
     <div id="chat-container">
-        <h1 id="chatbot-name">AI Assistant</h1> {/* English Header */}
         <div id="loading" class="status-indicator" style="display: none;"></div>
         <div id="speech-status" class="status-indicator" style="display: none;"></div>
         <div id="chatbox">
@@ -161,10 +83,10 @@
             </div>
         </div>
         <div id="input-area">
-             <textarea id="userInput" placeholder="How can I help you today?" rows="1" disabled></textarea> {/* English Placeholder */}
-            <button id="speechButton" class="control-button" title="Speak message" disabled>🎤</button> {/* English Title */}
-            <button id="toggleSpeakerButton" class="control-button" title="Toggle AI speech output" disabled>🔊</button> {/* English Title */}
-            <button id="sendButton" class="control-button" title="Send message" disabled>➤</button> {/* English Title */}
         </div>
     </div>
@@ -172,9 +94,9 @@
         import { pipeline, env } from '@xenova/transformers';
         // --- Configuration ---
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA'; // Still using this model
         const TASK = 'text-generation';
-        // No dtype specified to avoid previous loading error
         // ONNX Runtime & WebGPU config
         env.allowLocalModels = false;
@@ -192,21 +114,20 @@
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
         const speechStatus = document.getElementById('speech-status');
-        // --- State Management (English) ---
         let generator = null;
         let conversationHistory = [];
         let botState = {
-            botName: "AI Assistant", // English Name
-            userName: "User",       // English Default Name
             botSettings: { useSpeechOutput: true }
         };
-         const stateKey = 'generalBotState_gemma3_1b_en_v1'; // New key for English version
-         const historyKey = 'generalBotHistory_gemma3_1b_en_v1';
-        // --- Web Speech API (English) ---
         let recognition = null;
         let synthesis = window.speechSynthesis;
-        let targetVoice = null; // Target English voice
         let isListening = false;
         // --- Initialization ---
@@ -214,43 +135,33 @@
             loadState();
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
-            initializeSpeechAPI(); // Initialize Speech API for English
-            await initializeModel(); // Attempt to load the model
             setupInputAutosize();
-             setTimeout(loadVoices, 500); // Load voices (will look for English)
         });
         // --- State Persistence ---
-        function loadState() {
             const savedState = localStorage.getItem(stateKey);
-            if (savedState) {
-                try {
-                    const loadedState = JSON.parse(savedState);
-                    botState = {
-                         ...botState, ...loadedState,
-                         botSettings: { ...botState.botSettings, ...(loadedState.botSettings || {}) },
-                     };
-                } catch (e) { console.error("Failed to parse state:", e); }
-            }
             const savedHistory = localStorage.getItem(historyKey);
-            if (savedHistory) {
-                try { conversationHistory = JSON.parse(savedHistory); displayHistory(); }
-                catch (e) { console.error("Failed to parse history:", e); conversationHistory = []; }
-            }
         }
-        function saveState() {
             localStorage.setItem(stateKey, JSON.stringify(botState));
             localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
         }
-        function displayHistory() {
-            chatbox.innerHTML = '';
-            conversationHistory.forEach(msg => displayMessage(msg.sender, msg.text, false));
         }
         // --- UI Update Functions ---
-        function displayMessage(sender, text, animate = true) {
             const messageDiv = document.createElement('div');
-            const messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message';
             messageDiv.classList.add(messageClass);
             if (!animate) messageDiv.style.animation = 'none';
@@ -264,7 +175,7 @@
             chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
         }
-        function setLoading(isLoading, message = "AI thinking...") { // English message
             loadingIndicator.style.display = isLoading ? 'flex' : 'none';
             loadingIndicator.innerHTML = isLoading ? `<span class="spinner"></span> ${message}` : '';
             const disableButtons = isLoading || !generator;
@@ -273,46 +184,40 @@
             speechButton.disabled = disableButtons || isListening || !recognition;
             toggleSpeakerButton.disabled = disableButtons || !synthesis;
         }
-        function updateSpeakerButtonUI() {
             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇';
-            toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; // English title
             toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
         }
-        function showSpeechStatus(message) {
-            speechStatus.textContent = message;
-            speechStatus.style.display = message ? 'flex' : 'none';
             if (message) loadingIndicator.style.display = 'none';
         }
-        function setupInputAutosize() {
-             userInput.addEventListener('input', () => {
-                 userInput.style.height = 'auto';
-                 userInput.style.height = userInput.scrollHeight + 'px';
-                 sendButton.disabled = userInput.value.trim() === '' || !generator || loadingIndicator.style.display === 'flex';
-             });
          }
         // --- Model & AI Logic ---
         async function initializeModel() {
-            setLoading(true, "Connecting to AI model..."); // English message
-            // **CRITICAL WARNING:** The following model loading might still fail due to potential incompatibility.
-            displayMessage('system', `[NOTICE] Attempting to load ${MODEL_NAME}... This might take a while.`, false);
-            displayMessage('system', `[WARNING] If loading fails with 'TypeError', the model ${MODEL_NAME} might be incompatible with this library version. Consider trying 'Xenova/gemma-2b-it'.`, false);
             try {
                 generator = await pipeline(TASK, MODEL_NAME, {
-                    // No dtype option
                     progress_callback: (progress) => {
                         const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                         setLoading(true, msg);
                     },
                 });
-                displayMessage('system', "[NOTICE] AI Model ready! How can I assist you?", false); // English message
             } catch (error) {
                 console.error("Model loading failed:", error);
-                displayMessage('system', `[ERROR] Failed to load AI model: ${error.message}. Please refresh or try a different model.`, false); // English message
                 setLoading(false);
                 loadingIndicator.textContent = 'Model Load Failed';
                  return;
@@ -327,162 +232,63 @@
         }
         // Build prompt for English conversation
-        function buildPrompt() {
-            const historyLimit = 6;
-            const recentHistory = conversationHistory.slice(-historyLimit);
-            // Using Gemma Instruct format for English
-            let prompt = "<start_of_turn>system\n";
-            prompt += `You are '${botState.botName}', 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"; // Model response starts here
-            console.log("Generated English Prompt:", prompt);
-            return prompt;
         }
-        // Cleanup response (English focus)
-        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 seems empty:", cleaned);
-                const fallbacks = [ "Sorry, I didn't quite understand. Could you please rephrase?", "Hmm, I'm not sure how to respond to that. Can you try asking differently?", "Is there something else I can help you with?" ]; // English fallbacks
-                return fallbacks[Math.floor(Math.random() * fallbacks.length)];
-            }
             return cleaned;
         }
         // --- Main Interaction Logic ---
-        async function handleUserMessage() {
-            const userText = userInput.value.trim();
-            if (!userText || !generator || loadingIndicator.style.display === 'flex') return;
-            userInput.value = ''; userInput.style.height = 'auto';
-            sendButton.disabled = true;
-            displayMessage('user', userText);
-            conversationHistory.push({ sender: 'user', text: userText });
-            setLoading(true);
-            const prompt = buildPrompt(); // Get English prompt
             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);
                  console.log("Cleaned English Output:", replyText);
-                 displayMessage('bot', replyText);
-                 conversationHistory.push({ sender: 'bot', text: replyText });
-                 if (botState.botSettings.useSpeechOutput && synthesis && targetVoice) {
-                     speakText(replyText); // Speak English response
-                 }
                  saveState();
             } catch (error) {
-                console.error("AI response generation error:", error);
-                displayMessage('system', `[ERROR] Failed to generate response: ${error.message}`); // English error
-                 const errorReply = "Sorry, I encountered an error while generating the response. Please try again later."; // English error reply
-                 displayMessage('bot', errorReply);
-                 conversationHistory.push({ sender: 'bot', text: errorReply });
-            } finally {
-                setLoading(false);
-                userInput.focus();
-            }
         }
         // --- Speech API Functions (English) ---
-        function initializeSpeechAPI() {
             const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (SpeechRecognition) {
-                recognition = new SpeechRecognition();
-                recognition.lang = 'en-US'; // Set to English
-                recognition.continuous = false; recognition.interimResults = false;
-                recognition.onstart = () => { isListening = true; speechButton.disabled = true; speechButton.textContent = '👂'; showSpeechStatus('Listening...'); }; // English status
-                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); showSpeechStatus(`Speech recognition error (${event.error})`); setTimeout(() => showSpeechStatus(''), 3000); }; // English status
-                recognition.onend = () => { isListening = false; speechButton.disabled = !generator; speechButton.textContent = '🎤'; if (speechStatus.textContent === 'Listening...') showSpeechStatus(''); };
-                 speechButton.disabled = false;
-            } else { console.warn("Speech Recognition not supported."); speechButton.style.display = 'none'; }
-            if (!synthesis) { console.warn("Speech Synthesis not supported."); toggleSpeakerButton.style.display = 'none'; }
-            else {
-                toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); });
-                 toggleSpeakerButton.disabled = false;
-            }
         }
-        function loadVoices() {
-            if (!synthesis) return;
-            let voices = synthesis.getVoices();
-            if (voices.length === 0) {
-                synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); };
-            } else { findAndSetVoice(voices); }
         }
-        // Find English voice
-        function findAndSetVoice(voices) {
-             // Prioritize US English voices
-             targetVoice = voices.find(v => v.lang === 'en-US');
-             // Fallback to any English voice
-             if (!targetVoice) targetVoice = 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. Speech output might use default voice.");
-                 displayMessage('system', "[NOTICE] No English voice found. Speech output may use the default system voice.", false); // English message
-             }
          }
-        // Speak English text
-        function speakText(text) {
-            if (!synthesis || !botState.botSettings.useSpeechOutput) return;
-            synthesis.cancel();
-            const utterance = new SpeechSynthesisUtterance(text);
-            if (targetVoice) {
-                 utterance.voice = targetVoice;
-                 utterance.lang = targetVoice.lang; // Use the found voice's language
-             } else {
-                 utterance.lang = 'en-US'; // Default to US English if no voice found
-             }
-            utterance.rate = 1.0; utterance.pitch = 1.0;
-            synthesis.speak(utterance);
         }
         // --- 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) {
-                try { recognition.start(); }
-                catch (error) { console.error("Rec start fail:", error); showSpeechStatus(`Failed to start recognition`); setTimeout(() => showSpeechStatus(''), 2000); isListening = false; speechButton.disabled = !generator; speechButton.textContent = '🎤';}
-            }
-        });
     </script>
 </body>

 <!DOCTYPE html>
+<html lang="en">
 <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 - Q4 Attempt)</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         :root {
+            --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529;
+            --bg-color: #f8f9fa; --user-msg-bg: #e7f5ff; --user-msg-text: #004085;
+            --bot-msg-bg: #ffffff; --bot-msg-border: #dee2e6; --system-msg-color: #6c757d;
+            --border-color: #dee2e6; --input-bg: #ffffff; --input-border: #ced4da;
+            --button-bg: var(--primary-color); --button-hover-bg: #0056b3; --button-disabled-bg: #adb5bd;
+            --scrollbar-thumb: var(--primary-color); --scrollbar-track: #e9ecef;
+            --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 {
+            font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center;
+            min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); padding: 5px; overscroll-behavior: none;
         }
         #chat-container {
             width: 100%; max-width: 600px; height: calc(100vh - 10px); max-height: 800px;
+            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; }
         #messages div {
+            padding: 10px 15px; border-radius: 16px; max-width: 85%; word-wrap: break-word; line-height: 1.5;
+            font-size: 1em; box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: relative; animation: fadeIn 0.25s ease-out;
         }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+        .user-message { background: var(--user-msg-bg); color: var(--user-msg-text); align-self: flex-end; border-bottom-right-radius: 4px; margin-left: auto; }
+        .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: #dc3545; font-weight: 500; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px 15px; border-radius: 8px; align-self: stretch; text-align: left; } /* Error Message Style */
+        .status-indicator { text-align: center; padding: 8px 0; color: var(--system-msg-color); font-size: 0.9em; height: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; background-color: var(--bg-color); }
+        #loading span.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--primary-color); border-bottom-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; }
         @keyframes spin { to { transform: rotate(360deg); } }
+        #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 { padding: 0; border: none; border-radius: 50%; cursor: pointer; background-color: var(--button-bg); color: white; width: 42px; height: 42px; font-size: 1.3em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.2s ease, transform 0.1s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
         .control-button:hover:not(:disabled) { background-color: var(--button-hover-bg); transform: translateY(-1px); }
         .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: 0; } #chat-container { width: 100%; height: 100vh; max-height: none; border-radius: 0; border: none; box-shadow: none; }
+            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;}
+            #input-area { padding: 8px; gap: 5px; } #userInput { padding: 9px 14px; min-height: 40px; }
             .control-button { width: 40px; height: 40px; font-size: 1.2em; }
         }
     </style>
     <script type="importmap">
     { "imports": { "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/[email protected]" } }
     </script>
 </head>
 <body>
     <div id="chat-container">
+        <h1 id="chatbot-name">AI Assistant</h1>
         <div id="loading" class="status-indicator" style="display: none;"></div>
         <div id="speech-status" class="status-indicator" style="display: none;"></div>
         <div id="chatbox">
             </div>
         </div>
         <div id="input-area">
+             <textarea id="userInput" placeholder="How can I help you today?" 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>
     </div>
         import { pipeline, env } from '@xenova/transformers';
         // --- Configuration ---
+        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
         const TASK = 'text-generation';
+        const QUANTIZATION = 'q4'; // Re-adding based on model card example
         // ONNX Runtime & WebGPU config
         env.allowLocalModels = false;
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
         const speechStatus = document.getElementById('speech-status');
+        // --- State Management ---
         let generator = null;
         let conversationHistory = [];
         let botState = {
+            botName: "AI Assistant", userName: "User",
             botSettings: { useSpeechOutput: true }
         };
+        const stateKey = 'generalBotState_gemma3_1b_en_v2'; // Updated key
+        const historyKey = 'generalBotHistory_gemma3_1b_en_v2';
+        // --- Web Speech API ---
         let recognition = null;
         let synthesis = window.speechSynthesis;
+        let targetVoice = null;
         let isListening = false;
         // --- Initialization ---
             loadState();
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
+            initializeSpeechAPI();
+            await initializeModel();
             setupInputAutosize();
+             setTimeout(loadVoices, 500);
         });
         // --- State Persistence ---
+        function loadState() { /* No changes needed */
             const savedState = localStorage.getItem(stateKey);
+            if (savedState) { try { const loadedState = JSON.parse(savedState); botState = { ...botState, ...loadedState, botSettings: { ...botState.botSettings, ...(loadedState.botSettings || {}) }, }; } catch (e) { console.error("Failed to parse state:", e); } }
             const savedHistory = localStorage.getItem(historyKey);
+            if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); displayHistory(); } catch (e) { console.error("Failed to parse history:", e); conversationHistory = []; } }
         }
+        function saveState() { /* No changes needed */
             localStorage.setItem(stateKey, JSON.stringify(botState));
             localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
         }
+        function displayHistory() { /* No changes needed */
+            chatbox.innerHTML = ''; conversationHistory.forEach(msg => displayMessage(msg.sender, msg.text, false));
         }
         // --- UI Update Functions ---
+        function displayMessage(sender, text, animate = true, isError = false) { // Added isError flag
             const messageDiv = document.createElement('div');
+            let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message';
+            if (isError) { messageClass = 'error-message'; } // Apply error style
             messageDiv.classList.add(messageClass);
             if (!animate) messageDiv.style.animation = 'none';
             chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
         }
+        function setLoading(isLoading, message = "AI thinking...") { /* No changes needed */
             loadingIndicator.style.display = isLoading ? 'flex' : 'none';
             loadingIndicator.innerHTML = isLoading ? `<span class="spinner"></span> ${message}` : '';
             const disableButtons = isLoading || !generator;
             speechButton.disabled = disableButtons || isListening || !recognition;
             toggleSpeakerButton.disabled = disableButtons || !synthesis;
         }
+        function updateSpeakerButtonUI() { /* No changes needed */
             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) { /* No changes needed */
+            speechStatus.textContent = message; speechStatus.style.display = message ? 'flex' : 'none';
             if (message) loadingIndicator.style.display = 'none';
         }
+        function setupInputAutosize() { /* No changes needed */
+             userInput.addEventListener('input', () => { userInput.style.height = 'auto'; userInput.style.height = userInput.scrollHeight + 'px'; sendButton.disabled = userInput.value.trim() === '' || !generator || loadingIndicator.style.display === 'flex'; });
          }
         // --- Model & AI Logic ---
         async function initializeModel() {
+            setLoading(true, "Connecting to AI model (Q4)..."); // Indicate Q4 attempt
+            displayMessage('system', `[NOTICE] Attempting to load ${MODEL_NAME} with { dtype: "${QUANTIZATION}" }...`, false);
             try {
+                // *** Re-adding dtype: QUANTIZATION based on model card example ***
                 generator = await pipeline(TASK, MODEL_NAME, {
+                    dtype: QUANTIZATION,
                     progress_callback: (progress) => {
                         const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                         setLoading(true, msg);
                     },
                 });
+                displayMessage('system', "[NOTICE] AI Model ready! How can I assist you?", false);
             } catch (error) {
                 console.error("Model loading failed:", error);
+                // Display a more prominent error message in the chat
+                displayMessage('system', `[ERROR] Failed to load AI model (${MODEL_NAME} with ${QUANTIZATION}).`, true, true); // Use isError flag
+                displayMessage('system', `Error details: ${error.message}. This model might be incompatible. Please try refreshing or consider using a different model like 'Xenova/gemma-2b-it'.`, true, true);
                 setLoading(false);
                 loadingIndicator.textContent = 'Model Load Failed';
                  return;
         }
         // Build prompt for English conversation
+        function buildPrompt() { /* No changes needed */
+            const historyLimit = 6; const recentHistory = conversationHistory.slice(-historyLimit);
+            let prompt = "<start_of_turn>system\nYou are 'AI Assistant', a helpful AI assistant. Answer the user's questions clearly and concisely in English.\n<end_of_turn>\n";
+            recentHistory.forEach(msg => { const role = msg.sender === 'user' ? 'user' : 'model'; prompt += `<start_of_turn>${role}\n${msg.text}\n<end_of_turn>\n`; });
+            prompt += "<start_of_turn>model\n";
+            console.log("Generated English Prompt:", prompt); return prompt;
         }
+        // Cleanup response
+        function cleanupResponse(responseText, prompt) { /* No changes needed */
+            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 seems empty:", cleaned); const fallbacks = [ "Sorry, I didn't quite understand. Could you please rephrase?", "Hmm, I'm not sure how to respond to that. Can you try asking differently?", "Is there something else I can help you with?" ]; return fallbacks[Math.floor(Math.random() * fallbacks.length)]; }
             return cleaned;
         }
         // --- Main Interaction Logic ---
+        async function handleUserMessage() { /* No changes needed */
+            const userText = userInput.value.trim(); if (!userText || !generator || loadingIndicator.style.display === 'flex') return;
+            userInput.value = ''; userInput.style.height = 'auto'; sendButton.disabled = true;
+            displayMessage('user', userText); conversationHistory.push({ sender: 'user', text: userText });
+            setLoading(true); 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);
                  console.log("Cleaned English Output:", replyText);
+                 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); // Show error in chat
+                 const errorReply = "Sorry, I encountered an error generating the response."; displayMessage('bot', errorReply); conversationHistory.push({ sender: 'bot', text: errorReply });
+            } finally { setLoading(false); userInput.focus(); }
         }
         // --- Speech API Functions (English) ---
+        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; speechButton.disabled = true; speechButton.textContent = '👂'; showSpeechStatus('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); showSpeechStatus(`Speech recognition error (${event.error})`); setTimeout(() => showSpeechStatus(''), 3000); }; recognition.onend = () => { isListening = false; speechButton.disabled = !generator; speechButton.textContent = '🎤'; if (speechStatus.textContent === 'Listening...') showSpeechStatus(''); }; speechButton.disabled = false; } else { console.warn("Speech Recognition not supported."); speechButton.style.display = 'none'; }
+            if (!synthesis) { console.warn("Speech Synthesis not supported."); toggleSpeakerButton.style.display = 'none'; } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); toggleSpeakerButton.disabled = 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."); displayMessage('system', "[NOTICE] No English voice found.", false); }
          }
+        function speakText(text) { /* No changes needed */
+            if (!synthesis || !botState.botSettings.useSpeechOutput) return; synthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); if (targetVoice) { utterance.voice = targetVoice; utterance.lang = targetVoice.lang; } else { utterance.lang = 'en-US'; } utterance.rate = 1.0; utterance.pitch = 1.0; synthesis.speak(utterance);
         }
         // --- 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) { try { recognition.start(); } catch (error) { console.error("Rec start fail:", error); showSpeechStatus(`Failed to start recognition`); setTimeout(() => showSpeechStatus(''), 2000); isListening = false; speechButton.disabled = !generator; speechButton.textContent = '🎤';} } });
     </script>
 </body>