Spaces:
Running
Running
| <!-- templates/results.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Plant Analysis Results</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; | |
| } | |
| .header-section { | |
| background-color: #28a745; | |
| color: white; | |
| padding: 2rem 0; | |
| margin-bottom: 2rem; | |
| } | |
| .result-container { | |
| background-color: white; | |
| border-radius: 10px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| .image-container { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .image-container img { | |
| max-height: 400px; | |
| max-width: 100%; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .result-card { | |
| border-left: 4px solid; | |
| margin-bottom: 1.5rem; | |
| padding: 1rem; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .healthy { | |
| background-color: #d4edda; | |
| border-left-color: #28a745; | |
| } | |
| .severity-low { | |
| background-color: #e7f5e9; | |
| border-left-color: #3cb371; | |
| } | |
| .severity-medium { | |
| background-color: #fff3cd; | |
| border-left-color: #ffc107; | |
| } | |
| .severity-high { | |
| background-color: #f8d7da; | |
| border-left-color: #dc3545; | |
| } | |
| .info-row { | |
| display: flex; | |
| margin-bottom: 0.5rem; | |
| } | |
| .info-label { | |
| font-weight: bold; | |
| width: 120px; | |
| flex-shrink: 0; | |
| } | |
| .info-content { | |
| flex-grow: 1; | |
| } | |
| .probability-bar { | |
| height: 8px; | |
| background-color: #e9ecef; | |
| border-radius: 4px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| } | |
| .probability-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: #28a745; | |
| } | |
| .product-card { | |
| height: 100%; | |
| transition: transform 0.3s; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .info-source { | |
| font-size: 0.8rem; | |
| color: #6c757d; | |
| margin-top: 0.5rem; | |
| } | |
| .resource-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| font-size: 0.7rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header-section"> | |
| <div class="container text-center"> | |
| <h1 class="display-5">Plant Analysis Results</h1> | |
| <p class="lead">Analysis for {{ plant_name }}</p> | |
| </div> | |
| </div> | |
| <div class="container mb-5"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <div class="image-container"> | |
| <img src="{{ url_for('static', filename=image_path) }}" alt="{{ plant_name }} Image" class="img-fluid"> | |
| <div class="mt-3"> | |
| <h5>{{ plant_name }}</h5> | |
| {% if results.is_healthy %} | |
| <span class="badge bg-success">Healthy</span> | |
| {% else %} | |
| <span class="badge bg-warning">Issues Detected</span> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <div class="result-container"> | |
| <h4>Analysis Summary</h4> | |
| <div class="info-row"> | |
| <div class="info-label">Plant:</div> | |
| <div class="info-content">{{ plant_name }}</div> | |
| </div> | |
| <div class="info-row"> | |
| <div class="info-label">Status:</div> | |
| <div class="info-content"> | |
| {% if results.is_healthy %} | |
| <span class="text-success">Healthy</span> | |
| {% else %} | |
| <span class="text-warning">Issues Detected</span> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% if results.confidence %} | |
| <div class="info-row"> | |
| <div class="info-label">Confidence:</div> | |
| <div class="info-content">{{ results.confidence }}</div> | |
| </div> | |
| {% endif %} | |
| <div class="d-grid gap-2 mt-4"> | |
| <a href="{{ url_for('index') }}" class="btn btn-primary">Analyze Another Plant</a> | |
| </div> | |
| </div> | |
| {% if results.audio_file %} | |
| <div class="result-container mt-3"> | |
| <h5>Audio Summary:</h5> | |
| <audio controls> | |
| <source src="static/audio/audio_result.mp3" type="audio/mp3"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <div class="col-md-8"> | |
| {% if results.is_healthy %} | |
| <div class="result-container healthy"> | |
| <h3 class="text-success">Good News!</h3> | |
| <p class="lead">Your {{ plant_name }} plant appears to be healthy. Continue with your current care practices.</p> | |
| <h5 class="mt-4">Recommendations:</h5> | |
| <ul> | |
| <li>Maintain regular watering schedule</li> | |
| <li>Continue with balanced fertilization</li> | |
| <li>Monitor for any changes in appearance</li> | |
| <li>Ensure proper sunlight exposure</li> | |
| <li>Practice preventive measures against common pests and diseases</li> | |
| </ul> | |
| </div> | |
| {% elif results.results %} | |
| <div class="result-container"> | |
| <h3>Detected Issues</h3> | |
| <p>Here are the potential issues detected in your {{ plant_name }} plant:</p> | |
| {% for result in results.results %} | |
| <div class="result-card severity-{{ result.severity|lower }}"> | |
| <div class="d-flex justify-content-between align-items-center mb-2"> | |
| <h4>{{ loop.index }}. {{ result.name }}</h4> | |
| <div> | |
| <span class="badge bg-info me-2">{{ result.type }}</span> | |
| <span class="badge {% if result.severity|lower == 'low' %}bg-success{% elif result.severity|lower == 'medium' %}bg-warning{% else %}bg-danger{% endif %}"> | |
| {{ result.severity }} Severity | |
| </span> | |
| </div> | |
| </div> | |
| <div class="info-row"> | |
| <div class="info-label">Probability:</div> | |
| <div class="info-content"> | |
| {{ result.probability }} | |
| <div class="probability-bar"> | |
| {% set prob_value = result.probability|replace('%', '')|float %} | |
| <div class="probability-fill" style="width: {{ prob_value }}%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-row"> | |
| <div class="info-label">Symptoms:</div> | |
| <div class="info-content">{{ result.symptoms }}</div> | |
| </div> | |
| <div class="info-row"> | |
| <div class="info-label">Causes:</div> | |
| <div class="info-content">{{ result.causes }}</div> | |
| </div> | |
| <div class="info-row"> | |
| <div class="info-label">Spreading:</div> | |
| <div class="info-content">{{ result.spreading }}</div> | |
| </div> | |
| <div class="mt-3"> | |
| <h5>Treatment:</h5> | |
| <p>{{ result.treatment }}</p> | |
| </div> | |
| <div class="mt-3"> | |
| <h5>Prevention:</h5> | |
| <p>{{ result.prevention }}</p> | |
| </div> | |
| {% if web_info and result.name in web_info and web_info[result.name] %} | |
| <div class="mt-4"> | |
| <h5>Additional Information:</h5> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h6 class="card-title">{{ web_info[result.name].title }}</h6> | |
| <p class="card-text">{{ web_info[result.name].summary }}</p> | |
| <div class="d-flex justify-content-between"> | |
| <a href="{{ web_info[result.name].link }}" class="btn btn-sm btn-outline-success" target="_blank">Read More</a> | |
| <span class="info-source">Source: Agrowon</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% if product_info and result.name in product_info and product_info[result.name] %} | |
| <div class="mt-4"> | |
| <h5>Recommended Products:</h5> | |
| <div class="row"> | |
| {% for product in product_info[result.name][:2] %} | |
| <div class="col-md-6 mb-2"> | |
| <div class="card product-card"> | |
| <div class="card-body"> | |
| <span class="badge bg-secondary resource-badge"> | |
| {% if 'indiamart' in product.link %}IndiaMart{% else %}Krishi Seva{% endif %} | |
| </span> | |
| <h6 class="card-title" style="font-size: 0.9rem;">{{ product.title }}</h6> | |
| <p class="card-text small">{{ product.snippet[:100] }}{% if product.snippet|length > 100 %}...{% endif %}</p> | |
| <a href="{{ product.link }}" class="btn btn-sm btn-outline-primary" target="_blank">View Product</a> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% if product_info[result.name]|length > 2 %} | |
| <div class="text-center mt-2"> | |
| <button class="btn btn-sm btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#moreProducts{{ loop.index }}" aria-expanded="false"> | |
| Show more products <i class="bi bi-chevron-down"></i> | |
| </button> | |
| <div class="collapse" id="moreProducts{{ loop.index }}"> | |
| <div class="row mt-2"> | |
| {% for product in product_info[result.name][2:] %} | |
| <div class="col-md-6 mb-2"> | |
| <div class="card product-card"> | |
| <div class="card-body"> | |
| <span class="badge bg-secondary resource-badge"> | |
| {% if 'indiamart' in product.link %}IndiaMart{% else %}Krishi Seva{% endif %} | |
| </span> | |
| <h6 class="card-title" style="font-size: 0.9rem;">{{ product.title }}</h6> | |
| <p class="card-text small">{{ product.snippet[:100] }}{% if product.snippet|length > 100 %}...{% endif %}</p> | |
| <a href="{{ product.link }}" class="btn btn-sm btn-outline-primary" target="_blank">View Product</a> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| </div> | |
| {% endfor %} | |
| <div class="mt-4 alert alert-info"> | |
| <h5 class="alert-heading">Disclaimer</h5> | |
| <p>The product recommendations are provided for informational purposes only. Always consult with a local agricultural expert for specific recommendations suited to your region and conditions.</p> | |
| </div> | |
| <div class="container mb-5"> | |
| <div class="result-container"> | |
| <h4>Send us your Feedback</h4> | |
| <p>We would love to hear your thoughts on the analysis.</p> | |
| <form action="/feedback" method="post"> | |
| <input type="hidden" name="plant_name" value="{{ plant_name }}"> | |
| <div class="mb-3"> | |
| <textarea class="form-control" name="feedback" rows="4" placeholder="Your feedback here..." required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Submit Feedback</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| {% else %} | |
| <div class="result-container"> | |
| <div class="alert alert-warning"> | |
| <h4 class="alert-heading">Analysis Inconclusive</h4> | |
| <p>We couldn't determine with certainty whether your plant has issues. This could be due to:</p> | |
| <ul> | |
| <li>Image quality or lighting issues</li> | |
| <li>Early stage symptoms that aren't clearly visible</li> | |
| <li>A rare condition not in our database</li> | |
| </ul> | |
| <hr> | |
| <p class="mb-0">Try uploading a clearer image or one that shows the affected areas more directly.</p> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </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> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| </body> | |
| </html> |