/* ── Step Diagram SVG ── */ function StepDiagram({ number, title, color }) { return ( ); } /* ── Pipeline Flow Arrow ── */ function FlowArrow() { return (

); } /* ── Technology Page ── */ function TechnologyPage() { const steps = [ { number: 1, title: 'Video to Frames', color: '#6c8cff', description: 'Raw training videos are split into individual image frames. One frame is extracted per second of video using OpenCV. Each frame is automatically scaled based on its resolution to normalize image sizes across the dataset.', details: [ 'Reads MP4 videos from the FaceForensics++ dataset', 'Extracts 1 frame per second (at the video\'s native frame rate)', 'Auto-scales: 2\u00d7 for small frames (<300px), 0.5\u00d7 for HD, 0.33\u00d7 for Full HD+', 'Saves frames as individual JPG images organized by video', ], diagram: ( ), }, { number: 2, title: 'Face Detection & Cropping', color: '#ff9800', description: 'MTCNN (Multi-task Cascaded Convolutional Network) scans each extracted frame to detect faces. Detected faces are cropped with a 30% margin around the bounding box to preserve context like hair and jawline, which helps the model detect manipulation artifacts.', details: [ 'Uses MTCNN deep learning face detector for accurate face localization', 'Filters low-confidence detections (>95% threshold for multi-face frames)', 'Adds 30% margin around each face bounding box', 'Crops and saves individual face images for training', ], diagram: ( ), }, { number: 3, title: 'Dataset Preparation', color: '#4caf50', description: 'Cropped face images are organized into "real" and "fake" categories based on FaceForensics++ metadata. Small or corrupted images (<90px) are filtered out. The dataset is then split into training (80%), validation (10%), and test (10%) sets using stratified splitting.', details: [ 'Labels faces as REAL or FAKE using FaceForensics++ CSV metadata', 'Filters out low-quality images smaller than 90\u00d790 pixels', 'Balances fake samples across manipulation methods (Deepfakes, Face2Face, FaceSwap, NeuralTextures, FaceShifter)', 'Splits into train/val/test (80/10/10) with stratified random sampling', ], diagram: ( ), }, { number: 4, title: 'CNN Training (EfficientNetB0)', color: '#f44336', description: 'A two-phase transfer learning approach trains an EfficientNetB0-based classifier. Phase 1 freezes the pre-trained ImageNet backbone and trains only the classification head. Phase 2 unfreezes the entire network for fine-tuning with a very low learning rate, achieving ~92% accuracy.', details: [ 'EfficientNetB0 backbone pre-trained on ImageNet (224\u00d7224 input)', 'Phase 1: Frozen base, train head only (lr=1e-3, up to 15 epochs)', 'Phase 2: Full fine-tuning (lr=1e-5, up to 30 epochs)', 'Data augmentation: rotation, flip, zoom, shift, brightness', 'Class weight balancing for imbalanced datasets', 'Callbacks: EarlyStopping, ReduceLROnPlateau, ModelCheckpoint', 'Output: binary sigmoid \u2014 score > 0.5 = REAL, \u2264 0.5 = FAKE', ], diagram: ( ), }, ]; return (

How It Works

Our deepfake detection pipeline processes videos through four stages — from raw video to a trained AI model that scores each face for authenticity.

{/* Pipeline overview */}

{steps.map((step, i) => (

{step.title}

{i < steps.length - 1 && } ))}

{/* Detailed steps */} {steps.map((step) => (

Step {step.number}: {step.title}

{step.description}

{step.diagram}

))} {/* Inference section */}

Real-Time Inference

When you upload a video, the app uses YOLOv8 for fast face detection on each frame, then feeds cropped faces through the trained EfficientNetB0 model. Each face gets an authenticity score (0 = fake, 1 = real), and the processed video shows bounding boxes with per-face REAL/FAKE labels overlaid in real time.

); }