サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 02.lobeで出力したモデルでpredict ======
[[tensorflow.js:index.html|TensorFlow.jsトップページ]]






===== ソースコード =====
変更中
https://github.com/adash333/lobe-tfjs-predict
===== lobeの使い方 202108 =====


https://internet.watch.impress.co.jp/docs/column/shimizu/1316830.html
誰でもノーコードで画像判別の機械学習モデルを作成できる「Lobe」
清水 理史2021年4月12日

https://github.com/lobe/web-bootstrap
→これを写経してみたい







===== 流れ その1 =====

[[https://i-doctor.sakura.ne.jp/font/?p=45938|Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（11）Parcelを用いてローカルサーバでpredict]]

  -''%%yarn init -y%%''
  -yarn add -D parcel
  -src/model/ フォルダを作成し、モデルファイル群をコピーする
  -predict用のリンゴの画像をダウンロードして保存（src/img/apple.jpg）
  -package.jsonの変更とインストール
  -yarn install　（@tensorflow/tfjs-node, @types/node, ts-node, typescriptをインストール）
  -tfjsExample.ts をsrc/ にコピーして、23行目と91行目を変更
  -yarn run ts-node src/tfjsExample.ts src/img/apple.jpg　により、ローカルでpredict

→ 2021年1月時点で、上記ではエラー

===== 流れ その2 =====
https://codesandbox.io/s/lobe-tensorflowjs-predict-du8dd?file=/index.html

https://github.com/adash333/lobe-parcel

https://adash333.github.io/lobe-parcel/src/model/model.json

https://adash333.github.io/lobe-parcel/src/img/apple.jpg


  -Lobeで出力したTensorFlow.js用のモデルのファイル群をGitHub Pagesで公開(デフォルトでCORS設定されている)
  -

https://github.com/adash333/lobe-parcel/blob/9ddab2c6370c0ae677b75e3cac53379d69345972/src/tfjsExample.ts


https://spck.io/



<code>


async function main(imgPath: string) {

  // run the prediction
  const results = model.predict(decodedImage);
  console.log(results);
  
 
 document.getElementById('').contentText = results.toString();

}


const imgPath = "apple.jpg";
main(imgPath);



</code>



https://github.com/adash333/lobe-tfjs-predict


https://adash333.github.io/lobe-tfjs-predict/






===== TensorFlow.jsでpredict =====

https://zaitakukinmu.com/2021/02/26/microsoft-lobe/
Microsoft Lobeが便利！写真の分類を簡単に可能。あなたのサイトにもAI導入
2021年2月26日
2021年2月28日




https://qiita.com/iwatake2222/items/0092b4b95ed2bc50c9ce
@iwatake2222
2020年01月25日
Deep Learningアプリケーション開発 (8) TensorFlow.js

https://github.com/PonDad/manatee/tree/master/1_sign_language_digits_classification-master/nodejs
manatee/1_sign_language_digits_classification-master/nodejs/
→上記の解説ページ
https://book.mynavi.jp/manatee/detail/id=99768
2018.11.05
機械学習で遊ぼう! APIサービスやTensorFlowを使ったサンプルレシピ集 第16回　




https://towardsdatascience.com/deploying-an-image-classifier-using-javascript-84da1480b3a4
Deploying an Image Classifier using JavaScript
Sushrut Ashtikar
May 27, 2020

https://github.com/tensorflow/tfjs-examples
TensorFlow.js Examples

https://github.com/tensorflow/tfjs-models/tree/master/mobilenet
MobileNet

https://www.tensorflow.org/js/tutorials/conversion/import_saved_model
TensorFlowGraphDefベースのモデルをTensorFlow.jsにインポートする

  -モデルファイルを用意(model.jsonとgroup1-shard1of5など)
  -''%%yarn add @tensorflow/tfjs%%''または''%%npm install @tensorflow/tfjs%%''
  -以下のコードでpredict
<code>
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));
</code>

https://js.tensorflow.org/api/1.0.0/#loadGraphModel
tf.loadGraphModel

https://github.com/tensorflow/tfjs/tree/master/tfjs-converter/demo/mobilenet
tfjs/tfjs-converter/demo/mobilenet/
→ここにのっているコードが、モデルがmodel.jsonとgroup1-shard1of5などのみのときのコードになっていない。























===== 見出し =====


https://github.com/adash333/lobe-parcel/blob/9ddab2c6370c0ae677b75e3cac53379d69345972/src/tfjsExample.ts


<code>
//変更前
this.signature = JSON.parse(signatureData);
this.modelPath = `file://src/model/${this.signature.filename}`;

//変更後
this.signature = JSON.parse(signatureData);
this.modelPath = `model/${this.signature.filename}`;
</code>


<code>
//変更前
// create and load our model
const model = new ImageModel('src/model/signature.json');
await model.load();

//変更後
// create and load our model
const model = new ImageModel('model/signature.json');
await model.load();

</code>

===== 見出し =====

オリジナルコード
https://github.com/PonDad/manatee/blob/master/1_sign_language_digits_classification-master/nodejs/static/js/predict.js

変更中
https://github.com/adash333/lobe-tfjs-predict




<code>
$("#start-button").click(function(){
  loadModel() ;
  startWebcam();
});


//ページロード時に実行されるイベントハンドラーを登録
window.onload =  function() {
  //ボタン（btn）クリック時に実行されるイベントハンドラーを登録
  document.getElementById('start-button').onclick =  function(){
    loadModel() ;
    startWebcam();
    }
  }
</code>

https://github.com/PonDad/manatee/blob/master/1_sign_language_digits_classification-master/nodejs/static/index.html

===== tfjsExample.tsを読んでみる =====

https://github.com/adash333/lobe-parcel/blob/main/src/model/example/tfjsExample.ts


https://jsprimer.net/use-case/nodecli/argument-parse/
コマンドライン引数を処理する

<code>
const args = process.argv.slice(2);
</code>
process.argvは、文字列の配列。1番目と2番目の要素は常にnodeコマンドと実行されたスクリプトのファイルパスになる。アプリケーションがコマンドライン引数として使うのは、3番目以降の要素となる。
process.argv配列を使えばコマンドライン引数を取得できる。

slice()関数
→文字列または配列の一部分だけ取り出すメソッド。
→(配列).slice(2) で、配列の3番目以降を取り出すことになる。

https://www.sejuku.net/blog/25488
【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ
2019/4/25





===== スマホアプリSpck editor =====

https://spck-code-editor.readthedocs.io/en/latest/editor-settings/


===== 見出し =====
[[tensorflow.js:index.html|TensorFlow.jsトップページ]]