new

2025-11-04 13:20:18 +00:00 · 2025-11-04 13:20:18 +00:00 · f6a12148bf
commit f6a12148bf
parent 55f05d3b3a
10 changed files with 606 additions and 147 deletions
--- a/api/detect.php
+++ b/api/detect.php
@ -0,0 +1,72 @@
+<?php
+header('Content-Type: application/json');
+
+// Define absolute paths for security and reliability
+$uploadDir = '/home/ubuntu/executor/workspace/uploads/';
+$pythonScriptPath = '/home/ubuntu/executor/workspace/ml/predict.py';
+// It's better to use a specific python version if possible
+$pythonExecutable = 'python3';
+
+$response = [];
+
+// Check if a file was uploaded and there were no errors
+if (isset($_FILES['mri_image']) && $_FILES['mri_image']['error'] === UPLOAD_ERR_OK) {
+    $tmpName = $_FILES['mri_image']['tmp_name'];
+    
+    // Sanitize the original filename and create a unique, safe path
+    $originalName = basename($_FILES['mri_image']['name']);
+    $safeName = preg_replace("/[^A-Za-z0-9._-]/", "", $originalName);
+    $fileExtension = pathinfo($safeName, PATHINFO_EXTENSION) ?: 'tmp';
+    $uniqueName = 'mri_' . microtime(true) . '.' . $fileExtension;
+    $uploadFilePath = $uploadDir . $uniqueName;
+
+    // Move the uploaded file from the temporary location to our uploads directory
+    if (move_uploaded_file($tmpName, $uploadFilePath)) {
+        // Prepare the shell command to execute the Python script
+        // escapeshellarg() is crucial for security to prevent command injection
+        $command = $pythonExecutable . ' ' . escapeshellarg($pythonScriptPath) . ' ' . escapeshellarg($uploadFilePath);
+        
+        // Execute the command and capture the output
+        $ml_output = shell_exec($command);
+
+        // IMPORTANT: Clean up the uploaded file immediately after use
+        unlink($uploadFilePath);
+
+        if ($ml_output) {
+            // Decode the JSON output from the Python script
+            $ml_response = json_decode(trim($ml_output), true);
+
+            if ($ml_response && isset($ml_response['label']) && isset($ml_response['confidence'])) {
+                // If the response is valid, format it for the frontend
+                $response = [
+                    'success' => true,
+                    'prediction' => $ml_response['label'],
+                    'confidence' => $ml_response['confidence'],
+                    'filename' => htmlspecialchars($safeName)
+                ];
+            } else {
+                $response = ['success' => false, 'error' => 'ML script returned invalid data.'];
+            }
+        } else {
+            $response = ['success' => false, 'error' => 'Failed to execute the ML model script. Check server logs for details.'];
+        }
+    } else {
+        $response = ['success' => false, 'error' => 'Failed to save the uploaded file. Check directory permissions.'];
+    }
+} else {
+    // Handle various upload errors
+    $uploadErrors = [
+        UPLOAD_ERR_INI_SIZE => 'File is too large (server limit).',
+        UPLOAD_ERR_FORM_SIZE => 'File is too large (form limit).',
+        UPLOAD_ERR_PARTIAL => 'File was only partially uploaded.',
+        UPLOAD_ERR_NO_FILE => 'No file was uploaded.',
+        UPLOAD_ERR_NO_TMP_DIR => 'Missing a temporary folder.',
+        UPLOAD_ERR_CANT_WRITE => 'Failed to write file to disk.',
+        UPLOAD_ERR_EXTENSION => 'A PHP extension stopped the file upload.',
+    ];
+    $errorCode = $_FILES['mri_image']['error'] ?? UPLOAD_ERR_NO_FILE;
+    $errorMsg = $uploadErrors[$errorCode] ?? 'An unknown upload error occurred.';
+    $response = ['success' => false, 'error' => $errorMsg];
+}
+
+echo json_encode($response);
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -0,0 +1,113 @@
+/* Custom Styles for NeuroDetect */
+body {
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.navbar-brand {
+    letter-spacing: -0.5px;
+}
+
+.hero-section {
+    padding: 6rem 0;
+    background-color: #ffffff;
+    background-image: linear-gradient(to bottom, rgba(233, 242, 255, 0.5), #ffffff);
+}
+
+.hero-section .display-4 {
+    font-weight: 700;
+    color: #0d244f;
+}
+
+.hero-section .lead {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    color: #495057;
+}
+
+.btn-primary {
+    background-color: #0D6EFD;
+    border-color: #0D6EFD;
+    padding: 0.75rem 1.5rem;
+    font-weight: 500;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.btn-primary:hover {
+    background-color: #0b5ed7;
+    border-color: #0a58ca;
+}
+
+.section-title {
+    font-weight: 600;
+    color: #0d244f;
+    margin-bottom: 2rem;
+}
+
+.intro-text {
+    line-height: 1.8;
+}
+
+.image-gallery .card {
+    border: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.image-gallery .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
+.image-gallery .card-img-top {
+    height: 220px;
+    object-fit: cover;
+}
+
+footer {
+    background-color: #ffffff;
+}
+
+/* Detection Page Styles */
+.upload-card, .result-card {
+    height: 100%;
+}
+
+.upload-box {
+    border: 2px dashed #dee2e6;
+    border-radius: 0.5rem;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.upload-box:hover, .upload-box.dragover {
+    background-color: #f8f9fa;
+    border-color: #0D6EFD;
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: #0D6EFD;
+}
+
+.upload-text {
+    margin-top: 1rem;
+    color: #6c757d;
+}
+
+#analyze-btn:disabled {
+    cursor: not-allowed;
+}
+
+#result-display .progress-bar {
+    transition: width 0.5s ease-in-out;
+}
+
+.result-card .section-title {
+    margin-bottom: 1.5rem;
+}
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1,122 @@
+console.log("NeuroDetect main.js loaded.");
+
+document.addEventListener('DOMContentLoaded', function () {
+    const uploadBox = document.getElementById('upload-box');
+    const mriImageInput = document.getElementById('mri_image');
+    const selectFileBtn = document.getElementById('select-file-btn');
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const imagePreviewContainer = document.getElementById('image-preview-container');
+    const imagePreview = document.getElementById('image-preview');
+    const removeImageBtn = document.getElementById('remove-image-btn');
+    const uploadForm = document.getElementById('upload-form');
+    const resultPlaceholder = document.getElementById('result-placeholder');
+    const resultDisplay = document.getElementById('result-display');
+    const predictionResult = document.getElementById('prediction-result');
+    const confidenceBar = document.getElementById('confidence-bar');
+
+    function handleFileSelect(file) {
+        if (file && file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                imagePreview.src = e.target.result;
+                imagePreviewContainer.style.display = 'block';
+                uploadBox.style.display = 'none';
+                analyzeBtn.disabled = false;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    if (uploadBox) {
+        uploadBox.addEventListener('click', () => mriImageInput.click());
+        selectFileBtn.addEventListener('click', () => mriImageInput.click());
+
+        mriImageInput.addEventListener('change', (e) => {
+            handleFileSelect(e.target.files[0]);
+        });
+
+        uploadBox.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadBox.classList.add('dragover');
+        });
+
+        uploadBox.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadBox.classList.remove('dragover');
+        });
+
+        uploadBox.addEventListener('drop', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadBox.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            mriImageInput.files = e.dataTransfer.files;
+            handleFileSelect(file);
+        });
+
+        removeImageBtn.addEventListener('click', () => {
+            mriImageInput.value = '';
+            imagePreview.src = '#';
+            imagePreviewContainer.style.display = 'none';
+            uploadBox.style.display = 'block';
+            analyzeBtn.disabled = true;
+            resultDisplay.style.display = 'none';
+            resultPlaceholder.style.display = 'block';
+        });
+
+        uploadForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            analyzeBtn.disabled = true;
+            analyzeBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Analyzing...';
+
+            resultPlaceholder.style.display = 'block';
+            resultDisplay.style.display = 'none';
+
+            const formData = new FormData(this);
+
+            fetch('api/detect.php', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    predictionResult.textContent = data.prediction;
+                    if (data.prediction === 'Alzheimer Detected') {
+                        predictionResult.className = 'fw-bold text-danger';
+                    } else {
+                        predictionResult.className = 'fw-bold text-success';
+                    }
+                    
+                    const confidencePercent = Math.round(data.confidence * 100);
+                    confidenceBar.style.width = confidencePercent + '%';
+                    confidenceBar.textContent = confidencePercent + '%';
+                    confidenceBar.setAttribute('aria-valuenow', confidencePercent);
+
+                    if (confidencePercent > 85) {
+                        confidenceBar.classList.remove('bg-warning');
+                        confidenceBar.classList.add('bg-primary');
+                    } else {
+                        confidenceBar.classList.remove('bg-primary');
+                        confidenceBar.classList.add('bg-warning');
+                    }
+
+                    resultPlaceholder.style.display = 'none';
+                    resultDisplay.style.display = 'block';
+                } else {
+                    alert('Error: ' + data.error);
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('An unexpected error occurred. Please try again.');
+            })
+            .finally(() => {
+                analyzeBtn.disabled = false;
+                analyzeBtn.innerHTML = 'Analyze Scan';
+            });
+        });
+    }
+});
--- a/assets/pasted-20251104-131846-2dcc8857.png
+++ b/assets/pasted-20251104-131846-2dcc8857.png
--- a/detection.php
+++ b/detection.php
@ -0,0 +1,61 @@
+<?php include 'includes/header.php'; ?>
+
+<main class="container my-5">
+    <div class="row justify-content-center">
+        <div class="col-lg-8 text-center">
+            <h1 class="display-5 fw-bold text-primary">MRI Scan Analysis</h1>
+            <p class="lead text-muted mb-5">Upload a brain MRI scan to get a prediction for Alzheimer's disease. Our model will analyze the image and provide a result.</p>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="card shadow-sm upload-card">
+                <div class="card-body">
+                    <h5 class="card-title section-title">1. Upload Image</h5>
+                    <form id="upload-form" action="api/detect.php" method="post" enctype="multipart/form-data">
+                        <div class="upload-box" id="upload-box">
+                            <i class="bi bi-cloud-arrow-up-fill upload-icon"></i>
+                            <p class="upload-text">Drag & drop your MRI scan here, or click to select a file.</p>
+                            <input type="file" name="mri_image" id="mri_image" class="form-control" accept="image/jpeg, image/png, image/gif" hidden>
+                        </div>
+                        <div class="text-center mt-3">
+                            <button type="button" id="select-file-btn" class="btn btn-outline-primary">Select File</button>
+                            <button type="submit" id="analyze-btn" class="btn btn-primary" disabled>Analyze Scan</button>
+                        </div>
+                    </form>
+                    <div id="image-preview-container" class="mt-4 text-center" style="display: none;">
+                        <h6 class="text-muted">Image Preview:</h6>
+                        <img id="image-preview" src="#" alt="Image Preview" class="img-fluid rounded" style="max-height: 300px;"/>
+                        <button id="remove-image-btn" class="btn btn-sm btn-outline-danger mt-2">Remove Image</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card shadow-sm result-card">
+                <div class="card-body">
+                    <h5 class="card-title section-title">2. Analysis Result</h5>
+                    <div id="result-placeholder" class="text-center text-muted pt-5 pb-5">
+                        <i class="bi bi-hourglass-split" style="font-size: 3rem;"></i>
+                        <p class="mt-3">Your analysis results will appear here.</p>
+                    </div>
+                    <div id="result-display" style="display: none;">
+                        <h4 class="mb-3">Prediction: <span id="prediction-result" class="fw-bold"></span></h4>
+                        <div class="progress mb-3" style="height: 25px;">
+                            <div id="confidence-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                        <p class="text-center text-muted small mb-4">Confidence Score</p>
+                        
+                        <h5 class="section-title mt-4">Model Performance</h5>
+                        <div style="width: 100%; height: 250px; background-color: #f0f0f0; border-radius: 8px;" class="text-center pt-5">
+                             <p class="text-muted">[Sample Chart: Model Accuracy/Loss]</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/includes/footer.php
+++ b/includes/footer.php
@ -0,0 +1,11 @@
+<footer class="py-4 mt-auto">
+    <div class="container text-center text-muted">
+        <p>&copy; <?php echo date("Y"); ?> NeuroDetect. All Rights Reserved.</p>
+        <p class="small">Built with <a href="https://flatlogic.com" target="_blank" rel="noopener">Flatlogic</a></p>
+    </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>
--- a/includes/header.php
+++ b/includes/header.php
@ -0,0 +1,44 @@
+<?php
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeuroDetect - Alzheimer's Disease Detection</title>
+    <meta name="description" content="A machine learning project for early detection of Alzheimer's disease using MRI scans. Built with Flatlogic Generator.">
+    <meta name="keywords" content="alzheimer's detection, machine learning, mri scan analysis, neural network, deep learning, medical imaging, early diagnosis, cognitive decline, neuro-imaging, brain health, kaggle dataset, Built with Flatlogic Generator">
+    <meta property="og:title" content="NeuroDetect - Alzheimer's Disease Detection">
+    <meta property="og:description" content="A machine learning project for early detection of Alzheimer's disease using MRI scans.">
+    <meta property="og:image" content="<?php echo $_SERVER['PROJECT_IMAGE_URL'] ?? ''; ?>">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="<?php echo $_SERVER['PROJECT_IMAGE_URL'] ?? ''; ?>">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body class="bg-light">
+
+<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
+    <div class="container">
+        <a class="navbar-brand fw-bold text-primary" href="index.php">
+            <i class="bi bi-brain"></i> NeuroDetect
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="index.php">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="detection.php">Detection</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
--- a/includes/pexels.php
+++ b/includes/pexels.php
@ -0,0 +1,48 @@
+<?php
+// Helper functions to interact with Pexels API
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  // Use a default public key if not set in environment
+  return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+
+function pexels_get($url) {
+  $ch = curl_init();
+  curl_setopt_array($ch, [
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+    CURLOPT_TIMEOUT => 20,
+    CURLOPT_USERAGENT => 'Flatlogic-Gemini-Agent/1.0'
+  ]);
+  $resp = curl_exec($ch);
+  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+  curl_close($ch);
+  if ($code >= 200 && $code < 300 && $resp) {
+      return json_decode($resp, true);
+  }
+  error_log("Pexels API request failed with code $code for URL: $url");
+  return null;
+}
+
+function download_to($srcUrl, $destPath) {
+  $dir = dirname($destPath);
+  if (!is_dir($dir)) {
+    if (!mkdir($dir, 0775, true)) {
+        error_log("Failed to create directory: $dir");
+        return false;
+    }
+  }
+
+  $data = @file_get_contents($srcUrl);
+  if ($data === false) {
+    error_log("Failed to download image from: $srcUrl");
+    return false;
+  }
+  
+  if (file_put_contents($destPath, $data) === false) {
+    error_log("Failed to save image to: $destPath");
+    return false;
+  }
+  return true;
+}
--- a/index.php
+++ b/index.php
@ -1,150 +1,100 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');

-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Placeholder images for demonstration
+$images = [
+    [
+        'src' => 'https://images.pexels.com/photos/40568/medical-instrument-brain-magnifying-glass-search-40568.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+        'photographer' => 'Public Domain Pictures',
+        'photographer_url' => 'https://www.pexels.com/@public-domain-pictures',
+        'alt' => 'Brain MRI',
+    ],
+    [
+        'src' => 'https://images.pexels.com/photos/3825586/pexels-photo-3825586.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+        'photographer' => 'ThisIsEngineering',
+        'photographer_url' => 'https://www.pexels.com/@thisisengineering/',
+        'alt' => 'Neurology Research',
+    ],
+    [
+        'src' => 'https://images.pexels.com/photos/6120403/pexels-photo-6120403.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+        'photographer' => 'Kampus Production',
+        'photographer_url' => 'https://www.pexels.com/@kampus-production/',
+        'alt' => 'Senior Patient Care',
+    ],
+];
+
+include 'includes/header.php';
 ?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+
+<main>
+    <!-- Hero Section -->
+    <section class="hero-section text-center">
+        <div class="container">
+            <h1 class="display-4">Alzheimer’s Disease Detection</h1>
+            <p class="lead mt-3">Utilizing machine learning for early detection of Alzheimer's disease, offering hope for better management and care.</p>
+            <a href="detection.php" class="btn btn-primary btn-lg mt-4">Get Started</a>
        </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+    </section>
+
+    <!-- Introduction Section -->
+    <section class="py-5">
+        <div class="container">
+            <div class="row align-items-center g-5">
+                <div class="col-lg-6">
+                    <h2 class="section-title">What is Alzheimer's Disease?</h2>
+                    <p class="intro-text">
+                        Alzheimer's disease is a progressive brain disorder that slowly destroys memory and thinking skills, and eventually, the ability to carry out the simplest tasks. In most people with the disease — those with the late-onset type — symptoms first appear in their mid-60s.
+                    </p>
+                    <p class="intro-text">
+                        Early detection is crucial as it allows for timely intervention, which can help manage symptoms and improve quality of life. Our project leverages the power of machine learning to analyze brain MRI scans, aiming to identify signs of Alzheimer's at an earlier stage.
+                    </p>
                </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+                <div class="col-lg-6 text-center">
+                    <?php if (!empty($images) && isset($images[0])): ?>
+                        <img src="<?php echo htmlspecialchars($images[0]['src']); ?>" alt="<?php echo htmlspecialchars($images[0]['alt']); ?>" class="img-fluid rounded shadow-lg">
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Image Gallery Section -->
+    <section class="py-5 bg-white">
+        <div class="container">
+            <h2 class="section-title text-center">Relevant Illustrations</h2>
+            <div class="row g-4 image-gallery justify-content-center">
+                <?php if (isset($images[1])): ?>
+                <div class="col-md-6 col-lg-5">
+                    <div class="card h-100">
+                        <img src="<?php echo htmlspecialchars($images[1]['src']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($images[1]['alt']); ?>">
+                        <div class="card-body text-center">
+                            <p class="card-text small text-muted">
+                                Photo by <a href="<?php echo htmlspecialchars($images[1]['photographer_url']); ?>" target="_blank" rel="noopener"><?php echo htmlspecialchars($images[1]['photographer']); ?></a> on Pexels.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <?php endif; ?>
+                <?php if (isset($images[2])): ?>
+                <div class="col-md-6 col-lg-5">
+                    <div class="card h-100">
+                        <img src="<?php echo htmlspecialchars($images[2]['src']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($images[2]['alt']); ?>">
+                        <div class="card-body text-center">
+                            <p class="card-text small text-muted">
+                                Photo by <a href="<?php echo htmlspecialchars($images[2]['photographer_url']); ?>" target="_blank" rel="noopener"><?php echo htmlspecialchars($images[2]['photographer']); ?></a> on Pexels.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <?php endif; ?>
+
+                <?php if (count($images) < 2): ?>
+                     <div class="col">
+                        <p class="text-center text-muted">Could not load additional images.</p>
+                    </div>
+                <?php endif; ?>
+            </div>
+        </div>
+    </section>
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/ml/predict.py
+++ b/ml/predict.py
@ -0,0 +1,38 @@
+
+import json
+import random
+import sys
+import time
+
+def main():
+    """
+    This is a placeholder Python script for ML model inference.
+    It simulates a model prediction by returning a random result.
+    
+    In a real-world application, this script would:
+    1. Load a pre-trained machine learning model (e.g., from an .h5 or .pkl file).
+    2. Pre-process the input image received from the command-line argument.
+    3. Run the image through the model to get a prediction.
+    4. Return the prediction results as a JSON string.
+    """
+    # Simulate processing time
+    time.sleep(1.5)
+
+    # Get image path from command line arguments (for context, not used in this placeholder)
+    image_path = sys.argv[1] if len(sys.argv) > 1 else "no_image_provided.jpg"
+
+    # Possible outcomes
+    predictions = [
+        {"label": "Alzheimer Detected", "confidence": round(random.uniform(0.75, 0.98), 2)},
+        {"label": "Healthy", "confidence": round(random.uniform(0.80, 0.99), 2)}
+    ]
+    
+    # Choose a random result to simulate a real prediction
+    result = random.choice(predictions)
+
+    # Output the result as a JSON string to be captured by the PHP script
+    print(json.dumps(result))
+
+if __name__ == "__main__":
+    # This check ensures the main function runs only when the script is executed directly
+    main()