I asked chat gpt to write a chat bot code modeled on gpt3, and he actually wrote it.
The site was created, but messages could not be sent.
I also got a gpt3 api key and used it, but it doesn't seem to work well. What's the problem?
Below is the code written by gpt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ChatGPT Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-window">
<div class="chat-header">
<h1>ChatGPT</h1>
</div>
<div class="chat-body">
<ul class="message-list">
<li class="message bot">
<p>Hello! How can I help you today?</p>
</li>
</ul>
</div>
<div class="chat-footer">
<input id="input" type="text" placeholder="Type your message here...">
<button onclick="send()">Send</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@openai/api"></script>
<script>
// OpenAI API Key 설정
const openai = window.openai;
const api_key = 'YOUR_API_KEY';
const model_engine = 'davinci';
// API 호출하여 응답 받기
const askGPT3 = async (input) => {
console.log(input); // This is getting logged but below API is not being called.
const response = await openai.Completion.create({
engine: model_engine,
prompt: input,
max_tokens: 1024,
n: 1,
stop: null,
temperature: 0.5,
apiKey: api_key
});
return response.choices[0].text.trim();
};
// 대화 시작
const startConversation = async () => {
const botMessage = document.querySelector('.message.bot p');
const answer = await askGPT3('Hello!');
botMessage.innerHTML = answer;
};
startConversation();
// 대화 전송
const send = async () => {
const input = document.getElementById('input').value;
const messageList = document.querySelector('.message-list');
const userMessage = `<li class="message user"><p>${input}</p></li>`;
messageList.insertAdjacentHTML('beforeend', userMessage);
const botMessage = `<li class="message bot"><p>${await askGPT3(input)}</p></li>`;
messageList.insertAdjacentHTML('beforeend', botMessage);
document.getElementById('input').value = '';
};
// 대화 엔터키 전송
const input = document.getElementById('input');
input.addEventListener('keyup', (event) => {
if (event.keyCode === 13) {
event.preventDefault();
document.querySelector('button').click();
}
});
</script>
</body>
</html>I clicked send to send a message but it doesn't work - the message is not sent to the API.
