Update index.js

index.js

@@ -1,32 +1,94 @@
 import { pipeline } from "@huggingface/transformers";
 
-// Create a text-generation pipeline
-const generator = await pipeline(
-  "text-generation",
-  "HuggingFaceTB/SmolLM2-360M", // You can replace this with other models like "EleutherAI/gpt-neo-125M" or "facebook/opt-125m"
-  { device: "webgpu" }
-);
-
-// Generate text
-const prompts = [
-  "Once upon a time",
-  "The artificial intelligence"
-];
-
-const results = await generator(prompts, {
-  max_length: 50,
-  num_return_sequences: 1,
-  temperature: 0.7,
-  top_p: 0.9
-});
-
-console.log(results);
-// Will output something like:
-// [
-//   [{
-//     "generated_text": "Once upon a time there was a young princess who lived in a castle..."
-//   }],
-//   [{
-//     "generated_text": "The artificial intelligence revolution has transformed the way we..."
-//   }]
-// ]
+// Get DOM elements
+const loadingContainer = document.getElementById('loadingContainer');
+const chatInterface = document.getElementById('chatInterface');
+const progressFill = document.getElementById('progressFill');
+const progressPercent = document.getElementById('progressPercent');
+const questionInput = document.getElementById('questionInput');
+const sendButton = document.getElementById('sendButton');
+const response = document.getElementById('response');
+
+async function initializeModel() {
+    try {
+        // Create a text-generation pipeline with WebGPU
+        const generator = await pipeline(
+            "text-generation",
+            "HuggingFaceTB/SmolLM2-360M",
+            { 
+                device: "webgpu",
+                progress_callback: (progress) => {
+                    // Calculate percentage
+                    const percentage = Math.round(progress.progress * 100);
+                    
+                    // Update progress bar and text
+                    progressFill.style.width = `${percentage}%`;
+                    progressPercent.textContent = `${percentage}%`;
+
+                    // When loading is complete
+                    if (progress.progress === 1) {
+                        setTimeout(() => {
+                            loadingContainer.style.display = 'none';
+                            chatInterface.style.display = 'block';
+                        }, 500);
+                    }
+                }
+            }
+        );
+
+        // Add event listener for send button
+        sendButton.addEventListener('click', async () => {
+            const question = questionInput.value.trim();
+            if (!question) return;
+
+            try {
+                // Disable input while generating
+                sendButton.disabled = true;
+                questionInput.disabled = true;
+                response.textContent = 'Generating response...';
+
+                const results = await generator(question, {
+                    max_length: 50,
+                    num_return_sequences: 1,
+                    temperature: 0.7,
+                    top_p: 0.9
+                });
+
+                // Display the generated text
+                response.textContent = results[0].generated_text;
+
+            } catch (error) {
+                response.textContent = 'Error generating response: ' + error.message;
+            } finally {
+                // Re-enable input
+                sendButton.disabled = false;
+                questionInput.disabled = false;
+            }
+        });
+
+    } catch (error) {
+        progressPercent.textContent = 'Error loading model: ' + error.message;
+    }
+}
+
+// Check for WebGPU support
+async function checkWebGPUSupport() {
+    if (!navigator.gpu) {
+        loadingContainer.innerHTML = `
+            <div class="error-message">
+                WebGPU is not supported in your browser. 
+                Please use a browser that supports WebGPU, such as Chrome Canary with WebGPU flags enabled.
+            </div>`;
+        return false;
+    }
+    return true;
+}
+
+// Initialize when page loads
+async function init() {
+    if (await checkWebGPUSupport()) {
+        initializeModel();
+    }
+}
+
+init();