fix some rendering issues

Author: bourdakos1

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

src/index.js

@@ -20,20 +20,13 @@ const App = () => {
   return (
     <>
       <video
-        className={styles.fixed}
+        className={styles.video}
         autoPlay
         playsInline
         muted
         ref={videoRef}
-        width="600"
-        height="500"
-      />
-      <canvas
-        className={styles.fixed}
-        ref={canvasRef}
-        width="600"
-        height="500"
       />
+      <canvas ref={canvasRef} />
     </>
   )
 }

src/styles.module.css

@@ -1,5 +1,7 @@
-.fixed {
+.video {
   position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }

src/useBoxRenderer.js

@@ -1,58 +1,163 @@
-import { useEffect } from "react";
+import { useEffect } from 'react'
 
-const SCORE_DIGITS = 4;
+const getRetinaContext = (canvas) => {
+  const ctx = canvas.getContext('2d')
+  const scale = window.devicePixelRatio
+  let width = canvas.width / scale
+  let height = canvas.height / scale
+  return {
+    setWidth: (w) => {
+      width = w
+      canvas.style.width = w + 'px'
+      canvas.width = w * scale
+    },
+    setHeight: (h) => {
+      height = h
+      canvas.style.height = h + 'px'
+      canvas.height = h * scale
+    },
+    width: width,
+    height: height,
+    clearAll: () => {
+      return ctx.clearRect(0, 0, width * scale, height * scale)
+    },
+    clearRect: (x, y, width, height) => {
+      return ctx.clearRect(x * scale, y * scale, width * scale, height * scale)
+    },
+    setFont: (font) => {
+      const size = parseInt(font, 10) * scale
+      const retinaFont = font.replace(/^\d+px/, size + 'px')
+      ctx.font = retinaFont
+    },
+    setTextBaseLine: (textBaseline) => {
+      ctx.textBaseline = textBaseline
+    },
+    setStrokeStyle: (strokeStyle) => {
+      ctx.strokeStyle = strokeStyle
+    },
+    setLineWidth: (lineWidth) => {
+      ctx.lineWidth = lineWidth * scale
+    },
+    strokeRect: (x, y, width, height) => {
+      return ctx.strokeRect(x * scale, y * scale, width * scale, height * scale)
+    },
+    setFillStyle: (fillStyle) => {
+      ctx.fillStyle = fillStyle
+    },
+    measureText: (text) => {
+      const metrics = ctx.measureText(text)
+      return {
+        width: metrics.width / scale,
+        actualBoundingBoxLeft: metrics.actualBoundingBoxLeft / scale,
+        actualBoundingBoxRight: metrics.actualBoundingBoxRight / scale,
+        actualBoundingBoxAscent: metrics.actualBoundingBoxAscent / scale,
+        actualBoundingBoxDescent: metrics.actualBoundingBoxDescent / scale,
+      }
+    },
+    fillRect: (x, y, width, height) => {
+      return ctx.fillRect(x * scale, y * scale, width * scale, height * scale)
+    },
+    fillText: (text, x, y) => {
+      return ctx.fillText(text, x * scale, y * scale)
+    },
+  }
+}
 
-const getLabelText = prediction => {
-  const scoreText = prediction.score.toFixed(SCORE_DIGITS);
-  return prediction.class + ", score: " + scoreText;
-};
+const getLabelText = (prediction) => {
+  const scoreText = (prediction.score * 100).toFixed(1)
+  return `${prediction.label} ${scoreText}%`
+}
 
-const renderPredictions = (predictions, canvasRef) => {
-  const ctx = canvasRef.current.getContext("2d");
-  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+const renderPredictions = (predictions, videoRef, canvasRef) => {
+  const wantedWidth = videoRef.current.offsetWidth
+  const wantedHeight = videoRef.current.offsetHeight
+  const videoWidth = videoRef.current.videoWidth
+  const videoHeight = videoRef.current.videoHeight
+
+  const scaleX = wantedWidth / videoWidth
+  const scaleY = wantedHeight / videoHeight
+
+  const scale = Math.min(scaleX, scaleY)
+  const xOffset = (wantedWidth - videoWidth * scale) / 2
+  const yOffset = (wantedHeight - videoHeight * scale) / 2
+
+  const ctx = getRetinaContext(canvasRef.current)
+
+  ctx.setWidth(wantedWidth)
+  ctx.setHeight(wantedHeight)
+
+  ctx.clearAll()
   // Font options.
-  const font = "16px sans-serif";
-  ctx.font = font;
-  ctx.textBaseline = "top";
-  predictions.forEach(prediction => {
-    const x = prediction.bbox[0];
-    const y = prediction.bbox[1];
-    const width = prediction.bbox[2];
-    const height = prediction.bbox[3];
+  const font = `${16}px 'ibm-plex-sans', Helvetica Neue, Arial, sans-serif`
+  ctx.setFont(font)
+  ctx.setTextBaseLine('top')
+  const border = 4
+  const xPadding = 16
+  const yPadding = 8
+  const offset = 6
+  const textHeight = parseInt(font, 10) // base 10
+
+  predictions.forEach((prediction) => {
+    const x = prediction.bbox[0] * scale + xOffset
+    const y = prediction.bbox[1] * scale + yOffset
+    const width = prediction.bbox[2] * scale
+    const height = prediction.bbox[3] * scale
+    const predictionText = getLabelText(prediction)
     // Draw the bounding box.
-    ctx.strokeStyle = "#00FFFF";
-    ctx.lineWidth = 4;
-    ctx.strokeRect(x, y, width, height);
+    ctx.setStrokeStyle('#0062ff')
+    ctx.setLineWidth(border)
+
+    ctx.strokeRect(
+      Math.round(x),
+      Math.round(y),
+      Math.round(width),
+      Math.round(height)
+    )
     // Draw the label background.
-    ctx.fillStyle = "#00FFFF";
-    const textWidth = ctx.measureText(getLabelText(prediction)).width;
-    const textHeight = parseInt(font, 10); // base 10
-    ctx.fillRect(x, y, textWidth + 4, textHeight + 4);
-  });
-
-  predictions.forEach(prediction => {
-    const x = prediction.bbox[0];
-    const y = prediction.bbox[1];
+    ctx.setFillStyle('#0062ff')
+    const textWidth = ctx.measureText(predictionText).width
+    ctx.fillRect(
+      Math.round(x - border / 2),
+      Math.round(y - (textHeight + yPadding) - offset),
+      Math.round(textWidth + xPadding),
+      Math.round(textHeight + yPadding)
+    )
+  })
+
+  predictions.forEach((prediction) => {
+    const x = prediction.bbox[0] * scale + xOffset
+    const y = prediction.bbox[1] * scale + yOffset
+    const predictionText = getLabelText(prediction)
     // Draw the text last to ensure it's on top.
-    ctx.fillStyle = "#000000";
-    ctx.fillText(getLabelText(prediction), x, y);
-  });
-};
+    ctx.setFillStyle('#ffffff')
+    ctx.fillText(
+      predictionText,
+      Math.round(x - border / 2 + xPadding / 2),
+      Math.round(y - (textHeight + yPadding) - offset + yPadding / 2)
+    )
+  })
+}
 
 const detectFrame = async (model, videoRef, canvasRef) => {
-  const predictions = await model.detect(videoRef.current);
-  renderPredictions(predictions, canvasRef);
+  const predictions = await model.detect(videoRef.current)
+  renderPredictions(predictions, videoRef, canvasRef)
   requestAnimationFrame(() => {
-    detectFrame(model, videoRef, canvasRef);
-  });
-};
+    detectFrame(model, videoRef, canvasRef)
+  })
+}
 
 const useBoxRenderer = (model, videoRef, canvasRef, shouldRender) => {
+  if (canvasRef.current) {
+    canvasRef.current.style.position = 'fixed'
+    canvasRef.current.style.left = '0'
+    canvasRef.current.style.top = '0'
+  }
+
   useEffect(() => {
     if (model && shouldRender) {
-      detectFrame(model, videoRef, canvasRef);
+      detectFrame(model, videoRef, canvasRef)
     }
-  }, [canvasRef, model, shouldRender, videoRef]);
-};
+  }, [canvasRef, model, shouldRender, videoRef])
+}
 
-export default useBoxRenderer;
+export default useBoxRenderer