Next.js で画像生成AIを使ってプロンプトエンジニアリングする
はじめに
ちょっと前にすごく話題になっていた生成系AI。
最近でもちょくちょく話題になっているので、気になっていました。
とはいえ私は、画像生成AIを使ったことがなく、
どんなことができるのか、どう扱うものなのかが理解できずにいましたので、
まずは触ってみたアウトプットということで書いていきます。
コーヒーでも飲みながら見てみてください。
Open AI の画像生成APIを使う
調べ切れていないのでアレですが、
普段お世話になっている ChatGPT 様にあやかって Open AI の画像生成APIを使ったみたいと思います。
以下は画像生成APIのドキュメント。
APIキーを取得する
以下のリンクから、APIキーの取得をします。
※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
これで一旦完了です。続いて、実際にコードを書いていきます。
コードを書いていく
ドキュメントに従い、APIを定義
まずは基本となるAPIファイルを用意
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
}
表示用コンポーネントの実装
コンポーネントの用意をします。
"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;
表示用の実装
表示用のファイルを用意
import { NextPage } from "next";
import View from "./components/view";
const Page: NextPage = () => {
return (
<View />
)
};
export default Page;
ここまで出来ましたら、以下のコマンドでアクセスします。
$ npm run dev
初期ロード時の画面はこんな感じになっています。
実際の画面
実際に操作してみました。
まずはドキュメントにある通り、よくある「cat」プロンプトを実行してみます。
いいね!
続いて、ちょっと捻った?感じにしてみました。
「cute girl apple」どんな感じになるのか?!とおもったら。。
すごい!!的を得ていて流石ですね!
「Boys enjoying baseball in the evening」これはどうかな?!
これは、、野球なのか?
おわりに
様々な WebAPI がありますが、画像生成APIを叩くのは新鮮でとても楽しく実装できました。
ぜひぜひ、皆さんも画像生成して楽しんでみてください(^^♪
Discussion