[2026/9/13]

[WEB App] ONNX Upscaler v1 — ブラウザ完結型 AI 画像アップスケーラー

[WEB App] ONNX Upscaler v1 — ブラウザ完結型 AI 画像アップスケーラー

ONNX Upscaler v1

ブラウザ上でサーバーサイドの API を一切介さず、WebAssembly（WASM）ベースの ONNX Runtime と超解像 AI モデル（Real-ESRGAN_x4plus_anime_6B.onnx）を用いて、イラストを高精度に 2 倍・4 倍にアップスケールする Web アプリケーション。

外部の重い Python バックエンドやクラウド GPU サーバーに頼ることなく、クライアント端末の CPU（WASM マルチスレッド）のみで高速なニューラルネットワーク推論を実現しています。画像の前処理からテンソル変換、WASM セッションのライフサイクル管理、2X / 4X のスケーリング描画、さらにリアルタイムのコンソールログやプログレスオーバーレイを備えた 3 カラムインターフェースを統合しています。

スクリーンショット

メイン UI & 変換画面

ONNX Upscaler v1 — 変換画面

変換完了画面

ONNX Upscaler v1 — 変換完了画面

動画（GIF）

ONNX Upscaler v1 — 動作デモ

特徴

  • ブラウザ完結型の AI 超解像エンジン:
    ONNX Runtime Web と Real-ESRGAN x4plus Anime モデルを組み合わせ、サーバー通信なしでローカル環境だけでイラストの超解像処理を実行。
  • WASM マルチスレッド並列処理:
    1〜8スレッドまでの並列処理チューニングに対応し、デバイスの CPU スペックに合わせた高速推論が可能。
  • マルチスケール出力対応 (2X / 4X):
    モデルのネイティブ4倍出力だけでなく、用途に応じた2倍スケーリングや高品質なリサイズ描画を選択可能。
  • 3 カラムインタラクティブ UI & プログレス表示:
    ターゲット画像情報、各種パラメータ設定、リアルタイムプレビュー、進捗オーバーレイ、詳細コンソールログを 1 画面に集約。
  • ダイレクトファイルエクスポート:
    処理結果の画像を無劣化の PNG 形式、または品質スライダー付きの JPEG 形式でその場にダウンロード可能。

モジュール構成

モジュール名主要機能・パラメータ
TARGET IMAGE画像のドラッグ＆ドロップまたはクリック選択、ファイル名・解像度のメタデータ表示
PARAMETERS (SCALE)スケーリング倍率の選択（2X / 4X Upscale）
PARAMETERS (THREADS)WASM マルチスレッド数の制御（1〜8 Threads）
PARAMETERS (FORMAT)出力フォーマットの選択（PNG Lossless / JPEG Quality）
PREVIEW / COMPARISON原画（Original）と超解像処理後（4X/2X Upscaled Output）の視覚的比較
CONSOLE LOG & STATUSシステム初期化状況、推論時間、出力解像度、実行ステータスのリアルタイム追跡

使い方

1. 画像のドロップまたは選択

左側のパネル（TARGET IMAGE）にアップスケールしたい画像ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します。自動的に解像度が読み込まれます。

2. パラメータの設定

スケーリング倍率（2X または 4X）、WASM の並列スレッド数、および出力ファイル形式（PNG / JPEG）を好みに応じて調整します。

3. アップスケールの実行

「RUN UPSCALE」ボタンをクリックすると、プログレスオーバーレイと右側のコンソールログが連動して推論処理が開始されます。処理完了後、高解像度化された画像がプレビューに表示されます。

4. 結果のダウンロード

「DOWNLOAD RESULT」ボタンをクリックして、処理済み画像をローカル端末へ保存します。

技術スタック

  • WebAssembly (ONNX Runtime Web v1.19.0) — ブラウザ上での機械学習モデル推論エンジン
  • Real-ESRGAN (x4plus_anime_6B) — アニメ調イラスト特化型超解像ニューラルネットワークモデル
  • HTML5 Canvas / ImageData — ピクセルデータ抽出、RGB テンソル前処理、マルチスケール描画
  • JavaScript (ES6+) — テンソルライフサイクル管理・非同期パイプライン制御
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [2026-09-12]: v1.0 初回公開。
    • ONNX Runtime Web (WASM) と Real-ESRGAN x4plus Anime モデルによるブラウザ完結型超解像パイプライン構築
    • WASM マルチスレッド（1〜8 Threads）制御およびテンソル前処理・後処理の実装
    • 3 カラムインタラクティブ UI、プログレスオーバーレイ、リアルタイムコンソールログ機能の統合
    • 2X / 4X マルチスケール描画および PNG / JPEG ダイレクトダウンロード対応