35455-vm/assets/js/main.js

console.log("NeuroDetect main.js loaded.");

document.addEventListener('DOMContentLoaded', function () {
    const uploadBox = document.getElementById('upload-box');
    const mriImageInput = document.getElementById('mri_image');
    const selectFileBtn = document.getElementById('select-file-btn');
    const analyzeBtn = document.getElementById('analyze-btn');
    const imagePreviewContainer = document.getElementById('image-preview-container');
    const imagePreview = document.getElementById('image-preview');
    const removeImageBtn = document.getElementById('remove-image-btn');
    const uploadForm = document.getElementById('upload-form');
    const resultPlaceholder = document.getElementById('result-placeholder');
    const resultDisplay = document.getElementById('result-display');
    const predictionResult = document.getElementById('prediction-result');
    const confidenceBar = document.getElementById('confidence-bar');

    function handleFileSelect(file) {
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function (e) {
                imagePreview.src = e.target.result;
                imagePreviewContainer.style.display = 'block';
                uploadBox.style.display = 'none';
                analyzeBtn.disabled = false;
            };
            reader.readAsDataURL(file);
        }
    }

    if (uploadBox) {
        uploadBox.addEventListener('click', () => mriImageInput.click());
        selectFileBtn.addEventListener('click', () => mriImageInput.click());

        mriImageInput.addEventListener('change', (e) => {
            handleFileSelect(e.target.files[0]);
        });

        uploadBox.addEventListener('dragover', (e) => {
            e.preventDefault();
            e.stopPropagation();
            uploadBox.classList.add('dragover');
        });

        uploadBox.addEventListener('dragleave', (e) => {
            e.preventDefault();
            e.stopPropagation();
            uploadBox.classList.remove('dragover');
        });

        uploadBox.addEventListener('drop', (e) => {
            e.preventDefault();
            e.stopPropagation();
            uploadBox.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            mriImageInput.files = e.dataTransfer.files;
            handleFileSelect(file);
        });

        removeImageBtn.addEventListener('click', () => {
            mriImageInput.value = '';
            imagePreview.src = '#';
            imagePreviewContainer.style.display = 'none';
            uploadBox.style.display = 'block';
            analyzeBtn.disabled = true;
            resultDisplay.style.display = 'none';
            resultPlaceholder.style.display = 'block';
        });

        uploadForm.addEventListener('submit', function(e) {
            e.preventDefault();
            analyzeBtn.disabled = true;
            analyzeBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Analyzing...';

            resultPlaceholder.style.display = 'block';
            resultDisplay.style.display = 'none';

            const formData = new FormData(this);

            fetch('api/detect.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    predictionResult.textContent = data.prediction;
                    if (data.prediction === 'Alzheimer Detected') {
                        predictionResult.className = 'fw-bold text-danger';
                    } else {
                        predictionResult.className = 'fw-bold text-success';
                    }
                    
                    const confidencePercent = Math.round(data.confidence * 100);
                    confidenceBar.style.width = confidencePercent + '%';
                    confidenceBar.textContent = confidencePercent + '%';
                    confidenceBar.setAttribute('aria-valuenow', confidencePercent);

                    if (confidencePercent > 85) {
                        confidenceBar.classList.remove('bg-warning');
                        confidenceBar.classList.add('bg-primary');
                    } else {
                        confidenceBar.classList.remove('bg-primary');
                        confidenceBar.classList.add('bg-warning');
                    }

                    resultPlaceholder.style.display = 'none';
                    resultDisplay.style.display = 'block';
                } else {
                    alert('Error: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An unexpected error occurred. Please try again.');
            })
            .finally(() => {
                analyzeBtn.disabled = false;
                analyzeBtn.innerHTML = 'Analyze Scan';
            });
        });
    }
});