Update index.html

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>AI Assistant (Gemma 3 1B - v3 Attempt)</title>
     <style>
+        /* CSS styles remain the same as the previous correct version */
         @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;
@@ -19,7 +20,6 @@
             --header-bg: #ffffff; --header-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
             --container-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
         }
-        /* 나머지 CSS는 이전과 동일하게 유지 */
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { height: 100%; }
         body {
@@ -66,7 +66,7 @@
         .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) { /* 반응형 스타일 유지 */
+         @media (max-width: 600px) { /* Responsive styles */
              body { padding: 5px; justify-content: flex-start; }
              #control-panel { margin-bottom: 5px; padding: 12px; }
              #chat-container { width: 100%; height: auto; flex-grow: 1; border-radius: 12px; max-height: none; margin-bottom: 5px; }
@@ -80,8 +80,6 @@
     {
       "imports": {
         "@xenova/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest"
-        /* "/transformers": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest" */
-        /* "/transformers/": "https://cdn.jsdelivr.net/npm/@xenova/transformers@latest/" */
       }
     }
     </script>
@@ -97,7 +95,7 @@
         <h1 id="chatbot-name">AI Assistant</h1>
         <div id="chatbox">
             <div id="messages">
-                <!-- Chat messages will appear here -->
+                <!-- Chat messages appear here -->
             </div>
         </div>
         <div id="input-area">
@@ -118,11 +116,11 @@
 
         env.allowLocalModels = false;
         env.useBrowserCache = true;
-        env.backends.onnx.executionProviders = ['webgpu', 'wasm']; // Keep WebGPU priority
+        env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
-        // Attempt to leverage WebGPU if available (v3 feature)
         env.backends.onnx.prefer_alternative_execution_providers = true;
 
+        // DOM Elements (no changes)
         const chatbox = document.getElementById('messages');
         const userInput = document.getElementById('userInput');
         const sendButton = document.getElementById('sendButton');
@@ -132,18 +130,21 @@
         const modelStatus = document.getElementById('model-status');
         const loadModelButton = document.getElementById('loadModelButton');
 
+        // State Management (no changes)
         let generator = null;
         let isLoadingModel = false;
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_v3_state_v1'; // New key for v3 attempt
+        const stateKey = 'gemma3_1b_v3_state_v1';
         const historyKey = 'gemma3_1b_v3_history_v1';
 
+        // Web Speech API (no changes)
         let recognition = null;
         let synthesis = window.speechSynthesis;
         let targetVoice = null;
         let isListening = false;
 
+        // --- Initialization ---
         window.addEventListener('load', () => {
             loadState();
             chatbotNameElement.textContent = botState.botName;
@@ -154,146 +155,69 @@
             if (conversationHistory.length > 0) displayHistory();
             setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
-             // Log the loaded library version (if possible, might not be exposed easily)
              console.log("Attempting to use Transformers.js (latest version from CDN)");
              displayMessage('system', `Using latest Transformers.js from CDN. Attempting to load ${MODEL_NAME}.`, false);
         });
 
-        function loadState() {
+        // --- State Persistence ---
+        function loadState() { /* No changes */
              const savedState = localStorage.getItem(stateKey); if (savedState) { try { const loaded = JSON.parse(savedState); botState = { ...botState, ...loaded, botSettings: { ...botState.botSettings, ...(loaded.botSettings || {}) } }; } catch(e) {} }
              const savedHistory = localStorage.getItem(historyKey); if (savedHistory) { try { conversationHistory = JSON.parse(savedHistory); } catch(e) { conversationHistory = []; } }
          }
-         function saveState() {
+         function saveState() { /* No changes */
              localStorage.setItem(stateKey, JSON.stringify(botState));
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
-         function displayHistory() {
+         function displayHistory() { /* No changes */
              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 (sender === 'system' && isError) messageClass = 'error-message'; // Style system 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' });
+        // --- UI Update Functions ---
+        function displayMessage(sender, text, animate = true, isError = false) { /* No changes */
+             const messageDiv = document.createElement('div'); let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message'; if (sender === 'system' && isError) messageClass = 'error-message'; messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none'; text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>'); messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
          }
-
-        function updateModelStatus(message, type = 'info') {
+        function updateModelStatus(message, type = 'info') { /* No changes */
             modelStatus.textContent = message; modelStatus.className = 'model-status ' + type; console.log(`Model Status (${type}): ${message}`);
         }
-
-        function updateChatUIState(isModelLoadedSuccessfully) {
-            userInput.disabled = !isModelLoadedSuccessfully || isLoadingModel;
-            sendButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || userInput.value.trim() === '';
-            speechButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || isListening || !recognition;
-            toggleSpeakerButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || !synthesis;
-            loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully;
-            if (isModelLoadedSuccessfully) { userInput.placeholder = "How can I help you today?"; }
-            else if (isLoadingModel) { userInput.placeholder = "Model loading..."; }
-            else { userInput.placeholder = "Please load the model first..."; }
+        function updateChatUIState(isModelLoadedSuccessfully) { /* No changes */
+            userInput.disabled = !isModelLoadedSuccessfully || isLoadingModel; sendButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || userInput.value.trim() === ''; speechButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || isListening || !recognition; toggleSpeakerButton.disabled = !isModelLoadedSuccessfully || isLoadingModel || !synthesis; loadModelButton.disabled = isLoadingModel || isModelLoadedSuccessfully; if (isModelLoadedSuccessfully) { userInput.placeholder = "How can I help you today?"; } else if (isLoadingModel) { userInput.placeholder = "Model loading..."; } else { userInput.placeholder = "Please load the model first..."; }
         }
-
-        function updateSpeakerButtonUI() { /* No change */
+        function updateSpeakerButtonUI() { /* No changes */
             toggleSpeakerButton.textContent = botState.botSettings.useSpeechOutput ? '🔊' : '🔇'; toggleSpeakerButton.title = botState.botSettings.useSpeechOutput ? 'Turn off AI speech' : 'Turn on AI speech'; toggleSpeakerButton.classList.toggle('muted', !botState.botSettings.useSpeechOutput);
         }
         function showSpeechStatus(message) { console.log("Speech Status:", message); }
         function setupInputAutosize() { userInput.addEventListener('input', () => { userInput.style.height = 'auto'; userInput.style.height = userInput.scrollHeight + 'px'; updateChatUIState(generator !== null); }); }
 
-        async function handleLoadModelClick() {
-            if (isLoadingModel || generator) return;
-            isLoadingModel = true;
-            generator = null;
-            updateChatUIState(false);
-            await initializeModel(MODEL_NAME);
-            isLoadingModel = false;
-            updateChatUIState(generator !== null);
+        // --- Model & AI Logic ---
+        async function handleLoadModelClick() { /* No changes */
+            if (isLoadingModel || generator) return; isLoadingModel = true; generator = null; updateChatUIState(false); await initializeModel(MODEL_NAME); isLoadingModel = false; updateChatUIState(generator !== null);
         }
-
-        async function initializeModel(modelId) {
-            updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" } using latest Transformers.js...`, 'loading');
-            displayMessage('system', `Attempting to load ${modelId} using latest library version.`, false);
-
+        async function initializeModel(modelId) { /* No changes */
+            updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" } using latest Transformers.js...`, 'loading'); displayMessage('system', `Attempting to load ${modelId} using latest library version.`, false);
             try {
-                // Attempt pipeline creation with Q4 dtype and latest library
-                generator = await pipeline(TASK, modelId, {
-                    dtype: QUANTIZATION,
-                    progress_callback: (progress) => {
-                         const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
-                         updateModelStatus(msg, 'loading');
-                     }
-                });
-
-                // If successful (possible with v3+)
-                updateModelStatus(`${modelId} loaded successfully with latest library!`, 'success');
-                displayMessage('system', `[SUCCESS] ${modelId} loaded. The newer library version might support it.`, false);
-
+                generator = await pipeline(TASK, modelId, { dtype: QUANTIZATION, progress_callback: (progress) => { const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`; updateModelStatus(msg, 'loading'); } });
+                updateModelStatus(`${modelId} loaded successfully with latest library!`, 'success'); displayMessage('system', `[SUCCESS] ${modelId} loaded. The newer library version might support it.`, false);
             } catch (error) {
-                console.error(`Model loading failed for ${modelId} (with latest library):`, error);
-                let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
-                if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
-                    errorMsg += " The 'gemma3_text' type is still likely unsupported even in the latest library version, or the ONNX conversion has issues.";
-                } else if (error.message.includes("split")) {
-                     errorMsg += " A TypeError occurred, possibly related to model config parsing incompatibility.";
-                 }
-                 else {
-                     errorMsg += " Check console for details. Memory limits on HF Spaces could also be a factor.";
-                 }
-                updateModelStatus(errorMsg, 'error');
-                displayMessage('system', `[ERROR] ${errorMsg}`, true, true);
-                generator = null; // Ensure generator is null
+                console.error(`Model loading failed for ${modelId} (with latest library):`, error); let errorMsg = `Failed to load ${modelId}: ${error.message}.`; if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) { errorMsg += " The 'gemma3_text' type is still likely unsupported even in the latest library version, or the ONNX conversion has issues."; } else if (error.message.includes("split")) { errorMsg += " A TypeError occurred, possibly related to model config parsing incompatibility."; } else { errorMsg += " Check console for details. Memory limits on HF Spaces could also be a factor."; } updateModelStatus(errorMsg, 'error'); displayMessage('system', `[ERROR] ${errorMsg}`, true, true); generator = null;
             }
         }
-
-        function buildPrompt() {
-             const historyLimit = 5; 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 buildPrompt() { /* No changes */
+             const historyLimit = 5; 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) { 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;
+         function cleanupResponse(responseText, prompt) { /* No changes */
+             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) { 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();
-            if (!userText || !generator || isLoadingModel) return;
-            userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true);
-            displayMessage('user', userText); conversationHistory.push({ sender: 'user', text: userText });
-            updateModelStatus("AI thinking...", "loading");
-            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 {
-                if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success");
-                updateChatUIState(generator !== null); userInput.focus();
-            }
+        async function handleUserMessage() { /* No changes */
+            const userText = userInput.value.trim(); if (!userText || !generator || isLoadingModel) return; userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true); displayMessage('user', userText); conversationHistory.push({ sender: 'user', text: userText }); updateModelStatus("AI thinking...", "loading"); 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 { if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success"); updateChatUIState(generator !== null); 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); console.log('Listening...'); }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${MODEL_NAME} ready.` : 'Model not loaded.', generator ? 'success' : 'error'), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null); console.log('Stopped listening.'); }; } else { console.warn("Speech Recognition not supported."); }
-              if (!synthesis) { console.warn("Speech Synthesis not supported."); } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); }
-              updateChatUIState(false);
+        function initializeSpeechAPI() { /* No changes */
+              const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (SpeechRecognition) { recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.continuous = false; recognition.interimResults = false; recognition.onstart = () => { isListening = true; updateChatUIState(generator !== null); console.log('Listening...'); }; recognition.onresult = (event) => { userInput.value = event.results[0][0].transcript; userInput.dispatchEvent(new Event('input')); handleUserMessage(); }; recognition.onerror = (event) => { console.error("Speech error:", event.error); updateModelStatus(`Speech recognition error (${event.error})`, 'error'); setTimeout(() => updateModelStatus(generator ? `${MODEL_NAME} ready.` : 'Model not loaded.', generator ? 'success' : 'error'), 3000); }; recognition.onend = () => { isListening = false; updateChatUIState(generator !== null); console.log('Stopped listening.'); }; } else { console.warn("Speech Recognition not supported."); } if (!synthesis) { console.warn("Speech Synthesis not supported."); } else { toggleSpeakerButton.addEventListener('click', () => { botState.botSettings.useSpeechOutput = !botState.botSettings.useSpeechOutput; updateSpeakerButtonUI(); saveState(); if (!botState.botSettings.useSpeechOutput) synthesis.cancel(); }); } updateChatUIState(false);
           }
-          function loadVoices() { 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); }
+          function loadVoices() { /* No changes */ if (!synthesis) return; let voices = synthesis.getVoices(); if (voices.length === 0) { synthesis.onvoiceschanged = () => { voices = synthesis.getVoices(); findAndSetVoice(voices); }; } else { findAndSetVoice(voices); } }
+          function findAndSetVoice(voices) { /* No changes */ targetVoice = voices.find(v => v.lang === 'en-US') || voices.find(v => v.lang.startsWith('en-')); if (targetVoice) { console.log("Using English voice:", targetVoice.name, targetVoice.lang); } else { console.warn("No suitable English voice found."); } }
+          function speakText(text) { /* No changes */ if (!synthesis || !botState.botSettings.useSpeechOutput || !targetVoice) return; synthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); utterance.voice = targetVoice; utterance.lang = targetVoice.lang; utterance.rate = 1.0; utterance.pitch = 1.0; synthesis.speak(utterance); }
 
         // --- Event Listeners ---
         sendButton.addEventListener('click', handleUserMessage);