Update index.js

index.js

@@ -1,79 +1,165 @@
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
-
-// Since we will download the model from the Hugging Face Hub, we can skip the local model check
-env.allowLocalModels = false;
-
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
+import React, { useState, useEffect } from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Upload, Image as ImageIcon } from 'lucide-react';
+
+const ObjectDetector = () => {
+  const [status, setStatus] = useState('Loading model...');
+  const [detections, setDetections] = useState([]);
+  const [currentImage, setCurrentImage] = useState(null);
+  const [detector, setDetector] = useState(null);
+  
+  // Initialize the model
+  useEffect(() => {
+    const initModel = async () => {
+      try {
+        const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@xenova/[email protected]');
+        env.allowLocalModels = false;
+        const model = await pipeline('object-detection', 'Xenova/detr-resnet-50');
+        setDetector(model);
+        setStatus('Ready');
+      } catch (error) {
+        console.error('Error loading model:', error);
+        setStatus('Error loading model');
+      }
+    };
+    
+    initModel();
+  }, []);
+
+  const handleFileUpload = (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
 
     const reader = new FileReader();
-
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-
+    reader.onload = (e) => {
+      setCurrentImage(e.target.result);
+      detectObjects(e.target.result);
+    };
     reader.readAsDataURL(file);
-});
-
-
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
+  };
+
+  const handleExampleImage = () => {
+    const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+    setCurrentImage(EXAMPLE_URL);
+    detectObjects(EXAMPLE_URL);
+  };
+
+  const detectObjects = async (img) => {
+    if (!detector) return;
+    
+    setStatus('Analyzing...');
+    try {
+      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;
-
-    // Generate a random color for the box
-    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) + '%',
-    })
-
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}
+      });
+      setDetections(output.map((det, index) => ({
+        ...det,
+        id: index + 1
+      })));
+      setStatus('');
+    } catch (error) {
+      console.error('Error detecting objects:', error);
+      setStatus('Error analyzing image');
+    }
+  };
+
+  return (
+    <Card className="p-6 max-w-4xl mx-auto">
+      <div className="space-y-6">
+        <div className="flex gap-4 items-center justify-center">
+          <Button
+            onClick={() => document.getElementById('fileUpload').click()}
+            className="flex items-center gap-2"
+          >
+            <Upload className="w-4 h-4" />
+            Upload Image
+          </Button>
+          <Button
+            onClick={handleExampleImage}
+            className="flex items-center gap-2"
+          >
+            <ImageIcon className="w-4 h-4" />
+            Try Example
+          </Button>
+          <input
+            id="fileUpload"
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleFileUpload}
+          />
+        </div>
+
+        {status && (
+          <div className="text-center text-sm text-gray-600">
+            {status}
+          </div>
+        )}
+
+        {currentImage && (
+          <div className="relative w-full h-96 bg-gray-100 rounded overflow-hidden">
+            <img
+              src={currentImage}
+              alt="Uploaded"
+              className="w-full h-full object-contain"
+            />
+            {detections.map((detection) => (
+              <div
+                key={detection.id}
+                className="absolute border-2 border-blue-500"
+                style={{
+                  left: `${detection.box.xmin}%`,
+                  top: `${detection.box.ymin}%`,
+                  width: `${detection.box.xmax - detection.box.xmin}%`,
+                  height: `${detection.box.ymax - detection.box.ymin}%`,
+                }}
+              >
+                <span className="absolute top-0 left-0 transform -translate-y-full bg-blue-500 text-white px-1 py-0.5 text-xs rounded">
+                  {detection.label} ({(detection.score * 100).toFixed(1)}%)
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {detections.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b">
+                  <th className="p-2 text-left font-semibold">Object</th>
+                  <th className="p-2 text-left font-semibold">Confidence</th>
+                  <th className="p-2 text-left font-semibold">Location</th>
+                </tr>
+              </thead>
+              <tbody>
+                {detections.map((detection) => (
+                  <tr key={detection.id} className="border-b">
+                    <td className="p-2">
+                      <span className="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded">
+                        {detection.label}
+                      </span>
+                    </td>
+                    <td className="p-2">
+                      {(detection.score * 100).toFixed(1)}%
+                    </td>
+                    <td className="p-2">
+                      <div className="text-sm text-gray-600">
+                        <div>x: {detection.box.xmin.toFixed(1)}% - {detection.box.xmax.toFixed(1)}%</div>
+                        <div>y: {detection.box.ymin.toFixed(1)}% - {detection.box.ymax.toFixed(1)}%</div>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default ObjectDetector;