Tạo Chatbot GPT bằng HTML và JavaScript

Để tạo một web chat sử dụng GPT-3 và trả lời bằng HTML, bạn có thể sử dụng JavaScript. Dưới đây là một ví dụ về script.js cho web chat như vậy:

// Khởi tạo OpenAI API
const openai = new OpenAI('your-api-key');

// Lấy các phần tử trong HTML
const chatForm = document.getElementById('chat-form');
const userInput = document.getElementById('user-input');
const chatContainer = document.getElementById('chat-container');

// Xử lý sự kiện khi người dùng gửi tin nhắn
chatForm.addEventListener('submit', (e) => {
  e.preventDefault(); // Ngăn chặn gửi form mặc định

  // Lấy nội dung tin nhắn từ người dùng
  const userMessage = userInput.value;

  // Hiển thị tin nhắn của người dùng trong chat container
  appendMessage('user', userMessage);

  // Gọi hàm để gửi tin nhắn người dùng đến API và nhận câu trả lời
  getAIResponse(userMessage);
});

// Gửi tin nhắn người dùng đến API và nhận câu trả lời từ AI
async function getAIResponse(userMessage) {
  try {
    // Gửi tin nhắn người dùng đến API
    const response = await openai.complete({
      engine: 'text-davinci-003',
      prompt: 'Bạn: ' + userMessage + '\nAI:',
      maxTokens: 50,
      temperature: 0.6,
      topP: 1,
      n: 1,
      stream: false,
    });

    // Lấy câu trả lời từ API response
    const aiMessage = response.data.choices[0].text.trim();

    // Hiển thị câu trả lời của AI trong chat container
    appendMessage('ai', aiMessage);
  } catch (error) {
    console.log(error);
  }
}

// Hiển thị tin nhắn trong chat container
function appendMessage(sender, message) {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message');
  messageElement.classList.add(sender);
  messageElement.innerHTML = message;
  chatContainer.append(messageElement);
}

Trong script.js này, chúng ta đã sử dụng OpenAI API để gửi tin nhắn người dùng và nhận câu trả lời từ AI. Sau đó, chúng ta đã hiển thị tin nhắn của cả người dùng và AI trong chat container bằng cách sử dụng hàm appendMessage(). Bạn có thể tạo HTML tương ứng cho chat container và form input để hoàn thiện giao diện.