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 before - good styling) */
+        /* (Same good CSS as before) */
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             display: flex;
@@ -159,17 +159,22 @@
         async function initializePipeline() {
             loadingIndicator.style.display = 'block';
             try {
+                // Correct Gemma 3 model name and text-generation pipeline
                 generator = await pipeline(
                     "text-generation",
-                    "onnx-community/gemma-3-1b-it-ONNX", // Use correct model name
+                    "onnx-community/gemma-3-1b-it-ONNX",
                     {
-                        dtype: "q4",  // Use quantized weights (smaller, faster)
+                        dtype: "q4", // Quantization
                         progress_callback: (progress) => {
                             if (progress.status === 'progress') {
                                 loadingIndicator.textContent = `Loading... ${progress.file} - ${Math.round(progress.loaded / 1000000)}MB/${Math.round(progress.total / 1000000)}MB`;
                             }
                             if (progress.status === 'loaded') {
                                 loadingIndicator.textContent = 'Model Loaded!';
+                                // Optional: Hide after a short delay, so the user sees it.
+                                setTimeout(() => {
+                                    loadingIndicator.style.display = 'none';
+                                }, 1500); // 1.5 seconds
                             }
                         },
                     }
@@ -177,18 +182,17 @@
 
             } catch (error) {
                 console.error("Error loading model:", error);
-                loadingIndicator.textContent = "Error loading model. Check console, internet, and browser.";
+                loadingIndicator.textContent = "Error loading model.  Check console, ensure a modern browser, and internet connection.";
                 loadingIndicator.style.color = "red";
                 sendButton.disabled = true;
                 return;
             }
-            // Don't hide until 'loaded' in progress_callback
+            // Don't hide it here anymore: let the progress_callback and timeout handle it.
             addMessage("bot", "Hello! I'm ready to chat. Ask me anything!");
         }
 
         initializePipeline();
 
-
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', `${role}-message`);
@@ -214,10 +218,10 @@
             try {
                 const output = await generator(chatHistory, {
                     max_new_tokens: 512,
-                    do_sample: false  // Try setting to `true` for varied responses.
+                    do_sample: false // Try setting to `true` for varied responses.
                 });
 
-                const botResponse = output[0].generated_text.at(-1).content;
+                const botResponse = output[0].generated_text.at(-1).content;  // Correctly access generated text
                 addMessage('assistant', botResponse);
 
             } catch (error) {
@@ -229,7 +233,6 @@
             }
         }
 
-
         sendButton.addEventListener('click', sendMessage);
         userInput.addEventListener('keypress', (event) => {
             if (event.key === 'Enter') {