Update index.js

index.js

@@ -1,94 +1,19 @@
-import { pipeline } from "@huggingface/transformers";
-
-// 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();
+import { pipeline } from '@huggingface/transformers';
+
+// Create a text generation pipeline
+const generator = await pipeline(
+  'text-generation',
+  'onnx-community/Qwen2.5-0.5B-Instruct',
+  { dtype: 'q4', device: 'webgpu' },
+);
+
+// Define the list of messages
+const messages = [
+  { role: 'system', content: 'You are a helpful assistant.' },
+  { role: 'user', content: 'Tell me a funny joke.' },
+];
+
+// Generate a response
+const output = await generator(messages, { max_new_tokens: 128 });
+console.log(output[0].generated_text.at(-1).content);
+// "Why did the tomato turn red?\n\nBecause it saw the salad dressing!"