initial commit

.gitattributes

@@ -0,0 +1 @@
+*.pth filter=lfs diff=lfs merge=lfs -text

.gitingore

@@ -0,0 +1 @@
+/venv

Procfile

@@ -0,0 +1 @@
+web: uvicorn main:app --host 0.0.0.0 --port $PORT

README.md

@@ -0,0 +1,134 @@
+
+# FaceAging AI — Realistic Face Aging and De-Aging with AI
+
+**FaceAging AI** is an advanced AI-powered web application that transforms face images to appear older or younger with realistic results. It leverages deep learning models for face detection and age transformation, offering an intuitive interface for users to upload images and see instant aged or de-aged outputs.
+
+---
+
+## Features
+
+* **Face Aging & De-Aging**: Convert young faces to old and vice versa with high visual fidelity.
+* **Automatic Face Detection**: Detects faces in uploaded images using OpenCV to process only valid faces.
+* **Base64 Image Encoding**: Returns transformed images efficiently encoded for seamless frontend display.
+* **FastAPI Backend**: Robust and scalable backend API handling image processing and AI inference.
+* **Simple, Responsive UI**: User-friendly frontend using HTML, CSS, JavaScript, and Jinja2 templates.
+* **CORS Enabled**: Allows cross-origin requests for flexible frontend-backend integration.
+
+---
+
+## Tech Stack
+
+* **Backend**: FastAPI (Python)
+* **Frontend**: HTML, CSS, JavaScript, Jinja2 Templates
+* **AI & Image Processing**: OpenCV, Pillow, NumPy, Custom Face Aging Models
+* **Deployment**: Cloud-ready (Render, Heroku, or any ASGI-compatible platform)
+
+---
+
+## Project Structure
+
+```
+faceaging-ai/
+├── main.py                     # FastAPI app entry point with endpoints
+├── helper.py                   # AI face aging helper functions & models
+├── static/                     # Static files (CSS, JS, images)
+├── templates/                  # HTML templates (Jinja2)
+├── requirements.txt            # Python dependencies
+├── README.md                   # Project documentation (this file)
+└── Procfile                    # For deployment (if using Heroku/Render)
+```
+
+---
+
+## Setup and Installation
+
+### Prerequisites
+
+* Python 3.8+
+* Virtual environment tool (venv or conda)
+* FastAPI, Uvicorn, OpenCV, Pillow, NumPy (see requirements.txt)
+
+### Steps
+
+1. **Clone the repository**
+
+```bash
+git clone https://github.com/parthmax2/faceaging-ai.git
+cd faceaging-ai
+```
+
+2. **Create and activate a virtual environment**
+
+```bash
+python -m venv venv
+source venv/bin/activate      # Windows: venv\Scripts\activate
+```
+
+3. **Install dependencies**
+
+```bash
+pip install -r requirements.txt
+```
+
+4. **Run the FastAPI development server**
+
+```bash
+uvicorn main:app --reload
+```
+
+5. **Access the app**
+
+Open your browser and navigate to:
+
+```
+http://127.0.0.1:8000
+```
+
+Upload a face image, select the conversion type (Young to Old or Old to Young), and click Generate to see the transformed image.
+
+---
+
+## API Endpoints
+
+* `GET /` — Serves the main web interface.
+* `POST /convert/` — Accepts an image file and conversion type, returns the aged or de-aged image as a base64 string.
+
+---
+
+## Deployment
+
+You can deploy this FastAPI app on any ASGI-compatible platform:
+
+* **Render:** Easy cloud deployment with automatic Dockerfile or Python environment detection.
+* **Heroku:** Use the provided `Procfile` and `requirements.txt`.
+* **Other platforms:** Ensure support for Python 3.8+, ASGI, and WebSocket if needed.
+
+---
+
+## Contribution
+
+Contributions are welcome! Please open issues or submit pull requests for:
+
+* Improving model accuracy
+* Enhancing UI/UX
+* Adding new features or endpoints
+* Optimizing performance
+
+---
+
+## License
+
+MIT License — free to use, modify, and distribute.
+
+---
+
+## Contact
+
+**Saksham Pathak**
+Master’s in Artificial Intelligence & Machine Learning, IIIT Lucknow
+[GitHub](https://github.com/parthmax2) | [LinkedIn](https://linkedin.com/in/sakshampathak) | [Instagram](https://instagram.com/parthmax_)
+
+---
+
+*FaceAging AI ©  Saksham Pathak. Powered by open-source AI and computer vision technologies.*
+

helper.py

@@ -0,0 +1,138 @@
+import torch
+import torch.nn as nn
+import numpy as np
+import cv2
+from torchvision import transforms
+from PIL import Image
+
+input_nc = 3
+output_nc = 3
+
+# Squeeze-and-Excitation Block
+class SEBlock(nn.Module):
+    def __init__(self, channel, reduction=16):
+        super(SEBlock, self).__init__()
+        self.fc = nn.Sequential(
+            nn.AdaptiveAvgPool2d(1),
+            nn.Conv2d(channel, channel // reduction, 1),
+            nn.ReLU(inplace=True),
+            nn.Conv2d(channel // reduction, channel, 1),
+            nn.Sigmoid()
+        )
+    
+    def forward(self, x):
+        weights = self.fc(x)
+        return x * weights
+
+# Residual Block with SE
+class ResnetBlock(nn.Module):
+    def __init__(self, dim, reduction=16):
+        super(ResnetBlock, self).__init__()
+        self.conv_block = self.build_conv_block(dim)
+        self.se = SEBlock(dim, reduction)
+    
+    def build_conv_block(self, dim):
+        conv_block = [
+            nn.ReflectionPad2d(1),
+            nn.Conv2d(dim, dim, kernel_size=3, padding=0),
+            nn.InstanceNorm2d(dim),
+            nn.ReLU(True),
+            nn.ReflectionPad2d(1),
+            nn.Conv2d(dim, dim, kernel_size=3, padding=0),
+            nn.InstanceNorm2d(dim)
+        ]
+        return nn.Sequential(*conv_block)
+    
+    def forward(self, x):
+        out = self.conv_block(x)
+        out = self.se(out)
+        return x + out
+
+# Generator Network
+class GeneratorResNet(nn.Module):
+    def __init__(self, input_nc, output_nc, n_residual_blocks=9):
+        super(GeneratorResNet, self).__init__()
+
+        # Initial convolution block
+        model = [
+            nn.ReflectionPad2d(3),
+            nn.Conv2d(input_nc, 64, 7),
+            nn.InstanceNorm2d(64),
+            nn.ReLU(inplace=True)
+        ]
+
+        # Downsampling
+        in_features = 64
+        out_features = in_features * 2
+        for _ in range(2):
+            model += [
+                nn.Conv2d(in_features, out_features, 3, stride=2, padding=1),
+                nn.InstanceNorm2d(out_features),
+                nn.ReLU(inplace=True)
+            ]
+            in_features = out_features
+            out_features = in_features * 2
+
+        # Residual blocks
+        for _ in range(n_residual_blocks):
+            model += [ResnetBlock(in_features)]
+
+        # Upsampling
+        out_features = in_features // 2
+        for _ in range(2):
+            model += [
+                nn.ConvTranspose2d(in_features, out_features, 3, stride=2, padding=1, output_padding=1),
+                nn.InstanceNorm2d(out_features),
+                nn.ReLU(inplace=True)
+            ]
+            in_features = out_features
+            out_features = in_features // 2
+
+        # Output layer
+        model += [
+            nn.ReflectionPad2d(3),
+            nn.Conv2d(64, output_nc, 7),
+            nn.Tanh()
+        ]
+
+        self.model = nn.Sequential(*model)
+
+    def forward(self, x):
+        return self.model(x)
+
+# Instantiate models
+netG_A2B = GeneratorResNet(input_nc, output_nc)
+netG_B2A = GeneratorResNet(input_nc, output_nc)
+
+# Load model weights
+device = 'cpu'
+netG_A2B.load_state_dict(torch.load('./netG_A2B_epoch130.pth', map_location=device))
+netG_B2A.load_state_dict(torch.load('./netG_B2A_epoch130.pth', map_location=device))
+
+# Image transformation functions
+def generate_Y2O(uploaded_image):
+    to_tensor = transforms.ToTensor()
+    tensor = to_tensor(uploaded_image).unsqueeze(0)  # Add batch dimension
+    old = netG_A2B(tensor)
+    return (old.squeeze().detach().permute(1, 2, 0).numpy() + 1) / 2
+
+def generate_O2Y(uploaded_image):
+    img = cv2.resize(uploaded_image, (256, 256))
+    to_tensor = transforms.ToTensor()
+    tensor = to_tensor(img).unsqueeze(0)  # Add batch dimension
+    young = netG_B2A(tensor)
+    return (young.squeeze().detach().permute(1, 2, 0).numpy() + 1) / 2
+
+# Face detection using OpenCV
+def extract_faces_opencv(image):
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + "haarcascade_frontalface_default.xml")
+    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5)
+
+    face_crops = []
+    for (x, y, w, h) in faces:
+        y1, y2 = max(0, y - 50), min(image.shape[0], y + h)
+        x1, x2 = max(0, x - 30), min(image.shape[1], x + w + 30)
+        face_crop = image[y1:y2, x1:x2]
+        face_crops.append(face_crop)
+    return face_crops

main.py

@@ -0,0 +1,56 @@
+from fastapi import FastAPI, File, UploadFile, Form
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.requests import Request
+from helper import *
+from PIL import Image
+import numpy as np
+import io
+import cv2
+import base64
+
+app = FastAPI()
+
+# CORS for JS frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"]
+)
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+@app.get("/", response_class=HTMLResponse)
+def root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+
+@app.post("/convert/")
+async def convert_image(file: UploadFile = File(...), conversion: str = Form(...)):
+    contents = await file.read()
+    image = Image.open(io.BytesIO(contents)).convert("RGB")
+    image_np = np.array(image)
+
+    faces = extract_faces_opencv(image_np)
+    if not faces:
+        return {"error": "No face detected"}
+
+    face = cv2.resize(faces[0], (256, 256))  # process only 1 face for now
+
+    if conversion == "young_to_old":
+        result = generate_Y2O(face)
+    elif conversion == "old_to_young":
+        result = generate_O2Y(face)
+    else:
+        return {"error": "Invalid conversion type"}
+
+    # Convert to base64
+    result_img = (result * 255).astype(np.uint8)
+    _, buffer = cv2.imencode(".png", result_img[:, :, ::-1])  # BGR to RGB
+    base64_img = base64.b64encode(buffer).decode("utf-8")
+
+    return {"image": base64_img}

netG_A2B_epoch130.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:992c0132e46cf2294651f9d5c827a9c28ddb101d9531cf232a46792da0a82eed
+size 45851722

netG_B2A_epoch130.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8299523a9f28f7d28e5ec6b4431c847f7a216b4c4a33daf474e3f70b7ea204f
+size 45851722

requirements.txt

@@ -0,0 +1,9 @@
+fastapi
+uvicorn
+python-multipart
+jinja2
+pillow
+opencv-python
+torch
+numpy
+torchvision

static/script.js

@@ -0,0 +1,128 @@
+// ===== Form Submission with Backend Integration =====
+document.getElementById("uploadForm").addEventListener("submit", async function (e) {
+  e.preventDefault();
+
+  const fileInput = document.getElementById("fileInput");
+  const conversionSelect = document.getElementById("conversion");
+  const outputImage = document.getElementById("outputImage");
+  const resultDiv = document.getElementById("result");
+  const generateBtn = document.getElementById("generateBtn");
+
+  if (!fileInput.files.length) return;
+
+  const file = fileInput.files[0];
+  const conversion = conversionSelect.value;
+
+  generateBtn.disabled = true;
+  generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
+
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("conversion", conversion);
+
+  try {
+    const response = await fetch("/convert/", {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await response.json();
+
+    if (data.image) {
+      outputImage.src = `data:image/png;base64,${data.image}`;
+      outputImage.alt = `Face image after ${conversion === "young_to_old" ? "aging" : "de-aging"} transformation`;
+      outputImage.style.display = "block";
+      resultDiv.scrollIntoView({ behavior: "smooth" });
+    } else {
+      alert(data.error || "An error occurred.");
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    alert("Something went wrong. Please try again later.");
+  } finally {
+    generateBtn.disabled = false;
+    generateBtn.innerHTML = "Generate";
+  }
+});
+
+
+// ===== Dark Mode Toggle =====
+const darkToggle = document.getElementById("darkToggle");
+const body = document.body;
+const darkIcon = darkToggle.querySelector("i");
+
+function setDarkMode(enabled) {
+  if (enabled) {
+    body.classList.add("dark");
+    darkIcon.classList.replace("fa-moon", "fa-sun");
+    darkToggle.setAttribute("aria-label", "Toggle light mode");
+    darkToggle.setAttribute("title", "Toggle light mode");
+  } else {
+    body.classList.remove("dark");
+    darkIcon.classList.replace("fa-sun", "fa-moon");
+    darkToggle.setAttribute("aria-label", "Toggle dark mode");
+    darkToggle.setAttribute("title", "Toggle dark mode");
+  }
+  localStorage.setItem("faceAgingDarkMode", enabled ? "true" : "false");
+}
+
+
+
+
+// ===== Mobile Menu Toggle =====
+const mobileMenuButton = document.getElementById("mobileMenuButton");
+const mobileMenu = document.getElementById("mobileMenu");
+
+mobileMenuButton.addEventListener("click", () => {
+  const expanded = mobileMenuButton.getAttribute("aria-expanded") === "true";
+  mobileMenuButton.setAttribute("aria-expanded", !expanded);
+  mobileMenu.classList.toggle("hidden");
+});
+
+
+// ===== Header Shadow on Scroll =====
+const header = document.getElementById("header");
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 10) {
+    header.classList.add("scrolled");
+  } else {
+    header.classList.remove("scrolled");
+  }
+});
+
+
+// ===== Scroll Animations =====
+const scrollElements = document.querySelectorAll(".scroll-animate, .fade-in");
+const scrollObserver = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("visible");
+        scrollObserver.unobserve(entry.target);
+      }
+    });
+  },
+  { threshold: 0.15 }
+);
+scrollElements.forEach((el) => scrollObserver.observe(el));
+
+
+// ===== Learn More Toggle =====
+const learnMoreBtn = document.getElementById("learnMoreBtn");
+const learnMoreContent = document.getElementById("learnMoreContent");
+
+learnMoreBtn.addEventListener("click", () => {
+  const isOpen = learnMoreContent.classList.toggle("open");
+  learnMoreContent.hidden = !isOpen;
+  learnMoreBtn.setAttribute("aria-expanded", isOpen);
+  learnMoreBtn.textContent = isOpen ? "Show Less" : "Learn More";
+});
+
+
+// ===== Hero Upload Button Triggers File Picker =====
+const uploadBtnHero = document.getElementById("uploadBtnHero");
+const fileInput = document.getElementById("fileInput");
+
+uploadBtnHero.addEventListener("click", () => {
+  fileInput.click();
+});

static/style.css

@@ -0,0 +1,20 @@
+body {
+  font-family: Arial, sans-serif;
+  background: #111;
+  color: #eee;
+  text-align: center;
+  padding: 40px;
+}
+
+.container {
+  background: #222;
+  padding: 30px;
+  border-radius: 10px;
+  display: inline-block;
+}
+
+input, select, button {
+  margin: 10px;
+  padding: 10px;
+  font-size: 1em;
+}

templates/index.html

@@ -0,0 +1,775 @@
+<html class="scroll-smooth" lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <title>FaceAging AI - AI-Powered Face Age Transformation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+
+        body {
+            font-family: "Inter", sans-serif;
+            background-color: #faf9f6;
+            color: #3e2723;
+            transition: background-color 0.4s ease, color 0.4s ease;
+            min-height: 100vh;
+        }
+
+        body.dark {
+            background-color: #6d4c41;
+            color: #d7ccc8;
+        }
+
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #a1887f;
+            border-radius: 4px;
+        }
+
+        body.dark ::-webkit-scrollbar-thumb {
+            background-color: #5d4037;
+        }
+
+        header.scrolled {
+            box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
+            backdrop-filter: saturate(180%) blur(10px);
+            background-color: rgba(250, 249, 246, 0.85);
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        body.dark header.scrolled {
+            background-color: rgba(109, 76, 65, 0.9);
+            box-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
+        }
+
+        #darkToggle {
+            cursor: pointer;
+            transition: transform 0.3s ease, color 0.3s ease;
+            color: #3e2723;
+        }
+
+        #darkToggle:hover,
+        #darkToggle:focus {
+            transform: scale(1.1);
+            outline: none;
+            color: #ff7043;
+        }
+
+        body.dark #darkToggle {
+            color: #d7ccc8;
+        }
+
+        body.dark #darkToggle:hover,
+        body.dark #darkToggle:focus {
+            color: #ffccbc;
+        }
+
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.8s ease, transform 0.8s ease;
+        }
+
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .scroll-animate {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: opacity 0.8s ease, transform 0.8s ease;
+        }
+
+        .scroll-animate.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        button.primary-btn {
+            background-color: #6d4c41;
+            color: #faf9f6;
+            box-shadow: 0 4px 8px rgb(109 76 65 / 0.5);
+            transition: background-color 0.3s ease, box-shadow 0.3s ease,
+                transform 0.15s ease, color 0.3s ease;
+            border-radius: 0.5rem;
+            font-weight: 600;
+        }
+
+        button.primary-btn:hover,
+        button.primary-btn:focus {
+            background-color: #4e342e;
+            box-shadow: 0 6px 12px rgb(78 52 46 / 0.7);
+            outline: none;
+            transform: scale(1.05);
+            color: #ffccbc;
+        }
+
+        .feature-card,
+        .step-card {
+            background-color: #ffccbc;
+            border-radius: 1rem;
+            box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
+            transition: box-shadow 0.3s ease, transform 0.3s ease,
+                background-color 0.3s ease;
+            cursor: default;
+            color: #4e342e;
+        }
+
+        .feature-card:hover,
+        .feature-card:focus-within,
+        .step-card:hover,
+        .step-card:focus-within {
+            box-shadow: 0 8px 20px rgb(109 76 65 / 0.3);
+            transform: translateY(-6px);
+            outline: none;
+            background-color: #ffab91;
+            color: #3e2723;
+        }
+
+        .image-container {
+            border-radius: 1rem;
+            box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+            overflow: hidden;
+            background-color: #fff7f3;
+            position: relative;
+        }
+
+        .image-container img {
+            opacity: 0;
+            transition: opacity 1s ease;
+            display: block;
+            width: 100%;
+            height: auto;
+            user-select: none;
+            pointer-events: none;
+            border-radius: 1rem;
+        }
+
+        .image-container img.loaded {
+            opacity: 1;
+        }
+
+        .spinner {
+            border: 4px solid #e0d7d1;
+            border-top: 4px solid #6d4c41;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            animation: spin 1s linear infinite;
+            margin: auto;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .upload-area {
+            border: 2px dashed #d7ccc8;
+            border-radius: 1rem;
+            background-color: #fff7f3;
+            transition: background-color 0.3s ease, border-color 0.3s ease,
+                color 0.3s ease;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 3rem 1.5rem;
+            text-align: center;
+            color: #6d4c41;
+            user-select: none;
+            outline-offset: 4px;
+        }
+
+        .upload-area:hover,
+        .upload-area.dragover {
+            background-color: #ffebe6;
+            border-color: #6d4c41;
+            color: #4e342e;
+        }
+
+        body.dark .upload-area {
+            background-color: #4e342e;
+            color: #ffccbc;
+            border-color: #a1887f;
+        }
+
+        body.dark .upload-area:hover,
+        body.dark .upload-area.dragover {
+            background-color: #3e2723;
+            border-color: #ffab91;
+            color: #ffccbc;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .upload-label {
+            font-weight: 600;
+            font-size: 1.125rem;
+            margin-top: 1rem;
+            color: inherit;
+            user-select: none;
+        }
+
+        .before-after-container {
+            position: relative;
+            overflow: hidden;
+            border-radius: 1rem;
+            box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
+            background-color: #fff7f3;
+            max-width: 100%;
+            user-select: none;
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .before-image,
+        .after-image {
+            display: block;
+            width: 48%;
+            height: auto;
+            pointer-events: none;
+            user-select: none;
+            border-radius: 1rem;
+            box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+            transition: opacity 1s ease;
+        }
+
+        @media (max-width: 768px) {
+            .before-after-container {
+                flex-direction: column;
+            }
+
+            .before-image,
+            .after-image {
+                width: 100%;
+            }
+
+            .upload-area {
+                padding: 2rem 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .before-after-container {
+                max-height: none;
+            }
+
+            .upload-area {
+                padding: 1.5rem 1rem;
+            }
+        }
+
+        .features-grid,
+        .steps-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 1.5rem;
+        }
+
+        #learnMoreContent {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease;
+            color: #6d4c41;
+        }
+
+        #learnMoreContent.open {
+            max-height: 500px;
+        }
+
+        .learn-more-btn {
+            color: #6d4c41;
+            font-weight: 600;
+            cursor: pointer;
+            user-select: none;
+            transition: color 0.3s ease;
+        }
+
+        .learn-more-btn:hover,
+        .learn-more-btn:focus {
+            color: #4e342e;
+            outline: none;
+        }
+
+        ul li a {
+            transition: color 0.3s ease;
+        }
+
+        ul li a:hover,
+        ul li a:focus {
+            color: #6d4c41;
+            outline: none;
+        }
+
+        footer {
+            color: #6d4c41;
+        }
+
+        footer a {
+            color: #6d4c41;
+            transition: color 0.3s ease;
+        }
+
+        footer a:hover,
+        footer a:focus {
+            color: #4e342e;
+            outline: none;
+        }
+
+        form#uploadForm {
+            margin-top: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            max-width: 320px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        form#uploadForm select,
+        form#uploadForm button {
+            width: 100%;
+            border-radius: 0.5rem;
+            border: 1.5px solid #6d4c41;
+            padding: 0.5rem 1rem;
+            font-size: 1rem;
+            font-weight: 600;
+            color: #3e2723;
+            background-color: #fff7f3;
+            transition: background-color 0.3s ease, border-color 0.3s ease;
+            cursor: pointer;
+        }
+
+        form#uploadForm select:focus,
+        form#uploadForm button:focus {
+            outline: none;
+            border-color: #4e342e;
+            background-color: #ffebe6;
+        }
+
+        form#uploadForm button {
+            background-color: #6d4c41;
+            color: #faf9f6;
+            box-shadow: 0 4px 8px rgb(109 76 65 / 0.5);
+            transition: background-color 0.3s ease, box-shadow 0.3s ease,
+                transform 0.15s ease, color 0.3s ease;
+        }
+
+        form#uploadForm button:hover,
+        form#uploadForm button:focus {
+            background-color: #4e342e;
+            box-shadow: 0 6px 12px rgb(78 52 46 / 0.7);
+            color: #ffccbc;
+            transform: scale(1.05);
+            outline: none;
+        }
+
+        form#uploadForm input[type="file"] {
+            cursor: pointer;
+            border-radius: 0.5rem;
+            border: 1.5px solid #6d4c41;
+            padding: 0.5rem 1rem;
+            background-color: #fff7f3;
+            color: #3e2723;
+            font-weight: 600;
+            transition: background-color 0.3s ease, border-color 0.3s ease;
+            width: 100%;
+            display: block;
+        }
+
+        form#uploadForm input[type="file"]:focus {
+            outline: none;
+            border-color: #4e342e;
+            background-color: #ffebe6;
+        }
+
+        #result {
+            margin-top: 2rem;
+            text-align: center;
+            color: #3e2723;
+        }
+
+        #result h2 {
+            font-weight: 700;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+
+        #outputImage {
+            max-width: 100%;
+            border-radius: 1rem;
+            box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+            display: none;
+            margin: 0 auto;
+        }
+
+        body.dark form#uploadForm select,
+        body.dark form#uploadForm button,
+        body.dark form#uploadForm input[type="file"] {
+            background-color: #4e342e;
+            color: #ffccbc;
+            border-color: #a1887f;
+        }
+
+        body.dark form#uploadForm select:focus,
+        body.dark form#uploadForm button:focus,
+        body.dark form#uploadForm input[type="file"]:focus {
+            background-color: #3e2723;
+            border-color: #ffab91;
+            color: #ffccbc;
+        }
+
+        body.dark #result {
+            color: #d7ccc8;
+        }
+    </style>
+</head>
+
+<body class="relative flex flex-col min-h-screen transition-colors duration-500">
+    <!-- HEADER -->
+    <header class="fixed top-0 left-0 right-0 z-50 border-b border-transparent backdrop-blur-sm" id="header"
+        role="banner" style="background-color: rgba(250, 249, 246, 0.85)">
+        <nav aria-label="Primary Navigation"
+            class="max-w-7xl mx-auto flex items-center justify-between px-6 sm:px-8 lg:px-12 h-16">
+            <a aria-label="FaceAging AI Home" class="flex items-center space-x-3 font-semibold text-xl select-none"
+                href="#" style="color: #3e2723">
+                <img alt="FaceAging AI logo, stylized FA letters in circle" aria-hidden="true"
+                    class="w-10 h-10 rounded-full" draggable="false" height="40"
+                    src="https://storage.googleapis.com/a1aa/image/02d7a33c-afc0-4d71-885c-1ebc483270ab.jpg"
+                    width="40" />
+                <span class="font-inter font-bold tracking-wide">FaceAging AI</span>
+            </a>
+            <ul class="hidden md:flex space-x-10 font-medium text-brown" role="menubar" style="color: #3e2723">
+                <li role="none">
+                    <a class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41]" href="#about"
+                        role="menuitem" tabindex="0">About</a>
+                </li>
+                <li role="none">
+                    <a class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41]" href="#features"
+                        role="menuitem" tabindex="0">Features</a>
+                </li>
+                <li role="none">
+                    <a class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41]" href="#tryItOut"
+                        role="menuitem" tabindex="0">Try It Out</a>
+                </li>
+                <li role="none">
+                    <a class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41]" href="#contact"
+                        role="menuitem" tabindex="0">Contact</a>
+                </li>
+            </ul>
+            <div class="flex items-center space-x-4">
+                <button aria-label="Toggle dark mode"
+                    class="focus:outline-none focus:ring-2 focus:ring-[#FF7043] rounded p-1 " id="darkToggle"
+                    title="Toggle dark mode" type="button" style="color: #3e2723; visibility: hidden;">
+                    <i class="fas fa-moon fa-lg"></i>
+                </button>
+                <!-- Mobile menu button -->
+                <button aria-controls="mobileMenu" aria-expanded="false" aria-label="Toggle menu"
+                    class="md:hidden focus:outline-none focus:ring-2 focus:ring-[#FF7043] rounded p-1"
+                    id="mobileMenuButton" type="button" style="color: #3e2723">
+                    <i class="fas fa-bars fa-lg"></i>
+                </button>
+            </div>
+        </nav>
+        <!-- Mobile menu -->
+        <div aria-label="Mobile Navigation" class="hidden md:hidden border-t border-transparent" id="mobileMenu"
+            role="menu" style="background-color: rgba(250, 249, 246, 0.95)">
+            <ul class="flex flex-col space-y-2 p-4 font-medium" style="color: #3e2723">
+                <li role="none">
+                    <a class="block px-3 py-2 rounded hover:bg-[#FFEBE6] hover:text-[#6D4C41] focus:outline-none focus:bg-[#FFEBE6] focus:text-[#6D4C41] transition"
+                        href="#about" role="menuitem" tabindex="0">About</a>
+                </li>
+                <li role="none">
+                    <a class="block px-3 py-2 rounded hover:bg-[#FFEBE6] hover:text-[#6D4C41] focus:outline-none focus:bg-[#FFEBE6] focus:text-[#6D4C41] transition"
+                        href="#features" role="menuitem" tabindex="0">Features</a>
+                </li>
+                <li role="none">
+                    <a class="block px-3 py-2 rounded hover:bg-[#FFEBE6] hover:text-[#6D4C41] focus:outline-none focus:bg-[#FFEBE6] focus:text-[#6D4C41] transition"
+                        href="#tryItOut" role="menuitem" tabindex="0">Try It Out</a>
+                </li>
+                <li role="none">
+                    <a class="block px-3 py-2 rounded hover:bg-[#FFEBE6] hover:text-[#6D4C41] focus:outline-none focus:bg-[#FFEBE6] focus:text-[#6D4C41] transition"
+                        href="#contact" role="menuitem" tabindex="0">Contact</a>
+                </li>
+            </ul>
+        </div>
+    </header>
+    <!-- MAIN CONTENT -->
+    <main class="flex-grow pt-20">
+        <!-- HERO -->
+        <section class="max-w-5xl mx-auto px-6 sm:px-8 lg:px-12 text-center py-20 fade-in" id="hero" tabindex="-1">
+            <h1 class="text-4xl sm:text-5xl font-extrabold leading-tight max-w-3xl mx-auto" style="color: #3e2723">
+                FaceAging AI
+            </h1>
+            <p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto" style="color: #6d4c41">
+                Realistic AI-powered face age transformation — look older or younger
+                instantly.
+            </p>
+            <button aria-label="Upload Image"
+                class="primary-btn mt-10 px-8 py-4 text-lg rounded-lg shadow-lg focus:outline-none focus:ring-4 focus:ring-[#FF7043]"
+                id="uploadBtnHero" type="button">
+                <i class="fas fa-upload mr-3"></i> Upload Image
+            </button>
+        </section>
+
+       
+<!-- TRY IT OUT -->
+<section aria-label="Try FaceAging AI"
+  class="max-w-full mx-auto px-12 sm:px-20 lg:px-28 py-20 scroll-animate"
+  id="tryItOut" tabindex="-1">
+
+  <form class="space-y-10 max-w-5xl mx-auto" id="uploadForm" enctype="multipart/form-data" novalidate>
+
+    <!-- Upload Box -->
+    <div class="border-2 border-dashed border-[#A1887F] rounded-3xl p-14 text-center bg-[#EFEBE9] shadow-md">
+      <label for="fileInput" class="block text-3xl font-semibold text-[#3E2723] mb-6">
+        Upload Your Face Image
+      </label>
+      <input accept="image/*" class="block mx-auto text-lg mb-5 w-full max-w-4xl" id="fileInput" name="file" required
+        type="file" aria-label="Upload face image" />
+      <p class="text-base text-[#5D4037]">Supported formats: JPG, PNG • Max size: 5MB</p>
+    </div>
+
+    <!-- Controls Section -->
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-10 max-w-5xl mx-auto">
+
+      <!-- Dropdown -->
+      <div class="w-full sm:w-1/2">
+        <label for="conversion" class="block text-lg font-medium text-[#3E2723] mb-3">
+          Choose Transformation
+        </label>
+        <select id="conversion" name="conversion" required
+          class="w-full px-6 py-4 rounded-3xl border border-[#A1887F] bg-white text-[#3E2723] text-lg shadow-sm focus:outline-none focus:ring-4 focus:ring-[#6D4C41] transition">
+          <option value="young_to_old">Young to Old</option>
+          <option value="old_to_young">Old to Young</option>
+        </select>
+      </div>
+
+      <!-- Generate Button -->
+      <div class="w-full sm:w-1/3 mt-6 sm:mt-0">
+        <button id="generateBtn" type="submit"
+          class="primary-btn w-full sm:w-auto px-8 py-4 bg-[#6D4C41] text-white font-semibold text-xl rounded-3xl shadow-md hover:bg-[#5D4037] transition focus:outline-none focus:ring-6 focus:ring-[#6D4C41]"
+          aria-label="Generate aged or de-aged face image">
+          Generate
+        </button>
+      </div>
+
+    </div>
+  </form>
+
+  <!-- Result -->
+  <div id="result" class="mt-20 text-center max-w-6xl mx-auto">
+    <h2 class="text-3xl font-bold mb-8 text-[#3e2723]">Result:</h2>
+    <img alt="Result Image showing the face after aging or de-aging transformation"
+      class="mx-auto rounded-3xl shadow-lg max-w-full" id="outputImage" src="#" style="display: none" loading="lazy" />
+  </div>
+</section>
+
+
+
+
+        <!-- AI INSIGHT PANEL -->
+        <section aria-label="AI Insight Panel"
+            class="max-w-5xl mx-auto px-6 sm:px-8 lg:px-12 py-16 scroll-animate bg-[#FFCCBC] rounded-3xl shadow-lg mt-20"
+            id="aiInsight" tabindex="-1" style="color: #4e342e">
+            <h2 class="text-3xl font-extrabold mb-6 select-none" style="color: #6d4c41">
+                AI Insight
+            </h2>
+            <p class="max-w-3xl leading-relaxed">
+                FaceAging AI leverages state-of-the-art deep learning models trained on
+                diverse datasets to realistically simulate aging and de-aging effects on
+                facial images. Our proprietary algorithms ensure natural,
+                high-fidelity transformations while preserving your unique features.
+            </p>
+            <button aria-controls="learnMoreContent" aria-expanded="false"
+                class="mt-4 learn-more-btn font-semibold rounded focus:ring-2 focus:ring-[#6D4C41]" id="learnMoreBtn"
+                type="button">
+                Learn More
+            </button>
+            <div class="mt-4 max-w-3xl overflow-hidden" hidden id="learnMoreContent" style="color: #6d4c41">
+                <p class="mb-3">
+                    Our AI pipeline includes advanced face detection, landmark alignment,
+                    and generative adversarial networks (GANs) fine-tuned for age
+                    progression and regression. The model adapts to various lighting,
+                    angles, and ethnicities to provide consistent results.
+                </p>
+                <p>
+                    We prioritize user privacy by processing images securely and never
+                    storing personal data. The transformations happen in real-time,
+                    offering a seamless and engaging experience.
+                </p>
+            </div>
+        </section>
+
+        <!-- ABOUT -->
+        <section aria-label="About FaceAging AI" class="max-w-5xl mx-auto px-6 sm:px-8 lg:px-12 py-16 scroll-animate"
+            id="about" tabindex="-1" style="color: #3e2723">
+            <h2 class="text-3xl font-extrabold mb-6 text-center select-none" style="color: #6d4c41">
+                About FaceAging AI
+            </h2>
+            <p class="max-w-3xl mx-auto leading-relaxed text-center">
+                <strong>FaceAging AI</strong> is a modern, AI-powered web application designed to transform facial
+                images by simulating realistic age progression and regression. Powered by cutting-edge deep learning
+                models and computer vision techniques, FaceAging AI allows users to visualize themselves at different
+                ages with high-quality, photorealistic results—directly through their browser.
+            </p>
+            <br />
+            <p class="max-w-3xl mx-auto leading-relaxed text-center">
+                Whether you're curious to see your older self or wish to recreate a youthful look, FaceAging AI provides
+                a secure, seamless, and intuitive experience. All uploaded images are handled with the utmost care and
+                privacy. The platform is designed to be fast, accessible, and user-friendly, requiring no advanced
+                technical skills to use.
+            </p>
+            <br />
+            <p class="max-w-3xl mx-auto leading-relaxed text-center">
+                This application was thoughtfully developed by <strong>Saksham Pathak</strong>, a passionate AI
+                researcher and developer currently pursuing a Master's degree in <strong>Artificial Intelligence and
+                    Machine Learning</strong> at <strong>IIIT Lucknow</strong>. With a strong foundation in AI
+                technologies and a commitment to building ethical and impactful digital solutions, Saksham created
+                FaceAging AI to demonstrate how artificial intelligence can be applied to enhance everyday digital
+                experiences in a safe and meaningful way.
+            </p>
+            <br />
+            <p class="max-w-3xl mx-auto leading-relaxed text-center">
+                Thank you for using FaceAging AI. We hope you enjoy exploring the possibilities of AI-powered facial
+                transformation. Your feedback is always welcome and appreciated.
+            </p>
+        </section>
+
+        <!-- FEATURES -->
+        <section aria-label="Features of FaceAging AI"
+            class="max-w-6xl mx-auto px-6 sm:px-8 lg:px-12 py-16 scroll-animate" id="features" tabindex="-1">
+            <h2 class="text-3xl font-extrabold mb-10 text-center select-none" style="color: #3e2723">
+                Features
+            </h2>
+            <div class="features-grid">
+                <article aria-label="High accuracy feature" class="feature-card p-6 text-center focus:outline-none"
+                    tabindex="0">
+                    <i aria-hidden="true" class="fas fa-bullseye text-[#6D4C41] text-5xl mb-4"></i>
+                    <h3 class="text-xl font-semibold mb-2" style="color: #4e342e">
+                        High Accuracy
+                    </h3>
+                    <p>
+                        Our AI models deliver precise and realistic age transformations,
+                        preserving your unique facial features.
+                    </p>
+                </article>
+                <article aria-label="Fast processing feature" class="feature-card p-6 text-center focus:outline-none"
+                    tabindex="0">
+                    <i aria-hidden="true" class="fas fa-bolt text-[#6D4C41] text-5xl mb-4"></i>
+                    <h3 class="text-xl font-semibold mb-2" style="color: #4e342e">
+                        Fast Processing
+                    </h3>
+                    <p>
+                        Experience near-instant results with optimized AI pipelines and
+                        efficient cloud processing.
+                    </p>
+                </article>
+                <article aria-label="Seamless integration feature"
+                    class="feature-card p-6 text-center focus:outline-none" tabindex="0">
+                    <i aria-hidden="true" class="fas fa-plug text-[#6D4C41] text-5xl mb-4"></i>
+                    <h3 class="text-xl font-semibold mb-2" style="color: #4e342e">
+                        Seamless Integration
+                    </h3>
+                    <p>
+                        Easily embed FaceAging AI into your apps or websites with our
+                        flexible APIs and SDKs.
+                    </p>
+                </article>
+                <article aria-label="Privacy focused feature" class="feature-card p-6 text-center focus:outline-none"
+                    tabindex="0">
+                    <i aria-hidden="true" class="fas fa-user-shield text-[#6D4C41] text-5xl mb-4"></i>
+                    <h3 class="text-xl font-semibold mb-2" style="color: #4e342e">
+                        Privacy Focused
+                    </h3>
+                    <p>
+                        Your images are processed securely and never stored, ensuring your
+                        privacy and data protection.
+                    </p>
+                </article>
+            </div>
+        </section>
+        <!-- CONTACT -->
+        <section aria-label="Contact information" class="max-w-5xl mx-auto px-6 sm:px-8 lg:px-12 py-16 scroll-animate"
+            id="contact" tabindex="-1" style="color: #3e2723">
+            <h2 class="text-3xl font-extrabold mb-6 text-center select-none" style="color: #6d4c41">
+                Contact
+            </h2>
+            <p class="text-center max-w-3xl mx-auto mb-6" style="color: #4e342e">
+                Have questions or want to collaborate with us ? Reach out to us via email or
+                social media:
+            </p>
+            <ul class="flex flex-col sm:flex-row justify-center gap-8 text-lg max-w-3xl mx-auto" style="color: #3e2723">
+                <li class="flex items-center space-x-3">
+                    <i class="fas fa-envelope text-[#6D4C41] text-xl"></i>
+                    <a class="hover:text-[#4E342E] focus:outline-none focus:text-[#4E342E] transition"
+                        href="mailto:pathaksaksham430@gmail.com" tabindex="0">pathaksaksham430@gmail.com</a>
+                </li>
+                <li class="flex items-center space-x-3">
+                    <i class="fab fa-linkedin-in text-[#6D4C41] text-xl"></i>
+                    <a class="hover:text-[#4E342E] focus:outline-none focus:text-[#4E342E] transition"
+                        href="https://linkedin.com/in/sakshampathak" rel="noopener noreferrer" target="_blank"
+                        tabindex="0">linkedin.com/in/sakshampathak</a>
+                </li>
+                <li class="flex items-center space-x-3">
+                    <i class="fab fa-github text-[#6D4C41] text-xl"></i>
+                    <a class="hover:text-[#4E342E] focus:outline-none focus:text-[#4E342E] transition"
+                        href="https://github.com/parthmax2" rel="noopener noreferrer" target="_blank"
+                        tabindex="0">github.com/parthmax2</a>
+                </li>
+            </ul>
+        </section>
+    </main>
+    <!-- FOOTER -->
+    <footer class="border-t border-[#D7CCC8] py-8 px-6 sm:px-12 mt-20" role="contentinfo" style="color: #3e2723">
+        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between space-y-6 sm:space-y-0">
+            <div class="flex space-x-6 text-2xl" style="color: #3e2723">
+                <a aria-label="Instagram"
+                    class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41] transition"
+                    href="https://instagram.com/parthmax_" rel="noopener noreferrer" target="_blank" tabindex="0"><i
+                        class="fab fa-instagram"></i></a>
+                <a aria-label="LinkedIn" class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41] transition"
+                    href="https://linkedin.com/sakshampathak" rel="noopener noreferrer" target="_blank" tabindex="0"><i
+                        class="fab fa-linkedin-in"></i></a>
+                <a aria-label="GitHub" class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41] transition"
+                    href="https://github.com/parthmax2" rel="noopener noreferrer" target="_blank" tabindex="0"><i
+                        class="fab fa-github"></i></a>
+            </div>
+            <p class="text-center sm:text-left text-sm max-w-xl select-none" style="color: #3e2723">
+                FaceAging AI © developed by <a aria-label="Instagram"
+                    class="hover:text-[#6D4C41] focus:outline-none focus:text-[#6D4C41] transition"
+                    href="https://instagram.com/parthmax_" rel="noopener noreferrer" target="_blank" tabindex="0"><strong>Parthmax</strong></a> 
+            </p>
+        </div>
+    </footer>
+    <script src="/static/script.js"></script>
+</body>
+
+</html>