画像判別で社内データ投稿先が瞬時に分かる！
皆様、お疲れ様です。総合小売業に勤めるデジタル初心者です。
今回は、Teachable Machineを使って画像判別ツールを作成しました。
売場で使用する「販促物」（商品やサービスの販売を促進するために使用されるアイテムやツール）の社内システム内の投稿先を値札の画像で判別してナンバーを返答するツールになります。普段の業務の中で、「あれ、どこに投稿してあったかな？」と探す時間が無駄だなと思い、作成するに至りました。実際の動作はこんな感じです。
Teachable MachineとCodePenで画像識別できました！
— minaharu (@mina_haru_32527) September 24, 2024
画像を認識して返答してくれる便利なツール！ pic.twitter.com/LC8Vyv3rJz
これでキーワード検索欄を何度も行き来しなくても済みそうです！
例えば、「新商品」と検索してもこんなに膨大な販促物データがヒットします。
ここから我々が使用する物を「目で見て」探します。急にアナログ…。
使用する物は基本的にいつも同じですが、何種類もあって覚えてられないので、
値札のデザインを識別して「投稿ナンバー」を返答するツール作成に至りました。
設定の詳細
使用したツール：Teachable Machine・CodePen・ChatGPT
① Teachable Machineを設定。（無料で使えます）
実際の画面は、こんな感じです。今回は画像プロジェクトを使用します。
★画像プロジェクトの設定詳細★
Class：今回は販促物の名称・投稿ナンバーを入力します。
ウェブカメラ：画像をウェブカメラで連写しアップロードできます。
アップロード：デバイス内の画像アップロードをできます。
・値札のデザインを連写で撮影し（約100枚程度）トレーニングを押します。
・トレーニングが完了したらプレビューで動作確認をします。
成功であれば、モデルをエクスポートします。
ここまで完了したら共有可能なリンクの 「URL」を使うのでブラウザを閉じずに
次の工程に行きましょう。
② CodePenを設定。（無料で使えます）
実際の画面はこんな感じです。「Pen」をクリックすると新規作成できます。
★CodePenの設定詳細★
 画像左上のUntitledには、このペンの名称を入力し保存します。 ■HTML：文章や画像、リンクなどの要素をページ内へ配置するために使います。 ■CSS：色やフォント、レイアウトやサイズなど、見た目を整えるために使います。 ■JS：操作に応じてページを変化させたり、動作を実行させるために使います。上記３種のコードはChatGPTに以下のように質問して回答をコピペすればOKです。
デザイン性にこだわるなら「CSS」コードについて追加で質問してみましょう。
基本的な機能は大きく変わらないので、そのままでも十分です。
※ご参考までに私が実際に作成したコードを掲載します。
■HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>販促物投稿No.を調べる</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>販促物投稿No.を調べる</h1>
<video id="webcam" autoplay playsinline width="430" height="320"></video>
<p id="result">Loading model...</p>
<script>
// アウトカメラを選択するための関数
async function setupCamera() {
const constraints = {
video: {
facingMode: { exact: "environment" } // 背面カメラを指定
}
};
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
const videoElement = document.getElementById('webcam');
videoElement.srcObject = stream;
} catch (error) {
console.error("カメラにアクセスできません: ", error);
document.getElementById('result').innerText = "カメラにアクセスできません";
}
}
// ページが読み込まれたらカメラをセットアップ
window.addEventListener('load', () => {
setupCamera();
});
</script>
</body>
</html>
この〈title〉に挟まれた部分にペンの名称を記入します。
■CSS
/* ページ全体のスタイル */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* 見出しのスタイル */
h1 {
color: #333;
}
/* Webカメラ映像のスタイル */
video, canvas {
border: 5px solid #333;
border-radius: 10px;
margin-bottom: 10px;
width: 320px;
height: 240px;
}
/* ボタンのスタイル */
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
/* 結果表示のスタイル */
#result {
font-size: 18px;
color: #333;
margin-top: 10px;
font-weight: bold;
}
■JS
let classifier;
let video;
const modelURL = 'https://teachablemachine.withgoogle.com/models/u8g05bvhxP/';
// 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;
ここに先程①の最後でコピーしたURLをペーストします。
③スマホでCodePenを検索してブラウザで開く
作成したペンがあり、使用できるようになっています。
Teachable Machineで画像認識させる際にはパソコンのインカメラを使用しておりますが、スマホではアウトカメラを使用して画像を映します。ChatGPTにコードを書いてもらう場合には、こういった詳細の記述が必要になりますので、ご注意下さい。
チームメンバーの感想
今回作成したツールを実際にメンバーに使用して頂きましたが、非常に便利な時短ツールだと好評でした。紹介した値札のデザインはごく一部ですので、今後は登録範囲を拡大し実用化に向けて取り組んでいきます。
参考記事の紹介
今回の実装は、こちらの記事を参考にしております。
非常に分かりやすく記載されていますので、ぜひご参照下さいませ。