ChatGPTに料理のレシピ・サムネイル画像を作成してもらうアプリを作ってみた


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/df75a4e9-2c6b-75ef-604b-5c95ebc46477.png" />

## はじめに

画像生成AIと、ChatGPTを組み合わせたアプリを作ってみたくて、
料理の画像＋レシピの生成Webアプリを開発しました。

:::note warn
画像生成部分のライブラリに変更があり、2023/11/24現在動いておりません。
:::

https://chatgpt-cooking-assistant.mss-rep.com

あまりデザインは凝っていません
特にレスポンシブ対応は甘いです

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/a4b1deb1-6b5e-c6db-5b2e-07a5718d4589.png" width="400" />

レスポンスは早くないですが、ご自由に遊んでください～！
(画像生成のクレジットが枯渇したら動かなくなりますが、ご容赦ください)

## 技術スタック・構成

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/e3a0ec9f-17dd-13cf-8c88-3640175d4587.png" width="400" />

vercelにデプロイしており、バックエンドにはAWS Lambdaを使っています。
prismaをlambda layerに生成して、lambdaから呼び出す形で利用しています。

## ざっくり解説

1. ChatGPTに料理のレシピを生成させる
2. ChatGPTにそのレシピを基に画像生成するためのプロンプトを生成させる
3. Dream StudioのAPIで画像を生成させています。

    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/385c71df-e5e8-aa4f-8aef-baf2bf5c3327.png" width="400" />

4. 生成したレシピ・画像・プロンプトをprismaを利用して、vercelのstorage(PostgreSQL)に保存

    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/6c10c3a6-5bbf-acf8-0445-424c498a73a6.png" width="400" />


AWS環境はaws cdkでデプロイしており、GitHub Actionsで自動デプロイを組んでいます

## Prismaとは？ 

Prismaは、Node.jsとTypeScriptのための次世代のORM（Object-Relational Mapping）ツールです。
データベースとのやりとりを抽象化し、開発者がより簡単にデータベース操作を行えるように設計されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/7d44464f-994d-e415-af94-75d92b0d75d2.png" width="400" />

RubyOnRailsで言うところのActiveRecordですね！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/3acd0463-6145-8062-f5a0-83f27789c325.png" width="400" />


### 主な特徴

#### 〇 型安全

PrismaはTypeScriptとの統合が深く、データベースのスキーマから自動的に型を生成します。これにより、コード内でのデータベース操作が型安全になります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/2072460b-0b40-f9a6-414e-985fa8c65035.png" width="400" />

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/c7330f3d-5dd1-bae1-f3b8-cb4ac65a74ac.png" width="400" />


#### 〇 Prisma Client:

自動生成されるクライアントライブラリで、データベースへのクエリを簡単に行えます。

全件取得: .findMany()

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/4f90b0df-1dd8-d510-a255-1fbefd980624.png" width="200" />

レコード作成: .create()

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/aa5d9f75-9683-5b69-8e0f-2953050bacf0.png" width="200" />

...etc
もちろん型も効いてます

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/83f20cae-6d4a-dfe7-2d52-aec24ea01b06.png" width="400" />

#### 〇 Prisma Migrate:
データベースのマイグレーションをサポートするツール。データベースのスキーマの変更を管理し、適用することができます。:

Schemaファイルを変更し、prisma migrateを実行すると、データベースのマイグレーションをすることができます。
履歴として、migrations/**/migration.sqlが作成され、中に実行SQLが記録されます

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1b5b5178-e3a7-e74d-598d-e5a7bec394d0.png" width="400" />

#### 〇 Prisma Studio:
モダンなGUIを持つデータベースエディタ。データベースの内容を直接閲覧・編集することができます。:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/335e8107-f33f-e36c-0549-54ff20dc7cc6.png" width="400" />

A5m2や、DBeaverとはおさらばだぁ！

## 最後に

意外とおいしそうでした

カレー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/0a8f260c-80f6-3ae6-dbc6-afc65f4c9e3e.png)