|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Chatbot</title> |
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> |
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> |
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> |
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> |
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}"/> |
|
<style> |
|
body,html{ |
|
height: 100%; |
|
margin: 0; |
|
background: rgb(44, 47, 59); |
|
background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43)); |
|
background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78)); |
|
} |
|
.chat{ |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
} |
|
.card{ |
|
height: 500px; |
|
border-radius: 15px !important; |
|
background-color: rgba(0,0,0,0.4) !important; |
|
} |
|
.contacts_body{ |
|
padding: 0.75rem 0 !important; |
|
overflow-y: auto; |
|
white-space: nowrap; |
|
} |
|
.msg_card_body{ |
|
overflow-y: auto; |
|
} |
|
.card-header{ |
|
border-radius: 15px 15px 0 0 !important; |
|
border-bottom: 0 !important; |
|
} |
|
.card-footer{ |
|
border-radius: 0 0 15px 15px !important; |
|
border-top: 0 !important; |
|
} |
|
.container{ |
|
align-content: center; |
|
} |
|
.search{ |
|
border-radius: 15px 0 0 15px !important; |
|
background-color: rgba(0,0,0,0.3) !important; |
|
border:0 !important; |
|
color:white !important; |
|
} |
|
.search:focus{ |
|
box-shadow:none !important; |
|
outline:0px !important; |
|
} |
|
.type_msg{ |
|
background-color: rgba(0,0,0,0.3) !important; |
|
border:0 !important; |
|
color:white !important; |
|
height: 60px !important; |
|
overflow-y: auto; |
|
} |
|
.type_msg:focus{ |
|
box-shadow:none !important; |
|
outline:0px !important; |
|
} |
|
.attach_btn{ |
|
border-radius: 15px 0 0 15px !important; |
|
background-color: rgba(0,0,0,0.3) !important; |
|
border:0 !important; |
|
color: white !important; |
|
cursor: pointer; |
|
} |
|
.send_btn{ |
|
border-radius: 0 15px 15px 0 !important; |
|
background-color: rgba(0,0,0,0.3) !important; |
|
border:0 !important; |
|
color: white !important; |
|
cursor: pointer; |
|
} |
|
.search_btn{ |
|
border-radius: 0 15px 15px 0 !important; |
|
background-color: rgba(0,0,0,0.3) !important; |
|
border:0 !important; |
|
color: white !important; |
|
cursor: pointer; |
|
} |
|
.contacts{ |
|
list-style: none; |
|
padding: 0; |
|
} |
|
.contacts li{ |
|
width: 100% !important; |
|
padding: 5px 10px; |
|
margin-bottom: 15px !important; |
|
} |
|
.active{ |
|
background-color: rgba(0,0,0,0.3); |
|
} |
|
.user_img{ |
|
height: 70px; |
|
width: 70px; |
|
border:1.5px solid #f5f6fa; |
|
} |
|
.user_img_msg{ |
|
height: 40px; |
|
width: 40px; |
|
border:1.5px solid #f5f6fa; |
|
} |
|
.img_cont{ |
|
position: relative; |
|
height: 70px; |
|
width: 70px; |
|
} |
|
.img_cont_msg{ |
|
height: 40px; |
|
width: 40px; |
|
} |
|
.online_icon{ |
|
position: absolute; |
|
height: 15px; |
|
width:15px; |
|
background-color: #4cd137; |
|
border-radius: 50%; |
|
bottom: 0.2em; |
|
right: 0.4em; |
|
border:1.5px solid white; |
|
} |
|
.offline{ |
|
background-color: #c23616 !important; |
|
} |
|
.user_info{ |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
margin-left: 15px; |
|
} |
|
.user_info span{ |
|
font-size: 20px; |
|
color: white; |
|
} |
|
.user_info p{ |
|
font-size: 10px; |
|
color: rgba(255,255,255,0.6); |
|
} |
|
.video_cam{ |
|
margin-left: 50px; |
|
margin-top: 5px; |
|
} |
|
.video_cam span{ |
|
color: white; |
|
font-size: 20px; |
|
cursor: pointer; |
|
margin-right: 20px; |
|
} |
|
.msg_cotainer{ |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
margin-left: 10px; |
|
border-radius: 25px; |
|
background-color: rgb(82, 172, 255); |
|
padding: 10px; |
|
position: relative; |
|
} |
|
.msg_cotainer_send{ |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
margin-right: 10px; |
|
border-radius: 25px; |
|
background-color: #58cc71; |
|
padding: 10px; |
|
position: relative; |
|
} |
|
.msg_time{ |
|
position: absolute; |
|
left: 0; |
|
bottom: -15px; |
|
color: rgba(255,255,255,0.5); |
|
font-size: 10px; |
|
} |
|
.msg_time_send{ |
|
position: absolute; |
|
right:0; |
|
bottom: -15px; |
|
color: rgba(255,255,255,0.5); |
|
font-size: 10px; |
|
} |
|
.msg_head{ |
|
position: relative; |
|
} |
|
#action_menu_btn{ |
|
position: absolute; |
|
right: 10px; |
|
top: 10px; |
|
color: white; |
|
cursor: pointer; |
|
font-size: 20px; |
|
} |
|
.action_menu{ |
|
z-index: 1; |
|
position: absolute; |
|
padding: 15px 0; |
|
background-color: rgba(0,0,0,0.5); |
|
color: white; |
|
border-radius: 15px; |
|
top: 30px; |
|
right: 15px; |
|
display: none; |
|
} |
|
.action_menu ul{ |
|
list-style: none; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
.action_menu ul li{ |
|
width: 100%; |
|
padding: 10px 15px; |
|
margin-bottom: 5px; |
|
} |
|
.action_menu ul li i{ |
|
padding-right: 10px; |
|
} |
|
.action_menu ul li:hover{ |
|
cursor: pointer; |
|
background-color: rgba(0,0,0,0.2); |
|
} |
|
@media(max-width: 576px){ |
|
.contacts_card{ |
|
margin-bottom: 15px !important; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container-fluid h-100"> |
|
<div class="row justify-content-center h-100"> |
|
<div class="col-md-8 col-xl-6 chat"> |
|
<div class="card"> |
|
<div class="card-header msg_head"> |
|
<div class="d-flex bd-highlight"> |
|
<div class="img_cont"> |
|
<img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img"> |
|
<span class="online_icon"></span> |
|
</div> |
|
<div class="user_info"> |
|
<span>ChatBot</span> |
|
<p>Ask me anything!</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="messageFormeight" class="card-body msg_card_body"> |
|
|
|
</div> |
|
<div class="card-footer"> |
|
<form id="messageArea" class="input-group" onsubmit="sendMessage(event)"> |
|
<input type="text" id="text" name="prompt" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/> |
|
<div class="input-group-append"> |
|
<button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
async function sendMessage(event) { |
|
event.preventDefault(); |
|
const formData = new FormData(document.getElementById('messageArea')); |
|
const response = await fetch('/generate/', { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
const data = await response.json(); |
|
displayMessage(data.response, 'user'); |
|
} |
|
|
|
function displayMessage(message, role) { |
|
const msgContainer = document.getElementById('messageFormeight'); |
|
const msgDiv = document.createElement('div'); |
|
msgDiv.className = role === 'user' ? 'msg_cotainer' : 'msg_cotainer_send'; |
|
msgDiv.innerHTML = `<span class="msg">${message}</span><span class="${role === 'user' ? 'msg_time' : 'msg_time_send'}">Just now</span>`; |
|
msgContainer.appendChild(msgDiv); |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |
|
|
