Posted inAI

ブラウザでAIを動かす：Transformers.jsとWebGPU活用ガイド

AI tutorial - IT technology blog
AI tutorial - IT technology blog

サーバーサイドAIとクライアントサイドAIの比較

AIのデプロイは、多くの場合、予測可能かつ高コストなパターンに従います。ユーザーデータをFastAPIが動作するPythonバックエンドに送信し、そこから強力なGPUクラスターにクエリを投げます。これはGPT-4のような巨大なモデルには適していますが、高いレイテンシ、膨大なインフラ費用、そして機密データがユーザーのデバイスを離れることによるプライバシーリスクを伴います。

クライアントサイドAIはこのアーキテクチャを逆転させます。データをモデルに送るのではなく、モデルをデータのある場所に持っていくのです。Transformers.jsを使用すれば、最適化されたHugging Faceのモデルをブラウザ内で直接実行できます。WebGPUが成熟した今、ブラウザからローカルのグラフィックスカードに直接アクセスできるようになりました。これにより、クラウドGPUに一銭も費やすことなく、テキスト分類、画像認識、さらには小規模言語モデル（SLM）を実行することが可能です。

最近、あるチームが感情分析機能をAWS Lambdaからフロントエンドに移行するのを支援しました。その結果、月間のAPIコストを1,200ドルからゼロに削減できました。さらに重要なのは、ネットワークの往復（300ms〜500ms）が解消されたことで、ユーザー体験が非常に軽快になったことです。

トレードオフ：ローカル化すべきタイミング

フロントエンドAIは万能な解決策ではありません。メリットとブラウザ環境の技術的な制約を天秤にかける必要があります。

メリット

  • スケーリングコストがゼロ: ユーザーが計算リソースを提供します。唯一の費用は、HTML、JS、モデルの重みなどの静的ファイルのホスティング代だけです。
  • プライバシー・バイ・デザイン: データがクライアントの外に出ることはありません。これは、データの主権が譲れないヘルスケアや金融系アプリにとって大きな利点です。
  • オフライン利用: ブラウザがモデルをIndexedDBにキャッシュすれば、機内モードでもアプリケーションが動作します。
  • 即時の推論: ローカル実行によりネットワークのオーバーヘッドがなくなります。最新のノートPCなら、小規模なモデルは20ms以下で入力を処理できます。

デメリット

  • 初期ペイロードが重い: AIモデルは巨大です。高度に圧縮されたモデルでも40MBから150MBほどあり、モバイルデータ通信制限のあるユーザーを困らせる可能性があります。
  • ハードウェアによる性能差: パフォーマンスはユーザーの端末に依存します。2024年モデルのMacBook Proなら快適ですが、5年前の格安スマートフォンではUIの応答性を維持するのに苦労するかもしれません。
  • メモリ制限: ブラウザのタブでLlama-3 70Bを動かすことはできません。ブラウザが各ページに割り当てるVRAMとシステムメモリの制限を厳守する必要があります。

ツールキット：推奨セットアップ

複雑なPython環境は不要です。最新のフロントエンドスタックがあれば十分です。プロダクション環境向けのアプリケーションには、以下のツールをお勧めします。

  • Vite: 高速なビルドとホットモジュールリプレースメント（HMR）の標準ツール。
  • Transformers.js (v3): Hugging FaceエコシステムのJavaScript実装。
  • WebGPU: ハードウェアアクセラレーションによるグラフィックスと計算のための最新API。

以下のコマンドで環境を構築します。 

npm create vite@latest browser-ai -- --template react-ts
cd browser-ai
npm install @huggingface/transformers

アプリケーションの構築

実践的な例から始めましょう。MobileNetV2を使用して画像分類器を作成します。このモデルは約13MBで、ウェブへのデプロイに最適です。

例1：画像分類

Transformers.jsは「パイプライン」という抽象化を使用します。これにより、画像のサイズ変更、正規化、モデルの出力ラベルのデコードといった重い処理を簡単に扱えます。

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

function ImageClassifier() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const classify = async (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    
    reader.onload = async (event) => {
      setLoading(true);
      // ウェブに適したモデルでパイプラインを初期化
      const classifier = await pipeline('image-classification', 'Xenova/mobilenetv2_1.0_224');
      
      const output = await classifier(event.target.result);
      setResult(output);
      setLoading(false);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={classify} />
      {loading && <p>モデルをダウンロード中 (13MB)...</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}

初回実行時にダウンロードが開始されます。その後、ブラウザは重みデータをローカルに保存するため、2回目以降の分類はほぼ瞬時に開始されます。

例2：SLMによるテキスト生成

テキスト生成は画像分類よりもリソースを消費します。バックエンドなしで基本的な推論や要約タスクを行うには、LaMini-Flan-T5が適しています。

const generateText = async (prompt) => {
  const generator = await pipeline('text2text-generation', 'Xenova/LaMini-Flan-T5-78M');
  const output = await generator(prompt, {
    max_new_tokens: 50,
    temperature: 0.7,
  });
  console.log(output[0].generated_text);
};

WebGPUでパフォーマンスを解放する

デフォルトでは、Transformers.jsはWebAssembly (WASM)にフォールバックすることがあります。WASMはほぼすべての環境と互換性がありますが、CPUで動作するため、大きなタスクでは低速になることがあります。WebGPUは、パフォーマンスに劇的な変化をもたらします。

私のベンチマークでは、中価格帯のノートPCにおいて、WASMで8秒かかっていたテキスト生成タスクが、WebGPUを使用するとわずか1.5秒に短縮されました。これを有効にするには、ハードウェアアクセラレーションのためにデバイスを指定するだけです。

// ハードウェアアクセラレーションのためにWebGPUを強制
const pipe = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english', {
  device: 'webgpu',
});

モデルのライフサイクル管理

よくある間違いは、ユーザーがUIを操作するたびにモデルを再ロードしてしまうことです。これはメモリの無駄遣いであり、ラグの原因になります。代わりに、シングルトンパターンを使用してモデルをメモリ内に保持します。

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

let classifierPromise = null;

export const getClassifier = () => {
  if (!classifierPromise) {
    classifierPromise = pipeline('image-classification', 'Xenova/resnet-50', {
      device: 'webgpu'
    });
  }
  return classifierPromise;
};

ブラウザベースのAIは、技術的な好奇心の対象から、実用的なプロダクション戦略へと進化しました。Transformers.jsとWebGPUを組み合わせることで、クラウド予算を抑えながら、より高速でプライバシーに配慮したアプリを構築できます。まずは分類のような単純なタスクのオフロードから始め、慣れてきたらより大きな生成モデルに挑戦してみてください。

Share:
Tags: