document.write ( `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple AI chat example</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
div {
margin-bottom: 15px;
}
label {
font-weight: bold;
margin-right: 10px;
}
input {
padding: 5px;
margin-right: 10px;
}
button {
padding: 5px 10px;
cursor: pointer;
}
#response {
margin-top: 10px;
}
.chat-log {
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Simple chat GPT example</h1>
<p>This example takes in a user input and give responses. We are catching empty responses to ensure that we do not have funny output.
You will need to provide your API key obtained from open AI to use this platfrom. For security purposes we do not store the key in the code</p>
<div>
<label for="userInput">Api Key:</label>
<input type="text" id="apiKey">
</div>
<div>
<label for="userInput">User:</label>
<textarea id="userInput"></textarea>
<button onclick="generateResponse()">Send</button>
</div>
<div class="chat-log" id="chatLog">
<!-- Chat log will be displayed here -->
</div>
</body>
</html>
` );
function generateResponse() {
const userInput = document.getElementById('userInput').value;
const apiKey = document.getElementById('apiKey').value;
const chatLog = document.getElementById('chatLog');
if (!apiKey.trim()) {
chatLog.innerHTML += '<div>ERROR: Please provide an API key</div>';
} else {
if (!userInput.trim()) {
chatLog.innerHTML += '<div>AI: Please ask me something. Your input is empty.</div>';
} else {
chatLog.innerHTML += `<div>User: ${userInput}</div>`;
console.log("Test", `${apiKey}`);
fetch('https://api.openai.com/v1/engines/text-davinci-003/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
prompt: userInput,
max_tokens: 150,
temperature: 1
}),
})
.then(response => response.json())
.then(data => {
const generatedResponse = data.choices[0].text;
chatLog.innerHTML += `<div>AI: ${generatedResponse}</div>`;
})
.catch(error => {
console.error('Error:', error);
});
}
}
document.getElementById('userInput').value = '';
}