| {% extends 'base.html' %}
|
|
|
| {% block content %}
|
| <div class="text-center my-4">
|
| <h1 class="text-3xl font-bold mb-4">Camera Detection Page</h1>
|
|
|
| <div class="flex flex-col items-center mb-4">
|
| <label for="imageInput"
|
| class="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm">
|
| <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
| xmlns="http://www.w3.org/2000/svg">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
| d="M14 14v5m0 0v-5m0 5h5m-5 0H9a4 4 0 01-4-4V5a2 2 0 012-2h8a2 2 0 012 2v4m0 6.586a2 2 0 11-2-2 2 2 0 012 2zM14 14V9a2 2 0 00-2-2H6m8 5h-3a2 2 0 01-2-2V6m5 5V6a2 2 0 00-2-2h-5">
|
| </path>
|
| </svg>
|
| <span>Upload Image</span>
|
| </label>
|
| <input type="file" id="imageInput" accept="image/*" class="hidden" />
|
| </div>
|
|
|
| <div class="flex justify-center items-center mb-4 h-80">
|
| <div id="imageContainer"
|
| class="relative w-96 h-80 flex justify-center items-center border-2 border-dashed border-blue-500 rounded">
|
| <img id="uploadedImage" src="#" alt="Uploaded Image" class="max-w-full max-h-full" style="display: none;">
|
| </div>
|
| </div>
|
|
|
| <div class="flex justify-center mb-4">
|
| <button id="predictBtn" class="p-2 bg-blue-500 text-white rounded">IS THERE A WILDFIRE?</button>
|
| </div>
|
|
|
| <div id="predictionResult" class="text-xl font-bold text-center mt-4">PREDICTION WILL BE SHOWN HERE</div>
|
|
|
| <div class="mt-4 flex items-center justify-center">
|
| <div class="w-96 bg-gray-300 h-8 rounded-lg relative">
|
| <div id="confidenceBar" class="h-full rounded-lg bg-green-500"></div>
|
| <div id="confidenceText" class="absolute inset-0 flex items-center justify-center text-white font-bold">
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="{{ url_for('static', filename='js/camera.js') }}"></script>
|
| {% endblock %} |
