templates/index.html

<!-- templates/index.html -->
{% extends "base.html" %}

{% block title %}MRI Analysis System - Home{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
        <h1 class="text-3xl font-bold text-blue-600 mb-4">Brain MRI Analysis and System</h1>
        <p class="text-gray-700 mb-6">
            Upload a brain MRI image to analyze it for tumor classification and segmentation. 
            Our system uses advanced deep learning models to:
        </p>
        <ul class="list-disc pl-6 mb-6 text-gray-700">
            <li>Classify the type of brain tumor (glioma, meningioma, pituitary, or no tumor)</li>
            <li>Segment the tumor area if present</li>
            <li>Provide a medical summary of the findings</li>
        </ul>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-blue-600 mb-4">Upload MRI Image</h2>
        <form action="/upload" method="post" enctype="multipart/form-data" class="space-y-4">
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center" id="drop-area">
                <div class="space-y-2">
                    <svg class="mx-auto h-12 w-12 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <p class="text-sm text-gray-600">Drag and drop your MRI image here</p>
                    <p class="text-xs text-gray-500">JPG, JPEG, or PNG files only</p>
                </div>
                <input type="file" name="mri_image" id="file-input" class="hidden" accept=".jpg,.jpeg,.png">
                <div class="mt-4">
                    <label for="file-input" class="cursor-pointer bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg inline-flex items-center">
                        <span>Select File</span>
                    </label>
                </div>
                <div id="file-preview" class="mt-4 hidden">
                    <p class="text-sm text-gray-700">Selected file: <span id="file-name" class="font-medium"></span></p>
                    <img id="image-preview" class="mt-2 max-h-48 mx-auto" src="" alt="Preview">
                </div>
            </div>
            <div class="text-center">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg shadow-lg transition duration-200">
                    Analyze MRI
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const filePreview = document.getElementById('file-preview');
    const fileName = document.getElementById('file-name');
    const imagePreview = document.getElementById('image-preview');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Highlight drop area when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropArea.classList.add('border-blue-500', 'bg-blue-50');
    }

    function unhighlight() {
        dropArea.classList.remove('border-blue-500', 'bg-blue-50');
    }

    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        updateFilePreview();
    }

    fileInput.addEventListener('change', updateFilePreview);

    function updateFilePreview() {
        if (fileInput.files && fileInput.files[0]) {
            const file = fileInput.files[0];
            fileName.textContent = file.name;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
            };
            reader.readAsDataURL(file);
            
            filePreview.classList.remove('hidden');
        }
    }
</script>
{% endblock %}