Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const modelCards = document.querySelectorAll('.model-card');
+ let selectedModel = null;
+
+ // File upload handling
+ dropZone.addEventListener('click', () => fileInput.click());
+
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--accent-color)';
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.style.borderColor = 'var(--primary-color)';
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--primary-color)';
+ handleFile(e.dataTransfer.files[0]);
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ handleFile(e.target.files[0]);
+ });
+
+ // Model selection
+ modelCards.forEach(card => {
+ card.addEventListener('click', () => {
+ modelCards.forEach(c => c.classList.remove('selected'));
+ card.classList.add('selected');
+ selectedModel = card.dataset.model;
+
+ if (fileInput.files.length > 0) {
+ processImage(fileInput.files[0], selectedModel);
+ }
+ });
+ });
+
+ function handleFile(file) {
+ if (!file) return;
+
+ if (!file.name.endsWith('.nii') && !file.name.endsWith('.nii.gz')) {
+ alert('Please upload a valid NII file');
+ return;
+ }
+
+ document.querySelector('.preview-section').hidden = false;
+
+ if (selectedModel) {
+ processImage(file, selectedModel);
+ }
+ }
+
+ function processImage(file, model) {
+ // This is a demo placeholder for image processing
+ // In a real implementation, this would send the file to a backend server
+ console.log(`Processing ${file.name} with model: ${model}`);
+
+ // Simulate processing delay
+ setTimeout(() => {
+ const originalCanvas = document.getElementById('originalCanvas');
+ const enhancedCanvas = document.getElementById('enhancedCanvas');
+
+ // Demo visualization (replace with actual image processing)
+ drawDemoImage(originalCanvas, 'original');
+ drawDemoImage(enhancedCanvas, 'enhanced');
+ }, 1000);
+ }
+
+ function drawDemoImage(canvas, type) {
+ const ctx = canvas.getContext('2d');
+ canvas.width = 400;
+ canvas.height = 400;
+
+ ctx.fillStyle = type === 'original' ? '#eee' : '#ddf';
+ ctx.fillRect(0, 0, 400, 400);
+
+ ctx.fillStyle = '#333';
+ ctx.font = '20px sans-serif';
+ ctx.textAlign = 'center';
+ ctx.fillText(`${type} Image Preview`, 200, 200);
+ }
+ });
![\"\"](\"upload-icon.svg\")
\n