Spaces:
Runtime error
Runtime error
| document.addEventListener("DOMContentLoaded", () => { | |
| // 1. Exact DOM Elements matching your index.html | |
| const imageInput = document.getElementById("imageInput"); | |
| const analyzeBtn = document.getElementById("analyzeBtn"); | |
| const removeBtn = document.getElementById("removeBtn"); | |
| const imagePreview = document.getElementById("imagePreview"); | |
| const uploadState = document.getElementById("uploadState"); | |
| const previewState = document.getElementById("previewState"); | |
| const resultCard = document.getElementById("resultCard"); | |
| const predictionOutput = document.getElementById("predictionOutput"); | |
| const detectorForm = document.getElementById("detectorForm"); | |
| // 2. Image Selection & UI Toggling Logic | |
| imageInput.addEventListener("change", function() { | |
| const file = this.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| // Show the preview, hide the upload button | |
| imagePreview.src = e.target.result; | |
| uploadState.classList.add("hidden"); | |
| previewState.classList.remove("hidden"); | |
| // Enable the Analyze button | |
| analyzeBtn.disabled = false; | |
| // Hide any previous results | |
| resultCard.classList.add("hidden"); | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| // 3. Remove Image Logic | |
| removeBtn.addEventListener("click", function(e) { | |
| e.preventDefault(); | |
| // Reset the input | |
| imageInput.value = ""; | |
| imagePreview.src = ""; | |
| // Swap the UI back to upload mode | |
| previewState.classList.add("hidden"); | |
| uploadState.classList.remove("hidden"); | |
| // Disable the Analyze button again | |
| analyzeBtn.disabled = true; | |
| // Hide results | |
| resultCard.classList.add("hidden"); | |
| }); | |
| // 4. API Communication (The Core Connection) | |
| detectorForm.addEventListener("submit", async function(e) { | |
| e.preventDefault(); | |
| if (!imageInput.files || imageInput.files.length === 0) { | |
| alert("Please select an image first."); | |
| return; | |
| } | |
| const file = imageInput.files[0]; | |
| const formData = new FormData(); | |
| // 'image' key exactly matches app.py | |
| formData.append("image", file); | |
| // UI Loading State | |
| const originalText = analyzeBtn.innerText; | |
| analyzeBtn.innerText = "Extracting Frequencies..."; | |
| analyzeBtn.disabled = true; | |
| try { | |
| const response = await fetch("/api/v1/detect", { | |
| method: "POST", | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`Server returned ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| if (data.status === "success") { | |
| // Show the result card | |
| resultCard.classList.remove("hidden"); | |
| // Format the output elegantly | |
| const confPercentage = (data.confidence * 100).toFixed(2); | |
| predictionOutput.innerHTML = ` | |
| <strong>Detected Class:</strong> ${data.prediction} <br> | |
| <strong>Confidence:</strong> ${confPercentage}% <br> | |
| <hr style="border: 0; border-top: 1px solid #ccc; margin: 10px 0;"> | |
| <small> | |
| Clean: ${(data.distribution.Clean * 100).toFixed(1)}% | | |
| Marked: ${(data.distribution.Marked * 100).toFixed(1)}% | | |
| Scrubbed: ${(data.distribution.Scrubbed * 100).toFixed(1)}% | |
| </small> | |
| `; | |
| } else { | |
| throw new Error(data.error); | |
| } | |
| } catch (error) { | |
| console.error("Detection Failed:", error); | |
| alert("Failed to connect to backend. Make sure app.py is running!"); | |
| } finally { | |
| // Restore button state | |
| analyzeBtn.innerText = originalText; | |
| analyzeBtn.disabled = false; | |
| } | |
| }); | |
| }); |