Spaces:
Paused
Paused
File size: 4,585 Bytes
b7a676b | 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 | document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('image');
const fileUploadText = document.querySelector('.file-upload-text');
const uploadMessage = document.getElementById('upload-message');
const form = document.getElementById('patient-form');
const submitBtn = document.getElementById('submit-btn');
const resultSection = document.getElementById('result-section');
const resultContent = document.getElementById('result-content');
// Handle file input change
fileInput.addEventListener('change', () => {
if (fileInput.files && fileInput.files.length > 0) {
const file = fileInput.files[0];
const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
const maxSize = 20 * 1024 * 1024; // 20MB in bytes
// Validate file type and size
if (!validTypes.includes(file.type)) {
alert('Please upload an image in JPG, JPEG, or PNG format.');
fileInput.value = '';
fileUploadText.textContent = 'Choose Image';
uploadMessage.style.display = 'none';
return;
}
if (file.size > maxSize) {
alert('File size exceeds 20MB. Please upload a smaller image.');
fileInput.value = '';
fileUploadText.textContent = 'Choose Image';
uploadMessage.style.display = 'none';
return;
}
// Update file upload text with file name
fileUploadText.textContent = file.name;
// Show upload successful message
uploadMessage.innerHTML = `
<span class="message-text">Upload Successful: ${file.name}</span>
<button class="close-btn" aria-label="Close message">×</button>
`;
uploadMessage.style.display = 'flex';
uploadMessage.classList.add('show');
// Add event listener to close button
const closeBtn = uploadMessage.querySelector('.close-btn');
closeBtn.addEventListener('click', () => {
uploadMessage.style.display = 'none';
uploadMessage.classList.remove('show');
});
} else {
fileUploadText.textContent = 'Choose Image';
uploadMessage.style.display = 'none';
uploadMessage.classList.remove('show');
}
});
// Handle form submission
form.addEventListener('submit', async (e) => {
e.preventDefault(); // Prevent default form submission
// Disable submit button and show loading state
submitBtn.disabled = true;
submitBtn.textContent = 'Processing...';
resultSection.style.display = 'none';
resultContent.innerHTML = '';
try {
const formData = new FormData(form);
const response = await fetch('/predict', {
method: 'POST',
body: formData
});
const data = await response.json();
// Display result
resultSection.style.display = 'block';
if (data.error) {
resultContent.innerHTML = `
<div class="result-error">
<p>${data.error}</p>
</div>
`;
} else if (data.prediction === 'Low confidence') {
resultContent.innerHTML = `
<div class="result-warning">
<p><strong>Warning:</strong> ${data.message}</p>
<p><strong>Confidence:</strong> ${data.confidence}</p>
</div>
`;
} else {
resultContent.innerHTML = `
<div class="result-success">
<p><strong>Prediction:</strong> ${data.prediction}</p>
<p><strong>Confidence:</strong> ${data.confidence}</p>
</div>
`;
}
} catch (error) {
console.error('Error:', error);
resultSection.style.display = 'block';
resultContent.innerHTML = `
<div class="result-error">
<p>An error occurred while processing your request. Please try again.</p>
</div>
`;
} finally {
// Re-enable submit button
submitBtn.disabled = false;
submitBtn.textContent = 'Submit Details';
}
});
}); |