diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c3481a7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index c65d3fe..ffe4bc7 100755
--- a/package.json
+++ b/package.json
@@ -1,11 +1,13 @@
 {
-  "name": "tensorflowjs-object-detection",
+  "name": "object-detection-react",
   "version": "1.0.0",
-  "description": "",
+  "description": "Real-time custom object detection with TensorFlow.js",
   "keywords": [],
+  "repository":"https://github.com/cloud-annotations/object-detection-react",
+  "license":"MIT",
   "main": "src/index.js",
   "dependencies": {
-    "@cloud-annotations/models": "^0.1.0",
+    "@cloud-annotations/models": "^0.1.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"
diff --git a/public/index.html b/public/index.html
index 402dd6a..9b1814f 100755
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Object Detection</title>
   </head>
 
   <body>
diff --git a/src/styles.module.css b/src/index.css
old mode 100755
new mode 100644
similarity index 53%
rename from src/styles.module.css
rename to src/index.css
index c37f335..5a5fdaa
--- a/src/styles.module.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
-.fixed {
+.fillPage {
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
 }
diff --git a/src/index.js b/src/index.js
index ac06ae1..d881503 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,40 +1,55 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 
-import useWebcam from './useWebcam'
 import useModel from './useModel'
-import useBoxRenderer from './useBoxRenderer'
+import ObjectDetectionVideo from './object-detection-video/ObjectDetectionVideo'
 
-import styles from './styles.module.css'
+import './index.css'
 
-const MODEL_PATH = process.env.PUBLIC_URL + '/model_web'
+const handlePrediction = (predictions) => {
+  console.timeEnd('detect')
+  console.time('detect')
+  console.log(predictions)
+}
 
-const App = () => {
-  const videoRef = useRef()
-  const canvasRef = useRef()
+const render = (ctx, predictions) => {
+  predictions.forEach((prediction) => {
+    const x = prediction.bbox[0]
+    const y = prediction.bbox[1]
+    const width = prediction.bbox[2]
+    const height = prediction.bbox[3]
+
+    ctx.setStrokeStyle('#0062ff')
+    ctx.setLineWidth(4)
+    ctx.strokeRect(
+      Math.round(x),
+      Math.round(y),
+      Math.round(width),
+      Math.round(height)
+    )
+  })
+}
 
-  const cameraLoaded = useWebcam(videoRef)
-  const model = useModel(MODEL_PATH)
-  useBoxRenderer(model, videoRef, canvasRef, cameraLoaded)
+const App = () => {
+  const model = useModel(process.env.PUBLIC_URL + '/model_web')
 
   return (
-    <>
-      <video
-        className={styles.fixed}
-        autoPlay
-        playsInline
-        muted
-        ref={videoRef}
-        width="600"
-        height="500"
-      />
-      <canvas
-        className={styles.fixed}
-        ref={canvasRef}
-        width="600"
-        height="500"
+    <div className="fillPage">
+      <ObjectDetectionVideo
+        model={model}
+        // onPrediction={handlePrediction}
+        // render={render}
+        // aspectFill: The option to scale the video to fill the size of the view.
+        //             Some portion of the video may be clipped to fill the view's
+        //             bounds.
+        // aspectFit:  The option to scale the video to fit the size of the view
+        //             by maintaining the aspect ratio. Any remaining area of the
+        //             view's bounds is transparent.
+        fit="aspectFill"
+        // mirrored:   mirror the video about its vertical axis.
+        mirrored
       />
-    </>
+    </div>
   )
 }
 
diff --git a/src/object-detection-video/ObjectDetectionVideo.js b/src/object-detection-video/ObjectDetectionVideo.js
new file mode 100644
index 0000000..4f4f7c2
--- /dev/null
+++ b/src/object-detection-video/ObjectDetectionVideo.js
@@ -0,0 +1,98 @@
+import React, { useRef, useCallback } from 'react'
+
+import useWebcam from './useWebcam'
+import { getRetinaContext } from './retina-canvas'
+import { renderPredictions } from './render-predictions'
+
+const ObjectDetectionVideo = React.memo(
+  ({ model, onPrediction, fit, mirrored, render }) => {
+    const videoRef = useRef()
+    const canvasRef = useRef()
+
+    useWebcam(videoRef, () => {
+      detectFrame()
+    })
+
+    const detectFrame = useCallback(async () => {
+      const predictions = await model.detect(videoRef.current)
+      if (onPrediction) {
+        onPrediction(predictions)
+      }
+
+      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
+
+      let scale
+      if (fit === 'aspectFit') {
+        scale = Math.min(scaleX, scaleY)
+      } else {
+        scale = Math.max(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()
+
+      // Update predictions to match canvas.
+      const offsetPredictions = predictions.map((prediction) => {
+        let 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
+
+        if (mirrored) {
+          x = wantedWidth - x - width
+        }
+        return { ...prediction, bbox: [x, y, width, height] }
+      })
+
+      const renderFunction = render || renderPredictions
+
+      renderFunction(ctx, offsetPredictions)
+      requestAnimationFrame(() => {
+        detectFrame()
+      })
+    }, [fit, mirrored, model, onPrediction, render])
+
+    if (canvasRef.current) {
+      canvasRef.current.style.position = 'absolute'
+      canvasRef.current.style.left = '0'
+      canvasRef.current.style.top = '0'
+    }
+
+    if (videoRef.current) {
+      videoRef.current.style.width = '100%'
+      videoRef.current.style.height = '100%'
+      if (fit === 'aspectFit') {
+        videoRef.current.style.objectFit = 'contain'
+      } else {
+        videoRef.current.style.objectFit = 'cover'
+      }
+
+      if (mirrored) {
+        videoRef.current.style.transform = 'scaleX(-1)'
+      } else {
+        videoRef.current.style.transform = 'scaleX(1)'
+      }
+    }
+
+    return (
+      <div style={{ position: 'relative' }}>
+        <video autoPlay playsInline muted ref={videoRef} />
+        <canvas ref={canvasRef} />
+      </div>
+    )
+  }
+)
+
+export default ObjectDetectionVideo
diff --git a/src/object-detection-video/render-predictions.js b/src/object-detection-video/render-predictions.js
new file mode 100644
index 0000000..2822f4a
--- /dev/null
+++ b/src/object-detection-video/render-predictions.js
@@ -0,0 +1,59 @@
+const getLabelText = (prediction) => {
+  const scoreText = (prediction.score * 100).toFixed(1)
+  return `${prediction.label} ${scoreText}%`
+}
+
+export const renderPredictions = (ctx, predictions) => {
+  // Font options.
+  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]
+    const y = prediction.bbox[1]
+    const width = prediction.bbox[2]
+    const height = prediction.bbox[3]
+
+    const predictionText = getLabelText(prediction)
+
+    // Draw the bounding box.
+    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.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]
+    const y = prediction.bbox[1]
+
+    const predictionText = getLabelText(prediction)
+    // Draw the text last to ensure it's on top.
+    ctx.setFillStyle('#ffffff')
+    ctx.fillText(
+      predictionText,
+      Math.round(x - border / 2 + xPadding / 2),
+      Math.round(y - (textHeight + yPadding) - offset + yPadding / 2)
+    )
+  })
+}
diff --git a/src/object-detection-video/retina-canvas.js b/src/object-detection-video/retina-canvas.js
new file mode 100644
index 0000000..a3c62c4
--- /dev/null
+++ b/src/object-detection-video/retina-canvas.js
@@ -0,0 +1,62 @@
+export 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)
+    },
+  }
+}
diff --git a/src/useWebcam.js b/src/object-detection-video/useWebcam.js
similarity index 53%
rename from src/useWebcam.js
rename to src/object-detection-video/useWebcam.js
index 0fd6511..f740e8b 100644
--- a/src/useWebcam.js
+++ b/src/object-detection-video/useWebcam.js
@@ -1,26 +1,25 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
-const useWebcam = videoRef => {
-  const [webcamLoaded, setWebcamLoaded] = useState(false)
+const useWebcam = (videoRef, onLoaded) => {
   useEffect(() => {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       navigator.mediaDevices
         .getUserMedia({
           audio: false,
           video: {
-            facingMode: 'user'
-          }
+            facingMode: 'user',
+            width: { ideal: 4096 },
+            height: { ideal: 2160 },
+          },
         })
-        .then(stream => {
-          // window.stream = stream
+        .then((stream) => {
           videoRef.current.srcObject = stream
           videoRef.current.onloadedmetadata = () => {
-            setWebcamLoaded(true)
+            onLoaded()
           }
         })
     }
-  }, [videoRef])
-  return webcamLoaded
+  }, [onLoaded, videoRef])
 }
 
 export default useWebcam
diff --git a/src/useBoxRenderer.js b/src/useBoxRenderer.js
deleted file mode 100644
index 5fa1dbc..0000000
--- a/src/useBoxRenderer.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect } from "react";
-
-const SCORE_DIGITS = 4;
-
-const getLabelText = prediction => {
-  const scoreText = prediction.score.toFixed(SCORE_DIGITS);
-  return prediction.class + ", score: " + scoreText;
-};
-
-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";
-  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];
-    // Draw the bounding box.
-    ctx.strokeStyle = "#00FFFF";
-    ctx.lineWidth = 4;
-    ctx.strokeRect(x, y, width, 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];
-    // Draw the text last to ensure it's on top.
-    ctx.fillStyle = "#000000";
-    ctx.fillText(getLabelText(prediction), x, y);
-  });
-};
-
-const detectFrame = async (model, videoRef, canvasRef) => {
-  const predictions = await model.detect(videoRef.current);
-  renderPredictions(predictions, canvasRef);
-  requestAnimationFrame(() => {
-    detectFrame(model, videoRef, canvasRef);
-  });
-};
-
-const useBoxRenderer = (model, videoRef, canvasRef, shouldRender) => {
-  useEffect(() => {
-    if (model && shouldRender) {
-      detectFrame(model, videoRef, canvasRef);
-    }
-  }, [canvasRef, model, shouldRender, videoRef]);
-};
-
-export default useBoxRenderer;
diff --git a/src/useModel.js b/src/useModel.js
index 63f1fc5..38578c3 100644
--- a/src/useModel.js
+++ b/src/useModel.js
@@ -1,15 +1,15 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
-import models from "@cloud-annotations/models";
+import models from '@cloud-annotations/models'
 
-const useModel = modelPath => {
-  const [model, setModel] = useState();
+const useModel = (modelPath) => {
+  const [model, setModel] = useState()
   useEffect(() => {
-    models.load(modelPath).then(model => {
-      setModel(model);
-    });
-  }, [modelPath]);
-  return model;
-};
+    models.load(modelPath).then((model) => {
+      setModel(model)
+    })
+  }, [modelPath])
+  return model
+}
 
-export default useModel;
+export default useModel
