index.js

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

const imageUpload = document.getElementById("image-upload");
const status = document.getElementById("status");
const textDescription = document.getElementById("text-description");
const imageContainer = document.getElementById("image-container");

// Skip local model check as model will be downloaded from Hugging Face Hub
env.allowLocalModels = false;

// Specify the task and model
const pipe = await pipeline("image-to-text", 'Xenova/vit-gpt2-image-captioning')

// Listen for image upload
imageUpload.addEventListener("change", async (e) => {
    const image = e.target.files[0];

    if (!image) {
      return errorMsg.textContent = "The uploaded file is not an image. Please try again.";
    }
    
    if (image.type === "image/svg+xml") {
      return errorMsg.textContent = "SVG images are not supported. Please try again.";
    }

    imageContainer.innerHTML = "";
    let imgURL = URL.createObjectURL(image);
    const imageEl = document.createElement("img");
    imageEl.src = imgURL;
    imageContainer.appendChild(imageEl);
    textDescription.textContent = "";
    getTextDescription(imgURL);
});

async function getTextDescription(img) {
  status.textContent = "Generating text description...";
  const out = await pipe(img)
  let description = out[0].generated_text;
  textDescription.textContent = description[0].toUpperCase() + description.slice(1);
  status.textContent = "";
}