angular - 是否可以使用 ChatGPT API 处理 Angular 中的流 api 调用？

Question

Link to stackblitz project

我制作了一个迷你应用程序来使用chatgpt API(隐藏api key )。它可以工作，但是如果问题/答案太大，则需要很长时间甚至超出 chatgpt 的 token 限制。是否可以逐 block 获取流中的响应？我不知道该怎么做。在提供的代码中，我尝试了它，但只收到了第一个 block 。如果有任何解决方案，我将很高兴获得帮助

Answer 1

您可以使用 fetch 和 ReadableStream 在流中获取响应。这是一个例子:

chatStream(url, body, apikey) {
    return new Observable<string>(observer => {
      fetch(url, {
        method: 'POST',
        body: body,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apikey}`,
        },
      }).then(response => {
        const reader = response.body?.getReader();
        const decoder = new TextDecoder();
        if (!response.ok) {
           // handle response error 
           observer.error();
        }

        function push() {
          return reader?.read().then(({ done, value }) => {
            if (done) {
              observer.complete();
              return;
            }

            //parse text content from response
            const events = decoder.decode(value).split('\n\n');
            let content = '';
            for (let i = 0; i < events.length; i++) {
              const event = events[i];
              if (event === 'data: [DONE]') break;
              if (event && event.slice(0, 6) === 'data: ') {
                const data = JSON.parse(event.slice(6));
                content += data.choices[0].delta?.content || '';
              }
            }
            observer.next(content);
            push();
          });
        }

        push();
      }).catch((err: Error) => {
        // handle fetch error
        observer.error();
      });
    });
  }

然后像这样订阅

let botMessage = ''

chatStream().subscribe({
    next: (text) => {
      botMessage += text
    },
    complete: () => {

    },
    error: () => {

    }
  });

查看我的完整申请here 。每个部分都可以在 app/@core/http-api.service.ts 找到。和 app/pages/chat/chat.component.ts .

如果您觉得这有帮助，请给我一颗星，我将不胜感激。