static/js/script.js

// 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" });
});