[pixel-lift · on-device super-resolution]

低解像度を、
ブラウザだけ
引き上げる。

古い写真、低解像度のSNSアイコン、軽くぼやけたスクショ。 ESRGAN を TensorFlow.js でブラウザ内推論し、画像をアップロードせずに 2倍解像度へ。 before / after スライダーで結果をその場で比較できます。

on-device esrgan-slim 2x tfjs · webgl

[ ./how_it_works ]

仕組み。

step / 01

画像を渡す

jpg / png / webp をドロップ。古い写真、低解像度の画像、軽くぼやけたスクショなど。すべてブラウザ内の AI モデルに直接渡される。

step / 02

TensorFlow.js で2x推論

初回のみ ESRGAN-slim モデル (~5MB) と TensorFlow.js をロード。WebGL バックエンドで GPU 加速され、サイズによっては数秒で完了する。

step / 03

比較して保存

before / after スライダーで違いをその場で比較。納得した状態で透過対応PNGとして書き出し。サイズが2倍になっていることが result メタで確認できる。

[ ./faq ]

よくある質問。

本当に画像はサーバーに送られないのですか?+

送られません。 PixelLift は upscaler.js + ESRGAN-slim を TensorFlow.js 経由でブラウザ内 (WebGL) で動かしています。画像ファイルが私たちのサーバーに届くことはありません。 (初回のみモデル本体を CDN からダウンロードします)

どのくらいの解像度まで使えますか?+

短辺 ~1500px までを推奨。それ以上は WebGL のテクスチャ上限と GPU メモリの問題で失敗しやすくなります。タイル分割しての高解像度対応は今後の拡張で予定しています。

倍率は固定ですか?+

現状は ESRGAN-slim 2x モデルに固定しています。3x / 4x モデルや、別系統 (waifu2x / GAN系) への切替は計画中です。

AIによる『不自然な細部』はどのくらい混じりますか?+

ESRGAN は実在しないディテールを推定で補完するモデルです。風景・人物の写真では自然に補正されますが、文字や細い線では誤った細部 (アーティファクト) が混じることがあります。公文書のスキャンには TextPluck (OCR) と組み合わせるのが安全です。

他のメディアサービスとの関係は?+

voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil に続く、ブラウザ完結メディア処理ラボの 6本目です。ML系で4本 + Pure JS系で1本 (pdf-anvil) + 超解像系で1本 (これ)、というラインアップで『重い処理は全部ブラウザで』 を6方向から実証しています。

[ ./journal ]

開発ログ。

PixelLift

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

upscaler.js + ESRGAN slim をTensorFlow.js経由でブラウザ内推論する画像超解像Webサービスの設計記録。前処理・タイル化・メモリ管理・スタジオライト演出までを解説します。

read log →

all_entries →

← back to ai-lab.org