HTTP API流式调用能提高大语言模型应用的用户体验，前端可逐步接收分段响应，实时呈现内容。
原文标题：前端大模型入门（一）：用 js+langchain 构建基于 LLM 的应用
原文作者：阿里云开发者
冷月清谈：
**前端实现**流式调用需要使用流处理机制，从响应中逐块读取数据并进行处理。关键步骤包括逐步更新界面、处理中断或错误、拼接数据以及优化用户交互。
流式调用的**优势**包括提升用户体验、减少服务器压力和增强交互性。它在交互密集的应用场景中非常有用，例如聊天机器人和自动化助手。
**如何实现**流式调用：
1. 设置请求，启用流式响应
2. 读取流数据并解码为文本
3. 逐块处理或显示数据
怜星夜思：
2、除了文章中提到的优点外，流式调用在前端开发中还有哪些潜在的应用场景？
3、在处理流式响应的文本数据时，有哪些常用的NLP或自然语言处理技术可以优化处理效率和内容质量？
原文内容
阿里妹导读
本文将介绍LLM的HTTP API流式调用的机制，并深入探讨前端如何处理流式响应，以实现实时的、渐进式的结果呈现。
作者｜想飞的雪糕
利用大模型开发应用时，我们有时候要第一时间给出用户响应，也就是使用流式调用的方式。这时候前端处理响应，就需要特殊的处理：利用处理可读流的方式从响应中读取数据。
随着大语言模型（LLM）在各种应用中的广泛使用，如何高效地从服务器获取模型生成的长文本响应成为一个重要问题。传统的HTTP请求模式通常等待服务器生成完整的响应内容再返回给客户端。然而，流式调用（streaming）通过分段传输部分响应，能提高实时性和用户体验。在此场景中，HTTP流式调用被广泛应用，尤其是在与LLM（如通义千问等）进行交互时。
本文将介绍LLM的HTTP API流式调用的机制，并深入探讨前端如何处理流式响应，以实现实时的、渐进式的结果呈现。
一、什么是HTTP API流式调用？
HTTP API流式调用（HTTP Streaming）是一种传输方式，服务器不会等待所有的数据生成完毕再返回给客户端，而是将响应数据逐步分段发送。当大语言模型生成内容时，服务器可以通过流式传输，将文本按块传递给前端，前端可以立即呈现这些部分内容，无需等待完整响应。
流式响应的基本流程：
-
客户端请求：前端通过HTTP请求向服务器发出调用，通常是POST请求，附带需要生成内容的提示（prompt），以及相关的参数。
-
服务器处理并分段响应：服务器开始处理请求，但不等待处理结束，先将部分生成的文本作为响应的一个数据块（chunk）发送给客户端。
-
客户端逐步接收并处理数据块：客户端持续监听流式响应，接收每个数据块并实时处理或呈现。
-
连接关闭：服务器在生成完毕后关闭连接，客户端停止接收数据。
这种方式特别适合用于大语言模型的文本生成任务，因为大规模模型生成的内容可能会很长，逐步输出可以改善用户的等待体验。
二、如何实现LLM的HTTP API流式调用？
以一个调用LLM的流式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; // 拼接完整响应
}
对于聊天机器人或类似应用，前端可以设置自动滚动，使得用户在流式数据逐步加载时能够始终看到最新的内容。
const scrollToBottom = () => { chatBox.scrollTop = chatBox.scrollHeight; };updateChat(chunk);
scrollToBottom(); // 更新后自动滚动
四、流式调用的优势
-
提升用户体验：通过流式传输，用户能够实时看到部分生成的内容，而不需要等待整个模型生成完毕，从而减少了感知延迟。
-
减少服务器压力：在某些场景下，流式调用可以减少服务器压力，因为服务器可以按需逐步处理和发送数据，而不需要一次性生成和发送大量数据。
-
增强交互性：用户能够根据逐步收到的内容进行进一步操作，如在对话中实时反馈等。
五、总结
HTTP API流式调用为大语言模型的响应提供了更高效和实时的交互方式。通过流式调用，前端可以逐步接收模型生成的部分数据，并即时呈现，从而提升用户体验。前端在实现流式调用时，需要处理数据分块的拼接、实时更新界面和处理可能的中断错误。通过这种方式，可以在交互密集的应用场景（如聊天机器人、自动化助手等）中大幅改善用户的使用体验。