| 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"); | |