LaravelでChatGPTとDALL·E 2 のAPIを使用：AIに文章と画像を作ってもらう方法

Laravelを使って、OpenAIのChatGPTとDALL·E 2 を使ったWebアプリを開発してみました。

食材を入れると、メニューを考えてくれて、さらにメニューに合った画像を作ってくれるWebアプリです。

今回のコードを元にした実際のWebアプリ【今日のメニュー】もこちらにあります。

サンプル動画は、下記をご覧ください。

それでは早速始めてみましょう♪

初期設定
コントローラ作成
ルート設定作成
ビュー作成
APIの利用料金について
実際のWebアプリ
さいごに

初期設定

まずは、OpenAIのAPIキーを取得して、Laravelに設定します。

また必要なライブラリもインストールしておきましょう。

手順は、下記記事の「ChatGPT APIを使ってLaravelでWebアプリを作成：APIキー設定」をご覧ください。

ChatGPT APIを使ってLaravelと連携：Webアプリを作成する方法を解説

ChatGPTのAPIを使ってLaravelで「食材を入力するとレシピを考えてくれる」Webアプリを作りました。APIを使ったChatGPTとLaravelとの連携方法とコードの組み方、API利用料についての注意点をご紹介します。なおWeb...

コントローラ作成

下記コマンドでコントローラを作ります。

php artisan make:controller ImageController

app/Http/Controllersの中のChatController.phpを開きます。

use宣言には、次の通りいれておきましょう。

【app/Http/Controllers/ChatContoller.php】

use OpenAI\Laravel\Facades\OpenAI;

最初にimageメソッドを作ります。

public function image(Request $request)
    {
        $inputText=$request->food;

        if($inputText!=null) {

            // generateResponseメソッドに処理を受け渡す
            $responseText = $this->generateResponse($inputText);
        
            $messages = [
                ['title' => '食材', 'content' => $inputText],
                ['title' => 'メニュー', 'content' => $responseText]
            ];

            // generateImageメソッドに処理を受け渡す
            $image=$this->generateImage($responseText);
            
            return view('image', compact('messages', 'image'));
        }
        return view('image');
    }

$request->foodがnullではない、つまり、フォームから処理を受け渡されていれば、if($inputText!=null) 以下のコードを実行します。

まずgenerateResponseメソッドに処理を受け渡します。ここでは、ChatGPTにフォームから送信された値を受け渡して、これを元にメニューを作ってもらいます。

次にgenerateImageメソッドに処理を受け渡します。ここでは、DALL·E 2にChatGPTが考えたメニューを受け渡して、これを元に画像を作ってもらいます。

generateResponseメソッドは、下記のように入れます。

    // メニューを作成
    public function generateResponse($inputText) {
        $result = OpenAI::completions()->create([
            'model' => 'text-davinci-003',
            'prompt' => $inputText.'を使った料理名を1個考えて。',
            'temperature' => 0.8,
            'max_tokens' => 30,
        ]);
        return $result['choices'][0]['text'];
    }

temperatureは、多様性を制御するためのパラメータとなります。高い（例：0.8）と、ランダムで多様性に富んでいる回答が得られ、低い（例：0.2）と、より保守的な回答が得られます。
max_tokensは、最大トークンとなります。今回はメニュー名なので、少な目に30までとしました。30トークンは大体30文字程度ですが、文字によると1トークン1文字以上でカウントされます。また、漢字が入ったりすると増えます。

日本語の場合は、英語よりも多めにトークンが使われます。

トークンがどれだけ使われたか知るには、openAIのPlaygroundページでテストができます。右下に、やりとりに使われたトークン数が表示されます。

generateImageメソッドは、下記のように入れます。

    // 画像を作成 openai API
    public function generateImage($responseText) {
        $response =  OpenAI::images()->create([
            'prompt' => $responseText,
            'n' => 1,
            'size' => '256x256',
            'response_format' => 'url',
        ]);
        return $response['data'][0]['url'];
    }

sizeは、画像のサイズです。512*512、1024*1024のサイズ指定も可能です。ただ、大きい画像にすると、それだけAPIの利用料金も高くなります。
response_formatは、画像のフォーマットです。今回はurlにしました。他にもb64_jsonが選択可能です。b64_jsonの場合は、base64によって変換されたデータが得られます。表示の際には、デコードが必要です。

ルート設定作成

次にルート設定を作ります。routes/web.phpファイルを開き、下記ルートを追加しましょう。

【routes/web.php】

use App\Http\Controllers\ImageController;
（省略）
Route::get('/image', [ImageController::class, 'image'])->name('image.create');
Route::post('/image', [ImageController::class, 'image'])->name('image.post');

ビュー作成

最後にビュー部分です。resources/viewsの中にimage.blade.phpファイルを作り、下記のコードを追記します。

【resources/views/image.blade.php】

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>今日のメニュー</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<div class="mx-auto px-2 pt-8 pb-4 md:w-full lg:max-w-5xl xl:max-w-7xl">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h1 class="text-2xl font-bold mb-6">Today's Menu 今日のメニュー</h1>
			{{-- 材料を入力するためのフォーム --}}
			<form action="{{route('image.post')}}" method="POST">
				@csrf
				<input name="food" type="text" class="w-full px-4 py-2 mb-2 border border-gray-200 rounded-lg">

				<button type="submit" class="w-full px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg mt-2">
				送信する
				</button>
				<button id="clearChatButton" class="w-full px-4 py-2 bg-red-500 text-white font-semibold rounded-lg mt-2">
				履歴削除
				</button>

			</form>

            {{--メニューを表示 --}}
            @isset($messages)
				@foreach($messages as $message)
					<div class="text-align">
					{{ $message['title'] }}: {{ $message['content'] }}
					</div>
				@endforeach
            @endisset
			
            {{--画像を表示 --}}
			@isset($image)
				<img src="{{ $image }}" alt="画像" class="mx-auto">
            @endisset
        </div>
    </div>
</body>
</html>

サイトにアクセスして、画像をチェックしてみましょう。