Hướng dẫn tạo Livechat trả lời bằng AI Grok của X

Tóm Tắt

Hướng dẫn kỹ thuật tạo Livechat AI bằng HTML, CSS, JavaScript và PHP

Dưới đây là hướng dẫn từng bước để xây dựng một ứng dụng livechat AI đơn giản. Chúng ta sẽ có giao diện frontend (HTML, CSS, JS) và backend (PHP) xử lý tin nhắn.

Yêu cầu

Môi trường: Web server như XAMPP hoặc WAMP.
Công cụ: Trình soạn thảo mã (VS Code, Sublime Text, v.v.).
Kiến thức: Cơ bản về HTML, CSS, JavaScript, và PHP.

Cấu trúc thư mục

/livechat-ai
  ├── index.html        # Giao diện chính
  ├── style.css         # File định dạng giao diện
  ├── script.js         # Xử lý logic phía client
  └── backend.php       # Xử lý phản hồi AI

Bước 1: Tạo giao diện (index.html)

File này là khung HTML cho giao diện chat. Nó bao gồm header, khu vực hiển thị tin nhắn, và ô nhập liệu.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livechat AI</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>AI Chatbot</h2>
        </div>
        <div class="chat-body" id="chatBody">
            <div class="message ai-message">Chào bạn! Tôi là AI Chatbot, sẵn sàng giúp bạn.</div>
        </div>
        <div class="chat-footer">
            <input type="text" id="userInput" placeholder="Nhập tin nhắn...">
            <button onclick="sendMessage()">Gửi</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Giải thích:

.chat-container: Khung chính của chat.
.chat-header: Tiêu đề.
.chat-body: Khu vực hiển thị tin nhắn, có tin nhắn chào mặc định.
.chat-footer: Ô nhập tin nhắn và nút gửi.

Hình ảnh minh họa:

Ảnh 1: Giao diện ban đầu với dòng chữ "Chào bạn! Tôi là AI Chatbot, sẵn sàng giúp bạn" trong khung chat. (Tưởng tượng một hộp thoại trắng với header xanh dương, phần thân xám nhạt, và ô nhập liệu bên dưới.)

Bước 2: Định dạng giao diện (style.css)

CSS giúp giao diện trông đẹp và thân thiện hơn.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.chat-container {
    width: 400px;
    height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.chat-header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #f9f9f9;
}

.chat-footer {
    padding: 10px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #ddd;
}

#userInput {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

#userInput:focus {
    border-color: #007bff;
}

button {
    padding: 8px 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #0056b3;
}

.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    max-width: 80%;
    word-wrap: break-word;
}

.user-message {
    background: #007bff;
    color: white;
    align-self: flex-end;
    margin-left: auto;
}

.ai-message {
    background: #e0e0e0;
    color: #333;
    align-self: flex-start;
}

Giải thích:

Tin nhắn người dùng (user-message) hiển thị bên phải, màu xanh.
Tin nhắn AI (ai-message) hiển thị bên trái, màu xám.
Thanh cuộn xuất hiện khi tin nhắn vượt quá chiều cao .chat-body.

Hình ảnh minh họa:

Ảnh 2: Giao diện với tin nhắn chào mặc định bên trái (xám) và ô nhập liệu bên dưới. (Hình dung một khung chat với tin nhắn xám nhạt lệch trái, ô nhập liệu có viền xanh khi focus.)

Bước 3: Xử lý logic frontend (script.js)

JavaScript xử lý việc gửi tin nhắn, nhận phản hồi, và hiển thị chúng.

function sendMessage() {
    const input = document.getElementById("userInput");
    const message = input.value.trim();
    if (!message) return;

    // Hiển thị tin nhắn người dùng
    displayMessage(message, "user-message");
    input.value = "";

    // Gửi yêu cầu đến backend PHP
    fetch("backend.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: "message=" + encodeURIComponent(message),
    })
    .then(response => response.text())
    .then(data => {
        // Hiển thị phản hồi từ Grok
        displayMessage(data, "ai-message");
    })
    .catch(error => {
        console.error("Lỗi:", error);
        displayMessage("Có lỗi xảy ra!", "ai-message");
    });
}

function displayMessage(text, className) {
    const chatBody = document.getElementById("chatBody");
    const messageDiv = document.createElement("div");
    messageDiv.className = "message " + className;
    messageDiv.textContent = text;
    chatBody.appendChild(messageDiv);
    chatBody.scrollTop = chatBody.scrollHeight;
}

document.getElementById("userInput").addEventListener("keypress", function(e) {
    if (e.key === "Enter") {
        sendMessage();
    }
});

Giải thích:

sendMessage(): Gửi tin nhắn đến backend.php qua Fetch API.
displayMessage(): Thêm tin nhắn vào khung chat và cuộn xuống cuối.
Sự kiện keypress: Cho phép gửi tin nhắn bằng phím Enter.

Hình ảnh minh họa:

Ảnh 3: Giao diện sau khi người dùng gửi tin nhắn "Xin chào" (xanh, bên phải) và AI trả lời "Chào bạn!" (xám, bên trái).

Bước 4: Xử lý backend (backend.php)

PHP nhận tin nhắn và trả về phản hồi AI đơn giản.

<?php
header("Content-Type: text/plain");

// Nhận tin nhắn từ người dùng
if (isset($_POST['message'])) {
    $userMessage = trim($_POST['message']);
    
    // Thay bằng API Key của bạn
    $apiKey = "YOUR_GROK_API_KEY_HERE"; // Lấy từ console.x.ai
    $url = "https://api.x.ai/v1/chat/completions"; // Địa chỉ Grok API

    // Dữ liệu gửi đến Grok API
    $data = [
        "model" => "grok-beta", // Hoặc "grok-2" nếu bạn có quyền truy cập
        "messages" => [
            ["role" => "system", "content" => "Bạn là một trợ lý hữu ích."],
            ["role" => "user", "content" => $userMessage]
        ],
        "max_tokens" => 100,
        "temperature" => 0.7
    ];

    // Khởi tạo cURL
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Authorization: Bearer $apiKey",
        "Content-Type: application/json"
    ]);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

    // Thực thi và nhận phản hồi
    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    // Xử lý phản hồi
    if ($httpCode == 200) {
        $result = json_decode($response, true);
        $aiResponse = $result['choices'][0]['message']['content'];
        echo $aiResponse;
    } else {
        echo "Lỗi khi gọi Grok API: " . $response;
    }
} else {
    echo "Không nhận được tin nhắn!";
}
?>

Giải thích:

API Key: Thay "YOUR_GROK_API_KEY_HERE" bằng API Key bạn lấy từ console.x.ai.
URL: https://api.x.ai/v1/chat/completions là endpoint chính của Grok API (tương thích với định dạng OpenAI).
Model: Sử dụng "grok-beta" hoặc phiên bản mới hơn như "grok-2" nếu có.
Dữ liệu: Tin nhắn được gửi dưới dạng JSON với vai trò system và user.

Hình ảnh minh họa:

Ảnh 2: Sơ đồ luồng dữ liệu: Người dùng -> JS -> PHP -> Grok API -> PHP -> JS -> Hiển thị.

Cách chạy

Cài đặt: Đặt thư mục livechat-ai vào htdocs (XAMPP) hoặc thư mục server.
Cấu hình: Cập nhật $apiKey trong backend.php.
Khởi động: Bật Apache trong XAMPP.
Truy cập: Vào http://localhost/livechat-ai/index.html.

Kết quả

Gửi “Xin chào” -> Grok trả lời dựa trên API (ví dụ: “Chào bạn! Tôi là Grok, rất vui gặp bạn.”).
Gửi câu hỏi phức tạp -> Grok xử lý và trả về phản hồi thông minh.

Hình ảnh minh họa:

Ảnh 3: Giao diện với tin nhắn “Xin chào” (xanh, bên phải) và phản hồi từ Grok (xám, bên trái).

Mở rộng

Xử lý lỗi: Thêm kiểm tra lỗi chi tiết hơn trong PHP (401, 429, v.v.).
Streaming: Grok hỗ trợ streaming ("stream": true), bạn có thể cập nhật code để nhận phản hồi theo thời gian thực.
Tích hợp SDK: Sử dụng Grok Python SDK thay vì PHP nếu bạn muốn mở rộng backend.

Lấy API Key của Grok

Để sử dụng Grok API, bạn cần có tài khoản xAI và tạo API Key. Dưới đây là hướng dẫn chi tiết:

Truy cập xAI Developer Portal:
- Vào trang console.x.ai.
- Đăng ký tài khoản nếu chưa có, hoặc đăng nhập bằng tài khoản X hiện có.
Tạo API Key:
- Sau khi đăng nhập, nhấp vào tên người dùng của bạn ở góc trên bên phải.
- Chọn "API Keys" từ menu thả xuống.
- Nhấn nút "Create API Key".
- Trong cửa sổ hiện ra, đặt tên cho API Key (ví dụ: "LivechatGrok") và chọn quyền truy cập:
  - Chọn "chat:write" để sử dụng Grok cho chatbot.
- Nhấn "Save" để lưu. API Key sẽ xuất hiện trong danh sách.
Sao chép API Key:
- Nhấp vào nút "Copy" bên cạnh API Key vừa tạo.
- Lưu API Key ở nơi an toàn (ví dụ: file .env hoặc biến môi trường), vì nó sẽ không hiển thị lại sau khi bạn rời trang.

Lưu ý:

Hiện tại (tính đến 04/03/2025), xAI đang chạy chương trình Public Beta đến cuối 2024, cung cấp $25 tín dụng miễn phí mỗi tháng. Sau đó, bạn có thể cần mua tín dụng hoặc chọn gói trả phí.
API Key cần được bảo mật, không chia sẻ công khai.

Hình ảnh minh họa: