Transformers.js - ブラウザで動くAI機械学習ライブラリの実力

はじめに

30代になって思うのは、技術の進化って本当に早いなということ。数年前まで機械学習といえばPythonでサーバーサイドで動かすのが当たり前だったのに、今やブラウザ上でAIが動く時代になっている。

今回紹介するTransformers.jsは、まさにその流れを象徴するライブラリだ。Hugging Faceが開発したこのライブラリを使えば、サーバーなしでブラウザ上で直接機械学習モデルを実行できる。個人的には、これがJavaScript開発者にとってAIを活用する最も手軽な方法だと思っている。

GitHubで15,000以上のスターを獲得しているだけあって、コミュニティも活発で安心して使える。

特徴・メリット

サーバー不要でブラウザで完結

一番のメリットは、APIサーバーを用意しなくてもいいという点。ユーザーのブラウザ上でモデルが動作するため、サーバーコストがかからない。個人開発やスタートアップには特に嬉しい話だと思う。

Python版と同等のAPI

Hugging FaceのPython版transformersライブラリと互換性のあるAPIを提供している。Pythonで機械学習を触ったことがある人なら、ほぼ同じ書き方でJavaScriptでもAIを動かせる。学習コストが低いのは正直ありがたい。

幅広いタスクに対応

自然言語処理だけでなく、画像認識や音声認識まで対応している。具体的には以下のようなタスクが可能だ。

自然言語処理: 感情分析、テキスト分類、質問応答、翻訳、要約、テキスト生成
コンピュータビジョン: 画像分類、物体検出、セグメンテーション、深度推定
音声処理: 音声認識、音声分類、テキスト音声変換
マルチモーダル: ゼロショット画像分類、ゼロショット物体検出

WebGPU対応で高速化

最新版ではWebGPUに対応しており、GPUを使った高速な推論が可能になっている。これ、意外と重要なポイントで、ブラウザでもそれなりの速度でモデルを動かせるようになった。

量子化オプション

リソースが限られたブラウザ環境では、モデルの量子化が効いてくる。fp32、fp16、q8、q4といったデータ型を選択でき、帯域幅の削減とパフォーマンス最適化ができる。

インストール方法

npm経由

npm install @huggingface/transformers

CDN経由

HTMLファイルで直接使う場合はこちら。

<script type="module">
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1';
</script>

基本的な使い方

感情分析の例

最もシンプルな使い方はpipeline関数を使う方法。Python版を使ったことがある人には馴染みのある書き方だと思う。

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

// 感情分析パイプラインを作成
const classifier = await pipeline('sentiment-analysis');

// テキストを分析
const result = await classifier('I love transformers!');
console.log(result);
// [{ label: 'POSITIVE', score: 0.999817686 }]

日本語対応モデルを使う

特定のモデルを指定することもできる。日本語を扱いたい場合は多言語対応モデルを指定する。

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

const result = await classifier('この製品は素晴らしいです');
console.log(result);

WebGPUで高速化

GPUを使って高速に推論したい場合はdeviceオプションを指定する。

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

量子化モデルを使う

軽量なモデルを使いたい場合は、dtypeオプションで量子化レベルを指定できる。

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

実践的なユースケース

音声認識（Whisper）

OpenAIのWhisperモデルを使って音声からテキストに変換できる。

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

const transcriber = await pipeline(
  'automatic-speech-recognition',
  'Xenova/whisper-small'
);

const result = await transcriber(audioData);
console.log(result.text);

画像分類

画像をアップロードして、何が写っているか分類することもできる。

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

const classifier = await pipeline(
  'image-classification',
  'Xenova/vit-base-patch16-224'
);

const result = await classifier(imageUrl);
console.log(result);
// [{ label: 'cat', score: 0.95 }, ...]

テキスト翻訳

多言語翻訳もブラウザ上で実行可能だ。

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

const translator = await pipeline(
  'translation',
  'Xenova/nllb-200-distilled-600M'
);

const result = await translator('Hello, how are you?', {
  src_lang: 'eng_Latn',
  tgt_lang: 'jpn_Jpan'
});
console.log(result[0].translation_text);

物体検出

画像内の物体を検出し、位置を特定することもできる。

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

const detector = await pipeline(
  'object-detection',
  'Xenova/detr-resnet-50'
);

const result = await detector(imageUrl);
// [{ label: 'person', score: 0.99, box: { xmin, ymin, xmax, ymax } }, ...]

ゼロショット画像分類

事前に学習していないカテゴリでも分類できるのがゼロショット分類の強み。

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

const classifier = await pipeline(
  'zero-shot-image-classification',
  'Xenova/clip-vit-base-patch32'
);

const result = await classifier(imageUrl, ['猫', '犬', '鳥', '車']);
console.log(result);

対応モデル

Transformers.jsは非常に多くのモデルアーキテクチャに対応している。主要なものを挙げると以下の通り。

BERT系: BERT、DistilBERT、RoBERTa、ALBERT、DeBERTa
GPT系: GPT-2、GPT-Neo、GPT-J
T5系: T5、FLAN-T5、mT5
Vision系: ViT、DeiT、ConvNeXT、ResNet、MobileNet
Audio系: Whisper、Wav2Vec2、HuBERT
Multimodal系: CLIP、OWL-ViT、SigLIP

Hugging Face Hubで「transformers.js」タグで検索すると、対応モデルを見つけることができる。

パフォーマンスTips

実運用で使う際のポイントをいくつか。

1. モデルのキャッシュ

一度ダウンロードしたモデルはブラウザにキャッシュされる。初回は少し時間がかかるが、2回目以降は高速に起動する。

2. 適切なモデルサイズ選択

大きなモデルほど精度は上がるが、ダウンロード時間とメモリ消費も増える。用途に応じて適切なサイズを選ぶのが重要だ。個人的にはdistil系のモデルから始めることをおすすめする。

3. Web Worker活用

重い処理はメインスレッドで実行するとUIがフリーズする。Web Workerで別スレッドで実行することで、スムーズなUXを実現できる。

// worker.js
import { pipeline } from '@huggingface/transformers';

let classifier;

self.onmessage = async (e) => {
  if (!classifier) {
    classifier = await pipeline('sentiment-analysis');
  }
  const result = await classifier(e.data);
  self.postMessage(result);
};