🖼️

Next.js で画像生成AIを使ってプロンプトエンジニアリングする

Iseya Shota

2023/08/06に公開

はじめに

ちょっと前にすごく話題になっていた生成系AI。
最近でもちょくちょく話題になっているので、気になっていました。

とはいえ私は、画像生成AIを使ったことがなく、
どんなことができるのか、どう扱うものなのかが理解できずにいましたので、
まずは触ってみたアウトプットということで書いていきます。

コーヒーでも飲みながら見てみてください。

Open AI の画像生成APIを使う

調べ切れていないのでアレですが、
普段お世話になっている ChatGPT 様にあやかって Open AI の画像生成APIを使ったみたいと思います。

以下は画像生成APIのドキュメント。

APIキーを取得する

以下のリンクから、APIキーの取得をします。
https://platform.openai.com/
※APIキーは秘匿情報ですので、外部に漏らさないように注意しましょう。

ログインしている状態で、ページの右上あたりにご自身のアイコンが設置されているかと思います。まずはそこをクリック。

クリックすると「View API Keys」と出てくるので、さらにクリックします。

そうすると、トップに「API keys」と書かれたページに移動するかと思いますので、
中央部分にある、「Create new secret key」を押し、任意の名前を入力後、
「Create secret key」と書かれた緑色のボタンを押します。

これでAPIキーの取得が出来ましたので、メモ帳にでもコピーしておきましょう！（大切に保管）

Next.js のプロジェクト作成

次に、Next.js のプロジェクトを作成します。
任意のディレクトリ配下で以下を実行。

$ npx create-next-app@latest

いくつかの問いが出てきますので、お好みで設定ください。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

以下のように「Success!」と出ればOKです。
プロジェクト名は、prompt-app と命名しました。

added 349 packages, and audited 350 packages in 41s

131 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created prompt-app at

起動してみます、以下のコマンドで起動。
http://localhost:3000 にアクセスし、画像のような画面になればOKです。（Next.js の初期表示画面コロコロ変わりますね）

$ npm run dev

Next.js

これで一旦完了です。続いて、実際にコードを書いていきます。

コードを書いていく

ドキュメントに従い、APIを定義

まずは基本となるAPIファイルを用意

api.ts

import axios from "axios"

const baseUrl = 'https://api.openai.com/v1/'

export const createImg = (prompt: string, size: string, n: number) => {
	const res = axios.post(`${baseUrl}images/generations`, {
		model: 'image-alpha-001',
		prompt,
		size,
		n,
		response_format: "url"
	},
	{
		headers: {
			'Content-Type': 'application/json',
			Authorization: `Bearer ${process.env.API_KEY}`,
		},
	})
	return res.data
}

表示用コンポーネントの実装

コンポーネントの用意をします。

components/view.tsx

"use client";

import { NextPage } from "next";
import { useState } from "react";
import { createImg } from "../api/update-img";
import { Box, TextField, Button } from "@mui/material";

type GenerateImg = {
	url: string
}[]

const View = () => {
	const [imgUrl, setImgUrl] = useState<GenerateImg>([])
	const [prompt, setPrompt] = useState("");

	const handleCreateImg = async() => {
		try {
			const img = await createImg(prompt, "1024x1024", 1)
			setImgUrl(img.data)
		} catch (error) {
			alert("画像の生成に失敗しました")
		}
	}

	
	return (
	<Box sx={{textAlign: "center"}}>
		<h2>Prompt App</h2>
		<Box >
			<TextField 
				id="outlined-basic"
				label="生成したい画像" 
				variant="outlined" color="success" 
				onChange={(e) => setPrompt(e.target.value)}
				/>
			<Button sx={{marginLeft: 4}} variant="contained" color="success" onClick={handleCreateImg}>
				画像を作成する
			</Button>
		</Box>
		<Box className="mx-4 my-2 p-4 flex-auto bg-white shadow rounded-md">
		<h2 className="block text-sm font-medium leading-6 text-gray-900">生成結果：</h2>
			{imgUrl.length > 0 && (
			<Box className="flex">
				{imgUrl.map((item, index) => (	
				<Box className="mr-2">
					<img key={index} src={item.url} height={300} width={300}/>
				</Box>
				))}
			</Box>
			)}
		</Box>
	</Box>
	)
};

export default View;

表示用の実装

表示用のファイルを用意

index.tsx

import { NextPage } from "next";
import View from "./components/view";

const Page: NextPage = () => {
	return (
		<View />
		)
	};

export default Page;