🎵

ChatGPT APIを利用して演奏プログラム生成アプリを作成した話

2023/04/30に公開

Next.js

こんにちは！
@Ryo54388667です。ChatGPT API で遊んでみたので紹介します。

https://twitter.com/Ryo54388667

📌 製作物

アプリURL

演奏家の人がコンサートの際、どの曲を演奏するか考えるのを補助するアプリケーション。
叩き台を作ってくれるようなイメージです。

楽器のラジオボタンで、演奏する楽器を選択し、オプションのテキスト欄には、そのコンサートの客層に合わせた温度感を入力できるようにしました。

実際に、音楽系の大学に通っていた友達に利用してもらったフィードバックについては後日談を記事の下部に記載しました。

技術	バージョン
typescript	5.0.2
next	13.3.0
tailwindcss	^3.3.1

💡 POINT

① Chat GPT API のレスポンスを標準化

Chat GPT API を利用して、演奏プログラムのリストを生成しています。その時、Chat GPT 側でJSON形式にフォーマットして返してもらっています。

{
    fooList: [
      {
        bar: "one song",
      },
    ];
}

このようなイメージで返却してもらい、JSON.parseメソッドを利用して変換しようとするとエラーが発生しました。エラーの原因は、「\n」や「空白」が入ってしまっており、うまくパースができていませんでした。

そこで、こちらの記事を参考に標準化処理をかませてからJSONに変換するとうまくいきました！先哲の知恵！ありがたいです👏

const normalize = (content: string) => {
  return content
    .trim()
    .replaceAll(/ /g, "")
    .replaceAll(/\s/g, "")
    .replaceAll("`", "")
    .replaceAll("\n\n", "")
    .replaceAll("\n", "");
};

② レスポンスの待ち時間のローディング画面

これは今後ベストプラクティスを知りたいところです。
ChatGPT APIのレスポンスが遅すぎて、ローディング画面の工夫が必要ではないかと思いました。趣味レベルだとあまり考える必要はないかもしれませんが、実際のアプリケーションの場合、ローディングが長すぎて、ユーザーによっては不快に感じると思います。

今回、僕のアプリでは画像を左右にぶるぶると振るわせるようなテキトーなアニメーションをつけています。

Gif画像を入れたり、動画を差し込んだりして、ユーザーが離脱しないような工夫が必要だと思いました。

③ VercelのEdge Functions を利用

ローカルで動作確認を行い、「ヨシ！！(現場ネコ風)」とウキウキでVercelを利用してデプロイして、いざアプリを動かしてみるとエラー文しか出ません。。。😇

「ローカルではうまくいくんだけどなぁ。。。」って感じでした。渋々、Vercelの「Logs」タブを確認すると500エラーが返されていました。悲しみ。

原因について、端的にいうと、VercelのhobbyプランではServerless Functionのタイムアウトの制限が10sとなっており、タイムアウトになっていました。

Serverless Function Execution Timeout (Seconds)

Hobby	Pro	Enterprise
10s	60s	900s

「結局、カネを払えということか。。。💸」(Pro プランのtimeout値は60s)

世の中に、同じ課題にブチ当たっている人はいるはずだと思い、調べていると神記事を見つけました！

さすがVercel様👏
Edge Functions の利用を推奨していました！

Edge Functions have a timeout of 30 seconds and even longer when streaming, which far exceeds the timeout limit for serverless functions on Vercel’s Hobby plan. Using these can allow you to get past timeout issues when using AI APIs that take longer to respond. As an added benefit, Edge Functions are also cheaper to run.
引用:Edge Functions

これを利用すると、hobbyプランでもタイムアウト制限が30sになるようです。
さらに、利用方法も極めてシンプル！API Routesで利用するハンドラーの上部に下記のコードを記述するだけでEdge Functionsが使えるようです。

// api/handler.ts
export const config = {
  runtime: "edge",
};

このあたりを追記して、「ヨシ！！(現場ネコ風)」とウキウキでVercelを利用してデプロイして、いざアプリを動かしてみると、再びエラー文しか出ません。。。😇(2回目)

悲しみ。。
渋々、Logsタブを確認すると、「Edge Functions」の文字が出ていましたが、またしても500エラーを返していました。

原因について、端的にいうと、Edge Functionsは独自のruntimeに依存しているので、指定されたメソッドしか利用できず、それ以外のメソッドはundefindになっていました。

利用できるメソッドはこのページに書かれています。

ハンドラーで好き放題メソッドを使っていたのを、Edgeのruntimeに合わせて差し替えていきました。これでようやく本番環境でアプリが動きました🎉

後日談

音楽系の大学に通っていた友達に利用してもらい、フィードバックをもらいました。

友達 : 「ほしい曲が出てこねぇ。」

~~ 完 ~~

📌 最後に

今回、現在は実用的ではないらしいので、悲しいですが、一連の開発経験としてはやってよかったです。Edgeを意識してコードを書く経験は初めてでした！今後、ますますEdgeの利用が盛んになりそうな予感ですし、この経験を活かしていきたいです💪

また、このアプリについても、GPT-4 のAPIになったらどうなるのか試してみたいと思います。

最後まで読んでいただきありがとうございます!
気ままにつぶやいているので、気軽にフォローをお願いします！🥺
https://twitter.com/Ryo54388667