Update index.js

index.js

@@ -13,9 +13,7 @@ const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs
 
 // Create a new object detection pipeline
 status.textContent = 'Loading model...';
-// To-Do #1 pipeline API를 사용하여 detr-resnet-50 object detection 모델의 instance를 detector라는 이름을 붙여 생성하십시오.
-// DETR 모델 참고 문서 https://huggingface.co/facebook/detr-resnet-50
-const detector = await '???';
+const detector = await pipeline('object-detection', 'facebook/detr-resnet-50');
 status.textContent = 'Ready';
 
 example.addEventListener('click', (e) => {
@@ -44,11 +42,7 @@ async function detect(img) {
     imageContainer.style.backgroundImage = `url(${img})`;
 
     status.textContent = 'Analysing...';
-    // To-Do #2  객체 탐지를 위한 오브젝트에 threshold를 0.5, percentage를 true로 지정하고 그 결과를 output에 저장하십시오
-    const output = ???( 
-      // threshold 값을 지정하고 쉼표를 붙이시오
-      // percentage 지정
-    );
+    const output = await detector(img, { threshold: 0.5, percentage: true });
     status.textContent = '';
     output.forEach(renderBox);
 }
@@ -58,18 +52,18 @@ function renderBox({ box, label }) {
     const { xmax, xmin, ymax, ymin } = box;
 
     // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');
 
     // Draw the box
     const boxElement = document.createElement('div');
     boxElement.className = 'bounding-box';
     Object.assign(boxElement.style, {
         borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
+        left: `${100 * xmin}%`,
+        top: `${100 * ymin}%`,
+        width: `${100 * (xmax - xmin)}%`,
+        height: `${100 * (ymax - ymin)}%`,
+    });
 
     // Draw label
     const labelElement = document.createElement('span');