sketch.js

// Import the pipeline function from the transformers library via CDN link
//import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0';

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
// Declare variables to hold the instances of the summarizer, generator, and classifier
let summarizer, generator, classifier;
env.allowLocalModels = false;
// Add an event listener to the window object that will execute the following function once the window is fully loaded
window.addEventListener('load', () => {
  // Add click event listeners to buttons with specific IDs, binding them to their respective functions
  
  document.getElementById('generate').addEventListener('click', generate);
  
});

// Grab DOM elements for updating status and output messages to the user
const statusElement = document.getElementById('status');
const outputElement = document.getElementById('output');

// Define an asynchronous function to generate text
async function generate() {
  console.log("hello")
  // Retrieve the input text from the DOM
  let text = document.getElementById('inputText').value;
  // If the generator model has not been loaded yet, load it and update the status
  if (!generator) {
    console.log("loading generate")
    updateStatus('Loading generation model...');
    generator = await pipeline(
      'text2text-generation',
      'Xenova/LaMini-Flan-T5-783M'
    );
  }
  // Update status and run the generator model on the input text
  updateStatus('Generating...');
  console.log("generate")
  let output = await generator(text, {
    max_new_tokens: 100, // Set the maximum number of new tokens for the generated text
  });
  // Log and display the generation results
  console.log(output);
  updateOutput(output[0]);
}

// Function to update the status text in the DOM
function updateStatus(message) {
  statusElement.textContent = 'Status: ' + message;
}

// Function to update the output text in the DOM and set the status back to 'Ready' once done
function updateOutput(message) {
  outputElement.innerHTML = message;
  updateStatus('Ready');
}