anpr / templates /result.html
Ayush
Added files
f02eb0f
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ANPR Result</title>
<script src="https://www.google.com/search?q=https://cdn.tailwindcss.com"></script>
<link href="https://www.google.com/search?q=https://fonts.googleapis.com/css2%3Ffamily%3DInter:wght%40400%3B500%3B600%3B700%26display%3Dswap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.result-image {
max-width: 100%;
height: auto;
max-height: 70vh;
margin: 10px auto;
display: block;
}
</style>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-semibold mb-6 text-center text-gray-700">ANPR Processing Result</h1>
{% if error_message %}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
<strong class="font-bold">Error:</strong>
<span class="block sm:inline">{{ error_message }}</span>
</div>
{% else %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<h2 class="text-xl font-medium mb-2 text-gray-600">Original Image</h2>
{% if original_image_url %}
<img src="{{ original_image_url }}" alt="Original Uploaded Image" class="result-image rounded-md border border-gray-300">
{% else %}
<p class="text-gray-500">Original image not available.</p>
{% endif %}
</div>
<div>
<h2 class="text-xl font-medium mb-2 text-gray-600">Processed Image</h2>
{% if result_image_url %}
<img src="{{ result_image_url }}" alt="Processed Image with Detections" class="result-image rounded-md border border-gray-300">
{% else %}
<p class="text-gray-500">Processed image not available.</p>
{% endif %}
</div>
</div>
<div class="mb-6">
<h2 class="text-xl font-medium mb-2 text-gray-600">Detected Plate Texts:</h2>
{% if detected_texts %}
<ul class="list-disc list-inside bg-gray-50 p-4 rounded-md border border-gray-200">
{% for text in detected_texts %}
<li class="text-lg text-gray-800 mb-1 font-mono">{{ text }}</li>
{% endfor %}
</ul>
{% else %}
<p class="text-gray-500 bg-gray-50 p-4 rounded-md border border-gray-200">No license plates detected or text recognized.</p>
{% endif %}
</div>
{% endif %}
<div class="text-center mt-6">
<a href="{{ url_for('upload_file') }}" class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition duration-300">Upload Another Image</a>
</div>
</div>
</body>
</html>