自炊男子、【レシピ見つけられない問題】をAIで解決する

## レシピ見つからない
素敵なお店にて「これ美味しい。作りたい。」
<img width="500" alt="DSC00011.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/5069c811-78f0-03c9-c297-fa5268f9de0c.jpeg">

「でも、どう調べれば出てくるんだ」
「ミートソースパスタで調べるか」
と検索すると、レシピがとんでもない数ヒットする。
Youtube動画とかで調べても、上から下までずらっと出てくる。
それに、動画は完成までスキップしないとお目当てのものが作れるか分からない。
みたいなことがあります。

ならば、見た目（ビジュアル）からレシピが見つかったら便利ではないでしょうか？

ということで、アプリ、お試しで作ってみました。
※1今回は、私自身が作るのも食べるのもパスタが好きということで、パスタ専用になってます。
※2自炊男子ってタイトルにしちゃいましたが、そりゃもちろん誰でも使えます。

## 宣伝
実は、このアプリを作る企画をクラウドファンディングで挑戦しておりまして、宣伝させて頂きます。
この記事投稿の翌日2022/7/21(木)終了と終わり間近です！

https://camp-fire.jp/projects/view/603551

## デモ

https://twitter.com/longtail6666/status/1545768830957670405

https://twitter.com/longtail6666/status/1546830779040567297

## 環境等
<dt>環境</dt>
<dd>Heroku環境上でNode-REDを使用</dd>
<dt>使用ツール</dt>
<dd>ffmpeg</dd>
<dd>Teachable Machine</dd>
<dd>LINEmessagingAPI</dd>

## コンセプト
* 料理の見た目（ビジュアル）からレシピ動画を見つけたい
⇒AI（機械学習）で見つけてみます。

* なるべく簡単に使いたい
⇒LINE BotとかだとLINE自体使い慣れているだろうと思い、LINEBotで作ることにしました。

## 仕組みイメージ
動画中の完成している箇所を、パラパラ漫画かのように画像で切り出していって、AIで学ばせることにします。
これで、必要な学習データを大量に収集します。

<img width="500" alt="image.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/186b1f25-11f7-cdb8-fc3e-58fca2d96ba6.jpeg">


## 面白さと可能性
Youtuberという職種が現れてからというもの、レシピ動画が大量に出回っています。
ということは、学習させる素材も大量に出回っているということです。
（一応理論的には）Youtube動画レシピの数だけの料理を網羅することが出来るのです！
<img width="500" alt="image2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/76dc2283-6c3d-d69c-a294-ec76cf393309.jpeg">


## 1.機械学習の素材集め
### 1-1.ひとまずYoutube動画を見繕う
動画は、各々のイチオシの動画にしましょう。
私は、お好みのミートソースとペペロンチーノの動画にしました。
（Youtubeの中でも、出来上がりのインサートを撮らない人が意外に多くて、学習できそうなものが集まらなかったりします）

### 1-2.ffmpeg
ffmepgを使用して、動画の指定した箇所を切り出します。
参考リンク

https://fukatsu.tech/windows-ffmpeg

https://qiita.com/cha84rakanal/items/e84fe4eb6fbe2ae13fd8

https://nico-lab.net/cutting_ffmpeg/

そして、パラパラ漫画かのように切り出します。
これで、学習素材を集めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/cc35db36-600b-5a02-3b47-8daa211ae478.png)

参考リンク

https://qiita.com/livlea/items/a94df4667c0eb37d859f

## 2.Teachable Machine
### 2-1.使い方
これは以前にも何度か使ったことがありました。

参考

https://mekurun.com/tips/teachablemachine/

↓過去記事↓

https://qiita.com/long66tail/items/5a91304007cfa383fdb6


### 2-2.学習させる
今回はデモ用にミートソースとペペロンチーノを学習させています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/33757346-63e2-0f79-fe66-badf7662e801.png)


本来の課題解決的には、ミートソースも何種類も学習させて、ミートソースの中でも”最も見た目の近い”レシピを出すことをしたいと思っています。


## 3.node-red
LINE Bot自体のアカウント発行や作り方はお調べください。
### 3-1.http in ノード
画像を受け取るところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/81f334d7-e5e2-8823-ea2b-00cbc27edea3.png)

### 3-2.function ノード
画像の情報を受け取る。
~~~JavaScript
const messageID = msg.payload.events[0].message.id;
const replyToken = msg.payload.events[0].replyToken;

msg.messageID = messageID;
msg.replyToken = replyToken;

return msg;
~~~

### 3-3.http requestノード
画像の情報を受け取る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/b58e56e6-6801-2b49-6eb2-f44fd12ef38f.png)

### 3-4.Teachable Machine ノード
事前に学習させた内容で判定をさせる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607557/e8cedde1-3f08-4861-7865-15c374625c6a.png)

### 3-5.function ノード(名前 :フレーバーテキスト) 
返却された結果別に、今回は愚直にif文で分けてYoutubeの動画リンクを表示させている。
上述したように、ミートソースにバリエーションを持たせる場合には、クラス名別に判定処理を作るなどすれば良い。

~~~JavaScript
const className = msg.payload[0].class;
const scoreName = msg.payload[0].score*100;
const scoreName2 = scoreName.toPrecision(4);
msg.payload = {};
if (className === "meatsauce") {
    msg.payload.events = [
        {
            "type": "message",
            "replyToken": msg.replyToken,
            "message": {
                "type": "text",
                "text": `これは【ミートソース】です。\n最も見た目が近いレシピはこちら。\nhttps://youtu.be/odeHYj-0rE4`
                }
        }
        ];
} else if (className === "peperoncino"){
    msg.payload.events = [
        {
            "type": "message",
            "replyToken": msg.replyToken,
            "message": {
                "type": "text",
                "text": `これは【ペペロンチーノ】です。\n最も見た目が近いレシピはこちら。\nhttps://youtu.be/iwYdeq-g4Bk`
                }
        }
        ];
}
return msg;
~~~


これで、レシピ動画を見た目から検索するアプリ（LINE Bot）の完成



## 精度はまだイマイチ
学習素材の選定が悪いと思われ、精度は高いとは言えない状況になっている。
色々と試してみる必要はあるけど、今は、結果のブレも楽しむくらいのつもりで使うのが良いかも。

## 作れたけどちょっと残念な話
私はYoutube動画を見て学習素材を集めているので、レシピを何となく覚えてしまっていて、アプリ使わなそうなんですよね。

あと、食べる前に（せめて、ひと口食べた後くらい）で写真を撮る必要があります。
普段から撮影するクセがある人はいいけど、「あ～おいしかった」って思う頃には、このアプリは使えないという。無念。
でも、テレビで紹介している「このパスタ美味しそう！」みたいなときに写真を撮っておけば、使えるということもあります。
工夫すれば色々使える場面がありそうです。