差分

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

--- tensorflow.js:01._ml5.js [2020/12/27] – [その他] adash333
+++ tensorflow.js:01._ml5.js [2021/02/02] (現在) – [コーディング] adash333
@@ 行 3: / 行 3: @@
 ml5.jsは、機械学習の訓練済みモデルを簡単に利用できるJavaScriptライブラリです。TensorFlow.jsが元になっているらしいです。
+ml5.jsを用いて、画像分類をやってみたいと思います。
+===== 開発環境 =====
+<code>
+Windows10
+Chrome
+</code>
+===== 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　を以下のように変更します。
+<code>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Getting Started with ml5.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <img id="img" width="100%" src="src/cat.jpg" />
+    <script src="src/index.js"></script>
+  </body>
+</html>
+</code>
+{{:tensorflow.js:pasted:20210202-074359.png}}
+src/index.js　を以下のように変更します。
+<code>
+</code>
+しかし、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}}
@@ 行 29: / 行 113: @@
 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