前端大模型入门（一）：用 js+langchain 构建基于 LLM 的应用

利用大模型开发应用时，我们有时候要第一时间给出用户相应，也就是使用流式调用的方式。这时候前端处理响应，就需要特殊的处理：利用处理可读流的方式从响应中读取数据。

随着大语言模型（LLM）在各种应用中的广泛使用，如何高效地从服务器获取模型生成的长文本响应成为一个重要问题。传统的HTTP请求模式通常等待服务器生成完整的响应内容再返回给客户端。然而，流式调用（streaming）通过分段传输部分响应，能提高实时性和用户体验。在此场景中，HTTP流式调用被广泛应用，尤其是在与LLM（如通义千文等）进行交互时。

本文将介绍LLM的HTTP API流式调用的机制，并深入探讨前端如何处理流式响应，以实现实时的、渐进式的结果呈现。

一、什么是HTTP API流式调用？

HTTP API流式调用（HTTP Streaming）是一种传输方式，服务器不会等待所有的数据生成完毕再返回给客户端，而是将响应数据逐步分段发送。当大语言模型生成内容时，服务器可以通过流式传输，将文本按块传递给前端，前端可以立即呈现这些部分内容，无需等待完整响应。

流式响应的基本流程：

1. 客户端请求：前端通过HTTP请求向服务器发出调用，通常是POST请求，附带需要生成内容的提示（prompt），以及相关的参数。
2. 服务器处理并分段响应：服务器开始处理请求，但不等待处理结束，先将部分生成的文本作为响应的一个数据块（chunk）发送给客户端。
3. 客户端逐步接收并处理数据块：客户端持续监听流式响应，接收每个数据块并实时处理或呈现。
4. 连接关闭：服务器在生成完毕后关闭连接，客户端停止接收数据。

这种方式特别适合用于大语言模型的文本生成任务，因为大规模模型生成的内容可能会很长，逐步输出可以改善用户的等待体验。

二、如何实现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;  // 拼接完整响应
}

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

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

const scrollToBottom = () => {
   
  chatBox.scrollTop = chatBox.scrollHeight;
};

updateChat(chunk);
scrollToBottom();  // 更新后自动滚动

四、流式调用的优势

1. 提升用户体验：通过流式传输，用户能够实时看到部分生成的内容，而不需要等待整个模型生成完毕，从而减少了感知延迟。
2. 减少服务器压力：在某些场景下，流式调用可以减少服务器压力，因为服务器可以按需逐步处理和发送数据，而不需要一次性生成和发送大量数据。
3. 增强交互性：用户能够根据逐步收到的内容进行进一步操作，如在对话中实时反馈等。

五、总结

HTTP API流式调用为大语言模型的响应提供了更高效和实时的交互方式。通过流式调用，前端可以逐步接收模型生成的部分数据，并即时呈现，从而提升用户体验。前端在实现流式调用时，需要处理数据分块的拼接、实时更新界面和处理可能的中断错误。通过这种方式，可以在交互密集的应用场景（如聊天机器人、自动化助手等）中大幅改善用户的使用体验。

处理流式调用，尤其是国产大模型的兼容是一个重复的工作，后面的章节如果有空，我会讲讲如何基于rxjs或者langchain.js简化这个工作