【Stable Diffusion】外部デバイスからAPI経由で画像生成する方法をReact + TypeScriptで実装する

導入

いきなりですが、ハイスペックなゲーミングPCを持て余していないでしょうか？

「最近忙しくてゲームができていない……」「買ったはいいものの、そこまでハイスペックじゃなくてもよかった……」なんて人は、もしかしたらいるかもしれません。自分の場合も、最近はスマホばかり見ていて、せっかく買ったPCをなかなか使えずにいました。

そんなPCをそのまま放置するのは、ちょっともったいないですよね。

ですが、そのPCに入っているグラフィックボード（GPU）は、AIの画像生成において最も活躍するパーツなんです。

そこで「このGPU搭載PCを画像生成の専用サーバーにして、手元のスマホやノートPCから指示を送って動かせるようにすれば、持て余したマシンパワーを有効活用できるのでは？」と考えました。

本記事ではそれを実現するため、「外部デバイスからAPI経由で画像生成する方法」として、Stable Diffusion（以下、SD）をローカル環境でAPIサーバーとして起動し、外部デバイスから画像生成する機能をReact + TypeScriptで実装していきます。

※ 本記事ではローカルネットワーク内（家庭内LAN）での利用を前提としています。

ファイアウォール設定やネットワーク設定を変更するため、内容を理解した上で自己責任で実施してください。

また、カフェやホテルなど、不特定多数が利用するネットワーク環境での利用は推奨しません。

また、推奨スペックは以下です。

画像生成までの流れ

この実装の流れは下記となります。

1. GPU搭載PC（SD）のAPI設定
2. 外部デバイスとのネットワーク接続確認
3. React + TypeScriptでAPIリクエストの実装
4. 画像生成

GPU搭載PC（SD）のAPI設定

SD WebUIのインストール

まず、GPUを搭載しているPCにStable Diffusion WebUIをインストールします。

SDは複数存在しますが、これから実装する際に使用するものは「AUTOMATIC1111」「Forge」のどちらかであれば問題ありません。

今回は「Forge」を使用します。
Forge はGPUメモリ（VRAM）の使用効率が良く、より快適に画像生成を行えます。

下記のGithubリポジトリのREADMEに従ってインストールしてください。

AUTOMATIC1111：https://github.com/automatic1111/stable-diffusion-webui

Forge：https://github.com/lllyasviel/stable-diffusion-webui-forge?tab=readme-ov-file&_fsi=8i9eFX5y

インストールし、webui-user.batやrun.batで「http://127.0.0.1:7860」の画面が開けたらOKです。

実は、この画面を外部デバイスから開いてプロンプトを入力すれば、APIを利用する必要はありません。

ですが、本記事ではあえてWebUIを直接操作せず、API経由で画像生成を行っていきます。

API化しておけば、自分好みのUIを作れたり、スマホ向けに使いやすくしたりと、より自由に画像生成機能を扱えるようになります。

APIモードで起動する

外部デバイスから画像生成を行うため、SDをAPIモードで起動します。

Forge や AUTOMATIC1111 では、起動オプションを追加することでAPIを有効化できます。

webui-user.batをメモ帳で編集し、下記のように COMMANDLINE_ARGS を設定してください。

set COMMANDLINE_ARGS=--api --listen

設定後、webui-user.batファイルを起動します

「Running on local URL: http://0.0.0.0:7860」が画面に表示されていればOKです。

※実際にブラウザからアクセスするURLは、GPU搭載PCのIPアドレス＋ポート番号7860です。

外部デバイスとのネットワーク接続確認

IPアドレス確認と接続確認

外部デバイスからGPU搭載PCへアクセスできるか確認します。

まず、GPU搭載PCのIPアドレスを確認します。

Windows の場合は、コマンドプロンプトで下記を実行してください。

ipconfig

IPv4 アドレス . . . . . . . . . . . .: 192.168.××.×

ping 192.168.××.×

192.168.××.× に ping を送信しています 32 バイトのデータ:
192.168.××.× からの応答: バイト数 =32 時間 =6ms TTL=128

Request timed out.

http://192.168.××.×:7860/docs

ファイアウォールに規則を追加

Windows Defender ファイアウォールによって通信がブロックされる場合は、受信規則を追加します。

まず、「Windows Defender ファイアウォール（詳細設定）」を開きます。
左側メニューの「受信の規則」を選択し、右側の「新しい規則」をクリックしてください。

続いて、下記の内容で設定します。

http://192.168.××.×:7860/docs

React + TypeScriptでAPIリクエストの実装

それでは、実際に React + TypeScript から Stable Diffusion のAPIを呼び出して画像生成を行います。

今回はViteを使い、環境構築を行います。

※ここからの環境構築やコードの実装作業は、すべて手元の外部デバイス（ノートPCなど）で行います。

環境構築

まず、Node.jsをインストールします。下記公式サイトからインストールしてください。

Node.js公式サイト：https://nodejs.org/ja

インストール後、Windows PowerShellなどで下記を実行し、バージョンが表示されればOKです。

node -v
npm -v

次に、ご自身が普段コードを管理している場所（デスクトップなど）に移動し、下記を実行してReact + TypeScript環境を構築します。

# (プロジェクト名は「sd-api-sample」としています)
npm create vite@latest sd-api-sample -- --template react-ts

※ 途中で Ok to proceed? (y) と聞かれた場合は、そのまま y を押して進めて進めてください。

コマンドの実行が終わると、新しく sd-api-sample というフォルダが作成されます。 最後に、そのフォルダへ移動して必要なパッケージをインストールしましょう。

cd sd-api-sample
npm install

環境構築ができたらエディタツールで作成した「sd-api-sample」フォルダを開きます。（今回はVSCode）

ターミナルで下記を実行し、http://localhost:5173/ と表示され、開いたときにViteとReactの初期画面が表示されれば環境構築はOKです。

実装

実装に移ります。

App.tsxに直接下記のソースを載せ、GPU搭載PCに接続ができていれば、http://localhost:5173/の「画像を生成する」ボタンで画像が生成できます。

import { useState } from 'react';

// ※「192.168.××.×」の部分は、先ほど確認した「GPU搭載PC」のIPアドレスに書き換えてください
const SD_API_URL = 'http://192.168.××.×:7860/sdapi/v1/txt2img';

function App() {
  const [prompt, setPrompt] = useState('a high quality photo of a cute cat, cinematic lighting');
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const generateImage = async () => {
    if (!prompt) return;
    setLoading(true);
    setError(null);
    setImageSrc(null);

    try {
      const payload = {
        prompt: prompt,
        negative_prompt: 'easynegative, low quality, bad anatomy, blurry',
        steps: 20,
        cfg_scale: 7,
        width: 512,
        height: 512,
      };

      const response = await fetch(SD_API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        throw new Error(`APIエラーが発生しました。ステータス: ${response.status}`);
      }

      const data = await response.json();
      
      if (data.images && data.images.length > 0) {
        const base64Image = data.images[0];
        setImageSrc(`data:image/png;base64,${base64Image}`);
      } else {
        throw new Error('画像データがレスポンスに含まれていませんでした。');
      }
    } catch (err: unknown) {
	  if (err instanceof Error) {
        console.error(err);
        setError(err.message || '画像の生成に失敗しました。');
	  } else {
        setError('予期せぬエラーが発生しました。');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
     <h1>SD API 画像生成</h1>
      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={4} />
      <button
        onClick={generateImage}
        disabled={loading}
      >
       {loading ? 'GPU搭載PCで画像を生成中...' : '画像を生成する'}
      </button>

      {error && <p>{error}</p>}

      {imageSrc && (
       <div>
        <h2>生成された画像</h2>
        <img 
          src={imageSrc} 
          alt="Generated Art" 
        />
       </div>
      )}
    </div>
  );
}

export default App;

重要な部分は下記です。

• payload
• Base64

payload

APIのやり取りにおける「ペイロード」とは、一言でいうと「送りたいデータそのもの（中身）」のことです。

今回は Stable Diffusion（サーバー）に対して、「このプロンプトで、ステップ数は20で、縦横512pxで生成してね」という設定パラメータの塊を指します。

もし、「イラスト風のモデルに変えたい」といった指定をコードから行いたい場合は、この payload の中に override_settings という項目を追加することで、リクエストごとにモデルを切り替えることも可能です。

そのほかにも、事前に確認したFastAPIのドキュメントページ（http://192.168.××.×:7860/docs）から /sdapi/v1/txt2img の項目を開くと、送信できるすべてのパラメータ（Request Body）が確認できますので、ぜひ参考にカスタマイズしてみてください。

Base64

Stable DiffusionのAPIは、生成した画像を「画像ファイル（.png）」としてではなく、「Base64」と呼ばれる、画像を長い文字列に変換したデータで返してきます。

そのため、React側で画像として画面に表示できるように、data:image/png;base64, という文字列を頭にくっつけてから img タグの src に渡しています。

画像生成

では、画像を生成してみます。

以下の流れで画像生成を行います。

1. 外部デバイス（ノートPCなど）のVSCodeのターミナルで、先ほど環境構築の最後に動かした `npm run dev` が起動していることを確認します。
2. ブラウザで `http://localhost:5173/` を開きます。画面に「SD API 画像生成」というタイトルとテキストエリア、ボタンが表示されていればOKです。
3. コード（App.tsx）の SD_API_URL に入力したIPアドレスが、先ほど確認したGPU搭載PCのものに正しく書き換わっているかを再度確認します。
4. テキストエリアにプロンプトがあるのを確認し、**「画像を生成する」** ボタンをクリックします。

ボタンが「GPU搭載PCで画像を生成中…」に変わったら、「GPU搭載PC」のコマンドプロンプト（ForgeやAUTOMATIC1111の黒い画面）を覗いてみてください。

100%|███████████████████████████████████████████| 20/20 [00:02<00:00,  8.20it/s]

このように進捗バーが動き出していれば成功です。

生成が完了すると、手元のデバイスにデータが送り返され、ブラウザ上に画像が表示されます。

このような感じで画像が生成できました。

もし、生成できない場合は、画像生成用のモデル（チェックポイント）が正しく読み込まれていない可能性があります。

インターネット上に配布されているものもありますので、ダウンロードし、Stable Diffusionのインストールフォルダ内にある models/Stable-diffusion ディレクトリに入れると解決するかもしれません。

さいごに

SDのAPIを使用するまでには、意外と多くの手順や注意点があります。

自分は外部デバイスにMacBookを使用しましたが、ローカルネットワーク設定がデフォルトで「オフ」になっていることに気づかず、原因究明で丸一日溶けました……。

APIモードの起動だけで済めば簡単なのですが、ファイアウォールの設定など、ネットワークの少し踏み込んだ対応もしないといけないため、途中で断念する方ももしかしたらいるかもしれません。

ですが、この記事を見て少しでもそのような方の助けになり、持て余していたPCを有効活用できるようになれば幸いです。

プログラムから叩けるようになると、ここからさらに自分好みのUIを拡張していけるので、ぜひオリジナルの画像生成ツールを作ってみてください。

記事を読んで興味を持った方はぜひコチラから↓