Spaces:
Sleeping
Sleeping
File size: 3,442 Bytes
70b44e7 | 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 | const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');
const previewContainer = document.getElementById('previewContainer');
const scanningOverlay = document.getElementById('scanningOverlay');
const resultsPanel = document.getElementById('resultsPanel');
const statusText = document.getElementById('statusText');
const predictedClass = document.getElementById('predictedClass');
const confidenceValue = document.getElementById('confidenceValue');
const confidenceFill = document.getElementById('confidenceFill');
const probBreakdown = document.getElementById('probBreakdown');
const resetBtn = document.getElementById('resetBtn');
const latencyValue = document.getElementById('latencyValue');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.style.borderColor = 'var(--accent)';
});
dropZone.addEventListener('dragleave', () => {
dropZone.style.borderColor = 'var(--glass-border)';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
handleFile(file);
}
});
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) handleFile(file);
});
function handleFile(file) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
previewContainer.style.display = 'block';
startAnalysis(file);
};
reader.readAsDataURL(file);
}
async function startAnalysis(file) {
statusText.innerText = 'Analyzing Neural Data...';
scanningOverlay.style.display = 'block';
const startTime = performance.now();
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/predict', {
method: 'POST',
body: formData
});
const data = await response.json();
const endTime = performance.now();
latencyValue.innerText = `${Math.round(endTime - startTime)}ms`;
displayResults(data);
} catch (error) {
statusText.innerText = 'Analysis Failed';
console.error(error);
} finally {
scanningOverlay.style.display = 'none';
}
}
function displayResults(data) {
statusText.innerText = 'Scan Complete';
predictedClass.innerText = data.class.toUpperCase();
const conf = Math.round(data.confidence * 100);
confidenceValue.innerText = `${conf}%`;
confidenceFill.style.width = `${conf}%`;
probBreakdown.innerHTML = '';
Object.entries(data.probabilities).forEach(([name, prob]) => {
const div = document.createElement('div');
div.className = 'prob-item';
div.innerHTML = `
<span>${name.toUpperCase()}</span>
<span>${(prob * 100).toFixed(2)}%</span>
`;
probBreakdown.appendChild(div);
});
}
resetBtn.addEventListener('click', () => {
fileInput.value = '';
previewContainer.style.display = 'none';
predictedClass.innerText = 'Awaiting Input';
confidenceValue.innerText = '0%';
confidenceFill.style.width = '0%';
probBreakdown.innerHTML = '';
statusText.innerText = 'System Ready';
latencyValue.innerText = '0ms';
});
|