Spaces:

demoPOC
/

SearchDemo

Runtime error

App Files Files Community

demoPOC commited on Oct 9, 2023

Commit

8d987ff

1 Parent(s): 71b382d

Create aisearch.html

Browse files

Files changed (1) hide show

aisearch.html +269 -0

aisearch.html ADDED Viewed

	@@ -0,0 +1,269 @@

+<!DOCTYPE html>
+<html>
+<head>
+	<title>J 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: 950px;
+/*			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;
+		}
+		.flex-container {
+    		display: flex;
+    		align-items: stretch;
+    		height:90%;
+		}
+		/*.chat-area {
+			flex-grow: 1;
+			padding: 20px;
+			overflow-y: auto;
+		}*/
+		.chat-area {
+			flex: 1.5;
+			padding: 20px;
+			border: 2px solid black;
+		}
+		.llm-area {
+			flex: 1;
+			padding: 20px;
+			border: 2px solid black;
+		}
+		.chat-area p {
+			margin: 5px 0;
+		}
+		.llm-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: 90%;
+			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 J Embedding Engine</div>
+		</div>
+		<div class="message-box">
+			<label for="llmID"><b>Select LLM for Response Generation</b></label>
+              <select name="llmID" id="llmID">
+                    <option value="0">Open AI</option>
+                    <option value="1">LLAMA 2 - 13B</option>
+                    <option value="2">LLAMA 2 - 70B</option>
+                    <option value="3">LLAMA 2 - 7B</option>
+                    <option value="4">Mistral AI</option>
+              </select>
+		</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="flex-container">
+			<div class="chat-area">
+				<!-- <div class="bot-message">
+					<p>Hello! How can I assist you today?</p>
+				</div> -->
+			</div>
+			<div class="llm-area">
+				<!-- <div class="bot-message">
+					<p>Hello! How can I assist you today?</p>
+				</div> -->
+			</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 = ""
+			document.querySelector(".llm-area").innerHTML = ""
+			var userInput = document.getElementById("user-input").value;
+			var selectedllmid = document.getElementById("llmID").value;
+			console.log("Selected LLM ID:::"+selectedllmid)
+			// 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> &ldquo;' + userInput + '&rdquo; </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,selectedllmid);
+		}
+		async function generateBotResponse(userInput,selectedllmid) {
+			// 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", '/agent/chat/suggestion', true);
+            xhr.setRequestHeader('Content-Type', 'application/json');
+            xhr.send(JSON.stringify({
+                message: [userInput],
+                llmID:selectedllmid
+            }));
+            xhr.onload = function() {
+            console.log(this.responseText);
+            var searchResultArray = JSON.parse(this.responseText).searchResult;
+            var llmResponse = JSON.parse(this.responseText).suggestions[0]['message'];
+            console.log("Semantic Search Array::::"+searchResultArray);
+            console.log("LLM Response::::"+llmResponse);
+            var botMessage = document.createElement("div");
+				botMessage.classList.add("bot-message");
+				botMessage.innerHTML = '<p> <b> LLM Response::</b> '+llmResponse+'</p>';
+				document.querySelector(".llm-area").appendChild(botMessage);
+            // Create a new bot message and add it to the chat area
+            for(let i = 0; i < searchResultArray.length; i++)
+            {
+            	response=searchResultArray[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>