OpenAI API + Vue.jsで画像作成アプリを作る

はじめに

OpenAI API では、DALL·Eという画像生成モデルを使用した画像生成用の APIImage generation（beta 版）が提供されている

ChatGPT にも教えてもらった

OpenAI APIの画像生成機能は、人工知能を使用して、与えられたテキストの説明に基づいて、自動的に画像を生成する機能です。
たとえば、「夕暮れの風景」という説明を与えると、OpenAI APIはそのイメージを生成し、その説明に最も適した画像を提供することができます。

この機能は、ゲームや映画などの映像制作、マーケティングや広告の画像制作、アート作品やエンターテイメントの制作など、多くの場面で活用されています。
また、研究分野においても、画像生成技術を用いた新しい知見の発見や、新しいアイデアの創出に役立てられています。

OpenAI APIの画像生成機能は、APIを使用するためには、APIキーの取得や課金が必要です。
一度APIキーを取得したら、APIを使用するプログラムを開発することで、独自の画像生成システムを構築することができます。

また、API では以下の機能が提供されている

• テキスト プロンプトに基づいてゼロからイメージを作成する
• 新しいテキスト プロンプトに基づく既存の画像の編集の作成
• 既存の画像のバリエーションを作成する

今回は、

テキスト プロンプトに基づいてゼロからイメージを作成する

を使用して、フォームの入力内容に基づいた画像を生成するアプリを Vue.js で作成する

料金体系

https://openai.com/pricing#:~:text=Other%20models-,Image%20models,-Build%20DALL%C2%B7E%20directly

1 枚あたり約 20 円、結構高い

事前準備

• OpenAI API キーの発行
• 開発環境の作成
  • 割愛

まずは Curl で API を試してみる

curl https://api.openai.com/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer APIキー" \
  -d '{
    "prompt": "青い鳥",
    "n": 1,
    "size": "256x256"
  }'

成功するとレスポンスが返ってくるので、data 内の url にアクセス

{
  "created": 1681110572,
  "data": [
    {
      "url": 画像URL
    }
  ]
}

指定した画像が生成されている

簡単なフォーム作成

• API キー
• 生成したい画像の命令文

JavaScript で API を実行

実行用関数を作成

async createImage(apiKey, prompt) {
  const configuration = new Configuration({
    apiKey,
  })
  const openai = new OpenAIApi(configuration)
  const request: CreateImageRequest = { prompt }
  const response = await openai.createImage(request)
  this.images.unshift({ prompt, ...response.data })
},

Generate ボタン押下で実行

const generate = async () => {
  try {
    isLoading.value = true
    await createImage(apiKey.value, prompt.value)
  } catch {
    alert('Failed to generate image')
  } finally {
    isLoading.value = false
  }
}

実行結果を確認

指定した条件で画像が生成されている

詳細条件を指定できるようにする

• 生成する枚数
• 解像度

の条件を追加

async createImage(
  apiKey,
  prompt,
  n = 1, // 枚数
  size = CreateImageRequestSizeEnum._256x256 // 解像度
) {
  const configuration = new Configuration({
    apiKey,
  })
  const openai = new OpenAIApi(configuration)
  const request: CreateImageRequest = { prompt, n, size }
  const response = await openai.createImage(request)
  this.images.unshift({ prompt, ...response.data })
},

const generate = async () => {
  try {
    isLoading.value = true
    // 枚数、解像度を追加
    await createImage(apiKey.value, prompt.value, number.value, size.value)
  } catch {
    alert('Failed to generate image')
  } finally {
    isLoading.value = false
  }
}

フォームも追加

完成

コードはこちら

https://github.com/ryo13chan/ryo-portfolio/blob/master/pages/works/open-ai-image-generator.vue