Teachable Machineの機械学習モデルをJavaScriptで利用する【JavaScript実践】
2021年12月12日
Teachable Machineで作成した機械学習モデルをJavaScriptで利用して、画像を「手」「ペン」「マグカップ」「それ以外」に判別する方法を勉強したよ、という記録です。
以下の本で勉強させていただきました。
JavaScriptでいきなり機械学習を遊び倒す本 (技術の泉シリーズ（NextPublishing）)
実際に作成したもの
本の記述に従って以下を作成しました！
◇手・ペン・マグカップを判別します
https://kokonatsu.plusnews100.com/study/20211211_study/
無骨なデザインですが、うまく機能するはずです。
（トレーニングのためのサンプル画像が少なかったので精度は低めかも）
- 選択したファイルが
- 「手」「ペン」「マグカップ」のいずれかの場合はその画像と共に「〇〇です」と表示
- 壁っぽいときは「デフォルトです」と表示
- 手・ペン・マグカップのいずれでもないとき、または組み合わせの時（ペンを持っている手など）の場合は「判別できませんでした」と表示
ちなみに画像は機械学習モデルでの予測に使用するのみでどこかにアップロードされるわけではないのでご安心ください。
作成のコツ
詳細な作成手順は本参照なのですが、復習と備忘録兼ねてどんなことをしたのか書き留めておきます。
上記の本のうち、Teachable Machineについては第2章、JavaScriptとの連携は第3章・第4章に沿っています。
| 〇機械学習モデルを作成する | Googleの無料サービスTeachable Machineを使用する |
| 〇Teachable Machineで作成したプロジェクトをファイルに書き出す | 「モデルをエクスポートする」からTensorflow.jsタブ＞アップロード＞モデルをアップロードを選び、共有可能なリンクを作成する |
| 〇JavaScriptで利用する① | scriptタグからCDN経由でJavaScriptライブラリを2種類読み込む ・Tensorflowを使用するための「tf.min.js」 ・Teachable Machineで作成されたモデルを使用するための「teachablemachine-image.min.js」 （画像認識モデル以外の場合はimgeではないライブラリも用意されているらしい） |
| 〇JavaScriptで利用する② | 先程作成したモデルの共有リンクURLを任意の変数（tmURL）として設定する →モデルとして読み込む場合はtmURLに‘model.json’を加えたもの、‘metadata.json’を加えたものを指定する。 （/model.jsonと/metadata.jsonについてはtmURLの下の方に英文で説明あり） |
| 〇JavaScriptの構成（全体） | 1.画像ファイルを選択したとき（’change’）にEventが走るように設定（→2へ） 2.Eventでは以下の3つを設定 ・機械学習モデルを読み込む ・img要素を生成→表示→画像ファイルをメモリから解放・機械学習モデルで画像を認識・予測（→3へ） 3.機械学習モデルの認識予測 （＋結果の表示） |
| 〇JavaScriptの構成（2の詳細） | ・機械学習モデルを読み込んだものをmodelとしてセット（tmURLに ‘model.json’を加えたもの、’metadata.json’を加えたもの を読み込む） ・img要素を生成して、createObjectURLで作成したfiles[0]のURLをセットしておく →画像の読み込みが完了したら先程セットしたimg要素を事前に準備したdiv内にappendChildする。 →画像を表示したらURLは用済みなのでrevokeObjectURLしておく ・別関数（→3）で画像を機械学習モデルで認識させ、結果を表示する |
| 〇JavaScriptの構成（3の詳細） | ・まず画像をmodel.predict()で読み込む（prediction） →手／ペン／マグカップの予測（％）がprediction[0][1][2]として生成→それぞれについてfor構文でclassNameとprobabilityを取得して、 probabilityが既定値以上の場合に「これは〇〇です」と表示するようにする。 |
調整した箇所
読み込み中…
実際に試してみると画像を選択してから結果が出るまでやや間があいたので、読み込み中の表示が切り替わるように少し調整しました。
読み込み中のくるくる回る画像はhttp://www.ajaxload.info/を利用。
<h1>手・ペン・マグカップを判別します</h1>
<!-- スマホの画像を読み込むためのボタン -->
<input id="btn" type="file"><br/>
<!-- 読み込み中マークを追加 -->
<div id="loading" style="display: none;">画像を読み込み中です...<img src="ajax-loader.gif" alt="loading"></div>
<br/>
<div id="imgBox"></div>
<h2 id="label"></h2>const startEvent = async () => {
//読み込み中マークを出す
let loading = document.getElementById('loading');
loading.style = "display: block";
//以下中略
//画像の読み込みが完了したときの処理
img.onload = async () =>{
//読み込み中マークを消す
loading.style = "display: none";
//以下略
}
}機械学習って初めてさわりました。面白い。
部屋の中で鍵を失くしたときに、写真を撮るとその写真から鍵を検出してくれる、みたいなのが簡単にできそうです（もうありそうですね）
おわり。