HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Proger CHAT</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Proger Chat</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quam quaerat non corrupti, dolor, sed adipisci eos provident assumenda impedit similique aliquid dolorum excepturi nisi facilis nemo culpa accusantium possimus.</p>
<div id="message">
<div class="mess-user">
Some text
</div>
<div class="mess-chat">
Some text
</div>
</div>
<form onsubmit="submitForm(event)">
<input type="text" id="input" placeholder="Input ask" />
</form>
<script src="index.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background: #343541;
color: #ECECF1;
font-family: 'Inter', sans-serif;
}
h1 {
text-align: center;
font-size: 50px;
margin-top: 100px;
}
body>p {
width: 600px;
margin: 50px auto;
line-height: 170%;
text-align: center;
color: #b5b5bc;
}
#messages {
width: 700px;
margin: 0 auto;
max-height: 600px;
overflow-y: auto;
margin-bottom: 220px;
}
#messages::-webkit-scrollbar {
width: 5px
}
#messages::-webkit-scrollbar-track {
background: #575a6c;
}
#messages::-webkit-scrollbar-thumb {
background: #17181e
}
#messages::-webkit-scrollbar-thumb:hover {
background: #d26565
}
.mess-user {
background: #434654;
padding: 20px 25px;
}
.mess-chat {
background: #2b2d37;
padding: 20px 25px;
}
form {
position: fixed;
bottom: 100px;
width: 100%;
text-align: center;
}
form input {
background: #40414F;
border-radius: 5px;
padding: 15px 20px;
font-family: 'Inter', sans-serif;
border: 1px solid transparent;
color: #ECECF1;
outline: none;
width: 500px;
}
form input:focus {
border-color: #d26565;
}
form input::-webkit-input-placeholder {
color: #6c6e83;
JS
function submitForm(e) {
e.preventDefault();
getData();
}
async function getData() {
let userData = document.getElementById("input").value.trim();
if(userData === "") return false;
const GptClient = require('Gpt4free-Client');
try {
// Create chat completion
const completion = await GptClient.create({
model: 'gpt-4-0613',
temperature: 0.7,
systemPrompt: 'You are powerful AI assistant\n',
messages: [
{
role: 'system',
messages: userData
}
]
});
// Get generated text
const generatedText = await completion;
console.log(generatedText);
} catch(error) {
console.error('Error: ', error)
}
}
//getData();