戯言と技術 | Stable DiffusionをWebGPUでブラウザ完結の画像生成ツールを作った

注意事項
本記事の内容は試験的な実装であり、アイデアベースの検証です
実務での利用を保証するものではありません
実装についての責任は負いかねます。自己責任でご利用ください
AIの出力結果は常に検証が必要です

Stable Diffusion互換モデルをONNX Runtime Web + WebGPUでブラウザ内に完結させるAI画像生成ツールを作りました。

公開URL: https://sd.keydrop.net/

なぜブラウザ完結なのか

通常、Stable Diffusionで画像生成するには以下のような環境構築が必要です。

Python環境のセットアップ
CUDA対応GPU + ドライバのインストール
AUTOMATIC1111やComfyUIなどのWebUIの導入
モデルファイルのダウンロード（数GB単位）

これらをすべてスキップして、ブラウザを開くだけで画像生成できる環境を目指しました。

ブラウザ完結のメリット

環境構築不要 — ブラウザさえあれば動く
サーバー不要 — 推論処理はすべてクライアント側のWebGPUで完結
無料 — APIコストもサーバー維持費もゼロ
プライバシー — 画像データもプロンプトも外部に送信されない

技術構成

項目	技術
推論エンジン	ONNX Runtime Web (WebGPU EP)
トークナイザ	CLIP BPE（自前実装）+ HuggingFace Transformers.js
スケジューラ	Euler Ancestral Discrete Scheduler
フロントエンド	TypeScript + Vite 5
スタイル	Tailwind CSS v4
対応ブラウザ	Chrome 121+, Edge 121+, Arc

アーキテクチャ概要

プロンプト入力
    ↓
CLIP BPE Tokenizer（77トークンにエンコード）
    ↓
Text Encoder（ONNX / WebGPU）
    ↓
UNet × N steps（ノイズ除去ループ / Euler-a スケジューラ）
    ↓
VAE Decoder（潜在空間 → ピクセル空間）
    ↓
PNG出力（メタデータ埋め込み）

推論はすべてWeb Worker上で実行されるため、UIスレッドをブロックしません。

対応モデル

モデル世代

世代	prediction type	CFG	ステップ数
SD 1.5	epsilon	あり（デフォルト7.0）	20程度
SD-Turbo	v_prediction	なし	1〜4

推奨モデルは HuggingFace の schmuell/sd-turbo-ort-web です。SD-Turboはわずか1〜4ステップで画像が生成でき、ブラウザ環境に最適です。

モデルファイル構成（ONNX形式）

ファイル	役割	サイズ目安
`text_encoder/model.onnx`	テキストエンコーダ	~650MB
`unet/model.onnx`	ノイズ除去ネットワーク	~1.6GB
`vae_decoder/model.onnx`	潜在空間→画像変換	~95MB
`tokenizer/vocab.json`	BPEボキャブラリ	~1MB
`tokenizer/merges.txt`	BPEマージルール	~500KB

ファイル名のパターンからモデル構成（SD-Turbo / SD 1.5）を自動判定します。

主な機能

画像生成パラメータ

パラメータ	範囲	デフォルト
プロンプト	テキスト入力	—
ネガティブプロンプト	テキスト入力	—
幅	64〜2048px（64刻み）	—
高さ	64〜2048px（64刻み）	—
ステップ数	1〜150	20
CFG Scale	1.0〜30.0	7.0
シード	0〜2147483647	42

同じシードを指定すれば同じ画像が再現されます（mulberry32 PRNGによる決定的生成）。

LoRAマージ

LoRA（Low-Rank Adaptation）のマージ機能も搭載しています。

safetensors形式のLoRAファイルを読み込み
Kohya形式のウェイト適用
マージ後のファイルを新しいsafetensorsとして出力
Web Workerで実行するためUIをブロックしない

モデルキャッシュ（OPFS）

初回のモデルアップロード後、Origin Private File System (OPFS) に自動キャッシュされます。2回目以降はファイルの再アップロードなしでモデルを読み込めます。

生成履歴

生成した画像はIndexedDBに保存され、パラメータとともに履歴から確認できます。

PNG メタデータ埋め込み

生成画像のPNGファイルには、tEXtチャンクとして以下のメタデータが埋め込まれます。

プロンプト / ネガティブプロンプト
画像サイズ / ステップ数 / CFG Scale / シード
使用モデル名 / エンジン名

技術的なポイント

CLIP BPE Tokenizer（TypeScript自前実装）

CLIPのByte-Pair EncodingトークナイザをピュアTypeScriptで実装しています。

vocab.json + merges.txt からBPEルールを構築
CLIP固有の正規表現でサブワード分割
最大シーケンス長: 77トークン（CLIP標準）

Euler Ancestral Discrete Scheduler

ノイズ除去のスケジューリングもTypeScriptで実装しています。

scaled_linear ベータスケジュール（beta_start=0.00085, beta_end=0.012）
アルファの累積積からシグマを算出
epsilon / v_prediction 両方の予測タイプに対応

Float16変換

SD-TurboモデルはFP16量子化されているため、IEEE 754半精度浮動小数点の変換処理を実装しています。非正規化数・無限大・NaNのハンドリングを含みます。

推論エンジンの切り替え

3つの推論エンジンバックエンドを抽象化して切り替え可能にしています。

エンジン	状態	特徴
ONNX Runtime Web	Beta	安定、メインエンジン
Transformers.js + ONNX	Beta	HuggingFaceからトークナイザ自動取得
Ratchet (WebGPU直接)	実験的	safetensors / GGUF形式対応

対応環境

項目	要件
ブラウザ	Chrome 121+ / Edge 121+ / Arc
GPU	WebGPU対応、VRAM 4GB以上（推奨8GB+）
OS	Windows, macOS, Linux
ディスク	モデル保存に3GB以上

Safari・Firefoxは現時点でWebGPUが未対応（Firefoxはフラグで実験的対応）です。Apple Silicon Macでも動作します。モバイルブラウザは非対応です。

使い方

https://sd.keydrop.net/ にChrome 121+でアクセス
モデルファイル（ONNX + トークナイザ）をドラッグ＆ドロップまたはファイル選択でアップロード
プロンプトとパラメータを設定
生成ボタンをクリック
完成画像をPNGでダウンロード

2回目以降はOPFSキャッシュからモデルを読み込めます。

詳しい操作方法はマニュアルを参照してください。

ローカルGPU環境との比較

項目	ブラウザ版（本ツール）	ローカル環境（ComfyUI等）
環境構築	不要	Python + CUDA等が必要
コスト	無料	GPU購入費
生成速度	やや遅い	高速
モデル選択	ONNX形式のみ	safetensors等自由
LoRA	マージ機能あり	リアルタイム適用可能
カスタマイズ性	限定的	ワークフロー自由
手軽さ	◎	△

本ツールは手軽にStable Diffusionを試したい人向けです。本格的な画像生成ワークフローにはComfyUIなどのローカル環境が適しています。

テスト

415件のユニットテストでコア機能の品質を担保しています。

モジュール	テスト数	内容
fp16	23	IEEE 754半精度浮動小数点変換
tokenizer	231	OpenAI CLIPリファレンスとの照合
scheduler	132	Euler Ancestral、PRNG統計検証
safetensors	29	読み書きラウンドトリップ

まとめ

WebGPUとONNX Runtime Webの組み合わせにより、Stable Diffusionの推論処理をブラウザ内で完結させることが現実的になりました。SDパイプラインの主要コンポーネント（トークナイザ、スケジューラ、FP16変換）をTypeScriptで自前実装し、環境構築のハードルなしで誰でもAI画像生成を試せるツールとして公開しています。

サイト: https://sd.keydrop.net/
マニュアル: https://sd.keydrop.net/manual/