https://www.tensorflow.org/js/?hl=ja
TensorFlow.jsとは、Googleが公開した JavaScript ライブラリで、ブラウザ上で機械学習のモデルの構築、学習、学習済みモデルの実行などを可能にします。
一般に機械学習(ML)による推論はサバーサイドで行いますが、これはクライアントサイドで実現します。処理スピードに関しては、ローカルデバイスのGPUにWebGLを介してアクセスすることで、高速な処理が実現されています。
学習済みモデルをダウンロードする必要があるため、その容量には制約がありますが、後述する MobileNet などコンパクトかつ面白いモデルが存在します。
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-シャツ」や「ネクタイ」が検知されます。)。
TensorFlow.jsを使用したMLタスクを実装したコード例
https://github.com/tensorflow/tfjs-examples
ニューラルネットワークの動きを直感的に可視化する遊び場です。
https://playground.tensorflow.org/