Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wheat Disease Detection</title> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="background-overlay"></div> | |
| <div class="container d-flex align-items-center justify-content-center min-vh-100"> | |
| <div class="glass-card p-5 text-center"> | |
| <div class="mb-4"> | |
| <img src="{{ url_for('static', filename='wheat-logo-new.png') }}" alt="Logo" class="logo-img mb-3" onerror="this.style.display='none'"> | |
| <h1 class="display-4 fw-bold text-white">Wheat Guardian</h1> | |
| <p class="lead text-white-50">Advanced AI Disease Detection</p> | |
| </div> | |
| <form action="/predict" method="post" enctype="multipart/form-data" id="uploadForm"> | |
| <div class="upload-zone mb-4" id="dropZone"> | |
| <i class="fas fa-cloud-upload-alt fa-3x text-white mb-3"></i> | |
| <p class="text-white mb-2">Drag & Drop your image here</p> | |
| <p class="text-white-50 small">or</p> | |
| <label for="fileInput" class="btn btn-outline-light btn-sm mt-2">Browse Files</label> | |
| <input type="file" id="fileInput" name="file" accept="image/*" hidden required> | |
| <p id="fileName" class="text-white mt-2 small"></p> | |
| </div> | |
| <button type="submit" class="btn btn-gradient btn-lg w-100" id="submitBtn"> | |
| <span id="btnText">Analyze Crop</span> | |
| <span id="loadingSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| const dropZone = document.getElementById('dropZone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const fileName = document.getElementById('fileName'); | |
| const uploadForm = document.getElementById('uploadForm'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const btnText = document.getElementById('btnText'); | |
| const loadingSpinner = document.getElementById('loadingSpinner'); | |
| // Drag & Drop functionality | |
| dropZone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropZone.classList.add('drag-over'); | |
| }); | |
| dropZone.addEventListener('dragleave', () => { | |
| dropZone.classList.remove('drag-over'); | |
| }); | |
| dropZone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropZone.classList.remove('drag-over'); | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0) { | |
| fileInput.files = files; | |
| updateFileName(); | |
| } | |
| }); | |
| fileInput.addEventListener('change', updateFileName); | |
| function updateFileName() { | |
| if (fileInput.files.length > 0) { | |
| fileName.textContent = fileInput.files[0].name; | |
| } else { | |
| fileName.textContent = ''; | |
| } | |
| } | |
| // Form Submit Animation | |
| uploadForm.addEventListener('submit', () => { | |
| submitBtn.disabled = true; | |
| btnText.textContent = 'Analyzing...'; | |
| loadingSpinner.classList.remove('d-none'); | |
| }); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |