21
14

More than 1 year has passed since last update.

フロントエンドで完結するまったくサーバーを使わないアイドル判定サービスを作った

Last updated at Posted at 2023-02-22

なぜ作ろうと思ったのか

  1. 最近アイドル多くない?
    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 などなど
  2. 誰が誰か分からんのだが…
  3. Shazam的な感じでパッと誰か分かるもの欲しいなぁ

ということで作ってみることにしました。

作ったもの

  • アイドル判定AI「セレン」という写真を選択するとどのアイドルかを判定してくれるサービスを作りました。
    • セレンは、celeb+funから考えた名前です
  • ChatGPTやLINEでボットとの会話をするのに抵抗感が薄れていると考えたので、このサービスもチャットベースになっています
  • 写真はサーバーサイドやS3等のオンラインストレージへのアップロードは行わず、フロントエンドでのみ利用しています

ちなみに、このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
https://indie-dev.mof-mof.co.jp

技術的な話

技術スタック

サービス周り

  • 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人しか判定出来ません。(そして精度は低いです…)

色々なアイドルを判定できるようにしたい気持ちはあるんですが、手動で分類するのが大変すぎて手が回っていません…
何か良い方法があれば教えてください。

まとめ

ということで、個人開発したサービスの紹介でした。
もしよかったら使ってみてください。
フィードバックなどもお待ちしております。

21
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
14