Getting Started with ml5.js

====== 01. ml5.js ====== [[tensorflow.js:index.html|TensorFlow.jsトップページ]] ml5.jsは、機械学習の訓練済みモデルを簡単に利用できるJavaScriptライブラリです。TensorFlow.jsが元になっているらしいです。 ml5.jsを用いて、画像分類をやってみたいと思います。 ===== 開発環境 =====


Windows10
Chrome

===== CodeSandbox上でml5.jsを用いて画像分類 ===== -CodeSandboxで新規JavaScriptアプリを作成 -cat.jpgを用意してCodeSandboxにアップロード -コーディング ==== CodeSandboxで新規JavaScriptアプリを作成 ==== https://codesandbox.io/ で、新規JavaScriptアプリを作成 {{:tensorflow.js:pasted:20210202-071300.png}} GitHubアカウントなどでサインインします。 {{:tensorflow.js:pasted:20210202-071521.png}} GitHubアカウントのＩＤとパスワードを入力したのち、新規SandBoxを作成 {{:tensorflow.js:pasted:20210202-071704.png}} Vanilla(通常のJavaScript)を選択します。 {{:tensorflow.js:pasted:20210202-072030.png}} 以下のようになります。 {{:tensorflow.js:pasted:20210202-072237.png}} ==== cat.jpgを用意してCodeSandboxにアップロード ==== https://www.pakutaso.com/20191230358post-24834.html　から猫の写真をダウンロードして、cat.jpgという名前で保存します。 {{:tensorflow.js:pasted:20210202-072827.png}} src　のすぐ右側にマウスを持っていき、『↑』をクリックします。 {{:tensorflow.js:pasted:20210202-072938.png}} 先ほどの、cat.jpg　を選択してアップロードします。 {{:tensorflow.js:pasted:20210202-073039.png}} これで、cat.jpgがsrc/　フォルダにアップロードされました。 {{:tensorflow.js:pasted:20210202-073122.png}} ==== コーディング ==== index.html　を以下のように変更します。




  
    Getting Started with ml5.js

{{:tensorflow.js:pasted:20210202-074359.png}} src/index.js　を以下のように変更します。

しかし、CodeSandbox上では、うまく、ml5が動作しませんでした。 -ローカル環境でindex.htmlとsketch.jsを作成。cat.jpgをダウンロード -ローカル環境でpredict -GitHubにプッシュ（アップロード） -GitHub Pagesの設定でできました。参照元：https://github.com/ml5js/ml5-library/tree/main/examples/javascript/ImageClassification/ImageClassification ソースコード：https://github.com/adash333/ml5-cat デモサイト：https://adash333.github.io/ml5-cat/ {{:tensorflow.js:pasted:20210202-085231.png}} ===== 見出し ===== https://ml5js.org/ 公式サイト https://note.com/npaka/n/nab42a3a4808a ml5.js 入門 npaka 2020/08/23 10:51 https://okikata.org/altphoto/ml5js.html [やってみる]ml5.jsをやってみよう https://blog.tagbangers.co.jp/ja/2020/09/17/ml5-p5 ml5.jsで体験する機械学習 17 Sep 2020 by Shitara Daigo ===== その他 ===== https://qiita.com/Gerbera/items/165a4d026cf4999ef5b2 @Gerbera 2019年12月01日 Google の Teachable Machine を使い、コーディングなしで手軽に画像認識をしてみる https://forest.watch.impress.co.jp/docs/serial/progedu/1271729.html Google製「Teachable Machine」の機械学習で簡単に音声認識データを作る～TensorFlowの技術を「Scratch」で活用狩野さやか2020年8月20日 06:55 https://forest.watch.impress.co.jp/docs/serial/progedu/1273286.html 「Teachable Machine」で機械学習した音声認識データを使って「Scratch」でプログラミング～拡張機能「TM2Scratch」を専用の「Scratch」で狩野さやか2020年8月27日 14:49 ===== 見出し ===== [[tensorflow.js:index.html|TensorFlow.jsトップページ]]