Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuroScan | Brain Tumor Detection</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 3px dashed #9CA3AF; | |
| border-radius: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: #EFF6FF; | |
| } | |
| .segmentation-map { | |
| background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%); | |
| } | |
| .topology-features { | |
| background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .scan-line { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(59, 130, 246, 0.7); | |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.9); | |
| animation: scan 3s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { top: 0; } | |
| 100% { top: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-indigo-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-brain text-3xl text-blue-300"></i> | |
| <h1 class="text-2xl font-bold">Neuro<span class="text-blue-300">Scan</span></h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-blue-300 transition">Home</a></li> | |
| <li><a href="#" class="hover:text-blue-300 transition">About</a></li> | |
| <li><a href="#" class="hover:text-blue-300 transition">Research</a></li> | |
| <li><a href="#" class="hover:text-blue-300 transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-indigo-900 to-blue-800 text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold mb-4">Advanced Brain Tumor Detection</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Using topological image segmentation to identify tumors with 94% accuracy</p> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Upload Scan | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-900 px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Upload Area --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Upload MRI Scan</h3> | |
| <div id="dropzone" class="dropzone p-8 text-center cursor-pointer mb-6"> | |
| <div class="flex flex-col items-center justify-center h-full"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i> | |
| <p class="text-gray-600 mb-2">Drag & drop your MRI scan here</p> | |
| <p class="text-sm text-gray-500">or click to browse files</p> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 rounded-lg p-4 mb-6"> | |
| <h4 class="font-medium text-blue-800 mb-2">Scan Requirements</h4> | |
| <ul class="text-sm text-blue-700 space-y-1"> | |
| <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> DICOM or PNG format</li> | |
| <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> Minimum 256×256 resolution</li> | |
| <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> Axial view preferred</li> | |
| </ul> | |
| </div> | |
| <button id="analyzeBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i class="fas fa-search mr-2"></i> Analyze Scan | |
| </button> | |
| </div> | |
| <!-- Middle Column - Results --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Original Image --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-medium">Original MRI Scan</h3> | |
| <div class="text-sm text-gray-300">No image uploaded</div> | |
| </div> | |
| <div id="originalImageContainer" class="relative h-64 bg-gray-100 flex items-center justify-center"> | |
| <div id="scanPlaceholder" class="text-center p-4"> | |
| <i class="fas fa-image text-5xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Your scan will appear here</p> | |
| </div> | |
| <img id="originalImage" class="hidden max-h-full max-w-full" src="" alt="Uploaded MRI Scan"> | |
| </div> | |
| </div> | |
| <!-- Segmentation Results --> | |
| <div id="resultsSection" class="hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Segmentation Map --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gray-700 text-white px-4 py-3"> | |
| <h3 class="font-medium">Segmentation Map</h3> | |
| </div> | |
| <div class="segmentation-map p-4 h-64 relative overflow-hidden"> | |
| <div id="scanLine" class="scan-line hidden"></div> | |
| <canvas id="segmentationCanvas" class="max-h-full max-w-full mx-auto hidden"></canvas> | |
| <div id="segmentationPlaceholder" class="text-center text-white p-4"> | |
| <i class="fas fa-spinner fa-spin text-3xl mb-3"></i> | |
| <p>Analyzing topological features...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Topology Features --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="topology-features text-white px-4 py-3"> | |
| <h3 class="font-medium">Topological Features</h3> | |
| </div> | |
| <div class="bg-blue-50 p-4 h-64 overflow-y-auto"> | |
| <div id="featuresPlaceholder" class="text-center text-blue-800 p-4"> | |
| <i class="fas fa-cogs text-3xl mb-3"></i> | |
| <p>Computing persistence diagrams...</p> | |
| </div> | |
| <div id="featuresResults" class="hidden space-y-4"> | |
| <div class="bg-white rounded-lg p-3 shadow"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-blue-800">Betti Numbers</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">β0=3, β1=2</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-3 shadow"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-blue-800">Persistence Diagram</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">3 components</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-3 shadow"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="font-medium text-blue-800">Euler Characteristic</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">χ=1</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diagnosis Result --> | |
| <div id="diagnosisCard" class="mt-6 hidden"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gradient-to-r from-green-600 to-green-500 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-medium">Diagnosis Result</h3> | |
| <div class="flex items-center"> | |
| <span class="text-xs bg-white text-green-600 px-2 py-1 rounded-full font-bold">94% Confidence</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-start"> | |
| <div class="mr-4"> | |
| <div class="bg-green-100 text-green-800 rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Tumor Detected</h4> | |
| <p class="text-gray-600 mb-4">Our topological analysis identified a mass with characteristics consistent with a <span class="font-bold text-gray-800">meningioma</span>.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-bold">Important:</span> This analysis is not a substitute for professional medical diagnosis. Please consult with a neurologist. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- How It Works Section --> | |
| <section class="bg-gray-100 py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">How Our Topological Analysis Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-project-diagram text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Topological Feature Extraction</h3> | |
| <p class="text-gray-600 text-center">We compute persistence diagrams and Betti numbers to capture the essential shape characteristics of brain structures.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-brain text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Neural Network Analysis</h3> | |
| <p class="text-gray-600 text-center">Our deep learning model processes topological features to identify abnormal patterns indicative of tumors.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Confidence Scoring</h3> | |
| <p class="text-gray-600 text-center">The system provides a confidence score based on the persistence of topological features in abnormal regions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-gray-100 py-16" id="research"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Topological Analysis Mathematics</h2> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <h3 class="text-2xl font-bold mb-4">1. Persistent Homology</h3> | |
| <p class="mb-4">Our system uses algebraic topology to quantify shape characteristics through persistent homology:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">Filtration Process</h4> | |
| <p>For image I: Ω → ℝ, we construct filtration:</p> | |
| <p class="text-center my-2 font-mono"> | |
| F(α) = {p ∈ Ω | I(p) ≥ α}, α ∈ [0, 255] | |
| </p> | |
| <p>Tracking topological features across scales α</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">Persistence Diagram</h4> | |
| <p>For each topological feature (component, hole):</p> | |
| <p class="text-center my-2 font-mono"> | |
| D(I) = {(b<sub>i</sub>, d<sub>i</sub>) ∈ ℝ² | i ∈ features} | |
| </p> | |
| <p>Where b=birth time, d=death time</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8 mb-8"> | |
| <h3 class="text-2xl font-bold mb-4">2. Betti Numbers Analysis</h3> | |
| <p>We compute Betti numbers for tumor characterization:</p> | |
| <div class="overflow-x-auto mt-4"> | |
| <table class="min-w-full bg-white"> | |
| <thead class="bg-gray-800 text-white"> | |
| <tr> | |
| <th class="py-3 px-4">Betti Number</th> | |
| <th class="py-3 px-4">Description</th> | |
| <th class="py-3 px-4">Tumor Significance</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b"> | |
| <td class="py-3 px-4 font-bold">β₀</td> | |
| <td class="py-3 px-4">Connected components</td> | |
| <td class="py-3 px-4">Tumor count/multiplicity</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-3 px-4 font-bold">β₁</td> | |
| <td class="py-3 px-4">1-dimensional holes</td> | |
| <td class="py-3 px-4">Tumor morphology complexity</td> | |
| </tr> | |
| <tr> | |
| <td class="py-3 px-4 font-bold">β₂</td> | |
| <td class="py-3 px-4">Void spaces</td> | |
| <td class="py-3 px-4">3D tumor structure analysis</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold mb-4">3. Topological Loss Function</h3> | |
| <p>Our model optimizes using persistent homology-based loss:</p> | |
| <div class="mt-4 space-y-4"> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <p class="font-mono text-center"> | |
| L<sub>topo</sub> = ∑|D<sub>pred</sub> - D<sub>true</sub>|² + λW(D<sub>pred</sub>, D<sub>true</sub>) | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="p-4 border rounded-lg"> | |
| <h4 class="font-bold mb-2">Wasserstein Distance</h4> | |
| <p>Measures similarity between persistence diagrams:</p> | |
| <p class="mt-2 font-mono"> | |
| W(D₁,D₂) = inf<sub>η</sub> ∑||x - η(x)||<sub>p</sub> | |
| </p> | |
| </div> | |
| <div class="p-4 border rounded-lg"> | |
| <h4 class="font-bold mb-2">Euler Characteristic</h4> | |
| <p>Alternating sum of Betti numbers:</p> | |
| <p class="mt-2 font-mono"> | |
| χ = β₀ - β₁ + β₂ | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-brain text-blue-300 mr-2"></i> NeuroScan | |
| </h3> | |
| <p class="text-gray-400">Advanced topological analysis for early brain tumor detection.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Research</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Publications</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">GitHub Repository</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Dataset</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">White Paper</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">+91 12345 67891</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">BIT Mesra, Ranchi, Jharkhand</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2025 NeuroScan. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const originalImage = document.getElementById('originalImage'); | |
| const originalImageContainer = document.getElementById('originalImageContainer'); | |
| const scanPlaceholder = document.getElementById('scanPlaceholder'); | |
| const analyzeBtn = document.getElementById('analyzeBtn'); | |
| const resultsSection = document.getElementById('resultsSection'); | |
| const segmentationPlaceholder = document.getElementById('segmentationPlaceholder'); | |
| const featuresPlaceholder = document.getElementById('featuresPlaceholder'); | |
| const featuresResults = document.getElementById('featuresResults'); | |
| const diagnosisCard = document.getElementById('diagnosisCard'); | |
| const segmentationCanvas = document.getElementById('segmentationCanvas'); | |
| const scanLine = document.getElementById('scanLine'); | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('active'); | |
| } | |
| dropzone.addEventListener('drop', handleDrop, false); | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', function(e) { | |
| handleFiles(e.target.files); | |
| }); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| function handleFiles(files) { | |
| if (files.length) { | |
| const file = files[0]; | |
| if (file.type.match('image.*')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| originalImage.src = e.target.result; | |
| originalImage.classList.remove('hidden'); | |
| scanPlaceholder.classList.add('hidden'); | |
| analyzeBtn.disabled = false; | |
| } | |
| reader.readAsDataURL(file); | |
| } else { | |
| alert('Please upload an image file (JPEG, PNG, etc.)'); | |
| } | |
| } | |
| } | |
| // Analyze button click | |
| analyzeBtn.addEventListener('click', function() { | |
| // Show loading state | |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...'; | |
| analyzeBtn.disabled = true; | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| // Simulate analysis process | |
| setTimeout(() => { | |
| // Show segmentation map (simulated) | |
| segmentationPlaceholder.classList.add('hidden'); | |
| // Draw a simple segmentation (in a real app, this would come from your model) | |
| const ctx = segmentationCanvas.getContext('2d'); | |
| segmentationCanvas.classList.remove('hidden'); | |
| segmentationCanvas.width = originalImage.naturalWidth || 300; | |
| segmentationCanvas.height = originalImage.naturalHeight || 300; | |
| // Draw original image (grayscale) | |
| const img = new Image(); | |
| img.onload = function() { | |
| ctx.drawImage(img, 0, 0, segmentationCanvas.width, segmentationCanvas.height); | |
| // Convert to grayscale | |
| const imageData = ctx.getImageData(0, 0, segmentationCanvas.width, segmentationCanvas.height); | |
| const data = imageData.data; | |
| for (let i = 0; i < data.length; i += 4) { | |
| const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; | |
| data[i] = avg; // R | |
| data[i + 1] = avg; // G | |
| data[i + 2] = avg; // B | |
| } | |
| ctx.putImageData(imageData, 0, 0); | |
| // Add scan line animation | |
| scanLine.classList.remove('hidden'); | |
| // Simulate tumor segmentation (random circles for demo) | |
| ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'; | |
| ctx.beginPath(); | |
| const centerX = segmentationCanvas.width / 2 + (Math.random() * 50 - 25); | |
| const centerY = segmentationCanvas.height / 2 + (Math.random() * 50 - 25); | |
| const radius = 30 + Math.random() * 40; | |
| ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); | |
| ctx.fill(); | |
| // Show features after a delay | |
| setTimeout(() => { | |
| featuresPlaceholder.classList.add('hidden'); | |
| featuresResults.classList.remove('hidden'); | |
| // Show diagnosis after another delay | |
| setTimeout(() => { | |
| diagnosisCard.classList.remove('hidden'); | |
| analyzeBtn.innerHTML = '<i class="fas fa-redo mr-2"></i> Analyze Another'; | |
| analyzeBtn.disabled = false; | |
| }, 1000); | |
| }, 2000); | |
| }; | |
| img.src = originalImage.src; | |
| }, 1500); | |
| }); | |
| // Initialize with a sample image for demo purposes | |
| originalImage.onload = function() { | |
| originalImage.classList.remove('hidden'); | |
| scanPlaceholder.classList.add('hidden'); | |
| analyzeBtn.disabled = false; | |
| }; | |
| originalImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Axial_brain_MRI.jpg/640px-Axial_brain_MRI.jpg'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |