Transformers.js を使った ML パワード ウェブゲームの作成

Hugging Face は、Doodle Dash の開発について詳しく説明しています。これはユーザーのブラウザ内で完全に動作するリアルタイムの機械学習 (ML) パワード ウェブゲームです。Transformers.js を活用することで、サーバーのレイテンシが解消され、ユーザーが描画している間にモデルが 1 秒間に 60 回以上の予測を行えるようになります。

モデルのトレーニングとアーキテクチャ

Doodle Dash の核となるのは、Google の "Quick, Draw!" データセットのサブセットで訓練されたスケッチ検出モデルで、これは 345 カテゴリにわたって 500 万枚以上の絵を含んでいます。

モデル選択

開発者は、apple/mobilevit-small（ImageNet-1k で事前学習された軽量な Vision Transformer (ViT)）をファインチューニングしました。このモデルは、モバイルフレンドリーなアーキテクチャと小さなフットプリントのため選ばれ、パラメータ数はわずか 560 万、ファイルサイズは約 20 MB であり、ブラウザ内での実行に最適です。

ファインチューニング プロセス

ファインチューニング ワークフローには、以下の技術的手順が含まれています：

  1. Data Loading: "Quick, Draw!" データセットのサブセットをインポートする。
  2. Preprocessing: MobileViTImageProcessor を使用してデータを変換する。
  3. Configuration: コラテ関数と評価指標を定義する。
  4. Model Initialization: 事前学習済みの MobileViTForImageClassification モデルをロードする。
  5. Training: Trainer と TrainingArguments ヘルパー クラスを利用する。
  6. Evaluation: 🤗 Evaluate ライブラリを使用してパフォーマンスを検証する。

Transformers.js を使ったブラウザ デプロイ

Transformers.js は、バックエンド サーバーを必要とせずにブラウザ内で直接 🤗 Transformers モデルを実行できる JavaScript ライブラリです。Python ライブラリと機能的に等価な API を提供します。

ONNX へのモデル変換

Transformers.js は実行に ONNX Runtime を使用するため、PyTorch モデルは ONNX 形式に変換する必要があります。これは、Transformers.js リポジトリに提供されている変換スクリプトを使って 🤗 Optimum ライブラリで実現されます：

python -m scripts.convert --model_id <model_id>

技術的実装

計算コストの高い推論プロセスがメイン UI スレッド（レンダリングとユーザー入力を処理）をブロックしないように、ゲームは Web Workers API を実装しています。推論ロジックは別のワーカー スレッド (worker.js) に隔離されており、そこで image-classification パイプラインが初期化され、グレースケール画像が処理されて予測が返されます。

ゲーム設計と最適化

リアルタイム推論ループ

数秒ごとに予測を行う元の "Quick, Draw!" ゲームとは異なり、Doodle Dash はブラウザ内推論の高周波パフォーマンスを活用して、より高速なゲームループを作成します：

  • Objective: 60 秒以内に可能な限り多くの落書きを描こうとする。
  • Mechanics: 正しい予測があるとすぐにキャンバスがクリアされ、新しい単語が促される。
  • Penalty: 単語をスキップすると、残り時間から 3 秒が減算される。
  • Score Adjustment: モデルが単にラベルを消去するのを防ぐため、ゲームは最初の n 個の誤ったラベルに対してスコアを減少させ、時間とともに n が増加する。

データセットの改良

モデルサイズが小さい (~20MB) にもかかわらずゲームの品質を維持するため、開発者は元の 345 クラスをフィルタリングしました。ラベルは次の条件に該当する場合に削除されました：

  • 他のラベルと類似しすぎている（例: "barn" vs. "house"）。
  • 理解や詳細な描写が困難すぎる（例: "animal migration" または "brain"）。
  • あいまいである（例: "bat"）。

このフィルタリング プロセスにより、最終的には 300 種類以上の異なるクラスが得られました。

Sources