![見出し画像](https://assets.st-note.com/production/uploads/images/103539495/rectangle_large_type_2_bbfbb6ab6b5148f4ac3dc921db8c4445.png?width=800)
機械学習を駆使した超絶モダンなWebサービスを構築しました(嘘は言っていない)
これは、任意の名前(ただしカタカナ 6 文字以内)を入力すると、家庭用ゲームソフト「ファイアーエムブレム」に出てくる成長率っぽい数字を推定してくれる Web アプリです。
この成長率っぽい数字は、診断メーカーみたいにランダムな数字を出しているだけではなく、ゲームから学習されたアルゴリズムを用いて計算されています。
最近、有能な助手を手に入れたこともあり、アプリとしての有効性とかは置いといて、可能な限りモダンなフレームワークでこれを構築したいと思いました。以下が結果になります。
サービス構成図
![](https://assets.st-note.com/img/1682002876503-hYfsFEAz67.png?width=800)
フロントエンドとバックエンドを完全に分離してモダンな感じにしました。
フロントエンド
フロントエンドは React で実装しました。機能としては、名前を入力したらレーダーチャートもしくはバーチャートを返すだけなので、ChatGPT に聞いたらすぐに実装してくれました。それなりにインタラクティブな見た目になったと思います。
開発環境の管理は GitHub で行って、ホスティングは Vercel で行いました。React プロジェクトのリポジトリを連携したら秒でデプロイしてくれたので助かりました。また、独自ドメインの適用もすぐにできました。
バックエンド
バックエンドは AWS で統一しました。まず、プラットフォームとして EC2 のインスタンスを立てて、それを Web サーバー化することにしました。
Web サーバー化には FastAPI を用いました。開発環境の管理は Docker で行い、インスタンス上で Docker をビルドすることにより環境構築を行いました。
名前から成長率を推定するアルゴリズムがサービスのキモになりますが、これには、再帰的ネットワークの一種であるLSTMを用いて、成長率(ついでに性別)を推定するネットワークを学習しました。機械学習のフレームワークには PyTorch を用いました。この辺りの技術的な詳細はこの記事にまとめています。
以上でEC2 を API サーバー化することはできましたが、このままだとサーバー側が http となり、https であるフロントエンドと通信ができなくなってしまうので、API Gateway を介して https 化しました。
これにより、バックエンドサービスが完成しました。
感想
例えば、使い慣れている Heroku なら瞬時に公開できるサービスですが、せっかく ChatGPT 君がいるので、たまには「勉強」のための開発も良いだろうと思い、試してみました。一人だったら多くの困難にぶつかったであろうポイントも、ChatGPT の助言のおかげでほとんどスムーズに解決できて、とても良かったです。
家庭用ゲームシリーズ「ファイアーエムブレム」は最新作「エンゲージ」が発売されたばかりです。みんなもやろう。日アサと VTuber みたいな雰囲気が苦手な人は、一つ前の作品である「風花雪月」がおすすめです。
この記事が気に入ったらサポートをしてみませんか?