Object Recognition & Image Classification

Adapted from sample code found here: https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd

by Tonio Loewald

HTML

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>
<label>
  Pick an image for classification
  <input type="file" accept="image/x-png,image/gif,image/jpeg" disabled>
</label><br>
<div class="photo">
  <img style="max-width: 400px">
  <canvas></canvas>
</div>
<pre></pre>

CSS

body {
  font: 14px Sans-serif;
}

.photo {
  position: relative
}

.photo canvas {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

const input = document.querySelector('input')
const img = document.querySelector('img')
const canvas = document.querySelector('canvas')
const pre = document.querySelector('pre')
const cocoPromise = cocoSsd.load({
  base: 'mobilenet_v2'
})
const mobilenetPromise = mobilenet.load()
pre.textContent = 'loading models (takes a few seconds)…'
Promise.all([cocoPromise, mobilenet.Promise]).then(() => {
  pre.textContent = 'ready!'
  input.disabled = false
})

input.addEventListener('change', async (evt) => {
  const file = evt.target.files[0]

  if (file.type && file.type.match('image.*')) {
    var reader = new FileReader();
    // Read in the image file as a data URL.
    reader.readAsDataURL(file);
    reader.onload = function(evt) {
      if (evt.target.readyState == FileReader.DONE) {
        img.src = evt.target.result;
        mobilenetPromise.then(model => {
          // Classify the image.
          const start = Date.now()
          model.classify(img).then(predictions => {
            const elapsed = Date.now() - start
            const json = JSON.stringify(predictions, false, 2)
            pre.textContent = `Predictions:\n${json}\n${elapsed}ms`
          });
        });
        cocoPromise.then(model => {
          const start = Date.now()
          model.detect(img).then(predictions => {
            const elapsed = Date.now() - start
            canvas.width = img.offsetWidth
            canvas.height = img.offsetHeight
            g = canvas.getContext('2d')

            if (predictions.length) {
              g.fillStyle = 'rgba(0,0,0,0.5)'
              g.font = '18px Sans-serif'
              g.fillRect(0, 0, img.offsetWidth, img.offsetHeight)
              g.fillStyle = 'yellow'

              predictions.forEach(p => {
                const [x, y, w, h] = p.bbox
                g.clearRect(x, y, w, h)
                g.fillText(p.class, x + 5, y + h - 5)
              })
            }
            g.fillStyle = 'yellow'
            g.fillText(elapsed...