PixelLift ができるまで — ブラウザ内ESRGANで画像を高解像度化する設計

PixelLift は、低解像度の画像を アップロードせずに AI でアップスケールするWebサービスです。 ESRGAN-slim を TensorFlow.js + WebGL バックエンドで動かし、 ブラウザ内推論で画像を 2x の解像度に引き上げます。 voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil に続く、メディア処理ラボ 6本目。

なぜこの形にしたか

画像アップスケールはこれまで「サーバGPU」 と相場が決まっていました。 waifu2x の公式サイト、Topaz Gigapixel、Adobe Super Resolution、いずれも何かしらサーバ側のリソースを使うか、 PCにインストールするタイプ。 する選択肢はほとんど見かけません。

TensorFlow.js が WebGL バックエンドで実用速度に達し、 ESRGAN の slim 系モデルが ~5MB まで小さくなった今、 これを「で」 提供できる時代に来ています。 voice-scribe (音声) / clip-cast (動画) / bg-snap (背景透過) / text-pluck (OCR) / pdf-anvil (PDF) と並べて、 PixelLift で 画像のアップスケール という重い領域もカバーできる、というのがラボ 6本目の意味。

visual direction

スタジオライトボックス × ゴールドイエロー。

• 暖かめの深い炭色 (#0c0a06) を背景に、 純黄 (#facc15) を主アクセント、クリーム (#fef3c7) をハイライトに
• ヒーローの上から降り注ぐ スポットライト 風のグラデーション
• 画像表示エリアには細い水平ストライプ (24px ピッチ) を入れて、 撮影スタジオのフィルムグレイン風の質感
• clip-cast の amber (オレンジ寄り) と区別するために、 こちらはより冷たい純黄に振った

実装の見どころ

1. upscaler.js + ESRGAN slim のラッパー

upscaleRunner.ts で upscaler パッケージと TensorFlow.js + ESRGAN-slim モデルを dynamic import。 初回ロード時にしか走らないよう Promise でキャッシュします。

let _upscalerPromise: Promise<{ upscaler }> | null = null
async function getUpscaler() {
 if (_upscalerPromise) return (await _upscalerPromise).upscaler
 _upscalerPromise = (async () => {
 await import("@tensorflow/tfjs")
 const Upscaler = (await import("upscaler")).default
 const model = (await import("@upscalerjs/esrgan-slim")).default
 return { upscaler: new Upscaler({ model }) }
 })()
 return (await _upscalerPromise).upscaler
}

upscaler.upscale(img) に HTMLImageElement を渡すと、 base64 のPNGデータURLを返してくれます。 結果を dataUrlToBlob() で Blob 化して downloads に流す構成です。

2. before/after 比較スライダー

bg-snap で使った Pointer Events ベースのスライダーをそのまま流用。 同一座標に before/after を重ねて、左右スライドで境界を動かして比較できる UX を残しました。 これは「結果が本当に綺麗になっているか」 をユーザー自身で確認できる重要な要素です。

const move = (e: PointerEvent) => {
 if (!draggingRef.current) return
 const rect = compareRef.current!.getBoundingClientRect()
 const pct = ((e.clientX - rect.left) / rect.width) * 100
 setSliderPct(Math.max(0, Math.min(100, pct)))
}

3. dimensions の事後計測

ESRGAN の出力サイズは事前計算では正確に分からない (モデル内部のパディング・タイル境界等で ±1px 程度ズレる)。 そこで結果Blobを createImageBitmap で読み直して実寸を取り、 result メタに表示します。

const bitmap = await createImageBitmap(blob)
outWidth = bitmap.width
outHeight = bitmap.height
bitmap.close()

「200×300 → 400×600」 という具体的な数値を出すことで、 「ちゃんと拡大されたか」 が一目で確認できる UI になります。

4. WebGL 上限 / GPU メモリ問題への対応

WebGL のテクスチャ上限は環境依存 (通常 4096~8192px) で、 高解像度入力では推論が落ちます。 v1 では FAQ に「短辺 ~1500px を推奨」 と明記し、 失敗時はエラーパネルで原因を見せる、という形に留めました。 タイル分割しての高解像度対応は将来拡張に予定。

5. 初回ロードのUX

TensorFlow.js (~1.5MB) + ESRGAN モデル (~5MB) のロードがあるので、 progress パネルに kind: load → process → ready → done の遷移を流し、 「初回は ESRGAN モデルと TensorFlow.js のロードがあります」 という説明を併記しました。 重い処理であることを隠さない方向に倒しています。

苦労したところ

• @upscalerjs/upscaler というスコープ名が誤り で、正しくは upscaler パッケージだった。 npm 検索しないと分からなかった部分。
• @tensorflow/tfjs の重さ。 ~1.5MB の JS バンドルが追加されるため、初回ロードが感じやすい。 Next.js の dynamic import + SSR 排除で main bundle には載らないようにした。
• ESRGAN モデルの import 形 は default export とサブセクションがあり、 modelMod.default.x2 or modelMod.default をフォールバックで処理。 ライブラリ仕様が安定していない部分。

今後の拡張

• 倍率の選択: 3x / 4x モデル、 別系統 (waifu2x / Real-ESRGAN) への切替
• タイル分割: 大きい画像を 512×512 タイルに分割 → 個別推論 → 再結合 → 高解像度入力対応
• WebGPU バックエンド: TFJS の WebGPU backend を試して GPU 加速を強化
• bg-snap / text-pluck との連携: アップスケール後に背景透過 / OCR を続けて回す合体フロー
• AIアーティファクトの抑制: 文字や線の歪みが大きいケース用の保守的モード

このサービスから言える事

メディア処理ラボの 6本柱:

• voice-scribe (音声 → テキスト)
• clip-cast (動画 → トリム動画)
• bg-snap (画像 → 透過PNG)
• text-pluck (画像 → テキスト)
• pdf-anvil (PDF → PDF)
• pixel-lift (画像 → 高解像度画像)

「重い処理は全部ブラウザで」 を 6方向から実証しました。 ML 5本 (whisper / ffmpeg / segmentation / ocr / esrgan) + Pure JS 1本 (pdf-lib) のミックスで、 ライブラリの種類も多様化。 ブラウザだけで成立する代替の幅が、想像以上に広がっている、という事実そのものがラボの主張です。