Streamen Sie Daten von der OpenAI-API mithilfe von AJAX, PHP und vom Server gesendeten Ereignissen

Question

Wie verwende ich Server Sent Events (SSE), um Daten von der oben genannten API mithilfe von JavaScript und PHP an einen Browser-Client zu streamen? Ich habe stundenlang an diesem Problem gearbeitet und kann anscheinend nicht herausfinden, was falsch läuft. Als Referenz habe ich versucht, die Lösung hier anzupassen: Streamen Sie DATEN von der openai GPT-3-API mit PHP

Der Rest meines Codes ist mehr oder weniger derselbe wie der Code in der Frage oben. Der einzige Teil, den ich geändert habe und der nicht funktioniert, ist:

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

Zuerst habe ich versucht, nur die Eigenschaft „text“ aus dem Array „choices“ zurückzugeben (siehe Beispiel-API-Antwort unten).

Dies ist die Antwort, die ich erhalten habe:

Hinweis: Es wird versucht, auf den Array-Offset für einen Wert vom Typ Null in C:FILE_PATHsse.php zuzugreifen.

Zweitens, wie kann man „Text“ in Echtzeit an ein Element auf der Clientseite übertragen? Dies ist meine bisherige Implementierung.

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

Ein Beispieldatenblock, der von der API gestreamt wird, ist unten dargestellt. Ich versuche, nur den „Text“-Teil zurück zum Browser zu streamen.

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]

Wie soll ich das umsetzen? Ich bin mit meinem Latein am Ende. Dank im Voraus.

Answer 1

我使用以下代码找到了解决方法：

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

然后我使用 JavaScript 来提取文本，如下所示：

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