LogoMark.png

TensorFlow.js のバックアップ(No.1)


TensorFlow.js

https://www.tensorflow.org/js/?hl=ja

TensorFlow.jsとは、Googleが公開した JavaScript ライブラリで、ブラウザ上で機械学習のモデルの構築、学習、学習済みモデルの実行などを可能にします。
 一般に機械学習(ML)による推論はサバーサイドで行いますが、これはクライアントサイドで実現します。処理スピードに関しては、ローカルデバイスのGPUにWebGLを介してアクセスすることで、高速な処理が実現されています。
 学習済みモデルをダウンロードする必要があるため、その容量には制約がありますが、後述する MobileNet などコンパクトかつ面白いモデルが存在します。


CONTENTS


はじめに

概要

TensorFlow.jsでは、以下のようなことが可能です。

導入方法

ブラウザベースのプロジェクトで TensorFlow.js を利用するには2つの方法があります。

ここでは、簡単に試せる scriptタグの利用を前提とします。以下のコードをメインのHTMLの<head>部分に記載するだけです。

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>




サンプルプログラム

以下、MobileNetの学習済みモデルを利用して、画像の対象物を推論するサンプルです。CDNを使用するため、以下のHTMLファイルと適当な画像ファイル(以下の例では、sample.jpg に相当)を一つ用意してお試し下さい。
 尚、結果はコンソールに表示されるので、ブラウザの開発ツールでコンソールを表示しておくことが必要です。
サーバーにアップしてお試し下さい。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>
    <title>MobileNet|TensorFlowJS</title>
  </head>

  <body style="text-align:center">

    <h1>MobileNet|TensorFlowJS</h1>
    <img id="image" src="sample.jpg"></img>

    <script>
      const img = document.getElementById('image');
      // Loading the model.
      mobilenet.load().then(model => {
        // Classify the image.
        model.classify(img).then(predictions => {
            console.log(predictions);
        });
      });
    </script>

  </body>

</html>




デモプログラム

手元の画像のドラッグ&ドロップで、対象を推論するサンプルです。上位4件の候補を、その確率とともに表示します(人や人物の顔は対象外なので、人物の画像を投入すると「T-シャツ」や「ネクタイ」が検知されます。)。




APPENDIX

TensorFlow.js Examples

TensorFlow.jsを使用したMLタスクを実装したコード例
https://github.com/tensorflow/tfjs-examples

A Neural Network Playground

ニューラルネットワークの動きを直感的に可視化する遊び場です。
https://playground.tensorflow.org/

関連ページ