| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Car Damage Detection</title> |
| | <link rel="stylesheet" href="/static/css/style.css"> |
| | <script> |
| | function copyJSON() { |
| | const pre = document.getElementById('json-pre'); |
| | if (pre) { |
| | navigator.clipboard.writeText(pre.innerText); |
| | alert('JSON copied to clipboard!'); |
| | } |
| | } |
| | function toggleJSON() { |
| | const block = document.getElementById('json-block'); |
| | const btn = document.getElementById('toggle-json-btn'); |
| | if (block.style.display === 'none') { |
| | block.style.display = 'block'; |
| | btn.innerText = 'Hide JSON'; |
| | } else { |
| | block.style.display = 'none'; |
| | btn.innerText = 'Show JSON'; |
| | } |
| | } |
| | </script> |
| | </head> |
| | <body> |
| | <div class="header" style="position:relative;"> |
| | <h2 style="margin:0;">Car Damage & Parts Detection</h2> |
| | <img src="/static/img/logo.png" alt="Logo" class="logo" style="position:absolute; top:18px; right:32px; max-width:110px;"> |
| | </div> |
| | <div class="container"> |
| | <form method="post" action="/upload" enctype="multipart/form-data"> |
| | <input type="file" name="file" accept="image/*" required> |
| | <button type="submit">Upload & Analyze</button> |
| | </form> |
| | {% if error %}<div class="error">{{ error }}</div>{% endif %} |
| | {% if result %} |
| | <div class="results"> |
| | <h3>Results</h3> |
| | <div class="images-row"> |
| | <div> |
| | <div class="result-label">Original</div> |
| | <img src="{{ original_image }}" alt="Original Image" class="result-img"> |
| | </div> |
| | {% if result.damage_image is defined and result.damage_image %} |
| | <div> |
| | <div class="result-label">Damage Prediction</div> |
| | <img src="{{ result.damage_image }}" alt="Damage Prediction" class="result-img"> |
| | </div> |
| | {% endif %} |
| | {% if result.parts_image is defined and result.parts_image %} |
| | <div> |
| | <div class="result-label">Parts Prediction</div> |
| | <img src="{{ result.parts_image }}" alt="Parts Prediction" class="result-img"> |
| | </div> |
| | {% endif %} |
| | </div> |
| | {% if result.json is defined and result.json %} |
| | <h4 style="margin-bottom:8px;">JSON Output</h4> |
| | <button class="copy-btn" onclick="copyJSON()" type="button">Copy JSON</button> |
| | <button class="copy-btn" id="toggle-json-btn" onclick="toggleJSON()" type="button" style="margin-left:10px;">Show JSON</button> |
| | <div id="json-block" style="display:none;"> |
| | <pre class="json-output" id="json-pre">{{ result.json | tojson(indent=2) }}</pre> |
| | </div> |
| | <a class="download-btn" href="{{ result.json_download }}" download>Download JSON</a> |
| | {% endif %} |
| | {% if result.damage_image is defined and result.damage_image %} |
| | <a class="download-btn" href="{{ result.damage_image }}" download>Download Damage Image</a> |
| | {% endif %} |
| | {% if result.parts_image is defined and result.parts_image %} |
| | <a class="download-btn" href="{{ result.parts_image }}" download>Download Parts Image</a> |
| | {% endif %} |
| | </div> |
| | {% endif %} |
| | </div> |
| | <div class="footer"> |
| | © {{ 2025 }} RSA/Intact. All rights reserved. |
| | </div> |
| | </body> |
| | </html> |
| |
|
