LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@EitaroSeta(Bar Hopper)

Runpod Serverless で Stable Diffusionを動かしてみる

Last updated at Posted at 2025-09-21

はじめに

GPUパフォーマンスの必要な StableDuffusion をGPUクラウドを利用して動かしたので、その備忘録。
ここでは Serverlessエンドポイント作成 → APIキー払い出し → 導通確認 → APIキーを利用した javascript作成 までの手順をまとめる。

対象読者：

  • GPUを安価に使って、画像生成や SLM 等を実践してみたい

使用サービス、価格について

  • GPUクラウドサービス：Runpod ( https://www.runpod.io/ )
    PodsとServerlessのサービスあり（他にもあり）

    • Pods (GPU 自体の時間貸し）：
      • RTX4090クラスで ＄0.49/hr ～　　　※73.5円/時間(1＄=150円)
    • Serverless（GPU の実行時間貸し）
      • RTX4090クラスで ＄0.00031/sec ～　※0.0465円/秒(1＄=150円)

    今回は画像生成時のみ GPU を利用するので Serverlessを選択
    ※1画像を1分で作るとしておおよそ3円

  • 支払：クレジット払
    事前にチャージが必要 ＄10～

Serverless Endpointの作成

  • メニューバーから「Serverless」を選択すると下記画面に変わる

  • 「+New Endpoint」でEndpointを自作・展開することもできるが、今回は「Browse hub」で作成済テンプレートより選択。
    runpod_serverless1.png

  • 検索フィールドに「Automatic1111」と入力するとテンプレートが表示されるので、これを押下。
    runpod_serverless2.png

  • エンドポイントの作成画面が表示されるので、バージョンは特に変更せず「Deploy」を押下。
    runpod_serverless3.png

  • エンドポイントのタブを選択し、「Create Endpoint」を押下。
    runpod_serverless4.png

  • エンドポイントIDが発行される（赤枠灰色塗りつぶしの部分）
    runpod_serverless5.png

  • 「Edit Endpoint」を選択
    runpod_serverless6.png

  • 各項目について（変更後は「Save Endpoint」で保存）

    • Endpoint 名は適宜変更

    • 搭載メモリにより価格が変わるので、適宜変更（組み合わせることも可）
      runpod_serverless7.png

    • Max Workers (3)
      並列のワーカー（ジョブ処理）の最大数

    • Active Workers (0)
      ワーカーを常にアクティブにしておくとコールドスタート（起動待ち）が減るが課金対象

    • GPU Count (1)
      各ワーカーに割り当てられる GPU の数

    • Idle Timeout (5)
      リクエストが来なくてもワーカーを起動状態のままにしておく時間
      今回は単発でのリクエスト想定

    • Enable Execution Timeout (600 → 300)
      リクエストからタイムアウトまでの時間
      runpod_serverless8.png

API Key の発行

  • メニューバーから「Settings」を選択
    runpod_serverless9.png

  • 「Create API Key」を押下
    runpod_serverless10.png

  • 「Name」は適宜変更、「Create」押下
    runpod_serverless11.png

  • 後から参照することができないので注意
    runpod_serverless12.png

  • 以下のように作成される
    runpod_serverless13.png

導通確認

  • curlにてエンドポイント呼び出しの書式は以下の通り

    • your_endpoint_name: Serverless Endpoint 作成の項目で作成したものを使用
    • your_api_key: API key の発行の項目で作成したものを使用
    bash
    curl -X POST https://api.runpod.ai/v2/your_endpoint_id/run \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_api_key' \
  -d '{"input":{"prompt":"Your prompt"}}'

  • curlが実行できる環境でコマンドを入力すると、正常の場合は imageを含んだ大きいJSONデータが返却される

    bash
    # curl -X POST https://api.runpod.ai/v2/your_endpoint_id/runsync \
    -H 'Content-Type: application/json' \
    -H 'Authorization: Bearer your_api_key' \
    -d '{"input":{"prompt":"Your prompt"}}'
{"delayTime":1045,"executionTime":2345,"id":"sync-55406c11-237c-4e5f-a502-81a7854d303c-e1","output":{"images":  ～省略～"}

APIキーを利用した javascript作成

  • 以下の html ファイルを作成する
    ファイル名はtest.htmlとかでよい
    const apiUrlとconst apiKey の行については前述の通り

    Runpod_Serveless_test.html
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>RunPod Serverｌess＋Stable Diffusionによる画像生成</title>
  <style>
    body { font-family: sans-serif; line-height: 1.6; }
    input, button { font-size: 1em; padding: 4px; margin: 5px 0; width: 100%; max-width: 500px; }
    label { display: block; margin-top: 1em; }
    #resultImage { max-width: 512px; display: block; margin: 1em 0; }
    #responseArea { white-space: pre-wrap; background: #f0f0f0; padding: 1em; border: 1px solid #ccc; max-width: 700px; overflow-x: auto; }
  </style>
</head>
<body>
  <h2>🎨 Runpod Serverless＋Stable Diffusionによる画像生成</h2>

  <label>Prompt:
    <input type="text" id="promptInput" value="a cute cat sitting on a sofa">
  </label>

  <label>Negative prompt:
    <input type="text" id="negPromptInput" value="low quality, blurry, bad anatomy">
  </label>

  <label>Steps:
    <input type="number" id="stepsInput" value="20" min="1" max="100">
  </label>

  <button onclick="generateImage()">画像生成</button>

  <img id="resultImage" style="display: none;">
  <div id="responseArea">画像とAPIレスポンスがここに表示されます</div>

  <script>
    async function generateImage() {
      const prompt = document.getElementById("promptInput").value;
      const negPrompt = document.getElementById("negPromptInput").value;
      const steps = parseInt(document.getElementById("stepsInput").value);
      const resultImage = document.getElementById("resultImage");
      const responseArea = document.getElementById("responseArea");

      resultImage.style.display = "none";
      responseArea.textContent = "⏳ APIレスポンス待機中...";

      // 以下の2行はセキュアに管理すること
      const apiUrl = "https://api.runpod.ai/v2/your_endpoint_id/runsync";
      const apiKey = "your_api_key";                                    

      const payload = {
        input: {
          prompt: prompt,
          negative_prompt: negPrompt,
          steps: steps
        }
      };

      try {
        const response = await fetch(apiUrl, {
          method: "POST",
          headers: {
            "Authorization": "Bearer " + apiKey,
            "Content-Type": "application/json"
          },
          body: JSON.stringify(payload)
        });

        const result = await response.json();

        const imageB64 = result.output?.images?.[0];
        if (imageB64) {
          resultImage.src = "data:image/png;base64," + imageB64;
          resultImage.style.display = "block";
        }

        responseArea.textContent = JSON.stringify(result, null, 2);
      } catch (error) {
        responseArea.textContent = "❌ エラー: " + error;
      }
    }
  </script>
</body>
</html>

  • 作成した Runpod_Serveless_test.html ファイルをブラウザで開くと以下の内容が表示される
    runpod_serverless15.png

  • 「画像生成」を押下すると、画像が作成される。
    　Wokrerの状況次第で作成までの時間は変わる
    runpod_serverless16.png

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?