File size: 3,447 Bytes
ff13394 |
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 |
document.addEventListener('DOMContentLoaded', function() {
const imageUpload = document.getElementById('image-upload');
const previewContainer = document.getElementById('preview-container');
const imagePreview = document.getElementById('image-preview');
const uploadPlaceholder = document.getElementById('upload-placeholder');
const submitButton = document.getElementById('submit-button');
const uploadForm = document.getElementById('upload-form');
const errorMessage = document.getElementById('error-message');
const resultContainer = document.getElementById('result-container');
const resultMessage = document.getElementById('result-message');
const membershipStatus = document.getElementById('membership-status');
const probabilityFill = document.getElementById('probability-fill');
const probabilityText = document.getElementById('probability-text');
const loading = document.getElementById('loading');
let selectedFile = null;
// Handle image selection
imageUpload.addEventListener('change', function(e) {
selectedFile = e.target.files[0];
if (selectedFile) {
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.src = e.target.result;
previewContainer.classList.remove('hidden');
uploadPlaceholder.classList.add('hidden');
submitButton.disabled = false;
errorMessage.classList.add('hidden');
resultContainer.classList.add('hidden');
};
reader.readAsDataURL(selectedFile);
}
});
// Handle form submission
uploadForm.addEventListener('submit', function(e) {
e.preventDefault();
if (!selectedFile) {
errorMessage.textContent = 'Please select an image first';
errorMessage.classList.remove('hidden');
return;
}
// Show loading indicator
loading.classList.remove('hidden');
submitButton.disabled = true;
errorMessage.classList.add('hidden');
resultContainer.classList.add('hidden');
const formData = new FormData();
formData.append('image', selectedFile);
fetch('/api/check-membership', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error(`Server responded with ${response.status}`);
}
return response.json();
})
.then(data => {
// Display results
resultMessage.textContent = data.message;
membershipStatus.innerHTML = `This image is <strong>${data.is_in_training_data}</strong> in the model's training data.`;
const probability = data.probability * 100;
probabilityFill.style.width = `${probability}%`;
probabilityText.textContent = `${probability.toFixed(2)}%`;
resultContainer.classList.remove('hidden');
})
.catch(error => {
errorMessage.textContent = `Error: ${error.message}`;
errorMessage.classList.remove('hidden');
})
.finally(() => {
loading.classList.add('hidden');
submitButton.disabled = false;
});
});
}); |