Transformers.jsで、ブラウザだけで感情分析を動かす仕組み

結論を先に。Transformers.js を使うと、サーバもAPIキーも用意せず、ブラウザの中だけで感情分析のモデルを動かせます。モデルは HuggingFace から一度ダウンロードしてブラウザにキャッシュされ、推論は WASM 上で走り、入力テキストは外部に送られません。実際に作ったアプリ（記事末尾にリンク）のコードで、その仕組みを説明します。

Transformers.js とは

Transformers.js は、HuggingFace が提供する JavaScript 向けのライブラリです。Python の transformers と同じ感覚で、pipeline を呼ぶだけで推論ができます。中身は、ONNX 形式に変換されたモデルを、onnxruntime-web（WebAssembly）を通してブラウザ上で実行する仕組みです。

つまり、推論サーバを立てる必要も、外部APIを叩く必要もありません。

最小コード

CDN から読み込み、パイプラインを作って、テキストを渡すだけです。

import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
env.allowLocalModels = false;

const classifier = await pipeline(
  'sentiment-analysis',
  'Xenova/bert-base-multilingual-uncased-sentiment'
);

const out = await classifier('この映画、想像以上に最高だった。', { topk: 5 });
console.log(out);
// [{ label: '5 stars', score: 0.72 }, { label: '4 stars', score: 0.18 }, ...]

pipeline() の中で、モデルとトークナイザのダウンロード、トークナイズ、推論、後処理（softmax）まで全部やってくれます。

なぜブラウザだけで動くのか

順番に分解するとこうなります。

初回に、指定したモデルの重み（ONNX）とトークナイザを HuggingFace Hub から取得する
取得したファイルはブラウザのキャッシュ（IndexedDB）に保存される。2回目以降はダウンロード不要
推論は onnxruntime-web、すなわち WebAssembly 上で実行される。GPUがなくても動く
入力テキストはこの一連の処理の中で完結し、どこのサーバにも送られない

サーバ不要・APIキー不要・データは端末内、という三拍子がそろうのが、この方式の強みです。

日本語に対応させる

感情分析のデフォルトモデルは英語専用です。日本語も判定したい場合は、多言語モデルを指定します。今回は nlptown の多言語センチメント（5段階の星評価）を使いました。

const classifier = await pipeline(
  'sentiment-analysis',
  'Xenova/bert-base-multilingual-uncased-sentiment'
);

このモデルは入力を1〜5の星で評価して返すので、1〜2をネガティブ、3を中立、4〜5をポジティブ、と読み替えて表示しています。topk: 5 を渡すと、5段階それぞれの確率が取れるので、分布をバーで見せられます。

メリットと制約

メリット：サーバ運用コストゼロ、APIキー管理なし、プライバシーが高い（端末内処理）、一度読めばオフラインでも動く
制約：初回はモデルのダウンロードがある（数十MB規模）。推論はWASMなので大型モデルは重い。量子化版を選ぶと軽くなる
精度は使うモデル次第で、確率的なので万能ではない

軽い推論をフロントだけで完結させたいとき、Transformers.js はとても手軽な選択肢です。

実際に動かす

この記事のしくみを、そのまま動かせるアプリを置いています。文章を入れると、ブラウザの中で感情を判定します。

🤖 感情分析アプリ（Transformers.js）を試す →