完成図
操作画面
目次
食品扱う人には、爪の長さに決まりがある
私は、スーパーのお惣菜コーナーで働いています。
お惣菜コーナーだけではなく、他の生鮮部門共通の衛生ルールがあります。
特に手洗いは厳しいルールがあります。
なにしろ爪の間には、多くの汚れ＆雑菌潜んでいるため、爪の長さに決まりがある所が多いです。
その中でも「爪の長さ」を出退勤時に行う荷物チェックみたいにデジタルでカメラ判断できたら、爪の抜き打ちチェックしなくても、爪を切り忘れた人を撲滅できると考えました！('◇')ゞ
カメラ判断ということで、今日は「Teachable Machine」を使って作成していきます！
使用したツール
・Teachable Machine
・Code Pen
・ChatGPT
作成手順
まずは「Teachable Machine」を立ち上げ、「使ってみる」をクリック。
新しいプロジェクトが３種類（画像、音声、ポーズ）がありますが、今回は「画像プロジェクト」を使用します。
サイト内で紹介されている「Teachable Machine」の使い方動画
https://medium.com/@warronbebster/teachable-machine-tutorial-bananameter-4bfffa765866
結果をそれぞれ別々で登録します。画像を登録後、「モデルをトレーニングする」で爪の長さの良い例＆悪い例をPCに学習をさせます。
登録は、カメラを使用＆画像の読み込み、両方できます。
登録できる数が多いほど、機械学習され、カメラ判断の性能が良くなります。
プレビューで実際にどのように画像判断されるのか確認をすることが出来ます。
「モデルをエクスポートする」をクリックし、共有可能なリンク、コードをコピーします。
CodePenを立ち上げ、コードを入力します。
HTMLのコード↓↓↓
<!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>
CSSのコード↓↓↓
#webcam {
transform: scaleX(-1);
}
JSのコード↓↓↓
let classifier;
let video;
const modelURL = 'https://teachablemachine.withgoogle.com/models/eEihD-MuZ/';
// 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 = `${results[0].label}結果: ${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;`
エラーやどんなコードを入力したらいいか分からないときは、ChatGPTに聞いてみましょう！
上記の３つのコードをメモ帳にコピペし、拡張子を「〇〇.txt」から「〇〇.html」に変更して保存。実際にクリックすると、カメラの使用許可を求められるので、「許可」しましょう。
完成してみて
CodePenのプレビューでは、いい感じにカメラ判断出来ていたけど、メモ帳にコピペしてカメラ許可したけど、「モデルを読み込んでいます...」で止まってしまった（泣）
ChatGPTに聞いても、特に問題ないようで・・。重いのかな？？
タイミング悪く周囲に生鮮部門の方がおらず、生鮮部門以外の人に使ってもらって感想をいただきました。
①PCカメラの画質が悪いから、あんまり精度良くなさそう。カメラが良かったらいいのかも。
②従業員出入口にあったら、みんな使いそう。
③生鮮以外の人の結果も出るようにして欲しい。
（私の会社では、生鮮orそれ以外で爪ルールが異なります）
皆さん忙しいなか、ご協力ありがとうございました！('ω')/
精度の問題は残るけど、いい感じに出来上がって嬉しい限りです。
爪ルールが生鮮orそれ以外で異なるから、確かにカメラ判断結果を増やした方がいいですね。
ルールから外れていないのに、不衛生と言われてしまうのは心が傷付いてしまう（泣）
今後も業務改善に繋がるものを作っていきたいです✨
最後まで読んで頂き、ありがとうございました！ 以上