Upload New File

9945ebe2 · Karagoda Gamage Pasan Malaka · 27095b80 · 9945ebe2
Commit 9945ebe2 authored Nov 13, 2022 by Karagoda Gamage Pasan Malaka
Hide whitespace changes
Inline Side-by-side

Showing with 157 additions and 0 deletions

chat.html chat.html +157 -0

No files found.
--- a/chat.html
+++ b/chat.html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>AI Assistance</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+    <style>
+	html { 
+		height: 100%; 
+	}
+	* {box-sizing: border-box;}
+
+	body { 
+		margin: 0;  
+		height: 100%; 
+		font-family: Arial, Helvetica, sans-serif;
+		background-color: black;
+	}
+
+
+	.header {
+		overflow: hidden;
+		background-color: #e28743;
+		padding: 5px 10px;
+	}
+
+	.header a {
+		float: left;
+		color: White;
+		text-align: center;
+		padding: 12px;
+		text-decoration: none;
+		font-size: 18px; 
+		line-height: 25px;
+		border-radius: 4px;
+	}
+
+	.header a.logo {
+		font-size: 25px;
+		font-weight: bold;
+	}
+
+	.header a:hover {
+		background-color: #e28743;
+		color: black;
+	}
+
+	.header a.active {
+		background-color: #e28743;
+		color: white;
+	}
+
+	.header-right {
+		float: right;
+	}
+
+	@media screen and (max-width: 500px) {
+	  .header a {
+		float: none;
+		display: block;
+		text-align: left;
+	  }
+	  
+	  .header-right {
+		float: none;
+	  }
+	}
+	
+   .global-container{
+		margin-top: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		float: left;
+		width: 100%;
+	}
+
+	form{
+		padding-top: 10px;
+		font-size: 14px;
+		margin-top: 30px;
+	}
+
+	.card-title{ font-weight:300; }
+	
+	.card{opacity: 0.95;}
+	
+	.effect7{
+		position:relative;
+		-webkit-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+		-moz-box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+        box-shadow:0 1px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+	}
+	.login-form{ 
+		width:1175px;
+		margin:20px;
+	}
+	input[type="text"], textarea {
+
+        background-color : #d1d1d1;
+
+       }
+
+
+
+
+
+    </style>
+</head>
+<body>
+<div class="global-container">
+    <center>
+        <h3 style="color:powderblue;">AI Assistant</h3>
+        <a href="classification_page" class="btn btn-primary btn-block" >Feedback Section</a>
+        <h5 style="color:powderblue;">Ask me anything...</h5>
+        <img src="{{ url_for('static', filename='images/bot.gif') }}" style="width:70%;height:70%;">
+        <form action="chat_bot" method="post">
+
+            <div class="input-group mb-3">
+                <input type="text" id="msg" name="msg" class="form-control" placeholder="Your question..."
+                       aria-label="Your question..." aria-describedby="basic-addon2" required>
+                <div class="input-group-append">
+                    <button class="btn btn-primary btn-block" type="button" onclick="sendRequest()">Send</button>
+                </div>
+            </div>
+            <h5 style="color:powderblue;" id="res"></h5>
+        </form>
+        <br>
+        <br>
+        <br>
+        <img src="{{ url_for('video_feed') }}" style="width:70%;height:70%;">
+
+
+    </center>
+
+</div>
+<script>
+function sendRequest(){
+  var x = document.getElementById("msg").value;
+
+  $.post("http://127.0.0.1:5000/chat_bot",
+  {
+    msg: x
+  },
+  function(data, status){
+<!--    alert("Data: " + data + "\nStatus: " + status);-->
+    document.getElementById("res").innerHTML = data;
+  });
+};
+
+</script>
+</body>
+</html>
\ No newline at end of file