📖 Table of Contents: 目次

📖 Table of Contents: 目次
🤖 OpenAI Image Generation API Tutorial: OpenAIの画像生成APIチュートリアル

🤖 OpenAI Image Generation API Tutorial: OpenAIの画像生成APIチュートリアル

第一回では、環境構築を行いました。
第二回では、画像生成(DALL-E 3)の実装を行います。
第三回では、画像分析(gpt-4-vision)の実装を行います。
第四回では、おまけとして画像編集と画像複製(DALL-E2)を行います。

今回は第二回ということで、画像生成(DALL-E 3)の実装を行います。

📌 Project Overview: プロジェクトの概要

第二回 - DALL-E 3による画像生成Webアプリケーション作成:
- ユーザーがテキストを入力（例: 「宇宙服を着た犬」）
- 入力されたテキストに基づいてDALL-E 3が画像を生成

他の詳細については第一回を参照してください。

🚀 Image Generation Implementation (DALL-E 3): 画像生成(DALL-E 3)の実装

今回の実装では、DALL-E 3を使用して画像を生成するWebアプリケーションを作成します。

📁 Folder Structure: フォルダ構成

このプロジェクトのフォルダ構成は最終的に以下の通りになります：

.
├── node_modules/
│   └── ... # 依存関係のモジュール
├── index.html # エントリポイントHTMLファイル
├── package-lock.json # 自動生成される依存関係の正確なバージョンを記録するファイル
├── package.json # プロジェクトのメタデータと依存関係を定義するファイル
├── script.js # クライアントサイド JavaScript
├── server.js # Node.jsサーバー
└── style.css # CSSスタイルシート

📝 Implementation: 実装

第一回で作成したフォルダに移動して、VSCodeで開きます。
```
 cd dalle3-tutorial
 code .
```

まず、script.jsにfetchを使用してバックエンドのAPIとの通信を行うコードを追加します。

 const form = document.querySelector('form');
 const input = document.querySelector('input');
 const imageContainer = document.getElementById('image-container');

 form.addEventListener('submit', (event) => {
   event.preventDefault();
   const prompt = input.value;
   input.value = '';
   generateImage(prompt);
 });

 async function generateImage(prompt) {
   try {
     // /generateエンドポイントにPOSTリクエストを送信
     const response = await fetch('http://localhost:3000/generate', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ prompt })
     });

     // エラーハンドリング
     if (!response.ok) {
       throw new Error(errorMessage);
     }

     // レスポンスのJSONを取得する
     const data = await response.json();

     // 画像要素を生成して、imageContainerに追加
     if (data.image) {
       const imageElement = document.createElement('img');
       imageElement.src = data.image;
       imageContainer.appendChild(imageElement);
     } else {
       throw new Error('画像URLがレスポンスに含まれていません。');
     }
   } catch (error) {
     console.error('画像の生成に失敗しました。', error);
   }
 }

このコードは、フォームが送信されたときに、入力されたテキストを取得し、バックエンドのAPIに送信します。
送信時は、promptをJSON形式で送信します。
また、レスポンスが成功した場合は、画像を生成して、imageContainerに追加します。

🖥️ Complete Code Overview: 今回のコード全体

index.htmlファイル

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>DALL-E 3 Tutorial</title>
  </head>
  <body>

    <h1>DALL-E 3 Tutorial</h1>

    <form>
      <input type="text" placeholder="Enter a prompt" />
      <button type="submit">Generate</button>
    </form>

    <div id="image-container"></div>

    <script src="script.js"></script>

  </body>
</html>

style.cssファイル

body {
  font-family: sans-serif;
}

script.jsファイル

const form = document.querySelector('form');
const input = document.querySelector('input');
const imageContainer = document.getElementById('image-container');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const prompt = input.value;
  input.value = '';
  generateImage(prompt);
});

async function generateImage(prompt) {
  try {
    const response = await fetch('http://localhost:3000/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: prompt })
    });

    if (!response.ok) {
      throw new Error(errorMessage);
    }

    const data = await response.json();
    if (data.image) {
      const imageElement = document.createElement('img');
      imageElement.src = data.image;
      imageContainer.appendChild(imageElement);
    } else {
      throw new Error('画像URLがレスポンスに含まれていません。');
    }

  } catch (error) {
    console.error('画像の生成に失敗しました。', error);
  }
}

server.jsファイル

const OpenAI = require('openai');
const cors = require('cors');
const express = require('express');

// デフォルトでOpenAI APIキーは環境変数から自動取得されます
const openai = new OpenAI();
const app = express();
const port = 3000;

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.send('Server is Running!');
});

app.post('/generate', async (req, res) => {
  try {
    const prompt = req.body.prompt;
    const imageResponse = await openai.images.generate({
      model: "dall-e-3",
      prompt: prompt,
      n: 1,
      size: "1024x1024",
    });

    const imageUrl = imageResponse.data[0].url;
    if (!imageUrl) {
      return res.status(500).send({ error: '画像の生成に失敗しました。' });
    }

    // 成功した場合、画像URLを含むオブジェクトを返す
    res.status(200).json({ image: imageUrl });
  } catch (error) {
    res.status(500).send({
      error: '画像の生成に失敗しました。',
      details: error.message
    });
  }
});

app.listen(port, () => console.log('Listening on port', port));

以下はGitHubのリポジトリです。

📝 Conclusion: まとめ

お疲れ様でした！以上で、OpenAIの画像生成APIチュートリアルの第二回目は終了です。
この記事では、画像生成(DALL-E 3)の実装を行いました。
次回は、画像分析(gpt-4-vision)の実装を行います。