こんにちは！こんばんは
地方で商業施設を管理するtsumeです。
前回Glideを使って味を占めたので、またまたスマホを仕事用便利ツールに改造しようと目論みました。
今回は備品管理のお助けツールとして機械学習（以下ML）ツールであるTeachable Machineに目を付けました。
前回Glideを使って業務改善にトライしてみたお話
新たに思いついたこと
商業施設では、常にさまざまな備品を管理、使用しています。
例えばソファやテーブルなどの家具です。
広い館内でこれらを管理するのはなかなか骨が折れるもので。。
- 広い館内でどこに・なにが・どれだけ存在するかの把握が大変
- イベントや館内状況により、備品の配置が知らないうちによく変わる
- 使用した後に正しい場所へ戻されない（保管場所を忘れがち）
- 整理整頓がモットーなtsumeにとって鬼ストレス👹
といった具合です。
備品をカメラに映したら、個数・保管場所を教えてくれる機能をスマホに持たせたい！
使用ツール
Teachable MachineCodePen-
ChatGPT(GPT-4o.)
全体像
①Teachable Machineで備品の画像を撮影する
②撮影した画像をAIに学習させ、画像識別モデルを作成する
③CodePenへできあがったモデルのURLを実装する
④ChatGPTを使用してHTML・JSコードを生成し、スマホで実用できる仕様に調整する
⑤CodePenをスマホで使用し、備品を識別する
今回はCodePenで識別結果が確認できることをゴールとしました。
CodePenを選んだ理由
- Googleとのアカウント連携ですぐに使用できる
- UIがシンプルで初心者でも使用しやすい
- エラー箇所を表示してくれるのでデバッグがしやすい
- コーディングからスマホでの使用まで
CodePen一つで完結できる
完成品
制作過程
１.Teachable Machineで学習させたいことを選ぶ
備品の形状をもとに備品を識別するため、Teachable Machineに画像データを学習させていきます。
Teachable MachineのUIはシンプルです。
画像、音声、ポーズの３種類からプロジェクトを選択できます。
２.学習させてみる
画像の学習モデルは、あらかじめ学習した画像データを基に識別を行うため、識別させたい備品の数だけクラス（備品の種類）を作成していきます。
画像データについて今回は、PCの内カメラで読み込ませやすいように、あらかじめ撮影・プリントアウトしておいた写真を使用しました（それぞれ数種類の角度を用意）。
Class:備品の名称を入力します
ウェブカメラ：画像を内カメラで連写しアップロードします
アップロード：フォルダにある画像からアップロードします
備品の名称・保管場所・在庫を知りたいので、名称_保管場所：〇〇（在庫）という形で、４つクラスを作成しました。１つ以上クラスを作成すると、次のステップであるモデルをトレーニングするが可能になります。
Classは最初の設定が肝心！
ここで時間を使ってしまった点が一つ。Classで設定した名称（ラベル）は、後に別のwebサービスと連携してから変更しても反映されない模様。。CodePenを使用した場合は、連携後に名称変更・再度読み込みしても反映されず、結局モデルを作り直す羽目になりました（URLに紐づいているから？）。
学習中。。。🤖
３.学習できた！
学習が完了すると、次のステップであるプレビューで結果が確認できます。カメラに映った長机をしっかり識別できています。要領がよくてうらやましい。。
モデルをエクスポートするからアップロードを行うと、共有リンクとコードが発行されます。ここでそれぞれをコピーしておきます。
4.CodePenを開く
できあがったモデルを実際に使えるようにするため、CodePenへ連携します。新たに作成する場合はPenを選択し、コーディングをしてきます。
参考にできるペンが豊富
CodePenは他のユーザが作成したコードも公開されています。Search CodePenで検索し、コードの書き方を参考にすることができます。また、Add to Pinsでピン留めすることもできます。
CodePenのペンは３つの領域で構成されています。
- HTML
- 「骨組み」を作るための言語です。文章や画像、リンクなどの要素をページ内へ配置するために使います。
- CSS
- 「骨組み」に「皮膚」をつけるための言語です。色やフォント、レイアウトやサイズなど、見た目を整えるために使います。
- JS (JavaScript)
- 実際に「動き」や「機能」を加えるための言語です。操作に応じてページを変化させたり、動作を実行させるために使います。
画像左上のUntitledは、ペンの名称を入力し保存します。
５.CodePenへ実装してみる
ここからはChatGPTに活躍してもらいます。いずれのコードもChatGPTに生成してもらい、各領域にコピペしていきます。
すぐに会議イスや丸テーブルを識別して結果を返すことができました！
６.実用レべルに仕上げる
モデルを基に識別することができましたが、一つ重要な問題が。。
それは 「内カメラで実用できるのか」 というところにあります。
Teachable Machineでは内カメラを使用してモデルを作成しているため、プロンプトを工夫しないとChatGPTは内カメラで機能するコードを生成します。
最終的なコードはコチラ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<h1>見出し</h1>
<video id="webcam" autoplay playsinline width="430" height="320"></video>
<p id="result">Loading model...</p>
</body>
</html>
let classifier;
let video;
const modelURL = 'Teachable MachineのモデルURL';
// Load the Teachable Machine model
async function loadModel() {
classifier = await ml5.imageClassifier(modelURL + 'model.json');
document.getElementById('result').innerText = 'Model loaded';
}
// Setup the webcam with the rear camera
async function setupWebcam() {
video = document.getElementById('webcam');
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: { exact: 'environment' } } // Use the rear camera
});
video.srcObject = stream;
} catch (err) {
console.error('Error accessing the webcam:', err);
}
}
// Make a classification
async function classifyVideo() {
const results = await classifier.classify(video);
document.getElementById('result').innerText = `Label: ${results[0].label} Confidence: ${results[0].confidence.toFixed(4)}`;
// Send the classification result using Axios
axios.post('https://your-server-endpoint.com/classification', {
label: results[0].label,
confidence: results[0].confidence
}).then(response => {
console.log('Result sent successfully:', response.data);
}).catch(error => {
console.error('Error sending result:', error);
});
// Repeat classification
classifyVideo();
}
// Initialize everything
async function init() {
await setupWebcam();
await loadModel();
classifyVideo();
}
// Start the process
window.onload = init;
上記のプロンプト
数回の思考錯誤の末、「最初に生成したJSコードを原型に外カメラで分類」という条件を追加したプロンプトが正しい道を示してくれました。
苦労エピソード
最終的にイメージ通りの働きをするJSコードを導くことができましたが、今回もChatGPTの出力揺れやハルシネーションに少し付き合う結果となりました。
-
外カメラが機能するが、識別モデルが表示されない
-
外カメラが機能するが、識別モデルがロード中から進まない
-
外カメラが機能するが、識別の過程でエラーが発生する
30分以上も格闘することとなりましたが、ChatGPTに原因を聞きつつ、JSコードを見比べて原因を特定することができました（５つ以上考えられる原因を提示してくれるので、素人のtsumeが特定するのは大変）。
推測ですが、Setup the webcamのカメラを起動する順序と、外カメラを指定する際の表現によって、モデルがうまく働くかが変わってくるようです。
画像では分かりにくいですが外カメラが機能し、画像識別モデルも機能しています（ほうじ茶ラテを会議イスと識別しているのはご愛嬌👶）。
７.実際に使ってみた
スマホからCodePenを使用し、実際に備品を識別できるか使ってみました。今回は実際にカメラで識別している様子と結果を、職場の仲間に端から観察してもらいました。
ポジティブな感想
- 同じような備品がいくつかあるので、これならうろ覚えでも間違えて遠くまで重いものを持って行くこともない
- データや紙のように「情報を探す」手間がないのはよい
- アイデア次第でもっと実用的にできそう
改善要望
- 普通のカメラ機能だけで使えないのか？ちょっと面倒
CodePenを使用したのは撮影する手間を省くこともありましたが、手慣れたツールで使いたいというニーズも得られました。LINE Botを使用して、撮影した写真を基に結果を返してもらえば、誰でも使えて、スプレッドシートからもより詳細で正確な情報を得ることができます。
個人的にはもう一段階レベルアップさせて、識別結果をさらに別のシステムへ連携する機能を持たせたいです。
Teachable Machineを使ってみて
MLを使用した制作は初めてのトライでしたが、Teachable MachineはUIや機能がシンプルなこともあり、20分もかからずに簡単な画像識別モデルを作成することができました。
有形資産や人流の多い商業施設では、画像やポーズなどのデータに基づいたMLはよりたくさんの使い道がありそうだなと感じます。
また、今回は実際に形のある備品にフォーカスしましたが、他のユーザ作品を拝見すると、音声認識モデルを使用した複数外国言語の識別や、ポーズ認識モデルを使った顔・姿勢識別などを実装している例もありました。
MLと生成AIにほとんどの作業をしてもらった感覚ですが、この「AIならではのスマートさを使いこなすスマートさ」が大切だなーとしみじみするトライでした。