1. TOP
  2. GPTでGPTライクなアプリケーションを作れる時代

日常GPTでGPTライクなアプリケーションを作れる時代

GPTでGPTライクなアプリケーションを作れる時代

そんな時代になりましたね。

PHPとHTMLで構築されたシンプルなGPTチャットサービスを5分で作ってみます。

docker-compose up -dで動作するように構成してあります。
GPTのキーは{your gpt key}としておきますので、必要に応じてあなたのキーに置き換えてください。

まずソースツリーですが、、

/gpt-chat-service
│
├── docker-compose.yml
├── Dockerfile
├── php/
│   ├── index.php
│   └── gpt_chat.php
└── www/
    └── index.html

こんな感じでいきます。

docker-compose.ymlは

version: '3'
services:
  php:
    build: ./php
    volumes:
      - ./www:/var/www/html
    ports:
      - "8080:80"
    container_name: php-gpt

これだけでいいかなと思います。
シンプルにphpだけでいきます。

phpの設定はしたいのでDockerファイルを作ります。

FROM php:8.0-apache
COPY ./index.php /var/www/html/gpt_chat.php
RUN docker-php-ext-install pdo pdo_mysql
EXPOSE 80

これで作成後のサーバーにインストールしてくれますね。

index.phpのコードを書きます。

<?php
// gpt_chat.phpを呼び出してGPTに問い合わせ
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $apiKey = "{your gpt key}";
    $userInput = $_POST['message'] ?? '';
    
    // OpenAI APIにリクエストを送信する関数
    function callGPT($message, $apiKey) {
        $url = "https://api.openai.com/v1/chat/completions";
        $data = [
            "model" => "gpt-4",
            "messages" => [
                ["role" => "system", "content" => "You are a helpful assistant."],
                ["role" => "user", "content" => $message]
            ]
        ];
        
        $headers = [
            "Authorization: Bearer " . $apiKey,
            "Content-Type: application/json"
        ];
        
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        $response = curl_exec($ch);
        curl_close($ch);
        
        return json_decode($response, true);
    }

    $gptResponse = callGPT($userInput, $apiKey);
    $reply = $gptResponse['choices'][0]['message']['content'] ?? "Sorry, no response.";
    
    echo json_encode(['response' => $reply]);
}
こちらですね。

そしてindex.htmlも書いてみます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with GPT</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #chat-box { width: 500px; height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
        #message-box { width: 500px; margin-top: 10px; }
    </style>
</head>
<body>
    <h1>Chat with GPT</h1>
    <div id="chat-box"></div>
    <form id="chat-form">
        <input type="text" id="message-box" placeholder="Type your message here..." />
        <button type="submit">Send</button>
    </form>

    <script>
        const chatBox = document.getElementById('chat-box');
        const chatForm = document.getElementById('chat-form');
        const messageBox = document.getElementById('message-box');

        chatForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const userMessage = messageBox.value;
            if (userMessage.trim() === '') return;

            const userHtml = `<p><strong>You:</strong> ${userMessage}</p>`;
            chatBox.innerHTML += userHtml;

            fetch('/gpt_chat.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({ 'message': userMessage })
            })
            .then(response => response.json())
            .then(data => {
                const botHtml = `<p><strong>GPT:</strong> ${data.response}</p>`;
                chatBox.innerHTML += botHtml;
                messageBox.value = '';
                chatBox.scrollTop = chatBox.scrollHeight;
            })
            .catch(err => {
                chatBox.innerHTML += '<p><strong>Error:</strong> Something went wrong.</p>';
            });
        });
    </script>
</body>
</html>

これだけで完了です。

docker-compose up -dをすると

http://localhost:8080

でもうGPTのようなシンプルなチャットを表示することが可能です。

3分30秒でできました。

関連ブログ