手描き数字認識をTensorFlow.jsによりブラウザで実行してみよう

0. はじめに

本書の機械学習用プログラムは、Pythonというプログラミング言語に機械学習用のライブラリを組み合わせて実現しています。ディープラーニングにはkerasとtheano、それ以外はscikit-learnを用いたのでした。

また、ディープラーニングの計算を担う部分であるtheanoは、ライブラリkerasのバックエンドと呼ばれるのでした。

書籍に記したように、このバックエンドは変更可能です。2018年8月に投稿した下記のページでは、theanoをGoogleの開発したTensorFlowに置き換えて本書の演習プログラムを実行する方法を解説しました。

• 本書のディープラーニングの演習をkeras + TensorFlowで実行する方法

上記のページに従うと、TensorFlowをプログラミング言語Pythonで利用することになります。

一方、TensorFlowをJavaScriptというプログラミング言語から利用可能になるTensorFlow.jsが2018年4月に公開されました。このTensorFlow.jsを用いると、皆さんが普段お使いのブラウザでディープラーニングを実行できるようになります。

本ページではその簡単な例を試してみましょう。

1. 実行してみよう

それでは、下記のリンクをクリックし、TensorFlow.jsによるプログラムを体験してみましょう。

• TensorFlow.js + CNNによる数字認識 (別ウインドウでプログラムが実行されます)

現れたウインドウには、下図のように3つの枠と2つのボタンがあり、マウスやタッチにより描いた0～9の数字を認識できるようになっています。「認識」ボタンをクリックまたはタッチすることで結果が表示されます。

本書をお読み頂いた方なら気づくかもしれませんが、これは演習プログラム ml-10-06-digits-cnn-gui-mod.py を JavaScript + TensorFlow.js に移植したものになっています。このプラグラムがどのような仕組みで動いているかの解説は、本書の6章と10章をお読みください。

ブラウザで動作するプログラムですので、下図のようにタブレット上のタッチでも数字を描くことができます。

ただし、プログラムページにも表示されているように、動作するブラウザはChrome、Firefox、Microsoft Edge、Safariの最新版です。これらのブラウザの古いバージョンでは動作しない可能性がありますし、Internet Explorerでは動作しませんのでご注意ください。

2. 何に使えるの？

さて、Raspberry Pi上のPythonプログラムとほぼ同じプログラムをブラウザで動作させることができることが体験頂けたと思います。

この仕組みは、学習結果をデモンストレーションする用途で利用するのが効果的です。

本書で体験できるように、機械学習の学習のプロセスは、Raspberry Piに代表されるようなLinux系OS上で実行するのが一般的です。試行錯誤を繰り返し、良い学習結果が得られることを目指します。

良い学習結果が得られたら、やはりLinux系OS上で結果を確認することができます。 それが本書の演習プログラム ml-10-06-digits-cnn-gui-mod.py なのでした。

一方、その学習結果をブラウザ上で実行できたら、より多くの人にその成果を体験してもらえるでしょう。最新のブラウザがあれば、ツールを追加インストールする必要もなく、結果を追体験できるのですから。

以上のように、学習結果のデモンストレーションとして用いるのが TenforFlow.js の典型的な使用例と言えるのではないでしょうか。

あるいは、学習結果を利用したインターネット上のサービスを作ることもできるでしょう。

さて、この例を体験すると、学習結果の確認はPythonではなくJavaScriptによりブラウザで出来た方が良い、と思う方もいるかもしれません。

しかし、PythonとJavaScriptというのは全く異なる言語ですから、PythonプログラムをJavaScriptプログラムに移植することは、実際にはかなりの労力が必要となります。

ですので、本ページの内容は「皆さんに体験して頂く」ことを主眼とし、皆さんがJavaScriptプログラムを書けるようになることを目指すわけではありません。ご了承ください。

3. 少しだけ技術的なコメント

少しだけ技術的なコメントを記しますが、本ページのプログラムを体験するために以下の内容を理解する必要はありませんので、飛ばして頂いても全く問題ありません。

JavaScriptプログラム自体は、プログラムのページでソースを閲覧すると確認することができます。基本的な流れは、

1. 学習済のデータを読みこみ、ネットワークモデルを構築する
2. モデルに手書き数字に基づいた入力を与え、結果を確認する

となっています。

学習済のデータは、本書では ml-digits-cnn.h5 という拡張子h5のファイルでした。これを、「Importing a Keras model into TensorFlow.js」に従い、jsonという形式のファイルに変換しました。

具体的には、tensorflowjsを下記のコマンドでインストールし、

sudo pip install tensorflowjs

その後、下記のコマンドでh5ファイルをjsonファイルに変換しました。

tensorflowjs_converter --input_format keras ml-digits-cnn.h5 .

すると、実行したディレクトリにmodel.json、group1-shard1of1、group2-shard1of1、group3-shard1of1、group4-shard1of1 というファイルが出来ていますので、これをサーバー上に置きます。

なお、用いるh5ファイルは、keras + TensorFlowで出力したものでなければならないようです。本書に付属するh5ファイルはkeras + theanoで出力したものですから、そのままでは正しい認識結果を返しませんでした。

さて、作成した学習済jsonファイルを読み込むのは、下記のようなJavaScriptです。model.jsonを読み込むことで、group1-shard1of1、group2-shard1of1、group3-shard1of1、group4-shard1of1も自動的に読み込まれます。

async function load_tf(){
  model = await tf.loadModel('http://アドレス/model.json');
}

ファイルの読み込みによりモデルを構築したら、下記の命令により数字の認識結果を取得しています。例えば数字の2が認識された場合、argMax(1)により、[2]という配列（テンソル）が得られますので、その中身の数字をget(0)で取得してます。

var result = model.predict(X).argMax(1).get(0);

なお、おまけですがアヤメの分類をおこなうプログラム ml-10-02-iris-deep-load.py のTensorFlow.js 版も下記のリンクで見ることができます。

• TensorFlow.js によるアヤメの分類 (別ウインドウでプログラムが実行されます)

こちらは見て面白い例ではありませんが、シンプルなJavaScriptのソースを見たい方には参考になるかもしれません。