Spaces:
Sleeping
Sleeping
File size: 4,756 Bytes
139f134 8d4008e 139f134 8d4008e 139f134 8d4008e 139f134 |
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 |
document.addEventListener('DOMContentLoaded', () => {
const fileInput = document.getElementById('fileInput');
const fileNameDisplay = document.getElementById('fileName');
const imagePreview = document.getElementById('imagePreview');
const previewSection = document.getElementById('preview-section');
const uploadForm = document.getElementById('uploadForm');
const loadingDiv = document.getElementById('loading');
const resultsDiv = document.getElementById('results');
// Handle file selection
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
fileNameDisplay.textContent = file.name;
// Show preview
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
previewSection.classList.remove('hidden');
resultsDiv.classList.add('hidden'); // Hide previous results
};
reader.readAsDataURL(file);
}
});
// Handle form submission
uploadForm.addEventListener('submit', async (e) => {
e.preventDefault();
const file = fileInput.files[0];
if (!file) {
alert('Please select an image first.');
return;
}
const preprocessing = 'v2';
const formData = new FormData();
formData.append('file', file);
formData.append('preprocessing', preprocessing);
// Show loading state
loadingDiv.classList.remove('hidden');
resultsDiv.classList.add('hidden');
resultsDiv.innerHTML = '';
try {
const response = await fetch('/predict', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`Server error: ${response.statusText}`);
}
const data = await response.json();
displayResults(data);
} catch (error) {
console.error('Error:', error);
resultsDiv.innerHTML = `<div class="result-card"><p style="color: red;">Error: ${error.message}</p></div>`;
resultsDiv.classList.remove('hidden');
} finally {
loadingDiv.classList.add('hidden');
}
});
function displayResults(data) {
let html = '';
// Stage 1 Results
const s1 = data.stage1;
const s1Class = s1.is_cancerous ? 'cancerous' : 'healthy';
const s1Title = s1.is_cancerous ? 'Cancerous Detected' : 'Healthy';
html += `
<div class="result-card ${s1Class}">
<div class="result-title">Stage 1: ${s1Title}</div>
<p>Status: <strong>${s1.label}</strong></p>
<div>
<span>Healthy Probability: ${(s1.prob_healthy * 100).toFixed(2)}%</span>
<div class="prob-bar"><div class="prob-fill" style="width: ${s1.prob_healthy * 100}%"></div></div>
</div>
<div style="margin-top: 10px;">
<span>Cancer Probability: ${(s1.prob_cancer * 100).toFixed(2)}%</span>
<div class="prob-bar"><div class="prob-fill" style="width: ${s1.prob_cancer * 100}%; background-color: var(--primary-color);"></div></div>
</div>
</div>
`;
// Stage 2 Results (if applicable)
if (data.stage2) {
const s2 = data.stage2;
const s2Class = s2.label === 'ALL' ? 'subtype-all' : 'subtype-hem';
html += `
<div class="result-card ${s2Class}">
<div class="result-title">Stage 2: Subtype Classification</div>
<p>Subtype: <strong>${s2.label}</strong></p>
<p>Confidence: <strong>${(s2.confidence * 100).toFixed(2)}%</strong></p>
<p class="small">${s2.label === 'ALL' ? 'Acute Lymphoblastic Leukemia' : 'Hematological Malignancies'}</p>
</div>
`;
} else if (s1.is_cancerous) {
html += `
<div class="result-card">
<div class="result-title">Stage 2: Subtype Classification</div>
<p>Stage 2 model not loaded or failed.</p>
</div>
`;
} else {
html += `
<div class="result-card healthy">
<div class="result-title">Stage 2: Skipped</div>
<p>Sample classified as Healthy, so subtype classification is not needed.</p>
</div>
`;
}
resultsDiv.innerHTML = html;
resultsDiv.classList.remove('hidden');
}
});
|