mathieu/easy-local-alpr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

some refactor

Browse Source
This commit is contained in:
Mathieu Broillet 2024-08-04 13:09:19 +02:00
parent 9cf457511e
commit 8d5c55fb88
Signed by: mathieu
GPG Key ID: C4A6176ABC6B2DFC
1 changed files with 61 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
templates/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Easy Local ALPR - API</title> <title>Easy Local ALPR - API</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<!-- Include Google Sans font -->
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
@ -16,15 +16,15 @@
} }
</style> </style>
</head> </head>
<body class="bg-neutral-100 dark:bg-neutral-900 dark:text-white flex items-center justify-center min-h-screen p-4"> <body class="bg-neutral-100 dark:bg-neutral-900 dark:text-white flex items-center justify-center min-h-screen p-4">
<!-- Logo -->
<div class="absolute top-4 left-4 z-50"> <div class="absolute top-4 left-4 z-50">
<img alt="Logo" class="h-12 dark:hidden" id="logo" src="{{ url_for('static', filename='logo_black.webp') }}"> <img alt="Logo" class="h-12 dark:hidden" id="logo" src="{{ url_for('static', filename='logo_black.webp') }}">
<img alt="Logo" class="h-12 hidden dark:block" id="logoDark" <img alt="Logo" class="h-12 hidden dark:block" id="logoDark"
src="{{ url_for('static', filename='logo_white.webp') }}"> src="{{ url_for('static', filename='logo_white.webp') }}">
</div> </div>
<div class="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-lg w-full max-w-md mt-16"> <div class="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-lg w-full max-w-xl mt-16">
<h1 class="text-2xl font-bold mb-4 text-center dark:text-gray-200">Select Service</h1> <h1 class="text-2xl font-bold mb-4 text-center dark:text-gray-200">Select Service</h1>
<form class="space-y-4" id="serviceForm"> <form class="space-y-4" id="serviceForm">
<div> <div>
@ -37,7 +37,6 @@
</select> </select>
</div> </div>
<!-- Plate Recognition (ALPR) Fields -->
<div class="service-fields hidden" id="alprFields"> <div class="service-fields hidden" id="alprFields">
<div> <div>
<label for="upload_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose an <label for="upload_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose an
@ -46,9 +45,8 @@
<input type="file" id="upload_alpr" name="upload" accept="image/*" class="hidden" <input type="file" id="upload_alpr" name="upload" accept="image/*" class="hidden"
onchange="updateFileName();"> onchange="updateFileName();">
<label for="upload_alpr" <label for="upload_alpr"
class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-400 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-600"> class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-400 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-600">Select
Select file file</label>
</label>
<span id="fileName_alpr" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span> <span id="fileName_alpr" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>
</div> </div>
</div> </div>
@ -56,47 +54,41 @@
<label for="grid_size_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid <label for="grid_size_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid
Size:</label> Size:</label>
<input type="number" id="grid_size_alpr" name="grid_size" value="3" <input type="number" id="grid_size_alpr" name="grid_size" value="3"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark dark:bg-neutral-800 dark:border-neutral-700"> class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-neutral-800 dark:border-neutral-700">
</div> </div>
<div> <div>
<label for="wanted_cells_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted <label for="wanted_cells_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted
Cells:</label> Cells:</label>
<input type="text" id="wanted_cells_alpr" name="wanted_cells" value="" <input type="text" id="wanted_cells_alpr" name="wanted_cells"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark dark:bg-neutral-800 dark:border-neutral-700"> class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-neutral-800 dark:border-neutral-700">
</div> </div>
<!-- Hidden field to show plate image from the response in webui -->
<input id="plate_image_alpr" name="plate_image_alpr" type="hidden" value="true"> <input id="plate_image_alpr" name="plate_image_alpr" type="hidden" value="true">
</div> </div>
<! -- Grid Size Helper Fields -->
<div class="service-fields hidden" id="alpr_grid_debugFields"> <div class="service-fields hidden" id="alpr_grid_debugFields">
<div> <div>
<label for="upload_alpr_grid_debug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose <label for="upload_alpr_grid_debug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose
an an image:</label>
image:</label>
<div class="mt-1 flex items-center"> <div class="mt-1 flex items-center">
<input type="file" id="upload_alpr_grid_debug" name="upload" accept="image/*" class="hidden" <input type="file" id="upload_alpr_grid_debug" name="upload" accept="image/*" class="hidden"
onchange="updateFileName();"> onchange="updateFileName();">
<label for="upload_alpr_grid_debug" <label for="upload_alpr_grid_debug"
class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-400 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-600"> class="cursor-pointer inline-flex items-center justify-center px-4 py-2 border border-gray-400 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-600">Select
Select file file</label>
</label>
<span id="fileName_alpr_grid_debug" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span> <span id="fileName_alpr_grid_debug" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>
</div> </div>
</div> </div>
<div> <div>
<label for="grid_size_alpr_grid_debug" <label for="grid_size_alpr_grid_debug"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid Size:</label>
Size:</label>
<input type="number" id="grid_size_alpr_grid_debug" name="grid_size" value="3" <input type="number" id="grid_size_alpr_grid_debug" name="grid_size" value="3"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark dark:bg-neutral-800 dark:border-neutral-700"> class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-neutral-800 dark:border-neutral-700">
</div> </div>
<div> <div>
<label for="wanted_cells_alpr_grid_debug" <label for="wanted_cells_alpr_grid_debug"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted Cells:</label>
Cells:</label> <input type="text" id="wanted_cells_alpr_grid_debug" name="wanted_cells"
<input type="text" id="wanted_cells_alpr_grid_debug" name="wanted_cells" value="" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-neutral-800 dark:border-neutral-700">
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark dark:bg-neutral-800 dark:border-neutral-700">
</div> </div>
</div> </div>
@ -107,11 +99,10 @@
</div> </div>
<button class="w-full py-2 px-4 bg-black text-white font-semibold rounded-md shadow-sm hover:bg-neutral-900 dark:bg-neutral-900 dark:hover:bg-neutral-950" <button class="w-full py-2 px-4 bg-black text-white font-semibold rounded-md shadow-sm hover:bg-neutral-900 dark:bg-neutral-900 dark:hover:bg-neutral-950"
id="submitButton" id="submitButton" type="submit">Submit
type="submit">
Submit
</button> </button>
</form> </form>
<div class="mt-6"> <div class="mt-6">
<h2 class="text-xl font-semibold mb-2 dark:text-gray-200"> <h2 class="text-xl font-semibold mb-2 dark:text-gray-200">
Response Response
@ -125,57 +116,42 @@
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script> <script>
function updateFormFields() { function updateFormFields() {
var service = document.getElementById('service').value; const service = document.getElementById('service').value;
localStorage.setItem('selectedService', service);
localStorage.setItem('selectedService', service); // Save the selected service document.querySelectorAll('.service-fields').forEach(field => {
elementsIdToEmpty = ['responseBox', 'timer', 'fileName_' + service, 'previewImage', 'imagePreview', 'upload_' + service];
elementsIdToEmpty.forEach(element => {
element = document.getElementById(element);
console.log(element.tagName);
switch (element.tagName) {
case 'DIV':
element.classList.add('hidden');
break;
case 'INPUT':
element.value = '';
break;
case 'SPAN': // fallthrough
case 'PRE':
element.textContent = '';
break;
case 'IMG':
element.src = '';
break;
}
});
var allServicesFields = document.getElementById('serviceForm').querySelectorAll('.service-fields');
allServicesFields.forEach(field => {
field.classList.add('hidden'); field.classList.add('hidden');
field.querySelectorAll('input, select').forEach(field => field.disabled = true); field.querySelectorAll('input, select').forEach(field => field.disabled = true);
}); });
var selectedServiceFields = document.getElementById(service + 'Fields'); const selectedServiceFields = document.getElementById(service + 'Fields');
selectedServiceFields.classList.remove('hidden'); selectedServiceFields.classList.remove('hidden');
selectedServiceFields.querySelectorAll('input, select').forEach(field => field.disabled = false); selectedServiceFields.querySelectorAll('input, select').forEach(field => field.disabled = false);
['responseBox', 'timer', 'fileName_' + service, 'previewImage', 'imagePreview', 'upload_' + service]
.forEach(id => {
const element = document.getElementById(id);
if (element) {
if (element.tagName === 'DIV') element.classList.add('hidden');
if (element.tagName === 'INPUT') element.value = '';
if (element.tagName === 'SPAN' || element.tagName === 'PRE') element.textContent = '';
if (element.tagName === 'IMG') element.src = '';
}
});
} }
function initializeForm() { function initializeForm() {
var savedService = localStorage.getItem('selectedService'); const savedService = localStorage.getItem('selectedService');
if (savedService) { if (savedService) {
document.getElementById('service').value = savedService; document.getElementById('service').value = savedService;
updateFormFields(); updateFormFields();
} }
} }
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
function toggleLogo() { function toggleLogo() {
const logo = document.getElementById('logo'); const logo = document.getElementById('logo');
const logoDark = document.getElementById('logoDark'); const logoDark = document.getElementById('logoDark');
if (prefersDarkScheme.matches) { if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
logo.style.display = 'none'; logo.style.display = 'none';
logoDark.style.display = 'block'; logoDark.style.display = 'block';
} else { } else {
@ -184,42 +160,36 @@
} }
} }
toggleLogo();
prefersDarkScheme.addEventListener('change', toggleLogo);
function updateFileName() { function updateFileName() {
var service = document.getElementById('service').value; const service = document.getElementById('service').value;
const input = document.getElementById('upload_' + service);
var input = document.getElementById('upload_' + service); const fileName = document.getElementById('fileName_' + service);
var fileName = document.getElementById('fileName' + '_' + service); const imagePreview = document.getElementById('imagePreview');
var imagePreview = document.getElementById('imagePreview'); const previewImage = document.getElementById('previewImage');
var previewImage = document.getElementById('previewImage'); const imagePreviewLabel = document.getElementById('imagePreviewLabel');
var imagePreviewLabel = document.getElementById('imagePreviewLabel');
fileName.textContent = input.files[0] ? input.files[0].name : ''; fileName.textContent = input.files[0] ? input.files[0].name : '';
imagePreviewLabel.textContent = 'Preview:'; imagePreviewLabel.textContent = 'Preview:';
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => {
reader.onload = function (e) {
previewImage.src = e.target.result; previewImage.src = e.target.result;
imagePreview.classList.remove('hidden'); imagePreview.classList.remove('hidden');
} }
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);
} }
} }
$(document).ready(function () { $(document).ready(function () {
initializeForm(); // Initialize the form on page load initializeForm();
toggleLogo();
window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', toggleLogo);
$('#serviceForm').on('submit', function (e) { $('#serviceForm').on('submit', function (e) {
e.preventDefault(); e.preventDefault();
var service = $('#service').val(); const service = $('#service').val();
var formData = new FormData(this); const formData = new FormData(this);
var url; var url;
if (service === 'alpr') { if (service === 'alpr') {
url = '/v1/image/alpr'; url = '/v1/image/alpr';
@ -228,12 +198,9 @@
url = '/v1/image/alpr_grid_debug'; url = '/v1/image/alpr_grid_debug';
type = 'POST'; type = 'POST';
} }
$('#submitButton').prop('disabled', true).html('<svg class="animate-spin h-5 w-5 text-white mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 00-8 4.9l1.5 1A8 8 0 0112 4V2z"></path></svg>');
var $submitButton = $('#submitButton'); const startTime = Date.now();
$submitButton.prop('disabled', true);
$submitButton.html('<svg class="animate-spin h-5 w-5 text-white mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 00-8 4.9l1.5 1A8 8 0 0112 4V2z"></path></svg>');
var startTime = Date.now();
$.ajax({ $.ajax({
url: url, url: url,
@ -242,38 +209,34 @@
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function (data) {
var endTime = Date.now(); const endTime = Date.now();
var elapsedTime = endTime - startTime; const elapsedTime = endTime - startTime;
$('#responseBox').text(JSON.stringify(data, null, 2)); $('#responseBox').text(JSON.stringify(data, null, 2));
$('#timer').text(`(${elapsedTime} ms)`); $('#timer').text(`(${elapsedTime} ms)`);
$submitButton.prop('disabled', false); $('#submitButton').prop('disabled', false).text('Submit');
$submitButton.text('Submit');
if (data.image) { if (data.image) {
$('#previewImage').attr('src', data.image); $('#previewImage').attr('src', data.image);
$('#imagePreview').removeClass('hidden'); $('#imagePreview').removeClass('hidden');
if (service === 'alpr') { if (service === 'alpr') $('#imagePreviewLabel').text('Identified plate image:');
$('#imagePreviewLabel')[0].textContent = 'Identified plate image:';
}
} else { } else {
updateFileName(); updateFileName();
} }
}, },
error: function (xhr, status, error) { error: function (xhr) {
var endTime = Date.now(); const endTime = Date.now();
var elapsedTime = endTime - startTime; const elapsedTime = endTime - startTime;
const err = JSON.parse(xhr.responseText);
var err = JSON.parse(xhr.responseText);
$('#responseBox').text(JSON.stringify(err, null, 2)); $('#responseBox').text(JSON.stringify(err, null, 2));
$('#timer').text(`(${elapsedTime} ms)`); $('#timer').text(`(${elapsedTime} ms)`);
$submitButton.prop('disabled', false); $('#submitButton').prop('disabled', false).text('Submit');
$submitButton.text('Submit');
} }
}); });
}); });
}); });
</script> </script>
</body> </body>
</html> </html>