Spaces:

Innovex
/

ExCeipt

Sleeping

App Files Files Community

ExCeipt / templates /extractor.html

Scezui

added error trapping when no data was received

3b9f355 6 months ago

raw

history blame contribute delete

17.5 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!--Favicon-->
	<link rel="shortcut icon" href="/static/images/favicon.ico" title="Favicon" />

	<!-- Main CSS Files -->
	<!-- <link rel="stylesheet" href="/static/css/style.css"> -->
	<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/extractor.css') }}">

	<!-- Color CSS -->
	<link rel="stylesheet" href="/static/css/color.css">

	<!--Icon Fonts - Font Awesome Icons-->
	<link rel="stylesheet" href="/static/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<!-- Animate CSS-->
	<link href="css/animate.css" rel="stylesheet" type="text/css">

	<!--Google Webfonts-->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap"
	rel="stylesheet">
	<title>ExCeipt \| Extractor</title>

	<script src="https://cdn.lordicon.com/lordicon.js"></script>
	</head>

	<body>
	<div id="flash-container" class="alert alert-danger" role="alert">
	<!-- Flash message will be displayed here -->
	</div>
	<div class="containerz">
	<div class="left-column">
	<button class="backbutton" id="submitButton" onclick="window.location.href='{{ index_url }}'">
	<i class="fa-solid fa-arrow-left"></i>
	<span>Back</span>
	</button>
	<div id="canvas-container">
	{% if image_paths %}
	{% for image_path, prediction_results_copy in predictions.items() %}
	<div
	class="image-container {% if prediction_results_copy == 'non-receipt' %}red-border{% elif prediction_results_copy == 'receipt' %}green-border{% endif %}">
	<div class="tooltiptext">Click to view fullscreen</div>
	<img src="{{ url_for('static', filename='temp/img_display/' + image_path) }}" id="my-image"
	alt="uploads"
	data-img-path="{{ url_for('static', filename='temp/img_display/' + image_path) }}" />
	<div class="image-name">
	<p class="images-name">{{image_path}}</p>
	</div>
	</div>
	{% endfor %}
	{% else %}
	<p>No files uploaded.</p>
	{% endif %}
	</div>
	</div>
	<div class="right-column">
	<div id="logox">
	<img src="/static/images/logo.png" id="banner-logo" alt="Landing Page" />
	</div>

	<div style="display: flex; align-items: center;">
	</div>
	<hr style="color: #ccc; width:95%; opacity:0.35;">
	<div class="labels" style="margin: 0 0 0 20px;">
	<p>Receipt Verification</p>
	<p class="desc">Verify receipt details attentively, acknowledging occasional misclassification, which
	may arise from variations in image quality or format.</p>
	</div>
	<div class="receipt">
	<table>
	<thead>
	<tr>
	<th>File Name</th>
	<th>Prediction Result</th>
	</tr>
	</thead>
	<tbody>
	{% for image_path, prediction_results_copy in predictions.items() %}
	<tr>
	<td>{{ image_path }}</td>
	<td>
	<div class="details">
	<div style="display: flex; align-items: center; justify-content: center;">
	{% if prediction_results_copy.lower() == 'receipt' %}
	<lord-icon src="https://cdn.lordicon.com/lomfljuq.json" trigger="in"
	delay="1500" colors="primary:#16c72e" state="morph-check-in-1"
	style="width:25px;height:25px">
	</lord-icon>
	<p class="valid">Valid Receipt</p>
	{% else %}
	<lord-icon src="https://cdn.lordicon.com/zxvuvcnc.json" trigger="in"
	delay="1500" state="morph-cross-in" colors="primary:#e83a30"
	style="width:25px;height:25px">
	</lord-icon>
	<p class="valid">Not a Receipt</p>
	{% endif %}
	</div>
	</div>
	</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	<hr style="color: #ccc; width:95%; opacity:0.35;">
	<div class="labels" style="margin: 0 0 0 20px;">
	<p>Text Extraction</p>
	<p class="desc">Ensure optimal text extraction accuracy from receipts by making sure that the receipt
	image is clear, well-lit, and after extraction review the extracted text and edit.</p>
	</div>
	<div style="text-align: center; margin-top: 25px;">
	<button id="uploadbutton" class="uploadbutton" type="submit">
	<i id="loadingIcon" class="fa fa-spinner fa-spin" style="display: none;"></i>
	<span id="extractingText">Extract</span>
	</button>
	</div>
	<div class="avatargif">
	<img src="/static/images/avatar.gif" id="avatargif" />
	</div>
	<div class="receipt1" id="receiptdiv">
	<div class="details1">
	<table id="dataTable" border="1">
	<thead>
	<tr>
	<th>Receipt No.</th>
	<th>Merchant</th>
	<th>Address</th>
	<th>Date</th>
	<th>Time</th>
	<th>Items</th>
	<th>Price</th>
	<th>Total</th>
	<th>VAT</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	</div>

	<div style="text-align: center; display: none; justify-content: center;" id="downloadbutton">
	<a href="{{ url_for('download_csv') }}">
	<button id="downloadButton" class="exportbutton" type="submit"><i
	class="fa-solid fa-download"></i>Download CSV</button>
	</a>
	<button class="exportbutton" onclick="window.location.href='{{ index_url }}'">
	<span id="uploadIcon"><i class="fas fa-upload"></i></span>
	<span>Upload again</span>
	</button>
	</div>



	</div>
	<a href="https://lordicon.com/" hidden>Icons by Lordicon.com</a>
	<script>
	const index_url = '{{ index_url }}'; // Replace with the actual value if it's not supposed to be a template variable

	document.addEventListener('DOMContentLoaded', function () {
	const dataTable = document.getElementById('receiptdiv');
	const loadingSpinner = document.getElementById('loadingIcon');
	const extractingText = document.getElementById('extractingText');
	const runInferenceButton = document.getElementById('uploadbutton');
	const exportCSVButton = document.getElementById('downloadbutton');

	document.getElementById('uploadbutton').addEventListener('click', function () {
	loadingSpinner.style.display = 'inline-block'; // Show loading spinner
	extractingText.textContent = 'Extracting...'; // Change text to "Extracting..."
	runInferenceButton.disabled = true;
	// Hide the avatargif image
	document.getElementById('avatargif').style.display = 'none';
	runInference();
	});

	async function getData() {
	const response = await fetch('/get_data');
	const data = await response.text();

	updateTable(data);

	// Show the table when data is updated
	dataTable.style.display = 'table';
	}
	const imageElement = document.getElementById('my-image'); // replace 'my-image' with the id of your image element


	async function runInference() {
	await fetch('/run_inference');

	setTimeout(function () {
	loadingSpinner.style.display = 'none';
	runInferenceButton.style.display = 'none';
	exportCSVButton.style.display = 'flex';
	var imageElements = document.querySelectorAll('[data-img-path]');

	// Iterate over each image
	imageElements.forEach(function (imageElement) {
	var imagePath = imageElement.dataset.imgPath;
	// Remove the 'temp/img_display/' part from the imagePath
	// var newImagePath = imagePath.replace('temp/img_display/', '');
	// Update the image source
	imageElement.src = imagePath + "_inference.jpg";

	// Add an error handler
	imageElement.onerror = function () {
	// Hide the image's container if the image fails to load
	this.parentElement.style.display = 'none';
	};
	});
	getData();
	}, 500);
	}


	function updateTable(data) {
	if (!data \|\| data.trim() === '') {
	return 'Error extracting the information: data is empty';
	}

	Papa.parse(data, {
	header: true,
	skipEmptyLines: true,
	complete: function (results) {
	const tbody = document.querySelector('#dataTable tbody');
	tbody.innerHTML = ''; // Clear existing rows

	if (results.data.length === 0) {
	const tr = document.createElement('tr');
	const td = document.createElement('td');
	td.colSpan = 9;
	td.style.textAlign = 'center'; // Center the content
	td.style.fontSize = '1.2em'; // Increase the font size
	td.style.height = '100px'; // Set the height of the row
	td.style.verticalAlign = 'middle'; // Vertically center the content

	const icon = document.createElement('i');
	icon.className = 'fas fa-exclamation-triangle'; // Replace with the class of your error icon
	td.appendChild(icon);

	const br = document.createElement('br'); // Create a line break element
	td.appendChild(br); // Append the line break element

	const text = document.createTextNode(' An error occurred in extracting the data. Please contact the developers.');
	td.appendChild(text);

	tr.appendChild(td);
	tbody.appendChild(tr);
	} else {
	results.data.forEach(row => {
	const RECEIPTNUMBER = row['RECEIPTNUMBER'] \|\| '';
	const MERCHANTNAME = row['MERCHANTNAME'] \|\| '';
	const MERCHANTADDRESS = row['MERCHANTADDRESS'] \|\| '';
	const TRANSACTIONDATE = row['TRANSACTIONDATE'] \|\| '';
	const TRANSACTIONTIME = row['TRANSACTIONTIME'] \|\| '';
	const ITEMS = row['ITEMS'] \|\| '';
	const PRICE = row['PRICE'] \|\| '';
	const TOTAL = row['TOTAL'] \|\| '';
	const VATTAX = row['VATTAX'] \|\| '';

	const tr = document.createElement('tr');
	tr.innerHTML = `
	<td contenteditable="true">${RECEIPTNUMBER}</td>
	<td contenteditable="true">${MERCHANTNAME}</td>
	<td contenteditable="true">${MERCHANTADDRESS}</td>
	<td contenteditable="true">${TRANSACTIONDATE}</td>
	<td contenteditable="true">${TRANSACTIONTIME}</td>
	<td contenteditable="true">${ITEMS}</td>
	<td contenteditable="true">${PRICE}</td>
	<td contenteditable="true">${TOTAL}</td>
	<td contenteditable="true">${VATTAX}</td>
	`;
	tbody.appendChild(tr);
	});
	}
	}
	});
	}
	});


	document.querySelector('#downloadButton').addEventListener('click', function (event) {
	event.preventDefault(); // Prevent the default action

	const tbody = document.querySelector('#dataTable tbody');
	const rows = Array.from(tbody.querySelectorAll('tr'));

	// Define your headers
	const headers = ['RECEIPTNUMBER', 'MERCHANTNAME', 'MERCHANTADDRESS', 'TRANSACTIONDATE', 'TRANSACTIONTIME', 'ITEMS', 'PRICE', 'TOTAL', 'VATTAX'];

	// Convert the content to CSV format
	const csvData = [headers.join(',')].concat(rows.map(row => {
	const cells = Array.from(row.querySelectorAll('td'));
	return cells.map(cell => cell.textContent.replace(/,/g, '.')).join(',');
	})).join('\n');

	// Send a POST request to the server with the CSV data
	fetch(index_url + 'download_csv', {
	method: 'POST',
	headers: {
	'Content-Type': 'text/csv'
	},
	body: csvData
	})
	.then(response => response.blob())
	.then(blob => {
	// Create a Blob URL and initiate the download
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = 'data.csv';
	a.click();
	});
	});
	</script>



	<!-- Include JavaScript resources -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
	<script src="/static/js/jquery.1.8.3.min.js"></script>
	<script src="/static/js/wow.min.js"></script>
	<script src="/static/js/featherlight.min.js"></script>
	<script src="/static/js/featherlight.gallery.min.js"></script>
	<script src="/static/js/jquery.enllax.min.js"></script>
	<script src="/static/js/jquery.scrollUp.min.js"></script>
	<script src="/static/js/jquery.easing.min.js"></script>
	<script src="/static/js/jquery.stickyNavbar.min.js"></script>
	<script src="/static/js/jquery.waypoints.min.js"></script>
	<script src="/static/js/images-loaded.min.js"></script>
	<script src="/static/js/lightbox.min.js"></script>
	<script src="/static/js/site.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>

	</body>

	</html>