index.js

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';

// Disable local models
env.allowLocalModels = false;

// Reference the elements
const status = document.getElementById('status');
const userInput = document.getElementById('user-input');
const outputContainer = document.getElementById('output');
const submitButton = document.getElementById('submit-button');

// Load the text-generation pipeline
status.textContent = 'Loading model...';

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 () => {
    const inputText = userInput.value.trim();

    if (!inputText) {
        outputContainer.innerText = 'Please enter a prompt.';
        return;
    }

    // Update status to show we're processing
    status.textContent = 'Generating response...';

    try {
        const response = await generator(inputText, {
            max_new_tokens: 100,
            temperature: 0.7,
            top_p: 0.95,
        });

        // Display the generated response
        outputContainer.innerText = response[0].generated_text;
    } catch (error) {
        console.error(error);
        outputContainer.innerText = 'Error generating response. Please try again.';
    }

    // Reset the status
    status.textContent = 'Model loaded. Ready to chat!';
});