mathieub/easy-local-alpr
1
0
Fork 0
mirror of https://github.com/M4TH1EU/easy-local-alpr.git synced 2025-12-31 00:40:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

add grid size parameter

Browse Source
This commit is contained in:
Mathieu Broillet
2024-07-22 22:38:54 +02:00
parent 29e1d98294
commit 4e9e956589
3 changed files with 78 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
templates/index.html
View File

@@ -14,6 +14,25 @@
background-size: 20px 20px;
font-family: 'Google Sans', sans-serif;
}
.loading-circle {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #000;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
input[type="text"], input[type="number"] {
background-color: white;
color: black;
}
input[type="text"].dark, input[type="number"].dark {
background-color: #3b3b3b;
color: white;
}
</style>
</head>
<body class="bg-neutral-100 dark:bg-neutral-900 dark:text-white flex items-center justify-center min-h-screen p-4">
@@ -36,10 +55,21 @@
<span id="fileName" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>
</div>
</div>
<div>
<label for="grid_size" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid Size:</label>
<input type="number" id="grid_size" 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">
</div>
<div>
<label for="wanted_cells" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted Cells:</label>
<input type="text" id="wanted_cells" 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">
</div>
<div id="imagePreview" class="mt-4 hidden">
<img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg">
</div>
<button type="submit" 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">Upload</button>
<button id="submitButton" type="submit" 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 relative flex justify-center items-center">
<span>Upload</span>
<div id="loadingCircle" class="loading-circle absolute hidden"></div>
</button>
</form>
<div class="mt-6">
<h2 class="text-xl font-semibold mb-2 dark:text-gray-200">Response</h2>
@@ -73,12 +103,22 @@
function toggleLogo() {
const logo = document.getElementById('logo');
const logoDark = document.getElementById('logoDark');
const upload = document.getElementById('upload');
const gridSize = document.getElementById('grid_size');
const wantedCells = document.getElementById('wanted_cells');
if (prefersDarkScheme.matches) {
logo.style.display = 'none';
logoDark.style.display = 'block';
upload.classList.add('dark');
gridSize.classList.add('dark');
wantedCells.classList.add('dark');
} else {
logo.style.display = 'block';
logoDark.style.display = 'none';
upload.classList.remove('dark');
gridSize.classList.remove('dark');
wantedCells.classList.remove('dark');
}
}
@@ -89,6 +129,9 @@
$('#uploadForm').on('submit', function (e) {
e.preventDefault();
var formData = new FormData(this);
$('#submitButton').prop('disabled', true);
$('#loadingCircle').removeClass('hidden');
$.ajax({
url: '/v1/image/alpr',
type: 'POST',
@@ -101,6 +144,10 @@
error: function (xhr, status, error) {
var err = JSON.parse(xhr.responseText);
$('#responseBox').text(JSON.stringify(err, null, 2));
},
complete: function () {
$('#submitButton').prop('disabled', false);
$('#loadingCircle').addClass('hidden');
}
});
});