Update onnx_time_Inferance.js

onnx_time_Inferance.js

@@ -0,0 +1,116 @@
+import React, { useRef, useState } from 'react';
+import Webcam from 'react-webcam';
+import * as ort from 'onnxruntime-web';
+
+function ObjectDetection() {
+  const [averageTime, setAverageTime] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const webcamRef = useRef(null);
+
+  const runBenchmark = async () => {
+    if (!webcamRef.current) return;
+    setLoading(true);
+
+    const repetitions = 50;
+    const imageCount = 10;
+    let totalInferenceTime = 0;
+
+    try {
+      // Load the ONNX model once before the loop
+      const model = await ort.InferenceSession.create('./model.onnx');
+
+      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++) {
+          const startTime = performance.now();
+
+          // Capture image from webcam
+          const imageSrc = webcamRef.current.getScreenshot();
+
+          // Preprocess the image
+          const inputTensor = await preprocessImage(imageSrc);
+
+          // Define model input
+          const feeds = { input: inputTensor };
+
+          // Run inference
+          await model.run(feeds);
+
+          const endTime = performance.now();
+          totalInferenceTime += endTime - startTime;
+        }
+      }
+
+      const avgInferenceTime = totalInferenceTime / (repetitions * imageCount);
+      setAverageTime(avgInferenceTime);
+    } catch (error) {
+      console.error('Error running inference:', error);
+    }
+
+    setLoading(false);
+  };
+
+  const preprocessImage = async (imageSrc) => {
+    const img = new Image();
+    img.src = imageSrc;
+    await new Promise((resolve) => (img.onload = resolve));
+
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    // 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;
+
+    context.drawImage(img, 0, 0, modelInputWidth, modelInputHeight);
+
+    const imageData = context.getImageData(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
+    }
+
+    // Create a tensor with shape [1, 320, 320, 3]
+    return new ort.Tensor('uint8', rgbData, [1, modelInputHeight, modelInputWidth, 3]);
+  };
+
+  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(
+      'button',
+      { onClick: runBenchmark, disabled: loading },
+      loading ? 'Running Benchmark...' : 'Start Benchmark'
+    ),
+    React.createElement(
+      'div',
+      null,
+      averageTime !== null
+        ? React.createElement(
+            'h2',
+            null,
+            `Average Inference Time: ${averageTime.toFixed(2)} ms`
+          )
+        : null
+    )
+  );
+}
+
+export default ObjectDetection;