TensorFlow.js

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

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

↑

はじめに
- 概要
- 導入方法
サンプルプログラム
デモプログラム
APPENDIX

↑

はじめに

↑

概要

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

既存のモデルを実行する
- 画像の分類
- オブジェクトの検出
- 人体の部位を分割
- 姿勢推定
- コメントが会話に与える影響（有害＜＞無害）のスコアリング
既存のモデルを再トレーニングする
- 画像分類器を元にした転移学習
- 音声認識を元にした転移学習
JavaScript を使用して ML モデルを開発する

↑

導入方法

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

scriptタグを使用する
NPMからインストールして、ビルドツールを使用する

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

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/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.3.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>

↑