とある流通業で衣料品を販売している私。
この夏から業務の改善を目指して「デジタル」を学び始めて約１カ月となります。
9月某日 私の部署に衝撃が走りました。組織の機構改革です。
それに伴って、私の担当業務が変わります。
そこで問題が・・・
今まで担当していた 【フォーマルウェア】 と 【水着】 の大量の「売り場写真」をどうしよう・・・
店舗の売場つくりの参考資料として撮りためた売り場写真の数千枚が未整理のまま「Google Drive」のフォルダに入っています。後任に引き継ぐにしても、まずは整理が必要です。
そこで 「Teachable Machine」 で「売り場写真」を【フォーマル】と【水着】【その他】に仕分けて分類させてみることにしました。
やりたいこと
「Teachable Machine」を使用して「売り場写真」の判定
使用ツール
「Teachable Machine」
「Google Drive」
できたもの
プロセス
「Teachable Machine」で画像認識モデルの作成
１・「Teachable Machine」の準備をする
↓こちらにアクセスして
使ってみるをクリック
画像プロジェクトを選択し、標準の画像モデルを選択します。
２・クラス名を変更する
Class 1 を「フォーマル」に変更
Class 2 を「水着」に変更
３・クラスを追加
Class 3 を追加して「その他」に書き換えます。
４・画像をアップロードする
今回は写真の仕分けのため、「アップロード」を選択。
「Google Drive」から＜モデル作成用＞のサンプル写真のファイルを「フォーマル」「水着」「その他」の各Classにアップロードします。
今回は「Teachable Machine」の「機械学習」において画像の認識率を高めるため、
「フォーマル」160枚・「水着」100枚・「その他」50枚のサンプル画像を用意しました。
「その他」には「カジュアルウェア売場」「風景」「人物」「食べ物」など仕分けしたい「フォーマル」「水着」以外の要素のサンプル画像を集めています。
「Teachable Machine」で読み込む画像の拡張子はJPEG・PNG・GIF形式の画像がサポートされています。
モデル画像を読み込んたところです。
５・トレーニング
モデルをトレーニングするボタンを押します。
「画像認識モデル」完成
しばらく待つとモデルが作成されます。
動作確認
プレビューに認識させたい写真をアップロードします。
写真の下部にある「フォーマル」「水着」「その他」の＜出力バー＞で認識度を判定します。
認識確認
今回は認識しやすく「フォーマル売場」「水着売場」「その他」の3つに分けましたが、
「フォーマル売場」の認識率は約80％・「水着売場」は約60％の認識率です。
「フォーマル」は＜黒＞で比較的認識しやすく、「水着」は＜ビキニ＞など特徴がはっきりしているものは認識するものの、＜ラッシュガード＞などカジュアル要素の高いものは「その他」に分類されてしまうようです。
モデルをエクスポート→アップロードする
モデルをエクスポートボタンをクリックします。
モデルをアップロードします。
しばらくすると「クラウドモデルは最新です」と表示され、「共有可能なリンク」が表示されるのでコピーしておきます。このリンクを使用すると他のAPIやITツールとの連携が可能となります。
まとめ
今回は「Teachable Machine」を使用して、「フォーマルウェア」「水着」を中心に衣料品の「売り場写真」の画像を認識させました。
モデル作成用の売り場サンプル写真は通常の事例で使用される約3倍用意し精度向上を目指しました。
それでも「フォーマル」「水着」のようにハッキリわかる売場の認識率は高いですが、「カジュアルウェア」のように＜機械学習＞の判断基準が ＜あいまい＞ で多岐に渡る画像の認識率は振れ幅が大きくなります。
実際の業務で【アパレル売り場の画像を認識させて出来栄えを確認】のように実装する場合は、認識範囲を例えば「マネキン」や「パンツ売り場」などさらに絞って実施するか、「Teachable Machine」と「ChatGPT」などの＜生成AI＞を組み合わせて判断基準を広げる必要があると感じました。
しかし、基準がはっきりしているもの、例えばインナー売場の「カラー別陳列」や「品番別陳列」であればその可否を判断でき、「新入社員への陳列教育」や「フック掛け商品の欠品確認」など実務への活用のアイデアが広がります。
追記 写真判定による自動分類の試み
今回の目的は未整理の 数千枚 の「売り場写真」を仕分けしたいというのがきっかけです。
「Teachable Machine」で「フォーマル」と「水着」と「その他」に判定することは出来ましたが、それを目視で仕分けるのは膨大な時間がかかります。
そのため、「CodePen」と「GitHub」を使用して、自動仕分けを試みます。
「Teachable Machine」でモデルを＜エクスポート→アップロード＞した結果の「URL」とコードス二ペット「p5.js」を使用します。
使用ツール①
「GitHub」
できたもの
「GITHUB」でアプリ化を試みましたが、画像ファイルの分類でエラーがでて判定が出来ませんでした。
デバックを８回実施しましたが原因が分かりません。
エラーしたコード
</details>
<details open><summary><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teachable Machine Image Model - File Upload</title>
<style>
.progress-bar {
width: 100%;
background-color: #f3f3f3;
height: 24px;
position: relative;
margin-bottom: 10px;
}
.progress-bar div {
background-color: #4caf50;
height: 100%;
width: 0;
transition: width 0.3s;
}
</style>
</head>
<body>
<h1>Image Classification using Teachable Machine</h1>
<p>Upload an image to classify it as "フォーマル", "水着", or "その他".</p>
<input type="file" id="image-upload" accept="image/*">
<div class="progress-bar">
<div id="progress-bar-fill"></div>
</div>
<img id="uploaded-image" src="" alt="Uploaded Image" width="400px">
<p id="prediction">Prediction: Loading...</p>
<div>
<p>フォーマル: <span id="formal-output"></span></p>
<p>水着: <span id="swimwear-output"></span></p>
<p>その他: <span id="other-output"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script>
const URL = "https://teachablemachine.withgoogle.com/models/O2CXrhSLy/";
let model, maxPredictions;
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
}
async function predict() {
const imageElement = document.getElementById('uploaded-image');
const prediction = await model.predict(imageElement, false);
document.getElementById('formal-output').innerText = (prediction[0].probability * 100).toFixed(2) + "%";
document.getElementById('swimwear-output').innerText = (prediction[1].probability * 100).toFixed(2) + "%";
document.getElementById('other-output').innerText = (prediction[2].probability * 100).toFixed(2) + "%";
document.getElementById('prediction').innerText = "Prediction complete!";
}
document.getElementById('image-upload').addEventListener('change', function (event) {
const file = event.target.files[0];
const reader = new FileReader();
const imgElement = document.getElementById('uploaded-image');
const progressBar = document.getElementById('progress-bar-fill');
reader.onload = function (e) {
imgElement.src = e.target.result;
imgElement.onload = function () {
progressBar.style.width = "100%";
predict();
};
};
reader.onprogress = function (e) {
if (e.lengthComputable) {
const percentLoaded = Math.round((e.loaded / e.total) * 100);
progressBar.style.width = percentLoaded + "%";
}
};
reader.readAsDataURL(file);
});
init();
</script>
</body>
</html>
</summary>
使用ツール②
「CodePen」
できたもの１
画像ファイルのアップロードは出来るのですが、「CodePen」でも画像分類でエラーが出て判定結果が返ってきません。
「ChatGPT」を使用してこちらもデバックを10回行いましたが、最終的な「ChatGPT」の判断は以下の通りでした。
できたもの２
「CodePen」では画像をアップロードして「Teachable Machine」のモデルを出力できないのなら、インカメラを使用すればどうか？ということで、出来たのがこちらです。
これなら、「Teachable Machine」のモデルで直接分類するのと変わりません（笑）
結果と考察
「Teachable Machine」でモデルを作成するのは比較的容易ですが、その結果を出力するのは難易度が高く実装には程遠い結果となりました。
「本の表・裏」や「犬・猫」のように２つのクラスのどちらかを判定するモデルであれば良いのですが、今回のモデルのように２クラス以上あり、各クラスの判定割合が ＜あいまい＞ な場合は基準を設けてどのクラスに分類するのかを決定するプロセスを入れないと、アウトプット先のツールに繋がらず「分類エラー」となってしまうのではないかと考察します。
自動分類のためにはさらに「ITツール」についてのスキルを向上させる必要があると実感しました。
＊24/9/29追記しました。