gentamura.com

TensorFlow.jsを試す

January 04, 2019

今回は「TensorFlow.js」というライブラリを触ってみました。

TensorFlowは皆さんご存知、Googleが2015年にオープンソース化した機械学習ライブラリです。そのTensorFlowがフロントエンドでもサーバサイドでも利用できちゃうというJavaScripter垂涎のライブラリですね。

ところでTensorFlowってなんて読むの? テンサーフロー?テンソルフロー?

tensorflow

via: http://yomikata.org/word/tensorflow

競ってるがな。


今回試したのは、ブラウザ上でtensorflow.jsと学習済みモデルのmobilenetを利用して、猫と犬の種類を画像から認識するという処理です。

結果がこちら cats and dogs

それぞれのリストが「判定した内容: 確率」を示していて、確率が1に近ければ近いほど、正しいであろうということを示しています。 TensorFlowとしては、

  • ゴールデンレトリバーが95.1%で自信満々
  • ビーグルの67.9%や1枚目のトラネコは63.2%、2枚目のトラネコは66.7%とまあまあ自信ある
  • 3枚目のトラネコ39.3%、アイリッシュ・ウォーター・スパニエルは42.6%と自信なさげ という感じでした。

個体としての領域が画像上に多く存在してて、他の不要な情報が少ない方が精度が良いようです。(考察が小並感ですね)

ソースコードはこちら

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tensorflow js sample</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.7"> </script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@0.1.1"> </script>
  <style>
    .container {
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: repeat(3, 1fr);
    }
    .container img {
      width: 200px;
    }
    .container ul {
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>
      <img id="cat1" src="./cat1.jpg" alt="">
      <ul id="result1"></ul>
    </div>
    <div>
      <img id="cat2" src="./cat2.jpg" alt="">
      <ul id="result2"></ul>
    </div>
    <div>
      <img id="cat3" src="./cat3.jpg" alt="">
      <ul id="result3"></ul>
    </div>
    <div>
      <img id="dog1" src="./dog1.jpg" alt="">
      <ul id="result4"></ul>
    </div>
    <div>
      <img id="dog2" src="./dog2.jpg" alt="">
      <ul id="result5"></ul>
    </div>
    <div>
      <img id="dog3" src="./dog3.jpg" alt="">
      <ul id="result6"></ul>
    </div>
  </div>

  <script>
    const cat1 = document.getElementById('cat1');
    const result1 = document.getElementById('result1');

    const cat2 = document.getElementById('cat2');
    const result2 = document.getElementById('result2');

    const cat3 = document.getElementById('cat3');
    const result3 = document.getElementById('result3');

    const dog1 = document.getElementById('dog1');
    const result4 = document.getElementById('result4');

    const dog2 = document.getElementById('dog2');
    const result5 = document.getElementById('result5');

    const dog3 = document.getElementById('dog3');
    const result6 = document.getElementById('result6');

    mobilenet.load().then(model => {
      predictions(model, cat1, result1);
      predictions(model, cat2, result2);
      predictions(model, cat3, result3);
      predictions(model, dog1, result4);
      predictions(model, dog2, result5);
      predictions(model, dog3, result6);
    });

    function predictions(model, target, result) {
      model.classify(target).then(predictions => {
        predictions.forEach(({ className, probability }) => {
          const li = document.createElement('li');
          li.innerText = `${className}: ${probability.toFixed(3)}`;
          result.appendChild(li);
        });
      });
    }
  </script>

</body>
</html>

コードそのままですが、mobilenetをロードして、modelを受け取り、そのmodelを利用して、対象の分類を行い、予測された結果を返すという流れです。

一応ここにホストしました。 https://fervent-varahamihira-a5456a.netlify.com/

結構早く結果が返ってきて驚き。


使うだけならめっちゃ簡単。しかし実際利用するとなると、この機能を利用して何ができるのかというのがポイントになってくるなと思ったり。

ちなみにGoogleがTensorFlowを利用して、お題にそってカメラに映す、借り物競争のようなゲームを実装しています。

TensorFlowは、学習済みモデルを利用するだけでなく、モデルの構築や学習もできるとのことなので、引き続き試してみようと思います。