OpenAI 画像生成API チュートリアル 環境構築編(1/4)

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

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

今回は第一回ということで、環境構築を行います。
この記事を読むにあたり、プログラミングの基礎知識があることを前提としています。
開発環境はWindowsで、エディタはVSCodeを使用します。
フロントエンド開発にはHTML、CSS、JavaScriptを使用します。
バックエンドはNode.jsを採用しています。
さらに、OpenAIのAPIに接続します。

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

• 第一回 - 環境構築:

  • プロジェクトの概要
  • 技術スタックの紹介
  • OpenAIアカウントの作成
  • APIキーの取得
  • 環境変数の設定
  • Node.jsのインストール
  • サーバーのセットアップ

• 第二回 - DALL-E 3による画像生成Webアプリケーション作成:

  • ユーザーがテキストを入力（例: 「宇宙服を着た犬」）
  • 入力されたテキストに基づいてDALL-E 3が画像を生成

• 第三回 - gpt-4-visionによる画像分析Webアプリケーション作成:

  • ユーザーが画像URLを入力
  • 入力された画像に基づいてgpt-4-visionが画像を分析
  • 次のような説明が生成される:

    Imagine a digitally rendered image that features a canine creature. This dog is unique because it's wearing clothes. The attire may vary from casual wear like t-shirts and shorts or more sophisticated attire like suits and dresses. The dog could be doing anything from simply standing to performing a specific action. The background should be generic and neutral to not overshadow the main focus which is the clothing-clad dog. The coloring and overall mood of the composition should be cheerful and inviting, suitable for a light-hearted and fun theme.
    

• 第四回 - DALL-E 2による画像複製Webアプリケーション作成:

  • ユーザーがpng画像をアップロード
  • アップロードされた画像に基づいてDALL-E 2が画像を複製

🛠️ Required Skill Set: 必要なスキルセット

• VSCode: コード編集やデバッグに利用するエディタ。
• Node.js: サーバーサイドのコードを実行するための環境。これにより、OpenAI APIへのリクエストを管理するバックエンドランタイム。
• HTML/CSS/JavaScript: ユーザーの入力を受け取り、サーバーからの応答を表示するフロントエンドを作成します。
• OpenAI API: ユーザーのテキストに基づいた画像を生成します。

🔧 Tools and Technologies Used: 使用するツールと技術

🖥️ VSCode

Visual Studio Code（VSCode）は、Microsoftによって開発されたフリーでオープンソースのコードエディタです。拡張性が高く、多言語をサポートしているため、JavaScript、HTML、CSSなどのウェブ開発言語に幅広く対応しています。また、豊富な拡張機能により、さまざまな開発ニーズに柔軟に対応することができます。

VSCode拡張機能は簡単に作成できるので、後日紹介します。

🟢 Node.js

Node.jsは、サーバーサイドでJavaScriptを実行するためのランタイム環境です。非同期I/Oを特徴とし、小規模なものから大規模なエンタープライズアプリケーションまで、多くのウェブアプリケーションのバックエンドとして広く採用されています。Node.jsを選ぶ主な理由はそのパフォーマンスと、NPM（Node Package Manager）による数千もの再利用可能なパッケージへのアクセスの容易さにあります。

非同期I/Oとは、プログラムがデータの入出力を待たずに処理を進めることを指します。Node.jsを例に挙げると、サーバーがデータベースからデータを取得する際、データベースからの応答を待たずに次の処理を実行します。そのため、データベースからの応答が返ってくるまでの間、他の処理を実行することができます。これにより、サーバーがデータベースからの応答を待つ時間を無駄にせず、より多くのリクエストを処理することができます。

💻 HTML/CSS/JavaScript

これらはウェブ開発の基本的なビルディングブロックです。HTMLはページの内容と構造を定義し、CSSはスタイルとレイアウトを指定し、JavaScriptはインタラクティブな要素を作成するために用いられます。このトリオをマスターすることで、現代のウェブアプリケーションのフロントエンド開発が可能になります。

🧠 OpenAI API

OpenAIは、最先端の人工知能モデルを提供する企業であり、画像生成関連だけで言うと、DALL-E 3 APIはこの会社が開発した強力な画像生成APIの一つです。ユーザーがテキストのプロンプトを送信すると、DALL-E 3はそれに基づいて独創的で詳細な画像を生成します。また、gpt-4-vision APIは、画像を分析して説明を生成するために使用されます。このAPIは、画像の内容を説明する文章を生成することができます。さらに、現状ではDALL-E 2 APIにのみ、画像編集・複製機能が実装されています。

📋 Preliminary Steps: 事前準備

🆕 Create an OpenAI Account: OpenAIのアカウントを作成する

1. OpenAIの公式ウェブサイト https://openai.com/ を開きます。
2. 「Sign Up」ボタンをクリックします。
3. 必要な情報を入力してアカウント登録を行います。

アカウントの作成やログインに問題がある場合は、次の点を確認してください：

• 全ての入力欄が正しく埋められているか
• アクティベーションメールが届いているか（届かない場合は迷惑メールフォルダをチェック）
• OpenAIのサポートページ https://help.openai.com/ で追加のサポート情報を確認してください。

🔑 Obtain OpenAI API Key: OpenAIのAPIキーを取得する

1. 登録したOpenAIアカウントでログインします。
2. OpenAIのダッシュボード https://platform.openai.com/ にアクセスします。
3. ダッシュボード上で「APIキー」セクションを探します。
4. 「新しいAPIキーを作成」ボタンをクリックします。
5. APIキーを安全な場所にコピーして保存します。

OpenAIのAPIキーは他人に知られると悪用される可能性があるため、絶対に公開しません。また、APIキーの取得に問題がある場合は、OpenAIアカウントの認証が完了していること、APIキーのリミットに達していないことを確認してください。

🌐 Set OpenAI API Key as an Environment Variable: OpenAIのAPIキーを環境変数に設定する

Windowsでは、APIキーを環境変数として設定しておくことで、アプリケーションから安全に使用できるようになります。

Using PowerShell: PowerShellを使用する場合

• 一時的設定

  $Env:OPENAI_API_KEY = "sk-あなたのAPIキー"
  

  このコマンドを実行すると、現在開いているPowerShellセッションでのみOPENAI_API_KEY環境変数が有効になります。

• 永続的設定

  [System.Environment]::SetEnvironmentVariable('OPENAI_API_KEY', 'sk-あなたのAPIキー', [System.EnvironmentVariableTarget]::User)
  

  このコマンドはユーザーレベルの環境変数を設定し、新しいセッションや再起動後も利用可能です。

Using Command Prompt (CMD): コマンドプロンプト（CMD）を使用する場合

• CMDでの永続的設定

  setx OPENAI_API_KEY "sk-あなたのAPIキー"
  

  setx コマンドは新しいコマンドプロンプトセッションで環境変数を利用可能にしますが、現在のセッションには影響しません。

✅ Verify Environment Variables: 環境変数が正しく設定されているか確認する

• PowerShellでの確認

  echo $Env:OPENAI_API_KEY
  

  正常に設定されていれば、先ほど設定したAPIキーが表示されます。

• CMDでの確認

  echo %OPENAI_API_KEY%
  

  こちらも同様に、APIキーが表示されることを確認します。

環境変数が期待した通りに機能していない場合は、システムを再起動してからもう一度確認してみてください。また、変数名が正しく設定されていること（大文字小文字を含む）も確認してください。

📦 Install Node.js: Node.jsをインストールする

Node.jsのインストール方法は以下の通りです：

• 公式サイトからのインストール

  1. Node.jsの公式ウェブサイト https://nodejs.org/ にアクセスします。
  2. 推奨版（LTS）または最新版のWindowsインストーラを選んでダウンロードします。
  3. ダウンロードしたインストーラを実行し、指示に従ってNode.jsをインストールします。

• Chocolateyを使ったインストール

  1. Chocolateyがすでにインストールされていることを確認します。未インストールの場合は、Chocolateyのインストール手順に従ってください。
  2. PowerShellを管理者として実行します。
  3. 次のコマンドを入力してNode.jsをインストールします。

     choco install nodejs
     

Node.jsのインストールに失敗した場合やコマンドラインからアクセスできない場合は、パスが正しくシステムに登録されているかどうかを確認してください。問題が続く場合は、Node.jsコミュニティのフォーラムやStack Overflowで既知の問題や解決策を検索することをお勧めします。

🚀 Project Setup: プロジェクトのセットアップ

すべてコマンドラインで行っていますが、ファイル作成等はファイルエクスプローラーから行っても構いません。
また、以下のコマンドはpowershellで実行しています。
今回のセットアップでは、OpenAIのAPIキーを使用してサーバーを起動する所まで行います。

📁 Folder Structure: フォルダ構成

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

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

エントリーポイントとは、アプリケーションの実行を開始するファイルのことです。このプロジェクトでは、index.htmlファイルがエントリーポイントとなります。

1. 任意のディレクトリに移動し、新しいフォルダを作成します。

   mkdir dalle3-tutorial
   

2. 作成したフォルダに移動します。

    cd dalle3-tutorial
   

3. 作成したフォルダをVSCodeで開きます。

    code .
   

4. VSCodeのターミナルを開き、次のコマンドを実行してNode.jsプロジェクトを初期化します。

   npm init -y
   

   これにより、package.jsonファイルが作成されます。

   package.jsonファイルは、プロジェクトのメタデータを含むJSONファイルです。このファイルには、プロジェクトの名前、バージョン、依存関係などの情報が含まれています。また、-yオプションを使用すると、すべての質問にデフォルト値で回答することができます。

5. 次のコマンドを実行して、express, openai, corsパッケージをインストールします。

    npm install express openai cors
   

   expressはNode.jsのWebフレームワークであり、openaiはOpenAI APIを使用するためのライブラリで、corsはクロスオリジンリソース共有を可能にするライブラリです。

6. package.jsonファイルを開き、scriptsセクションに次のコマンドを追加します。

   "start": "node server.js"
   

   これにより、npm startコマンドでサーバーを起動できるようになります。

7. プロジェクトのルートディレクトリにserver.jsファイルを作成します。

    New-Item server.js -ItemType File
   

   このファイルは、サーバーのエントリーポイントとして機能します。サーバーの起動、OpenAI APIへのリクエスト、クライアントへの応答など、すべてのサーバー関連のコードはこのファイルに記述します。

8. server.jsファイルを開き、次のコードを追加します。

    const express = require('express');
    const app = express();
    const port = 3000;
   
    app.get('/', (req, res) => {
      res.send('Server is Running!');
    });
   
    app.listen(port, () => console.log('Listening on port', port));
   

   このコードは、サーバーを起動し、/エンドポイントにリクエストが送信された場合にHello World!というテキストを返すようにします。

9. 次のコマンドを実行して、サーバーを起動します。

   npm start
   

   これにより、サーバーが起動し、http://localhost:3000にアクセスするとHello World!というテキストが表示されます。

   npm startコマンドは、package.jsonファイルのscriptsセクションに追加したコマンドを実行します。この場合、node server.jsコマンドが実行されます。なで、npm startコマンドはnode server.jsコマンドと同じです。

10. Ctrl + Cを押してサーバーを停止します。

11. 次のコマンドを実行して、index.htmlファイルを作成します。

    New-Item index.html -ItemType File
    

    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>
    

    これにより、index.htmlファイルがHTML5ドキュメントとして初期化されます。

12. 次のコマンドを実行して、style.cssファイルを作成します。

    New-Item style.css -ItemType File
    

    これにより、CSSファイルが作成されます。
    style.cssファイルを開き、次のコードを追加します。

    body {
      font-family: sans-serif;
    }
    

    このファイルには、後からCSSを追加していきます。

13. 次のコマンドを実行して、script.jsファイルを作成します。

    New-Item script.js -ItemType File
    

    これにより、JavaScriptファイルが作成されます。
    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) {
      // /exampleエンドポイントにPOSTリクエストを送る
      const response = await fetch('http://localhost:3000/example', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prompt })
      });
      // レスポンスのJSONを取得する
      const { message } = await response.json();
      console.log(message);
      imageContainer.innerHTML = `${message}`;
    }
    

    このコードは、テキストを入力し、Generateボタンをクリックすると、generateImage関数が呼び出されます。

14. server.jsファイルを開き、次のコードを追加します。

    const express = require('express');
    const cors = require('cors');
    const app = express();
    const port = 3000;
    
    app.use(cors());
    app.use(express.json())
    
    app.get('/', (req, res) => {
      res.send('Server is Running!');
    });
    
    app.post('/example', (req, res) => {
      const { prompt } = req.body;
      console.log(prompt);
      res.json({ message: 'POST Request' });
    });
    
    app.listen(port, () => console.log('Listening on port', port));
    

    このコードは、/exampleエンドポイントにPOSTリクエストが送信された場合に、promptをコンソールに出力し、POST Requestというメッセージを返します。

🖥️ 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) {
  // /exampleエンドポイントにPOSTリクエストを送る
  const response = await fetch('http://localhost:3000/example', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ prompt })
  });
  // レスポンスのJSONを取得する
  const { message } = await response.json();
  console.log(message);
  imageContainer.innerHTML = `${message}`;
}

server.jsファイル

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

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

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

app.post('/example', (req, res) => {
  const { prompt } = req.body;
  console.log(prompt);
  res.json({ message: 'POST Request' });
});

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

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

https://github.com/yuyuyu2118/dalle3-tutorial-envSetting

📝 Conclusion: まとめ

お疲れ様でした！以上で環境設定とセットアップは完了です。
この記事では、OpenAIのアカウント作成、APIキーの取得、環境変数の設定、そしてNode.jsのインストール、サーバーのセットアップを行いました。
次回は、画像生成(DALL-E 3)の実装を行います。