|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
|
|
<title>Movado ChatBot</title> |
|
|
|
<link rel="stylesheet" href="css/normalize.min.css"> |
|
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'> |
|
<link rel='stylesheet' href='css/jquery.mCustomScrollbar.min.css'> |
|
<link rel="stylesheet" href="css/style.css"> |
|
<script> |
|
window.console = window.console || function (t) { }; |
|
</script> |
|
|
|
|
|
|
|
</head> |
|
|
|
<body translate="no"> |
|
|
|
|
|
<div class="chat"> |
|
<div class="chat-title"> |
|
<h1>Movado</h1> |
|
<h2>Where Art Meets Time</h2> |
|
<figure class="avatar"> |
|
<img src="bot.png" /> |
|
</figure> |
|
</div> |
|
<div class="timendate"> |
|
<h2 class="timetext">Today ( <span id="today"></span> )</h2> |
|
</div> |
|
<div class="messages"> |
|
<div class="messages-content"></div> |
|
</div> |
|
<div class="message-box"> |
|
<textarea type="text" class="message-input" placeholder="Type message..."></textarea> |
|
<button type="submit" class="message-submit">Send</button> |
|
</div> |
|
|
|
</div> |
|
<div class="bg"></div> |
|
<script src="js/commmenm.js"></script> |
|
|
|
<script src='js/jquery.min.js'></script> |
|
<script src='js/jquery.mCustomScrollbar.concat.min.js'></script> |
|
<script id="rendered-js"> |
|
var $messages = $('.messages-content'), |
|
d, h, m, |
|
i = 0; |
|
|
|
$(window).load(function () { |
|
$messages.mCustomScrollbar(); |
|
setTimeout(function () { |
|
fakeMessage(); |
|
}, 100); |
|
}); |
|
|
|
function updateScrollbar() { |
|
$messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', { |
|
scrollInertia: 10, |
|
timeout: 0 |
|
}); |
|
|
|
} |
|
|
|
function setDate() { |
|
d = new Date(); |
|
if (m != d.getMinutes()) { |
|
m = d.getMinutes(); |
|
$('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last')); |
|
} |
|
} |
|
|
|
function insertMessage() { |
|
msg = $('.message-input').val(); |
|
if ($.trim(msg) == '') { |
|
return false; |
|
} |
|
$('<div class="message message-personal"><figure class="avatar user"><img src="user.png" /></figure>' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new'); |
|
setDate(); |
|
$('.message-input').val(null); |
|
updateScrollbar(); |
|
setTimeout(function () { |
|
fakeMessage(); |
|
}, 1000 + Math.random() * 20 * 100); |
|
} |
|
|
|
$('.message-submit').click(function () { |
|
|
|
console.log('clicked'); |
|
getResponse(); |
|
}); |
|
|
|
$(window).on('keydown', function (e) { |
|
if (e.which == 13) { |
|
getResponse(); |
|
return false; |
|
} |
|
}); |
|
|
|
var Fake = ['I am Bob']; |
|
|
|
|
|
function fakeMessage() { |
|
if ($('.message-input').val() != '') { |
|
return false; |
|
} |
|
$('<div class="message loading new"><figure class="avatar"><img src="bot.png" /></figure><span></span></div>').appendTo($('.mCSB_container')); |
|
updateScrollbar(); |
|
|
|
setTimeout(function () { |
|
$('.message.loading').remove(); |
|
$('<div class="message new"><figure class="avatar"><img src="bot.png" /></figure>' + Fake[i] + '</div>').appendTo($('.mCSB_container')).addClass('new'); |
|
setDate(); |
|
updateScrollbar(); |
|
i++; |
|
}, 1000 + Math.random() * 20 * 100); |
|
|
|
} |
|
|
|
async function getResponse() { |
|
|
|
|
|
|
|
const input = $('.message-input').val(); |
|
$('<div class="message message-personal"><figure class="avatar user"><img src="user.png" /></figure>' + input + '</div>').appendTo($('.mCSB_container')).addClass('new'); |
|
setDate(); |
|
$('.message-input').val(null); |
|
updateScrollbar(); |
|
$('<div class="message loading new"><figure class="avatar"><img src="bot.png" /></figure><span></span></div>').appendTo($('.mCSB_container')); |
|
|
|
|
|
const response = await fetch("https://sds-bosch-movadoapi.hf.space/predict", { |
|
method: "POST", |
|
headers: { "Content-Type": "text/plain" }, |
|
body: JSON.stringify({ |
|
input_text: [input], |
|
}) |
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
const responseText = data.data; |
|
|
|
|
|
$('.message.loading').remove(); |
|
$('<div class="message new"><figure class="avatar"><img src="bot.png" /></figure>' + responseText + '</div>').appendTo($('.mCSB_container')).addClass('new'); |
|
setDate(); |
|
updateScrollbar(); |
|
|
|
} |
|
|
|
|
|
var datetime = new Date(); |
|
month = '' + (datetime.getMonth() + 1), |
|
day = '' + datetime.getDate(), |
|
year = datetime.getFullYear(); |
|
day = month + '-' + day + '-' + year; |
|
|
|
console.log(day); |
|
document.getElementById("today").textContent = day; |
|
|
|
</script> |
|
|
|
|
|
</body> |
|
|
|
</html> |