目をでかくして誰でもアイドルみたいになれるアプリを作った

こんにちは、[クソアプリ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app)の7日目を担当します
[Yui](https://twitter.com/yui_active)です。

皆さんは撮った写真を見て、**もう少し自分の目が大きければな〜〜〜**と思ったり、うっかり**目が半開きになっていた**という経験はありませんか？？

そんなときに使える画期的なアプリを作ったのでその紹介をします。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">〜もう目が小さいなんて言わせない〜<br><br>画像の目を自由に大きくできるアプリを作りました！<br><br>ログインやインストール不要、ブラウザで簡単！複数人の画像でも大丈夫！<br><br>自然な感じに仕上がるように頑張ったので、いいねやRTでみんなに教えてくれると嬉しいです🙏🙏🙏<a href="https://twitter.com/hashtag/eyedol?src=hash&amp;ref_src=twsrc%5Etfw">#eyedol</a><a href="https://t.co/3GPKndwvJ1">https://t.co/3GPKndwvJ1</a> <a href="https://t.co/zxOdBP3TmG">pic.twitter.com/zxOdBP3TmG</a></p>&mdash; Yui 🌒 Yuiko Ito (@yui_active) <a href="https://twitter.com/yui_active/status/1467834998351089665?ref_src=twsrc%5Etfw">December 6, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

技術的なことは以下で書いています。

https://qiita.com/yuikoito/items/eed0a9c37675be27c812


## 作ったもの

https://eyedol.vercel.app/

こちらの**Eyeドル**というネタアプリになります。
右上の目がパチパチして可愛いですね。

![スクリーンショット 2021-12-06 21.44.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/8dda02e4-504b-ef28-3fa7-74d8636d56d3.png)

## 使い方

使い方は目を大きくしたい画像をアップして、どれぐらい目を大きくしたいかを選ぶだけです。
ちなみに**「大きく」より下**にしないと、大分変になるのであまりオススメしません。笑

**「ほんの少し大きく」か「自然な感じに大きく」**を選んでもらえると大分いい感じになると思います。


![スクリーンショット 2021-12-07 11.10.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/b2d7fdce-4505-54c0-bcaa-e0a41b4b4313.png)


モナリザもまるで**アイドルみたい**にお目々がぱっちりしたり

![名称未設定 (1200 x 600 px).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/1c781f44-9ba4-e1d2-5832-d48b5d63091d.png)

もともと目が大きいこの子もこの通り。

![名称未設定 (1200 x 600 px) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/f7b963de-2f5e-b20b-0f9d-e163deda715b.png)

## 使用技術

- フロント
 - Next.js + TypeScript
 - Chakra UI

- バックエンド
 - Python
 - OpenCV
 - Amazon Rekognition

- インフラ
 - AWS

技術的な詳細は[こちらの記事](https://qiita.com/yuikoito/items/eed0a9c37675be27c812)で書いていますが、実装方法としては**Amazon Rekognition**で目がどこかを確認して、**OpenCV**で切り抜いて広げて合成して、最後に境界線をぼかすという感じの処理です。

なので、**横を向いていたり、メガネを掛けていたり**するとあまりうまく動かないと思います。

Amazon Rekognition初めて使いましたが、使いやすかったです。
ただ、**利用料が思った以上に高い**ので、アプリの右下に[Buy Me a Coffee](https://www.buymeacoffee.com/yuikoito)
のリンクを付けました。
余裕のある人はぜひ私にコーヒーを奢ってください🙏笑

同じことが、TensorFlow使ってもできそうだなと思ったので、今度はTensorFlowでもやってみようかなと思います。

できるだけ自然にするために目の位置をできるだけギリギリで切り取るように調整したことと、境界線をぼかす部分は少し苦戦しました。

フロントはいつもどおりのNext.jsとTSで組みましたが、本当に**Chakra UI**使いやすいですね。もう**Chakra UI**がない世界には戻れなくなりました。

## あとがき

実は先日[Azureハッカソン](https://mashupawards.connpass.com/event/225670/?utm_campaign=event_message_to_selected_participant&utm_source=notifications&utm_medium=email&utm_content=title_link)に出てました。

そこで↓のアプリを作ったのですが、その中で最後まで実装できなかった機能が**目デカAPI**でした。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">今回の#Azure の#ハッカソンリーグ2021 ではオンラインプリクラを作りました！<br>昨日アイデアを決めて苦手な画像処理も少しやりつつ急ピッチで頑張りました〜<br>これからちょっとUI面で気になってる部分を修正しつつ、目を大きくしたり鼻を小さくしたりする機能も入れてからリリースする予定です <a href="https://t.co/eyQnWmmGje">pic.twitter.com/eyQnWmmGje</a></p>&mdash; Yui 🌒 Yuiko Ito (@yui_active) <a href="https://twitter.com/yui_active/status/1467470729650515972?ref_src=twsrc%5Etfw">December 5, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

目デカ機能に関しては、他の人が担当してくれましたが生憎ハッカソン中に完成はしませんでした。ただ、中途半端な状態でも意外と審査員さんからの評価が良かったので、私も個人的に挑戦してみようと思って今回作りました。

Azureのハッカソンに出た次の日に**AWSで全部組む**という浮気のようなことをしてしまいましたが、決してAzureが使いにくかったわけではないんです。ただ、**M1でAzure functionsが動かない**のが致命的過ぎて。。。
M1がサポートされれば、ぜひAzureでも作りたいなと思ってるので中の人よろしくおねがいします🙏笑

~~ハッカソンで作ったオンラインプリクラ（仮）は別のバグが発覚してまだリリースはできないのですが、なんとか年内リリースはしたいなと思ってます。~~
全然年内リリース無理でした。来世に期待。


ではでは、最後まで読んでいただきありがとうございました！

良ければ去年のクソアプリも見てくださいね。

https://qiita.com/yuikoito/items/04ccc89164c6bb57b09b