TensorFlow.jsトップページ

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

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

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

Microsoftの機械学習アプリLobe(beta版)でリンゴとみかんを分類するWEBアプリ作成を試してみる（11）Parcelを用いてローカルサーバでpredict

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

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

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

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

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

https://spck.io/

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);

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

https://adash333.github.io/lobe-tfjs-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にインポートする

1. モデルファイルを用意(model.jsonとgroup1-shard1of5など)
2. yarn add @tensorflow/tfjsまたはnpm install @tensorflow/tfjs
3. 以下のコードでpredict

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));

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

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

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

//変更前
// 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();

オリジナルコード
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

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


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

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

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

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

const args = process.argv.slice(2);

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

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

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

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

TensorFlow.jsトップページ