一、前言

在當今大模型（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格式數據，我們可以對其進行以下的處理

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 的資源複用能力，在 “傳輸便捷性” 與 “性能優化” 間找到了平衡。