今回は、機械学習を使用し顔の表情から感情を読み取り、感情に合わせたアロマオイルをLINEでおすすめしてくれるアプリケーションを作成しました！
名付けて「香りリコメンドシステム」!!

制作に至った理由

私は、”香り”が好きでアロマオイルやお香、シーシャなどをよく利用しています。
そこで、自分の感情に合わせて「香り」をおすすめしてくれるサービスがあればいいなと思っていました。
ですが、なかなかそんなサービスはなく。今回はプロトタイプを作成してみようと思いました。

使用したサービス

Teachable Machine
Integromat

使用したライブラリ

ml5
axsios

機械学習

今回はTeachable Machineを利用し、”笑顔”、怒り”、”疲労”、”悲しみ”といった感情を各500枚づつ学習をさせています。

コード全文

Face-Aroma.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Face-Aroma</title>
  </head>

  <body>
    <h1>気分に合わせた香りをおススメ</h1>
    <div id="console_log"></div>
    <video id="myvideo" width="640" height="480" muted autoplay playsinline></video>


    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      // 作成したモデルのURL
      const imageModelURL = 'https://teachablemachine.withgoogle.com/models/XXXXXXX/';

      console.log = function (log) {
      document.getElementById('console_log').innerHTML = log;
      }

      async function main() {
        // カメラからの映像取得
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: true,
        });

        // IDが"myvideo"であるDOMを取得
        const video = document.getElementById('myvideo');

        // videoにカメラ映像をセット
        video.srcObject = stream;

        // 自作モデルのロード
        classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
          // ロード完了
          console.log('Model Loaded!');
        });

        // 分類処理を連続的に行う
        function onDetect(err, results) {
          if (results[0]) {
              console.log(results[0].label);
              if (results[0].label === '笑顔') {
              // storytelling 関数実行
                 face1();
              }
              if (results[0].label === '怒り') {
                face2();
              }
              if (results[0].label === '疲れ') {
                face3();
              }
              if (results[0].label === '悲しみ') {
                face3();
              }
            }
          classifier.classify(onDetect);
        }
        classifier.classify(onDetect);
      }

      // 引数に送りたいメッセージを入れる
      async function sendWebhook(message) {
      // Integromatに送る
      try {
      // 取得したIntegromatのWebhookURL
      const res = await axios.get(`https://hook.integromat.com/XXXXXXXXXXXXXXX?message=${message}`);
      console.log(res.data);
        } catch (err) {
      console.error(err);
       }
      }

      function face1(){
            sendWebhook('幸せでハッピー。そんなときのおすすめの香りは「ローズ」、「ネロリ」です！');
      }
      function face2(){    
            sendWebhook('イライラしてしまう。そんなときのおすすめの香りは「サイプレス」、「ローマンカモミール」です！');
      }
      function face3(){    
            sendWebhook('お疲れですね。そんなときのおすすめの香りは「レモン」、「ペパーミント」です！');
      }
      function face4(){
            sendWebhook('あなたは頑張っていますよ。今日のおすすめの香りは「ラベンダー」、「ローズマリー」です！');
      }
      // 実行
      main();

    </script>
  </body>
</html>

最後に

今回おすすめのアロマと判定した感情は１：１対応でLINEでい送っていましたが、各感情の中にもいくつかの候補を用意しランダムで送信するような仕組みも実装したかったです。
アップデートを図っていこうと思います！

参考記事

娘に会えない日も自分の声で絵本を読み聞かせられるようにした。機械学習入門。
コード、LINE連携など参考にさせて頂きました。