Spaces:

demoPOC
/

SearchDemo

Runtime error

App Files Files Community

demoPOC commited on Aug 3, 2023

Commit

911004f

1 Parent(s): ef76505

Update index.html

Browse files

Files changed (1) hide show

index.html +189 -187

index.html CHANGED Viewed

@@ -1,203 +1,205 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>AI Assist</title>
-	<link rel="icon" type="image/png"  />
-	<link rel="apple-touch-icon" type="image/png"  />
-	<style>
-		body {
-			background-color: #ECE5DD;
-			font-family: Arial, sans-serif;
-			font-size: 14px;
-			padding: 20px;
-		}
-		.container {
-			display: flex;
-			flex-direction: column;
-			height: 700px;
-			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='.png')}}); */
-		}
-	</style>
-</head>
-<body>
-	<div class="container">
-		<div class="header">
-			<div> </div>
-			<div>AI Assist - Powered by J-GPT</div>
-		</div>
-		<div class="chat-area">
-			<div class="bot-message">
-				<p>Hello! How can I assist you today?</p>
-			</div>
-		</div>
-		<div class="message-box">
-			<input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)">
-			<button id="send-button" onclick="sendMessage()">Send</button>
-		</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
-			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("user-message");
-			userMessage.innerHTML = '<p>' + userInput + '</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", '/agent/chat/suggestion', true);
-            xhr.setRequestHeader('Content-Type', 'application/json');
-            xhr.send(JSON.stringify({
-                query: userInput
-            }));
-            xhr.onload = function() {
-            console.log(this.responseText);
-            var response = JSON.parse(this.responseText);
-            console.log(response);
-            // Create a new bot message and add it to the chat area
-			var botMessage = document.createElement("div");
-			botMessage.classList.add("bot-message");
-			botMessage.innerHTML = '<p>' + response.botMessage + '</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>

 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Jio AI Assist</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: 700px;
+        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>
+          <img class="logoClass" src="../static/Jio-Logo.png" alt="Jio Logo" />
+        </div>
+        <div>AI Assist Powered by JioGPT</div>
+      </div>
+      <div class="chat-area">
+        <div class="bot-message">
+          <p>Hello! How can I assist you today?</p>
+        </div>
+      </div>
+      <div class="message-box">
+        <input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)">
+        <button id="send-button" onclick="sendMessage()">Send</button>
+      </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
+        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("user-message");
+        userMessage.innerHTML = '<p>' + userInput + '</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.open("POST", '/agent/chat/suggestion', true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.send(JSON.stringify({
+          message: [userInput],
+          "custDetails": {
+            "cName": "Mohit Srivastava",
+            "cDistrict": "Lucknow"
+          }
+        }));
+        xhr.onload = function() {
+          console.log(this.responseText);
+          var response = JSON.parse(this.responseText);
+          console.log(response);
+          // Create a new bot message and add it to the chat area
+          var botMessage = document.createElement("div");
+          botMessage.classList.add("bot-message");
+          botMessage.innerHTML = '<p>' + response.suggestions[0]['message'] + '</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.suggestions[0]['message'];
+        }
+        // Parse the response JSON and return the bot message
+        //console.log(data);
+        //var data = await response.json();
+        //return response.botMessage;
+      }
+    </script>
+  </body>
 </html>