Spaces:
Sleeping
Sleeping
File size: 4,653 Bytes
3709a55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
// File upload handling
const imageInput = document.getElementById("imageInput");
const fileName = document.getElementById("fileName");
const previewContainer = document.getElementById("previewContainer");
const imagePreview = document.getElementById("imagePreview");
const uploadForm = document.getElementById("uploadForm");
const detectBtn = document.getElementById("detectBtn");
const loadingSpinner = document.getElementById("loadingSpinner");
const errorMessage = document.getElementById("errorMessage");
const resultsSection = document.getElementById("resultsSection");
const resultImage = document.getElementById("resultImage");
const detectionSummary = document.getElementById("detectionSummary");
const detectionDetails = document.getElementById("detectionDetails");
const detectionList = document.getElementById("detectionList");
const resetBtn = document.getElementById("resetBtn");
// Threshold sliders
const boxThreshold = document.getElementById("boxThreshold");
const textThreshold = document.getElementById("textThreshold");
const boxThresholdValue = document.getElementById("boxThresholdValue");
const textThresholdValue = document.getElementById("textThresholdValue");
// Update slider values
boxThreshold.addEventListener("input", (e) => {
boxThresholdValue.textContent = e.target.value;
});
textThreshold.addEventListener("input", (e) => {
textThresholdValue.textContent = e.target.value;
});
// File input change handler
imageInput.addEventListener("change", (e) => {
const file = e.target.files[0];
if (file) {
fileName.textContent = file.name;
// Show preview
const reader = new FileReader();
reader.onload = (event) => {
imagePreview.src = event.target.result;
previewContainer.style.display = "block";
};
reader.readAsDataURL(file);
// Hide any previous results or errors
resultsSection.style.display = "none";
errorMessage.style.display = "none";
}
});
// Form submission
uploadForm.addEventListener("submit", async (e) => {
e.preventDefault();
// Validate file
if (!imageInput.files || imageInput.files.length === 0) {
showError("Please select an image file.");
return;
}
// Prepare form data
const formData = new FormData();
formData.append("image", imageInput.files[0]);
formData.append("box_threshold", boxThreshold.value);
formData.append("text_threshold", textThreshold.value);
// Show loading state
detectBtn.disabled = true;
loadingSpinner.style.display = "block";
errorMessage.style.display = "none";
resultsSection.style.display = "none";
try {
const response = await fetch("/detect", {
method: "POST",
body: formData,
});
const data = await response.json();
if (response.ok && data.success) {
// Show results
displayResults(data);
} else {
showError(data.error || "Detection failed. Please try again.");
}
} catch (error) {
showError("Network error. Please check your connection and try again.");
console.error("Error:", error);
} finally {
detectBtn.disabled = false;
loadingSpinner.style.display = "none";
}
});
// Display results
function displayResults(data) {
// Set result image
resultImage.src = data.image;
// Set detection summary
detectionSummary.textContent = data.detections.summary;
// Show detailed detection info if available
if (data.detections.boxes && data.detections.boxes.length > 0) {
detectionList.innerHTML = "";
data.detections.boxes.forEach((box, index) => {
const score = data.detections.scores[index];
const li = document.createElement("li");
li.innerHTML = `
<strong>Detection ${index + 1}:</strong>
Confidence: ${(score * 100).toFixed(1)}%<br>
<small>Box: [${box.map((v) => v.toFixed(0)).join(", ")}]</small>
`;
detectionList.appendChild(li);
});
detectionDetails.style.display = "block";
} else {
detectionDetails.style.display = "none";
}
// Show results section
resultsSection.style.display = "block";
// Scroll to results
resultsSection.scrollIntoView({ behavior: "smooth", block: "start" });
}
// Show error message
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = "block";
}
// Reset button handler
resetBtn.addEventListener("click", () => {
// Reset form
uploadForm.reset();
fileName.textContent = "Choose an image file";
previewContainer.style.display = "none";
resultsSection.style.display = "none";
errorMessage.style.display = "none";
// Reset threshold values
boxThresholdValue.textContent = "0.35";
textThresholdValue.textContent = "0.25";
// Scroll to top
window.scrollTo({ top: 0, behavior: "smooth" });
});
|