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`; box.style.width = `${xmax - xmin}px`; box.style.height = `${ymax - ymin}px`; const tooltip = document.createElement('div'); tooltip.classList.add('tooltip'); tooltip.innerText = `${label}: ${confidence}`; box.appendChild(tooltip); detectedObjectBoxes.push(box) }); detectedObjectBoxes.sort((a, b) => { const aSize = a.style.width * a.style.height const bSize = b.style.width * b.style.height return aSize - bSize }).forEach(box => container.appendChild(box)) }; 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 () => { loading.value = true; removeDetectedObjects() 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 removeDetectedObjects = () => { document.getElementById('detected-objects-container').remove() document.getElementsByClassName('bounding-box').forEach(box => box.remove()) detectedObjects.value = [] } const reset = () => { removeDetectedObjects() didErrorOccur.value = false } const shuffle = async () => { imageUrl.value = await getRandomImageUrl() reset() }; 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");