Spaces:

demoPOC
/

JSearch

Runtime error

App Files Files Community

JSearch / index.html

demoPOC

Update index.html

d06428e over 2 years ago

raw

history blame contribute delete

5.41 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>Jio Search</title>
	<link rel="icon" type="image/png" href="../static/Jio-Logo.png" />
	<link rel="apple-touch-icon" type="image/png" href="../static/Jio-Logo.png" />
	<style>
	body {
	background-color: #ECE5DD;
	font-family: Arial, sans-serif;
	font-size: 14px;
	padding: 20px;
	}
	.container {
	display: flex;
	flex-direction: column;
	height: 900px;
	/* max-width: 700px;*/
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	}
	.header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	background-color:#0f3cc9 ;
	/* #075E54 */
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	}
	.chat-area {
	flex-grow: 1;
	padding: 20px;
	overflow-y: auto;
	}
	.chat-area p {
	margin: 5px 0;
	}
	.message-box {
	display: flex;
	align-items: center;
	background-color: #F4F4F4;
	padding: 10px;
	border-top: 1px solid #ccc;
	}
	.message-box input {
	flex-grow: 1;
	border: none;
	padding: 10px;
	font-size: 14px;
	border-radius: 5px;
	background-color: #fff;
	margin-right: 10px;
	}
	.message-box button {
	background-color:#0f3cc9 ;
	/* #075E54 */
	color: #fff;
	border: none;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	}
	.user-message {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin-bottom: 10px;
	}
	.bot-message {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	}
	.user-message p, .bot-message p {
	background-color:#ccd6f2;
	/* #DCF8C6; */
	color: #000;
	padding: 10px;
	border-radius: 10px;
	max-width: 60%;
	word-wrap: break-word;
	}
	.user-message p {
	margin-right: 10px;
	}
	.bot-message p {
	margin-left: 10px;
	}

	.logoClass
	{
	width: 50px;
	height: 40px;
	align-self: center;
	margin-right: 10px;
	gap: 20px 20px;
	background-repeat: no-repeat;
	background-size: cover;
	/* background-image: url({{url_for('static',filename='Jio-Logo.png')}}); */
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">

	<div>Search Powered by JEmbedding Engine</div>
	</div>

	<div class="message-box">
	<input id="user-input" type="text" placeholder="Enter your Search Query..." onkeyup="return searchKeyPress(event)">
	<button id="send-button" onclick="sendMessage()">Search</button>
	</div>

	<div class="chat-area">
	<!-- <div class="bot-message">
	<p>Hello! How can I assist you today?</p>
	</div> -->
	</div>

	</div>

	<script>

	function searchKeyPress(event) {
	event.preventDefault();
	if (event.keyCode === 13) {
	document.getElementById("send-button").click();
	}
	};

	async function sendMessage() {
	var response="";
	// Get the user input
	document.querySelector(".chat-area").innerHTML = ""
	var userInput = document.getElementById("user-input").value;

	// Create a new user message and add it to the chat area
	var userMessage = document.createElement("div");
	userMessage.classList.add("bot-message");
	userMessage.innerHTML = '<p> Your Search Results for <b> “' + userInput + '” </b></p>';
	document.querySelector(".chat-area").appendChild(userMessage);

	// Clear the input field
	document.getElementById("user-input").value = "";



	// Generate a bot response
	var botResponse = await generateBotResponse(userInput);


	}

	async function generateBotResponse(userInput) {
	// Make a POST request to the chatbot API endpoint
	// response = await fetch('http://127.0.0.1:1111/post_json', {
	// method: 'POST',
	// headers: {
	// 'Content-Type': 'application/json'
	// },
	// body: JSON.stringify({
	// query: userInput
	// })
	// });

	var xhr = new XMLHttpRequest();
	//xhr.open("POST", 'http://127.0.0.1:1111/post_json', true);
	xhr.open("POST", '/post_json', true);
	xhr.setRequestHeader('Content-Type', 'application/json');
	xhr.send(JSON.stringify({
	query: userInput
	}));

	xhr.onload = function() {

	console.log(this.responseText);
	var responseArray = JSON.parse(this.responseText).botMessage;
	console.log(responseArray);

	// Create a new bot message and add it to the chat area
	for(let i = 0; i < responseArray.length; i++)
	{
	response=responseArray[i]
	var botMessage = document.createElement("div");
	botMessage.classList.add("bot-message");
	botMessage.innerHTML = '<p> <b> Source :: </b><a>' + response.documentSource + '</a> <br> <br> <b> Semantically Matching Content::</b> '+response.pageContent+'</p>';
	document.querySelector(".chat-area").appendChild(botMessage);

	// Scroll to the bottom of the chat area
	document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight;
	}

	return response.botMessage;
	}

	// Parse the response JSON and return the bot message
	//console.log(data);
	//var data = await response.json();

	//return response.botMessage;
	}
	</script>
	</body>
	</html>