Image classification using MobileNet and p5.js


      <!DOCTYPE html>
      <html lang="ja">
      
      <head>
        <meta charset="UTF-8">
        <title>Image classification using MobileNet and p5.js</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
        <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
        <style>
         html{background-color: white;}
         body{ width: 800px; margin: 0 auto; background-color: antiquewhite; padding: 1em;}
        </style>
      </head>
      
      <body>
        <h1>Image classification using MobileNet and p5.js</h1>
        <p>MobileNet:Efficient convolutional neural networks for mobile vision applications</p>
        <p>p5.min.js(654kB), ml5.min.js(654kB), model.json(113kB)</p>
        <p>オリジナル：<a href="https://learn.ml5js.org/#/tutorials/hello-ml5">https://learn.ml5js.org/#/tutorials/hello-ml5</a></p>
        <script src="sketch.js"></script>
      </body>
    
      </html>
    
      // 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() {
      // ml5のイメージ分類器をMobileNetのmodel.jsonをロードして構築
      // 約1,500万枚の画像のデータベース（ImageNet）でトレーニングされている。2.2x10^4 indexies?
      classifier = ml5.imageClassifier('MobileNet'); // 他に'Darknet', 'Darknet-tiny', 'TeachableMachine'
      // イメージをロード:この画像を分類してlabelを表示
      img = loadImage('images/bird.png');
    }
    
    function setup() {
      const W = 500;
      createCanvas(W, W);
      classifier.classify(img, gotResult); // imgを分類したら、gotResultを呼び出す
      image(img, 0, 0, W, W); // イメージ表示
    }
    
    // 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(results);
        // ` ${ }` : JavaScript テンプレートリテラル：文字列内に変数や式を挿入
        // nf(num, left, right) left: 小数点の以上の桁, right: 小数点以下
        //イメージ分類結果を表示
        results.forEach( function(result){
            if( result ){
                createDiv(`Confidence: ${nf(result.confidence, 0, 2)}, Label: ${result.label}`);
            }
        });
    
      }
    }
MobileNet: Efficient convolutional neural networks for mobile vision applications
Image classification using ml5,js, MobileNet and p5.js
