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 からインポートできます:

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 ASR 例

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（デバイス上で動作する高性能 LLM）
  • 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 パラメータの LLM をブラウザだけで実行します。
  • Whisper Turbo WebGPU – Whisper モデルを GPU で使用したリアルタイム音声認識。 すべての例は https://github.com/huggingface/transformers.js-examples にホストされ、そこに統合されます。

Hub にある 1,200 以上の事前変換済みモデル

コミュニティはすでに 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 は、最も人気のある 3 つのランタイムで動作します:

ランタイム 互換性 例リポジトリ
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
これにより、開発者は Python 依存なしでサーバー、エッジデバイス、またはサーバーレス関数内で推論を実行できます。

NPM と GitHub の新しいホーム

パッケージは現在、公式 Hugging Face スコープ @huggingface/transformers（以前は @xenova/transformers）として公開されています。 ソースコードは https://github.com/huggingface/transformers.js に移動しました。これにより、問題追跡、プルリクエストの貢献、コミュニティのエンゲージメントが Hugging Face 組織の下で一元化されます。

影響

  • Performance: WebGPU はブラウザベースの推論をデスクトップクラスの速度に引き上げ、インタラクティブチャット、ライブ文字起こし、オンデバイスビジョンなどのリアルタイムアプリケーションを実現します。
  • Flexibility: 拡張された dtype API とモジュール別量子化により、開発者はさまざまなハードウェアに対してメモリ、レイテンシ、精度のバランスを取ることができます。
  • Ecosystem growth: 120 のアーキテクチャと 1,200 以上の事前変換済みモデルをサポートすることで、JavaScript 環境で最先端モデルを使用するハードルが下がります。
  • Portability: Node.js、Deno、Bun との互換性により、同じコードがブラウザ、サーバーレスバックエンド、エッジランタイムで実行でき、デプロイパイプラインが簡素化されます。
  • Community alignment: パッケージとリポジトリを 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 にデプロイする。

参考文献

この記事は、2024‑10‑22 に公開された公式 Hugging Face ブログ記事 “Transformers.js v3: WebGPU Support, New Models & Tasks, and More…” を要約しています。

Sources