File size: 4,487 Bytes
3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 7e2f64e 3529c31 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 |
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 ObjectDetectionModels = ["facebook/detr-resnet-50", "hustvl/yolos-tiny", "facebook/detr-resnet-101"]
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(ObjectDetectionModels);
const selectedModel = ref("");
const imageUrl = ref("");
const detectedObjects = ref([]);
const loading = ref(false);
const statusMessage = computed(() => {
if (loading.value) return "Loading...";
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;
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)
console.log(detectedObjects.value)
loading.value = false;
} catch (e) {
console.error(e);
loading.value = false;
}
};
const reset = () => {
document.getElementById('detected-objects-container').remove()
document.getElementsByClassName('bounding-box').forEach(box => box.remove())
detectedObjects.value = []
}
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()
window.onresize = () => {
document.getElementById('detected-objects-container').remove()
document.getElementsByClassName('bounding-box').forEach(box => box.remove())
}
});
return {
token,
run,
shuffle,
models,
selectedModel,
imageUrl,
loading,
statusMessage
};
},
});
app.mount("#generate-text-stream-app");
|