script.js

const ROBOTFLOW_API_KEY = 'rf_dqDbILKhaEMFeRG4AC8EQYkAxl33';
const MODEL_ID = 'brainmri_classification/1';

// Get DOM Elements
const uploadArea = document.getElementById('uploadArea');
const imageUpload = document.getElementById('imageUpload');
const uploadButton = document.getElementById('uploadButton');
const uploadedImage = document.getElementById('uploadedImage');
const imagePreview = document.getElementById('imagePreview');
const predictionResult = document.getElementById('predictionResult');
const aiReview = document.getElementById('aiReview');
const loadingSpinner = document.getElementById('loadingSpinner');

let roboflowModel;

// --- Event Listeners for File Upload ---

// Click "Click to Upload" button
uploadButton.addEventListener('click', () => {
  imageUpload.click();
});

// Handle file selection via input
imageUpload.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    handleFile(file);
  }
});

// Handle drag over for styling
uploadArea.addEventListener('dragover', (event) => {
  event.preventDefault();
  uploadArea.classList.add('drag-over');
});

// Handle drag leave for styling
uploadArea.addEventListener('dragleave', (event) => {
  event.preventDefault();
  uploadArea.classList.remove('drag-over');
});

// Handle drop event
uploadArea.addEventListener('drop', (event) => {
  event.preventDefault();
  uploadArea.classList.remove('drag-over');
  const file = event.dataTransfer.files[0];
  if (file) {
    handleFile(file);
  }
});

// --- Core Logic for Image Handling and Prediction ---

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const base64 = reader.result.split(',')[1];
      resolve(base64);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

async function handleFile(file) {
  if (!file.type.startsWith('image/')) {
    alert('Please upload an image file (e.g., JPG, PNG).');
    return;
  }

  predictionResult.textContent = 'Analyzing...';
  aiReview.textContent = 'Please wait while the AI processes the image.';
  uploadedImage.style.display = 'none';
  loadingSpinner.style.display = 'flex';

  try {
    const formData = new FormData();
    formData.append('file', file);

    // Send to our Flask backend
    const response = await fetch('http://localhost:5000/predict', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error('Could not get prediction');
    }

    const data = await response.json();

    // Set preview
    uploadedImage.src = data.image;
    uploadedImage.style.display = 'block';

    // Display results
    predictionResult.innerHTML = `<strong>${data.prediction.class}</strong> (Confidence: ${data.prediction.confidence}%)`;
    aiReview.textContent = data.review;
  } catch (error) {
    predictionResult.textContent = 'Error: Could not get prediction.';
    aiReview.textContent = 'There was an issue processing the image. Please try again.';
    console.error(error);
  } finally {
    loadingSpinner.style.display = 'none';
  }
}