ChatGPT API に文章のタイトルを考えてもらい、それを一覧表示する

ChatGPTを使って、文章のタイトルを考えてもらうシステム
ChatGPTに文章のタイトルをいくつか考えてもらい、そのタイトルを一覧で表示する。

手順

1. 考えてもらうための文章を準備する
2. マークダウン形式でお願いする
3. 返ってきたデータを加工する

まず、基礎となるChatGPT　APIとやりとりする大まかな方法をaxiosを使ってご紹介します・
ChatGPT APIは、modelとmessageとOpenAIで発行したKeyでやりとりすることができます。
以下の通りで出来ます。

const MODEL = "gpt-3.5-turbo"
const API_KEY = "" // OpenAIで発行したKey
const message = "" // 質問内容

  try  {
    const res = await　axios.post(`https://api.openai.com/v1/chat/completions`,　{
      model: MODEL,
      messages: [
        {
        'role': 'user',
        'content': message,
        }
      ]
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      }
    })

    const result = res.data.choices[0].message.content.trim()
    return result

  } catch(err) {
    console.error(err)
    return null
  }

一般的なaxiosの記法で行うとこができます。

今回は、axiosの使い方ではなく、返ってくるChatGPTの文章からタイトルを抜き出し、一覧表示をすることなのでaxiosの使い方は省きます。

問題は、返ってくる形式はjsonなのですが、返答データはstringになっています。
なので、返答データからタイトルのみを切り出し、分割する必要があります。
また、もう一つの問題が、ChatGPTは返答データの形式がバラバラで返ってきます。
この2点の問題点を解決するため、ChatGPTにマークダウンのリスト形式で回答してもらい、先頭にある「- 」を切り取って表示することにしました。

まず、入力フォームで毎回マークダウンのお願いをするのは手間になるので、以下のように形式を指定し、メッセージを投げることで、必要な文章のみを入力フォームで入れてもらえるようにします。

const editMessage = `
  質問:次の文章のタイトル候補をいくつか教えてください。\n
  返答フォーマット:マークダウンのリスト形式で答えてください。\n
  ----------------------------------------------\n
  ${message}
`

message変数には考えてもらいたいタイトルの文章を入れ、editMessage変数をChatGPTに送ってあげれば、マークダウン形式で返答してもらうことができます。

- タイトル1
- タイトル２
- タイトル３

返答データ

answer
.split(/\n/)
.map((item: string) => (
  item.replace(/(^- )/, '')
)