Spaces:
Running
Running
File size: 3,507 Bytes
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 |
const { createApp, ref, onMounted } = 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 ObjectDatectionModels = ["facebook/detr-resnet-50"]
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);
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);
container.appendChild(box);
});
};
const app = createApp({
setup() {
const token = ref(localStorage.getItem("token") || "");
const models = ref(ObjectDatectionModels);
const selectedModel = ref("");
const imageUrl = ref("");
const detectedObjects = ref([]);
const run = async () => {
try {
const hf = new HfInference(token.value);
const imageData = await getImageBuffer(imageUrl.value);
const result = await hf.objectDetection({
data: imageData,
model: selectedModel.value,
});
console.log(result);
detectedObjects.value = result
drawDetectedObjects(document.getElementById('current-image'), result)
} catch (e) {
console.log(e);
}
};
const shuffle = async () => {
imageUrl.value = await getRandomImageUrl()
document.getElementById('detected-objects-container').remove()
document.getElementsByClassName('bounding-box').forEach(box => box.remove())
};
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
};
},
});
app.mount("#generate-text-stream-app");
|