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

The rest of my code is more or less the same as in the question above. The only part I modified that didn't work was:

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 tried returning only the "text" property from the "choices" array (see sample API response below).

This is the response I received:

Note: Trying to access array offset on value of type null in C:FILE_PATHsse.php.

Secondly, how to transfer "text" to an element on the client in real time? This is my implementation so far.

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 + "
"; console.log(event); }; }, });

A sample chunk of data streamed by the API is shown below. I'm trying to stream only the "text" portion back to the browser.

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 implement this? I'm at my wits' end. Thanks in advance.

//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;

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