Transformers.jsでブラウザ上で直接AIモデルを実行する

Webアプリケーションがテキストを分類したり、音声を文字起こししたり、画像内のオブジェクトを検出したりできるとしたら—しかもサーバーにデータを送信することなく—どうでしょうか?それを可能にするのがTransformers.jsです。JavaScriptのみを使用して、ブラウザでクライアントサイドAI推論を実現します。

Transformers.jsとは?

Transformers.jsは、Hugging Faceが提供するJavaScriptライブラリで、事前学習済み機械学習モデルをブラウザ上で直接実行できます—バックエンドのモデルサーバーは不要です。Hugging FaceのPython transformersライブラリのAPIを模倣しているため、以前にそれを使用したことがあれば、メンタルモデルがスムーズに移行できます。

メンテナンスされているパッケージは@huggingface/transformersです。古い参照で@xenova/transformersを見かけた場合、それはプロジェクトがHugging Faceのメンテナンス下に移行する前に使用されていた以前のパッケージ名を指しています。現在の安定版リリースはv3系で、v4の開発プレビューも利用可能ですが、まだ普遍的に安定しているわけではありません。

ブラウザAI推論の実際の仕組み

Transformers.jsは、JavaScript環境向けにコンパイルされたONNX Runtimeを使用してモデルを実行します。ONNX(Open Neural Network Exchange)は、PyTorch、TensorFlow、JAXで学習されたモデルをブラウザで実行できるようにする汎用フォーマットとして機能します。

デフォルトでは、推論は**WebAssembly(WASM)**を介してCPU上で実行されます—これは事実上すべての最新ブラウザで動作します。サポートされているハードウェアでより良いパフォーマンスを得るには、WebGPUを選択でき、計算をGPUにオフロードします。

WebGPUの利用可能性は、ブラウザやプラットフォーム全体で進化し続けています。現在の実装状況はwebstatus.devで確認できます。実際には、サポートとパフォーマンスは、ブラウザ、オペレーティングシステム、GPUドライバーによって依然として異なります。

最大限の互換性が必要な場合はWASMを使用してください。パフォーマンスが重要で、WebGPUをサポートする最新ブラウザをターゲットにしている場合は、WebGPUに切り替えてください。

すべてのHugging Faceモデルがブラウザで実行できるわけではない

これは重要な制約です:モデルがTransformers.jsで動作するには、ONNX互換のウェイトが必要です。DistilBERT、Whisper、T5、Llama、Qwenなど、多くの人気アーキテクチャは、すでにHugging Face HubでONNXバージョンが利用可能です。ONNX版がないモデルについては、Optimumを使用して変換できます。

ブラウザ環境はリソースが制約されているため、量子化モデルが実用的なデフォルトです。dtypeオプションでこれを制御します:

• "fp32" — 完全精度、WebGPUのデフォルト
• "fp16" — 半精度、GPUに適したバランス
• "q8" — 8ビット量子化、WASMのデフォルト
• "q4" — 4ビット量子化、最小かつ最速

最初のパイプラインを実行する

pipeline APIは、前処理、推論、後処理を1回の呼び出しで処理します。パッケージをインストールします:

npm install @huggingface/transformers

次に、数行で感情分析を実行します:

import { pipeline } from "@huggingface/transformers";

// デフォルトでWASMを使用し、タスクのデフォルトモデルを使用
const classifier = await pipeline("sentiment-analysis");
const result = await classifier("I love building with Transformers.js!");
console.log(result); // [{ label: 'POSITIVE', score: 0.9998 }]

fp16精度でWebGPUを有効にするには:

const classifier = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu", dtype: "fp16" }
);

モデルファイルは最初のダウンロード後にブラウザにキャッシュされるため、繰り返しの使用—オフラインを含む—では再取得は不要です。本番環境では、Hubに直接依存するのではなく、モデルアセットをセルフホスティングすることを検討してください。

実用的な注意点:デフォルトでは、推論はメインスレッドで実行され、重い計算中にUIがフリーズする可能性があります。推論をWeb Workerに移動することが、本番機能における適切なパターンです。

これがフロントエンド開発者にとって重要な理由

Transformers.jsでブラウザ上でAIモデルを実行することで、サーバーサイド推論では同じようにクリーンに対応できないユースケースが開かれます:

• プライバシー保護推論 — ユーザーデータがデバイスから外に出ない
• オフラインAIアプリケーション — 初回モデルダウンロード後はネットワーク接続なしで動作可能
• サーバーコストの削減 — プロビジョニングやスケールするバックエンドGPUワークロードの削減
• 低レイテンシ機能 — APIエンドポイントへのネットワークラウンドトリップがない

サポートされているタスクリストは広範です:テキスト分類、要約、翻訳、物体検出、画像セグメンテーション、音声認識、テキスト読み上げなど。

まとめ

Transformers.jsは、フロントエンド開発者にとってブラウザベースのAIをますます実用的にします。小さな量子化モデルから始めて、タスクがユースケースに適合するか検証し、そこから最適化してください—速度のためのWebGPU、UIレスポンシブネスのためのWeb Worker、本番環境の信頼性のためのセルフホストモデル。公式ドキュメントとモデルハブが次のベストステップです。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.