ゴールドキウイが旬で美味しい
５月のゴールデンウィークの時期は、ニュージーランド産のゴールドキウイが非常に美味しい時期となります。
私は小売業に従事しており、特に配属は農産、野菜・果実を販売する部門だったこともあり、毎年この時期にはキウイフルーツやマンゴーなど輸入果実を売り込むイメージが強いです。
数日前GWアドベントカレンダーなるものの存在を知り、せっかくなのでゴールドを絡めて何か作れないかと考えました。
投稿したアドベントカレンダーはこちら
画面もゴールドにして３倍豪華
ゴールデンウィークにゴールドキウイということで、さらに画面もゴールドにすれば、豪華感が３倍になるのではないかと考え、実行してみました。以下の動画をご覧ください。
webカメラにゴールドキウイが映ると、画面がゴールドになります。
せっかくなので、グリーンキウイが映ったら、画面がグリーンになるようにもしてみました。
実行環境
- macOS Big Sur version 11.6.5
- Google Chrome
ブラウザ固有のものは特に使っていないので、再現性は高いと思います。
ライブラリ・ツール
デバイス
- ニュージーランド産 サンゴールドキウイ（大玉） 2個
- ニュージーランド産 グリーンキウイ 2個
画像認識の過程
それぞれのキウイより片方を学習データ用、もう一方をテストデータ用として、学習と検証を実施しています。
実際の使用場面でも手に持った状態で判定することを想定して、あえて手に持ったままの画像を学習データに用いています。
どちらのキウイも映っていない状態は、適当にwebカメラで部屋を撮影しました。
正解率、適合率、再現率、全て100%です。
厳密な機械学習ではないので、ネタとして捉えてください。
サンプルコード
冒頭にも書いたこちらのページに関して、HTMLとJavaScriptをGoogle Chromeの検証ツールで編集しています。
</footer>
<video id="webcam" width="320" height="240" muted autoplay playsinline></video>
<!--コード末尾footerとbodyの間にビデオ画面を挿入-->
</body>
//app.jsの末尾に以下のコードを挿入
// ml5.jsライブラリの挿入
(script = document.createElement('script')).src = 'https://unpkg.com/ml5@latest/dist/ml5.min.js'
document.getElementsByTagName('head')[0].appendChild(script)
console.log('success_1');//チェック用
(async function colorChange() {
const imageModelURL = 'https://teachablemachine.withgoogle.com/models/OZcdfxibS/';
const gold = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
const green = `linear-gradient(45deg, #00FF00 0%, #CCFF00 45%, #33CC66 70%, #66CC33 85%, #00CC00 90% 100%)`;
const body = document.querySelector('article');
const nav = document.querySelector('nav');
// カメラからの映像ストリーム取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
console.log('success_2');//チェック用
// 「id="webcam"」となっているパーツ（videoタグ）を取得
const video = document.getElementById('webcam');
// videoにカメラ映像ストリームをセット
video.srcObject = stream;
console.log('success_3');//チェック用
// Googleのサーバーにアップロードした自作モデルを読み込み
classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
console.log('モデルの読み込みが完了しました');
});
// 繰り返し処理
function loop() {
// 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
// 推論が完了次第 { } の中身を実行
console.log('success_4');//チェック用
classifier.classify(async (err, results) => {
if (results[0].label === 'gold'){
document.body.style.background = gold;
body.style.background = gold;
nav.style.background = gold;
} else if (results[0].label === 'green'){
document.body.style.background = green;
body.style.background = green;
nav.style.background = green;
} else{
document.body.style.background = '#d0d0d1';
body.style.background = '#FFFFFF';
nav.style.background = '#FFFFFF';
}
// 推論終了1秒後に自分の関数を実行（ループになる）
setTimeout(loop, 1000);
});
}
loop();
})();
詳細なHTML, JavaScriptの編集方法は、本記事末尾の参考記事を参照ください。
最後に
なんの役にも立たないであろう。
参考記事
- ゴールドの配色、カレンダーの色付けについて
- デベロッパーツールでの編集。今回はOverridesを使用しています。
参考：制作過程
CodePenでワンクッション入れてから実際のwebページを編集していますので、途中過程で使用したpenも共有します。
See the Pen kiwi by watanabe-tsubasa (@watanabe-tsubasa) on CodePen.