Transformers.js v3 版本發布，新增 WebGPU 加速、擴充模型支援，並支援伺服器端 JavaScript 相容性

TL;DR

Transformers.js v3 加入了 WebGPU 加速（比 WASM 快最高 100 倍）、新的量化格式、支援 120 種模型架構，且相容於 Node.js（ESM + CJS）、Deno 與 Bun，使得在瀏覽器與伺服器端 JavaScript 執行環境中直接進行高效能推論成為可能。

快速安裝

您可以從 NPM 安裝此函式庫：

npm i @huggingface/transformers

可透過 ES 模組或 CDN 匯入 pipeline：

import { pipeline } from "@huggingface/transformers";
// or
import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0";

完整文件可於 https://hf.co/docs/transformers.js 取得。

WebGPU 支援 – 大幅提速

WebGPU 是一項現代的網路標準，可讓 GPU 用於一般運算，取代 WebGL。至 2024 年 10 月，約有 70 % 的瀏覽器支援 WebGPU，然而部分瀏覽器可能需要啟用功能旗標（Firefox dom.webgpu.enabled、Safari WebGPU、舊版 Chromium enable-unsafe-webgpu）。

在 Transformers.js 中啟用 WebGPU

此函式庫與 ONNX Runtime Web 整合；只要在載入模型時傳入 device: "webgpu" 即可啟用 GPU 加速。

文字嵌入範例

const extractor = await pipeline(
  "feature-extraction",
  "mixedbread-ai/mxbai-embed-xsmall-v1",
  { device: "webgpu" }
);
const embeddings = await extractor(["Hello world!", "Example sentence."], { pooling: "mean", normalize: true });
console.log(embeddings.tolist());

Whisper 語音辨識範例

const transcriber = await pipeline(
  "automatic-speech-recognition",
  "onnx-community/whisper-tiny.en",
  { device: "webgpu" }
);
const output = await transcriber("https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav");
console.log(output);

影像分類範例

const classifier = await pipeline(
  "image-classification",
  "onnx-community/mobilenetv4_conv_small.e2400_r224_in1k",
  { device: "webgpu" }
);
const result = await classifier("https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg");
console.log(result);

這些示範顯示，以前在 WASM 上需要數秒的推論，現在可在 GPU 上即時執行。

新的量化格式（dtype 參數）

先前此函式庫使用二元的 quantized 標誌（q8 與 fp32）。第 3 版改以彈性的 dtype 參數取代，可從多種精度中選擇，包括：

  • 全精度："fp32"
  • 半精度："fp16"
  • 8 位元："q8"、"int8"、"uint8"
  • 4 位元："q4"、"bnb4"、"q4f16"

基本用法 – 4 位元 Qwen2.5

const generator = await pipeline(
  "text-generation",
  "onnx-community/Qwen2.5-0.5B-Instruct",
  { dtype: "q4", device: "webgpu" }
);
const msgs = [{ role: "system", content: "You are a helpful assistant." }, { role: "user", content: "Tell me a funny joke." }];
const out = await generator(msgs, { max_new_tokens: 128 });
console.log(out[0].generated_text.at(-1).content);

編碼器‑解碼器模型的模組別 dtype

某些模型（例如 Whisper、Florence‑2）對量化較為敏感。現在您可以提供模組名稱對應的 dtype 映射：

const model = await Florence2ForConditionalGeneration.from_pretrained(
  "onnx-community/Florence-2-base-ft",
  {
    dtype: {
      embed_tokens: "fp16",
      vision_encoder: "fp16",
      encoder_model: "q4",
      decoder_model_merged: "q4",
    },
    device: "webgpu",
  }
);

完整範例會載入模型、處理器、分詞器，準備影像，並產生詳細說明，展示模組別量化的實際效益。

支援 120 種架構 – 更廣的模態覆蓋

Transformers.js v3 現已支援 120 種模型族群，涵蓋文字、視覺、音訊與多模態任務。值得注意的新增包括：

  • Phi‑3 與 Phi‑3.5（具高效能的裝置端大型語言模型）
  • Gemma 與 Gemma 2（Google 的開源模型）
  • LLaVA、Moondream、Florence‑2（視覺‑語言）
  • MusicGen（音訊生成）
  • Depth Pro、RT‑DETR、Sapiens、PyAnnote（專門的視覺與音訊任務）

原文中的氣泡圖示說明了這些新族群。完整清單可於 https://huggingface.co/docs/transformers.js/index#models 查閱。

範例專案與模板 – 展示 WebGPU

此版本提供 25 個全新範例倉庫，多數展示 WebGPU 加速。重點包括：

  • Phi‑3.5 WebGPU – 在瀏覽器中完整執行 3.8 B 參數的大型語言模型。
  • Whisper Turbo WebGPU – 使用 Whisper 模型在 GPU 上即時語音轉文字。

所有範例皆託管於 https://github.com/huggingface/transformers.js-examples，並將於該處統一管理。

超過 1,200 個已預先轉換的模型於 Hub 上

社群已將超過 1,200 個模型轉換為 Transformers.js 所需的 ONNX 格式。可搜尋的清單位於 https://hf.co/models?library=transformers.js。

若要轉換自訂模型，請使用提供的腳本：

python -m scripts.convert --quantize --model_id <model_name_or_path>

上傳後，請為倉庫加上 transformers.js 標籤，以便被發現。

伺服器端 JavaScript 執行環境支援

Transformers.js v3 可在三大最受歡迎的執行環境上運行：

執行環境 相容性 範例倉庫
Node.js (ESM + CJS) 完整支援，npm 套件 https://github.com/huggingface/transformers.js-examples/tree/main/node-esm
Deno 安全預設，實驗性 WebGPU https://github.com/huggingface/transformers.js-examples/tree/main/deno-embed
Bun 高效能打包工具與執行環境 https://github.com/huggingface/transformers.js-examples/tree/main/bun

NPM 與 GitHub 新的首頁

此套件現在以官方 Hugging Face 命名空間 @huggingface/transformers 發佈（先前為 @xenova/transformers）。

原始碼已遷移至 https://github.com/huggingface/transformers.js。此舉將議題追蹤、Pull Request 貢獻與社群互動集中於 Hugging Face 組織之下。

影響

  • 效能：WebGPU 使瀏覽器端推論達到桌面級速度，解鎖即時應用，如互動聊天、即時轉錄與裝置端視覺。
  • 彈性：擴充的 dtype API 與模組別量化讓開發者能在記憶體、延遲與精度之間取得平衡，適用於各種硬體。
  • 生態系統成長：支援 120 種架構與超過 1,200 個已預轉換模型，降低在 JavaScript 環境中使用最先進模型的門檻。
  • 可移植性：相容於 Node.js、Deno 與 Bun，使相同程式碼可在瀏覽器、無伺服器後端或邊緣執行環境中運行，簡化部署流程。
  • 社群一致性：將套件與倉庫移至 Hugging Face 組織下，統一品牌形象，並鼓勵更廣泛的 HF 生態系統貢獻。

入門檢查清單

  1. 透過 npm 或 CDN 安裝 @huggingface/transformers。
  2. 從 Hub 中選擇模型（確保其具備 transformers.js 標籤）。
  3. 決定使用的裝置（"cpu"、"wasm" 或 "webgpu"）。
  4. （可選）為量化選擇 dtype 或模組別 dtype 映射。
  5. 使用高階的 pipeline API 或低階模型類別執行推論。
  6. 視需求將相同程式碼部署至 Node.js、Deno 或 Bun。

參考資料

本文總結了 Hugging Face 官方部落格文章「Transformers.js v3：WebGPU 支援、新模型與任務，以及更多…」於 2024‑10‑22 發布。

Sources