前端大模型入门：流式调用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接口

1. const fetchStreamData = async (prompt) => {
2.   const response = await fetch('https://api.openai.com/v1/completions', {
3.     method: 'POST',
4.     headers: {
5.       'Content-Type': 'application/json',
6.       'Authorization': `Bearer YOUR_API_KEY`
7.     },
8.     body: JSON.stringify({
9.       model: 'gpt-4',
10.       prompt: prompt,
11.       stream: true // 启用流式响应
12.     })
13.   });
15.   // 检查响应状态
16.   if (!response.ok) {
17.     throw new Error('Network response was not ok');
18.   }
20.   // 获取响应的可读流并处理流数据
21.   const reader = response.body.getReader();
22.   const decoder = new TextDecoder('utf-8');
23.   let done = false;
24.   
25.   while (!done) {
26.     // 读取流中的下一个数据块
27.     const { value, done: readerDone } = await reader.read();
28.     done = readerDone;
29.    
30.     // 将数据块解码为字符串
31.     const chunk = decoder.decode(value, { stream: true });
32.     console.log(chunk);  // 处理或显示每一块数据
33.     // ***** 这需要注意，各个大模型的分块数据结构可能不一样，甚至会有可能出现部分数据的情况，要单独兼容和处理哦
34.     // 以及有些模型内容的路径不一样，一次性响应在content，但是流式在delta字段下
35.   }
36. };

复制代码

1. 哀求设置：

• fetch函数用于发起POST哀求，stream: true选项关照服务器启用流式传输。
  
• 哀求体中包含模型ID和提示词prompt，以及其他须要参数（如API密钥）。
  

2. 读取流数据：

• 使用response.body.getReader()获取一个流的阅读器（Reader），该阅读器答应我们按数据块逐步读取响应。
  
• TextDecoder将字节数据解码为文本格式，确保可以或许精确处理流传输中的文本数据。
  

3. 逐块处理数据：

• 通过reader.read()逐步读取每个数据块，value包含读取到的字节数据，done表示流是否已结束。
  
• chunk是解码后的文本数据，每次接收到新的数据块时可以及时处理或显示。
  

三、前端如何处理流式响应？

当后端返回流式响应时，前端可以逐步接收并更新UI，提供更好的用户交互体验。以下是前端处理流式响应的关键步调。
1. 逐步更新界面

每当接收到一个新的数据块，前端可以立即将其更新到UI上，而不必等待完整的响应。这种及时更新的机制对于聊天机器人、搜刮发起等场景尤为重要。例如：

1. const chatBox = document.getElementById('chat-box');
3. const updateChat = (text) => {
4.   // 将新数据块追加到界面上
5.   chatBox.innerHTML += `<p>${text}</p>`;
6. };
8. // 在逐块接收时更新
9. while (!done) {
10.   const { value, done: readerDone } = await reader.read();
11.   const chunk = decoder.decode(value, { stream: true });
12.   updateChat(chunk);  // 实时更新聊天框
13. }

复制代码

通过这种方式，用户可以或许看到模型生成内容的部门结果，纵然整个哀求尚未完成，提拔了用户体验。
2. 处理停止或错误

在流式调用中，网络连接可能会停止，或者服务器可能会返回错误。前端应该做好错误处理，例如：

1. if (!response.ok) {
2.   console.error('Error with the request');
3.   return;
4. }
6. reader.read().then(processStream).catch(error => {
7.   console.error('Error while reading stream:', error);
8. });

复制代码

在停止时，前端可以选择显示错误消息，或尝试重新发起哀求以重新创建连接。
3. 流数据的拼接与处理

由于流传输的数据是分块发送的，前端可能需要将这些分段数据拼接起来，形成完整的响应。例如：

1. let fullResponse = '';
3. while (!done) {
4.   const { value, done: readerDone } = await reader.read();
5.   const chunk = decoder.decode(value, { stream: true });
6.   fullResponse += chunk;  // 拼接完整响应
7. }

复制代码

4. 自动滚动和用户交互优化

对于聊天机器人或雷同应用，前端可以设置自动滚动，使得用户在流式数据逐步加载时可以或许始终看到最新的内容。

1. const scrollToBottom = () => {
2.   chatBox.scrollTop = chatBox.scrollHeight;
3. };
5. updateChat(chunk);
6. scrollToBottom();  // 更新后自动滚动

复制代码

四、流式调用的上风

• 提拔用户体验：通过流式传输，用户可以或许及时看到部门生成的内容，而不需要等待整个模型生成完毕，从而淘汰了感知延迟。
  
• 淘汰服务器压力：在某些场景下，流式调用可以淘汰服务器压力，因为服务器可以按需逐步处理和发送数据，而不需要一次性生成和发送大量数据。
  
• 增强交互性：用户可以或许根据逐步收到的内容举行进一步操纵，如在对话中及时反馈等。
  

五、总结

HTTP API流式调用为大语言模型的响应提供了更高效和及时的交互方式。通过流式调用，前端可以逐步接收模型生成的部门数据，并即时呈现，从而提拔用户体验。前端在实现流式调用时，需要处理数据分块的拼接、及时更新界面和处理可能的停止错误。通过这种方式，可以在交互麋集的应用场景（如聊天机器人、自动化助手等）中大幅改善用户的使用体验。
   处理流式调用，尤其是国产大模型的兼容是一个重复的工作，背面的章节假如有空，我会讲讲如何基于rxjs或者langchain.js简化这个工作

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。