ユーザ用ツール

サイト用ツール


ml:201116_tfjs-express-netlify

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ml:201116_tfjs-express-netlify [2020/11/23]
adash333 [TensorFlow.jsリンク]
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日
 +
 +
 +
 +
 +
 +
  
 ===== ソースコード ===== ===== ソースコード =====
行 272: 行 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>
  
行 319: 行 332:
 2020/05/11 18:50 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.1606166075.txt.gz · 最終更新: 2020/11/23 by adash333