ユーザ用ツール

サイト用ツール


ml:201116_tfjs-express-netlify

差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ml:201116_tfjs-express-netlify [2020/11/21]
adash333 [Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictする流れ]
ml:201116_tfjs-express-netlify [2020/11/26] (現在)
adash333 [さくらインターネットにモデルファイルを置いた後にCORS回避の設定]
行 20: 行 20:
 Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる(7)ExpressアプリをHerokuまたはNetlifyにデプロイ Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる(7)ExpressアプリをHerokuまたはNetlifyにデプロイ
 2020年11月20日 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日
 +
 +
 +
 +
 +
 +
  
 ===== ソースコード ===== ===== ソースコード =====
行 183: 行 195:
  
 ===== Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictする流れ ===== ===== Lobeで出力したTensorFlow 1.15 SavedModelをTensorFlow.js用モデルに変換してpredictする流れ =====
 +
 +[[https://i-doctor.sakura.ne.jp/font/?p=45386|Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる(8)Lobeで出力した自前モデルをTensorFlow.js用モデルに変換してNetlifyで公開]]
 +
 +
  
 TensorFlowで保存できるモデルの形式は2つ TensorFlowで保存できるモデルの形式は2つ
行 233: 行 249:
   -C:/python/Lobe-TFjs-Netlify/ フォルダを作成   -C:/python/Lobe-TFjs-Netlify/ フォルダを作成
   -C:/python/Lobe-TFjs-Netlify/py-model/ フォルダを作成   -C:/python/Lobe-TFjs-Netlify/py-model/ フォルダを作成
-  -py-model/ フォルダに+  -py-model/ フォルダに[[https://github.com/adash333/lobe-AppleOrange-tf1model|LobeからTensorFlow形式で出力したモデル]]を保存
   -[[https://github.com/adash333/TFjs-RockPaperScissors-netlify|こちらのコード]]をダウンロードして、中身をLobe-TFjs-Netlify/ フォルダにコピー   -[[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/sign_language_vgg16/フォルダを中身ごと消去する
-  -static/ フォルダに、apple_orange/ フォルダを作成し、ステップ1で作成したモデル(model.jsonと、group1-shard\*of\* などのファイル群)をコピーする 
   -yarn   -yarn
   -yarn add @tensorflow/tfjs   -yarn add @tensorflow/tfjs
   -static/index.htmlを微調整   -static/index.htmlを微調整
-  -static/js/predict.js を書き換え+  -static/js/predict.js を書き換える(モデルの場所などいろいろ)
   -yarn start   -yarn start
   -Chromeでlocalhost:8080を開いて、アプリが動くことを確認。   -Chromeでlocalhost:8080を開いて、アプリが動くことを確認。
行 263: 行 284:
 const MODEL_URL = 'model_directory/model.json'; 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> </code>
  
行 277: 行 299:
 TensorFlow.jsで「じゃんけん」を判別してみよう TensorFlow.jsで「じゃんけん」を判別してみよう
 (ソースコード) (ソースコード)
 +
 +
 +===== TensorFlow.jsリンク =====
 +
 +https://qiita.com/kzmssk/items/b22b82e7e617eecad009
 +@kzmssk
 +2019年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
 + 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では、
 +
 +<code>
 +id="img" を ref="img"
 +
 +document.getElementById(img) を this.$refs.img
 +</code>
 +
 +のように記載する
 +
 +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フォントをはてなブログから使う
 +<code>
 +.htaccessファイルを作成し、
 +Header set Access-Control-Allow-Origin: "*"
 +などと書き込んでフォルダと同じディレクトリにぶち込む
 +</code>
 +
 +http://dotnsf.blog.jp/archives/1077515458.html
 +2020/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
 +
  
  

ml/201116_tfjs-express-netlify.1605995428.txt.gz · 最終更新: 2020/11/21 by adash333