前端大模型入门：流式调用llm时前端该如何处理响应数据？
利用大模型开发应用时，我们有时候要第一时间给出用户相应，也就是使用流式调用的方式。这时候前端处理响应，就需要特殊的处理：利用处理可读流的方式从响应中读取数据。
随着大语言模型（LLM）在各种应用中的广泛使用，如何高效地从服务器获取模型生成的长文本响应成为一个重要问题。传统的HTTP请求模式通常等待服务器生成完整的响应内容再返回给客户端。然而，流式调用（streaming）通过分段传输部分响应，能提高实时性和用户体验。在此场景中，HTTP流式调用被广泛应用，尤其是在与LLM（如OpenAI的GPT等）进行交互时。
本文将介绍LLM的HTTP API流式调用的机制，并深入探讨前端如何处理流式响应，以实现实时的、渐进式的结果呈现。
一、什么是HTTP API流式调用？
HTTP API流式调用（HTTP Streaming）是一种传输方式，服务器不会等待所有的数据生成完毕再返回给客户端，而是将响应数据逐步分段发送。当大语言模型生成内容时，服务器可以通过流式传输，将文本按块传递给前端，前端可以立即呈现这些部分内容，无需等待完整响应。
流式响应的基本流程：
- 客户端请求：前端通过HTTP请求向服务器发出调用，通常是POST请求，附带需要生成内容的提示（prompt），以及相关的参数。
- 服务器处理并分段响应：服务器开始处理请求，但不等待处理结束，先将部分生成的文本作为响应的一个数据块（chunk）发送给客户端。
- 客户端逐步接收并处理数据块：客户端持续监听流式响应，接收每个数据块并实时处理或呈现。
- 连接关闭：服务器在生成完毕后关闭连接，客户端停止接收数据。
这种方式特别适合用于大语言模型的文本生成任务，因为大规模模型生成的内容可能会很长，逐步输出可以改善用户的等待体验。
二、如何实现LLM的HTTP API流式调用？
以一个调用LLM（如OpenAI GPT模型）的流式HTTP API为例，下面是一个使用fetch来发起流式调用的典型前端实现流程。国内的各个大模型，调用方式差不多，参数也类似，甚至还会有openai兼容的openapi接口
const fetchStreamData = async (prompt) => {
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY`
},
body: JSON.stringify({
model: 'gpt-4',
prompt: prompt,
stream: true // 启用流式响应
})
});
// 检查响应状态
if (!response.ok) {
throw new Error('Network response was not ok');
}
// 获取响应的可读流并处理流数据
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let done = false;
while (!done) {
// 读取流中的下一个数据块
const { value, done: readerDone } = await reader.read();
done = readerDone;
// 将数据块解码为字符串
const chunk = decoder.decode(value, { stream: true });
console.log(chunk); // 处理或显示每一块数据
// ***** 这需要注意，各个大模型的分块数据结构可能不一样，甚至会有可能出现部分数据的情况，要单独兼容和处理哦
// 以及有些模型内容的路径不一样，一次性响应在content，但是流式在delta字段下
}
};
1. 请求设置：
fetch函数用于发起POST请求，stream: true选项通知服务器启用流式传输。- 请求体中包含模型ID和提示词
prompt，以及其他必要参数（如API密钥）。
2. 读取流数据：
- 使用
response.body.getReader()获取一个流的阅读器（Reader），该阅读器允许我们按数据块逐步读取响应。 TextDecoder将字节数据解码为文本格式，确保能够正确处理流传输中的文本数据。
3. 逐块处理数据：
- 通过
reader.read()逐步读取每个数据块，value包含读取到的字节数据，done表示流是否已结束。 chunk是解码后的文本数据，每次接收到新的数据块时可以实时处理或显示。
三、前端如何处理流式响应？
当后端返回流式响应时，前端可以逐步接收并更新UI，提供更好的用户交互体验。以下是前端处理流式响应的关键步骤。
1. 逐步更新界面
每当接收到一个新的数据块，前端可以立即将其更新到UI上，而不必等待完整的响应。这种实时更新的机制对于聊天机器人、搜索建议等场景尤为重要。例如：
const chatBox = document.getElementById('chat-box');
const updateChat = (text) => {
// 将新数据块追加到界面上
chatBox.innerHTML += `<p>${text}</p>`;
};
// 在逐块接收时更新
while (!done) {
const { value, done: readerDone } = await reader.read();
const chunk = decoder.decode(value, { stream: true });
updateChat(chunk); // 实时更新聊天框
}
通过这种方式，用户能够看到模型生成内容的部分结果，即使整个请求尚未完成，提升了用户体验。
2. 处理中断或错误
在流式调用中，网络连接可能会中断，或者服务器可能会返回错误。前端应该做好错误处理，例如：
if (!response.ok) {
console.error('Error with the request');
return;
}
reader.read().then(processStream).catch(error => {
console.error('Error while reading stream:', error);
});
在中断时，前端可以选择显示错误消息，或尝试重新发起请求以重新建立连接。
3. 流数据的拼接与处理
由于流传输的数据是分块发送的，前端可能需要将这些分段数据拼接起来，形成完整的响应。例如：
let fullResponse = '';
while (!done) {
const { value, done: readerDone } = await reader.read();
const chunk = decoder.decode(value, { stream: true });
fullResponse += chunk; // 拼接完整响应
}
4. 自动滚动和用户交互优化
对于聊天机器人或类似应用，前端可以设置自动滚动，使得用户在流式数据逐步加载时能够始终看到最新的内容。
const scrollToBottom = () => {
chatBox.scrollTop = chatBox.scrollHeight;
};
updateChat(chunk);
scrollToBottom(); // 更新后自动滚动
四、流式调用的优势
- 提升用户体验：通过流式传输，用户能够实时看到部分生成的内容，而不需要等待整个模型生成完毕，从而减少了感知延迟。
- 减少服务器压力：在某些场景下，流式调用可以减少服务器压力，因为服务器可以按需逐步处理和发送数据，而不需要一次性生成和发送大量数据。
- 增强交互性：用户能够根据逐步收到的内容进行进一步操作，如在对话中实时反馈等。
五、总结
HTTP API流式调用为大语言模型的响应提供了更高效和实时的交互方式。通过流式调用，前端可以逐步接收模型生成的部分数据，并即时呈现，从而提升用户体验。前端在实现流式调用时，需要处理数据分块的拼接、实时更新界面和处理可能的中断错误。通过这种方式，可以在交互密集的应用场景（如聊天机器人、自动化助手等）中大幅改善用户的使用体验。
处理流式调用，尤其是国产大模型的兼容是一个重复的工作，后面的章节如果有空，我会讲讲如何基于rxjs或者langchain.js简化这个工作
原文地址：https://blog.csdn.net/m0_38015699/article/details/142436990
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！