use the improved fps meter in all examples

examples/views/faceDetectionVideo.html

@@ -53,6 +53,15 @@
     let modelLoaded = false
     let result
 
+    let forwardTimes = []
+
+    function updateTimeStats(timeInMs) {
+      forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
+      const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
+      $('#time').val(`${Math.round(avgTimeInMs)} ms`)
+      $('#fps').val(`${faceapi.round(1000 / avgTimeInMs)}`)
+    }
+
     function onIncreaseThreshold() {
       minConfidence = Math.min(faceapi.round(minConfidence + 0.1), 1.0)
       $('#minConfidence').val(minConfidence)
@@ -63,11 +72,6 @@
       $('#minConfidence').val(minConfidence)
     }
 
-    function displayTimeStats(timeInMs) {
-      $('#time').val(`${timeInMs} ms`)
-      $('#fps').val(`${faceapi.round(1000 / timeInMs)}`)
-    }
-
     async function onPlay(videoEl) {
       if(videoEl.paused || videoEl.ended || !modelLoaded)
         return false
@@ -79,7 +83,7 @@
 
       const ts = Date.now()
       result = await faceapi.locateFaces(videoEl, minConfidence)
-      displayTimeStats(Date.now() - ts)
+      updateTimeStats(Date.now() - ts)
 
       faceapi.drawDetection('overlay', result.map(det => det.forSize(width, height)))
       setTimeout(() => onPlay(videoEl))

examples/views/tinyYolov2FaceDetectionVideo.html

@@ -63,6 +63,15 @@
     let sizeType = 'md'
     let modelLoaded = false
 
+    let forwardTimes = []
+
+    function updateTimeStats(timeInMs) {
+      forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
+      const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
+      $('#time').val(`${Math.round(avgTimeInMs)} ms`)
+      $('#fps').val(`${faceapi.round(1000 / avgTimeInMs)}`)
+    }
+
     function onIncreaseThreshold() {
       scoreThreshold = Math.min(faceapi.round(scoreThreshold + 0.1), 1.0)
       $('#scoreThreshold').val(scoreThreshold)
@@ -78,11 +87,6 @@
       $('#sizeType').val(sizeType)
     }
 
-    function displayTimeStats(timeInMs) {
-      $('#time').val(`${timeInMs} ms`)
-      $('#fps').val(`${faceapi.round(1000 / timeInMs)}`)
-    }
-
     async function onPlay(videoEl) {
       if(videoEl.paused || videoEl.ended || !modelLoaded)
         return false
@@ -99,7 +103,7 @@
 
       const ts = Date.now()
       result = await faceapi.tinyYolov2(videoEl, forwardParams)
-      displayTimeStats(Date.now() - ts)
+      updateTimeStats(Date.now() - ts)
 
       faceapi.drawDetection('overlay', result.map(det => det.forSize(width, height)))
       setTimeout(() => onPlay(videoEl))

examples/views/tinyYolov2FaceDetectionWebcam.html

@@ -64,6 +64,15 @@
     let sizeType = '160'
     let modelLoaded = false
 
+    let forwardTimes = []
+
+    function updateTimeStats(timeInMs) {
+      forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
+      const avgTimeInMs = forwardTimes.reduce((total, t) => total + t) / forwardTimes.length
+      $('#time').val(`${Math.round(avgTimeInMs)} ms`)
+      $('#fps').val(`${faceapi.round(1000 / avgTimeInMs)}`)
+    }
+
     function onIncreaseThreshold() {
       scoreThreshold = Math.min(faceapi.round(scoreThreshold + 0.1), 1.0)
       $('#scoreThreshold').val(scoreThreshold)
@@ -79,11 +88,6 @@
       $('#sizeType').val(sizeType)
     }
 
-    function displayTimeStats(timeInMs) {
-      $('#time').val(`${timeInMs} ms`)
-      $('#fps').val(`${faceapi.round(1000 / timeInMs)}`)
-    }
-
     async function onPlay(videoEl) {
       if(videoEl.paused || videoEl.ended || !modelLoaded)
         return false
@@ -100,7 +104,7 @@
 
       const ts = Date.now()
       result = await faceapi.tinyYolov2(videoEl, forwardParams)
-      displayTimeStats(Date.now() - ts)
+      updateTimeStats(Date.now() - ts)
 
       faceapi.drawDetection('overlay', result.map(det => det.forSize(width, height)))
       setTimeout(() => onPlay(videoEl))