AI时代,前端如何处理大模型返回的多模态数据?

一、前言

在当今大模型(LLM)主导的AI时代,多模态交互已成为标配------从DALL·E生成图像到GPT-4o处理语音,海量的图片、音频、视频数据需要在前后端之间高效流转。然而,当大模型返回一个Base64编码的2MB图片时,你是否思考过:这种看似便捷的文本化传输,真的是最优解吗?

二、为何大模型普遍传输Base64格式的多模态数据

在我们分析这个问题之前,我们要数一数主流的多模态数据传输有哪几种形式------

  • 1.Base64
  • 2.二进制数据
  • 3.URL

这里简单聊一聊为何二进制数据URL 并不适合大部分情况下的大模型数据传输

  • 1.二进制数据

    许多网络传输协议,如 HTTP,本质上是基于文本的难以直接传输二进制数据 。而Base64 编码可以将二进制数据转换为文本形式,使得大模型生成的图片、音频等二进制数据能够在这些协议中顺利传输。

  • 2.URL

    大模型在处理数据时,可能未将结果以文件形式存储在服务器上,因此没有对应的 URL 。例如一些临时生成的图片、音频等数据,只是在内存中处理后直接返回,不存在服务器上的存储路径,无法提供 URL

而Base64格式便可以规避掉上述的问题

三、前端应该直接使用大模型传输的Base64数据吗?

Base64格式的数据虽然在大模型的多模态数据传输中脱颖而出,但它并不是我们前端处理的最佳数据格式

1.相比于二进制数据,它体积更大

  • Base64 是将二进制数据转换为 ASCII 字符的编码方式,每 3 字节二进制数据会被编码为 4 字节的 Base64 字符串(理论上体积增加约 33% )。 一张 10KB 的 PNG 图片转换为 Base64 后,大小可能接近 14KB。

2.相对于URL,性能太差

  • URL 指向的资源可被浏览器缓存(通过Cache-Control等头字段),下次访问直接从本地读取。Base64 数据嵌入在 HTML 或 JS 中,属于文档内容的一部分,无法单独缓存,导致重复加载。

种种原因表明,我们应该对大模型传输的Base64数据进行处理之后再使用

四、前端对Base64格式数据的处理方案------Blob+URL

使用字节tts时返回的音频文件便是Base64格式数据,我们可以对其进行以下的处理

js 复制代码
const getAudioUrl = (base64Data) => {
  // 创建一个数组来存储字节数据
    var byteArrays = [];
    // 使用atob()将Base64编码的字符串解码为原始二进制字符串
    // atob: ASCII to Binary
    var byteCharacters = atob(base64Data);
    // 遍历解码后的二进制字符串的每个字符
    for (var offset = 0; offset < byteCharacters.length; offset++) {
        // 将每个字符转换为其ASCII码值(0-255之间的数字)
        var byteArray = byteCharacters.charCodeAt(offset);
        // 将ASCII码值添加到字节数组中
        byteArrays.push(byteArray);
    }
    // 创建一个Blob对象
    // new Uint8Array(byteArrays)将普通数组转换为8位无符号整数数组
    // { type: 'audio/mp3' } 指定Blob的MIME类型为MP3音频
    
    var blob = new Blob([new Uint8Array(byteArrays)], { type: 'audio/mp3' });
     // 使用URL.createObjectURL创建一个临时的URL
    // 这个URL可以用于<audio>标签的src属性
    // 这个URL在当前页面/会话有效,页面关闭后会自动释放
    // 创建一个临时 URL 供音频播放
    return URL.createObjectURL(blob);
}

这个操作可以将Base64的大小还原为相应的二进制数据的大小,而且兼具了URL的可重复使用等优势,可谓一举两得。

五、结语

在大模型驱动的多模态交互时代,Base64 如同连接前后端的 "数字桥梁",以文本化特性解决了二进制数据的传输困境,却也因体积膨胀、缓存受限等问题埋下性能隐患 。前端通过Blob+URL 的转换方案,既保留了 Base64 的跨平台兼容性,又借由二进制数据的原生操作和 URL 的资源复用能力,在 "传输便捷性" 与 "性能优化" 间找到了平衡。

相关推荐
子燕若水40 分钟前
Unreal Engine 5中的AI知识
人工智能
极限实验室2 小时前
Coco AI 实战(一):Coco Server Linux 平台部署
人工智能
杨过过儿2 小时前
【学习笔记】4.1 什么是 LLM
人工智能
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
巴伦是只猫2 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
大千AI助手2 小时前
DTW模版匹配:弹性对齐的时间序列相似度度量算法
人工智能·算法·机器学习·数据挖掘·模版匹配·dtw模版匹配
AI生存日记2 小时前
百度文心大模型 4.5 系列全面开源 英特尔同步支持端侧部署
人工智能·百度·开源·open ai大模型
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php