スポンサーリンク

Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（８）Lobeで出力した自前モデルをTensorFlow.js用モデルに変換してNetlifyで公開にtry

2020年11月24日

前回は 『TensorFlow.jsで「じゃんけん」を判別してみよう』をNetlifyにデプロイしました。

Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（７）ExpressアプリをHerokuまたはNetlifyにデプロイ

今回は、当初の目的である、Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictするアプリを作成し、Netlifyで公開したいと思います。

スポンサーリンク

Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる 目次

  1. （１）LobeのインストールからTensorFlowモデルのエクスポートまで
  2. （２）Windows10でPython3.6+TensorFlow1.15をセットアップ
  3. （３）Windows10ローカル環境でtf_example.pyを実行
  4. （４）Windows10ローカル環境でFlaskを用いて画像判定
  5. （５）FlaskアプリをHerokuにデプロイ
  6. （６）Windows10にTensorFlow.jsの環境構築とDEMOアプリのNetlifyへのデプロイ
  7. （７）ExpressアプリをHerokuまたはNetlifyにデプロイ
  8. （８）Lobeで出力した自前モデルをTensorFlow.js用モデルに変換してNetlifyで公開

ソースコード

Lobeで出力したモデル：https://github.com/adash333/lobe-AppleOrange-tf1model/tree/3a9c48ba6128094491d63d135a84c750270adf51

Netlify用のソースコード：

NetlifyのDEMOサイト：

開発環境

Windows10でのPython3.6+TensorFlow1.15の環境構築についてはこちらをご覧ください。
Windows10へのHeroku CLIのインストールについてはこちらをご覧ください。
Windows10でのTensorFlow.jsの環境構築についてはこちらをご覧ください。

Windows10 Pro
VisualStudioCode 1.51.0
Git for Windows v2.29.2
python 3.6
pip 20.2.4
pipenv 2020.11.4

nvm-windows 1.1.7
node v14.15.0
npm 6.14.8
yarn 1.22.10
Visual Studio Community 2019 + "Desktop development with C++" (約8GB)
parcel-bundler
heroku/7.47.0 win32-x64 node-v12.16.2

(仮想環境)
python 3.6
TensorFlow 1.15.3
pillow 7.2.0
autopep8
flake8
mypy

VisualstudiocodeのWorkspaceの設定の仕方はこちらへ。（参考サイト）

Lobeで出力した自前モデルをTensorFlow.js用モデルに変換してNetlifyにデプロイする流れ

  1. C:/python/Lobe-TFjs-Netlify/ フォルダを作成
  2. C:/python/Lobe-TFjs-Netlify/py-model/ フォルダを作成
  3. py-model/ フォルダにLobeからTensorFlow形式で出力したモデルを保存
  4. こちらのコードをダウンロードして、中身をLobe-TFjs-Netlify/ フォルダにコピー
  5. cd py-model
  6. pipenv install tensorflowjs
  7. pipenv shell
  8. tensorflowjs_wizard を入力し、
  9. 対話的にtf_saved_modelからtfjs_graph_modelへのconversionを実行
  10. static/ フォルダに、apple_orange/ フォルダを作成し、conversionで作成されたモデル(model.jsonと、group1-shard\*of\* などのファイル群)をコピーする
  11. static/sign_language_vgg16/フォルダを中身ごと消去する
  12. yarn
  13. yarn add @tensorflow/tfjs
  14. static/index.htmlを微調整
  15. static/js/predict.js を書き換える(モデルの場所などいろいろ)
  16. yarn start
  17. Chromeでlocalhost:8080を開いて、アプリが動くことを確認。
  18. Ctrl+Cでサーバを停止。
  19. .gitignore、netlify.tomlのコードを確認
  20. git init
  21. GitHubに新規リポジトリを作成してpush
  22. Netlifyにログインして、GitHubから新規作成してデプロイ(npm run build, static)

Loabでエクスポートされるモデルの形式はTensorFlow 1.15 SavedModel

TensorFlowで保存できるモデルの形式は2つ

  1. SavedModel
  2. HDF5

Loabでエクスポートされるモデルの形式（例：リンゴとオレンジのソースコード）は

TensorFlow 1.15 SavedModel

SavedModelは、以下のような構成です。

  1. assets
  2. saved_model.pb
  3. variables

ステップ1.　既存のTensorFlowモデルをTensorFlow.jsウェブ形式に変換します。

pipenv install tensorflowjs
pipenv shell

tensorflowjs_wizard
# 対話的にtf_saved_modelからtfjs_graph_modelへのconversionを実行、または以下を入力

tensorflowjs_converter \
    --input_format=tf_saved_model \
    --output_format=tfjs_graph_model \
    --signature_name=serving_default \
    --saved_model_tags=serve \
    /mobilenet/saved_model \
    /mobilenet/web_model

上記の変換スクリプトは、2種類のファイルを生成します。

  1. model.json （データフローグラフとウェイトマニフェスト）
  2. group1-shard\*of\* （バイナリウェイトファイルのコレクション）

ステップ2：ブラウザーでのロードと実行します。tfjs-converter公式サイトにあるモデルを読み込み、推論するコード（JavaScript）は以下となります。

import * as tf from '@tensorflow/tfjs';
import {loadGraphModel} from '@tensorflow/tfjs-converter';

const MODEL_URL = 'model_directory/model.json';

const model = await loadGraphModel(MODEL_URL);
const cat = document.getElementById('cat');
model.execute(tf.browser.fromPixels(cat));

LobeからTensorFlow形式で出力したモデルを保存

C:/python/Lobe-TFjs-Netlify/ フォルダと、C:/python/Lobe-TFjs-Netlify/py-model/ フォルダを作成します。

C:/python/Lobe-TFjs-Netlify/py-model/ フォルダ に、 LobeからTensorFlow形式で出力したモデルを保存します。

JavaScriptアプリをダウンロードして保存

こちらのコードをZIPファイルでダウンロードして解凍し、中身をLobe-TFjs-Netlify/ フォルダにコピーします。

C:/python/Lobe-TFjs-Netlify/ フォルダの中で　右クリック　＞　Codeで開く　をクリックして、VisualStudioCodeで開きます。

さらに、Ctrl+@でターミナル画面を開くと、以下のような画面になります。

pythonのtensorflowjsを用いてLobeで出力したモデルをTensorFlow.jsのモデルに変換

まずは、pythonの仮想環境下でTensorFlow 1.15 SavedModelを TensorFlow.jsウェブ形式 に変換します。

VisualStudioCodeのターミナル画面で以下を入力します。

cd py-model
pipenv install tensorflowjs
pipenv shell
tensorflowjs_wizard

tensorflowjs_wizard したところで、以下のようなエラーに遭遇。

tensorflowjs_wizard

言われた通りに、以下を入力してみます。

pipenv install PyInquirer==1.0.3

しかし、エラーでどうにもならず。

tensorflowjs_wizard はあきらめ、以下のコードを入力してみます。

tensorflowjs_converter --input_format=tf_saved_model --output_format=tfjs_graph_model --signature_name=serving_default --saved_model_tags=serve ../py-model ../static/web-model

（以下は、最後の ../static/web-model は、実際は ../web-model にして、その後、web-model/ フォルダを static/フォルダ下に移動しました。）

うまくいったようです。web-model/ フォルダが作成され、その中に以下のファイル群が作成されます。

  • model.json
  • group1-shard1of25.bin ～ group1-shard25of25.bin

static/sign_language_vgg16/フォルダを中身ごと消去します。

以下を入力して pipenv仮想環境を終了します。

deactivate

参考：Pipenvことはじめ @shinshin86 2019年12月14日に更新

predict.jsを編集してローカル環境でアプリを動かす

次に、JavaScriptアプリを作成します。

ターミナル画面で以下を入力します。

cd ..
yarn
yarn add @tensorflow/tfjs

index.htmlを少しだけ編集します。（そのままでも大丈夫です。）

static/js/predict.js　を編集します。

  • CLASSESの変更
  • モデルのアドレスの変更
  • async function predict()　の中身を微妙に変更　

しかし、npm startしても、modelがloadされない。。。

おそらく、conversionしたモデルファイル web-model/model.json をTensorFlow.jsがうまく読み込めないようです。原因はわかりません。。。挫折か、、、

pythonのバージョンの問題？

TensoFlow.jsのバージョンの問題？

JavaScriptのコードの問題？

AI,Javascript,Lobe,TensorFlow

Posted by twosquirrel