====== 201116 TensorFlow.jsアプリ（express利用）をnetlifyにデプロイ ======
[[ml:index.html|機械学習の記事 2020年版]]
[[ml:201106_tensorflow|201106_TensorFlow]]
===== このアプリをNetlifyにデプロイしたい =====
https://book.mynavi.jp/manatee/detail/id=99768
2018.11.05
機械学習で遊ぼう! APIサービスやTensorFlowを使ったサンプルレシピ集
第16回 TensorFlow.jsで「じゃんけん」を判別してみよう
ポンダッド（著者）
https://github.com/PonDad/manatee/tree/master/1_sign_language_digits_classification-master
TensorFlow.jsで「じゃんけん」を判別してみよう
(ソースコード)
===== デプロイの経過 =====
https://i-doctor.sakura.ne.jp/font/?p=45277
Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（７）ExpressアプリをHerokuまたはNetlifyにデプロイ
2020年11月20日
https://i-doctor.sakura.ne.jp/font/?p=45386
https://i-doctor.sakura.ne.jp/font/?p=45472
Windows10にvue-cliをインストールしてVue.jsを始めてみる
2020年11月24日
===== ソースコード =====
Heroku用のソースコード：https://github.com/adash333/TFjs-RockPaperScissors-Heroku
Netlify用のソースコード：https://github.com/adash333/TFjs-RockPaperScissors-netlify
NetlifyのDEMOサイト：https://wonderful-tereshkova-e5866e.netlify.app/
===== express利用アプリをherokuにデプロイ =====
https://qiita.com/hkusu/items/e46de8c446840c50aefe
@hkusu
2014年12月19日に更新
Node.js(Express) 事始め ＆ Heroku へデプロイまでのメモ
https://qiita.com/TechnicolorArai/items/4af1661bb3b586624a6e
@TechnicolorArai
2019年01月02日
HerokuでExpressアプリを作る---基本設定
https://dzone.com/articles/deploy-your-node-express-app-on-heroku-in-8-easy-s
Deploy Node Express App on Heroku: 8 Easy Steps
NAMAN AGGARWAL user avatar by NAMAN AGGARWAL · Aug. 13, 20 ·
https://software.pitang1965.com/2019/08/13/deploying-node-js-to-heroku/
Node.jsアプリケーションをHerokuにデプロイしました
2019-08-132019-11-16
===== TensorFlow.jsのDEMOアプリ（express使用）をNetlifyにデプロイする流れ =====
https://github.com/PonDad/manatee/tree/master/1_sign_language_digits_classification-master
をNetlifyにデプロイしたい。。。
Netlify functionsが必要そう（index.html以下をそのままアップロードしても動かなかった。）
-ローカル環境でC:/python/TFjs-RockPaperScissors-netlify/フォルダにmanatee/1_sign_language_digits_classification-master/nodejs/ の中身を保存。さらに、.gitignoreを作成。
-yarn
-yarn start
-Chromeでlocalhost:8080を開いて、アプリが動くことを確認。
-Ctrl+Cでサーバを停止。
-GitHubへpush
以下のコードではNetlifyでは動作できなかった。
Netlify functionsは /.netlify/functions/ フォルダでしか動かないか？よくわからない。。。
https://github.com/adash333/TFjs-RockPaperScissors-netlify
===== NetlifyにExpressサーバ利用アプリをデプロイ =====
https://mizchi.dev/202006161259-try-netlify-lambda
ローカル環境で netlify lambda のエミュレータを動かす
netlifyby mizchi created at 2020/06/16/12:59
https://www.youtube.com/watch?v=hQAu0YEIF0g
How to deploy express.js on Netlify
2019/03/29
https://qiita.com/Sr_Bangs/items/7867853f5e71bd4ada56
@Sr_Bangs
2019年07月10日に更新
【入門】Netlify Functionsコトハジメ
https://www.agent-grow.com/self20percent/2018/06/25/netlify-serverless-intro/
2018.06.25
爆速でサーバーレスアプリケーションを体験しよう！ そう、 Netlify ならね。
https://note.com/shimakaze_soft/n/ncee10d32fe89
無料で簡単にNetlify Functionsの始め方
shimakaze_soft
2020/04/19 10:11
https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/
By Mark Tse & David Wells in Guides & Tutorials • September 13, 2018
How to run Express.js apps with Netlify Functions
WarpJSの利用 文章を推定
“How to run Tensorflow.js on a serverless platform : deploying models” by Dominique D'Inverno https://link.medium.com/3QMtO0Tkrbb
===== 開発環境 =====
Windows10でのPython3.6+TensorFlow1.15の環境構築について
→https://i-doctor.sakura.ne.jp/font/?p=44703
Windows10へのHeroku CLIのインストールについて
→https://i-doctor.sakura.ne.jp/font/?p=44947#toc_id_10
Windows10でのTensorFlow.jsの環境構築について
→https://i-doctor.sakura.ne.jp/font/?p=45117
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の設定の仕方
→https://i-doctor.sakura.ne.jp/font/?p=44808#toc_id_10
===== Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictする流れ =====
[[https://i-doctor.sakura.ne.jp/font/?p=45386|Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（８）Lobeで出力した自前モデルをTensorFlow.js用モデルに変換してNetlifyで公開]]
TensorFlowで保存できるモデルの形式は2つ
-SavedModel
-HDF5
Loabでエクスポートされるモデルの形式は
''%%TensorFlow 1.15 SavedModel%%''
SavedModelは、以下のような構成である。
-assets
-saved_model.pb
-variables
{{ :ml:img_20201106_173736.jpg |}}
ステップ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種類のファイルを生成します。
-model.json （データフローグラフとウェイトマニフェスト）
-group1-shard\*of\* （バイナリウェイトファイルのコレクション）
ステップ2：ブラウザーでのロードと実行
Windowsで
-nvm-windows
-Node.js
-yarn
がインストールされている状態とする。
-C:/python/Lobe-TFjs-Netlify/ フォルダを作成
-C:/python/Lobe-TFjs-Netlify/py-model/ フォルダを作成
-py-model/ フォルダに[[https://github.com/adash333/lobe-AppleOrange-tf1model|LobeからTensorFlow形式で出力したモデル]]を保存
-[[https://github.com/adash333/TFjs-RockPaperScissors-netlify|こちらのコード]]をダウンロードして、中身をLobe-TFjs-Netlify/ フォルダにコピー
-cd py-model
-pipenv install tensorflowjs
-pipenv shell
-tensorflowjs_wizard を入力し、
-対話的にtf_saved_modelからtfjs_graph_modelへのconversionを実行
-static/ フォルダに、apple_orange/ フォルダを作成し、conversionで作成されたモデル(model.jsonと、group1-shard\*of\* などのファイル群)をコピーする
-static/sign_language_vgg16/フォルダを中身ごと消去する
-yarn
-yarn add @tensorflow/tfjs
-static/index.htmlを微調整
-static/js/predict.js を書き換える(モデルの場所などいろいろ)
-yarn start
-Chromeでlocalhost:8080を開いて、アプリが動くことを確認。
-Ctrl+Cでサーバを停止。
-.gitignore、netlify.tomlのコードを確認
-git init
-GitHubに新規リポジトリを作成してpush
-Netlifyにログインして、GitHubから新規作成してデプロイ(npm run build, static)
predict.js
https://gist.github.com/adash333/eb9a004fbf1a4dba159152d85b95e523
モデルを読み込み、推論するコード
import * as tf from '@tensorflow/tfjs';
import {loadGraphModel} from '@tensorflow/tfjs-converter';
const MODEL_URL = 'model_directory/model.json';
const model = loadGraphModel(MODEL_URL);
const img = document.getElementById('img');
const y = model.execute(tf.browser.fromPixels(img));
console.log(y);
https://book.mynavi.jp/manatee/detail/id=99768
2018.11.05
機械学習で遊ぼう! APIサービスやTensorFlowを使ったサンプルレシピ集
第16回 TensorFlow.jsで「じゃんけん」を判別してみよう
ポンダッド（著者）
https://github.com/PonDad/manatee/tree/master/1_sign_language_digits_classification-master
TensorFlow.jsで「じゃんけん」を判別してみよう
(ソースコード)
===== TensorFlow.jsリンク =====
https://qiita.com/kzmssk/items/b22b82e7e617eecad009
@kzmssk
2019年04月14日に更新
tfjs-converterでpythonのモデルをtfjsで実行する
import * as tf from '@tensorflow/tfjs-node';
const MODEL_URL = 'file://./tmp/converted_my_model/model.json';
async function main() {
const model = await tf.loadGraphModel(MODEL_URL)
const x: tf.Tensor2D = tf.tensor([[1, 2]])
const y = await model.predict(x)
console.log(y.toString())
}
main()
https://trafalbad.hatenadiary.jp/entry/2019/05/14/235403
2019-05-14
Node.jsでサーバを構築し、Tensorflow.jsでCNNの画像分類してみた【機械学習・Javascript】
https://note.com/npaka/n/ndb93d6d41210
TensorFlow.js 入門 / 画像分類
npaka
2020/05/11 18:50
https://qiita.com/iwatake2222/items/0092b4b95ed2bc50c9ce
@iwatake2222
2020年01月25日
Deep Learningアプリケーション開発 (8) TensorFlow.js
https://qiita.com/amanoese/items/6b904f76b9aa0a1d91d1
@amanoese
2019年07月22日に更新
Vue.jsとTensorflow.jsで手書きの数字を分類できるようにしてみた
https://zukucode.com/2019/08/tensorflow-vue-mnist.html
TensorFlow.jsでMNISTのアプリを作成する(初心者向け)
https://qiita.com/THERE2/items/605583380e13198cdcf3
@THERE2
2020年06月04日に更新
Javascriptの顔認識モデルで激太りのミーシャ・バートンを認識できるのか？
https://codelabs.developers.google.com/codelabs/tensorflowjs-object-detection#0
TensorFlow.js:Make a smart webcam in JavaScript with a pre-trained Machine Learning model
===== JavaScript 整形 prettier =====
https://ma-vericks.com/vscode-prettier/
【VSCode】Prettierの使い方＆おすすめ設定を紹介
2019.10.25
===== yarnとVue.js =====
ローカル環境で、コードを変更するたびにサーバを停止して、npm startするのが面倒なので、vue-cliを使う方針とした。
（本当はCodeSandBoxを使いたかったが、TensorFlow.jsのモデルが約100MBあり、50MB制限にひっかかてしまってダメだった。→さくらインターネットのサーバにモデルだけおいて、CORS対策（さくらのサーバに.htaccssを設置）する方法もあるが、面倒なのでやめた。）
https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8
@rubytomato@github
2020年07月16日に更新
npmとyarnのコマンド早見表
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
@567000
2020年07月13日に更新
Vue.js を vue-cli を使ってシンプルにはじめてみる
https://biz-navi.site/vscode%EF%BC%8Bvetur/
Vue.js】初心者にオススメなエディタは「VSCode」＋「Vetur」【拡張機能オススメ一覧】
2019年5月30日 最終更新日： 2019年11月17日
https://designsupply-web.com/media/knowledgeside/5412/
2019.10.01
Vue.jsで直接DOMを操作する時に使える$elと$refs
https://qiita.com/1994spagetian/items/5f372fc68122ec207c78
@1994spagetian
2019年04月02日に更新
[Vue.js] $refsでコンポーネント内の子要素を触る
→ getElementById の代わりに、Vue.jsでは、
id="img" を ref="img"
document.getElementById(img) を this.$refs.img
のように記載する
https://qiita.com/kskinaba/items/3e8887d45b11f9132012
@kskinaba
2020年07月01日に更新
Vue.jsを100時間勉強して分かったこと
===== Vue.jsの$refsその他 =====
https://qiita.com/fruitriin/items/3b862f7ceb2784167439
@fruitriin
2019年03月06日に更新
Vueで直接DOMノードを参照するプロパティを知ってｱﾊ体験したのでまとめてみた
https://cr-vue.mio3io.com/guide/chapter2.html#s11-dom%E3%82%92%E7%9B%B4%E6%8E%A5%E5%8F%82%E7%85%A7%E3%81%99%E3%82%8B-el%E3%81%A8-refs
$refsは一時的な変更
===== さくらインターネットにモデルファイルを置いた後にCORS回避の設定 =====
CodeSandBoxだと、50MBまでの制限があり、Lobeで出力したモデルをTensorFlow.jsに変換したモデルを置くことができない。
→自分で契約しているさくらインターネットのサーバにモデルだけおいた。
→CodeSandBoxからモデルを読み込みに行こうとすると、CORSにひっかかってしまう
https://nixeneko.hatenablog.com/entry/2016/10/11/231435
2016-10-11
さくらのサーバに置いたWebフォントをはてなブログから使う
.htaccessファイルを作成し、
Header set Access-Control-Allow-Origin: "*"
などと書き込んでフォルダと同じディレクトリにぶち込む
http://dotnsf.blog.jp/archives/1077515458.html
2020/05/24