LogoMark.png

TensorFlow.js の変更点


#author("2020-07-08T14:37:59+09:00;2019-08-19T18:54:17+09:00","default:inoue.ko","inoue.ko")
#author("2023-12-11T13:12:18+09:00;2019-08-19T18:54:17+09:00","default:inoue.ko","inoue.ko")
*TensorFlow.js
https://www.tensorflow.org/js/?hl=ja
~

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

~
***CONTENTS
#contents2_1

~


**はじめに
***概要
TensorFlow.jsでは、以下のようなことが可能です。
-[[既存のモデルを実行する>https://www.tensorflow.org/js/models/?hl=ja]]
--画像の分類
--オブジェクトの検出
--人体の部位を分割
--姿勢推定
--コメントが会話に与える影響(有害<>無害)のスコアリング
-既存のモデルを再トレーニングする
--画像分類器を元にした転移学習
--音声認識を元にした転移学習
-JavaScript を使用して ML モデルを開発する
~

***導入方法
ブラウザベースのプロジェクトで TensorFlow.js を利用するには2つの方法があります。
-scriptタグを使用する
-NPMからインストールして、ビルドツールを使用する

ここでは、簡単に試せる scriptタグの利用を前提とします。以下のコードをメインのHTMLの<head>部分に記載するだけです。
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>

~
~

**サンプルプログラム

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

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

-CODE:https://github.com/koichi-inoue/TensorFlowJS_MobileNet
-DEMO:https://koichi-inoue.github.io/TensorFlowJS_MobileNet/

-WebGL経由でGPUを利用するので、古い環境では動かない場合があります。
-認識できる物体のラベル一覧は以下の検索でヒットします。
[[Google:imagenet 1000 classes list]]

~
~

**APPENDIX

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

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


***関連ページ
//-[[BrainScience]]
-[[DataScience]]
//-[[Data]]
//-[[Statistics]]
-[[MachineLearning]]
-[[NeuralNetwork]]
//-[[DataMining]]
-[[ArtificialIntelligence]]
//-[[ArtificialIntelligence/Links]]

~
~