AGI｜前端页面如何支持多模态大模型的流式返回？一文弄懂！

神州数码云基地

于 2024-08-23 10:36:09 发布

阅读量1.8k

点赞数 10

分类专栏： AGI 文章标签： agi 前端人工智能语言模型多模态大模型 AI

内容来自于神州数码云基地所有，如需转载请小框私信我们~

本文链接：https://blog.csdn.net/CBGCampus/article/details/141459016

版权

AGI 专栏收录该内容

60 篇文章

订阅专栏

随着人工智能技术的快速发展，多模态大模型（如OpenAI的GPT-4）在各类应用中变得越来越普遍。这些模型不仅可以处理文本数据，还可以理解和生成图像、视频、音频等多种类型的数据。

在前端页面中实现对这些大模型的支持，尤其是流式返回结果，可以显著提升用户体验。本篇文章带大家了解一下前端前端页面如何支持多模态大模型的流式返回。

Large language models and their chat variants are the primary bottleneck in LLM based apps.

Large language models can takeseveral secondsto generate a complete response to a query. This is far slower than the~200-300 msthreshold at which an application feels responsive to an end user.

The key strategy to make the application feel more responsive is to show intermediate progress; viz., to stream the output from the modeltoken by token.

一、前言

在用户体验至上的时代，应用的响应速度至关重要。大语言模型在生成响应时可能会有显著延迟，传统的HTTP请求响应模型在面对实时数据更新时往往显得力不从心，为了改善用户体验，流式返回（Streaming）成为了一种高效的解决方案。一起来看看如何在前端页面中实现流式返回，并支持多模态大模型的输出。

二、基本概念

流式返回

流式返回是一种数据传输方式，允许服务器在一次连接中逐步发送数据，而不是一次性返回全部结果。对于大语言模型的输出，可以逐个token地发送，这样用户可以在等待完整响应的过程中看到逐步生成的内容，从而感觉到应用更加响应迅速。

多模态大模型

多模态大模型能够处理和生成多种类型的数据，包括文本、图像、音频、视频等。这样的模型可以在不同模态之间进行关联和转换，提供更丰富和复杂的应用场景。支持这种模型需要前端能够灵活地展示不同类型的返回结果。

三、前端页面的准备工作

在开始编码之前，需要确保前端环境已经准备好：

HTML5 支持：确保使用的浏览器支持现代的HTML5特性。
JavaScript 框架：可以使用React、Vue.js等前端框架来简化开发过程。
CSS：用于美化页面和展示不同类型的数据。

四、实现流式返回

实现流式返回的方法有多种，常见的包括WebSocket、Server-Sent Events (SSE) 和 Fetch API with Streams。

WebSocket

WebSocket提供了在客户端和服务器之间建立全双工通信的能力，非常适合实时应用。

示例代码

const socket = new WebSocket('ws://your-server-address');

socket.onopen = () => {
  console.log('WebSocket connection established');
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 根据返回数据的类型处理不同的逻辑
  if (data.type === 'text') {
    displayText(data.content);
  } else if (data.type === 'image') {
    displayImage(data.content);
  }
};

socket.onclose = () => {
  console.log('WebSocket connection closed');
};

function displayText(text) {
  const textContainer = document.getElementById('text-container');
  textContainer.innerText = text;
}

function displayImage(imageUrl) {
  const imageContainer = document.getElementById('image-container');
  const img = document.createElement('img');
  img.src = imageUrl;
  imageContainer.appendChild(img);
}

Server-Sent Events (SSE)

SSE允许服务器向客户端推送实时更新，适用于需要频繁更新的场景。

示例代码

const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'text') {
    displayText(data.content);
  } else if (data.type === 'image') {
    displayImage(data.content);
  }
};

function displayText(text) {
  const textContainer = document.getElementById('text-container');
  textContainer.innerText = text;
}

function displayImage(imageUrl) {
  const imageContainer = document.getElementById('image-container');
  const img = document.createElement('img');
  img.src = imageUrl;
  imageContainer.appendChild(img);
}

Fetch API with Streams

Fetch API支持流式响应，可以用来处理较大数据量的返回。

示例代码

fetch('/stream-endpoint')
  .then(response => {
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    function read() {
      reader.read().then(({ done, value }) => {
        if (done) {
          console.log('Stream complete');
          return;
        }
        const data = JSON.parse(decoder.decode(value));
        if (data.type === 'text') {
          displayText(data.content);
        } else if (data.type === 'image') {
          displayImage(data.content);
        }
        read();
      });
    }
    read();
  });

function displayText(text) {
  const textContainer = document.getElementById('text-container');
  textContainer.innerText = text;
}

function displayImage(imageUrl) {
  const imageContainer = document.getElementById('image-container');
  const img = document.createElement('img');
  img.src = imageUrl;
  imageContainer.appendChild(img);
}

五、多模态支持

为了支持多模态大模型，需要在前端页面中处理不同类型的数据并动态渲染。可以通过解析返回数据的类型字段，并根据类型选择不同的渲染方式。

示例代码

function handleData(data) {
  if (data.type === 'text') {
    displayText(data.content);
  } else if (data.type === 'image') {
    displayImage(data.content);
  } else if (data.type === 'audio') {
    displayAudio(data.content);
  } else if (data.type === 'video') {
    displayVideo(data.content);
  }
}

function displayText(text) {
  const textContainer = document.getElementById('text-container');
  textContainer.innerText = text;
}

function displayImage(imageUrl) {
  const imageContainer = document.getElementById('image-container');
  const img = document.createElement('img');
  img.src = imageUrl;
  imageContainer.appendChild(img);
}

function displayAudio(audioUrl) {
  const audioContainer = document.getElementById('audio-container');
  const audio = document.createElement('audio');
  audio.controls = true;
  audio.src = audioUrl;
  audioContainer.appendChild(audio);
}

function displayVideo(videoUrl) {
  const videoContainer = document.getElementById('video-container');
  const video = document.createElement('video');
  video.controls = true;
  video.src = videoUrl;
  videoContainer.appendChild(video);
}