static/script.js

document.addEventListener("DOMContentLoaded", async () => {
    console.log("document loaded...")
    init();
})

 function init() {
    const img = document.querySelector("#example-img");
    fetch(img.src)
        .then((res) => res.blob())
        .then((blob) => {
            detectObjects(blob, img.naturalWidth, img.naturalHeight);
        })
}
 


async function detectObjects(file, imgW, imgH) {
    try {

        const form = new FormData()
        form.append('image', file)
        const response = await fetch(
          '/detect-image',
          {
            method: 'POST',
            body: form,
          },
        )

        const objectDetectionRes = await response.json()
      
        document.querySelector("#output").innerText = JSON.stringify(objectDetectionRes, null, 2);
        const container = document.querySelector("#image-container");
        container.querySelectorAll(".box").forEach((el) => el.remove());
        const boxes = objectDetectionRes.map((obj) => {
            const w = (100 * (obj.box.xmax - obj.box.xmin)) / imgW;
            const h = (100 * (obj.box.ymax - obj.box.ymin)) / imgH;
            const box = document.createElement("div");
            box.classList.add("box");
            box.style.position = "absolute";
            box.style.border = "solid 2px red";
            box.style.top = (100 * obj.box.ymin) / imgH + "%";
            box.style.left = (100 * obj.box.xmin) / imgW + "%";
            box.style.width = w + "%";
            box.style.height = h + "%";
            const para = document.createElement("p");
            para.classList.add("font-mono")
            para.classList.add("text-base")
            para.classList.add("text-white")
            para.innerText = obj.label;
            box.appendChild(para);
            return box;
        })
        boxes.forEach((box) => {
            container.appendChild(box);
        })
    } catch (e) {
        document.querySelector("#output").innerText = e.message;
    }
}

document.querySelector("#image-file").addEventListener("change", async (e) => {
    const file = e.target.files[0];
    const newImage = new Image();
    newImage.src = URL.createObjectURL(file)
    const img = document.querySelector("#example-img");
    img.src = newImage.src;
    newImage.onload = () => {
        detectObjects(file, newImage.naturalWidth, newImage.naturalHeight);
    }
});