ml5.js | ブラウザからすぐに利用できる 機械学習JSライブラリ

簡単に機械学習を始められるjsライブラリ”ml5.js”の紹介です。

楽に始められる機械学習はないかなーと探していたのですが、ありました。

ml5.jsはTensorFlow.jsの上に構築された、機械学習アルゴリズムとモデルを利用できるライブラリです。ライブラリを読み込むだけで機械学習環境を構築することなく、ブラウザからすぐに利用できます。

さぁはじめよう!

https://ml5js.org/docs/getting-started

始め方はめちゃくちゃ簡単。
本家にもあるようにライブラリを読み込むだけです。

<!DOCTYPE html>
  <html>
    <head>
      <title>Getting Started with ml5.js</title>
      <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
    </head>

    <body>
      <script>

        // Your code will go here

      </script>
    </body>
  </html>

デモを動かしてみる

一番単純な画像分類をやってみます。
DEMOコードの画像を差し替えてるだけです。
手元にあった画像「少女と象」の画像を使います。

<!DOCTYPE html>
<html>
  <head>
    <head>
      <title>Getting Started with ml5.js</title>
      <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
    </head>

  <body>
    <h1>Image classification using MobileNet</h1>
    <p>The MobileNet model labeled this as
    <span id="result">...</span> with a confidence of
    <span id="probability">...</span></p>
    <img src="/img/pcbeye.jpg"
     crossorigin="anonymous" id="image" width="400">

    <script>
      // The image we want to classify
      const image = document.getElementById('image');
      // The result tag in the HTML
      const result = document.getElementById('result');
      // The probability tag in the HTML
      const probability = document.getElementById('probability');

      // Initialize the Image Classifier method with MobileNet
      const classifier = ml5.imageClassifier('MobileNet', function() {
        console.log('Model Loaded!');
      });

      // Make a prediction with the selected image
      // This will return an array with a default of 10 options with their probabilities
      classifier.predict(image, function(err, results) {
        result.innerText = results[0].className;
        probability.innerText = results[0].probability.toFixed(4);
      });

    </script>
  </body>
</html>

画像分類の結果


インド象と分類されたようです。
少女は?って感じですがデモなのでまぁ良しとします。

ほかにもいろいろ試してみましたが、まぁまぁの精度でした。


  • この画像はrace car
    正確にはレースかではないですが、スポーティーな感じの車なので

  • 松明を持った男
    この画像はtorch(松明)ですね

感想

学習もさせれるみたいのなので、自分で学習させたモデルで遊んでみるのもいいかも。
最近、”機械学習”へのハードルがどんどん下がっていて
エンジニアじゃなくても行けちゃう感じがホントやばいです。

githubにもいろいろ挙がっています
https://github.com/ml5js/ml5-library

2018/10/30:リンク切れ、ml5側の仕様変更等をリライト