Ll3doke / static /index1.html
Ashrafb's picture
Rename static/index.html to static/index1.html
7a6996a verified
raw
history blame
4.51 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: #33343f;
}
.chat {
display: flex;
gap: 20px;
padding: 25px;
color: #fff;
font-size: 15px;
font-weight: 300;
}
.chat img {
width: 35px;
height: 35px;
}
.response {
background-color: #494b59;
}
.messagebar {
position: fixed;
bottom: 0;
height: 5rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #494b59;
background-color: #33343f;
}
.messagebar .bar-wrapper {
background-color: #494b59;
border-radius: 5px;
width: 60vw;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bar-wrapper input {
width: 100%;
padding: 5px;
border: none;
outline: none;
font-size: 14px;
background: none;
color: #ccc;
}
.bar-wrapper input::placeholder {
color: #ccc;
}
.messagebar button {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #fff;
cursor: pointer;
}
.message-box {
height: calc(100vh - 5rem);
overflow-y: auto;
}
</style>
</head>
<body>
<div class="chatbox-wrapper">
<div class="message-box">
<div class="chat response">
<img src="img/chatbot.jpg">
<span>Hello there! <br> How can I help you today.</span>
</div>
</div>
<div class="messagebar">
<div class="bar-wrapper">
<input type="text" placeholder="Enter your message...">
<button>
<span class="material-symbols-rounded">send</span>
</button>
</div>
</div>
</div>
<script>
const messageBar = document.querySelector(".bar-wrapper input");
const sendBtn = document.querySelector(".bar-wrapper button");
const messageBox = document.querySelector(".message-box");
sendBtn.onclick = async function () {
if (messageBar.value.length > 0) {
const UserTypedMessage = messageBar.value;
messageBar.value = "";
let message = `<div class="chat message"><img src="img/user.jpg"><span>${UserTypedMessage}</span></div>`;
let response = `<div class="chat response"><img src="img/chatbot.jpg"><span class="new">...</span></div>`;
messageBox.insertAdjacentHTML("beforeend", message);
setTimeout(async () => {
messageBox.insertAdjacentHTML("beforeend", response);
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
prompt: UserTypedMessage,
history: "[]",
temperature: "0.9",
max_new_tokens: "512",
top_p: "0.95",
repetition_penalty: "1.0"
})
};
try {
const res = await fetch("/generate/", requestOptions);
const data = await res.json();
const ChatBotResponse = document.querySelector(".response .new");
ChatBotResponse.innerText = data.response;
ChatBotResponse.classList.remove("new");
} catch (error) {
console.error("Error:", error);
const ChatBotResponse = document.querySelector(".response .new");
ChatBotResponse.innerText = "Oops! An error occurred. Please try again.";
ChatBotResponse.classList.remove("new");
}
}, 100);
}
};
</script>
</body>
</html>