Upload index.js with huggingface_hub

index.js

@@ -1,76 +1,188 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
-
-// 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';
+// index.js
+import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
+
+// DOM elements
+const taskSelect = document.getElementById('task-select');
+const deviceSelect = document.getElementById('device-select');
+const inputText = document.getElementById('input-text');
+const runBtn = document.getElementById('run-btn');
+const outputContainer = document.getElementById('output');
+
+// Model mapping
+const modelMap = {
+    'text-classification': 'distilbert-base-uncased-finetuned-sst-2-english',
+    'sentiment-analysis': 'distilbert-base-uncased-finetuned-sst-2-english',
+    'question-answering': 'deepset/roberta-base-squad2',
+    'text-generation': 'gpt2',
+    'translation': 't5-small'
+};
+
+// Initialize pipeline
+let currentPipeline = null;
+let currentTask = null;
+
+// Check WebGPU support
+function checkWebGPUSupport() {
+    return 'gpu' in navigator;
+}
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+// Update device options based on support
+if (!checkWebGPUSupport()) {
+    const option = document.querySelector('#device-select option[value="webgpu"]');
+    option.disabled = true;
+    option.textContent = 'GPU (WebGPU) - Not Supported';
+    deviceSelect.value = 'cpu';
+}
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
+// Function to create pipeline
+async function createPipeline(task, device) {
+    const modelName = modelMap[task];
+    
+    // Show loading state
+    outputContainer.innerHTML = '<p class="loading">Loading model...</p>';
+    
+    try {
+        // Create pipeline with selected device
+        if (device === 'webgpu' && checkWebGPUSupport()) {
+            return await pipeline(task, modelName, { device: 'webgpu' });
+        } else {
+            return await pipeline(task, modelName);
+        }
+    } catch (error) {
+        console.error('Error creating pipeline:', error);
+        outputContainer.innerHTML = `<p class="error">Error loading model: ${error.message}</p>`;
+        return null;
+    }
+}
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
+// Function to run the model
+async function runModel() {
+    const task = taskSelect.value;
+    const device = deviceSelect.value;
+    const text = inputText.value.trim();
+    
+    if (!text) {
+        outputContainer.innerHTML = '<p class="error">Please enter some text to process.</p>';
         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);
+    
+    // Check if pipeline needs to be recreated
+    if (!currentPipeline || currentTask !== task) {
+        currentPipeline = await createPipeline(task, device);
+        currentTask = task;
+    }
+    
+    if (!currentPipeline) {
+        return;
+    }
+    
+    // Show processing state
+    outputContainer.innerHTML = '<p class="loading">Processing...</p>';
+    
+    try {
+        let result;
+        
+        switch (task) {
+            case 'text-classification':
+            case 'sentiment-analysis':
+                result = await currentPipeline(text);
+                break;
+            case 'question-answering':
+                // For QA, we need context and question
+                const [context, question] = text.split('\n').length > 1 
+                    ? [text.split('\n').slice(0, -1).join(' '), text.split('\n').pop()] 
+                    : ['The sky is blue.', text];
+                result = await currentPipeline(question, context);
+                break;
+            case 'text-generation':
+                result = await currentPipeline(text, { max_new_tokens: 50 });
+                break;
+            case 'translation':
+                result = await currentPipeline(text, { 
+                    src_lang: 'en', 
+                    tgt_lang: 'de' 
+                });
+                break;
+            default:
+                throw new Error('Unsupported task');
+        }
+        
+        // Display results
+        displayResults(result, task);
+    } catch (error) {
+        console.error('Error running model:', error);
+        outputContainer.innerHTML = `<p class="error">Error processing text: ${error.message}</p>`;
+    }
 }
 
-// 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) + '%',
-    })
+// Function to display results based on task
+function displayResults(result, task) {
+    let content = '';
+    
+    switch (task) {
+        case 'text-classification':
+        case 'sentiment-analysis':
+            content = `
+                <h4>Classification Results:</h4>
+                <ul>
+                    ${result.map(item => `
+                        <li>
+                            <strong>${item.label}:</strong> ${(item.score * 100).toFixed(2)}%
+                        </li>
+                    `).join('')}
+                </ul>
+            `;
+            break;
+        case 'question-answering':
+            content = `
+                <h4>Answer:</h4>
+                <p>${result.answer}</p>
+                <p><strong>Confidence:</strong> ${(result.score * 100).toFixed(2)}%</p>
+            `;
+            break;
+        case 'text-generation':
+            content = `
+                <h4>Generated Text:</h4>
+                <p>${result[0].generated_text}</p>
+            `;
+            break;
+        case 'translation':
+            content = `
+                <h4>Translation:</h4>
+                <p>${result[0].translation_text}</p>
+            `;
+            break;
+        default:
+            content = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
+    }
+    
+    outputContainer.innerHTML = content;
+}
 
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
+// Event listeners
+runBtn.addEventListener('click', runModel);
+
+// Handle task change
+taskSelect.addEventListener('change', () => {
+    // Reset pipeline when task changes
+    currentPipeline = null;
+    currentTask = null;
+    
+    // Update placeholder text based on task
+    switch (taskSelect.value) {
+        case 'question-answering':
+            inputText.placeholder = "Enter context and question separated by a new line\nContext: The sky is blue.\nQuestion: What color is the sky?";
+            break;
+        case 'text-generation':
+            inputText.placeholder = "Enter a prompt to generate text from...";
+            break;
+        case 'translation':
+            inputText.placeholder = "Enter text to translate from English to German...";
+            break;
+        default:
+            inputText.placeholder = "Enter your text here...";
+    }
+});
 
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}
+// Initialize with default task
+taskSelect.dispatchEvent(new Event('change'));