P5 ML5 test image myMuseum

by Magnus Sälgö

HTML

<html>

<head>
  <meta charset="UTF-8">
  <title>Sälgö myMuseum Image classification using MobileNet and p5.js</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
</head>

<body>
  <h1>myMuseum 3.0 Image classification using <br />MobileNet and p5.js</h1>
  <ll>
  <li><a href="https://p5js.org/" target=_blank>P5.js</li><li><a href="https://ml5js.org/" target=_blank>ml5.js</li>  <li><a href="http://mymuseumapp.blogspot.com/" target=_blank>myMuseum</a> Linked Data visionaries 10 years ahead ;-)</li>
  </ll>
 <br /><br />
</body>

</html>

JavaScript

// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
let classifier;

// A variable to hold the image we want to classify
let img;

function preload() {
  classifier = ml5.imageClassifier('MobileNet');
  img = loadImage('https://3.bp.blogspot.com/-twonMVdPEnM/WAfMTuECD8I/AAAAAAAAiwo/x85S4tKN7Z0CgUB-JdiudtZyYIVMqylAACLcB/s1600/30350870926_6853d3ca3c_k.jpg');
  
}

   function draw() {
   image(img, mouseX, mouseY, img.width / 3, img.height / 3);

}

function setup() {
  createCanvas(500, 400);
  classifier.classify(img, gotResult);
  img.loadPixels();
}

// A function to run when we get any errors and the results
function gotResult(error, results) {
  // Display error in the console
  if (error) {
    console.error(error);
  } else {
    // The results are in an array ordered by confidence.
     console.log("Magnus wizzard");
     len = results.length;
     console.log(len)
     for (i = 0; i < len;i++) {
      console.log(i)
     	createDiv('Label: ' + results[i].label);
    	createDiv('Confidence: ' + nf(results[i].confidence, 0, 2));
  }}
}