Web ML開発プロセス: モデル変換からデプロイまで

WebブラウザでAIモデルを実行するには、単にコードをコピー&ペーストするだけでは不十分です。Python中心のAI研究環境(PyTorch、TensorFlow)で開発されたモデルをJavaScriptおよびWebGPU環境に持ってくるには、体系的な変換とデプロイパイプラインが必要です。

1. モデル学習と選定 (Python Environment)

すべてのWeb MLプロジェクトの始まりは、他のAIプロジェクトと同じです。

学習 (Training)

PyTorchやTensorFlowを使用して目的に合ったモデルを学習させます。この段階では、Web環境の制約を事前に考慮することが重要です。

import torch
import torch.nn as nn

class LightweightModel(nn.Module):
    def __init__(self):
        super().__init__()
        # Webデプロイのためパラメータ数を最小化
        self.conv1 = nn.Conv2d(3, 32, 3, padding=1)
        self.conv2 = nn.Conv2d(32, 64, 3, padding=1)
        self.fc = nn.Linear(64 * 56 * 56, 10)

    def forward(self, x):
        x = torch.relu(self.conv1(x))
        x = torch.max_pool2d(x, 2)
        x = torch.relu(self.conv2(x))
        x = torch.max_pool2d(x, 2)
        x = x.view(x.size(0), -1)
        return self.fc(x)

事前学習モデル選定

Hugging Faceのようなモデルハブから、プロジェクトに適した事前学習モデルを探します。この段階では、モデルの性能だけでなくサイズを重要に考慮する必要があります。Web環境はダウンロード速度とメモリ制約があるためです。

選択基準:

• モデルサイズ: 50MB以下推奨 (初期ロード)
• 推論速度: リアルタイム処理可能か
• ブラウザ互換性: WebGL/WebGPU対応
• ライセンス: 商用利用可能か

2. モデル変換 (Model Conversion)

ブラウザは.pt (PyTorch)や.h5 (Keras)ファイルを直接実行できません。したがってWeb親和的なフォーマットへの変換が必須です。

TensorFlow.js Converter

TensorFlow保存フォーマット(SavedModel)をWebでロード可能なmodel.jsonとバイナリシャードファイルに変換します。

# TensorFlowモデルをTensorFlow.js形式に変換
tensorflowjs_converter \
    --input_format=tf_saved_model \
    --output_format=tfjs_graph_model \
    --signature_name=serving_default \
    --saved_model_tags=serve \
    /path/to/saved_model \
    /path/to/tfjs_model

変換オプション:

• 量子化 (Quantization): 重みをfloat32からint8に変換してサイズを75%削減
• シャーディング (Sharding): 大容量モデルを複数ファイルに分割して並列ダウンロード
• グラフ最適化: 不要な演算削除と最適化

ONNX (Open Neural Network Exchange)

PyTorchモデルは通常、ONNXという中間フォーマットに変換されます。

import torch
import torch.onnx

# PyTorchモデルをONNXにエクスポート
dummy_input = torch.randn(1, 3, 224, 224)
torch.onnx.export(
    model,
    dummy_input,
    "model.onnx",
    export_params=True,
    opset_version=12,
    do_constant_folding=True,
    input_names=['input'],
    output_names=['output']
)

ONNX Runtime Webを使用すると、このフォーマットをブラウザで直接実行でき、互換性が非常に高いです。

// ONNX Runtime Webでモデル実行
import * as ort from "onnxruntime-web";

const session = await ort.InferenceSession.create("model.onnx");
const results = await session.run(feeds);

MLC-LLM (大規模言語モデル用)

最近注目されているLLMをWebで実行するには、TVMコンパイラベースのMLC-LLMツールチェーンを使用します。

# LLMをWebGPU用にコンパイル
mlc_llm compile \
    --model HuggingFaceH4/zephyr-7b-beta \
    --target webgpu \
    --quantization q4f16_1 \
    --output dist/

これはPythonモデルを分析してWebGPUシェーダーコードにコンパイルし、重みを効率的な構造でパッケージングします。

3. 最適化とテスト

変換後は、性能最適化と徹底的なテストが必要です。

性能ベンチマーク

// 推論時間測定
const iterations = 100;
const startTime = performance.now();

for (let i = 0; i < iterations; i++) {
  await model.predict(inputTensor);
}

const avgTime = (performance.now() - startTime) / iterations;
console.log(`平均推論時間: ${avgTime.toFixed(2)}ms`);

クロスブラウザテスト

• Chrome (WebGPU優先)
• Firefox (WebGLフォールバック)
• Safari (Metalバックエンド)
• Edge (DirectXバックエンド)

精度検証

Python元のモデルと変換されたWebモデルの出力を比較して、精度損失が許容範囲内かを確認します。

4. Webアプリケーション統合とデプロイ

変換されたモデルは静的ファイル形式でWebサーバーやCDNにデプロイされます。

モデルロード

// TensorFlow.jsモデルロード例
async function loadModel() {
  console.log("モデルロード開始...");

  // 進行率表示
  const model = await tf.loadLayersModel(
    "https://cdn.example.com/my-model/model.json",
    {
      onProgress: (fraction) => {
        console.log(`ロード進行率: ${(fraction * 100).toFixed(1)}%`);
        updateProgressBar(fraction);
      },
    },
  );

  console.log("モデルロード完了!");
  return model;
}

キャッシング戦略

Service Workerを活用してモデルファイルをキャッシングすると、再訪問時のロード時間を大幅に短縮できます。

// service-worker.js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("ml-models-v1").then((cache) => {
      return cache.addAll([
        "/models/model.json",
        "/models/group1-shard1of4.bin",
        "/models/group1-shard2of4.bin",
        // ... 残りのシャードファイル
      ]);
    }),
  );
});

ユーザー体験最適化

Progressive Loading (段階的ロード)

大容量モデルの場合、全体のダウンロードを待つ代わりに、一部のレイヤーだけで先に動作を開始し、残りはバックグラウンドでロードします。

Warm-up推論

最初の推論はGPU初期化時間のために遅い可能性があります。ダミー入力で一度実行してGPUを準備します。

// GPU Warm-up
await model.predict(tf.zeros([1, 224, 224, 3])).data();

5. CI/CDパイプライン

自動化されたデプロイパイプラインを構築すると、モデル更新がはるかに容易になります。

# GitHub Actions例
name: Deploy ML Model

on:
  push:
    branches: [main]

jobs:
  convert-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Convert Model
        run: |
          python convert_to_tfjs.py

      - name: Deploy to CDN
        run: |
          aws s3 sync ./models s3://my-cdn-bucket/models/
          aws cloudfront create-invalidation --distribution-id XYZ

まとめ

Web ML開発は単なるモデル変換以上の総合的なエンジニアリング作業です。性能、ユーザー体験、デプロイ戦略をすべて考慮してこそ、成功したサービスを作ることができます。

核心ポイント:

• Web環境の制約を最初から考慮したモデル設計
• 適切な変換ツール選択 (TF.js, ONNX, MLC-LLM)
• 徹底した性能最適化とクロステスト
• ユーザー体験を考慮したロード戦略
• 自動化されたデプロイパイプライン

次回はプロダクションレベルのWeb ML最適化技法についてさらに深く扱います。