自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Laravel】ChatGPT APIを使って連携

AI

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回は、Laravelを使用してChatGPTのAPI連携を試します。
自分で作成したアプリから、ChatGPTの機能が呼び出せるとアイディア次第では便利ですね!

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 9 or 10

2023/03/11 Laravel10で確認しました。

Djangoを使った記事もまとめました。

他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

ChatGPTについて

ChatGPTは、OpenAIによって開発された大規模な自然言語処理モデルです。

ChatGPTについては以下の記事もご覧ください。

また、有料プランもあります。
以下の記事も参考にしてください。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

プロジェクトの作成

Sail を使いプロジェクトを作成します。

$ curl -s https://laravel.build/laravel-app-chatgpt | bash

「laravel-app-chatgpt」の部分はプロジェクト名ですので、任意で指定してください。

VS Code でプロジェクトを開きましょう。
これ以降は、VS Code のターミナルでコマンドを実行します。
Sail を起動します。

$ sail up -d

コントローラ作成

以下のコマンドでコントローラを作成します。

$ sail php artisan make:controller ChatGptController

コントローラでは初期画面を表示するための処理と、チャット結果を表示するための処理を想定しました。

app\Http\Controllers\ChatGptController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ChatGptController extends Controller
{

    /**
     * index
     *
     * @param  Request  $request
     */
    public function index(Request $request)
    {
    }

    /**
     * chat
     *
     * @param  Request  $request
     */
    public function chat(Request $request)
    {
    }
}

ルーティングの作成

必要なルーティングを追加します。
初期画面表示と結果画面表示の二つを追加しました。

routes\web.php
use App\Http\Controllers\ChatGptController;

Route::get('/chat', [ChatGptController::class, 'index'])->name('chat_gpt-index');
Route::post('/chat', [ChatGptController::class, 'chat'])->name('chat_gpt-chat');

初期画面の作成

以下のコントローラのindex関数を修正します。
viewを返すだけの処理を追記します。

app\Http\Controllers\ChatGptController.php
    /**
     * index
     *
     * @param  Request  $request
     */
    public function index(Request $request)
    {
        return view('chat');
    }

テンプレートファイルを作成します。
チャットを行う文章を入力するためのフォームを作成しました。

resources\views\chat.blade.php
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    {{-- フォーム --}}
    <form method="POST">
        @csrf
        <textarea rows="10" cols="50" name="sentence">{{ isset($sentence) ? $sentence : '' }}</textarea>
        <button type="submit">ChatGPT</button>
    </form>
</body>

</html>

この時点で動作確認をしましょう。
以下のURLにアクセスします。

http://localhost/chat

チャットしたい文章を入力する画面が表示されます。

デザインについては今回は気にしません。別記事で解説します。

スポンサーリンク

ChatGPTのAPIキーの取得

ChatGPTのAPIを利用するためには、アカウントを作成し、APIキーを取得する必要があります。

アカウントの作成方法は以下の記事を参考にしてください。

APIの登録方法については以下の記事を参考にしてください。

APIキーの利用には料金がかかります。詳しくはOpenAIのサイトをご確認ください。

ログインした状態で、以下のサイトにアクセスします。

platform.openai.com

右上のメニューから、「View API keys」をクリックします。

「Create new secret key」をクリックし、APIキーを作成します。

APIキーが表示されます。
この画面でしかコピーできず、再度表示することができませんので注意してください。

APIキーは絶対に他人に知られないようにしましょう。

チャット処理の実装

APIキーの設定

取得したAPIキーは、絶対に知られないように注意が必要です。
そのため、例えばコントローラーやConfigファイルなど、Gitで管理するファイルには記述しないようにしましょう。

誤ってGitHubにプッシュした場合、APIキーが漏洩します。

Laravelの場合は、.envファイルに定義します。

.env
CHAT_GPT_KEY="APIキー"

側の作成

以下のコントローラのchat関数を修正します。

バリデーションを行う処理(空白チェック)を追記しました。
また、viewは初期画面と同じテンプレートを使用します。

app\Http\Controllers\ChatGptController.php
    /**
     * chat
     *
     * @param  Request  $request
     */
    public function chat(Request $request)
    {
        // バリデーション
        $request->validate([
            'sentence' => 'required',
        ]);

        // 文章
        $sentence = $request->input('sentence');

        // TODO: ChatGPT API処理

        return view('chat', compact('sentence'));
    }

ChatGPTのAPIを呼び出すための実装方法は、いくつかあります。
状況に応じて、以下を参考にしてください。

cURLで呼び出し

フレームワークに依存せず、PHPの関数であるcURLを使用します。
フレームワークや追加のライブラリをインストールしたくない場合に良いでしょう。

    /**
     * ChatGPT API呼び出し
     * cURL
     */
    function chat_gpt($system, $user)
    {
        // ChatGPT APIのエンドポイントURL
        $url = "https://api.openai.com/v1/chat/completions";

        // APIキー
        $api_key = env('CHAT_GPT_KEY');

        // ヘッダー
        $headers = array(
            "Content-Type: application/json",
            "Authorization: Bearer $api_key"
        );

        // パラメータ
        $data = array(
            "model" => "gpt-3.5-turbo",
            "messages" => [
                [
                    "role" => "system",
                    "content" => $system
                ],
                [
                    "role" => "user",
                    "content" => $user
                ]
            ]
        );

        // cURLセッションの初期化
        $ch = curl_init();

        // cURLオプションの設定
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        // リクエストの送信と応答結果の取得
        $response = json_decode(curl_exec($ch));

        // cURLセッションの終了
        curl_close($ch);

        // 応答結果の取得
        if (isset($response->error)) {
            // エラー
            return $response->error->message;
        }

        return $response->choices[0]->message->content;
    }

LaravelのHTTPクライアント

Laravelを使用している場合は、LaravelのHTTPクライアントを使用できます。
Guzzleパッケージですが、Laravelにデフォルトでインストールされています。

HTTPクライアント 10.x Laravel

コードは以下のようになりました。

use Illuminate\Support\Facades\Http;
...
    /**
     * ChatGPT API呼び出し
     * Laravel HTTP
     */
    function chat_gpt($system, $user)
    {
        // ChatGPT APIのエンドポイントURL
        $url = "https://api.openai.com/v1/chat/completions";

        // APIキー
        $api_key = env('CHAT_GPT_KEY');

        // ヘッダー
        $headers = array(
            "Content-Type" => "application/json",
            "Authorization" => "Bearer $api_key"
        );

        // パラメータ
        $data = array(
            "model" => "gpt-3.5-turbo",
            "messages" => [
                [
                    "role" => "system",
                    "content" => $system
                ],
                [
                    "role" => "user",
                    "content" => $user
                ]
            ]
        );

        $response = Http::withHeaders($headers)->post($url, $data);

        if ($response->json('error')) {
            // エラー
            return $response->json('error')['message'];
        }

        return $response->json('choices')[0]['message']['content'];
    }

ChatGPTのライブラリを使用

各プログラミング言語ごとにChatGPT API用のライブラリが用意されています。
もし、プロジェクトにライブラリを導入できる場合は、こちらも良いでしょう。

Libraries – Community libraries

今回は以下のライブラリを使用してみます。

GitHub - tectalichq/public-openai-client-php: OpenAI API Client for PHP. Includes all endpoints and models (DTOs) for all requests and responses.
OpenAI API Client for PHP. Includes all endpoints and models (DTOs) for all requests and responses. - GitHub - tectalich...

composerコマンドでライブラリを導入します。

$ sail composer require tectalic/openai

composer.jsonに追加されました。

    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "tectalic/openai": "^1.4"
    },

コードは以下のようになりました。

    /**
     * ChatGPT API呼び出し
     * ライブラリ
     */
    function chat_gpt($system, $user)
    {

        // APIキー
        $api_key = env('CHAT_GPT_KEY');

        // パラメータ
        $data = array(
            "model" => "gpt-3.5-turbo",
            "messages" => [
                [
                    "role" => "system",
                    "content" => $system
                ],
                [
                    "role" => "user",
                    "content" => $user
                ]
            ]
        );

        $openaiClient = \Tectalic\OpenAi\Manager::build(
            new \GuzzleHttp\Client(),
            new \Tectalic\OpenAi\Authentication($api_key)
        );

        try {

            $response = $openaiClient->chatCompletions()->create(
                new \Tectalic\OpenAi\Models\ChatCompletions\CreateRequest($data)
            )->toModel();

            return $response->choices[0]->message->content;
        } catch (\Exception $e) {
            return "ERROR";
        }
    }

結果の表示

APIを呼ぶ処理はどれでも良いですが、chat関数を以下のように修正します。

app\Http\Controllers\ChatGptController.php
    /**
     * chat
     *
     * @param  Request  $request
     */
    public function chat(Request $request)
    {
        // バリデーション
        $request->validate([
            'sentence' => 'required',
        ]);

        // 文章
        $sentence = $request->input('sentence');

        // ChatGPT API処理
        $chat_response = $this->chat_gpt("日本語で応答してください", $sentence);

        return view('chat', compact('sentence', 'chat_response'));
    }

結果を出力するために、テンプレートファイルを修正します。

resources\views\chat.blade.php
<html>

<head>
    <meta charset='utf-8' />
</head>

<body>
    {{-- フォーム --}}
    <form method="POST">
        @csrf
        <textarea rows="10" cols="50" name="sentence">{{ isset($sentence) ? $sentence : '' }}</textarea>
        <button type="submit">ChatGPT</button>
    </form>

    {{-- 結果 --}}
    {{ isset($chat_response) ? $chat_response : '' }}
</body>

</html>

動作確認

これで完成です。
テキストを入力して、ChatGPTボタンをクリックすると、応答結果が表示されます。

補足

本格的に利用するには、もう少し処理の実装が必要です。
例えば、ChatGPTの特徴である会話を成り立たせることもAPIでは可能ですが、APIを呼び出す際に応答結果を含める必要があります。

また、応答までの時間がまずまず掛かりますので、例えば非同期通信でローディングを表示するといった対応も必要かもしれません。

今回はあくまでもChatGPTのAPIについての実装がメインですが、本格的に利用する場合は検討してみてください。

デザイン調整

デザインの調整に関しては、以下の記事を参考にしてください。
翻訳アプリ向けですが、ほとんど実装は同じです。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

AIサービス

他にもAIの便利なサービスがあります。

ChatPDFについては、以下の記事を参考にしてください。

AIにアプリを作ってもらえる、GPTAppです。

WebChatGPTでWebの情報を回答してもらうことができます。

さいごに

今回は、ChatGPTのAPIを利用して応答するWebアプリケーションを作成してみました。

ぜひ試してみてくださいね。

他にも私のブログで、ChatGPTについて解説している記事がありますのでご覧ください。

\オススメ/

コメント