ゴールデンウィークに旬のゴールドキウイで画面もゴールドにする #JavaScript

ゴールドキウイが旬で美味しい

５月のゴールデンウィークの時期は、ニュージーランド産のゴールドキウイが非常に美味しい時期となります。

私は小売業に従事しており、特に配属は農産、野菜・果実を販売する部門だったこともあり、毎年この時期にはキウイフルーツやマンゴーなど輸入果実を売り込むイメージが強いです。

数日前GWアドベントカレンダーなるものの存在を知り、せっかくなのでゴールドを絡めて何か作れないかと考えました。

投稿したアドベントカレンダーはこちら

画面もゴールドにして３倍豪華

ゴールデンウィークにゴールドキウイということで、さらに画面もゴールドにすれば、豪華感が３倍になるのではないかと考え、実行してみました。以下の動画をご覧ください。

webカメラにゴールドキウイが映ると、画面がゴールドになります。
せっかくなので、グリーンキウイが映ったら、画面がグリーンになるようにもしてみました。

実行環境

macOS Big Sur version 11.6.5
Google Chrome

ブラウザ固有のものは特に使っていないので、再現性は高いと思います。

ライブラリ・ツール

デバイス

ニュージーランド産　サンゴールドキウイ（大玉） 2個
ニュージーランド産　グリーンキウイ 2個

画像認識の過程

それぞれのキウイより片方を学習データ用、もう一方をテストデータ用として、学習と検証を実施しています。
実際の使用場面でも手に持った状態で判定することを想定して、あえて手に持ったままの画像を学習データに用いています。
どちらのキウイも映っていない状態は、適当にwebカメラで部屋を撮影しました。

正解率、適合率、再現率、全て100%です。

厳密な機械学習ではないので、ネタとして捉えてください。

サンプルコード

冒頭にも書いたこちらのページに関して、HTMLとJavaScriptをGoogle Chromeの検証ツールで編集しています。

html 122.html

  </footer>
  <video id="webcam" width="320" height="240" muted autoplay playsinline></video>
　　　　<!--コード末尾footerとbodyの間にビデオ画面を挿入-->
</body>

javascript app.js

//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.