Spaces:

kimhyunwoo
/

g

Running

App Files Files Community

kimhyunwoo commited on 22 days ago

Commit

6b44370

verified ·

1 Parent(s): d5b0fae

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -74

index.html CHANGED Viewed

@@ -3,9 +3,9 @@
 <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 - Exact Doc Example)</title>
     <style>
-        /* CSS는 이전과 동일 (가독성을 위해 일부만 표시) */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         :root { /* Using the neutral blue theme */
             --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529;
@@ -73,8 +73,8 @@
     <div id="control-panel">
         <h2>Model Loader</h2>
         <!-- Button to explicitly trigger model loading -->
-        <button id="loadModelButton">Load Gemma 3 1B Model (Q4)</button>
-        <div id="model-status" class="info">Click button to load Gemma 3 1B using the exact method from the documentation. **Warning:** Loading is still expected to fail due to library incompatibility.</div>
     </div>
     <div id="chat-container">
@@ -95,13 +95,13 @@
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
-        // Configuration EXACTLY as per the model card example
-        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX-GQA';
         const TASK = 'text-generation';
-        const QUANTIZATION = 'q4';
         // Environment setup
-        env.allowRemoteModels = true; // Usually default, but set explicitly
         env.useBrowserCache = true;
         env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
@@ -120,11 +120,10 @@
         // State
         let generator = null;
         let isLoadingModel = false;
-        // Store history as { role: 'user' | 'assistant' | 'system', content: '...' }
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
-        const stateKey = 'gemma3_1b_exact_doc_state_v1';
-        const historyKey = 'gemma3_1b_exact_doc_history_v1';
         // Speech API
         let recognition = null;
@@ -139,12 +138,12 @@
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
-            updateChatUIState(false); // Initial state: disabled
             displayHistory();
             setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
             console.log("Attempting to use Transformers.js (latest) loaded via import map.");
-            displayMessage('system', `Using latest Transformers.js. Ready to load ${MODEL_NAME} exactly as per doc example.`, false);
         });
         // --- State Persistence ---
@@ -157,15 +156,9 @@
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
          function displayHistory() {
-             chatbox.innerHTML = '';
-             conversationHistory.forEach(msg => {
-                 if (msg.role === 'user' || msg.role === 'assistant') {
-                     displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false);
-                 }
-             });
          }
         // --- UI Update Functions ---
         function displayMessage(sender, text, animate = true, isError = false) {
              const messageDiv = document.createElement('div'); let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message'; if (sender === 'system' && isError) messageClass = 'error-message'; messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none'; text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>'); messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
@@ -187,20 +180,21 @@
             if (isLoadingModel || generator) return;
             isLoadingModel = true; generator = null;
             updateChatUIState(false);
             await initializeModel(MODEL_NAME);
             isLoadingModel = false;
             updateChatUIState(generator !== null);
         }
-        // Initialize model EXACTLY as per the documentation example
         async function initializeModel(modelId) {
             updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" }... (Strict doc example)`, 'loading');
             displayMessage('system', `Attempting to load ${modelId} using documented method (dtype: ${QUANTIZATION})...`, false);
             try {
-                // Pipeline creation EXACTLY as in the example
                 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');
@@ -213,10 +207,11 @@
             } catch (error) {
                 console.error(`Model loading failed for ${modelId} (Strict Attempt):`, error);
                 let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
-                 if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
-                     errorMsg += " As expected, the 'gemma3_text' model type is likely unsupported.";
-                 } else if (error.message.includes("split is not a function")) {
-                     errorMsg += " As expected, a TypeError occurred during config parsing (incompatibility).";
                  } else {
                      errorMsg += " Unknown error. Check console/network/memory.";
                  }
@@ -226,85 +221,57 @@
             }
         }
-        // Build messages array EXACTLY as per documentation example
         function buildMessages(newUserMessage) {
-             // Start with system prompt, add history, then user message
              let messages = [{ role: "system", content: "You are a helpful assistant." }];
-             // Append history (already in correct format)
              messages = messages.concat(conversationHistory);
-             // Append new user message
              messages.push({ role: "user", content: newUserMessage });
              console.log("Input Messages for Pipeline:", messages);
              return messages;
          }
-        // Cleanup response EXACTLY as per documentation example (with safety checks)
         function cleanupResponse(output) {
             try {
-                // Check the structure expected when using messages input
                 if (output && output.length > 0 && output[0].generated_text && Array.isArray(output[0].generated_text)) {
-                     // Use .at(-1) to get the last element, which should be the assistant's response
                      const lastMessage = output[0].generated_text.at(-1);
                      if (lastMessage && (lastMessage.role === 'assistant' || lastMessage.role === 'model') && typeof lastMessage.content === 'string') {
                          let content = lastMessage.content.trim();
-                         // Optional: Remove potential trailing artifacts if needed
                          content = content.replace(/<end_of_turn>/g, '').trim();
                          if (content.length > 0) return content;
                      }
                 }
-             } catch (e) { console.error("Error parsing generator output with .at(-1):", e, "Output:", output); }
-             // Fallback if the specific structure isn't found
-             console.warn("Could not extract response using output[0].generated_text.at(-1).content. Output structure might differ or generation failed.", output);
-             const fallbacks = [ "Sorry, response format was unexpected.", "My response might be garbled.", "Error processing the AI answer." ];
-             return fallbacks[Math.floor(Math.random() * fallbacks.length)];
          }
         // --- Main Interaction Logic ---
         async function handleUserMessage() {
             const userText = userInput.value.trim();
-            if (!userText || !generator || isLoadingModel) return; // Check if generator is ready
-            userInput.value = ''; userInput.style.height = 'auto';
-            updateChatUIState(true); // Disable input
-            // Add user message to UI and history
-            displayMessage('user', userText);
-            conversationHistory.push({ role: 'user', content: userText });
             updateModelStatus("AI thinking...", "loading");
-            // Prepare messages array
-            const messages = buildMessages(userText);
             try {
-                // Call generator EXACTLY as in the example (with messages array)
                 const outputs = await generator(messages, {
-                    max_new_tokens: 512, // From example
-                    do_sample: false      // From example
-                    // Add other parameters like temperature if needed for sampling
                 });
-                const replyText = cleanupResponse(outputs); // Use the cleanup function based on example
                 console.log("Cleaned AI Output:", replyText);
-                // Add AI response to UI and history
-                displayMessage('bot', replyText);
-                conversationHistory.push({ role: 'assistant', content: replyText }); // Add assistant response
-                if (botState.botSettings.useSpeechOutput && synthesis && targetVoice) {
-                    speakText(replyText);
-                }
-                saveState(); // Save history
             } catch (error) {
-                console.error("AI response generation error:", error);
-                displayMessage('system', `[ERROR] Failed to generate response: ${error.message}`, true, true);
             } finally {
                 if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success");
-                updateChatUIState(generator !== null); // Re-enable UI
-                userInput.focus();
             }
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>AI Assistant (Gemma 3 1B ONNX Attempt)</title> {/* Updated Title */}
     <style>
+        /* CSS는 이전과 동일 */
         @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
         :root { /* Using the neutral blue theme */
             --primary-color: #007bff; --secondary-color: #6c757d; --text-color: #212529;
     <div id="control-panel">
         <h2>Model Loader</h2>
         <!-- Button to explicitly trigger model loading -->
+        <button id="loadModelButton">Load Gemma 3 1B ONNX (Q4)</button> {/* Updated Button Text */}
+        <div id="model-status" class="info">Click button to load `onnx-community/gemma-3-1b-it-ONNX` (Q4). **Warning:** Loading may still fail due to library incompatibility.</div>
     </div>
     <div id="chat-container">
     <script type="module">
         import { pipeline, env } from '@xenova/transformers';
+        // Configuration based on the LATEST user request
+        const MODEL_NAME = 'onnx-community/gemma-3-1b-it-ONNX'; // Using the non-GQA version
         const TASK = 'text-generation';
+        const QUANTIZATION = 'q4'; // Using Q4 as specified in the example structure
         // Environment setup
+        env.allowRemoteModels = true;
         env.useBrowserCache = true;
         env.backends.onnx.executionProviders = ['webgpu', 'wasm'];
         console.log('Using Execution Providers:', env.backends.onnx.executionProviders);
         // State
         let generator = null;
         let isLoadingModel = false;
         let conversationHistory = [];
         let botState = { botName: "AI Assistant", userName: "User", botSettings: { useSpeechOutput: true } };
+        const stateKey = 'gemma3_1b_onnx_state_v1'; // New key for this specific model
+        const historyKey = 'gemma3_1b_onnx_history_v1';
         // Speech API
         let recognition = null;
             updateSpeakerButtonUI();
             initializeSpeechAPI();
             setupInputAutosize();
+            updateChatUIState(false);
             displayHistory();
             setTimeout(loadVoices, 500);
             loadModelButton.addEventListener('click', handleLoadModelClick);
             console.log("Attempting to use Transformers.js (latest) loaded via import map.");
+            displayMessage('system', `Using latest Transformers.js. Ready to load ${MODEL_NAME}.`, false);
         });
         // --- State Persistence ---
              localStorage.setItem(historyKey, JSON.stringify(conversationHistory));
          }
          function displayHistory() {
+             chatbox.innerHTML = ''; conversationHistory.forEach(msg => { if (msg.role === 'user' || msg.role === 'assistant') { displayMessage(msg.role === 'user' ? 'user' : 'bot', msg.content, false); } });
          }
         // --- UI Update Functions ---
         function displayMessage(sender, text, animate = true, isError = false) {
              const messageDiv = document.createElement('div'); let messageClass = sender === 'user' ? 'user-message' : sender === 'bot' ? 'bot-message' : 'system-message'; if (sender === 'system' && isError) messageClass = 'error-message'; messageDiv.classList.add(messageClass); if (!animate) messageDiv.style.animation = 'none'; text = text.replace(/</g, "<").replace(/>/g, ">"); text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'); text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>'); text = text.replace(/\n/g, '<br>'); messageDiv.innerHTML = text; chatbox.appendChild(messageDiv); chatbox.scrollTo({ top: chatbox.scrollHeight, behavior: animate ? 'smooth' : 'auto' });
             if (isLoadingModel || generator) return;
             isLoadingModel = true; generator = null;
             updateChatUIState(false);
+            // Pass the specific model name requested by the user
             await initializeModel(MODEL_NAME);
             isLoadingModel = false;
             updateChatUIState(generator !== null);
         }
+        // Initialize model using the exact parameters from the latest example structure
         async function initializeModel(modelId) {
             updateModelStatus(`Loading ${modelId} with { dtype: "${QUANTIZATION}" }... (Strict doc example)`, 'loading');
             displayMessage('system', `Attempting to load ${modelId} using documented method (dtype: ${QUANTIZATION})...`, false);
             try {
+                // Pipeline creation EXACTLY as per the example structure provided by user
                 generator = await pipeline(TASK, modelId, {
+                    dtype: QUANTIZATION, // Explicitly use q4
                     progress_callback: (progress) => {
                          const msg = `[Loading: ${progress.status}] ${progress.file ? progress.file.split('/').pop() : ''} (${Math.round(progress.progress || 0)}%)`;
                          updateModelStatus(msg, 'loading');
             } catch (error) {
                 console.error(`Model loading failed for ${modelId} (Strict Attempt):`, error);
                 let errorMsg = `Failed to load ${modelId}: ${error.message}.`;
+                // Provide specific feedback based on likely errors
+                if (error.message.includes("Unsupported model type") || error.message.includes("gemma3_text")) {
+                    errorMsg += " The 'gemma3_text' model type is likely unsupported by this library version.";
+                } else if (error.message.includes("split is not a function")) {
+                     errorMsg += " A TypeError occurred, likely due to config parsing incompatibility.";
                  } else {
                      errorMsg += " Unknown error. Check console/network/memory.";
                  }
             }
         }
+        // Build messages array as per documentation example
         function buildMessages(newUserMessage) {
              let messages = [{ role: "system", content: "You are a helpful assistant." }];
              messages = messages.concat(conversationHistory);
              messages.push({ role: "user", content: newUserMessage });
              console.log("Input Messages for Pipeline:", messages);
              return messages;
          }
+        // Cleanup response as per documentation example structure
         function cleanupResponse(output) {
             try {
                 if (output && output.length > 0 && output[0].generated_text && Array.isArray(output[0].generated_text)) {
                      const lastMessage = output[0].generated_text.at(-1);
                      if (lastMessage && (lastMessage.role === 'assistant' || lastMessage.role === 'model') && typeof lastMessage.content === 'string') {
                          let content = lastMessage.content.trim();
                          content = content.replace(/<end_of_turn>/g, '').trim();
                          if (content.length > 0) return content;
                      }
                 }
+            } catch (e) { console.error("Error parsing generator output with .at(-1):", e, "Output:", output); }
+            console.warn("Could not extract response using output[0].generated_text.at(-1).content. Output structure might differ or generation failed.", output);
+            const fallbacks = [ "Sorry, response format was unexpected.", "My response might be garbled.", "Error processing the AI answer." ];
+            return fallbacks[Math.floor(Math.random() * fallbacks.length)];
          }
         // --- Main Interaction Logic ---
         async function handleUserMessage() {
             const userText = userInput.value.trim();
+            if (!userText || !generator || isLoadingModel) return;
+            userInput.value = ''; userInput.style.height = 'auto'; updateChatUIState(true);
+            displayMessage('user', userText); conversationHistory.push({ role: 'user', content: userText });
             updateModelStatus("AI thinking...", "loading");
+            const messages = buildMessages(userText); // Use messages format
             try {
+                // Call generator EXACTLY as in the example
                 const outputs = await generator(messages, {
+                    max_new_tokens: 512,
+                    do_sample: false // From example
                 });
+                const replyText = cleanupResponse(outputs);
                 console.log("Cleaned AI Output:", replyText);
+                displayMessage('bot', replyText); conversationHistory.push({ role: 'assistant', content: 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);
             } finally {
                 if(generator) updateModelStatus(`${MODEL_NAME} ready.`, "success");
+                updateChatUIState(generator !== null); userInput.focus();
             }
         }