【JavaScript】ブラウザーで OpenAI API のチャット (Chat Completions) のストリームを扱う方法

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "user",
        "content": "OpenAI API の Chat Completions について簡潔に説明してください。"
      }
    ]
  }'

{
  "id": "chatcmpl-8ZYbnZiu69bYyjnXRu3gSaE1b7Qcc",
  "object": "chat.completion",
  "created": 1703485207,
  "model": "gpt-3.5-turbo-0613",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "OpenAI APIのChat Completionsは、..."
      },
      "logprobs": null,
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 32,
    "completion_tokens": 230,
    "total_tokens": 262
  },
  "system_fingerprint": null
}

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "user",
        "content": "OpenAI API の Chat Completions について簡潔に説明してください。"
      }
    ],
    "stream": true
  }'

data: {"id":"chatcmpl-8ZYhjQsbZ2dVfDwuGEp72Ki49WExd","object":"chat.completion.chunk","created":1703485575,"model":"gpt-3.5-turbo-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"role":"assistant","content":""},"logprobs":null,"finish_reason":null}]}

data: {"id":"chatcmpl-8ZYhjQsbZ2dVfDwuGEp72Ki49WExd","object":"chat.completion.chunk","created":1703485575,"model":"gpt-3.5-turbo-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"content":"Open"},"logprobs":null,"finish_reason":null}]}

[省略]

data: [DONE]

{
    "id": "chatcmpl-8ZYhjQsbZ2dVfDwuGEp72Ki49WExd",
    "object": "chat.completion.chunk",
    "created": 1703485575,
    "model": "gpt-3.5-turbo-0613",
    "system_fingerprint": null,
    "choices": [
        {
            "index": 0,
            "delta": {
                "content": "ます"
            },
            "logprobs": null,
            "finish_reason": null
        }
    ]
}

(async () => {
    // 送信メッセージ
    const message = 'OpenAI API の Chat Completions について簡潔に説明してください。';

    // fetch で OpenAI API にリクエスト
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py'
        },
        body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [{ role: 'user', content: message }]
        })
    });

    // レスポンスボディを JSON として取り出す
    const rdata = await response.json();

    // 応答メッセージを抜き出してコンソールに出力
    console.log(rdata.choices[0].message.content);
})();

// 送信メッセージ
const message = 'OpenAI API の Chat Completions について簡潔に説明してください。';

// fetch で OpenAI API にリクエスト (stream: true)
const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py'
    },
    body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: message }],
        stream: true
    })
});

const reader = response.body.getReader();

const decoder = new TextDecoder('utf-8');

while (true) {
    const { done, value } = await reader.read();
    if (done) {
        break;
    }

    // 受信したバイナリーデータ (value) をテキストに変換する
    const text = decoder.decode(value);

    // テキストには複数のメッセージが含まれている可能性があるため、
    // 改行 (LF) で分離して、1 行ずつ処理する
    const lines = text.split(/\n+/);

    for (const line of lines) {
        // 先頭の "data: " を削除してメッセージ本文 (JSON 文字列か "[DONE]" のいずれか) を抜き出す
        const json_text = line.replace(/^data:\s*/, '');

        if (json_text === '[DONE]') {
            break;
        } else if (json_text) {
            const data = JSON.parse(json_text);
            const content = data.choices[0].delta.content;
            if (content) {
                // BODY 要素の最後に文字を挿入
                document.body.append(document.createTextNode(content));
            }
        }
    }
}

const controller = new AbortController();
const signal = controller.signal;

const response = await fetch('https://api.openai.com/v1/chat/completions', {
    ...
    signal: signal
});

controller.abort();