🐡

冷蔵庫の残り物から美味しいレシピをAIが提案するアプリを作った

2023/06/30に公開

はじめに

「冷蔵庫にある物で、ササッと何か作れる」というのは憧れませんか?

しかし、そうなるには経験とセンスが必要ですよね。

そんな問題を解決するために、冷蔵庫の残り物だけでレシピを提案してくれるアプリを作りました。「Frige Chef」です。

https://twitter.com/pop13031/status/1674612208091955200?s=20

使い方

冷蔵の中身をテキストフォームに入力し、「冷蔵庫をひっくり返せ!」ボタンを押します。

技術スタック

  • フロントエンド

    • React
    • TypeScript
    • Vite
    • Firebase Hosting
  • バックエンド

    • Django
    • Docker
    • Cloud Run
    • Cloud SQL
  • 外部API

    • Open API
  • CI / CD

    • GitHub Actions

UI/UXについて

一番こだわったのは、レシピの生成を表示するときに本家のchatGPT同様にテキストが一気に表示されるのではなく、少しずつ表示されるようにしたいことです。

OpenAIのストリーミングAPIを使って実現しました。

参考にしたのは以下の記事です。
https://betterprogramming.pub/openai-sse-sever-side-events-streaming-api-733b8ec32897

作業期間

作業日数は2週間です。

本業が終わった阿智に2,3時間ほど作業をするという感じでした。

一番時間がかかったのは、開発環境、CI/CDの構築です。

Docker Runは初めて使ったので結構てこずりました。

chatGPTに聞いてもなかなか解決ができなく、結局ググって解決しました。

あとがき

今回のアプリ開発では、chatGPTを使って未経験の技術でも開発ができるのかをテーマにやりました。

結果、Django、Cloud Run、Cloud SQL、Open API、GitHub Actionsなど、未経験の技術を使って開発することができました。

新しい技術に触れるのは楽しいですし、さらに新しい技術を使って開発することで、自分のスキルが上がっている実感が得られるのでよかったです。

Discussion