EEmgQe

eemgqe.markdown

EEmgQe

A Pen by Chris La Torres on CodePen.

License.

index.html

<p>
  This demo uses <a href="https://github.com/DeepScale/SqueezeNet"> Squeezenet 1.1 Model</a>
  and is not trained to recognize human faces. For best performance, upload images of objects
  like piano, coffee mugs, bottles, etc.
</p>
<script src='https://unpkg.com/deeplearn-squeezenet'></script>
<div id='target' ondrop='dropit(event);' ondragover='dragoverit(event);'>
  Drag another image onto this image to predict (make sure browser window is focused).
  <br><br>
  If you have cross origin problems, download the image to your computer
  first, then drag it here.
  <div id='img'><img id='cat' src='https://storage.googleapis.com/learnjs-data/images/cat.jpeg' crossorigin></div>
</div>

script.js

const dragAndDropTarget = document.getElementById('target');
const imgContainer = document.getElementById('img');
const catImage = document.getElementById('cat');

const math = new dl.NDArrayMathGPU();
// squeezenet is loaded from https://unpkg.com/deeplearn-squeezenet
const squeezeNet = new squeezenet.SqueezeNet(math);
await squeezeNet.load();

async function infer(imageEl) {
  console.clear();
  imageEl.width = 227; imageEl.height = 227;
  imageEl.style.width = '227px'; imageEl.style.height = '227px';
  const image = dl.Array3D.fromPixels(imageEl);
  const logits = squeezeNet.predict(image);

  const topClassesToProbs = await squeezeNet.getTopKClasses(logits, 10);

  for (const className in topClassesToProbs) {
    console.log(
        `${topClassesToProbs[className].toFixed(5)}: ${className}`);
  }
}
infer(catImage);

// Drag and drop handlers.
window.dragoverit = (e) => {
  e.preventDefault(); e.stopPropagation();
  e.dataTransfer.dropEffect = "copy";
}
window.dropit = (e) => {
  e.preventDefault(); e.stopPropagation();
  imgContainer.innerHTML = e.dataTransfer.getData('text/html');
  let imageEl = imgContainer.getElementsByTagName('img')[0];
  if (imageEl == null) {
    imageEl = document.createElement('img');
    imageEl.src = window.URL.createObjectURL(e.dataTransfer.files[0]);
    imgContainer.appendChild(imageEl);  }
  imageEl.onload = () => infer(imageEl);
}