display_loc

by Jimmy Chandra

HTML

<div class="container">
  <div id="extractions">&nbsp; 
  </div>
  <div id="viewer" style="position:relative">
  </div>
</div>

CSS

#extractions {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 500px;
  border: solid 1px #ccc;
}

#extractions div strong {
  display:block;
  border-radius: 5px;
  margin-left: 35px;
  margin-right: 5px;
  padding: 5px;
  margin-bottom:10px;
  font-weight: 400;
  background-color: #eee;
}

#extractions div {
  font-weight: bold;
}

#extractions button {
  border: none;
  background-color: transparent;
}

#viewer {
  position: absolute;
  top: 0px;
  left: 500px;
  width: 540px;
  height: 500px;
  border:solid 1px #ccc;
}

JavaScript

const pdfData = [
	{"x1":  20, "y1": 110, "x2":  85, "y2": 124, "data": "Jack Snyder"			, "fontSize": "10pt" }, 
	{"x1": 390, "y1": 105, "x2": 450, "y2": 115, "data": "PO Number"				, "fontSize": "10pt" }, 
	{"x1": 250, "y1":  50, "x2": 500, "y2":  60, "data": "Invoice"					, "fontSize": "20pt" }, 
	{"x1":  20, "y1": 140, "x2": 125, "y2": 154, "data": "Sydney, NSW 2000"	, "fontSize": "10pt" },
	{"x1": 460, "y1":  90, "x2": 500, "y2": 104, "data": "193484"						, "fontSize": "10pt" }, 
	{"x1":  20, "y1": 125, "x2": 110, "y2": 139, "data": "209 Alameda St."	, "fontSize": "10pt" }, 
	{"x1": 400, "y1":  90, "x2": 450, "y2": 100, "data": "Invoice #:"				, "fontSize": "10pt" }, 
	{"x1":  20, "y1":  90, "x2": 120, "y2": 100, "data": "Bill To:"					, "fontSize": "11pt" }, 
	{"x1": 460, "y1": 105, "x2": 518, "y2": 119, "data": "ABC-1293"					, "fontSize": "10pt" }, 
];

const llmOutput = [
	{ "buyer_contact": "Jack Snyder", "locations": [ {"x1": 20, "y1": 110, "x2": 85, "y2": 124} ] }, 
  { "po_number": "ABC-1293", "locations": [ {"x1": 460, "y1": 105, "x2": 518, "y2": 119} ] }, 
  { "invoice_number": "193484", "locations": [ {"x1": 460, "y1": 90, "x2": 500, "y2": 104} ] }, 
  { "buyer_address": "209 Alameda St. Sydney, NSW 2000", "locations": [ {"x1": 20, "y1": 125, "x2": 110, "y2": 139}, {"x1": 20, "y1": 140, "x2": 125, "y2": 154} ] },
];

renderViewer(pdfData, llmOutput);
renderExtraction(llmOutput);

function toggleHighlight(canonicalField) {
	//toggle the highlight overlay for all matching canonical field (stored in data-field node)
	let fields = document.querySelectorAll(`div[data-field='${canonicalField}']`);
  fields.forEach(e => {
  	e.style.visibility = e.style.visibility === 'visible' ? "hidden" : "visible";
	});
}

function renderViewer(input, output) {
	let html = "";
  
  //This renders the field value in the PDF viewer
	for(let i of input)
		html += `<div style="position: absolute;left: ${i.x1}px;top:...