AIレシピ生成アプリをRails×Next.js×ECSで作ってみた

はじめに

webアプリケーションを久しぶりに作成したので紹介記事です。

開発アプリ概要

アプリ名: FitChef

カロリーや調理時間、使いたい食材、苦手な食材の情報をもとにAIがレシピをその場で生成します。
※塩分量、タンパク質量、食事のジャンル(和食、洋食、中華)、グルテンフリーなどの項目も追加予定

使用技術

• Backend
  • Rails 7.0.8.1(api mode)
  • Ruby 3.2.2
  • Nginx
  • Puma
  • Mysql
• Frontend
  • Next.js 14.1.0(app router)
  • React 18
  • typescript 5
• Infra
  • AWS(ECS Fargate/ECR/RDS(mysql)/ALB/Route 53/ACM/VPC)
  • Vercel
  • Docker
  • docker-compose

インフラ構成

機能一覧

• ユーザー機能
  • 新規登録
  • ログイン/ログアウト
  • パスワード再設定
  • 認証メール再送
  • ユーザー情報変更
• レシピ生成機能
  • GPT3.5を利用したレシピ生成
  • 調理時間、カロリーレンジ、使いたい食材、使いたくない食材をもとにレシピを生成
• レシピ情報
  • 一覧画面
  • 詳細画面
  • お気に入り登録

Demo

[ユーザー機能]

muiを使用した動的フロントバリデーション

[レシピ生成]

[レシピ一覧]

[レシピ詳細]

工夫点

• gpt3.5からの正常レスポンス率を上げるように、requestを調整
  • リクエストを投げて、正常なレスポンスが返って来ているかを確認するスクリプトを作成し、確率が最大になるまで調整を行なった
  • gpt4.0を利用することで精度が大幅に向上するが、gpt3.5との価格差が20倍あるため、3.5で正常率を上げる方がコスト的に優れている
  • 精度を上げる上で参考にした資料
    • https://cookbook.openai.com/articles/techniques_to_improve_reliability
• sql発行回数
  • レシピ一覧のアクセスの際に全ての情報を取得し、再読み込みされるまでフロントで情報を管理している。お気に入り追加やレシピ詳細に遷移した際も、フロントで情報を保持したものを利用することで、sqlを発行しないようにしている。

今後追加予定の機能

• レシピ作成条件の拡張
  • 食事のジャンル(和食、洋食、中華)
  • 栄養素(高タンパク質、低炭水化物)
  • その他(ベジタリアン、グルテンフリー)
• 買い物リスト
  • 買い物リスト
  • amazon freshとの連携
• ユーザー登録方法
  • amazon
  • google
  • twitter
• gpt4.0解放