フロントエンドで完結するまったくサーバーを使わないアイドル判定サービスを作った
この記事はQiitaに投稿したものの転載記事です。
なぜ作ろうと思ったのか
- 最近アイドル多くない?
NiziU、IVE、Kep1er、BLACKPINK、ITZY、SixTONES、Snow Man、なにわ男子、King & Prince、BTS、JO1、Da-iCE、INI、CUBERS、原因は自分にある。、BALLISTIK BOYZ、VOYZ BOY、Zero PLANET、プラチナボーイズ、BE:FIRST、BUDDiiS、7ORDER、OCTPATH、BLVCKBERRY、THE SUPER FRUIT、TravisJapan などなど - 誰が誰か分からんのだが…
- Shazam的な感じでパッと誰か分かるもの欲しいなぁ
ということで作ってみることにしました。
作ったもの
- アイドル判定AI「セレン」という写真を選択するとどのアイドルかを判定してくれるサービスを作りました。
- セレンは、celeb+funから考えた名前です
- ChatGPTやLINEでボットとの会話をするのに抵抗感が薄れていると考えたので、このサービスもチャットベースになっています
- 写真はサーバーサイドやS3等のオンラインストレージへのアップロードは行わず、フロントエンドでのみ利用しています
技術的な話
技術スタック
サービス周り
- TensorFlow.js(WebAssembly)
- OpenCV.js(WebAssembly)
- Next.js(T3 Stackベース)
- TypeScript
- ESLint
- Prettier
最初はサーバーありのつもりだったのでT3 Stackを使って開発しましたが、現状使っているのはNext.js部分だけです。
機械学習周り
- Jupyter Notebook
- TensorFlow
- face_recognition
WebAssembly
TensorFlow, OpenCVがWebAssemblyのおかげでJavaScriptから実行できるようになったことで、サーバーを使うことなく実装することが出来ました。
WebAssemblyは、C、C++やRustで書かれたコードをJavaScriptから実行できるようにする技術です。
これまでは使用することが難しかった処理をWebから実行できるようになったり、JavaScriptで実装するよりも高速に処理できるようになったりします。
ただ、今後モデルデータが大きくなりすぎた場合は、サーバーサイドへ移行する可能性はあります。
その他苦労ポイントとか
全然正しく判定してくれない
記事執筆時点では、データが全然足りていないのが原因だと考えています。
1名に付き100枚用意しており、訓練用50枚、テスト用に50枚で学習してます。
改善案としては、データ元を増やすのとデータ件数を増やすが考えられます。
BTSしか判定できない
今はBTSのメンバー7人しか判定出来ません。(そして精度は低いです…)
色々なアイドルを判定できるようにしたい気持ちはあるんですが、手動で分類するのが大変すぎて手が回っていません…
何か良い方法があれば教えてください。
まとめ
ということで、個人開発したサービスの紹介でした。
もしよかったら使ってみてください。
フィードバックなどもお待ちしております。