0. はじめに

MATLAB をブラウザ実装したら面白そうなものないかなぁ・・と思っていたら、素晴らしい記事が見つかったのでマネをさせてもらいました。

TensorFlow.jsでMNIST学習済モデルを読み込みブラウザで手書き文字認識をする

この記事では TensorFlow.js でWebブラウザ上で書いた数字が 0 ~ 9 のどれかを予測していますが、この予測部分に MATLAB のニューラルネットを使ってみた、というお話。

やったこと

コードこちらから： GitHub: minoue-xx/handwritten-digit-prediction-on-browser
実行ページはこちら：Github Pages: Hand-written Digit Prediction on Browser

予測精度は怪しいですが、ここではまず動くものを、、と単純なネットワークを学習して GitHub Pages に実装するまでのステップを解説する記事です。

WebAssembly 変換？

MATLAB -> C++ -> WebAssembly の自動変換を使った非線形最適化 on JavaScript では fmincon 関数を使った最適化をブラウザ実装しましたが、同じ方法を使います。

File Exchange に公開されている Generate JavaScript Using MATLAB Coder というツールで、MATLAB Coder を使って MATLAB から WebAssembly に変換して実装します。

👁 image_1.png

基本的には Generate JavaScript Using MATLAB Coder で用意されている 例題: Pass Data to a Library の流れに沿って作業しています。

環境

• MATLAB (R2019b Update 5)
  - Deep Learning Toolbox
  - MATLAB Coder
  - Image Processing Toolbox（montage 関数 による表示のみ）
  - Statistics and Machine Learning Toolbox（tabulate 関数 によるデータ数集計のみ）
• File Exchange: Generate JavaScript Using MATLAB Coder v2.0.2 （作成者に問い合わせたところ、現時点では R2020a には対応していないようなので、R2019b
  で作業します）
• Emscripten Development Kit v1.39.1

1. ツールの設定

基本的には MATLAB -> C++ -> WebAssembly の自動変換を使った非線形最適化 on JavaScript と同じステップを踏みます。

File Exchange から Generate JavaScript Using MATLAB Coder をインストール。まず開く Setup.mlx に従って Emscripten Development Kit の最新版をインストールします。ネットワークフォルダだとうまくいかなかったので、ローカルにインストールください。

2. MATLAB Project 作成

Generate JavaScript Using MATLAB Coder では MATLAB Project を使用します。

作業フォルダ（trainingModels/generateWebAssembly）に移動して、以下を実行。出力形式は Dynamic Libeary (dll) です。

proj = webcoder.setup.project("digitprediction","Directory",pwd,"OutputType",'dll');

3. MATLAB 関数作成

非線形最適化を実施する関数 digitPredictionFcn.m を作ります。まずは単純に隠れ層が１層だけの”浅い”ネットワークでやってみます。

• Step 1: データ読み込み
• Step 2: 学習
• Step 3: モデルの MATLAB 関数化
• Step 4: コード生成用に微修正

学習ステップはこちらを参考にしました: MathWorks Blog: Artificial Neural Networks for Beginners

こんな感じで digitPredictionFcn.m 、ネットワークの重みも情報も全部書き出した関数ファイルが出来上がります。

Step 4: コード生成用に微調整

残念ながら・・ここでできた関数ではコード生成に対応していない書き方が混ざっていたので、 C++ に自動変換するには少し手を入れる必要がありました。出来上がったものはこちら: GitHub: digitPredictFcn.m。

関数ができたら、digitPredictFcn.m をプロジェクトに追加して、ラベルを UserEntryPoints > Function に設定しておきます。

こんな感じ。

4. JavaScript と WebAssembly の生成

以下のコードで MATLAB Project からビルドします。裏で MATLAB Coder + Emscripten SDK が走ります。

proj = openProject(pwd);
webcoder.build.project(proj);

コードの生成が成功しました:レポートの表示

無事に終了すると、C++ コードが build フォルダに出力されます。さらに、この C++ コードが digitprediction.js と digitprediction.wasm にコンパイルされて、dist フォルダに出力されます。

5. HTML/JavaScript から呼び出し

さて、ようやく本題。MDN によると

JavaScript typed arrays are array-like objects and provide a mechanism for accessing raw binary data.

とのことで、この JavaScript typed arrays を使って、JavaScript から optimizeposition.wasm とデータをやり取りします。

処理の流れ

1. JavaScript typed array を作成
2. typed array の要素数から必要な領域を計算、wasm 側のメモリを確保
3. 確保した領域に typed array の値をコピー
4. wasm 側の計算処理を実行
5. wasm 側のメモリから typed array に値をコピー
6. 不要になった領域を解放

1-3 の処理をしているのが _arrayToHeap、5 が _heapToArray です。処理の詳細は Guthub: Planeshifter/emscripten-examples の README.md の記述が参考になります。

6. 結果をみてみよう

ローカルサーバを立てて結果をみてみます。Fetch API は file URI Scheme をサポートしていないため、ファイルに http URI Scheme でアクセスできるようにする必要があるらしい。Generate JavaScript Using MATLAB Coder には関数が用意されてますのでこれを使います。

先ほど .js と .wasm が出力されたフォルダ dist に index.html を置きます。MATLAB 上で dist をカレントフォルダにして、

server = webcoder.utilities.DevelopmentServer("Port",8125);
start(server);

Development Server serving directory '.' at locations:
 http://10.0.1.14:8125
 http://localhost:8125

% サーバを落とすときは
% stop(server);

計算はできている模様。ひとまずめでたしめでたし。

7. まとめ

ひとまず MATLAB で書いたネットワークが JavaScript から正しく呼び出せていることが確認できました。

ただ・・実際に Github Pages: Hand-written Digit Prediction on Browser から試してみるとわかる通り、精度はいまいち。

入力パッドから入ってくる画像が、学習に使用した画像と性質が異なるのか・・そもそも 5,000 枚しかなかったのが原因なのか？この辺についてはまた次回取り組んでみます。