Image Recognition Example

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

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/[email protected]"></script>
<label>
  Pick an image for classification
  <input type="file" accept="image/x-png,image/gif,image/jpeg">
</label><br>
<img style="max-width: 400px">
<pre></pre>

JavaScript

const input = document.querySelector('input')
const img = document.querySelector('img')
const pre = document.querySelector('pre')
const mobilenetPromise = mobilenet.load()
pre.textContent = 'loading mobilenet…'
mobilenetPromise.then(() => pre.textContent = 'ready!')

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

  if (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
          	pre.textContent = `Predictions:\n${JSON.stringify(predictions, false, 2)}\n${elapsed}ms`
          });
        });
      }
    }
  }
})