easy-local-alpr/templates/index.html

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

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Easy Local ALPR - API</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
            background-image: radial-gradient(#7c7c7c 1px, rgba(0, 0, 0, 0) 1px);
            background-size: 20px 20px;
            font-family: 'Google Sans', sans-serif;
        }

        .grid-cell {
            border: 2px solid #e5e7eb; /* Tailwind gray-200 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 0.5rem; /* Rounded corners */
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
            padding-top: 25%; /* More compact rectangular shape */
            position: relative;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow for modern look */
        }

        .grid-cell span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: 500; /* Semi-bold text */
        }

        .grid-cell.selected {
            background-color: #1f2937; /* Tailwind gray-800 */
            color: white;
            border-color: #1f2937; /* Match border color with background */
        }

        .grid-cell:hover {
            background-color: #9ca3af; /* Tailwind gray-400 for hover effect */
            color: white;
            border-color: #9ca3af; /* Match border color with hover effect */
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 8px; /* Adjust gap between cells */
            margin-top: 1rem;
        }
    </style>
</head>

<body class="bg-neutral-100 dark:bg-neutral-900 dark:text-white flex items-center justify-center min-h-screen p-4">
<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 hidden dark:block" id="logoDark"
         src="{{ url_for('static', filename='logo_white.webp') }}">
</div>

<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>
    <form class="space-y-4" id="serviceForm">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="service">Choose a
                service:</label>
            <select class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-neutral-800 dark:border-neutral-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    id="service" name="service" onchange="updateFormFields()">
                <option value="alpr">Plate Recognition (ALPR)</option>
                <option value="alpr_grid_debug">Grid Size Helper</option>
            </select>
        </div>

        <div class="service-fields hidden" id="alprFields">
            <div>
                <label for="upload_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose an
                    image:</label>
                <div class="mt-1 flex items-center">
                    <input type="file" id="upload_alpr" name="upload" accept="image/*" class="hidden"
                           onchange="updateFileName();">
                    <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">Select
                        file</label>
                    <span id="fileName_alpr" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>
                </div>
            </div>
            <div>
                <label for="grid_size_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid
                    Size:</label>
                <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:bg-neutral-800 dark:border-neutral-700">
            </div>
            <div>
                <label for="wanted_cells_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted
                    Cells:</label>
                <div id="gridContainer_alpr" class="grid-container"></div>
                <input type="hidden" id="wanted_cells_alpr" name="wanted_cells">
            </div>
            <input id="plate_image_alpr" name="plate_image_alpr" type="hidden" value="true">
        </div>

        <div class="service-fields hidden" id="alpr_grid_debugFields">
            <div>
                <label for="upload_alpr_grid_debug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose
                    an image:</label>
                <div class="mt-1 flex items-center">
                    <input type="file" id="upload_alpr_grid_debug" name="upload" accept="image/*" class="hidden"
                           onchange="updateFileName();">
                    <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">Select
                        file</label>
                    <span id="fileName_alpr_grid_debug" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>
                </div>
            </div>
            <div>
                <label for="grid_size_alpr_grid_debug"
                       class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid Size:</label>
                <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:bg-neutral-800 dark:border-neutral-700">
            </div>
            <div>
                <label for="wanted_cells_alpr_grid_debug"
                       class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted Cells:</label>
                <div id="gridContainer_alpr_grid_debug" class="grid-container"></div>
                <input type="hidden" id="wanted_cells_alpr_grid_debug" name="wanted_cells">
            </div>
        </div>

        <div id="imagePreview" class="mt-4 hidden">
            <label id="imagePreviewLabel"
                   class="block text sm font-medium text-gray-700 dark:text-gray-300">Preview:</label>
            <img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg">
        </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"
                id="submitButton" type="submit">Submit
        </button>
    </form>

    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2 dark:text-gray-200">
            Response
            <span class="text-sm font-normal" id="timer"></span>
        </h2>
        <pre class="bg-neutral-100 dark:bg-neutral-900 p-4 border rounded-lg text-sm text-gray-900 dark:text-gray-200 overflow-x-auto"
             id="responseBox"></pre>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function updateFormFields() {
        const service = document.getElementById('service').value;
        localStorage.setItem('selectedService', service);

        document.querySelectorAll('.service-fields').forEach(field => {
            field.classList.add('hidden');
            field.querySelectorAll('input, select').forEach(field => field.disabled = true);
        });

        const selectedServiceFields = document.getElementById(service + 'Fields');
        selectedServiceFields.classList.remove('hidden');
        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 = '';
                }
            });

        updateGrid(service);
    }

    function initializeForm() {
        const savedService = localStorage.getItem('selectedService');
        if (savedService) {
            document.getElementById('service').value = savedService;
            updateFormFields();
        }
    }

    function toggleLogo() {
        const logo = document.getElementById('logo');
        const logoDark = document.getElementById('logoDark');
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            logo.style.display = 'none';
            logoDark.style.display = 'block';
        } else {
            logo.style.display = 'block';
            logoDark.style.display = 'none';
        }
    }

    function updateFileName() {
        const service = document.getElementById('service').value;
        const input = document.getElementById('upload_' + service);
        const fileName = document.getElementById('fileName_' + service);
        const imagePreview = document.getElementById('imagePreview');
        const previewImage = document.getElementById('previewImage');
        const imagePreviewLabel = document.getElementById('imagePreviewLabel');

        fileName.textContent = input.files[0] ? input.files[0].name : '';
        imagePreviewLabel.textContent = 'Preview:';

        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImage.src = e.target.result;
                imagePreview.classList.remove('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function updateGrid(service) {
        const gridSize = parseInt(document.getElementById('grid_size_' + service).value);
        const gridContainer = document.getElementById('gridContainer_' + service);
        gridContainer.innerHTML = '';
        gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, minmax(0, 1fr))`;
        const wantedCellsInput = document.getElementById('wanted_cells_' + service);
        const selectedCells = wantedCellsInput.value ? wantedCellsInput.value.split(',').map(Number) : [];

        for (let i = 0; i < gridSize * gridSize; i++) {
            const cell = document.createElement('div');
            cell.classList.add('grid-cell');

            const cellSpan = document.createElement('span');
            cellSpan.textContent = i + 1;
            cell.appendChild(cellSpan);

            if (selectedCells.includes(i + 1)) cell.classList.add('selected');
            cell.addEventListener('click', () => {
                cell.classList.toggle('selected');
                updateWantedCells(service);
            });
            gridContainer.appendChild(cell);
        }
    }

    function updateWantedCells(service) {
        const gridContainer = document.getElementById('gridContainer_' + service);
        const selectedCells = [];
        gridContainer.querySelectorAll('.grid-cell.selected').forEach(cell => {
            selectedCells.push(cell.textContent);
        });
        document.getElementById('wanted_cells_' + service).value = selectedCells.join(',');
    }

    $(document).ready(function () {
        initializeForm();
        toggleLogo();
        window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', toggleLogo);

        $('#grid_size_alpr, #grid_size_alpr_grid_debug').on('input', function () {
            updateGrid(document.getElementById('service').value);
        });

        $('#serviceForm').on('submit', function (e) {
            e.preventDefault();
            const service = $('#service').val();
            const formData = new FormData(this);
            var url;
            if (service === 'alpr') {
                url = '/v1/image/alpr';
                type = 'POST';
            } else if (service === 'alpr_grid_debug') {
                url = '/v1/image/alpr_grid_debug';
                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>');

            const startTime = Date.now();

            $.ajax({
                url: url,
                type: type,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    const endTime = Date.now();
                    const elapsedTime = endTime - startTime;
                    $('#responseBox').text(JSON.stringify(data, null, 2));
                    $('#timer').text(`(${elapsedTime} ms)`);
                    $('#submitButton').prop('disabled', false).text('Submit');

                    if (data.image) {
                        $('#previewImage').attr('src', data.image);
                        $('#imagePreview').removeClass('hidden');

                        if (service === 'alpr') $('#imagePreviewLabel').text('Identified plate image:');

                    } else {
                        updateFileName();
                    }
                },
                error: function (xhr) {
                    const endTime = Date.now();
                    const elapsedTime = endTime - startTime;
                    const err = JSON.parse(xhr.responseText);
                    $('#responseBox').text(JSON.stringify(err, null, 2));
                    $('#timer').text(`(${elapsedTime} ms)`);
                    $('#submitButton').prop('disabled', false).text('Submit');
                }
            });
        });
    });
</script>
</body>

</html>
added nice webui on / 2024-07-17 21:14:01 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
some refactor 2024-08-04 13:09:19 +02:00
added nice webui on / 2024-07-17 21:14:01 +02:00			`<head>`
			`<meta charset="UTF-8">`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<meta content="width=device-width, initial-scale=1.0" name="viewport">`
change html page title 2024-07-19 21:43:47 +02:00			`<title>Easy Local ALPR - API</title>`
added nice webui on / 2024-07-17 21:14:01 +02:00			`<script src="https://cdn.tailwindcss.com"></script>`
			`<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">`
			`<style>`
			`body {`
			`background-color: #f0f2f5;`
improved webui 2024-07-17 22:02:50 +02:00			`background-image: radial-gradient(#7c7c7c 1px, rgba(0, 0, 0, 0) 1px);`
added nice webui on / 2024-07-17 21:14:01 +02:00			`background-size: 20px 20px;`
improve response webui 2024-07-19 21:42:16 +02:00			`font-family: 'Google Sans', sans-serif;`
added nice webui on / 2024-07-17 21:14:01 +02:00			`}`
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00
			`.grid-cell {`
			`border: 2px solid #e5e7eb; /* Tailwind gray-200 */`
			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
			`cursor: pointer;`
			`border-radius: 0.5rem; /* Rounded corners */`
			`transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* Smooth transition */`
			`padding-top: 25%; /* More compact rectangular shape */`
			`position: relative;`
			`overflow: hidden;`
			`box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow for modern look */`
			`}`

			`.grid-cell span {`
			`position: absolute;`
			`top: 50%;`
			`left: 50%;`
			`transform: translate(-50%, -50%);`
			`font-weight: 500; /* Semi-bold text */`
			`}`

			`.grid-cell.selected {`
			`background-color: #1f2937; /* Tailwind gray-800 */`
			`color: white;`
			`border-color: #1f2937; /* Match border color with background */`
			`}`

			`.grid-cell:hover {`
			`background-color: #9ca3af; /* Tailwind gray-400 for hover effect */`
			`color: white;`
			`border-color: #9ca3af; /* Match border color with hover effect */`
			`}`

			`.grid-container {`
			`display: grid;`
			`grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));`
			`gap: 8px; /* Adjust gap between cells */`
			`margin-top: 1rem;`
			`}`
added nice webui on / 2024-07-17 21:14:01 +02:00			`</style>`
			`</head>`
some refactor 2024-08-04 13:09:19 +02:00
improve response webui 2024-07-19 21:42:16 +02:00			`<body class="bg-neutral-100 dark:bg-neutral-900 dark:text-white flex items-center justify-center min-h-screen p-4">`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<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 hidden dark:block" id="logoDark"`
			`src="{{ url_for('static', filename='logo_white.webp') }}">`
			`</div>`

some refactor 2024-08-04 13:09:19 +02:00			`<div class="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-lg w-full max-w-xl mt-16">`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<h1 class="text-2xl font-bold mb-4 text-center dark:text-gray-200">Select Service</h1>`
			`<form class="space-y-4" id="serviceForm">`
			`<div>`
			`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="service">Choose a`
			`service:</label>`
			`<select class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white dark:bg-neutral-800 dark:border-neutral-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"`
			`id="service" name="service" onchange="updateFormFields()">`
			`<option value="alpr">Plate Recognition (ALPR)</option>`
			`<option value="alpr_grid_debug">Grid Size Helper</option>`
			`</select>`
			`</div>`
added nice webui on / 2024-07-17 21:14:01 +02:00
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<div class="service-fields hidden" id="alprFields">`
added nice webui on / 2024-07-17 21:14:01 +02:00			`<div>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<label for="upload_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose an`
			`image:</label>`
added nice webui on / 2024-07-17 21:14:01 +02:00			`<div class="mt-1 flex items-center">`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<input type="file" id="upload_alpr" name="upload" accept="image/*" class="hidden"`
			`onchange="updateFileName();">`
			`<label for="upload_alpr"`
some refactor 2024-08-04 13:09:19 +02:00			`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`
			`file</label>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<span id="fileName_alpr" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>`
added nice webui on / 2024-07-17 21:14:01 +02:00			`</div>`
			`</div>`
add grid size parameter 2024-07-22 22:38:54 +02:00			`<div>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<label for="grid_size_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid`
			`Size:</label>`
			`<input type="number" id="grid_size_alpr" name="grid_size" value="3"`
some refactor 2024-08-04 13:09:19 +02:00			`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">`
add grid size parameter 2024-07-22 22:38:54 +02:00			`</div>`
			`<div>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<label for="wanted_cells_alpr" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted`
			`Cells:</label>`
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00			`<div id="gridContainer_alpr" class="grid-container"></div>`
			`<input type="hidden" id="wanted_cells_alpr" name="wanted_cells">`
add grid size parameter 2024-07-22 22:38:54 +02:00			`</div>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<input id="plate_image_alpr" name="plate_image_alpr" type="hidden" value="true">`
			`</div>`

			`<div class="service-fields hidden" id="alpr_grid_debugFields">`
			`<div>`
			`<label for="upload_alpr_grid_debug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Choose`
some refactor 2024-08-04 13:09:19 +02:00			`an image:</label>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<div class="mt-1 flex items-center">`
			`<input type="file" id="upload_alpr_grid_debug" name="upload" accept="image/*" class="hidden"`
			`onchange="updateFileName();">`
			`<label for="upload_alpr_grid_debug"`
some refactor 2024-08-04 13:09:19 +02:00			`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`
			`file</label>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<span id="fileName_alpr_grid_debug" class="ml-2 text-sm text-gray-600 dark:text-gray-300"></span>`
			`</div>`
			`</div>`
			`<div>`
			`<label for="grid_size_alpr_grid_debug"`
some refactor 2024-08-04 13:09:19 +02:00			`class="block text-sm font-medium text-gray-700 dark:text-gray-300">Grid Size:</label>`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<input type="number" id="grid_size_alpr_grid_debug" name="grid_size" value="3"`
some refactor 2024-08-04 13:09:19 +02:00			`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">`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`</div>`
			`<div>`
			`<label for="wanted_cells_alpr_grid_debug"`
some refactor 2024-08-04 13:09:19 +02:00			`class="block text-sm font-medium text-gray-700 dark:text-gray-300">Wanted Cells:</label>`
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00			`<div id="gridContainer_alpr_grid_debug" class="grid-container"></div>`
			`<input type="hidden" id="wanted_cells_alpr_grid_debug" name="wanted_cells">`
added nice webui on / 2024-07-17 21:14:01 +02:00			`</div>`
			`</div>`

add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<div id="imagePreview" class="mt-4 hidden">`
			`<label id="imagePreviewLabel"`
			`class="block text sm font-medium text-gray-700 dark:text-gray-300">Preview:</label>`
			`<img id="previewImage" src="#" alt="Preview" class="max-w-full h-auto rounded-lg">`
			`</div>`
added nice webui on / 2024-07-17 21:14:01 +02:00
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<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"`
some refactor 2024-08-04 13:09:19 +02:00			`id="submitButton" type="submit">Submit`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`</button>`
			`</form>`
some refactor 2024-08-04 13:09:19 +02:00
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<div class="mt-6">`
			`<h2 class="text-xl font-semibold mb-2 dark:text-gray-200">`
			`Response`
			`<span class="text-sm font-normal" id="timer"></span>`
			`</h2>`
			`<pre class="bg-neutral-100 dark:bg-neutral-900 p-4 border rounded-lg text-sm text-gray-900 dark:text-gray-200 overflow-x-auto"`
			`id="responseBox"></pre>`
			`</div>`
			`</div>`
added nice webui on / 2024-07-17 21:14:01 +02:00
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>`
			`<script>`
			`function updateFormFields() {`
some refactor 2024-08-04 13:09:19 +02:00			`const service = document.getElementById('service').value;`
			`localStorage.setItem('selectedService', service);`
added nice webui on / 2024-07-17 21:14:01 +02:00
some refactor 2024-08-04 13:09:19 +02:00			`document.querySelectorAll('.service-fields').forEach(field => {`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`field.classList.add('hidden');`
			`field.querySelectorAll('input, select').forEach(field => field.disabled = true);`
			`});`

some refactor 2024-08-04 13:09:19 +02:00			`const selectedServiceFields = document.getElementById(service + 'Fields');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`selectedServiceFields.classList.remove('hidden');`
			`selectedServiceFields.querySelectorAll('input, select').forEach(field => field.disabled = false);`
some refactor 2024-08-04 13:09:19 +02:00
			`['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 = '';`
			`}`
			`});`
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00
			`updateGrid(service);`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`}`

			`function initializeForm() {`
some refactor 2024-08-04 13:09:19 +02:00			`const savedService = localStorage.getItem('selectedService');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`if (savedService) {`
			`document.getElementById('service').value = savedService;`
			`updateFormFields();`
			`}`
			`}`

			`function toggleLogo() {`
			`const logo = document.getElementById('logo');`
			`const logoDark = document.getElementById('logoDark');`
some refactor 2024-08-04 13:09:19 +02:00			`if (window.matchMedia("(prefers-color-scheme: dark)").matches) {`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`logo.style.display = 'none';`
			`logoDark.style.display = 'block';`
			`} else {`
			`logo.style.display = 'block';`
			`logoDark.style.display = 'none';`
added nice webui on / 2024-07-17 21:14:01 +02:00			`}`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`}`
added nice webui on / 2024-07-17 21:14:01 +02:00
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`function updateFileName() {`
some refactor 2024-08-04 13:09:19 +02:00			`const service = document.getElementById('service').value;`
			`const input = document.getElementById('upload_' + service);`
			`const fileName = document.getElementById('fileName_' + service);`
			`const imagePreview = document.getElementById('imagePreview');`
			`const previewImage = document.getElementById('previewImage');`
			`const imagePreviewLabel = document.getElementById('imagePreviewLabel');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00
			`fileName.textContent = input.files[0] ? input.files[0].name : '';`
			`imagePreviewLabel.textContent = 'Preview:';`

			`if (input.files && input.files[0]) {`
some refactor 2024-08-04 13:09:19 +02:00			`const reader = new FileReader();`
			`reader.onload = (e) => {`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`previewImage.src = e.target.result;`
			`imagePreview.classList.remove('hidden');`
improved webui 2024-07-17 22:02:50 +02:00			`}`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`reader.readAsDataURL(input.files[0]);`
improved webui 2024-07-17 22:02:50 +02:00			`}`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`}`
improved webui 2024-07-17 22:02:50 +02:00
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00			`function updateGrid(service) {`
			`const gridSize = parseInt(document.getElementById('grid_size_' + service).value);`
			`const gridContainer = document.getElementById('gridContainer_' + service);`
			`gridContainer.innerHTML = '';`
			gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, minmax(0, 1fr))`;
			`const wantedCellsInput = document.getElementById('wanted_cells_' + service);`
			`const selectedCells = wantedCellsInput.value ? wantedCellsInput.value.split(',').map(Number) : [];`

			`for (let i = 0; i < gridSize * gridSize; i++) {`
			`const cell = document.createElement('div');`
			`cell.classList.add('grid-cell');`

			`const cellSpan = document.createElement('span');`
			`cellSpan.textContent = i + 1;`
			`cell.appendChild(cellSpan);`

			`if (selectedCells.includes(i + 1)) cell.classList.add('selected');`
			`cell.addEventListener('click', () => {`
			`cell.classList.toggle('selected');`
			`updateWantedCells(service);`
			`});`
			`gridContainer.appendChild(cell);`
			`}`
			`}`

			`function updateWantedCells(service) {`
			`const gridContainer = document.getElementById('gridContainer_' + service);`
			`const selectedCells = [];`
			`gridContainer.querySelectorAll('.grid-cell.selected').forEach(cell => {`
			`selectedCells.push(cell.textContent);`
			`});`
			`document.getElementById('wanted_cells_' + service).value = selectedCells.join(',');`
			`}`

add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`$(document).ready(function () {`
some refactor 2024-08-04 13:09:19 +02:00			`initializeForm();`
			`toggleLogo();`
			`window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', toggleLogo);`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00
add grid UI for wanted_cells 2024-08-04 19:49:41 +02:00			`$('#grid_size_alpr, #grid_size_alpr_grid_debug').on('input', function () {`
			`updateGrid(document.getElementById('service').value);`
			`});`

add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`$('#serviceForm').on('submit', function (e) {`
			`e.preventDefault();`
some refactor 2024-08-04 13:09:19 +02:00			`const service = $('#service').val();`
			`const formData = new FormData(this);`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`var url;`
			`if (service === 'alpr') {`
			`url = '/v1/image/alpr';`
			`type = 'POST';`
			`} else if (service === 'alpr_grid_debug') {`
			`url = '/v1/image/alpr_grid_debug';`
			`type = 'POST';`
			`}`
some refactor 2024-08-04 13:09:19 +02:00			`$('#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>');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00
some refactor 2024-08-04 13:09:19 +02:00			`const startTime = Date.now();`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00
			`$.ajax({`
			`url: url,`
			`type: type,`
			`data: formData,`
			`processData: false,`
			`contentType: false,`
			`success: function (data) {`
some refactor 2024-08-04 13:09:19 +02:00			`const endTime = Date.now();`
			`const elapsedTime = endTime - startTime;`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`$('#responseBox').text(JSON.stringify(data, null, 2));`
			$('#timer').text(`(${elapsedTime} ms)`);
some refactor 2024-08-04 13:09:19 +02:00			`$('#submitButton').prop('disabled', false).text('Submit');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00
			`if (data.image) {`
			`$('#previewImage').attr('src', data.image);`
			`$('#imagePreview').removeClass('hidden');`

some refactor 2024-08-04 13:09:19 +02:00			`if (service === 'alpr') $('#imagePreviewLabel').text('Identified plate image:');`

add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`} else {`
			`updateFileName();`
added nice webui on / 2024-07-17 21:14:01 +02:00			`}`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`},`
some refactor 2024-08-04 13:09:19 +02:00			`error: function (xhr) {`
			`const endTime = Date.now();`
			`const elapsedTime = endTime - startTime;`
			`const err = JSON.parse(xhr.responseText);`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`$('#responseBox').text(JSON.stringify(err, null, 2));`
			$('#timer').text(`(${elapsedTime} ms)`);
some refactor 2024-08-04 13:09:19 +02:00			`$('#submitButton').prop('disabled', false).text('Submit');`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`}`
added nice webui on / 2024-07-17 21:14:01 +02:00			`});`
			`});`
add grid_debug endpoint, previews, try/except to avoid errors 2024-08-04 12:31:51 +02:00			`});`
			`</script>`
added nice webui on / 2024-07-17 21:14:01 +02:00			`</body>`
some refactor 2024-08-04 13:09:19 +02:00
added nice webui on / 2024-07-17 21:14:01 +02:00			`</html>`