Tạo Chatbot GPT-3 bằng HTML: Hướng dẫn và Ví dụ
Để tạo một trò chuyện với GPT-3 bằng mã HTML, bạn có thể sử dụng JavaScript để tương tác với API của OpenAI. Dưới đây là một ví dụ về cách thực hiện điều đó:
<!DOCTYPE html>
<html>
<head>
<title>GPT Chat</title>
</head>
<body>
<h1>GPT Chat</h1>
<div id='chat-container'></div>
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
<script>
const chatContainer = document.getElementById('chat-container');
async function sendMessage(message) {
const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
'prompt': message,
'max_tokens': 50,
'temperature': 0.7
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY',
}
});
const reply = response.data.choices[0].text.trim();
displayMessage(reply, 'bot');
}
function displayMessage(message, sender) {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.classList.add(sender);
messageElement.textContent = message;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function handleUserMessage(event) {
event.preventDefault();
const inputElement = event.target.elements['user-input'];
const message = inputElement.value.trim();
if (message !== '') {
displayMessage(message, 'user');
sendMessage(message);
inputElement.value = '';
}
}
document.addEventListener('DOMContentLoaded', () => {
const form = document.createElement('form');
form.addEventListener('submit', handleUserMessage);
const input = document.createElement('input');
input.type = 'text';
input.name = 'user-input';
input.placeholder = 'Enter your message...';
const submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.textContent = 'Send';
form.appendChild(input);
form.appendChild(submitButton);
chatContainer.appendChild(form);
});
</script>
<style>
.message {
padding: 10px;
margin: 10px;
border-radius: 5px;
background-color: #eee;
}
.user {
background-color: #fff;
text-align: right;
}
.bot {
background-color: #f0f0f0;
text-align: left;
}
</style>
</body>
</html>
Trong ví dụ trên, bạn cần thay thế 'YOUR_API_KEY' bằng khóa API của mình để gửi yêu cầu tới OpenAI API.
原文地址: https://www.cveoy.top/t/topic/o7iC 著作权归作者所有。请勿转载和采集!