ハッカソンでAI×おすすめレシピ提案のアプリを開発した

はじめに

私は情報系学科に所属する大学生です。
今回は私が所属している、京大プログラミングサークル5スキップ のメンバー3名で(もう1名の先輩もメンターとしてサポートしてくださいました)2024年4月の技育ハッカソンに出場しました。

作ったアプリ

開発背景

私以外のメンバー2名が1人暮らしをしているという会話になり、2人が「毎日ごはんのレシピを決めるのに結構悩む」ということを言っていました。私は実家暮らしですが、たまに料理をしようと思い立つ時があります。ただ、パッと作りたいレシピが決まらずに結局作らずに終わってしまうことがよくあったので、2人の意見には共感ができました。
そこで、レシピをすぐに決められるようなアプリを開発しようということになりました。

アイデア

・簡単な質問を用意してそれに答えてもらい、結果からレシピを提案する => レシピの提案にAIによる推論を用いる
・レシピの取得にクックパッドを使用する予定だったがAPIが公開されていなかった => APIが公開されている楽天レシピを使用
・たくさんのレシピを提案するとアプリを作る意味がなく、1つのレシピのみを提案するとユーザーの自由度が下がってしまう => 質問の回答に合うレシピを上位3位まで表示するように設定
・料理中に材料や手順確認のためにスマートフォンを触る回数を少なくしたい

ハッカソン期間内での役割

私：サーバーサイド、フロントエンドの一部
メンバー1名：フロントエンド、デザイン構想
もう1名：推論AI、サーバーサイドとフロントエンドの開発サポート

アプリの概要

開発期間

キックオフから発表日までの1週間(現在デプロイしているアプリはハッカソン後に私が実装したものなので、実際の開発期間は約3,4ヵ月程度)

想定した対象

・生活が忙しく、食べるものがいつも同じになってしまう社会人や学生
・作るレシピをなかなか選べない優柔不断な人
・普段は選ばないようなレシピに挑戦してみたい人

特徴

・提示された質問に回答するとAIによってレシピが3つ提案される
・質問の内容は時短orじっくり、気分がいいor落ち込んでいるor疲れている、次の日の予定の有無などバリエーションを豊かに
・3つのうちから好きなレシピを選択すると材料や作り方が表示されるため、すぐに料理作りに取り組める
・材料、手順の確認はそれぞれ1つのページ上だけで行うことができる

機能

ログイン機能
jwtトークンによる認証
質問回答機能
提示された質問にユーザーが答えていく
レシピの材料・手順表示機能
ユーザーが選択したレシピの材料や手順が表示される
材料->手順は1タップで移動可能
料理の写真登録機能
自分が作った料理の写真をアップロードでき、後から見返すことができる
調理履歴閲覧機能
過去に作成した料理のレシピや写真を確認できる

デザインアーキテクチャ

技術スタック・アーキテクチャ

フロントエンド(TypeScript+Next.js)

フロントエンドはNext.jsフレームワークとTailwindCSSを用いてスタイリングを行いました。
ログイン状態の管理にはJotaiライブラリを用いています。
サーバーサイドAPIとの通信にはaxiosを用いました。
デプロイはVercelで行いました。

サーバーサイド(Go+Docker)

バックエンドはGoとEchoフレームワークを用いて、ユーザーテーブルや料理テーブルのCRUD操作、非同期通信、APIエンドポイントなどの設定を構築しました。
DockerコンテナのデプロイはRenderで行いました。

サーバー用データベース(PostgreSQL)

データベースは、リレーショナルデータベースであるPostgreSQLを使用しました。Supabaseでホスティングをしています。ユーザーテーブル、料理テーブルの構造を下記に示します。

推論AI(Python+FastAPI+GCP)

私は実装には関わっていないので詳細な実装に関する説明は省略しますが、処理の流れとしてユーザーの回答を受け取ったら事前に用意しているプロンプトと回答内容がGeminiへ送られ、GeminiがRakutenレシピAPIから全レシピを取得しその中から回答内容に合うレシピを3つ推測&選択して返すようになっています。
デプロイはGCPのCloud runで行いました。

推論用データベース(Redis)

上記と同様に具体的な内容は省略しますが、upstashでホスティングしています。

難しかったこと

性別や年代など誰に向けたアプリなのか、どのような課題があるか、どのようにして課題を解決するかなどをしっかりと固められていなかった
開発計画が甘く、フロントエンド開発に遅れが生じた
終盤まではそれぞれ別の領域の開発を担当していたため、フロントエンドのサポートを行う際に、プログラムを理解するのに時間を要した

終わりに

ハッカソン期間内にはフロントエンド画面をすべて完成させることはできませんでしたが、ある程度納得のいく作品を作ることができたと思います。

ハッカソン終了後

・残っていたフロントエンドの実装を全て完了させた
・フロントエンド、サーバーサイドのデプロイ
・フロントエンドのデザイン修正(途中)
・実装が甘くなっていたログイン処理の部分(フロントエンド、サーバーサイド)を完了させた
・AI推論のデプロイ
・サーバーサイドのCICD環境構築

ソースコード

フロントエンド：
https://github.com/hato72/CookMeet
サーバーサイド：
https://github.com/hato72/go_backend_hackathon
推論AI：
https://github.com/hato72/cookmeet-recommend-recipes