ブラウザ完結型AI背景合成の技術解剖

1. Wasmによる「完全ローカル」AI推論

一般的な背景透過サービスは、画像をサーバーにアップロードしてGPUサーバーで処理しますが、本実装ではブラウザ上で直接モデルを叩く手法を採用しました。これにより、以下のメリットを同時に享受しています。

• 圧倒的なプライバシー保護: 画像データがネットワークに流れないため、機密性の高い写真でも安心して処理できます。
• 低コスト運用: サーバー側で高価なGPUを回す必要がないため、完全無料で提供可能になっています。
• 即時性: 通信待ち（アップロード・ダウンロード）がないため、一度Wasmモジュールが読み込まれれば瞬時に処理が始まります。

// AIエンジンの初期化（コンセプト）
async function initAI() {
    const vision = await FilesetResolver.forVisionTasks("INTERNAL_WASM_PATH");
    imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
        baseOptions: {
            modelAssetPath: "INTERNAL_MODEL_PATH",
            delegate: "GPU" // 端末のGPUを活用
        },
        runningMode: "IMAGE",
        outputCategoryMask: true
    });
}

2. Canvasスパイラル・ブラーによる境界線の最適化

AIが生成するセグメンテーションマスクは、解像度によっては境界がカクついたり（ジャギー）、髪の毛の周辺が不自然になったりすることがあります。 本ツールでは、マスク画像をキャンバス上に描画する際、独自の計算式に基づいた「多重オフセット描画」を行うことで、軽量かつ高品質なスムージング処理を実現しています。

通常のGaussian Blurを適用すると処理が重くなりますが、この手法では黄金角に近い定数を用いた回転オフセットでマスクを重ね書きすることで、非常に低い計算負荷でエッジを滑らかに分散させています。

// 境界線を滑らかにする独自のレンダリング・ハック
function renderSmoothMask(ctx, maskCanvas, smoothValue) {
    const iterations = // チューニングされた反復回数;
    const offsetFactor = // エッジ分散用の定数;
    
    ctx.globalAlpha = 1.0 / (iterations / 4.0); // 透過度の最適化
    
    for (let i = 0; i < iterations; i++) {
        // ここに黄金角に基づく位置分散の計算処理が入ります
        const offX = Math.cos(angle) * radius;
        const offY = Math.sin(angle) * radius;
        
        ctx.drawImage(maskCanvas, offX, offY);
    }
}

3. Multi-Layer Composition による自由な位置調整

「背景透過して終わり」ではなく、その場で合成まで完結させるため、3層の仮想キャンバス構造を維持しています。「背景レイヤー」「マスク適用済みの人物レイヤー」「UI/操作レイヤー」をリアルタイムに結合（Composite）することで、拡大・縮小・回転を行っても画質劣化を最小限に抑えています。

Canvasの globalCompositeOperation = 'source-in' を活用することで、AIが生成した抜き型の中に元の画像を流し込む処理をブラウザのGPU支援付きで高速に行っています。

Developer's Note

「いかにしてブラウザという制限された環境で、Photoshopのような高度な合成体験を提供するか」が最大の挑戦でした。特にモバイル端末ではメモリ制限が厳しいため、1500pxという上限値を設けつつ、内部的にはオフスクリーンのキャンバスを再利用してメモリの確保と解放を最小限に抑えるハックを詰め込んでいます。

境界線のスムージング（Smooth slider）の実装では、最初は重い画像処理フィルタを試しましたが、最終的にはこの「キャンバスを少しずつずらして重ねる」というアナログな手法が、スマホブラウザにおいて最もパフォーマンスと見た目のバランスが取れるという結論に至りました。