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

フリーソフトのみでホームページ作成

現在位置: index.html » tensorflow.js » 01._ml5.js

トレース: • 01._ml5.js

tensorflow.js:01._ml5.js

差分

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

この比較画面へのリンク

--- tensorflow.js:01._ml5.js [2021/02/02] – [01. ml5.js] adash333
+++ tensorflow.js:01._ml5.js [2021/02/02] (現在) – [コーディング] adash333
@@ 行 10: / 行 10: @@
 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}}
 ===== 見出し =====

tensorflow.js/01._ml5.js.1612247758.txt.gz · 最終更新: 2021/02/02 by adash333