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

# 📖 **Table of Contents: 目次**

- [📖 **Table of Contents: 目次**](#-table-of-contents-目次)
- [🤖 **OpenAI Image Generation API Tutorial: OpenAIの画像生成APIチュートリアル**](#-openai-image-generation-api-tutorial-openaiの画像生成apiチュートリアル)
  - [📌 **Project Overview: プロジェクトの概要**](#-project-overview-プロジェクトの概要)
    - [🛠️ **Required Skill Set: 必要なスキルセット**](#️-required-skill-set-必要なスキルセット)
  - [🔧 **Tools and Technologies Used: 使用するツールと技術**](#-tools-and-technologies-used-使用するツールと技術)
    - [🖥️ VSCode](#️-vscode)
    - [🟢 Node.js](#-nodejs)
    - [💻 HTML/CSS/JavaScript](#-htmlcssjavascript)
    - [🧠 OpenAI API](#-openai-api)
  - [📋 **Preliminary Steps: 事前準備**](#-preliminary-steps-事前準備)
    - [🆕 Create an OpenAI Account: OpenAIのアカウントを作成する](#-create-an-openai-account-openaiのアカウントを作成する)
    - [🔑 Obtain OpenAI API Key: OpenAIのAPIキーを取得する](#-obtain-openai-api-key-openaiのapiキーを取得する)
    - [🌐 Set OpenAI API Key as an Environment Variable: OpenAIのAPIキーを環境変数に設定する](#-set-openai-api-key-as-an-environment-variable-openaiのapiキーを環境変数に設定する)
      - [Using PowerShell: PowerShellを使用する場合](#using-powershell-powershellを使用する場合)
      - [Using Command Prompt (CMD): コマンドプロンプト（CMD）を使用する場合](#using-command-prompt-cmd-コマンドプロンプトcmdを使用する場合)
    - [✅ Verify Environment Variables: 環境変数が正しく設定されているか確認する](#-verify-environment-variables-環境変数が正しく設定されているか確認する)
    - [📦 Install Node.js: Node.jsをインストールする](#-install-nodejs-nodejsをインストールする)
  - [🚀 **Project Setup: プロジェクトのセットアップ**](#-project-setup-プロジェクトのセットアップ)
    - [📁 Folder Structure: フォルダ構成](#-folder-structure-フォルダ構成)
  - [🖥️ **Complete Code Overview: 今回のコード全体**](#️-complete-code-overview-今回のコード全体)
  - [📝 **Conclusion: まとめ**](#-conclusion-まとめ)

# 🤖 **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が画像を生成

![宇宙服を着た犬.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538434/64ce52c6-b7d0-dcd1-1a6e-91c3a4ec7b79.png)

- **第三回 - 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などのウェブ開発言語に幅広く対応しています。また、豊富な拡張機能により、さまざまな開発ニーズに柔軟に対応することができます。

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

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

:::message
非同期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/](https://openai.com/) を開きます。
2. 「Sign Up」ボタンをクリックします。
3. 必要な情報を入力してアカウント登録を行います。

:::note warn
アカウントの作成やログインに問題がある場合は、次の点を確認してください：
- 全ての入力欄が正しく埋められているか
- アクティベーションメールが届いているか（届かない場合は迷惑メールフォルダをチェック）
- OpenAIのサポートページ [https://help.openai.com/](https://help.openai.com/) で追加のサポート情報を確認してください。
:::

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

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

### 🌐 Set OpenAI API Key as an Environment Variable: OpenAIのAPIキーを環境変数に設定する
Windowsでは、APIキーを環境変数として設定しておくことで、アプリケーションから安全に使用できるようになります。

#### Using PowerShell: PowerShellを使用する場合
- **一時的設定**
  ```powershell
  $Env:OPENAI_API_KEY = "sk-あなたのAPIキー"
  ```
  このコマンドを実行すると、現在開いているPowerShellセッションでのみ`OPENAI_API_KEY`環境変数が有効になります。

- **永続的設定**
  ```powershell
  [System.Environment]::SetEnvironmentVariable('OPENAI_API_KEY', 'sk-あなたのAPIキー', [System.EnvironmentVariableTarget]::User)
  ```
  このコマンドはユーザーレベルの環境変数を設定し、新しいセッションや再起動後も利用可能です。

#### Using Command Prompt (CMD): コマンドプロンプト（CMD）を使用する場合
- **CMDでの永続的設定**
  ```cmd
  setx OPENAI_API_KEY "sk-あなたのAPIキー"
  ```
  `setx` コマンドは新しいコマンドプロンプトセッションで環境変数を利用可能にしますが、現在のセッションには影響しません。

### ✅ Verify Environment Variables: 環境変数が正しく設定されているか確認する
- **PowerShellでの確認**
  ```powershell
  echo $Env:OPENAI_API_KEY
  ```
  正常に設定されていれば、先ほど設定したAPIキーが表示されます。

- **CMDでの確認**
  ```cmd
  echo %OPENAI_API_KEY%
  ```
  こちらも同様に、APIキーが表示されることを確認します。

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

### 📦 Install Node.js: Node.jsをインストールする
Node.jsのインストール方法は以下の通りです：
- **公式サイトからのインストール**
  1. Node.jsの公式ウェブサイト [https://nodejs.org/](https://nodejs.org/) にアクセスします。
  2. 推奨版（LTS）または最新版のWindowsインストーラを選んでダウンロードします。
  3. ダウンロードしたインストーラを実行し、指示に従ってNode.jsをインストールします。

- **Chocolateyを使ったインストール**
  1. Chocolateyがすでにインストールされていることを確認します。未インストールの場合は、[Chocolateyのインストール手順](https://chocolatey.org/install)に従ってください。
  2. PowerShellを管理者として実行します。
  3. 次のコマンドを入力してNode.jsをインストールします。
     ```powershell
     choco install nodejs
     ```

:::note warn
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スタイルシート
```

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

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

2. 作成したフォルダに移動します。
   ```powershell
    cd dalle3-tutorial
    ```

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

4. VSCodeのターミナルを開き、次のコマンドを実行してNode.jsプロジェクトを初期化します。
   ```powershell
   npm init -y
   ```
   これにより、`package.json`ファイルが作成されます。

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

5. 次のコマンドを実行して、`express`, `openai`, `cors`パッケージをインストールします。
   ```powershell
    npm install express openai cors
    ```
   :::message
   `express`はNode.jsのWebフレームワークであり、`openai`はOpenAI APIを使用するためのライブラリで、`cors`はクロスオリジンリソース共有を可能にするライブラリです。
   :::

6. `package.json`ファイルを開き、`scripts`セクションに次のコマンドを追加します。
   ```json
   "start": "node server.js"
   ```
   これにより、`npm start`コマンドでサーバーを起動できるようになります。

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

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

8. `server.js`ファイルを開き、次のコードを追加します。
   ```javascript
    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));
   ```

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

9. 次のコマンドを実行して、サーバーを起動します。
   ```powershell
   npm start
   ```
   これにより、サーバーが起動し、`http://localhost:3000`にアクセスすると`Hello World!`というテキストが表示されます。
   
   :::message
   `npm start`コマンドは、`package.json`ファイルの`scripts`セクションに追加したコマンドを実行します。この場合、`node server.js`コマンドが実行されます。なで、`npm start`コマンドは`node server.js`コマンドと同じです。
   :::

10. `Ctrl + C`を押してサーバーを停止します。
    
11. 次のコマンドを実行して、`index.html`ファイルを作成します。
    ```powershell
    New-Item index.html -ItemType File
    ```
    `index.html`ファイルを開き、次のコードを追加します。
    ```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`ファイルを作成します。
    ```powershell
    New-Item style.css -ItemType File
    ```
    これにより、CSSファイルが作成されます。
    `style.css`ファイルを開き、次のコードを追加します。
    ```css
    body {
      font-family: sans-serif;
    }
    ```
    このファイルには、後からCSSを追加していきます。

13. 次のコマンドを実行して、`script.js`ファイルを作成します。
    ```powershell
    New-Item script.js -ItemType File
    ```
    これにより、JavaScriptファイルが作成されます。
    `script.js`ファイルを開き、次のコードを追加します。
    ```javascript
    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}`;
    }
    ```

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

14. `server.js`ファイルを開き、次のコードを追加します。
    ```javascript
    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));
    ```

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

## 🖥️ **Complete Code Overview: 今回のコード全体**
`index.html`ファイル
```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`ファイル
```css
body {
  font-family: sans-serif;
}
```

`script.js`ファイル
```javascript
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`ファイル
```javascript
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)の実装を行います。