- Transformers.jsは、サーバーなしでブラウザ上で 🤗 Transformers モデルを実行するためのライブラリで、Hugging Face の Python
transformers と機能的に同等で、類似した API を目指している
- モデル実行には ONNX Runtime を使用し、PyTorch・TensorFlow・JAX の事前学習済みモデルは 🤗 Optimum で ONNX に変換して利用できる
pipeline API により、感情分析のようなタスクを Python に近い方法で呼び出せ、モデル ID やパスを第2引数に指定して別のモデルを選べる- ブラウザでのデフォルト実行は WASM ベースの CPU で、
device: 'webgpu' により WebGPU 実行を選択できるが、WebGPU API は多くのブラウザでまだ実験的である
- Web ブラウザのようなリソース制約のある環境では、
dtype で "fp32", "fp16", "q8", "q4" などのデータ型を選び、帯域幅と性能を調整できる
ブラウザで実行する Transformers
- Transformers.jsは、サーバーなしでブラウザ上で 🤗 Transformers を直接実行するよう設計されたライブラリである
- Hugging Face の Python transformers ライブラリと機能的に同等な使用体験を目指しており、同じ事前学習済みモデルを非常によく似た API で実行できる
- 対応タスクは複数のモダリティにまたがる
- 自然言語処理: テキスト分類、固有表現認識、質問応答、言語モデリング、要約、翻訳、多肢選択、テキスト生成
- コンピュータビジョン: 画像分類、物体検出、セグメンテーション、深度推定
- 音声: 自動音声認識、音声分類、テキスト読み上げ
- マルチモーダル: 埋め込み、ゼロショット音声分類、ゼロショット画像分類、ゼロショット物体検出
実行方式とモデル変換
インストールとブラウザでの利用
- NPM パッケージは次のコマンドでインストールする
npm i @huggingface/transformers
- バンドラなしの vanilla JS でも利用でき、CDN や静的ホスティング経由で ES Modules として読み込める
<script type="module">
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0';
</script>
Python に似た pipeline API
pipeline API は、事前学習済みモデル、入力前処理、出力後処理をまとめ、ライブラリでモデルを実行する最も簡単な方法である- Python
transformers の感情分析サンプルと同様に、JavaScript でも pipeline('sentiment-analysis') を作成し、テキストを入力して結果を受け取れる
import { pipeline } from '@huggingface/transformers';
const pipe = await pipeline('sentiment-analysis');
const out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]
- 別のモデルを使うには、
pipeline 関数の第2引数に モデル ID またはパス を指定する
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/bert-base-multilingual-uncased-sentiment'
);
CPU、WebGPU、量子化オプション
- ブラウザ実行のデフォルトは WASM ベースの CPU 実行である
- GPU で実行するには
device: 'webgpu' を設定する
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
{
device: 'webgpu',
}
);
- WebGPU に関する詳細は WebGPU guide にある
- WebGPU API は多くのブラウザでまだ実験的なため、問題が発生した場合は WebGPU のバグレポートを提出するよう案内している
- リソースが限られた Web ブラウザ環境では、量子化モデルの利用が推奨される
dtype オプションでモデルのデータ型を選択する- 一般的な選択肢は
"fp32"（WebGPU のデフォルト）、"fp16", "q8"（WASM のデフォルト）, "q4" である
- 詳細は quantization guide にある
const pipe = await pipeline(
'sentiment-analysis',
'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
{
dtype: 'q4',
}
);
カスタム設定
import { env } from '@huggingface/transformers';
env.localModelPath = '/path/to/models/';
env.allowRemoteModels = false;
env.backends.onnx.wasm.wasmPaths = '/path/to/files/';
対応タスクとモデル範囲
- Hugging Face Hub で互換モデルを探すには、transformers.js ライブラリタグで絞り込める
- 対応タスクは自然言語処理、ビジョン、音声、マルチモーダル、強化学習にまたがっており、一部のタスクはまだ未対応である
- 自然言語処理では fill-mask、question-answering、summarization、text-classification、text-generation、token-classification、translation、zero-shot-classification、feature-extraction などが対応している
- ビジョンでは background-removal、depth-estimation、image-classification、image-segmentation、image-to-image、object-detection、image-feature-extraction などが対応している
- 音声では audio-classification、automatic-speech-recognition、text-to-speech が対応している
- マルチモーダルでは document-question-answering、image-to-text、zero-shot audio/image classification、zero-shot object detection などが対応している
- まだ対応していないタスクも明記されている
- table-question-answering、mask-generation、video-classification、unconditional-image-generation
- audio-to-audio、tabular-classification、tabular-regression
- text-to-image、visual-question-answering
- 対応モデルアーキテクチャ一覧には BERT、BART、CLIP、DistilBERT、Whisper、Llama、Qwen、Gemma、Phi、Segment Anything、ViT など多数のモデル系列が含まれる
- 目的のタスクやモデルが一覧にない、またはまだ未対応であれば、機能リクエストを作成できる
1件のコメント
Hacker Newsの意見
ブラウザ内でCLIP: https://observablehq.com/@simonw/openai-clip-in-a-browser
detra-resnet-50で画像中の物体検出: https://observablehq.com/@simonw/detect-objects-in-images
モデルサイズは最初は制約のように感じるが、良いノートPCと回線を持つユーザーに対して、読み込みに30秒ほど待ってもらうのがそこまで不合理ではないアプリもかなりある
最新リリースではバイナリ埋め込み量子化のサポートが追加されていて、ぜひ試してみたい: https://github.com/xenova/transformers.js/releases/tag/2.17....
transformers.js v3のnpmパッケージを作ってあって、更新する必要がありそう。この機能がまだ含まれているかははっきりしない
主にbunで動くようにするためにフォークを維持してきたが、v3がリリースされたらbunをきちんとサポートする予定。ただしWebGPUは動かないだろうが、オプション機能ではある
[編集: 使いたければDMしてほしい。フォークを宣伝したいわけではない]
384次元しかないが、段落単位のテキストでは驚くほどうまく機能する。ランキングでもtext-embedding-ada-002より上に出ている
https://huggingface.co/spaces/mteb/leaderboard
https://syntax.fm/show/740/local-ai-models-in-javascript-mac...
BRIA AIのRMBG1.4モデルで画像の背景除去を行う小さなWebアプリを作った: https://aether.nco.dev
データをAPIに送る必要がなく、スマートフォンでも動く点がとても良い。今後は小規模なビジョン、言語、その他のユーティリティモデル（深度推定、背景除去など）でこれを使うプロジェクトが増えていくと思うし、Webの未来は明るく見える
次のプロジェクトにもすでに取り組んでいて、そこでも間違いなくtransformers.jsをまた使う予定だ
サーバーやElectronアプリで使う複数のRAG戦略のために、埋め込みと検索戦略をテストする計画だ
どちらもいまひとつだ
長期的には、ブラウザが一部のモデルを内蔵し、標準化されたWeb APIとして公開する形が正しいのかもしれないが、そうした取り組みが進んでいるという話はまだ聞いたことがない
(44MB) ブラウザ内の背景除去: https://huggingface.co/spaces/Xenova/remove-background-web. WebGPU版もある: https://huggingface.co/spaces/Xenova/remove-background-webgp...
(51MB) 自動音声認識用のWhisper Web: https://huggingface.co/spaces/Xenova/whisper-web 設定で量子化版を選べばよい
(28MB) 単眼深度推定用のDepth Anything Web: https://huggingface.co/spaces/Xenova/depth-anything-web
(14MB) 画像セグメンテーション用のSegment Anything Web: https://huggingface.co/spaces/Xenova/segment-anything-web
(20MB) 機械学習ベースのスケッチ認識ゲーム Doodle Dash: https://huggingface.co/spaces/Xenova/doodle-dash
このほかにもずっと多くある。別の例はTransformers.jsデモコレクションで見られる: https://huggingface.co/collections/Xenova/transformersjs-dem...
モデルはドメインごとにキャッシュされ（Web Cache APIを使用）、ページを読み込むたびに再ダウンロードする必要はない。ドメインをまたいでモデルを保持したいなら、このライブラリでブラウザ拡張を作ることもできる
最後に述べた部分については進行中の取り組みはあるが、まだ話せる段階ではない
クライアント側にギガバイト級のデータを必要とするWebアプリは、実用的に作るのが難しい。ユーザーが望むだけ長くキャッシュに残ると保証できる安定した方法がなく、たとえ安定してキャッシュできても、ブラウザのキャッシュ分割ポリシーのせいで、同じモデルを使うサイトごとにダウンロードと保存容量が重複する
元のコメントの「非常に非実用的に見える」「モデルはたいていかなり大きい」「150サイト × 800MBモデル」といった部分は、自身で理解不足だと断り書きを入れているようなものに見える
また大きな利点として、transformers は Node.js でも動く。Pythonとその依存関係の奇妙な組み合わせを整えるより、実行環境を用意するほうがはるかに簡単だ
OSがモデルをあらかじめインストールし、ブラウザベンダーも使えるAPIを提供し始めてこそ改善しそうだ
それでも、ほとんどの作業ではクラウドホスティングされたモデルのほうが常にはるかに優れている可能性が高い
Hugging Face Space に WebGPU 埋め込みベンチマークがあり、順伝播の動作感をつかめる: https://huggingface.co/spaces/Xenova/webgpu-embedding-benchm...
それ自体は印象的だが、そのレイテンシでは学習はつらそうだ。fp16、バッチ32、シーケンス長512で、2,200万パラメータのモデルの順伝播に約500msかかる
オンデマンド予測にも確かに可能性が出てきそうだ