有可能在Angular中使用ChatGPT api来处理流api调用吗?

Question

链接到stackblitz项目

我做了一个小应用程序与chatgpt API工作(隐藏API密钥)。它可以工作，但是如果问题/答案太大，则需要花费很多时间甚至超过chatgpt的令牌限制。是否有可能在流中获得响应块逐块?我不知道该怎么做。在提供的代码中，我尝试了它，但只收到第一个块。如果有什么解决办法，我很乐意寻求帮助

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('nn');
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: () => {
}
});

在这里查看我的完整申请。每个部分都可以在app/@core/http-api.service中找到。ts和应用程序/页面/聊天/chat.component.ts。

如果你觉得这篇文章有帮助，请给我打个星，我将不胜感激。