Update index.html

index.html

@@ -141,10 +141,8 @@
     <script type="module">
         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
-
+        env.allowRemoteModels = true;
+        env.cacheDir = './cache';
 
         const chatMessagesDiv = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
@@ -162,27 +160,30 @@
             try {
                 generator = await pipeline(
                     "text-generation",
-                    "Xenova/gemma-1b-it-quantized",  // Correct model name
+                    "Xenova/gemma-1b-it-quantized",
                     {
                         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
+                                loadingIndicator.textContent = `Loading... ${progress.file} - ${Math.round(progress.loaded / 1000000)}MB/${Math.round(progress.total / 1000000)}MB`;
+                            }
+                            // IMPORTANT: Set loading indicator to complete when done
+                            if (progress.status === 'loaded') {
+                                loadingIndicator.textContent = 'Model Loaded!';
                             }
-                        }
+                        },
                     }
                 );
 
             } catch (error) {
                 console.error("Error loading model:", error);
-                loadingIndicator.textContent = "Error loading model. Check console and ensure a modern browser.";
+                loadingIndicator.textContent = "Error loading model. Check console and ensure a modern browser and internet connection.";
                 loadingIndicator.style.color = "red";
-                sendButton.disabled = true;
+                sendButton.disabled = true; // Disable sending until loaded.
                 return;
             }
-            loadingIndicator.style.display = 'none';
+            // DO NOT hide loading indicator immediately. Let progress_callback handle it.
+            // loadingIndicator.style.display = 'none';
             addMessage("bot", "Hello! I'm ready to chat. Ask me anything!");
         }
 
@@ -193,7 +194,7 @@
             messageDiv.classList.add('message', `${role}-message`);
             messageDiv.textContent = content;
             chatMessagesDiv.appendChild(messageDiv);
-            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
+            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight; // Scroll to bottom
 
             if (role === 'user' || role === 'assistant') {
                 chatHistory.push({ role: role, content: content });
@@ -207,12 +208,13 @@
             addMessage('user', message);
             userInput.value = '';
             loadingIndicator.style.display = 'block';
+            loadingIndicator.textContent = 'Generating response...'; // Indicate response generation
             sendButton.disabled = true;
 
             try {
                 const output = await generator(chatHistory, {
                     max_new_tokens: 512,
-                    do_sample: false // Try setting to `true` for varied responses
+                    do_sample: false
                 });
 
                 const botResponse = output[0].generated_text.at(-1).content;