前端页面如何支持多模态大模型的流式返回
随着人工智能技术的快速发展，多模态大模型（如OpenAI的GPT-4）在各类应用中变得越来越普遍。这些模型不仅可以处理文本数据，还可以理解和生成图像、视频、音频等多种类型的数据。
在前端页面中实现对这些大模型的支持，尤其是流式返回结果，可以显著提升用户体验。本篇文章带大家了解一下前端前端页面如何支持多模态大模型的流式返回。
作者
李好 | 前端开发工程师
大道至简
Large language models and their chat variants are the primary bottleneck in LLM based apps. ?
Large language models can take several seconds to generate a complete response to a query. This is far slower than the ~200-300 ms threshold 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 model token by token.
Part1
前言
在用户体验至上的时代，应用的响应速度至关重要。大语言模型在生成响应时可能会有显著延迟，传统的HTTP请求响应模型在面对实时数据更新时往往显得力不从心，为了改善用户体验，流式返回（Streaming）成为了一种高效的解决方案。一起来看看如何在前端页面中实现流式返回，并支持多模态大模型的输出。
Part2
基本概念
流式返回
流式返回是一种数据传输方式，允许服务器在一次连接中逐步发送数据，而不是一次性返回全部结果。对于大语言模型的输出，可以逐个token地发送，这样用户可以在等待完整响应的过程中看到逐步生成的内容，从而感觉到应用更加响应迅速。
多模态大模型
多模态大模型能够处理和生成多种类型的数据，包括文本、图像、音频、视频等。这样的模型可以在不同模态之间进行关联和转换，提供更丰富和复杂的应用场景。支持这种模型需要前端能够灵活地展示不同类型的返回结果。
Part3
前端页面的准备工作
在开始编码之前，需要确保前端环境已经准备好：
HTML5 支持：确保使用的浏览器支持现代的HTML5特性。
JavaScript 框架：可以使用React、Vue.js等前端框架来简化开发过程。
CSS：用于美化页面和展示不同类型的数据。
Part4
实现流式返回
实现流式返回的方法有多种，常见的包括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);
}Part5
多模态支持
为了支持多模态大模型，需要在前端页面中处理不同类型的数据并动态渲染。可以通过解析返回数据的类型字段，并根据类型选择不同的渲染方式。
示例代码
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);
}Part6
总结
通过流式传输，使模型在token可用时立即开始返回, 而不是等待整个token序列生成完毕。虽然这并不会改变获取所有token所需的时间，但它减少了获取第一个token的时间，对于希望显示部分进展或可能会中途停止生成的应用程序来说，这是一个更好的用户体验。
本文介绍了如何使用WebSocket、Server-Sent Events以及Fetch API with Streams实现流式数据传输，并提供了具体的实现步骤和示例代码。希望这些方法和示例能够帮助你在前端应用中更好地支持大语言模型的输出。
