Update index.js

index.js

@@ -1,90 +1,9 @@
-// import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
-
-// // Since we will download the model from the Hugging Face Hub, we can skip the local model check
-// env.allowLocalModels = false;
-
-// // Reference the elements that we will need
-// const status = document.getElementById('status');
-// const fileUpload = document.getElementById('upload');
-// const imageContainer = document.getElementById('container');
-// const example = document.getElementById('example');
-
-// const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-
-// // Create a new object detection pipeline
-// status.textContent = 'Loading model...';
-// const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-// status.textContent = 'Ready';
-
-// example.addEventListener('click', (e) => {
-//     e.preventDefault();
-//     detect(EXAMPLE_URL);
-// });
-
-// fileUpload.addEventListener('change', function (e) {
-//     const file = e.target.files[0];
-//     if (!file) {
-//         return;
-//     }
-
-//     const reader = new FileReader();
-
-//     // Set up a callback when the file is loaded
-//     reader.onload = e2 => detect(e2.target.result);
-
-//     reader.readAsDataURL(file);
-// });
-
-
-// // Detect objects in the image
-// async function detect(img) {
-//     imageContainer.innerHTML = '';
-//     imageContainer.style.backgroundImage = `url(${img})`;
-
-//     status.textContent = 'Analysing...';
-//     const output = await detector(img, {
-//         threshold: 0.5,
-//         percentage: true,
-//     });
-//     status.textContent = '';
-//     output.forEach(renderBox);
-// }
-
-// // Render a bounding box and label on the image
-// function renderBox({ box, label }) {
-//     const { xmax, xmin, ymax, ymin } = box;
-
-//     // Generate a random color for the box
-//     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-
-//     // Draw the box
-//     const boxElement = document.createElement('div');
-//     boxElement.className = 'bounding-box';
-//     Object.assign(boxElement.style, {
-//         borderColor: color,
-//         left: 100 * xmin + '%',
-//         top: 100 * ymin + '%',
-//         width: 100 * (xmax - xmin) + '%',
-//         height: 100 * (ymax - ymin) + '%',
-//     })
-
-//     // Draw label
-//     const labelElement = document.createElement('span');
-//     labelElement.textContent = label;
-//     labelElement.className = 'bounding-box-label';
-//     labelElement.style.backgroundColor = color;
-
-//     boxElement.appendChild(labelElement);
-//     imageContainer.appendChild(boxElement);
-// }
-
-
 import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
 
-// Since we will download the model from the Hugging Face Hub, we can skip the local model check
+// Disable local models
 env.allowLocalModels = false;
 
-// Reference the elements that we will need
+// Reference the elements
 const status = document.getElementById('status');
 const userInput = document.getElementById('user-input');
 const outputContainer = document.getElementById('output');
@@ -92,8 +11,15 @@ const submitButton = document.getElementById('submit-button');
 
 // Load the text-generation pipeline
 status.textContent = 'Loading model...';
-const generator = await pipeline('text-generation', 'meta-llama/Llama-2-7b-hf');
-status.textContent = 'Model loaded. Ready to chat!';
+
+let generator;
+try {
+    generator = await pipeline('text-generation', 'gpt2');
+    status.textContent = 'Model loaded. Ready to chat!';
+} catch (error) {
+    console.error('Error loading model:', error);
+    status.textContent = 'Failed to load model. Check the console for details.';
+}
 
 // Add event listener to the submit button
 submitButton.addEventListener('click', async () => {
@@ -104,15 +30,14 @@ submitButton.addEventListener('click', async () => {
         return;
     }
 
-    // Update status to show the user we're processing
+    // Update status to show we're processing
     status.textContent = 'Generating response...';
 
     try {
-        // Generate text from the user input
         const response = await generator(inputText, {
             max_new_tokens: 100,
-            temperature: 0.7, // Controls randomness; lower = more deterministic
-            top_p: 0.95,     // Nucleus sampling
+            temperature: 0.7,
+            top_p: 0.95,
         });
 
         // Display the generated response