Give real-time targets proportional alpha values

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

src/pages/detect.vue

@@ -368,6 +368,7 @@ import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
         imCanvas.width = imCanvas.clientWidth
         imCanvas.height = imCanvas.clientHeight
         imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
+        imageCtx.globalAlpha = 1
         imageCtx.strokeStyle = 'yellow'
         imageCtx.lineWidth = 3
         return [imCanvas, imageCtx]

src/pages/detection-mixin.js

@@ -196,9 +196,11 @@ export default {
           let rawCoords = []
           if (rawRes) {
             for (var i = 0; i < rawRes.length; i++) {
-              var getScores = rawRes[i].slice(4)
+              let getScores = rawRes[i].slice(4) 
               if (getScores.some( s => s > .5)) {
-                rawCoords.push(rawRes[i].slice(0,2))
+                let foundTarget = rawRes[i].slice(0,2)
+                foundTarget.push(Math.max(...getScores))
+                rawCoords.push(foundTarget)
               }
             }
 
@@ -207,6 +209,7 @@ export default {
               console.log(`x: ${coord[0]}, y: ${coord[1]}`)
               let pointX = (imCanvas.width - imgWidth) / 2 + (coord[0] / modelWidth) * imgWidth -5
               let pointY = (imCanvas.height - imgHeight) / 2 + (coord[1] / modelHeight) * imgHeight -5
+              imageCtx.globalAlpha = coord[2]
               imageCtx.drawImage(target, pointX, pointY, 20, 20)
             }
           }