Transformers.jsを使用した画像と音声のマルチモーダルブラウザAI

この記事では、Transformers.jsを使用して、画像分類、画像キャプション、音声文字起こしといったマルチモーダルAI機能をブラウザ内で完全に実行する方法を学びます。サーバーやAPIキーは不要で、データがユーザーのデバイスから外部に出ることはありません。

ほとんどのブラウザAIチュートリアルはテキストに焦点を当てていますが、実際にユーザーが構築したいアプリケーションはテキストのみであることはほとんどありません。ユーザーは写真を撮り、音声メモを録音し、スクリーンショットをアップロードします。データはマルチモーダルであり、AIも同様であるべきです。

Transformers.jsはこれをネイティブにサポートします。コンピュータビジョン（画像分類、物体検出、セグメンテーション）、オーディオ（自動音声認識、音声分類、テキスト読み上げ）、およびマルチモーダルタスクを、すべてブラウザ内でローカルに実行します。サーバーもAPIキーも不要で、データがデバイスから離れることはありません。

このチュートリアルでは、画像分類、画像キャプション、音声文字起こしの3つの機能を順に構築します。それぞれが独立したHTMLファイルであり、ブラウザで開くことができます。最後のセクションでは、これら3つを統合した単一のマルチモーダルメディアアナライザを構築します。

必要な環境

• モダンブラウザ：Chrome 109+、Edge 109+、またはFirefox 90+。これらのバージョンはTransformers.jsに必要なESモジュールとWebAssemblyをサポートしています。
• ローカルWebサーバー：ブラウザのセキュリティポリシーにより、file:// URLからのESモジュールインポートがブロックされるため、HTMLファイルを直接ダブルクリックして開くだけでは動作しません。HTTP経由で提供する必要があります。

Node.js、npm、またはビルドツールは必要ありません。CDNインポートでライブラリを処理します。

ローカルサーバーの起動

既にインストールされているものに応じて、以下のいずれかを選択します：

• Python：python3 -m http.server 8080
• Node.js：npx serve .
• VS Code：Live Server拡張機能をインストールし、HTMLファイルを右クリックして「Open with Live Server」を選択

サーバーが起動したら、ブラウザでhttp://localhost:8080を開きます。

プロジェクト構造

プロジェクトフォルダを作成し、各タスクに独立したHTMLファイルを用意します：

• multimodal-demo/

- image-classifier.html - image-captioner.html - speech-transcriber.html - media-analyzer.html

モデルとダウンロードサイズ

各モデルは初回実行時に一度ダウンロードされ、ブラウザにキャッシュされます。その後のロードは瞬時に行われ、オフラインでも動作します。初回実行時の推定ダウンロードサイズは以下の通りです：

• 画像分類：Xenova/vit-base-patch16-224、約88 MB
• 画像キャプション：Xenova/vit-gpt2-image-captioning、約246 MB
• 音声文字起こし：Xenova/whisper-tiny.en、約78 MB

統合アプリではすべてのモデルをロードするため、初回は約400 MBのダウンロードが必要です。各モデルの進行状況インジケータは必須のユーザー体験です。

タスク1：画像分類

画像分類は、入力画像を固定のカテゴリセットに割り当てます。ここでは、GoogleがImageNet-21kでトレーニングし、ImageNet-1kでファインチューニングしたVision TransformerであるViT-Base/16モデルを使用します。ONNX形式に変換され、ブラウザで利用可能です。画像を1000のImageNetカテゴリに分類し、信頼度スコアと共にランキングリストを返します。

出力例：

[
  { label: 'golden retriever', score: 0.9421 },
  { label: 'Labrador retriever', score: 0.0312 },
  { label: 'Sussex spaniel', score: 0.0098 },
  // ... top_k results total
]

各オブジェクトにはlabel文字列（ImageNetクラス名）と0から1のscore浮動小数点数が含まれます。デフォルトでは5つの結果を返しますが、top_kパラメータで調整可能です。

コード例（簡略化）：

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
let classifier;
pipeline('image-classification', 'Xenova/vit-base-patch16-224', {
  dtype: 'q8',
  progress_callback: (p) => { /* 進行状況を更新 */ }
}).then(pipe => { classifier = pipe; });
async function classifyImage(dataUrl) {
  const results = await classifier(dataUrl, { top_k: 5 });
  // 結果を表示
}

タスク2：画像キャプション

画像キャプションは、画像の内容を説明する自然言語文を生成します。分類とは異なり、固定ラベルから選択するのではなく、自由形式のテキストを生成します。モデルはXenova/vit-gpt2-image-captioningで、Vision TransformerエンコーダとGPT-2デコーダを組み合わせたものです。ONNX版は約246 MBです。

出力例：

[{ generated_text: 'a dog is playing on a tennis court' }]

タスク3：音声文字起こし

OpenAIのWhisperモデル（whisper-tiny.en）を使用して、ブラウザ内で音声文字起こしを実装します。Web Audio APIを介してマイク入力をキャプチャします。

マルチモーダルメディアアナライザ

上記3つの機能を統合し、統一されたダッシュボードを提供します。モデルを並行してロードすることで高速化を図ります。

要約すると、このチュートリアルは、プライバシー保護とオフライン機能を強調し、ブラウザ内でクライアント側マルチモーダルAIを実装するための完全なガイドを提供します。