--- a
+++ b/front-end/ehr.html
@@ -0,0 +1,443 @@
+<html lang="en" class="focus-outline-visible">
+
+<head>
+	<title>EHR Information Extractor</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.5.0/css/bootstrap.min.css">
+	<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script>
+	<script src="spin.js"></script>
+	<script src="ladda.js"></script>
+	<link rel="stylesheet" href="ladda-themeless.min.css">
+	<style>
+		#taggedEhr span {
+			position: relative;
+			border-bottom: 1px dotted black;
+			color: black;
+		}
+
+		#taggedEhr span span {
+			visibility: hidden;
+			width: auto;
+			color: black;
+			border-bottom: 0;
+			font-weight: bold;
+			font-family: Catamaran;
+			text-align: center;
+			border-radius: 5px;
+			padding: 5px 5px 5px 5px;
+
+			/* Position the tooltip */
+			position: absolute;
+			z-index: 1;
+			bottom: 125%;
+			left: 0%;
+		}
+
+		#taggedEhr span:hover span {
+			visibility: visible;
+		}
+
+		@media (min-width: 768px) {
+			#sidebar {
+				position: fixed;
+				padding-top: 70px;
+				bottom: 0;
+				border-right: #cdcdcd medium solid;
+			}
+		}
+
+		body {
+			padding-top: 70px;
+			overflow: auto;
+		}
+
+		.vertical-center {
+			padding: 200px 0;
+			text-align: center;
+		}
+
+		table.center {
+		  margin-left:auto; 
+    	  margin-right:auto;
+		}
+
+		.my-custom-scrollbar {
+			position: relative;
+			width: auto;
+			height: 400px;
+			overflow: auto;
+		}
+
+		.table-wrapper-scroll-y {
+			display: block;
+		}
+
+		* {
+		  scrollbar-width: thin;
+		  scrollbar-color: lightgray white;
+		}
+		*::-webkit-scrollbar {
+		  width: 12px;
+		}
+		*::-webkit-scrollbar-track {
+		  background: white;
+		}
+		*::-webkit-scrollbar-thumb {
+		  background-color: lightgray;
+		  border-radius: 20px;
+		  border: 3px solid white;
+		}
+
+		#relationTable {
+			padding-left: 15px;
+		}
+
+		/* The Modal (background) */
+		.modal {
+		  display: none; /* Hidden by default */
+		  position: fixed; /* Stay in place */
+		  z-index: 1; /* Sit on top */
+		  padding-top: 100px; /* Location of the box */
+		  left: 0;
+		  top: 0;
+		  width: 100%; /* Full width */
+		  height: 100%; /* Full height */
+		  overflow: auto; /* Enable scroll if needed */
+		  background-color: rgb(0,0,0); /* Fallback color */
+		  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+		}
+
+		/* Modal Content (image) */
+		.modal-content {
+		  margin: auto;
+		  display: block;
+		  width: 80%;
+		  max-width: 700px;
+		}
+
+		/* Caption of Modal Image */
+		#caption {
+		  margin: auto;
+		  display: block;
+		  width: 80%;
+		  max-width: 700px;
+		  text-align: center;
+		  color: #ccc;
+		  padding: 10px 0;
+		  height: 150px;
+		}
+
+		/* Add Animation */
+		.modal-content, #caption {  
+		  -webkit-animation-name: zoom;
+		  -webkit-animation-duration: 0.6s;
+		  animation-name: zoom;
+		  animation-duration: 0.6s;
+		}
+
+		@-webkit-keyframes zoom {
+		  from {-webkit-transform:scale(0)} 
+		  to {-webkit-transform:scale(1)}
+		}
+
+		@keyframes zoom {
+		  from {transform:scale(0)} 
+		  to {transform:scale(1)}
+		}
+
+		/* The Close Button */
+		.close {
+		  position: absolute;
+		  top: 15px;
+		  right: 35px;
+		  color: #f1f1f1;
+		  font-size: 40px;
+		  font-weight: bold;
+		  transition: 0.3s;
+		}
+
+		.close:hover,
+		.close:focus {
+		  color: #bbb;
+		  text-decoration: none;
+		  cursor: pointer;
+		}
+
+		/* 100% Image Width on Smaller Screens */
+		@media only screen and (max-width: 700px){
+		  .modal-content {
+		    width: 100%;
+		  }
+		}
+
+		.custom-control {
+			padding-top: calc(.375rem + 1px); 
+			padding-bottom: calc(.375rem + 1px);
+		}
+
+	</style>
+</head>
+
+<body>
+
+	<nav class="navbar navbar-light bg-light justify-content-center fixed-top" id="navigationBar">
+		<a class="navbar-brand" href="#">
+			EHR Information Extractor
+		</a>
+	</nav>
+
+	<div class="container" role="main">
+		<div class="row">
+			<div class="col-md-6" style="border-right: 1px solid; padding-top: 20px;">
+				<form method="POST">
+
+					<div class="form-group row">
+						<label for="ner-model" class="col-sm-3 col-form-label">NER Model</label>
+						<div class="col-sm-6">
+							<select class="form-control" id="ner-model">
+								<option value="biobert">BioBERT</option>
+								<option value="bilstm">BiLSTM + CRF</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="form-group row">
+						<label for="ehrFile" class="col-sm-3 col-form-label">Upload EHR</label>
+						<div class="col-sm-6">
+							<input type="file" class="form-control-file" id="ehrFile">
+						</div>
+					</div>
+
+					<div class="form-group row" style="font-weight: bold;">
+						<label class="col-sm-3 col-form-label">OR</label>
+					</div>
+
+					<div class="form-group row">
+						<label for="ehrText" class="col-sm-8 col-form-label">Paste it here</label>
+						<div class="custom-control custom-switch float-right col-sm-4">
+							<input type="checkbox" class="custom-control-input" id="sampleRecord">
+							<label class="custom-control-label" for="sampleRecord">Sample EHR</label>
+						</div>
+					</div>
+					<textarea class="form-control col-sm-11" rows="10" id="ehrText" name="ehrText"
+						spellcheck="false"></textarea>
+					<br>
+
+					<div class="form-group row">
+						<div class="col-sm-10">
+							<button type="button" class="btn btn-primary ladda-button" id="subBtn"
+								data-style="expand-right">Submit</button>
+						</div>
+					</div>
+
+				</form>
+				<p class="d-none" id="errorText"></p>
+			</div>
+
+			<div class="col-md-6 " id="">
+				<ul class="nav nav-tabs d-none" role="tablist" id="output-tabs">
+
+					<li class="nav-item">
+						<a class="nav-link active" id="ner-tab" data-toggle="tab" href="#ner"
+							aria-controls="ner" role="tab" aria-selected="true">
+							<i class="bx bx-user align-middle"></i>
+							<span class="align-middle">Tagged EHR</span>
+						</a>
+					</li>
+					<li class="nav-item current">
+						<a class="nav-link" id="re-table-tab" data-toggle="tab" href="#re-table" aria-controls="re-table"
+							role="tab" aria-selected="false">
+							<i class="bx bx-message-square align-middle"></i>
+							<span class="align-middle">Relation Table</span>
+						</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" id="re-graph" href="#" aria-selected="false">
+							<i class="bx bx-message-square align-middle"></i>
+							<span class="align-middle">Knowledge Graph</span>
+						</a>
+					</li>
+
+				</ul>
+
+				<div class="tab-content">
+
+					<div class="tab-pane active" id="ner" aria-labelledby="ner-tab" role="tabpanel">
+						<h3 class="text-center d-none" id="nerTitle" style="padding-top: 20px; padding-bottom: 20px;">
+							Tagged EHR
+						</h3>
+
+						<div id="taggedEhr" class="d-none table-wrapper-scroll-y my-custom-scrollbar">
+						</div>
+
+						<div id="ner-waiting-text" class="vertical-center offset-sm-3">
+							Waiting for an EHR record!
+						</div>
+
+					</div>
+					
+					<div class="tab-pane" id="re-table" aria-labelledby="re-table-tab" role="tabpanel">
+
+						<div id="re-waiting-text" class="vertical-center offset-sm-3">
+							Waiting for an RE table!
+						</div>
+
+						<h3 class="text-center d-none" id="reTitle" style="padding-top: 20px; padding-bottom: 20px;">
+							Relations
+						</h3>
+
+						<div id="relationTable" class="d-none table-wrapper-scroll-y my-custom-scrollbar">
+						</div>
+
+					</div>
+
+					<div class="d-none" id="graph-img">
+					</div>
+					
+					<div id="graphModal" class="modal">
+					  <span class="close" id="graph-close-btn">&times;</span>
+					  <img class="modal-content" id="img01">
+					  <div id="caption"></div>
+					</div>
+
+				</div>
+
+				<br>
+			
+			</div>
+		</div>
+	</div>
+
+	<script>
+		$(document).ready(function () {
+
+			// Read file contents and set to text area
+			$('#ehrFile').change(function () {
+				var fileReader = new FileReader();
+				fileReader.onload = function () {
+					var data = fileReader.result;
+					$("#ehrText").val(data);
+				};
+				fileReader.readAsText($(this).prop('files')[0]);
+
+			});
+
+			// Read sample EHR
+			$("#sampleRecord").change(function () {
+				// If checked
+				if (this.checked) {
+					var settings = {
+						"url": "http://34.105.27.31:8000/sample/",
+						"method": "GET",
+						"headers": {
+							"Content-Type": "application/json"
+						},
+					};
+
+					$.ajax(settings).done(function (response) {
+						let data = response.data;
+						$("#ehrText").val(data);
+					});
+
+				} else {
+					$("#ehrText").val("");
+				}
+			});
+
+			// Open Knowledge graph image
+			$("#re-graph").on("click", function(e) {
+				let knlg_graph = $("#knowledge-graph").attr("src");
+
+				$("#graphModal").css("display", "block");
+				$("#img01").attr("src", knlg_graph);
+				$("#caption").html("Knowledge Graph");
+				$("#navigationBar").removeClass("fixed-top");
+			});
+
+			// Close Knowledge graph image
+			$("#graph-close-btn").on("click", function(e) {
+				$("#graphModal").css("display", "none");
+				$("#navigationBar").addClass("fixed-top");
+			});
+
+			// Print NER results on submit button click
+			$("#subBtn").on("click", function (e) {
+				var laddaBtn = e.currentTarget;
+				var l = Ladda.create(laddaBtn);
+				l.start();
+
+				var settings = {
+					"url": "http://34.105.27.31:8000/",
+					"method": "POST",
+					"headers": {
+						"Content-Type": "application/json"
+					},
+					"data": JSON.stringify({
+						"ehr_text": $("#ehrText").val(),
+						"model_choice": $("#ner-model option:selected").val()
+					}),
+				};
+
+				//POST request to API
+				$.ajax(settings).done(function (response) {
+
+					let taggedHtml = response.tagged_text;
+					let reTable = response.re_table;
+					let graph = response.graph;
+
+					if (taggedHtml == '' || !taggedHtml) {
+						let str =
+							`<span class="text-danger">We're sorry some error occurred while trying to get the answer.</span></br>`
+						$("#errorText").html(str);
+						$("#errorText").removeClass("d-none");
+					} else {
+						$("#nerTitle").removeClass("d-none");
+						$("#reTitle").removeClass("d-none");
+						$("#taggedEhr").removeClass("d-none");
+						$("#relationTable").removeClass("d-none");
+						$("#output-tabs").removeClass("d-none");
+
+						$("#ner-waiting-text").addClass("d-none");
+						$("#re-waiting-text").addClass("d-none");
+
+						$("#knowledge-graph").attr("src", "");
+						$("#img01").attr("src", "");
+
+						$("#taggedEhr").html(taggedHtml);
+						$("#relationTable").html(reTable);
+						$("#graph-img").html(graph);
+					}
+
+					l.stop();
+				});
+			});
+
+
+			$(document).on("mouseenter", "#taggedEhr span", function() {
+				var relGroup = $(this).attr("class").split(' ');
+				for (grp of relGroup){
+					try {
+						$("." + grp).css("border", "2px solid red");
+					} catch (e) {}
+				}
+			});
+
+			$(document).on("mouseleave", "#taggedEhr span", function() {
+			    var relGroup = $(this).attr("class").split(' ');
+				for (grp of relGroup){
+					try {
+						$("." + grp).css("border", "");
+						$("." + grp).css("border-bottom", "1px dotted black");
+					} catch (e) {}
+				}
+			});
+		});
+	</script>
+	
+</body>
+
+</html>
\ No newline at end of file