Update onnx_time_Inferance.js

onnx_time_Inferance.js

@@ -1,18 +1,24 @@
-import React, { useRef, useState } from 'react';
-import Webcam from 'react-webcam';
+import React, { useState } from 'react';
 import * as ort from 'onnxruntime-web';
 
 function ObjectDetection() {
   const [averageTime, setAverageTime] = useState(null);
   const [loading, setLoading] = useState(false);
-  const webcamRef = useRef(null);
+  const [images, setImages] = useState([]);
+
+  const handleFileChange = (event) => {
+    const files = Array.from(event.target.files);
+    setImages(files.slice(0, 10)); // Limit to the first 10 images
+  };
 
   const runBenchmark = async () => {
-    if (!webcamRef.current) return;
-    setLoading(true);
+    if (images.length === 0) {
+      alert('Please upload 10 images.');
+      return;
+    }
 
+    setLoading(true);
     const repetitions = 50;
-    const imageCount = 10;
     let totalInferenceTime = 0;
 
     try {
@@ -22,15 +28,12 @@ function ObjectDetection() {
       for (let rep = 0; rep < repetitions; rep++) {
         console.log(`Repetition ${rep + 1} of ${repetitions}`);
 
-        // Capture 10 images and measure inference time
-        for (let i = 0; i < imageCount; i++) {
+        // Process each image
+        for (const imageFile of images) {
           const startTime = performance.now();
 
-          // Capture image from webcam
-          const imageSrc = webcamRef.current.getScreenshot();
-
-          // Preprocess the image
-          const inputTensor = await preprocessImage(imageSrc);
+          // Convert image to tensor
+          const inputTensor = await preprocessImage(imageFile);
 
           // Define model input
           const feeds = { input: inputTensor };
@@ -43,7 +46,7 @@ function ObjectDetection() {
         }
       }
 
-      const avgInferenceTime = totalInferenceTime / (repetitions * imageCount);
+      const avgInferenceTime = totalInferenceTime / (repetitions * images.length);
       setAverageTime(avgInferenceTime);
     } catch (error) {
       console.error('Error running inference:', error);
@@ -52,51 +55,58 @@ function ObjectDetection() {
     setLoading(false);
   };
 
-  const preprocessImage = async (imageSrc) => {
-    const img = new Image();
-    img.src = imageSrc;
-    await new Promise((resolve) => (img.onload = resolve));
+  const preprocessImage = async (imageFile) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      const reader = new FileReader();
 
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
+      reader.onload = () => {
+        img.src = reader.result;
+      };
 
-    // Resize to model input size
-    const modelInputWidth = 320; // Replace with your model's input width
-    const modelInputHeight = 320; // Replace with your model's input height
-    canvas.width = modelInputWidth;
-    canvas.height = modelInputHeight;
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
 
-    context.drawImage(img, 0, 0, modelInputWidth, modelInputHeight);
+        // Resize to model input size
+        const modelInputWidth = 320; // Replace with your model's input width
+        const modelInputHeight = 320; // Replace with your model's input height
+        canvas.width = modelInputWidth;
+        canvas.height = modelInputHeight;
 
-    const imageData = context.getImageData(0, 0, modelInputWidth, modelInputHeight);
+        context.drawImage(img, 0, 0, modelInputWidth, modelInputHeight);
 
-    // Convert RGBA to RGB
-    const rgbData = new Uint8Array((imageData.data.length / 4) * 3); // 3 channels for RGB
-    for (let i = 0, j = 0; i < imageData.data.length; i += 4) {
-      rgbData[j++] = imageData.data[i]; // R
-      rgbData[j++] = imageData.data[i + 1]; // G
-      rgbData[j++] = imageData.data[i + 2]; // B
-      // Skip A (alpha) channel
-    }
+        const imageData = context.getImageData(0, 0, modelInputWidth, modelInputHeight);
 
-    // Create a tensor with shape [1, 320, 320, 3]
-    return new ort.Tensor('uint8', rgbData, [1, modelInputHeight, modelInputWidth, 3]);
+        // Convert RGBA to RGB
+        const rgbData = new Uint8Array((imageData.data.length / 4) * 3); // 3 channels for RGB
+        for (let i = 0, j = 0; i < imageData.data.length; i += 4) {
+          rgbData[j++] = imageData.data[i]; // R
+          rgbData[j++] = imageData.data[i + 1]; // G
+          rgbData[j++] = imageData.data[i + 2]; // B
+        }
+
+        // Create a tensor with shape [1, 320, 320, 3]
+        resolve(new ort.Tensor('uint8', rgbData, [1, modelInputHeight, modelInputWidth, 3]));
+      };
+
+      reader.readAsDataURL(imageFile);
+    });
   };
 
   return React.createElement(
     'div',
     null,
-    React.createElement('h1', null, 'Object Detection Benchmark'),
-    React.createElement(Webcam, {
-      audio: false,
-      ref: webcamRef,
-      screenshotFormat: 'image/jpeg',
-      width: 320,
-      height: 320,
+    React.createElement('h1', null, 'Object Detection Benchmark (Local Images)'),
+    React.createElement('input', {
+      type: 'file',
+      multiple: true,
+      accept: 'image/*',
+      onChange: handleFileChange,
     }),
     React.createElement(
       'button',
-      { onClick: runBenchmark, disabled: loading },
+      { onClick: runBenchmark, disabled: loading || images.length === 0 },
       loading ? 'Running Benchmark...' : 'Start Benchmark'
     ),
     React.createElement(
@@ -109,6 +119,13 @@ function ObjectDetection() {
             `Average Inference Time: ${averageTime.toFixed(2)} ms`
           )
         : null
+    ),
+    React.createElement(
+      'ul',
+      null,
+      images.map((img, index) =>
+        React.createElement('li', { key: index }, img.name)
+      )
     )
   );
 }