I created my first chatgpt but I have problems. when I text he always tells me I have a problem with bees. It seems correct to me.
can you help me understand where the problem is?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Clone</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#chat-container {
max-width: 600px;
margin: auto;
}
#chat-output {
border: 1px solid #ccc;
padding: 10px;
height: 300px;
overflow-y: scroll;
margin-bottom: 20px;
}
.message {
margin-bottom: 10px;
}
.user-message {
text-align: right;
}
.bot-message {
text-align: left;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-output"></div>
<form id="chat-form">
<input type="text" id="user-input" name="user-input" required>
<button type="submit">Invia</button>
</form>
</div>
<script>
document.getElementById('chat-form').addEventListener('submit', async function(event) {
event.preventDefault();
const userInput = document.getElementById('user-input').value;
appendMessage(userInput, 'user-message');
document.getElementById('user-input').value = '';
const response = await fetch('chat.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: userInput })
});
const data = await response.json();
appendMessage(data.response, 'bot-message');
});
function appendMessage(message, className) {
const chatOutput = document.getElementById('chat-output');
const messageElement = document.createElement('div');
messageElement.className = 'message ' + className;
messageElement.innerText = message;
chatOutput.appendChild(messageElement);
chatOutput.scrollTop = chatOutput.scrollHeight;
}
</script>
</body>
</html>
chat.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$prompt = $input['prompt'];
$apiKey = 'my-api-key';
$url = 'https://api.openai.com/v1/completions';
$data = [
'model' => 'text-davinci-003',
'prompt' => $prompt,
'max_tokens' => 150,
'temperature' => 0.7,
];
$options = [
'http' => [
'header' => "Content-type: application/json\r\nAuthorization: Bearer $apiKey\r\n",
'method' => 'POST',
'content' => json_encode($data),
],
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
http_response_code(500);
echo json_encode(['response' => 'Errore nella comunicazione con l\'API.']);
exit();
}
$response = json_decode($result, true);
echo json_encode(['response' => $response['choices'][0]['text']]);
}
?>
I got the bee keys here. correct?
Thanks for your help!