index.js

const { createApp, ref, onMounted, computed } = Vue;
import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";

const getRandomImageUrl = async () => {
    const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
    return randomImageRequest.url
}
const getImageBuffer = async (imageUrl) => {
    const imageRequest = await fetch(imageUrl)
    const imageBuffer = await imageRequest.arrayBuffer()
    return imageBuffer
}

const drawDetectedObjects = (img, detections) => {
    const container = document.createElement('div');
    container.id = 'detected-objects-container';
    container.style.top = `${img.offsetTop}px`;
    container.style.left = `${img.offsetLeft}px`;
    container.style.width = `${img.width}px`;
    container.style.height = `${img.height}px`;
    img.parentNode.insertBefore(container, img);

    const detectedObjectBoxes = []

    detections.forEach(detection => {
        const { xmin, ymin, xmax, ymax } = detection.box;
        const label = detection.label;
        const confidence = Math.floor(detection.score * 100) + '%';

        const box = document.createElement('div');
        box.classList.add('bounding-box');
        box.style.left = `${xmin}px`;
        box.style.top = `${ymin}px`;
        const width = xmax - xmin
        const height = ymax - ymin
        box.style.width = `${width}px`;
        box.style.height = `${height}px`;

        const area = width * height
        box.area = area
        const tooltip = document.createElement('div');
        tooltip.classList.add('tooltip');
        tooltip.innerText = `${label}: ${confidence}`;
        box.appendChild(tooltip);

        detectedObjectBoxes.push(box)
    });
    let zIndex = 0
    detectedObjectBoxes.sort((a, b) => {
        return b.area - a.area
    }).forEach(box => {
        box.style.zIndex = zIndex
        container.appendChild(box)
        zIndex++
    })
};
const app = createApp({
    setup() {
        const token = ref(localStorage.getItem("token") || "");
        const models = ref(["facebook/detr-resnet-50", "hustvl/yolos-tiny", "facebook/detr-resnet-101"]);
        const selectedModel = ref("");
        const imageUrl = ref("");
        const detectedObjects = ref([]);
        const loading = ref(false);
        const didErrorOccur = ref(false)

        const statusMessage = computed(() => {
            if (loading.value) return "Loading...";
            if (didErrorOccur.value) return "Error :( Check the console";
            if (detectedObjects.value.length === 0) return "No objects detected";
            if (detectedObjects.value.length === 1) return "1 object detected";
            return `${detectedObjects.value.length} objects detected`;
        })

        const run = async () => {
            reset()
            loading.value = true;
            try {
                const hf = new HfInference(token.value);
                const imageData = await getImageBuffer(imageUrl.value);
                const result = await hf.objectDetection({
                    data: imageData,
                    model: selectedModel.value,
                });
                detectedObjects.value = result
                drawDetectedObjects(document.getElementById('current-image'), result)
                loading.value = false;
            } catch (e) {
                console.error(e);
                loading.value = false;
                didErrorOccur.value = true
            }
        };
        const reset = () => {
            try {
                document.getElementById('detected-objects-container')?.remove()
                const boundingBoxes = document.getElementsByClassName('bounding-box')
                for (const box of boundingBoxes) {
                    box.remove()
                }
            } catch (e) {
                console.error(e)
            }
            didErrorOccur.value = false
            detectedObjects.value = []
        }

        const shuffle = async () => {
            imageUrl.value = ""
            reset()
            imageUrl.value = await getRandomImageUrl()
        };

        onMounted(async () => {
            const localStorageToken = localStorage.getItem("token")
            if (localStorageToken) {
                token.value = localStorageToken;
            }
            selectedModel.value = models.value[0]
            imageUrl.value = await getRandomImageUrl()
        });

        return {
            token,
            run,
            shuffle,
            models,
            selectedModel,
            imageUrl,
            loading,
            statusMessage
        };
    },
});

app.mount("#generate-text-stream-app");