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 that isn't working 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.
Secondly, how do I stream the "text" to an element on the client in real time? Here's 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 + "<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": " 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. Thanks in advance.