【Node.js】画像を高解像度化するWebアプリケーションを実装する手順

この本では、「Node.js」および「Real-ESRGAN」を用いて、画像を高解像度化（画質を向上）するWebアプリケーションを実装します。

＜概要＞

はじめに

この記事では、「Node.js」および「Real-ESRGAN」を用いて、画像を高解像度化（画質を向上）するWebアプリケーションを実装します。

以下のようなWebアプリケーションを作成していきます。

完成イメージ

• 大まかな流れ
  ① 画面左側の枠内に画像ファイルをアップロード
  ② 送信ボタンをクリック
  ③ 高解像度化処理
  ④ 画面右側の枠内に高解像度化した画像を表示

Real-ESRGANとは？

「Real-ESRGAN」は、画像を高解像度化するAI（機械学習）技術です。
高解像度化の精度が高く、高速、さらに無料で使用可能であることから、画像の高解像度化を行うアプリケーション開発時に頻繁に使用されております。

出典

• Real-ESRGANの特徴
  ① 高解像度化の精度が高く、高速
  ② 使用方法が簡易
  ③ 無料

① 高解像度化の精度が高く、高速
高解像度化を行うAIとしては、他に「waifu2x」や「Real-CUGAN」がありますが、「Real-ESRGAN」は他のAIよりノイズが少なくシャープな画像を生成する上に、処理速度も高速と言われております。
出典1, 出典2, 出典3

② 使用方法が簡易
「Real-ESRGAN」では３種類の使用方法があります。
    ・ オンラインインタフェース
    ・ 実行ファイルの提供
    ・ Phythonスクリプト

いずれの方法でも複雑なコーディングは不要であり、簡易に使用可能です。この記事では、Webアプリケーションに「Real-ESRGAN」を組み込むため、2番目の実行ファイルをダウンロードして使用します。
出典

③ 無料
「Real-ESRGAN」は「BSD 3-Clause "New" or "Revised"」ライセンスであり、個人利用、商用利用含めて無料で使用可能です。

出典

• Real-ESRGAN関連ページ
  公式サイト, 論文

この記事で学べること

• 「Node.js」によるWebアプリケーションの実装方法

• 「Socket.io」を使用した対話型アプリケーションの作り方

• 「Real-ESRGAN」の簡単な使い方

実務活用例

• 画像処理系Webアプリケーションの開発

• AIを組み込んだWebアプリケーションの開発

• 対話型Webアプリケーションの開発

タイトル画の出典
Stable Diffusion により生成したものを加工

---

＜実装準備＞

環境

この記事では、以下のような開発環境、ツールを使用します。

• 開発環境
  Visual Studio Code （v1.71以上）

• ツール
  Node.js （v16以上）
  Real-ESRGAN
  socket.io

環境構築

事前準備が必要なツール類をインストールします。
（既にインストール済みの方は手順をスキップして下さい。）
（「Real-ESRGAN」、「socket.io」は実装手順の中で説明します。）

• Node.js
  Node.jsはサーバーサイドで動作するJavaScriptの環境です。
  Node.jsの公式サイトにアクセスし、LTS版（推奨版）をダウンロード＆インストールします。

• Visual Studio Code
  この記事では、Node.js の開発環境として Visual Studio Code を使用します。
  Visual Studio Code の公式サイトにアクセスし、ダウンロード＆インストールします。