Hugging Face's logo

Spaces:
huggingfacejs
/
object-detection-vue
Running

App Files Community
Arsala Grey commited on
Commit
047b534
•
1 Parent(s): b2f6b5c

polish cleanup

Browse files
Files changed (2) hide show
  1. index.html +2 -2
  2. index.js +11 -9
index.html CHANGED
@@ -10,10 +10,10 @@
10
  </head>
11
  <body>
12
  <div id="generate-text-stream-app" class="container">
13
- <h1>Detect Objects In Images</h1>
14
  <div class="grid grid-cols-2 gap-2">
15
  <div>
16
- <label for="hf-token">Hugging Face Token</label>
17
  <input
18
  id="hf-token"
19
  v-model="token"
 
10
  </head>
11
  <body>
12
  <div id="generate-text-stream-app" class="container">
13
+ <h1>Detect Objects From Random Unsplash Images</h1>
14
  <div class="grid grid-cols-2 gap-2">
15
  <div>
16
+ <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
17
  <input
18
  id="hf-token"
19
  v-model="token"
index.js CHANGED
@@ -5,8 +5,6 @@ const getRandomImageUrl = async () => {
5
  const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
6
  return randomImageRequest.url
7
  }
8
- const ObjectDetectionModels = ["facebook/detr-resnet-50", "hustvl/yolos-tiny", "facebook/detr-resnet-101"]
9
-
10
  const getImageBuffer = async (imageUrl) => {
11
  const imageRequest = await fetch(imageUrl)
12
  const imageBuffer = await imageRequest.arrayBuffer()
@@ -53,14 +51,16 @@ const drawDetectedObjects = (img, detections) => {
53
  const app = createApp({
54
  setup() {
55
  const token = ref(localStorage.getItem("token") || "");
56
- const models = ref(ObjectDetectionModels);
57
  const selectedModel = ref("");
58
  const imageUrl = ref("");
59
  const detectedObjects = ref([]);
60
  const loading = ref(false);
 
61
 
62
  const statusMessage = computed(() => {
63
  if (loading.value) return "Loading...";
 
64
  if (detectedObjects.value.length === 0) return "No objects detected";
65
  if (detectedObjects.value.length === 1) return "1 object detected";
66
  return `${detectedObjects.value.length} objects detected`;
@@ -68,6 +68,7 @@ const app = createApp({
68
 
69
  const run = async () => {
70
  loading.value = true;
 
71
  try {
72
  const hf = new HfInference(token.value);
73
  const imageData = await getImageBuffer(imageUrl.value);
@@ -77,20 +78,25 @@ const app = createApp({
77
  });
78
  detectedObjects.value = result
79
  drawDetectedObjects(document.getElementById('current-image'), result)
80
- console.log(detectedObjects.value)
81
  loading.value = false;
82
  } catch (e) {
83
  console.error(e);
84
  loading.value = false;
 
85
  }
86
  };
87
 
88
- const reset = () => {
89
  document.getElementById('detected-objects-container').remove()
90
  document.getElementsByClassName('bounding-box').forEach(box => box.remove())
91
  detectedObjects.value = []
92
  }
93
 
 
 
 
 
 
94
  const shuffle = async () => {
95
  imageUrl.value = await getRandomImageUrl()
96
  reset()
@@ -103,10 +109,6 @@ const app = createApp({
103
  }
104
  selectedModel.value = models.value[0]
105
  imageUrl.value = await getRandomImageUrl()
106
- window.onresize = () => {
107
- document.getElementById('detected-objects-container').remove()
108
- document.getElementsByClassName('bounding-box').forEach(box => box.remove())
109
- }
110
  });
111
 
112
  return {
 
5
  const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
6
  return randomImageRequest.url
7
  }
 
 
8
  const getImageBuffer = async (imageUrl) => {
9
  const imageRequest = await fetch(imageUrl)
10
  const imageBuffer = await imageRequest.arrayBuffer()
 
51
  const app = createApp({
52
  setup() {
53
  const token = ref(localStorage.getItem("token") || "");
54
+ const models = ref(["facebook/detr-resnet-50", "hustvl/yolos-tiny", "facebook/detr-resnet-101"]);
55
  const selectedModel = ref("");
56
  const imageUrl = ref("");
57
  const detectedObjects = ref([]);
58
  const loading = ref(false);
59
+ const didErrorOccur = ref(false)
60
 
61
  const statusMessage = computed(() => {
62
  if (loading.value) return "Loading...";
63
+ if (didErrorOccur.value) return "Error :( Check the console";
64
  if (detectedObjects.value.length === 0) return "No objects detected";
65
  if (detectedObjects.value.length === 1) return "1 object detected";
66
  return `${detectedObjects.value.length} objects detected`;
 
68
 
69
  const run = async () => {
70
  loading.value = true;
71
+ removeDetectedObjects()
72
  try {
73
  const hf = new HfInference(token.value);
74
  const imageData = await getImageBuffer(imageUrl.value);
 
78
  });
79
  detectedObjects.value = result
80
  drawDetectedObjects(document.getElementById('current-image'), result)
 
81
  loading.value = false;
82
  } catch (e) {
83
  console.error(e);
84
  loading.value = false;
85
+ didErrorOccur.value = true
86
  }
87
  };
88
 
89
+ const removeDetectedObjects = () => {
90
  document.getElementById('detected-objects-container').remove()
91
  document.getElementsByClassName('bounding-box').forEach(box => box.remove())
92
  detectedObjects.value = []
93
  }
94
 
95
+ const reset = () => {
96
+ removeDetectedObjects()
97
+ didErrorOccur.value = false
98
+ }
99
+
100
  const shuffle = async () => {
101
  imageUrl.value = await getRandomImageUrl()
102
  reset()
 
109
  }
110
  selectedModel.value = models.value[0]
111
  imageUrl.value = await getRandomImageUrl()
 
 
 
 
112
  });
113
 
114
  return {