Add FPS display to webcam picker frontend

app/frontend/src/components/object_detection/ObjectDetectionComponent.tsx

@@ -132,7 +132,7 @@ export const ObjectDetectionComponent: React.FC = () => {
           <div className="text-sm text-gray-500">
             Input image width and height: {metadata.width} x {metadata.height}
             <br />
-            Time to inference: {metadata.inferenceTime} sec
+            Frame Rate: {metadata.inferenceTime} FPS
           </div>
         )}
 

app/frontend/src/components/object_detection/utlis/runInference.ts

@@ -23,13 +23,16 @@ export const runInference = async (
   }
 
   try {
+    const startTime = performance.now();
     const response = await axios.post(
       `/models-api/object-detection/`,
       formData,
       {
         headers: { "Content-Type": "multipart/form-data" },
       },
     );
+    const endTime = performance.now();
+    const requestLatency = endTime - startTime;
     // handle imageSourceElement types
     let width, height;
     if (imageSourceElement instanceof HTMLCanvasElement) {
@@ -42,7 +45,7 @@ export const runInference = async (
     const detectionMetadata: DetectionMetadata = {
       width: width,
       height: height,
-      inferenceTime: response.data.inference_time || 33.333,
+      inferenceTime: response.data.inference_time || (1/(requestLatency/1000)).toFixed(2),
     };
     const detections: Detection[] = response.data.map(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any