Spaces:

sds-bosch
/

watchbot

Running

App Files Files Community

watchbot / index.html

sds-bosch

Update content type

d071b05 verified 4 months ago

raw history blame contribute delete

No virus

5.13 kB

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

	<!-- <img src="bosch-logo-supergraphic.png" class="logo-upright"> -->
	<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 () {
	// Make a GET request to the chatbot API
	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() {
	// Get user input from the text input field

	// const input = document.getElementById('input').value;//
	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'));

	// Make a POST request to the chatbot API
	const response = await fetch("https://sds-bosch-movadoapi.hf.space/predict", {
	method: "POST",
	headers: { "Content-Type": "text/plain" },
	body: JSON.stringify({
	input_text: [input],
	})
	});

	// Extract the chatbot response from the JSON data
	const data = await response.json();
	const responseText = data.data;

	// Update the output textarea with the chatbot response
	$('.message.loading').remove();
	$('<div class="message new"><figure class="avatar"><img src="bot.png" /></figure>' + responseText + '</div>').appendTo($('.mCSB_container')).addClass('new');
	setDate();
	updateScrollbar();
	// document.getElementById('output').value = responseText;
	}

	//# sourceURL=pen.js
	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>