LoginSignup
2
0

40 代おっさん chatGPTを使ったアプリを作る①!

Last updated at Posted at 2024-03-29

本記事について

本記事は私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

概要

chatAPIを使用して簡単アプリを作る。
laravel10,php8.2

laravelプロジェクト作成

composer create-project --prefer-dist laravel/laravel chatgpt-app

このコマンドは、chatgpt-app という名前の新しい Laravel プロジェクトを作成します。

ChatGPT API の使用準備

OpenAI の公式ウェブサイトにアクセスし、アカウントを作成して API キーを取得

スクリーンショット 2024-03-29 190137.png

上記でAPIを発行 コピーする。

.envにAPIキーを記述

.env ファイルに OpenAI の API キーを追加します。例えばOPENAI_API_KEY=your_api_key_here のように記述します。

ChatGPT API を呼び出すためのルートとコントローラの設定

php artisan make:controller ChatGPTController

コントローラーを作成

Guzzle をインストール

作成した ChatGPTController に、OpenAI API を呼び出すためのロジックを追加します。Guzzle HTTP クライアントを使用することで、API へのリクエストを簡単に行うことができます。Guzzle をインストールするには、以下のコマンドを実行します。

composer require guzzlehttp/guzzle

※Guzzleは、PHP用のシンプルなHTTPクライアントです。 GET 、 POST 、 PUT 、 DELETE などの様々なフォームリクエストに対応し、ストリーミング機能やマルチパートリクエスト機能もあります。 Guzzle HTTPクライアントを使用すると、サーバーに同期および非同期リクエストを送信できます。

とのことでした!

app/Http/Controllers/ChatGPTController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Client;

class ChatGPTController extends Controller
{
    public function ask(Request $request)
    {
        $client = new Client();
        
        $response = $client->post('https://api.openai.com/v1/chat/completions', [
            'headers' => [
                'Authorization' => 'Bearer ' . env('OPENAI_API_KEY'),
                'Content-Type' => 'application/json',
            ],
            'json' => [
                'model' => 'gpt-3.5-turbo', // または他のモデル
                'messages' => [
                    ['role' => 'system', 'content' => 'You are a helpful assistant.'],
                    ['role' => 'user', 'content' => $request->input('question')],
                ],
            ],
        ]);

        $body = json_decode((string) $response->getBody(), true);

        return view('answer', ['answer' => $body['choices'][0]['message']['content']]);
    }
}

Guzzle HTTP クライアントの使用
Guzzle は PHP で HTTP リクエストを簡単に扱うためのライブラリです。このコードでは、Guzzle クライアントの post メソッドを使用して HTTP POST リクエストを送信しています。

リクエストの構成
リクエストは、以下の主要な部分から構成されています。

  1. URL
    'https://api.openai.com/v1/chat/completions' は、リクエストが送信される URL です。この URL は OpenAI の ChatGPT API のエンドポイントであり、テキストベースの入力に対してモデルからの応答を生成します。

  2. ヘッダー
    リクエストヘッダーはリクエストに関する追加情報を提供します。この場合、2つのヘッダーが設定されています。

'Authorization': 'Bearer ' . env('OPENAI_API_KEY') は、API キーを使用してリクエストを認証するためのものです。env('OPENAI_API_KEY') は .env ファイルから API キーを取得します。
'Content-Type': 'application/json' は、リクエストの本体が JSON 形式であることを指定します。
3. リクエストボディ (JSON)
リクエストボディは、API に送信されるデータを含みます。この例では JSON 形式でデータを送信しており、以下の2つの主要な部分から成り立っています。

'model': 'gpt-3.5-turbo' は使用する AI モデルを指定します。この例では gpt-3.5-turbo モデルが使用されていますが、利用可能な他のモデルに変更することもできます。
'messages' は、会話のコンテキストを形成するメッセージの配列です。ここではシステムメッセージとして「You are a helpful assistant.」を設定し、ユーザーからの質問を含めています。各メッセージは role(system または user)と content(メッセージのテキスト)を持ちます。
このリクエストは、指定されたモデルに対してユーザーからの質問($request->input('question') で取得)を含む会話の一部を送信し、AI による応答を取得するために使用されます。応答は、生成されたテキストの形で返され、アプリケーションで利用することができます。

参考

https://atmarkit.itmedia.co.jp/ait/articles/2303/24/news029.html

ルートの設定

routes/web.php を開いて、以下のルートを追加します。

use App\Http\Controllers\ChatGPTController;

Route::get('/ask', function () {
    return view('ask');
});

Route::post('/ask', [ChatGPTController::class, 'ask']);

ビューの作成

質問をするためのフォーム (resources/views/ask.blade.php) を作成します。

<!DOCTYPE html>
<html>
<head>
    <title>Ask ChatGPT</title>
</head>
<body>
    <form action="/ask" method="post">
        @csrf
        <label for="question">Ask a question:</label>
        <input type="text" id="question" name="question" required>
        <button type="submit">Ask</button>
    </form>
</body>
</html>

そして、回答を表示するビュー (resources/views/answer.blade.php) を作成します。

<!DOCTYPE html>
<html>
<head>
    <title>ChatGPT Answer</title>
</head>
<body>
    <p>Answer: {{ $answer }}</p>
    <a href="/ask">Ask another question</a>
</body>
</html>

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0