Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan

Question

Bagaimana untuk menggunakan Peristiwa Dihantar Pelayan (SSE) untuk menstrim data daripada API di atas kepada klien penyemak imbas menggunakan JavaScript dan PHP? Saya telah menyelesaikan masalah ini selama berjam-jam dan saya tidak dapat memikirkan apa yang berlaku. Sebagai rujukan, saya cuba menyesuaikan penyelesaian di sini: Strim DATA Dari openai GPT-3 API menggunakan PHP

Selebihnya kod saya lebih kurang sama dengan kod dalam soalan di atas. Satu-satunya bahagian yang saya ubah suai yang tidak berfungsi ialah:

curl_setopt($ch, CURLOPT_WRITEFUNCTION, function ($curl, $data) {
        # str_repeat(' ',1024*8) is needed to fill the buffer and will make streaming the data possible
        $data = json_decode($data, true);

        $text = $data['choices'][0]['text'];

        echo $text . str_repeat(' ', 1024 * 8);
        return strlen($data);
    });

Mula-mula, saya cuba mengembalikan hanya sifat "teks" daripada tatasusunan "pilihan" (lihat contoh respons API di bawah).

Ini balasan yang saya terima:

Nota: Cuba mengakses array ofset pada nilai jenis null dalam C:FILE_PATHsse.php.

Kedua, bagaimana untuk memindahkan "teks" ke elemen di sisi pelanggan dalam masa nyata? Ini adalah pelaksanaan saya setakat ini.

JavaScript

$.ajax({
          type: "POST",
          url: "sse.php",
          data: JSON.stringify({
            prompt: "What is the best way to",
            num_completions: 1,
            temperature: 0.5,
          }),
          contentType: "application/json",
          success: function (response) {
            const source = new EventSource("sse.php");

            source.onmessage = function (event) {
              const div = document.getElementById("response");
              div.innerHTML += event.data + "<br>";
              console.log(event);
            };
          },
        });

Sampel sampel data yang distrim oleh API ditunjukkan di bawah. Saya cuba menstrim hanya bahagian "teks" kembali ke penyemak imbas.

data: {"id": "cmpl-XXXXXXXXXXXXXXXXXXXXXXX", "object": "text_completion", "created": 1671700494, "choices": [{"text": " Best", "index": 0, "logprobs": null, "finish_reason": null}], "model": "text-davinci-003"}

data: {"id": "cmpl-XXXXXXXXXXXXXXXXXXXXXXX", "object": "text_completion", "created": 1671700494, "choices": [{"text": " way", "index": 0, "logprobs": null, "finish_reason": null}], "model": "text-davinci-003"}

data: {"id": "cmpl-XXXXXXXXXXXXXXXXXXXXXXX", "object": "text_completion", "created": 1671700494, "choices": [{"text": " to", "index": 0, "logprobs": null, "finish_reason": null}], "model": "text-davinci-003"}

data: [DONE]

Bagaimana saya harus melaksanakan ini? Saya berada di hujung akal saya. Terima kasih terlebih dahulu.

Answer 1

Saya menemui penyelesaian menggunakan kod berikut:

//Placed at the beginning of the script
@ini_set('zlib.output_compression', 0);
ob_implicit_flush(true);
ob_end_flush();

header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

//Initialize cURL and set the necessary headers and request parameters
...
...
curl_setopt($curl, CURLOPT_WRITEFUNCTION, function ($curl, $data) {
    echo $data;
    return strlen($data);
});

$curl_response = curl_exec($curl);

echo $curl_response;

Kemudian saya menggunakan JavaScript untuk mengekstrak teks seperti ini:

source.onmessage = function (event) {
  const div = document.getElementById("response");
  text = JSON.parse(event.data).choices[0].text;
  div.innerHTML += text;
};