|
<!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> |
|
|
