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
các bài học hướng dẫn từng bước vềHTML, CSS, JavaScript, và thậm chí cả các công cụ backend như Node và cơ sở dữ liệu.//medium.com/@jaydipkumarjha/723fca515dca
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="//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 = “//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: //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
//getstream.io/blog/ai-chatbot-customer-success/
Những lỗi PHP phổ biến
Hãy bắt đầu
1. Lỗi phân tích cú pháp: Dấu ngoặc vuông ‘;’ không mong muốn hoặc thiếu
Đây là một điều kinh điển. Ai cũng từng trải qua.
Khoảnh khắc thực tế:
Tôi đã từng mất 40 phút để tìm một lỗi mà hóa ra là do thiếu dấu ngoặc đóng.
Mẹo nhanh:
Sử dụng IDE phù hợp hoặc bật tính năng tô sáng cú pháp. Nó thực sự cứu mạng người.
2. Biến không xác định
Bạn viết $totalthay vì $totals, và PHP sẽ bình tĩnh nói với bạn:
Này, tôi không biết đây là cái gì.
Nỗi đau của tôi:
Có một trình tạo hóa đơn tôi đã xây dựng. Nó hoạt động rất tốt… cho đến khi tôi sử dụng một biến trước khi khai báo nó. Các phép tính trở nên hỗn loạn và một khách hàng suýt bị tính phí 9.99.999 INR.
Bài học:
Luôn khởi tạo biến. Và kiểm tra kỹ chính tả…ngay cả biến cũng cần được trau chuốt.
3. Tiêu đề đã được gửi
Nếu tôi có một rupee cho mỗi lần tôi nhìn thấy:
Không thể sửa đổi thông tin tiêu đề…tiêu đề đã được gửi
…Tôi có lẽ đủ tiền để mua một chiếc máy pha cà phê tử tế cho những đêm thức trắng.
Nguyên nhân là gì?
Một khoảng trắng duy nhất trước đó <?php. Chỉ vậy thôi. Khoảng trắng nhỏ xíu. Đau đầu quá.
Những gì tôi làm bây giờ:
Không bao giờ đặt bất cứ thứ gì trước <?php.
Sử dụng bộ đệm đầu ra nếu cần.
Tránh kết hợp lệnh echo và lệnh header một cách bất cẩn.
4. Lỗi nghiêm trọng: Gọi đến hàm không xác định
Lỗi này rất nghiêm trọng, đặc biệt là khi bạn quên thêm tệp hoặc tự động tải thứ gì đó. PHP sẽ ngắt mic và dừng thực thi.
Câu chuyện sai lầm của tôi:
Tôi quên include db.phpkhi đẩy lên production. Không có kết nối DB, không có truy vấn nào chạy, và tôi đổ lỗi cho máy chủ.
Sửa chữa:
Kiểm tra lại xem tập tin có chứa nội dung đó không.
Sử dụng Composer và chức năng tự động tải PSR-4 để đảm bảo an toàn.
5. Chỉ mục không xác định / Độ lệch không xác định
PHP lịch sự nói với bạn rằng,
Bạn đang cố gắng truy cập vào thứ không tồn tại.
echo $_POST [ ’email’ ];
Nhưng ôi… biểu mẫu thậm chí còn không được gửi đi email. Bùm. Lỗi.
Những gì tôi làm bây giờ:
Sử dụng isset()hoặc array_key_exists()trước khi truy cập.
nếu ( isset ( $_POST [ ’email’ ])) {
echo $_POST [ ’email’ ];
}
Đơn giản và sạch sẽ.
6. Lỗi máy chủ nội bộ 500
Đây thậm chí không hẳn là lỗi PHP… mà là lỗi của máy chủ. Bạn sẽ thấy lỗi này khi quyền truy cập bị sai, .htaccesslộn xộn hoặc tập lệnh của bạn bị lỗi nghiêm trọng.
Bài học đáng nhớ của tôi:
Có lần tôi vô tình đổi tên .htaccessthành .htaccess.txt. Mất hai tiếng để sửa mọi thứ trừ việc đó.
Khuyên bảo:
Kiểm tra nhật ký lỗi của bạn.
Không hoảng loạn.
Và đúng vậy… hãy luôn chú ý đến những điều nhỏ nhất trước.
7. Màn hình trắng chết chóc
Không có lỗi. Không có manh mối. Chỉ có… một màn hình trống.
Những điều đã giúp tôi:
Bật display_errorstrong php.ini.
Sử dụng error_reporting(E_ALL)ở đầu tập lệnh của bạn.
Đừng chỉ nhìn chằm chằm vào nó. PHP không cố ý im lặng với bạn đâu, bạn chỉ cần yêu cầu nó nói thôi.
8. Không tìm thấy lớp
Thường xuất hiện khi bạn di chuyển tệp hoặc quên tự động tải một lớp. Đặc biệt khó chịu trong quá trình di chuyển.
Những gì tôi làm bây giờ:
Sử dụng không gian tên đúng cách.
Sử dụng cấu trúc thư mục phù hợp.
Luôn kiểm tra lại xem tệp lớp có tồn tại ở đúng vị trí cần thiết hay không.
9. Quá tin tưởng vào $_POST/$_GET
Lỗi này không hẳn là một “lỗi” nhưng chắc chắn là một cạm bẫy phổ biến. Tin tưởng mù quáng vào dữ liệu biểu mẫu có thể làm hỏng ứng dụng của bạn.
Ví dụ lỗi:
Tin $_GET[‘id’]rằng luôn là một số nguyên. Đoán xem? Ai đó đã truyền một thẻ script thay thế.
Những gì tôi đang theo đuổi hiện nay:
Luôn xác thực và khử trùng dữ liệu đầu vào.
Đừng bao giờ cho rằng dữ liệu là an toàn.
Lời cuối cùng
Dù bạn mới làm quen với PHP hay đã làm việc nhiều năm, lỗi sai chính là người thầy tốt nhất của bạn. Bạn chỉ cần bình tĩnh, đọc kỹ và rút kinh nghiệm từ mỗi lần vấp ngã.
//medium.com/@jaydipkumarjha/top-common-php-errors-9dd20dfcdf81
Bài viết liên quan: