Zenn
👫

ChatGPT APIを使って個人アプリを開発してみた

2023/06/10に公開
Go
TypeScript
アプリ開発
ChatGPT
tech

最近、ChatGPT APIを用いて個人アプリを開発したので、その話を書いていきたいと思います。

なにを作ったか

今回、AIデートプラン提案アプリ というアプリを開発しました。
URL: https://ai-dating-proposer.vercel.app/
Github: https://github.com/yoshiyoshiharu/ai-dating-proposer

https://twitter.com/yoshipa_dry/status/1667107203403354112?s=20
ぜひ遊んでみてください。

モチベーション

以下のモチベーションで開発を始めました。

  • 技術的なモチベーション
    • ChatGPT流行ってるから使ってみたい
    • Goを使ってなにか作りたい
    • フロントエンドのライブラリを使ってみたい
    • サーバーレスでインフラを構築してみたい
  • サービス的なモチベーション
    • 仲のいい友人たちとデートプラン提案アプリを作ろうとしていたのですが、忙しくて予定が合わず頓挫していたので、この機に作ってみようと思いました。

使用技術

フロントエンド: Typescript/Next.js
バックエンド: Go/Gin
インフラ: Vercel/Cloud Run

ざっくり機能解説

機能は大きく分けて2つです。

①スポットの提案

エリア(都道府県)からおすすめのデートスポットを提案します。
ChatGPTに「エリア内でおすすめのデートスポットを教えて」とリクエストを投げてレスポンスを表示しています。
画像表示に関しては、Bing Image Search APIを使っています。

②一日のプランの提案

提案されたスポットを一つ選んで、そのスポット周辺での一日のデートプランを提案します。
こちらも、「選択したスポット周辺で一日のデートプランを組んで」とChatGPTにリクエストを投げています。

実現方法

さて、ChatGPT APIのレスポンスをバックエンドで扱う方法に関してですが、以下の記事を参考にしました。(ありがとうございます。)
https://zenn.dev/kazuwombat/articles/5617468b97fa3f

要約すると、ChatGPTにいい感じにリクエストを投げて、JSON形式で返してもらうようにします。

ChatGPT APIによる課題

ChatGPTのレスポンスが遅い

ChatGPTが完全に出力し終えるまで、ユーザーは待つ必要があります。
当初は、プラン名に加えてその詳細まで出力していたので、40秒ほどかかっていました。

そこで、出力される文字数(トークン)によってレスポンス速度が大きく変わることに気づき、詳細は出力せずに、プラン名だけ出力するようにすると、20秒ほどに短縮することができました。
しかし、たまにプラン名だけでも長文を出力してしまい、40秒ほどかかってしまうことがあったので、
文字数制限を付与することでレスポンス速度を安定させました。
具体的には plan should be within 50 charactersという感じです。

とはいえど、20秒もかかってしまうので、ユーザーを退屈させない工夫(ローディング中にtipsを表示)もしました。

ちなみに、ストリーム出力が使用できるのであれば、リアルタイムでユーザーに出力するのもありじゃないかなぁと思っています。
また、自分は試していませんが、MicrosoftのAzure OpenAI ServiceはChatGPTよりも速いという記事を見つけたので、もしかしたら速度が改善されるかもしれません。
https://zenn.dev/microsoft/articles/openai-performance

ChatGPTのレスポンスがデコードできない

もう一つの課題点は、レスポンスがJSON形式になっておらずデコード/アンマーシャルに失敗してしまうことです。
ChatGPTのレスポンスがたまに、以下のように出力することがありました。

// ChatGPT APIからのレスポンス
[
  {
    plan: "plan1",
    detail: "plan1 detail"
  },
  {
    plan: "plan2",
    detail: "plan2 detail"
  },
  {
    plan: "plan3",
    detail: "plan3 detail"
  }, // カンマがある
]

これのどこがダメかというと、配列の最後の要素にカンマがついているところです。この文字列を直接Goで構造体にデコードするとエラーが出てしまいます。
こちらについては、ChatGPT APIに* JSON must be decodableなどの条件を付与したりしてみましたが、根本的な解決策は見つかっていません。何かいい案があれば教えてください。

ChatGPT APIからのレスポンスが不確実であることが難しいな〜と感じました。

おわりに

ChatGPT APIを用いたアプリ開発は小規模アプリならめちゃくちゃありだな〜と思いました。
AIに詳しくないエンジニアでもサクッとAIを使ったアプリを作れるのは魅力的です。

一方で、大規模アプリ というか 正確性が担保されるべきアプリでは微妙な選択肢なのかもしれません。上述のとおり、ChatGPT APIのレスポンスは不確実だからです。

この辺を考慮しつつ、使うのがいいのかなと思います。

Discussion