index.js

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers"; // import Transformers.js

env.allowLocalModels = false; // skip the local model check

// create references to DOM elements
const fileUpload = document.getElementById("file-upload");
const imageContainer = document.getElementById("image-container");
const status = document.getElementById("status");

status.textContent = "Loading model..."; // status message for user

// create object detection pipeline
const detector = await pipeline("object-detection", "Xenova/detr-resnet-50");

status.textContent = "Ready"; // status message for user

// create image uploader
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 = function (e2) {
    imageContainer.innerHTML = "";
    const image = document.createElement("img");
    image.src = e2.target.result;
    imageContainer.appendChild(image);
    // detect(image); // Uncomment this line to run the model
  };
  reader.readAsDataURL(file);
});