Spaces:
Sleeping
Sleeping
File size: 2,435 Bytes
a1c6194 |
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 |
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("uploadForm");
const fileInput = document.getElementById("fileInput");
const predictButton = document.getElementById("predictButton");
const loadingIcon = document.getElementById("loadingIcon");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Show loading icon and change button text
loadingIcon.style.display = "inline-block";
predictButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Predicting...';
const formData = new FormData(form);
fetch("/predict_dog_breed", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
// Hide loading icon and reset button text
loadingIcon.style.display = "none";
predictButton.innerHTML = 'Predict';
displayPredictionResult(data);
})
.catch(error => {
// Hide loading icon in case of error and reset button text
loadingIcon.style.display = "none";
predictButton.innerHTML = 'Predict';
console.error("Error:", error);
});
});
// Image preview on file input change
fileInput.addEventListener("change", function () {
const file = fileInput.files[0];
if (file) {
displayImagePreview(file);
}
});
});
function displayPredictionResult(data) {
const resultDiv = document.getElementById("predictionResult");
if (data.confidence < 75) {
alert("Please upload a valid or clear image.");
} else {
resultDiv.innerHTML = `
<p>Predicted: ${data.class}</p>
<p>Confidence: ${data.confidence}%</p>
`;
}
}
function displayImagePreview(file) {
const body = document.body;
const reader = new FileReader();
reader.onload = function (e) {
// Set the background image of the body to the dropped image
body.style.backgroundImage = `url(${e.target.result})`;
body.style.backgroundSize = "cover";
body.style.backgroundPosition = "center";
body.style.backgroundRepeat = "no-repeat";
};
reader.readAsDataURL(file);
}
|