Update index.js

index.js

@@ -13,6 +13,34 @@ const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs
 
 // Create a new object detection pipeline
 status.textContent = 'Loading model...';
+
+아래 코드는 주어진 주석을 기반으로 detr-resnet-50 Object Detection 모델의 인스턴스를 생성하는 방법을 보여줍니다. 이를 위해 Hugging Face의 Transformers 라이브러리를 사용하겠습니다.
+
+javascript
+Copy code
+// 필요한 모듈을 불러옵니다.
+const { pipeline } = require('@huggingface/node-fetch');
+const { detr } = require('@transformers/detr-resnet-50');
+
+// 상태 텍스트를 업데이트합니다.
+status.textContent = 'Loading model...';
+
+// DETR 모델을 로드합니다.
+(async () => {
+    try {
+        // Object Detection 모델을 로드합니다.
+        const detector = await pipeline(detr, { model: 'facebook/detr-resnet-50' });
+
+        // 모델 로딩이 완료되면 상태를 업데이트합니다.
+        status.textContent = 'Model loaded successfully.';
+        
+        // 생성된 detector를 사용하여 Object Detection을 수행할 수 있습니다.
+        // 예시: const result = await detector('input image');
+    } catch (error) {
+        // 모델 로딩 중에 오류가 발생하면 상태를 업데이트합니다.
+        status.textContent = 'Error loading model: ' + error.message;
+    }
+})();
 // To-Do #1 pipeline API를 사용하여 detr-resnet-50 object detection 모델의 instance를 detector라는 이름을 붙여 생성하십시오.
 // DETR 모델 참고 문서 https://huggingface.co/facebook/detr-resnet-50
 const detector = await '???';
@@ -44,15 +72,13 @@ 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 지정
-    );
+    // 객체 탐지를 위한 파이프라인을 생성하고 threshold와 percentage를 설정합니다.
+    const output = await detector(img, { threshold: 0.5, percentage: true });
     status.textContent = '';
     output.forEach(renderBox);
 }
 
+
 // Render a bounding box and label on the image
 function renderBox({ box, label }) {
     const { xmax, xmin, ymax, ymin } = box;