今回作成したもの
先日、保育園の帰りに他の子の着替えが荷物に入っていました。
名前が書いてあったので、その子に返しましたが、
大人になって名前書くこと減ったなーと感じました。
今回は忘れ物があったときに誰のものかわかるツールとして、
Teachable Machineを使って機械学習をさせて、物の判定を作りました。
忘れ物ツールとしてあらかじめ機械学習したものをカメラに向けると誰の何か教えてくれます！
今回は
・横山の派手な眼鏡ケース
or
・田中のセンス良い扇子
上記アイテムを判定してくれています。
会社の備品などはテプラとかを使って所有者を記載しているかと思いますが、
私物であったり、名前が付けれないものを登録できます！
使用したツール
作成方法
Teachable Machineの作成方法
①Teachable Machine：https://teachablemachine.withgoogle.com/
上記を開き画像プロジェクトを作成する。
②クラス(物の名前）を書く 例：田中のセンス良い扇子
③ウェブカメラから長押しして録画で対象物を覚えさせる！
(100枚ぐらい録画したらいいかな？)
終わったらモデルをトレーニングして機械学習開始！
そしたら完成！！
かなり簡単ですね、、、
④ドライブに保存する
メニューのドライブにプロジェクトを保存を押す。
④共有リンクを取得する
プレビューだけでも判定してくれるので、それでもいいですが、
Webアプリに組み込むことができます。
モデルをエクスポートする⇒モデルをアップロードを押し、
共有可能なリンクをコピーします。
次項目で、今回はCodePenを使いWebアプリ化してみましょう！
CodePenのコードサンプル
今回はコードサンプルを用意しました。
CodePen：https://codepen.io/pen/
を開き、下記コードを貼ってください。
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>
CSS
#webcam {
transform: scaleX(-1);
}
JavaScript
let classifier;
let video;
const modelURL = '●●●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
async function setupWebcam() {
video = document.getElementById('webcam');
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
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;
先ほどコピーした共有可能なリンクを赤網掛部分に貼って完成！！
今後の発展性
機械学習としてTeachable Machineを作りましたが、意外と簡単でした。
店頭の品切れ判定をして、品切れ判定をすると通知するなど、
かなり使える技術だと感じました。
Teachable Machineでは音声、ポーズなどの判定もあるようなので勉強していきたいと思います。