Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on Apr 12

Commit

060ac05

verified ·

1 Parent(s): 4bfa00d

Update index.html

Browse files

Files changed (1) hide show

index.html +156 -225

index.html CHANGED Viewed

@@ -3,15 +3,16 @@
 <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 (Selectable Model)</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;
-            --error-color: #dc3545; --error-bg: #f8d7da; --error-border: #f5c6cb;
-            --success-color: #28a745; --success-bg: #d4edda; --success-border: #c3e6cb;
             --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;
@@ -21,80 +22,58 @@
         * { 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; }
-        .model-options label { margin-right: 15px; cursor: pointer; }
-        .model-options input[type="radio"] { margin-right: 5px; }
         #loadModelButton {
-            margin-top: 10px; padding: 8px 15px; font-size: 0.95em; background-color: var(--secondary-color);
-            color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s;
         }
-        #loadModelButton:hover:not(:disabled) { background-color: #5a6268; }
         #loadModelButton:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; }
-        #model-status { margin-top: 10px; font-size: 0.9em; padding: 8px; border-radius: 4px; text-align: center; }
-        #model-status.loading { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; }
-        #model-status.success { background-color: var(--success-bg); border: 1px solid var(--success-border); color: #155724; }
-        #model-status.error { background-color: var(--error-bg); border: 1px solid var(--error-border); color: #721c24; }
         #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 { /* Header 스타일 유지 */
-            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: var(--error-color); font-weight: 500; background-color: var(--error-bg); border: 1px solid var(--error-border);
-             padding: 10px 15px; border-radius: 8px; align-self: stretch; text-align: left;
-        }
-        .status-indicator { /* 여기서는 사용 안함, #model-status 로 대체 */
-             display: none;
-        }
-        #input-area { /* 입력 영역 스타일 유지 */
-            display: flex; padding: 10px 12px; border-top: 1px solid var(--border-color); background-color: var(--header-bg); align-items: center; gap: 8px; flex-shrink: 0;
-        }
         #userInput { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--input-border); border-radius: 20px; outline: none; font-size: 1em; font-family: 'Roboto', sans-serif; background-color: var(--input-bg); transition: border-color 0.2s ease; min-height: 42px; resize: none; overflow-y: auto; }
         #userInput:focus { border-color: var(--primary-color); }
-        .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: 5px; justify-content: flex-start; }
-            #control-panel { margin-bottom: 5px; padding: 12px; }
-            .model-options label { display: block; margin-bottom: 5px; } /* 모바일에서 세로 배치 */
-            #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;}
-            #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]" } }
@@ -102,17 +81,9 @@
 </head>
 <body>
     <div id="control-panel">
-        <h2>Select AI Model</h2>
-        <div class="model-options">
-            <label>
-                <input type="radio" name="modelSelection" value="Xenova/gemma-2b-it" checked> Gemma 2B (Recommended, Stable)
-            </label>
-            <label>
-                <input type="radio" name="modelSelection" value="onnx-community/gemma-3-1b-it-ONNX-GQA"> Gemma 3 1B (Experimental, Likely Fails)
-            </label>
-        </div>
-        <button id="loadModelButton">Load Selected Model</button>
-        <div id="model-status">No model loaded. Select a model and click load.</div>
     </div>
     <div id="chat-container">
@@ -123,7 +94,7 @@
             </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>
@@ -131,221 +102,188 @@
     </div>
     <script type="module">
-        import { pipeline, env } from '@xenova/transformers';
-        // Configuration is now more dynamic
         const TASK = 'text-generation';
-        const COMPATIBLE_MODEL = 'Xenova/gemma-2b-it'; // Known working model
-        const EXPERIMENTAL_MODEL = 'onnx-community/gemma-3-1b-it-ONNX-GQA'; // The problematic one
-        // ONNX Runtime & WebGPU config
         env.allowLocalModels = false;
         env.useBrowserCache = true;
         env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
-        // DOM Elements
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
         const chatbotNameElement = document.getElementById('chatbot-name');
         const speechButton = document.getElementById('speechButton');
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
-        const modelStatus = document.getElementById('model-status'); // Status display
-        const loadModelButton = document.getElementById('loadModelButton'); // Load button
-        const modelSelectionRadios = document.querySelectorAll('input[name="modelSelection"]');
-        // State Management
-        let generator = null; // Loaded pipeline
-        let currentModelName = null; // Name of the currently loaded model
-        let isLoadingModel = false; // Flag to prevent multiple loads
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'selectableBotState_en_v1'; // New key
-        const historyKey = 'selectableBotHistory_en_v1';
-        // Web Speech API
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
         let isListening = false;
-        // --- Initialization ---
         window.addEventListener('load', () => {
-            loadState(); // Load bot settings and potentially history
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
-            updateChatUIState(); // Initial UI state (disabled)
              setTimeout(loadVoices, 500);
-            // Add event listener for the load button
             loadModelButton.addEventListener('click', handleLoadModelClick);
-             // Restore potentially saved history (display requires chatbox ready)
-             if (conversationHistory.length > 0) displayHistory();
         });
-        // --- 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) { console.error("State parse error", e); } }
-             const savedHistory = localStorage.getItem(historyKey);
-             // Load history but don't display yet, wait for chatbox element
-             if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); } catch(e) { console.error("History parse error", 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, isError = false) {
              const messageDiv = document.createElement('div');
              let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message';
-             if (isError) messageClass = 'error-message'; // Use error class if needed (e.g., for response errors)
-             messageDiv.classList.add(messageClass);
-             if (!animate) messageDiv.style.animation = 'none';
-             text = text.replace(/</g, "<").replace(/>/g, ">");
-             text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-             text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>');
-             text = text.replace(/\n/g, '<br>');
-             messageDiv.innerHTML = text;
-             chatbox.appendChild(messageDiv);
-             chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
-         // Updates the model status display area
-         function updateModelStatus(message, type = 'info') { // type: 'info', 'loading', 'success', 'error'
-             modelStatus.textContent = message;
-             modelStatus.className = 'model-status'; // Reset classes
-             if (type) {
-                 modelStatus.classList.add(type);
-             }
-             console.log(`Model Status (${type}): ${message}`); // Also log status
          }
-         // Updates the enabled/disabled state of chat UI elements
-         function updateChatUIState() {
-             const modelLoaded = generator !== null;
-             userInput.disabled = !modelLoaded || isLoadingModel;
-             sendButton.disabled = !modelLoaded || isLoadingModel || userInput.value.trim() === '';
-             speechButton.disabled = !modelLoaded || isLoadingModel || isListening || !recognition;
-             toggleSpeakerButton.disabled = !modelLoaded || isLoadingModel || !synthesis;
-             loadModelButton.disabled = isLoadingModel || modelLoaded; // Disable load if loading or already loaded
-             if (modelLoaded) {
-                 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() {
-             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) {
-             // Simplified: log to console, or could update a small icon later
-             console.log("Speech Status:", message);
-             // Optionally update a dedicated small status area if needed
          }
-         function setupInputAutosize() {
-              userInput.addEventListener('input', () => {
-                  userInput.style.height = 'auto';
-                  userInput.style.height = userInput.scrollHeight + 'px';
-                  updateChatUIState(); // Update button state based on input
-              });
-          }
-        // --- Model & AI Logic ---
         async function handleLoadModelClick() {
-            if (isLoadingModel || generator) return; // Prevent multiple loads
-            const selectedModel = document.querySelector('input[name="modelSelection"]:checked').value;
-            if (!selectedModel) {
-                updateModelStatus("Please select a model first.", "error");
-                return;
-            }
             isLoadingModel = true;
-            currentModelName = null; // Reset current model name
-            updateChatUIState();
-            await initializeModel(selectedModel); // Call initialize with selected model
             isLoadingModel = false;
-            updateChatUIState(); // Update UI based on success/failure
         }
-        async function initializeModel(modelId) {
-            updateModelStatus(`Loading ${modelId}... This may take time.`, 'loading');
-            let pipelineOptions = {};
-            // *** IMPORTANT: Only add dtype for the experimental model ***
-            if (modelId === EXPERIMENTAL_MODEL) {
-                pipelineOptions.dtype = 'q4'; // Use q4 only for Gemma 3 1B as per its (potentially faulty) example
-                updateModelStatus(`Loading ${modelId} with Q4 quantization... (Experimental, might fail)`, 'loading');
-            }
             try {
-                pipelineOptions.progress_callback = (progress) => {
-                     const msg = `[Loading ${modelId}: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
-                     updateModelStatus(msg, 'loading');
-                 };
-                // Attempt to load the pipeline
-                generator = await pipeline(TASK, modelId, pipelineOptions);
-                currentModelName = modelId; // Store the loaded model name
-                updateModelStatus(`${currentModelName} loaded successfully!`, 'success');
-                displayMessage('system', `[NOTICE] ${currentModelName} is ready.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId}:`, error);
-                updateModelStatus(`Failed to load ${modelId}: ${error.message}`, 'error');
-                displayMessage('system', `[ERROR] Could not load ${modelId}. It might be incompatible. Try the other model.`, true, true); // Show error in chat too
-                generator = null; // Ensure generator is null on failure
-                currentModelName = null;
             }
         }
         function buildPrompt() {
-            const historyLimit = (currentModelName === EXPERIMENTAL_MODEL) ? 5 : 6; // Shorter context for 1B?
-            const recentHistory = conversationHistory.slice(-historyLimit);
-            let prompt = "<start_of_turn>system\nYou are 'AI Assistant', a helpful AI assistant. Answer the user's questions clearly and concisely in English.\n<end_of_turn>\n";
-            recentHistory.forEach(msg => { const role = msg.sender === 'user' ? 'user' : 'model'; prompt += `<start_of_turn>${role}\n${msg.text}\n<end_of_turn>\n`; });
-            prompt += "<start_of_turn>model\n";
-            console.log("Generated Prompt:", prompt); return prompt;
-        }
-        function cleanupResponse(responseText, prompt) {
-            let cleaned = responseText; if (cleaned.startsWith(prompt)) { cleaned = cleaned.substring(prompt.length); } else { cleaned = cleaned.replace(/^model\n?/, '').trim(); }
-            cleaned = cleaned.replace(/<end_of_turn>/g, '').trim(); cleaned = cleaned.replace(/<start_of_turn>/g, '').trim(); cleaned = cleaned.replace(/^['"]/, '').replace(/['"]$/, '');
-            if (!cleaned || cleaned.length < 2) { console.warn("Generated reply empty/short:", cleaned); const fallbacks = [ "Sorry, I didn't quite understand.", "Could you please rephrase that?", "I'm not sure how to respond." ]; return fallbacks[Math.floor(Math.random() * fallbacks.length)]; }
-            return cleaned;
-        }
-        // --- Main Interaction Logic ---
         async function handleUserMessage() {
             const userText = userInput.value.trim();
-            // Check if model is loaded AND not currently loading
             if (!userText || !generator || isLoadingModel) return;
             userInput.value = ''; userInput.style.height = 'auto';
-            updateChatUIState(); // Disable send button immediately
             displayMessage('user', userText);
             conversationHistory.push({ sender: 'user', text: userText });
-            updateModelStatus("AI thinking...", "loading"); // Use model status for thinking indication
             const prompt = buildPrompt();
             try {
@@ -364,34 +302,27 @@
                 displayMessage('bot', errorReply);
                 conversationHistory.push({ sender: 'bot', text: errorReply });
             } finally {
-                updateModelStatus(`${currentModelName} ready.`, "success"); // Reset status after thinking
-                updateChatUIState(); // Re-enable/check UI state
                 userInput.focus();
             }
         }
-        // --- Speech API Functions (English) ---
         function initializeSpeechAPI() {
-             const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-             if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { isListening = true; updateChatUIState(); console.log('Listening...'); /* Update UI via state */ }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${currentModelName} ready.` : 'No model loaded.', generator ? 'success' : 'info'), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(); 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(); // Initial state update
-         }
-         function loadVoices() {
-             if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); }
-         }
-         function findAndSetVoice(voices) {
-              targetVoice = voices.find(v => v.lang === 'en-US') || voices.find(v => v.lang.startsWith('en-'));
-              if (targetVoice) { console.log("Using English voice:", targetVoice.name, targetVoice.lang); } else { console.warn("No suitable English voice found."); }
           }
-         function speakText(text) {
-             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);
         userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleUserMessage(); } });
-        speechButton.addEventListener('click', () => { if (recognition && !isListening && generator && !isLoadingModel) { try { recognition.start(); } catch (error) { console.error("Rec start fail:", error); updateModelStatus(`Failed to start recognition`, 'error'); setTimeout(() => updateModelStatus(generator ? `${currentModelName} ready.` : 'No model loaded.', generator ? 'success' : 'info'), 2000); isListening = false; updateChatUIState(); } } });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>AI Assistant (Gemma 3 1B 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;
+            --error-color: #721c24; --error-bg: #f8d7da; --error-border: #f5c6cb;
+            --warning-color: #856404; --warning-bg: #fff3cd; --warning-border: #ffeeba;
+            --success-color: #155724; --success-bg: #d4edda; --success-border: #c3e6cb;
             --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;
         * { 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; /* Center button and status */
         }
         #loadModelButton {
+             padding: 10px 20px; font-size: 1em; background-color: var(--primary-color); /* Use primary color */
+             color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; margin-bottom: 10px;
         }
+        #loadModelButton:hover:not(:disabled) { background-color: var(--button-hover-bg); }
         #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); }
+        #model-status.tokenizer-only { background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-color); } /* Style for tokenizer only */
         #chat-container {
+            width: 100%; max-width: 600px; height: 75vh; max-height: 700px; background-color: #ffffff;
+            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; }
+        #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: 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;}
+             #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]" } }
 </head>
 <body>
     <div id="control-panel">
+        <h2>Model Loader</h2>
+        <button id="loadModelButton">Load Gemma 3 1B Model</button>
+        <div id="model-status" class="info">Click the button to load the Gemma 3 1B model. Warning: Loading may fail due to incompatibility.</div>
     </div>
     <div id="chat-container">
             </div>
         </div>
         <div id="input-area">
+             <textarea id="userInput" placeholder="Please load the model first..." rows="1" disabled></textarea>
             <button id="speechButton" class="control-button" title="Speak message" disabled>🎤</button>
             <button id="toggleSpeakerButton" class="control-button" title="Toggle AI speech output" disabled>🔊</button>
             <button id="sendButton" class="control-button" title="Send message" disabled>➤</button>
     </div>
     <script type="module">
+        import { pipeline, AutoTokenizer, env } from '@xenova/transformers'; // Added AutoTokenizer
+        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA'; // Target model
         const TASK = 'text-generation';
+        const QUANTIZATION = 'q4'; // Attempting Q4 as per model card
         env.allowLocalModels = false;
         env.useBrowserCache = true;
         env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
         const chatbotNameElement = document.getElementById('chatbot-name');
         const speechButton = document.getElementById('speechButton');
         const toggleSpeakerButton = document.getElementById('toggleSpeakerButton');
+        const modelStatus = document.getElementById('model-status');
+        const loadModelButton = document.getElementById('loadModelButton');
+        let generator = null; // Full pipeline
+        let tokenizer = null; // Separate tokenizer instance
+        let currentModelName = null;
+        let isLoadingModel = false;
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
+        const stateKey = 'gemma3_1b_only_state_v1';
+        const historyKey = 'gemma3_1b_only_history_v1';
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
         let isListening = false;
         window.addEventListener('load', () => {
+            loadState();
             chatbotNameElement.textContent = botState.botName;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
+            updateChatUIState(false); // Initial state: model not loaded
+             if (conversationHistory.length > 0) displayHistory();
              setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
         });
         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); } catch(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));
          }
         function displayMessage(sender, text, animate = true, isError = false) {
              const messageDiv = document.createElement('div');
              let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message';
+             if (isError) messageClass = 'error-message';
+             messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none';
+             text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>');
+             messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
+         function updateModelStatus(message, type = 'info') {
+             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
          }
+         function updateChatUIState(isModelLoadedSuccessfully, isTokenizerLoaded = false) {
+             const isReadyForChat = isModelLoadedSuccessfully; // Only enable full chat if pipeline loaded
+             userInput.disabled = !isReadyForChat || isLoadingModel;
+             sendButton.disabled = !isReadyForChat || isLoadingModel || userInput.value.trim() === '';
+             speechButton.disabled = !isReadyForChat || isLoadingModel || isListening || !recognition;
+             toggleSpeakerButton.disabled = !isReadyForChat || isLoadingModel || !synthesis;
+             loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; // Disable load button if loading or successful
+             if (isReadyForChat) { userInput.placeholder = "How can I help you today?"; }
+             else if (isLoadingModel) { userInput.placeholder = "Model loading..."; }
+             else if (isTokenizerLoaded) { userInput.placeholder = "Tokenizer loaded, but chat unavailable."; } // Tokenizer only state
+             else { userInput.placeholder = "Please load the model first..."; }
          }
+         function updateSpeakerButtonUI() { /* No change */
+             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇'; toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
          }
+         function showSpeechStatus(message) { console.log("Speech Status:", message); }
+         function setupInputAutosize() { userInput.addEventListener('input', () => { userInput.style.height = 'auto'; userInput.style.height = userInput.scrollHeight + 'px'; updateChatUIState(generator !== null, tokenizer !== null); }); }
         async function handleLoadModelClick() {
+            if (isLoadingModel || generator) return;
             isLoadingModel = true;
+            currentModelName = MODEL_NAME; // Only one model now
+            generator = null; // Reset generator
+            tokenizer = null; // Reset tokenizer
+            updateChatUIState(false); // Disable UI while loading
+            await initializeModelAndTokenizer(currentModelName);
             isLoadingModel = false;
+            updateChatUIState(generator !== null, tokenizer !== null); // Update UI based on final state
         }
+        async function initializeModelAndTokenizer(modelId) {
+            updateModelStatus(`Loading ${modelId} (Q4)...`, 'loading');
+            let pipelineLoaded = false;
+            let tokenizerLoaded = false;
+            let loadError = null;
+            // --- Try loading the full pipeline first ---
             try {
+                generator = await pipeline(TASK, modelId, {
+                    dtype: QUANTIZATION, // Using Q4 as per model card
+                    progress_callback: (progress) => {
+                         const msg = `[Loading Pipeline: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
+                         updateModelStatus(msg, 'loading');
+                     }
+                });
+                pipelineLoaded = true;
+                tokenizer = generator.tokenizer; // Get tokenizer from successful pipeline
+                tokenizerLoaded = true;
+                updateModelStatus(`${modelId} pipeline loaded successfully!`, 'success');
+                displayMessage('system', `[SUCCESS] ${modelId} is ready for chat.`, false);
             } catch (error) {
+                console.error(`Pipeline loading failed for ${modelId}:`, error);
+                loadError = error; // Store error to check later
+                generator = null; // Ensure generator is null
+                updateModelStatus(`Pipeline loading failed for ${modelId}. Attempting tokenizer only...`, 'warning');
+                // --- If pipeline failed, try loading only the tokenizer ---
+                try {
+                    updateModelStatus(`Loading Tokenizer for ${modelId}...`, 'loading');
+                    tokenizer = await AutoTokenizer.from_pretrained(modelId, {
+                        progress_callback: (progress) => {
+                            const msg = `[Loading Tokenizer: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
+                            updateModelStatus(msg, 'loading');
+                        }
+                    });
+                    tokenizerLoaded = true;
+                    // Report specific failure for pipeline but success for tokenizer
+                    updateModelStatus(`Model Pipeline failed: ${loadError.message}. Tokenizer loaded successfully. Chat is disabled.`, 'tokenizer-only');
+                     displayMessage('system', `[WARNING] ${modelId} Model Pipeline failed to load. Tokenizer is available, but chat generation will not work.`, true, true);
+                } catch (tokenizerError) {
+                    console.error(`Tokenizer loading also failed for ${modelId}:`, tokenizerError);
+                    tokenizer = null; // Ensure tokenizer is null
+                    // Report double failure
+                     updateModelStatus(`FATAL: Failed to load both Pipeline and Tokenizer for ${modelId}. Pipeline Error: ${loadError.message}. Tokenizer Error: ${tokenizerError.message}`, 'error');
+                     displayMessage('system', `[FATAL ERROR] Could not load essential components for ${modelId}. Please check browser console and model compatibility.`, true, true);
+                }
             }
         }
         function buildPrompt() {
+             const historyLimit = 5; // Shorter context for 1B
+             const recentHistory = conversationHistory.slice(-historyLimit);
+             let prompt = "<start_of_turn>system\nYou are 'AI Assistant', a helpful AI assistant. Answer the user's questions clearly and concisely in English.\n<end_of_turn>\n";
+             recentHistory.forEach(msg => { const role = msg.sender === 'user' ? 'user' : 'model'; prompt += `<start_of_turn>${role}\n${msg.text}\n<end_of_turn>\n`; });
+             prompt += "<start_of_turn>model\n";
+             console.log("Generated Prompt:", prompt); return prompt;
+         }
+         function cleanupResponse(responseText, prompt) {
+             let cleaned = responseText; if (cleaned.startsWith(prompt)) { cleaned = cleaned.substring(prompt.length); } else { cleaned = cleaned.replace(/^model\n?/, '').trim(); }
+             cleaned = cleaned.replace(/<end_of_turn>/g, '').trim(); cleaned = cleaned.replace(/<start_of_turn>/g, '').trim(); cleaned = cleaned.replace(/^['"]/, '').replace(/['"]$/, '');
+             if (!cleaned || cleaned.length < 2) { console.warn("Generated reply empty/short:", cleaned); const fallbacks = [ "Sorry, I didn't quite understand.", "Could you please rephrase that?", "I'm not sure how to respond." ]; return fallbacks[Math.floor(Math.random() * fallbacks.length)]; }
+             return cleaned;
+         }
         async function handleUserMessage() {
             const userText = userInput.value.trim();
+            // Check if GENERATOR (full pipeline) is loaded
             if (!userText || !generator || isLoadingModel) return;
             userInput.value = ''; userInput.style.height = 'auto';
+            updateChatUIState(true); // Disable send button immediately
             displayMessage('user', userText);
             conversationHistory.push({ sender: 'user', text: userText });
+            updateModelStatus("AI thinking...", "loading");
             const prompt = buildPrompt();
             try {
                 displayMessage('bot', errorReply);
                 conversationHistory.push({ sender: 'bot', text: errorReply });
             } finally {
+                updateModelStatus(`${currentModelName} ready.`, "success");
+                updateChatUIState(true);
                 userInput.focus();
             }
         }
+        // --- Speech API Functions ---
         function initializeSpeechAPI() {
+              const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+              if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { isListening = true; updateChatUIState(generator !== null, tokenizer !== null); console.log('Listening...'); }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${currentModelName} ready.` : (tokenizer ? 'Tokenizer loaded.' : 'No model loaded.'), generator ? 'success' : (tokenizer ? 'tokenizer-only' : 'info')), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null, tokenizer !== null); console.log('Stopped listening.'); }; } else { console.warn("Speech Recognition not supported."); }
+              if (!synthesis) { console.warn("Speech Synthesis not supported."); } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); }
+              updateChatUIState(false); // Initial state
           }
+          function loadVoices() { if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
+          function findAndSetVoice(voices) { targetVoice = voices.find(v => v.lang === 'en-US') || voices.find(v => v.lang.startsWith('en-')); if (targetVoice) { console.log("Using English voice:", targetVoice.name, targetVoice.lang); } else { console.warn("No suitable English voice found."); } }
+          function speakText(text) { 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);
         userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleUserMessage(); } });
+        speechButton.addEventListener('click', () => { if (recognition && !isListening && generator && !isLoadingModel) { try { recognition.start(); } catch (error) { console.error("Rec start fail:", error); updateModelStatus(`Failed to start recognition`, 'error'); setTimeout(() => updateModelStatus(generator ? `${currentModelName} ready.` : (tokenizer ? 'Tokenizer loaded.' : 'No model loaded.'), generator ? 'success' : (tokenizer ? 'tokenizer-only' : 'info')), 2000); isListening = false; updateChatUIState(generator !== null, tokenizer !== null); } } });
     </script>
 </body>