Update index.html

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gemma Chatbot</title>
     <style>
-        /* (Same CSS as in the previous, well-styled response) */
+        /* (Same CSS as before - good styling) */
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             display: flex;
@@ -139,31 +139,45 @@
     </div>
 
     <script type="module">
-        import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
+        import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.js";
+
+        // VERY IMPORTANT: Explicitly set the cache directory and allow remote models.
+        env.allowRemoteModels = true; // MUST be true to use models from the Hub
+        env.cacheDir = './cache';      // Or another directory if you prefer
+
 
         const chatMessagesDiv = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
         const sendButton = document.getElementById('send-button');
         const loadingIndicator = document.getElementById('loading-indicator');
 
-      let chatHistory = [
-          { role: "system", content: "You are a helpful assistant." },
-      ];
+        let chatHistory = [
+            { role: "system", content: "You are a helpful assistant." },
+        ];
 
         let generator;
 
         async function initializePipeline() {
             loadingIndicator.style.display = 'block';
             try {
-                // Use the correct model name for text generation with Gemma.
                 generator = await pipeline(
                     "text-generation",
-                    "Xenova/gemma-1b-it-quantized", // Corrected model name
-                    { dtype: "q4" }
+                    "Xenova/gemma-1b-it-quantized",  // Correct model name
+                    {
+                        dtype: "q4",
+                        // Add progress_callback to show loading progress.  This is important for UX.
+                        progress_callback: (progress) => {
+                            if (progress.status === 'progress') {
+                                 let progressText = `Loading... ${progress.file} - ${Math.round(progress.loaded/1000000)}MB/${Math.round(progress.total/1000000)}MB`;
+                                 loadingIndicator.textContent = progressText
+                            }
+                        }
+                    }
                 );
+
             } catch (error) {
                 console.error("Error loading model:", error);
-                loadingIndicator.textContent = "Error loading model. Check console and ensure you're using a compatible browser/environment.";
+                loadingIndicator.textContent = "Error loading model. Check console and ensure a modern browser.";
                 loadingIndicator.style.color = "red";
                 sendButton.disabled = true;
                 return;
@@ -181,9 +195,9 @@
             chatMessagesDiv.appendChild(messageDiv);
             chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
 
-          if (role === 'user' || role === 'assistant') {
-              chatHistory.push({ role: role, content: content });
-          }
+            if (role === 'user' || role === 'assistant') {
+                chatHistory.push({ role: role, content: content });
+            }
         }
 
         async function sendMessage() {
@@ -196,12 +210,11 @@
             sendButton.disabled = true;
 
             try {
-                 const output = await generator(chatHistory, {
+                const output = await generator(chatHistory, {
                     max_new_tokens: 512,
-                    do_sample: false
+                    do_sample: false // Try setting to `true` for varied responses
                 });
 
-                // Correctly access the last message in the generated text.
                 const botResponse = output[0].generated_text.at(-1).content;
                 addMessage('assistant', botResponse);