templates/index.html

{% extends "base.html" %}

{% block title %}NeuroScope AI | Brain MRI Tumor Segmentation And Classification{% endblock %}

{% block content %}
<section class="relative overflow-hidden rounded-[2rem] glass-card px-6 py-10 sm:px-8 lg:px-12 lg:py-14">
    <div class="grid items-center gap-10 lg:grid-cols-[1.2fr_0.8fr]">
        <div>
            <div class="fade-up inline-flex items-center gap-2 rounded-full border border-violet-300/15 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-violet-100/80">
                NeuroScope AI For Brain MRI Analysis
            </div>

            <h1 class="fade-up-delay mt-6 max-w-3xl text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
                U-Net powered brain MRI tumor segmentation, classification, and diagnostic support in one workflow.
            </h1>

            <p class="fade-up-delay-2 mt-6 max-w-2xl text-base leading-8 soft-text sm:text-lg">
                NeuroScope AI is a deep learning medical assistant built with TensorFlow and Keras. It takes a brain MRI image, segments and masks suspicious tumor regions, classifies the scan as glioma, pituitary, meningioma, or no_tumor, and generates a summary of findings to support radiologists during diagnosis.
            </p>

            <div class="fade-up-delay-2 mt-8 flex flex-col gap-4 sm:flex-row">
                <a href="{{ url_for('analyze') }}" class="glow-ring inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-violet-700 via-purple-600 to-fuchsia-500 px-6 py-3 text-sm font-semibold text-white transition duration-300 hover:scale-[1.02] hover:shadow-[0_0_40px_rgba(168,85,247,0.35)]">
                    Get Started
                </a>
                <a href="#full-description" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 px-6 py-3 text-sm font-semibold text-white/80 transition hover:border-violet-300/30 hover:bg-white/10 hover:text-white">
                    Full Description
                </a>
            </div>

            <div class="mt-8 grid gap-4 sm:grid-cols-3">
                <div class="stat-chip rounded-2xl p-4 fade-up">
                    <p class="text-xs uppercase tracking-[0.2em] text-white/45">Output</p>
                    <p class="mt-2 text-lg font-semibold text-white">4-Class Prediction</p>
                </div>
                <div class="stat-chip rounded-2xl p-4 fade-up-delay">
                    <p class="text-xs uppercase tracking-[0.2em] text-white/45">Overlay</p>
                    <p class="mt-2 text-lg font-semibold text-white">Tumor Segmentation Mask</p>
                </div>
                <div class="stat-chip rounded-2xl p-4 fade-up-delay-2">
                    <p class="text-xs uppercase tracking-[0.2em] text-white/45">Summary</p>
                    <p class="mt-2 text-lg font-semibold text-white">Findings For Review</p>
                </div>
            </div>
        </div>

        <div class="fade-up-delay relative">
            <div class="glass-panel rounded-[2rem] p-5 shadow-glow">
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <p class="text-xs uppercase tracking-[0.22em] text-violet-100/50">Live Preview</p>
                        <h2 class="mt-1 text-2xl font-bold text-white">NeuroScope AI Pipeline</h2>
                    </div>
                    <span class="rounded-full border border-emerald-300/20 bg-emerald-500/15 px-3 py-1 text-xs font-semibold text-emerald-100">Ready</span>
                </div>

                <div class="grid gap-4">
                    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-[#1b1731] to-[#271146] p-4">
                        <div class="flex items-center justify-between text-sm text-white/70">
                            <span>Primary Input</span>
                            <span>Brain MRI Scan</span>
                        </div>
                        <div class="mt-4 overflow-hidden rounded-2xl border border-white/10 bg-[#090811] p-4">
                            <svg viewBox="0 0 360 220" class="h-auto w-full">
                                <defs>
                                    <linearGradient id="brainGlow" x1="0" y1="0" x2="1" y2="1">
                                        <stop offset="0%" stop-color="#7c3aed"/>
                                        <stop offset="100%" stop-color="#f472b6"/>
                                    </linearGradient>
                                </defs>
                                <rect width="360" height="220" rx="24" fill="#0b0b13"/>
                                <circle cx="180" cy="110" r="74" fill="none" stroke="#8b5cf6" stroke-opacity="0.25" stroke-width="2"/>
                                <path d="M122 90C125 63 150 49 180 49C211 49 237 64 238 90C260 102 271 127 264 149C256 173 231 182 211 176C197 188 164 190 147 177C118 180 96 166 92 140C88 119 98 100 122 90Z" fill="none" stroke="url(#brainGlow)" stroke-width="4"/>
                                <path d="M180 56V168M147 71C159 88 159 130 147 146M213 71C201 88 201 130 213 146M125 99C144 106 150 114 156 124M235 99C216 106 210 114 204 124" stroke="#f5d0fe" stroke-opacity="0.65" stroke-width="3" stroke-linecap="round"/>
                                <circle cx="224" cy="98" r="14" fill="#f472b6" fill-opacity="0.32"/>
                            </svg>
                        </div>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                            <p class="text-xs uppercase tracking-[0.2em] text-white/45">Model Tasks</p>
                            <p class="mt-2 text-sm leading-7 text-white/75">Segment tumor regions, classify the scan, and generate a concise findings summary from one submission.</p>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                            <p class="text-xs uppercase tracking-[0.2em] text-white/45">Clinical Role</p>
                            <p class="mt-2 text-sm leading-7 text-white/75">A medical assistant intended to help radiologists inspect MRI findings with faster visual and categorical cues.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="full-description" class="section-anchor mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
    <div class="glass-panel rounded-[2rem] p-6 sm:p-8">
        <p class="text-xs uppercase tracking-[0.24em] text-violet-100/50">Project Description</p>
        <h2 class="mt-3 text-3xl font-bold text-white">NeuroScope AI is designed for intelligent brain MRI tumor analysis.</h2>
        <p class="mt-5 text-sm leading-8 soft-text sm:text-base">
            The project is centered on a deep learning neural network workflow for brain MRI interpretation. Its core model behavior is to detect whether a tumor-like region is present, segment that region, apply a mask to highlight it, and then classify the case into glioma, pituitary, meningioma, or no_tumor. The system is built to turn raw scan input into structured visual and categorical output that can be reviewed quickly.
        </p>
    </div>

    <div class="glass-panel rounded-[2rem] p-6 sm:p-8">
        <p class="text-xs uppercase tracking-[0.24em] text-violet-100/50">Full Description</p>
        <h2 class="mt-3 text-3xl font-bold text-white">What the model and interface are built to deliver.</h2>
        <p class="mt-5 text-sm leading-8 soft-text sm:text-base">
            NeuroScope AI is built with TensorFlow and Keras and uses a U-Net based segmentation approach as part of its analysis pipeline. After processing an uploaded brain MRI, it produces a tumor mask, a multiclass prediction, and a summary of findings intended to support diagnostic review. The interface brings these outputs together in a single medical assistant workflow that helps radiologists inspect suspicious regions with more speed and structure.
        </p>
    </div>
</section>

<section id="how-to-use" class="section-anchor mt-8 grid gap-6 lg:grid-cols-3">
    <div class="glass-panel rounded-[2rem] p-6">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500/15 text-lg font-bold text-violet-100">1</div>
        <h3 class="text-xl font-bold text-white">Upload A Brain MRI</h3>
        <p class="mt-3 text-sm leading-7 soft-text">Start the workflow by moving into the analysis page and submitting a brain MRI image for model processing.</p>
    </div>

    <div class="glass-panel rounded-[2rem] p-6">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500/15 text-lg font-bold text-violet-100">2</div>
        <h3 class="text-xl font-bold text-white">Run Segmentation And Classification</h3>
        <p class="mt-3 text-sm leading-7 soft-text">The model segments the tumor region if one is detected, masks the area, and classifies the scan into one of four diagnostic categories.</p>
    </div>

    <div class="glass-panel rounded-[2rem] p-6">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500/15 text-lg font-bold text-violet-100">3</div>
        <h3 class="text-xl font-bold text-white">Review Findings Summary</h3>
        <p class="mt-3 text-sm leading-7 soft-text">Inspect the generated mask, predicted tumor class, confidence score, and summary of findings to support radiology review.</p>
    </div>
</section>
{% endblock %}