Thực hành PHP tạo chatbot dùng AI local

Nội dung

    Bài viết hướng dẫn dùng PHP tạo chatbot GPT cho riêng bạn bằng cách sử dụng API của OpenAI. Đầu tiên, chúng ta sẽ tạo một dự án trong Visual Studio Code và sử dụng ngôn ngữ PHP. Tiếp theo, tạo các file và thư mục cần thiết để triển khai chatbot GPT. Sau đó, chúng ta sẽ thực hiện các bước để kết nối và truy xuất vào API Chat GPT. Cuối cùng, chúng ta sẽ xây dựng giao diện người dùng cho chatbot và thực hiện việc gửi câu hỏi và hiển thị phản hồi từ GPT.
    Sau khi đã cài đặt môi trường phát triển, chúng ta sẽ tạo một dự án trong Visual Studio Code để triển khai chatbot GPT của mình. Hãy làm theo các bước sau:
    Mở Terminal trong Visual Studio Code.
    Tạo một thư mục mới cho dự án của bạn bằng cách chạy lệnh sau: mkdir chat-gpt-project
    Di chuyển vào thư mục dự án mới bằng cách chạy lệnh sau: cd chat-gpt-project
    Tạo một file mới có tên là “index.php” bằng cách chạy lệnh sau: touch index.php
    Tạo một thư mục mới có tên là “chat” bằng cách chạy lệnh sau: mkdir chat
    Di chuyển vào thư mục “chat” bằng cách chạy lệnh sau: cd chat
    Tạo một file mới có tên là “chat-api.php” bằng cách chạy lệnh sau: touch chat-api.php
    Quay trở lại thư mục gốc của dự án bằng cách chạy lệnh sau: cd ..
    Tạo một thư mục mới có tên là “images” bằng cách chạy lệnh sau: mkdir images
    Truy cập vào thư mục “images” bằng cách chạy lệnh sau: cd images
    Tải và sao chép 2 file hình ảnh từ kho lưu trữ để sử dụng làm icon và thanh tiến trình.
    Di chuyển vào thư mục gốc của dự án chatbot GPT bằng cách chạy lệnh sau: cd chat-gpt-project
    Tạo một thư mục mới có tên là “css” bằng cách chạy lệnh sau: mkdir css
    Tạo một file mới có tên là “style.css” trong thư mục “css” bằng cách chạy lệnh sau: touch css/style.css
    Tạo một thư mục mới có tên là “js” bằng cách chạy lệnh sau: mkdir js
    Tạo một file mới có tên là “script.js” trong thư mục “js” bằng cách chạy lệnh sau: touch js/script.js

    Tạo API Chat GPT

    Để triển khai chatbot GPT, chúng ta cần tạo một API để chuyển tiếp cuộc trò chuyện giữa người dùng và GPT. Hãy làm theo các bước sau:

    Mở Terminal trong Visual Studio Code.
    Di chuyển vào thư mục gốc của dự án chatbot GPT bằng cách chạy lệnh sau: cd chat-gpt-project
    Mở file “chat/chat-api.php” trong Visual Studio Code.
    Cài đặt mã PHP sau để tạo một API gửi các câu hỏi tới GPT và nhận phản hồi:

    <?php
    // Lấy dữ liệu từ request POST
    $data = json_decode(file_get_contents('php://input'), true);
    
    // Kiểm tra nếu có câu hỏi đã được gửi từ client
    if (isset($data['message'])) {
        $question = $data['message']; // Lấy câu hỏi từ request
        $response = // Gọi API GPT để lấy phản hồi dựa trên câu hỏi
    
        // Trả về phản hồi cho client
        echo json_encode(array('response' => $response));
    }
    ?>

    Lưu và đóng file “chat/chat-api.php”.
    Sau khi bạn đã tạo API, bạn sẽ có thể chuyển tiếp câu hỏi từ người dùng đến GPT và nhận phản hồi từ GPT.

    Tạo Giao Diện Người Dùng

    Sau khi đã tạo API, chúng ta sẽ tạo giao diện người dùng để người dùng có thể gửi câu hỏi và nhận phản hồi từ chatbot GPT. Hãy làm theo các bước sau:

    Mở file “index.php” trong Visual Studio Code.
    Cài đặt mã HTML và CSS sau để tạo giao diện người dùng:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Chat GPT</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/script.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <h2><span class="emoji">🤖</span> Chat GPT</h2>
            <div id="progress-bar" class="bar">
                <img src="images/bar.gif">
            </div>
        </div>
        <div class="row">
            <div class="chat-container" id="chat-container"></div>
        </div>
        <div class="row">
            <div class="input">
                <input type="text" id="input-question" placeholder="Hãy đặt câu hỏi của bạn">
            </div>
            <div id="send-button" class="button">
                <img src="images/arrow.gif">
            </div>
        </div>
    </div>
    </body>
    </html>

    Lưu và đóng file “index.php”.
    Mở file “css/style.css” trong Visual Studio Code.
    Cài đặt mã CSS sau để tạo kiểu cho giao diện người dùng:

    .container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    }
    .row { margin-bottom: 20px; }

    h2 { font-size: 24px; }

    .emoji { font-size: 24px; }

    .bar { display: none; }

    .chat-container { height: 200px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }

    .input { display: inline-block; width: 80%; }

    .button { display: inline-block; width: 18%; }

    input[type=”text”] { width: 100%; padding: 10px; font-size: 14px; }

    .button img { width: 20px; height: 20px; cursor: pointer; }

    6. Lưu và đóng file “css/style.css”.
    7. Mở file “js/script.js” trong Visual Studio Code.
    8. Cài đặt mã JavaScript sau để gửi câu hỏi từ người dùng đến chatbot GPT và hiển thị phản hồi:

    ```javascript
    $(document).ready(function() {
        // Gửi câu hỏi khi nhấn Enter
        $(document).keypress(function(event) {
            if (event.which === 13) {
                var question = $("#input-question").val();
                if (validateInput(question)) {
                    sendQuestion(question);
                }
            }
        });
    
        // Gửi câu hỏi khi nhấn nút gửi
        $("#send-button").click(function() {
            var question = $("#input-question").val();
            if (validateInput(question)) {
                sendQuestion(question);
            }
        });
    });
    
    function validateInput(question) {
        if (question === "") {
            alert("Hãy nhập một câu hỏi!");
            return false;
        }
        return true;
    }
    
    function sendQuestion(question) {
        $("#progress-bar").show();
    
        $.ajax({
            url: "/chat/chat-api.php",
            method: "POST",
            data: JSON.stringify({ "message": question }),
            contentType: "application/json",
            success: function(response) {
                var reply = JSON.parse(response).response;
                addToChat(question, reply);
                clearInput();
                scrollToEnd();
                $("#progress-bar").hide();
            }
        });
    }
    
    function addToChat(question, reply) {
        var chatContainer = document.getElementById("chat-container");
        chatContainer.innerHTML += "<p><strong>Tôi:</strong> " + question + "</p>";
        chatContainer.innerHTML += "<p><strong>GPT:</strong> " + reply + "</p>";
    }
    
    function clearInput() {
        $("#input-question").val("");
    }
    
    function scrollToEnd() {
        var chatContainer = document.getElementById("chat-container");
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    Lưu và đóng file “js/script.js”.
    Sau khi hoàn thành các bước trên, bạn đã tạo thành công giao diện người dùng để người dùng có thể tương tác với chatbot GPT.

    Gửi Câu Hỏi Cho GPT

    Để gửi câu hỏi từ người dùng đến chatbot GPT, chúng ta sẽ sử dụng API mà chúng ta đã tạo trước đó. Hãy làm theo các bước sau:

    Mở file “chat/chat-api.php” trong Visual Studio Code.
    Thay thế dòng code sau:
    $response = // Gọi API GPT để lấy phản hồi dựa trên câu hỏi
    bằng đoạn code sau:

    $apiKey = “YOUR_API_KEY”;
    $url = “https://api.openai.com/v1/chat/completions”;
    $headers = [
    “Content-Type: application/json”,
    “Authorization: Bearer ” . $apiKey
    ];
    $data = [
    “messages” => [
    [
    “role” => “system”,
    “content” => “You are a helpful assistant”
    ],
    [
    “role” => “user”,
    “content” => $question
    ] ] ];
    $options = [
    “http” => [
    “header” => implode(“\r\n”, $headers),
    “method” => “POST”,
    “content” => json_encode($data)
    ] ];
    $context = stream_context_create($options);
    $response = file_get_contents($url, false, $context);
    $response = json_decode($response, true)[“choices”][0][“message”][“content”];
    Thay thế “YOUR_API_KEY” bằng API key của bạn từ OpenAI.
    Lưu và đóng file “chat/chat-api.php”.
    Sau khi bạn đã thay đổi API key trong mã PHP, chatbot GPT của bạn đã sẵn sàng nhận câu hỏi từ người dùng.

    Hiển Thị Phản Hồi Từ GPT

    Sau khi chatbot GPT nhận câu hỏi từ người dùng, chúng ta sẽ hiển thị phản hồi từ GPT trên giao diện người dùng. Hãy làm theo các bước sau:

    Mở file “js/script.js” trong Visual Studio Code.
    Thay thế dòng code sau:
    addToChat(question, reply);
    bằng đoạn code sau:

    addToChat(question, reply[“content”]);
    Lưu và đóng file “js/script.js”.
    Sau khi bạn đã thay đổi mã JavaScript, chatbot GPT của bạn sẽ hiển thị phản hồi từ GPT trên giao diện người dùng.
    Nguồn: https://www.toolify.ai/vi/ai-news-vn/hng-dn-tch-hp-api-openai-to-chatbot-gpt-vi-php-989049

    Xây dựng một chatbot AI để thành công với khách hàng

    https://getstream.io/blog/ai-chatbot-customer-success/

     

    Để lại một bình luận

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *