Spaces:
Sleeping
Sleeping
| <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> | |