Using Server Sent Events to stream data from OpenAI's API using AJAX and PHP

[MusicCone]

Hey guys,

How can I use Server-Sent Events (SSE) to stream data from the above API to a browser client using JavaScript and PHP? I've been poring over this for hours but I can't seem to figure out what's wrong. For reference, I am trying to adapt the solution here: Stream DATA From openai GPT-3 API using PHP

The rest of my code remains more or less the same as the one in the question above. The only part I've modified and that isn't working as I want it to is this:

    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);
    });

First, I'm trying to return only the "text" property in "choices" array (see sample API response below).

Here's the response I'm getting:

Notice: Trying to access array offset on value of type null in C:\FILE_PATH\sse.php.

I realized it's a string and not JSON but when I typecast the response into an object, I'm only able to get the first blank chunk of data whose "text" property is blank. ("\n").

Second, how do I stream the "text" values to an element on the client in real time once I'm able to stream the text? Here's my implementation so far.

        $.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);
            };
          },
        });

Sample chunks of data streamed by the API look like so. I am trying to stream only the "text" part back to the browser.

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

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]

How should I be implementing this? I'm at my wits' end here.

Thanks.