2

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.

1 Answer 1

0

I found my way around it using the following code:

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

I then used JavaScript to extract the text as such:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.