From 80769456a8a0274648dbf79b28901fafb39f959f Mon Sep 17 00:00:00 2001
From: Nick <bourdakos1@gmail.com>
Date: Sat, 5 Oct 2019 10:49:29 -0400
Subject: [PATCH 1/2] draw emoji

---
 src/useBoxRenderer.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/useBoxRenderer.js b/src/useBoxRenderer.js
index e9b58ce..fbb553b 100644
--- a/src/useBoxRenderer.js
+++ b/src/useBoxRenderer.js
@@ -4,7 +4,7 @@ const renderPredictions = (predictions, canvasRef) => {
   const ctx = canvasRef.current.getContext('2d')
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
   // Font options.
-  const font = '16px sans-serif'
+  const font = '120px sans-serif'
   ctx.font = font
   ctx.textBaseline = 'top'
   predictions.forEach(prediction => {
@@ -17,10 +17,10 @@ const renderPredictions = (predictions, canvasRef) => {
     ctx.lineWidth = 4
     ctx.strokeRect(x, y, width, height)
     // Draw the label background.
-    ctx.fillStyle = '#00FFFF'
-    const textWidth = ctx.measureText(prediction.class).width
-    const textHeight = parseInt(font, 10) // base 10
-    ctx.fillRect(x, y, textWidth + 4, textHeight + 4)
+    // ctx.fillStyle = '#00FFFF'
+    // const textWidth = ctx.measureText(prediction.class).width
+    // const textHeight = parseInt(font, 10) // base 10
+    // ctx.fillRect(x, y, textWidth + 4, textHeight + 4)
   })
 
   predictions.forEach(prediction => {
@@ -28,7 +28,12 @@ const renderPredictions = (predictions, canvasRef) => {
     const y = prediction.bbox[1]
     // Draw the text last to ensure it's on top.
     ctx.fillStyle = '#000000'
-    ctx.fillText(prediction.class, x, y)
+
+    if (prediction.class === 'up') {
+      ctx.fillText('👍', x, y)
+    } else if (prediction.class === 'down') {
+      ctx.fillText('👎', x, y)
+    }
   })
 }
 

From 5d8cfd0280dd59e9d917d925c015e4d6dd547c23 Mon Sep 17 00:00:00 2001
From: Nick <bourdakos1@gmail.com>
Date: Thu, 7 Nov 2019 17:11:56 +0100
Subject: [PATCH 2/2] done

---
 src/useBoxRenderer.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/useBoxRenderer.js b/src/useBoxRenderer.js
index fbb553b..3eda4f0 100644
--- a/src/useBoxRenderer.js
+++ b/src/useBoxRenderer.js
@@ -1,4 +1,8 @@
 import { useEffect } from 'react'
+import * as tf from '@tensorflow/tfjs'
+
+const USE_GPU = true
+const USE_API = false
 
 const renderPredictions = (predictions, canvasRef) => {
   const ctx = canvasRef.current.getContext('2d')
@@ -38,14 +42,25 @@ const renderPredictions = (predictions, canvasRef) => {
 }
 
 const detectFrame = async (model, videoRef, canvasRef) => {
+  console.time('Detect')
   const predictions = await model.detect(videoRef.current)
-  renderPredictions(predictions, canvasRef)
-  requestAnimationFrame(() => {
-    detectFrame(model, videoRef, canvasRef)
-  })
+  if (USE_API) {
+    setTimeout(() => {
+      console.timeEnd('Detect')
+      renderPredictions(predictions, canvasRef)
+      detectFrame(model, videoRef, canvasRef)
+    }, 1000)
+  } else {
+    console.timeEnd('Detect')
+    renderPredictions(predictions, canvasRef)
+    requestAnimationFrame(() => {
+      detectFrame(model, videoRef, canvasRef)
+    })
+  }
 }
 
 const useBoxRenderer = (model, videoRef, canvasRef, shouldRender) => {
+  tf.setBackend(USE_GPU || USE_API ? 'webgl' : 'cpu')
   useEffect(() => {
     if (model && shouldRender) {
       detectFrame(model, videoRef, canvasRef)