差分

このページの2つのバージョン間の差分を表示します。

--- ml:201116_tfjs-express-netlify [2020/11/21] – [Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictする流れ] adash333
+++ ml:201116_tfjs-express-netlify [2020/11/26] (現在) – [さくらインターネットにモデルファイルを置いた後にCORS回避の設定] adash333
@@ 行 20: / 行 20: @@
 Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（７）ExpressアプリをHerokuまたはNetlifyにデプロイ
 年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を始めてみる
+年11月24日
 ===== ソースコード =====
@@ 行 183: / 行 195: @@
 ===== 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つ
@@ 行 232: / 行 248: @@
   -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/フォルダを中身ごと消去する
-  -static/ フォルダに、apple_orange/ フォルダを作成し、ステップ1で作成したモデル(model.jsonと、group1-shard\*of\* などのファイル群)をコピーする
   -yarn
   -yarn add @tensorflow/tfjs
   -static/index.htmlを微調整
-  -static/js/predict.js を書き換え
+  -static/js/predict.js を書き換える(モデルの場所などいろいろ)
   -yarn start
   -Chromeでlocalhost:8080を開いて、アプリが動くことを確認。
@@ 行 261: / 行 284: @@
 const MODEL_URL = 'model_directory/model.json';
-const model = await loadGraphModel(MODEL_URL);
+const model = loadGraphModel(MODEL_URL);
-const cat = document.getElementById('cat');
+const img = document.getElementById('img');
-model.execute(tf.browser.fromPixels(cat));
+const y = model.execute(tf.browser.fromPixels(img));
+console.log(y);
 </code>
@@ 行 275: / 行 299: @@
 TensorFlow.jsで「じゃんけん」を判別してみよう
 (ソースコード)
+===== TensorFlow.jsリンク =====
+https://qiita.com/kzmssk/items/b22b82e7e617eecad009
+@kzmssk
+年04月14日に更新
+tfjs-converterでpythonのモデルをtfjsで実行する
+<code>
+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()
+</code>
+https://trafalbad.hatenadiary.jp/entry/2019/05/14/235403
+-05-14
+Node.jsでサーバを構築し、Tensorflow.jsでCNNの画像分類してみた【機械学習・Javascript】
+https://note.com/npaka/n/ndb93d6d41210
+TensorFlow.js 入門 / 画像分類
+npaka
+/05/11 18:50
+https://qiita.com/iwatake2222/items/0092b4b95ed2bc50c9ce
+@iwatake2222
+年01月25日
+Deep Learningアプリケーション開発 (8) TensorFlow.js
+https://qiita.com/amanoese/items/6b904f76b9aa0a1d91d1
+@amanoese
+年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
+年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の使い方＆おすすめ設定を紹介
+.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
+年07月16日に更新
+npmとyarnのコマンド早見表
+https://qiita.com/567000/items/dde495d6a8ad1c25fa43
+@567000
+年07月13日に更新
+Vue.js を vue-cli を使ってシンプルにはじめてみる
+https://biz-navi.site/vscode%EF%BC%8Bvetur/
+Vue.js】初心者にオススメなエディタは「VSCode」＋「Vetur」【拡張機能オススメ一覧】
+年5月30日 最終更新日： 2019年11月17日
+https://designsupply-web.com/media/knowledgeside/5412/
+.10.01
+Vue.jsで直接DOMを操作する時に使える$elと$refs
+https://qiita.com/1994spagetian/items/5f372fc68122ec207c78
+@1994spagetian
+年04月02日に更新
+[Vue.js] $refsでコンポーネント内の子要素を触る
+→ getElementById の代わりに、Vue.jsでは、
+<code>
+id="img" を ref="img"
+document.getElementById(img) を this.$refs.img
+</code>
+のように記載する
+https://qiita.com/kskinaba/items/3e8887d45b11f9132012
+@kskinaba
+年07月01日に更新
+Vue.jsを100時間勉強して分かったこと
+===== Vue.jsの$refsその他 =====
+https://qiita.com/fruitriin/items/3b862f7ceb2784167439
+@fruitriin
+年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
+-10-11
+さくらのサーバに置いたWebフォントをはてなブログから使う
+<code>
+.htaccessファイルを作成し、
+Header set Access-Control-Allow-Origin: "*"
+などと書き込んでフォルダと同じディレクトリにぶち込む
+</code>
+http://dotnsf.blog.jp/archives/1077515458.html
+/05/24
+<canvas>利用時の getImageData() がエラー（The canvas has been tainted by cross-origin data.）
+https://teratail.com/questions/175358
+外部から取得した画像がgetImageDateできない。
+投稿 2019/02/20 01:32
+===== TensorFlow.jsチュートリアル =====
+https://codelabs.developers.google.com/codelabs/tensorflowjs-object-detection#7