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

ChatGPTのAPIを使ってLaravelで「食材を入力するとレシピを考えてくれる」Webアプリを作りました。

APIを使ったChatGPTとLaravelとの連携方法とコードの組み方、API利用料についての注意点をご紹介します。

なおWebアプリは、下記動画でどんなふうに使えるかがご覧いただけます。

冷蔵庫にあるもので何を作るか悩んだ時に使えるWebアプリです。

クリックして、どんなふうに動くか見てみてください。

【Webアプリを動画で見てみる】

↓↓↓

ChatGPT APIを使ってLaravelでWebアプリを作成：APIキー設定
ChatGPT APIを使ってLaravelでWebアプリを作成：コード部分
ChatGPTのAPIを使う時の料金について
さいごに

ChatGPT APIを使ってLaravelでWebアプリを作成：APIキー設定

まずは連携方法について。今回は、Laravelの公式記事でも紹介されている openai-phpライブラリを作わせてもらいました。

OpenAI for Laravel - Laravel News

OpenAI PHP for Laravel is a supercharged PHP API client that allows you to interact with OpenAI API.

上記のライブラリのインストールには、PHP8.1以上が必要となります。

なお、Laravelはバージョン10を使いました。Laravel10も、PHP8.1以上が必要です。Laravelのインストールは割愛しますが、ご興味あれば、下記記事ご覧ください。

Laravelのインストールと環境構築・Windows編【Laravel入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。 ...

① ライブラリをインストール

コマンドを実行し、ライブラリをインストールします。

composer require openai-php/laravel

1	composer require openai-php/laravel

設定ファイルを発行します。

php artisan vendor:publish --provider="OpenAI\Laravel\ServiceProvider"

1	php artisan vendor:publish --provider="OpenAI\Laravel\ServiceProvider"

② APIキーを設定

あらかじめこちらのページより、アカウントを作成しておきます。ログイン後、右上のView API Keysをクリック。

+Create new secret key ボタンをクリックして、APIキーを作ります。キーをコピーします。

プロジェクトの.envファイルに OPENAI_API_KEY という項目でキーを設定します。

OPENAI_API_KEY=sk-××××

1	OPENAI_API_KEY=sk-××××

③ configを設定

次に、config/openai.phpを開きます。②で設定したキー情報を、configに設定しておきます。

<?php
return [
    'api_key' => env('OPENAI_API_KEY')
];

<?php

return [

'api_key' => env('OPENAI_API_KEY')

];

APIキーの設定は以上となります。

ChatGPT APIを使ってLaravelでWebアプリを作成：コード部分

次にコード部分を作っていきます。

① コントローラ作成

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

php artisan make:controller ChatController

1	php artisan make:controller ChatController

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

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

【app/Http/Controllers/ChatContoller.php】

use OpenAI\Laravel\Facades\OpenAI;

1	use OpenAI\Laravel\Facades\OpenAI;

メソッドは下記のように入れました。

【app/Http/Controllers/ChatContoller.php】

    public function chat(Request $request)
    {
        $inputText=$request->food;
        if($inputText!=null) {
            $responseText = $this->generateResponse($inputText);
        
            $messages = [
                ['title' => '食材', 'content' => $inputText],
                ['title' => 'レシピ', 'content' => $responseText]
            ];
            return view('chat.create', ['messages' => $messages]);
        
        }
        return view('chat.create');
    }

    public function generateResponse($inputText) {
        $result = OpenAI::completions()->create([
            'model' => 'gpt-3.5-turbo-instruct',
            'prompt' => '冷蔵庫にある食材を教えます。'.$inputText.'美味しいレシピを5文以内で教えてください。',
            'temperature' => 0.8,
            'max_tokens' => 150,
        ]);
        return $result['choices'][0]['text'];
    }

public function chat(Request $request)

{

$inputText=$request->food;

if($inputText!=null) {

$responseText = $this->generateResponse($inputText);

$messages = [

['title' => '食材', 'content' => $inputText],

['title' => 'レシピ', 'content' => $responseText]

];

return view('chat.create', ['messages' => $messages]);

}

return view('chat.create');

}

public function generateResponse($inputText) {

$result = OpenAI::completions()->create([

'model' => 'gpt-3.5-turbo-instruct',

'prompt' => '冷蔵庫にある食材を教えます。'.$inputText.'美味しいレシピを5文以内で教えてください。',

'temperature' => 0.8,

'max_tokens' => 150,

]);

return $result['choices'][0]['text'];

}

コードを解説します。

※なお、以前は　’model’ => ‘text-davinci-003′ でしたが、このモデルは古くなり使用できなくなったため、’gpt-3.5-turbo-instruct’ に変更しました。今後もまたモデルの変更はあるかもしれません。利用可能なモデルについては、下記をご参照ください。

Just a moment...

chatメソッドのコードについて

chatメソッドは、ビュー部分表示のためのコードをいれています。上から説明します。

if($inputText!=null) とif構文を使っています。$inputTextは、フォームを通じて送信された食材（$request->food) の情報が入っています。もし（$inputText) がnullでなければ、つまり食材が送信されていれば、if構文の中のコードを実行する形にしています。
if構文の中では、$this->generateResponse($inputText); と、generateResponseメソッドに処理を受け渡しています。generateResponseでは、ChatGPT側に食材情報を受け渡し、得られた回答を$responseText という変数で返します。
$messagesの中に食材情報（$inputText)と、ChatGPTの回答（$responseText)をセットして、ビュー側に受け渡しています。

generateResponseメソッドのコードについて

generateResponseメソッド部分は、ChatGPTとやりとりしている部分になります。ざっと項目を説明します。

modelは、使用した機械学習モデルです。今回は「text-davinci-003」と設定しました。ライブラリの使用例に記載されていたので、こちらを使っています。どのモデルを使用するかで結果が変わります。
promptは、モデルに入力されるテキストとなります。ChatGPT側に受け渡す文章です。今回は、「’冷蔵庫にある食材を教えます’.$inputText.’美味しいレシピを5文以内で教えてください。」としました。このようにすることで、レシピを教えてくれるように、指示を送ることができます。また「5文以内」とすることで、回答の文量にも制限をかけました。
temperatureは、多様性を制御するためのパラメータとなります。高い（例：0.8）と、ランダムで多様性に富んでいる回答が得られ、低い（例：0.2）と、より保守的な回答が得られます。
max_tokensは、最大トークンとなります。今回は150までとしました。150トークンは大体150文字程度ですが、漢字が入ったりすると変わります。

こういった設定でChatGPTから回答を得て、これを返しています。

ただこの設定って、文字で言われても良く分からない部分ばかりですよね＾＾；

「設定を変えると、どんなふうに返答が変わるか見たい」という場合は、openAIのPlaygroundページでテストができます。

モデルや、Temperature等の各種設定を変えると、APIの応答がどう変わるかチェックできます。右下にトークン数も表示されます（下記では16となっています）。

② ルート設定

次にルート設定を作ります。

今回は、下記のように２つのルート設定をroutes/web.phpに加えました。

【routes/web.php】

use App\Http\Controllers\ChatController;

Route::get('/chat', [ChatController::class, 'chat'])->name('chat.create');
Route::post('/chat', [ChatController::class, 'chat'])->name('chat.post');

use App\Http\Controllers\ChatController;

Route::get('/chat', [ChatController::class, 'chat'])->name('chat.create');

Route::post('/chat', [ChatController::class, 'chat'])->name('chat.post');

③ ビュー部分

最後にビュー部分です。

resources/viewsにchatフォルダを作り、その中にcreate.blade.phpファイルを作ります。下記のようにコードを入れます（クラス等、デザイン部分を構成するコードは省略しています）。

【resources/views/chat/create.blade.php】

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>レシピ作成アプリ</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div>
        {{-- 材料を入力するためのフォーム --}}
        <form action="{{route('chat.post')}}" method="POST">
            @csrf
            <input name="food" type="text">
            <div>
            <button type="submit" style="padding:0.4em;background-color:green;color:white;">
                送信する
            </button>
            <button id="clearChatButton" style="padding:0.4em;background-color:red;color:white;">
                履歴削除
            </button>
        </div>
        </form>
            {{--ChatGPTの回答を表示 --}}
            @isset($messages)
            <div id="chat-contents">
                @foreach($messages as $message)
                    <div>
                       {{ $message['title'] }}: {{ $message['content'] }}
                    </div>
                @endforeach
            </div>
            @endisset
        </div>
    </div>
    {{-- 履歴削除ボタンをクリックすると、ChatGPTの回答（chat-contents内）を削除するスクリプト --}}
    <script>
        document.getElementById('clearChatButton').addEventListener('click', function() {
            const chatContainer = document.getElementById('chat-contents');
            chatContainer.innerHTML = '';
        });
    </script>
</body>
</html>