OpenCVjsとtensorflow.jsによるモデル検証アプリ

はじめに

OpenCVjsは画像処理ライブラリであるOpenCVjavascript版。
tensorflow.jsはtensorflowのjavascript版である。
これらを組み合わせて、webブラウザ上で簡単な画像修正と
モデル推論を行うプログラムをgithubに公開した。

https://github.com/NeverendingNotification/opecvjs_tensorflowjs_viewer

概要

近年Deep Learningは様々な分野で利用されるようになっている。
しかし、 pythonによるDeep Learning関連の環境構築は素人には難しい部分もある。
そこで、webブラウザさえあれば動作するDeep Learning環境として
tensorflow.jsは有望である。これにもともとはCの画像処理ライブラリであった
opencvjavascript版であるOpenCVjsを組み合わせることで、
簡単な画像処理を行いながらDeep Learningに気軽に触れられる
プログラムを作ってみた。

アプリの使い方

このライブラリのローカル環境での使い方を以下に述べる。

機能

このアプリの機能は主に2つあり、

  1. OpenCVjsによる簡単な画像処理
    • 現時点では色変換、回転・スケール変換のみ
  2. 1で修正した画像と元画像に対して学習済みモデルによる予測結果比較
画像編集

上記のgithubリポジトリをクローンして、index.htmlを開くと以下のような画面となる。

f:id:nakamrnk:20200918225705j:plain

上側の領域が元画像領域、中央が編集パラメータ領域、 下側の領域が編集後画像領域である。 

レナ画像(http://www.ess.ic.kanagawa-it.ac.jp/app_images_j.htmlよりダウンロード)を例に
アプリの動きを説明する。

  1. 中央のファイルを選択ボタンからローカルのファイル選択
  2. 中央の編集パラメータを適当に変更する
  3. 編集ボタンを押す

この結果アプリの画面は以下のようになる。
f:id:nakamrnk:20200918230324j:plain

このようにOpenCVjsを利用するとウェブブラウザのみで簡単な画像編集ができる。

モデル推論

モデル推論に関してはローカルで行うのにひと手間必要である。
これはセキュリティ上webブラウザがローカルファイルへのアクセスを許可していない (ことが多い)ため、学習済みのモデルにアクセスできないためである。

これを回避するためにいくつか手法が考えられると思うが、chromeを利用しているならば
chromeアプリであるWeb Server for Chromeを利用するのが楽だと思う。

アプリインストール後左上のアプリ項目からWeb Serverを選択すると以下のような画面が
表示されるため、 CHOOSE FOLDERから先ほどのアプリのルートフォルダを指定し、 画面中央のリンク(ここではhttp://127.0.0.1:8887/)からアプリに移動できる。

f:id:nakamrnk:20200918231338j:plain

ここで先ほどの画像編集と同様に画像を読み込み中央にある予測ボタンを押すと
学習済みモデルの予測結果が表示される。
f:id:nakamrnk:20200918232000j:plain

今回の学習済みモデルは手元のデータで適当に学習した、
人間、動物、食べ物の3クラス分類モデルである。

このモデルでLenna画像を予測した結果、
人間8.5%, 食べ物91%と明らかに間違った結果となっている。
これはこの学習済みモデルの学習データのバイアスが原因があると思われる。

今回学習に利用したデータは正面の人間画像が多く、振り向き顔であるLennaのような
姿勢の画像はなかった。また、Lenna画像はやや色合いが強く、これも学習データと
異なるように感じた。

そこで画像編集機能で彩度を-20した結果で予測を行う(下側のパネル)と
予測結果が人間 44 %まで上昇した。

さらに、明度、回転、拡大変換を追加して、学習データの条件に近づけると
人間 59 %、食べ物 40 %となり、かろうじて間違っていない結果を得ることができた。

f:id:nakamrnk:20200918232957j:plain

このように手軽に画像処理を行いながら、Deep Learningモデルの結果を観測することで、
モデルの持つバイアスを理解しやすくなる。

このアプリで軽くテストしてみた限り、今回のモデルは

  • 色相をピンクよりにすると予測確率が上がり、それ以外は下がる
  • 彩度は下げると、明度は上げると、予測確率が上がる
  • 回転は単体で行うと予測確率が下がるが、拡大といい感じに組み合わせると予測確率が上がる

などのモデルの癖を観測することができた。

まとめ

javascriptを使って学習済みモデルの性質をチェックするアプリを開発した。
ブラウザから手軽に扱えるので、モデルの性質把握がしやすい。
現状画像処理機能の種類やアプリデザインがイマイチなので
暇があったら修正したい。

参考文献