File size: 4,701 Bytes
3529c31
7e2f64e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3529c31
 
7e2f64e
 
 
 
 
 
 
 
 
4f78fc8
 
 
 
7e2f64e
4f78fc8
 
7e2f64e
 
 
 
 
3529c31
7e2f64e
4f78fc8
3529c31
4f78fc8
 
 
 
 
 
7e2f64e
 
 
 
047b534
7e2f64e
 
 
3529c31
047b534
3529c31
 
 
047b534
3529c31
 
 
 
7e2f64e
 
4f78fc8
3529c31
7e2f64e
 
 
 
 
 
 
 
 
3529c31
7e2f64e
3529c31
 
047b534
7e2f64e
 
047b534
4f78fc8
 
 
 
 
 
 
 
 
047b534
4f78fc8
047b534
 
3529c31
4f78fc8
3529c31
4f78fc8
7e2f64e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3529c31
 
 
7e2f64e
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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");