Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Paddy Disease Prediction</title> | |
| <!-- Link to the updated p.css file --> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='p.css') }}"> | |
| <!-- Added Google Font 'Poppins' for a more modern look --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Paddy Crop Disease Prediction</h1> | |
| <p>Empowering Farmers with AI for a Healthier Harvest</p> | |
| </header> | |
| <main class="content"> | |
| <div class="upload-section"> | |
| <h2>Upload a Leaf Image</h2> | |
| <p>Simply upload an image of a paddy leaf, and our AI will identify potential diseases.</p> | |
| <form action="/predict" method="post" enctype="multipart/form-data"> | |
| <input type="file" name="file" id="file" class="inputfile" required> | |
| <!-- Added a span to style the filename after selection --> | |
| <label for="file">Choose a file</label> | |
| <span id="file-chosen">No file chosen</span> | |
| <button type="submit">Diagnose Leaf</button> | |
| </form> | |
| </div> | |
| {% if prediction %} | |
| <div class="result-section"> | |
| <h2>Diagnosis Result</h2> | |
| <div class="result-content"> | |
| <div class="result-image"> | |
| <img src="data:image/jpeg;base64,{{ image_data }}" alt="Uploaded Leaf"> | |
| </div> | |
| <div class="result-details"> | |
| <p><strong>Detected Disease:</strong> <span class="prediction">{{ prediction }}</span></p> | |
| <p><strong>Confidence:</strong> <span class="confidence">{{ confidence }}%</span></p> | |
| <p class="disclaimer">This is an AI-powered diagnosis. Please consult with a local agricultural expert for confirmation and treatment advice.</p> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </main> | |
| </div> | |
| <!-- Simple script to display the chosen filename --> | |
| <script> | |
| const fileInput = document.getElementById('file'); | |
| const fileChosen = document.getElementById('file-chosen'); | |
| fileInput.addEventListener('change', function(){ | |
| fileChosen.textContent = this.files[0].name | |
| }) | |
| </script> | |
| </body> | |
| </html> |