Spaces:
Sleeping
Sleeping
| <!-- templates/index.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Plant Disease Detector</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .hero-section { | |
| background-color: #28a745; | |
| color: white; | |
| padding: 3rem 0; | |
| margin-bottom: 2rem; | |
| } | |
| .upload-container { | |
| background-color: white; | |
| border-radius: 10px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .instructions { | |
| background-color: #e9f7ef; | |
| border-left: 4px solid #28a745; | |
| padding: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .preview-container { | |
| max-width: 300px; | |
| max-height: 300px; | |
| overflow: hidden; | |
| margin: 0 auto; | |
| border: 2px dashed #dee2e6; | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #imagePreview { | |
| max-width: 100%; | |
| max-height: 100%; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero-section"> | |
| <div class="container text-center"> | |
| <h1 class="display-4">Plant Disease & Pest Detector</h1> | |
| <p class="lead">Upload an image of your plant to detect diseases and pests</p> | |
| </div> | |
| </div> | |
| <div class="container mb-5"> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| {% for message in messages %} | |
| <div class="alert alert-warning alert-dismissible fade show" role="alert"> | |
| {{ message }} | |
| <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="upload-container"> | |
| <div class="instructions"> | |
| <h5>How to use:</h5> | |
| <ol> | |
| <li>Select an image of your plant (preferably showing affected areas)</li> | |
| <li>Enter the name of the plant (e.g., Tomato, Rice, Potato)</li> | |
| <li>Click "Analyze Plant" to detect diseases or pests</li> | |
| </ol> | |
| </div> | |
| <form action="/analyze" method="post" enctype="multipart/form-data"> | |
| <div class="mb-4"> | |
| <div class="preview-container mb-3"> | |
| <img id="imagePreview" src="#" alt="Image Preview"> | |
| <span id="previewPlaceholder">Image preview will appear here</span> | |
| </div> | |
| <label for="plant_image" class="form-label">Upload Plant Image</label> | |
| <input class="form-control" type="file" id="plant_image" name="plant_image" accept="image/*" required onchange="previewImage(event)"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="plant_name" class="form-label">Plant Name</label> | |
| <input type="text" class="form-control" id="plant_name" name="plant_name" placeholder="e.g., Tomato, Rice, Potato" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="language" class="form-label">Response Language</label> | |
| <select class="form-control" id="language" name="language" required> | |
| <option value="English">English</option> | |
| <option value="Hindi">Hindi</option> | |
| <option value="Bengali">Bengali</option> | |
| <option value="Telugu">Telugu</option> | |
| <option value="Marathi">Marathi</option> | |
| <option value="Tamil">Tamil</option> | |
| <option value="Gujarati">Gujarati</option> | |
| <option value="Urdu">Urdu</option> | |
| <option value="Kannada">Kannada</option> | |
| <option value="Odia">Odia</option> | |
| <option value="Malayalam">Malayalam</option> | |
| </select> | |
| </div> | |
| <div class="d-grid"> | |
| <button type="submit" class="btn btn-success btn-lg">Analyze Plant</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-dark text-white text-center py-3"> | |
| <div class="container"> | |
| <p class="mb-0">Plant Disease Detector © 2025 | Powered by Gemini AI</p> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| function previewImage(event) { | |
| var reader = new FileReader(); | |
| reader.onload = function() { | |
| var output = document.getElementById('imagePreview'); | |
| output.src = reader.result; | |
| output.style.display = 'block'; | |
| document.getElementById('previewPlaceholder').style.display = 'none'; | |
| }; | |
| reader.readAsDataURL(event.target.files[0]); | |
| } | |
| </script> | |
| </body> | |
| </html> |