Spaces:

kimhyunwoo
/

gg

Running

App Files Files Community

kimhyunwoo commited on 21 days ago

Commit

4bfa00d

verified ·

1 Parent(s): 3ba6123

Update index.html

Browse files

Files changed (1) hide show

index.html +255 -152

index.html CHANGED Viewed

@@ -3,13 +3,15 @@
 <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;
@@ -19,27 +21,43 @@
         * { 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;
         }
@@ -48,20 +66,30 @@
         .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; }
@@ -73,17 +101,29 @@
     </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 id="messages">
                 <!-- Chat messages will appear here -->
             </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>
@@ -93,10 +133,10 @@
     <script type="module">
         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;
@@ -104,191 +144,254 @@
         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 loadingIndicator = document.getElementById('loading');
         const chatbotNameElement = document.getElementById('chatbot-name');
         const speechButton = document.getElementById('speechButton');
         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 ---
-        window.addEventListener('load', async () => {
-            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';
-            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 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;
-            userInput.disabled = disableButtons;
-            sendButton.disabled = disableButtons || userInput.value.trim() === '';
-            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;
-            } finally {
-                setLoading(false);
-                 userInput.disabled = !generator;
-                 sendButton.disabled = userInput.value.trim() === '' || !generator;
-                 speechButton.disabled = !generator || !recognition;
-                 toggleSpeakerButton.disabled = !generator || !synthesis;
-                 if (generator) { userInput.focus(); }
             }
         }
-        // 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>

 <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;
         * { 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;
         }
         .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; }
     </script>
 </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">
         <h1 id="chatbot-name">AI Assistant</h1>
         <div id="chatbox">
             <div id="messages">
                 <!-- Chat messages will appear here -->
             </div>
         </div>
         <div id="input-area">
+             <textarea id="userInput" placeholder="Please load a model first..." rows="1" disabled></textarea>
             <button id="speechButton" class="control-button" title="Speak message" disabled>🎤</button>
             <button id="toggleSpeakerButton" class="control-button" title="Toggle AI speech output" disabled>🔊</button>
             <button id="sendButton" class="control-button" title="Send message" disabled>➤</button>
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
+        // 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.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 {
                 const outputs = await generator(prompt, { max_new_tokens: 300, temperature: 0.7, repetition_penalty: 1.1, top_k: 50, top_p: 0.9, do_sample: true });
+                const rawResponse = Array.isArray(outputs) ? outputs[0].generated_text : outputs.generated_text;
+                const replyText = cleanupResponse(rawResponse, prompt);
+                displayMessage('bot', replyText);
+                conversationHistory.push({ sender: 'bot', text: replyText });
+                if (botState.botSettings.useSpeechOutput && synthesis && targetVoice) { speakText(replyText); }
+                saveState();
             } catch (error) {
+                console.error("AI response generation error:", error);
+                displayMessage('system', `[ERROR] Failed to generate response: ${error.message}`, true, true);
+                const errorReply = "Sorry, I encountered an error generating the response.";
+                displayMessage('bot', errorReply);
+                conversationHistory.push({ sender: 'bot', text: errorReply });
+            } finally {
+                updateModelStatus(`${currentModelName} ready.`, "success"); // 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>