英文:
Is it possible to handle stream api call in Angular using ChatGPT API?
问题
我制作了一个小型应用程序来使用chatgpt API（隐藏API密钥）。它可以运行，但如果问题/答案太长，它需要很长时间，甚至会超过chatgpt的令牌限制。是否可以分块按流接收响应？我无法弄清楚如何做到这一点。在提供的代码中，我尝试了，但只收到第一个块。如果有解决方案，我将很乐意获得帮助。
英文:
I made a mini app to work with chatgpt API(hide the api key). It works, however if the question/answer is too big, it takes much time or even exceeds the token limit of chatgpt. Is it possible to get the response in stream chunk by chunk? I can't figure out how to do it. In the provided code I tried it but only receive the first chunk. If there is any solution, i'll be glad to get help
答案1
得分: 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) {
// 处理响应错误
observer.error();
}
function push() {
return reader?.read().then(({ done, value }) => {
if (done) {
observer.complete();
return;
}
// 从响应中解析文本内容
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) => {
// 处理 fetch 错误
observer.error();
});
});
}
然后像这样订阅：
let botMessage = ''
chatStream().subscribe({
next: (text) => {
botMessage += text
},
complete: () => {
},
error: () => {
}
});
查看我的完整应用程序 这里。每个部分可以在 app/@core/http-api.service.ts 和 app/pages/chat/chat.component.ts 找到。
如果你觉得这对你有帮助，我将非常感激如果你给我一个星星。
英文:
You can get response in stream with fetch and ReadableStream. Here is an example:
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();
});
});
}
And then subscribe like this
let botMessage = ''
chatStream().subscribe({
next: (text) => {
botMessage += text
},
complete: () => {
},
error: () => {
}
});
Check out my complete application here. Each part can be found at app/@core/http-api.service.ts and
app/pages/chat/chat.component.ts.
If you found this helpful, I would greatly appreciate it if you could give me a star.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论