Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mission 17 AI Scanner</title> | |
| <style> | |
| body { font-family: 'Segoe UI', sans-serif; text-align: center; padding: 50px; background-color: #f4f4f9; } | |
| .card { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: inline-block; max-width: 400px; } | |
| button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 15px; } | |
| button:hover { background: #0056b3; } | |
| #result { margin-top: 25px; font-weight: bold; } | |
| .verified { color: #28a745; background: #e6fffa; padding: 15px; border-radius: 8px; border: 1px solid #28a745; } | |
| .rejected { color: #dc3545; background: #fff5f5; padding: 15px; border-radius: 8px; border: 1px solid #dc3545; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h2>🤖 Mission 17 AI Scanner</h2> | |
| <p>Upload a photo to verify your mission!</p> | |
| <input type="file" id="fileInput" accept="image/*"> | |
| <br> | |
| <button onclick="scanImage()">🔍 Scan Mission</button> | |
| <div id="result"></div> | |
| </div> | |
| <script> | |
| async function scanImage() { | |
| const fileInput = document.getElementById('fileInput'); | |
| const resultDiv = document.getElementById('result'); | |
| if (!fileInput.files[0]) { | |
| alert("Please select an image first!"); | |
| return; | |
| } | |
| resultDiv.innerHTML = "⏳ Scanning..."; | |
| const formData = new FormData(); | |
| formData.append("file", fileInput.files[0]); | |
| try { | |
| const response = await fetch("http://127.0.0.1:5000/predict", { method: "POST", body: formData }); | |
| const data = await response.json(); | |
| const colorClass = data.verdict === "VERIFIED" ? "verified" : "rejected"; | |
| resultDiv.innerHTML = ` | |
| <div class="${colorClass}"> | |
| <h3>${data.message}</h3> | |
| <p><strong>📷 Type:</strong> ${data.source_check}</p> | |
| <p><strong>🎯 Accuracy:</strong> ${data.confidence}</p> | |
| <p><strong>🌍 SDG:</strong> ${data.sdg}</p> | |
| </div>`; | |
| } catch (error) { | |
| resultDiv.innerHTML = "❌ Error connecting to server. Is app.py running?"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |