核心概念

瀏覽器的安全機制（Network Isolation Keys）讓不同網站的快取完全隔離，導致同一個 177 MB 的 Whisper 模型每個使用 Transformers.js 的網站都必須各自下載一份。這是 COS API 試圖解決的根本問題。

Cross-Origin Storage（COS）API 是 Google Chrome 團隊提出的 WICG 規格草案，核心思路是改用 SHA-256 雜湊值識別檔案，而非 URL 或來源網域。相同雜湊的檔案只需存一份，任何被授權的 origin 都可讀取。

API 使用模式：

const hash = {
  algorithm: 'SHA-256',
  value: '8f434346648f6b96df89dda901c5176b10a6d83961dd3c1ac88b59b2dc327aa4',
};

try {
  const handle = await navigator.crossOriginStorage.requestFileHandle(hash);
  const fileBlob = await handle.getFile();  // 快取命中
} catch {
  // 回退網路下載，存入 COS 供未來共用
  const fileBlob = await fetch('https://cdn.jsdelivr.net/...').then(r => r.blob());
  const handle = await navigator.crossOriginStorage.requestFileHandle(
    hash, { create: true, origins: '*' }
  );
  const writable = await handle.createWritable();
  await writable.write(fileBlob);
  await writable.close();
}

origins 參數控制共用範圍：'*' 為全局可用（適合 AI 模型與 WASM runtime）、特定陣列限定網站、省略則僅同站可用。瀏覽器在寫入時自動驗證雜湊確保資料完整性。

在 Transformers.js 中啟用（一行 opt-in，不支援時自動回退）：

import { env, pipeline } from "@huggingface/transformers";
env.experimental_useCrossOriginStorage = true;

const asr = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en');

啟用後流程：從模型 Xet 元資料提取雜湊 → 查 COS → 未命中才下載 → 存入 COS 供其他網站共用。搭配 ModelRegistry.is_pipeline_cached() 可在執行前確認多個模型變體的快取狀態，選擇最適版本。

關鍵要點

  • 效能意義：177 MB 的 Whisper 僅需下載一次，後續任何網站載入時間從數十秒降至毫秒；ort-wasm-simd-threaded.asyncify.wasm（4.7 MB）也成為真正的全局共用資源
  • 目前狀態：COS API 尚未進入瀏覽器原生實作，需安裝 Chrome 擴充功能（Cross-Origin Storage）測試，為規格驗證階段
  • 除 Transformers.js 外，WebLLM（opt-in）與 wllama（自動整合）也已實驗 COS API，生態正在形成
  • Transformers.js v4 同步強化了快取基礎設施：env.useWasmCache = true 支援離線優先工作流，ModelRegistry 提供程式化快取管理
  • 現行替代方案：Chrome 官方建議用 Cache API（最佳效能）或 Origin Private File System（OPFS）存放大型模型；COS API 的差異在於跨來源共享，而非單一網站的持久化

實務應用

對同時部署多個 AI 工具的開發者（例如多個使用 Whisper 的子域名工具），COS API 能讓模型只下載一次就全局共用。由於是 opt-in + graceful fallback，現在加入 experimental_useCrossOriginStorage = true 屬於零風險早期採用，不支援的瀏覽器自動走正常下載路徑。

相關頁面：PaddleOCR 3.5 整合 Transformers 後端、Reachy Mini 本地化對話：語音 AI 管線的離線部署實錄

延伸觀點

瀏覽器模型快取的多層方案：Chrome 官方文件指出，現有最佳實踐是 Cache API（優先）→ OPFS（次選）→ IndexedDB（最差）。COS API 並非取代這些方案，而是在它們之上加入「跨來源共享」這一維度——同一檔案不再因網站不同而各存一份。從架構角度看，COS API 解決的是跨 origin 重複問題，Cache API 解決的是同一 origin 的持久化問題，兩者互補。

WebAssembly 記憶體限制與大模型：Chrome I/O 2024 技術文章揭示，WebAssembly 原本有 4 GB 記憶體上限（32-bit 指標），Memory64 提案突破此限。COS API 的實際受益者不只是輕量的 Whisper，隨著瀏覽器能載入更大模型（Transformers.js v4 已支援 8B+ 參數），共用快取節省的頻寬與儲存空間也將數量級放大。

ModelRegistry 提供程式化控制：Transformers.js v4 新增的 ModelRegistry.is_pipeline_cached() 與 COS API 結合，讓應用能在執行前動態選擇「快取中最佳可用模型」——例如大模型不在 COS 時自動降級到較小的快取版本，而非強迫使用者等待下載，這是 COS API 帶來的新 UX 設計空間。

反向連結

以下頁面引用了本頁：