Next.js(AppRouter)とOpenAI APIを利用して、テキストフォームから入力した画像を生成するプログラムを作成してみました。今回はDALL·E 3のモデルを利用しています。予めOpenAI PlatformでAPIキーの発行とクレジットを確保しておきましょう。取得したAPIキーは.envで設定します。

API_KEY=取得したAPIキー

また今回は勉強がてらAPI RoutesとAxiosを使って実装を試みました。実装は以下の環境にて。

• Next.js 14.2.x (AppRouter)
• React 18.3.x
• Axios 1.7.x

まず、page.jsに以下のようにフロントエンドを実装。プロンプトのテキストボックスと、作風を選ぶラジオボタンを配置しました。ここのHTMLやCSSは適当に。

'use client';
import { useState } from 'react';
import axios from 'axios';
export default function Home() {
 const [prompt, setPrompt] = useState('');
 const [type, setType] = useState('写真風');
 const [imageUrl, setImageUrl] = useState('');
 const [message, setMessage] = useState('');
 const [loading, setLoading] = useState(false);
 const generateImage = async () => {
  setLoading(true); //生成ボタンを非活性
  setImageUrl('');
  setMessage('');
  try {
   const requestPrompt = `${prompt} ${type}で生成してください`;
   const response = await axios.post('/api/imagegenerate', { prompt : requestPrompt });
   setImageUrl(response.data.imageUrl);
   setMessage('画像ができました！');
  } catch (error) {
   setMessage(`画像が生成できませんでした：${error}`);
  }
  setLoading(false); //生成ボタンを活性
 };
 return (
  <div>
   <label htmlFor="type1"><input type="radio" name="type" id="type1" onChange={(e) => setType(e.target.value)} value="写真風" defaultChecked="true" />写真風</label>
   <label htmlFor="type2"><input type="radio" name="type" id="type2" onChange={(e) => setType(e.target.value)} value="イラスト風" />イラスト風</label>
   <label htmlFor="type3"><input type="radio" name="type" id="type3" onChange={(e) => setType(e.target.value)} value="水彩画風" />水彩画風</label>
   <hr />
   <textarea name="prompt" id="prompt" onChange={(e) => setPrompt(e.target.value)} placeholder="プロンプトを入力" defaultValue={prompt}></textarea>
   <hr />
   <button onClick={generateImage} disabled={loading}>{loading ? '生成中です' : '画像を生成する'}</button>
   <p>{message}</p>
   {imageUrl && (
    <div>
     <h2>生成された画像</h2>
     <img src={imageUrl} alt="生成された画像です" width="1024" height="1024" />
    </div>
   )}
  </div>
 );
}

API面をフロントエンドからのリクエストとDALL·E APIの中継を実装します。ソースディレクトリに/api/imagegenerate/route.jsを配置し、以下のように実装しました。page.jsからPOSTでパラメータでリクエストされたプログラムを処理します。

import { NextResponse } from 'next/server';
import axios from 'axios';
export async function POST(req) {
 try {
  const { prompt } = await req.json();
  if (!prompt) {
   return NextResponse.json({ error: 'プロンプトを入力してください' }, { status: 400 });
  }
  const response = await axios.post(
   'https://api.openai.com/v1/images/generations',
   {
    prompt,
    n: 1,
    size: '1024x1024', //サイズ
    model: 'dall-e-3'
   },
   {
    headers: {
     Authorization: `Bearer ${process.env.API_KEY}`,
     'Content-Type': 'application/json',
    },
   }
  );
  return NextResponse.json({ imageUrl: response.data.data[0].url }, { status: 200 });
 } catch (error) {
  console.error('画像生成エラー:', error.response?.data || error.message);
  return NextResponse.json({ error: '画像生成に失敗しました' }, { status: 500 });
 }
}

イラスト風を選択して生成した場合の表示例。

プロンプトを色々アレンジすれば面白い画像ジェネレータが作れそうです。

おしまい♥

タグ：ChatGPTNext.jsReact言語AI/生成AI