Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const modelBtns = document.querySelectorAll('.model-btn');
+
+ // Handle drag and drop
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--secondary)';
+ dropZone.style.background = 'rgba(9,132,227,0.05)';
+ });
+
+ dropZone.addEventListener('dragleave', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = '#ddd';
+ dropZone.style.background = 'white';
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = '#ddd';
+ dropZone.style.background = 'white';
+
+ const files = e.dataTransfer.files;
+ handleFiles(files);
+ });
+
+ // Handle click to upload
+ dropZone.addEventListener('click', () => {
+ fileInput.click();
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ handleFiles(e.target.files);
+ });
+
+ // Handle model selection
+ modelBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ modelBtns.forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ processImage();
+ });
+ });
+
+ function handleFiles(files) {
+ if (files.length === 0) return;
+
+ const file = files[0];
+ if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) {
+ alert('Please upload a valid .nii or .nii.gz file');
+ return;
+ }
+
+ // Here you would typically handle the file upload and processing
+ // For demo purposes, we'll just show a success message
+ const uploadArea = dropZone.querySelector('h3');
+ uploadArea.textContent = 'File uploaded: ' + file.name;
+
+ processImage();
+ }
+
+ function processImage() {
+ const selectedModel = document.querySelector('.model-btn.active').dataset.model;
+ // Here you would typically process the image with the selected model
+ console.log(`Processing image with ${selectedModel} model...`);
+ }
+ });
![\"Upload](\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMTZWNE0xMiA0TDggOE0xMiA0TDE2IDgiIHN0cm9rZT0iIzY2NiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=\")
\n