Add Technology page

.gitignore

@@ -137,3 +137,4 @@ mtcnn/
 /prepared_dataset
 /App/uploads
 archive.zip
+App/diag_log.txt

App/static/app.jsx

@@ -9,16 +9,25 @@ const STATUS_MESSAGES = {
 function barClass(s) { return s > 0.8 ? 'bar-green' : s > 0.2 ? 'bar-orange' : 'bar-red'; }
 function scoreClass(s) { return s > 0.8 ? 'score-green' : s > 0.2 ? 'score-orange' : 'score-red'; }
 
+/* ── Simple hash-based router ── */
+function useHashRoute() {
+    const [route, setRoute] = useState(window.location.hash || '#/');
+    useEffect(() => {
+        const onHash = () => setRoute(window.location.hash || '#/');
+        window.addEventListener('hashchange', onHash);
+        return () => window.removeEventListener('hashchange', onHash);
+    }, []);
+    return route;
+}
+
 /* ── Navbar ── */
-function Navbar() {
+function Navbar({ route }) {
     return (
         <header className="navbar">
-            <div className="logo"><span>DF</span>Detect</div>
+            <div className="logo"><span>AI</span>-Deepfake Video Detection</div>
             <nav>
-                <a href="/" className="active">Product</a>
-                <a href="#">Examples</a>
-                <a href="#">Technology</a>
-                <a href="#">FAQ</a>
+                <a href="#/" className={route === '#/' || route === '' ? 'active' : ''}>Product</a>
+                <a href="#/technology" className={route === '#/technology' ? 'active' : ''}>Technology</a>
             </nav>
         </header>
     );
@@ -146,6 +155,262 @@ function ResultsPanel({ data }) {
     );
 }
 
+/* ── Step Diagram SVG ── */
+function StepDiagram({ number, title, color }) {
+    return (
+        <svg width="80" height="80" viewBox="0 0 80 80" className="step-icon">
+            <circle cx="40" cy="40" r="36" fill="none" stroke={color} strokeWidth="2.5" />
+            <text x="40" y="46" textAnchor="middle" fill={color} fontSize="28" fontWeight="700">{number}</text>
+        </svg>
+    );
+}
+
+/* ── Pipeline Flow Arrow ── */
+function FlowArrow() {
+    return (
+        <div className="flow-arrow">
+            <svg width="40" height="40" viewBox="0 0 40 40">
+                <path d="M10 20 L28 20 M22 13 L30 20 L22 27" fill="none" stroke="#6c8cff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+        </div>
+    );
+}
+
+/* ── Technology Page ── */
+function TechnologyPage() {
+    const steps = [
+        {
+            number: 1,
+            title: 'Video to Frames',
+            color: '#6c8cff',
+            file: '00-convert_video_to_image.py',
+            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× for small frames (<300px), 0.5× for HD, 0.33× for Full HD+',
+                'Saves frames as individual JPG images organized by video',
+            ],
+            diagram: (
+                <svg viewBox="0 0 400 120" className="step-illustration">
+                    <rect x="10" y="15" width="90" height="90" rx="8" fill="#1a1a2e" stroke="#6c8cff" strokeWidth="1.5"/>
+                    <polygon points="40,35 40,80 70,57" fill="#6c8cff" opacity="0.8"/>
+                    <text x="55" y="112" textAnchor="middle" fill="#888" fontSize="11">Video</text>
+                    <path d="M115 60 L155 60" stroke="#6c8cff" strokeWidth="2" markerEnd="url(#arrow1)"/>
+                    <defs><marker id="arrow1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#6c8cff"/></marker></defs>
+                    {[0,1,2,3,4].map(i => (
+                        <g key={i}>
+                            <rect x={165 + i*46} y={20 + (i%2)*15} width="38" height="38" rx="4" fill="#1a1a2e" stroke="#4caf50" strokeWidth="1"/>
+                            <text x={184 + i*46} y={44 + (i%2)*15} textAnchor="middle" fill="#4caf50" fontSize="9">F{i+1}</text>
+                        </g>
+                    ))}
+                    <text x="300" y="112" textAnchor="middle" fill="#888" fontSize="11">Extracted Frames (1/sec)</text>
+                </svg>
+            ),
+        },
+        {
+            number: 2,
+            title: 'Face Detection & Cropping',
+            color: '#ff9800',
+            file: '01-crop_faces_with_mtcnn.py',
+            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: (
+                <svg viewBox="0 0 400 120" className="step-illustration">
+                    <rect x="10" y="10" width="100" height="100" rx="6" fill="#1a1a2e" stroke="#444" strokeWidth="1"/>
+                    <circle cx="60" cy="45" r="15" fill="none" stroke="#ff9800" strokeWidth="1.5" strokeDasharray="3,2"/>
+                    <circle cx="60" cy="42" r="6" fill="#ff9800" opacity="0.4"/>
+                    <ellipse cx="60" cy="55" rx="10" ry="6" fill="#ff9800" opacity="0.3"/>
+                    <rect x="35" y="25" width="50" height="50" rx="4" fill="none" stroke="#ff9800" strokeWidth="2"/>
+                    <text x="60" y="112" textAnchor="middle" fill="#888" fontSize="11">Frame + Detection</text>
+                    <path d="M125 55 L165 55" stroke="#ff9800" strokeWidth="2" markerEnd="url(#arrow2)"/>
+                    <defs><marker id="arrow2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#ff9800"/></marker></defs>
+                    <rect x="175" y="20" width="70" height="70" rx="8" fill="#1a1a2e" stroke="#ff9800" strokeWidth="2"/>
+                    <circle cx="210" cy="45" r="12" fill="none" stroke="#ff9800" strokeWidth="1.5"/>
+                    <circle cx="210" cy="42" r="5" fill="#ff9800" opacity="0.5"/>
+                    <ellipse cx="210" cy="52" rx="8" ry="5" fill="#ff9800" opacity="0.4"/>
+                    <text x="210" y="112" textAnchor="middle" fill="#888" fontSize="11">Cropped Face (+30% margin)</text>
+                    <text x="340" y="40" fill="#ff9800" fontSize="11" fontWeight="600">✓ 95%+ confidence</text>
+                    <text x="340" y="58" fill="#888" fontSize="10">30% margin padding</text>
+                    <text x="340" y="76" fill="#888" fontSize="10">Context preserved</text>
+                </svg>
+            ),
+        },
+        {
+            number: 3,
+            title: 'Dataset Preparation',
+            color: '#4caf50',
+            file: '02-prepare_fake_real_dataset.py',
+            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×90 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: (
+                <svg viewBox="0 0 400 120" className="step-illustration">
+                    <g>
+                        <rect x="10" y="15" width="55" height="40" rx="4" fill="rgba(76,175,80,0.15)" stroke="#4caf50" strokeWidth="1.5"/>
+                        <text x="37" y="39" textAnchor="middle" fill="#4caf50" fontSize="11" fontWeight="600">REAL</text>
+                        <rect x="10" y="65" width="55" height="40" rx="4" fill="rgba(244,67,54,0.15)" stroke="#f44336" strokeWidth="1.5"/>
+                        <text x="37" y="89" textAnchor="middle" fill="#f44336" fontSize="11" fontWeight="600">FAKE</text>
+                    </g>
+                    <path d="M80 55 L120 55" stroke="#4caf50" strokeWidth="2" markerEnd="url(#arrow3)"/>
+                    <defs><marker id="arrow3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#4caf50"/></marker></defs>
+                    <rect x="130" y="8" width="100" height="28" rx="4" fill="rgba(76,175,80,0.1)" stroke="#4caf50" strokeWidth="1"/>
+                    <text x="180" y="26" textAnchor="middle" fill="#4caf50" fontSize="10">Train 80%</text>
+                    <rect x="130" y="44" width="100" height="28" rx="4" fill="rgba(255,152,0,0.1)" stroke="#ff9800" strokeWidth="1"/>
+                    <text x="180" y="62" textAnchor="middle" fill="#ff9800" fontSize="10">Val 10%</text>
+                    <rect x="130" y="80" width="100" height="28" rx="4" fill="rgba(108,140,255,0.1)" stroke="#6c8cff" strokeWidth="1"/>
+                    <text x="180" y="98" textAnchor="middle" fill="#6c8cff" fontSize="10">Test 10%</text>
+                    <text x="310" y="30" fill="#888" fontSize="10">✓ Min 90×90px filter</text>
+                    <text x="310" y="50" fill="#888" fontSize="10">✓ Stratified split</text>
+                    <text x="310" y="70" fill="#888" fontSize="10">✓ Multi-method balance</text>
+                    <text x="310" y="90" fill="#888" fontSize="10">✓ CSV metadata labels</text>
+                </svg>
+            ),
+        },
+        {
+            number: 4,
+            title: 'CNN Training (EfficientNetB0)',
+            color: '#f44336',
+            file: '03-train_cnn.py',
+            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×224 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 — score > 0.5 = REAL, ≤ 0.5 = FAKE',
+            ],
+            diagram: (
+                <svg viewBox="0 0 400 140" className="step-illustration">
+                    <rect x="10" y="30" width="70" height="80" rx="6" fill="#1a1a2e" stroke="#f44336" strokeWidth="1.5"/>
+                    <text x="45" y="55" textAnchor="middle" fill="#f44336" fontSize="9" fontWeight="600">224×224</text>
+                    <text x="45" y="70" textAnchor="middle" fill="#888" fontSize="8">Face Input</text>
+                    <text x="45" y="95" textAnchor="middle" fill="#666" fontSize="8">preprocess</text>
+                    <text x="45" y="106" textAnchor="middle" fill="#666" fontSize="8">[-1, 1]</text>
+                    <path d="M90 70 L115 70" stroke="#f44336" strokeWidth="1.5" markerEnd="url(#arrow4)"/>
+                    <rect x="120" y="15" width="100" height="110" rx="6" fill="#1a1a2e" stroke="#ff9800" strokeWidth="1.5"/>
+                    <text x="170" y="35" textAnchor="middle" fill="#ff9800" fontSize="10" fontWeight="600">EfficientNetB0</text>
+                    <text x="170" y="52" textAnchor="middle" fill="#888" fontSize="8">(ImageNet weights)</text>
+                    {[0,1,2,3].map(i => (
+                        <rect key={i} x="135" y={60 + i*14} width="70" height="10" rx="2" fill={`rgba(255,152,0,${0.15 + i*0.1})`} stroke="#ff9800" strokeWidth="0.5"/>
+                    ))}
+                    <defs><marker id="arrow4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#f44336"/></marker></defs>
+                    <path d="M230 70 L255 70" stroke="#f44336" strokeWidth="1.5" markerEnd="url(#arrow4)"/>
+                    <rect x="260" y="25" width="80" height="90" rx="6" fill="#1a1a2e" stroke="#6c8cff" strokeWidth="1.5"/>
+                    <text x="300" y="45" textAnchor="middle" fill="#6c8cff" fontSize="9" fontWeight="600">Head</text>
+                    <text x="300" y="62" textAnchor="middle" fill="#888" fontSize="7">GlobalAvgPool</text>
+                    <text x="300" y="74" textAnchor="middle" fill="#888" fontSize="7">BatchNorm</text>
+                    <text x="300" y="86" textAnchor="middle" fill="#888" fontSize="7">Dense(256)+Dropout</text>
+                    <text x="300" y="98" textAnchor="middle" fill="#888" fontSize="7">Dense(1, sigmoid)</text>
+                    <path d="M350 70 L375 70" stroke="#4caf50" strokeWidth="1.5" markerEnd="url(#arrow5)"/>
+                    <defs><marker id="arrow5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#4caf50"/></marker></defs>
+                    <text x="388" y="65" fill="#4caf50" fontSize="11" fontWeight="700">0–1</text>
+                    <text x="388" y="80" fill="#888" fontSize="8">Score</text>
+                </svg>
+            ),
+        },
+    ];
+
+    return (
+        <section className="tech-page">
+            <div className="tech-hero">
+                <h1 className="tech-title">How It Works</h1>
+                <p className="tech-subtitle">
+                    Our deepfake detection pipeline processes videos through four stages — from raw video
+                    to a trained AI model that scores each face for authenticity.
+                </p>
+            </div>
+
+            {/* Pipeline overview */}
+            <div className="pipeline-overview">
+                {steps.map((step, i) => (
+                    <React.Fragment key={step.number}>
+                        <div className="pipeline-step-mini">
+                            <StepDiagram number={step.number} title={step.title} color={step.color} />
+                            <span style={{ color: step.color, fontWeight: 600, fontSize: 13 }}>{step.title}</span>
+                        </div>
+                        {i < steps.length - 1 && <FlowArrow />}
+                    </React.Fragment>
+                ))}
+            </div>
+
+            {/* Detailed steps */}
+            {steps.map((step) => (
+                <div className="tech-step" key={step.number}>
+                    <div className="tech-step-header">
+                        <StepDiagram number={step.number} title={step.title} color={step.color} />
+                        <div>
+                            <h2 className="tech-step-title" style={{ color: step.color }}>
+                                Step {step.number}: {step.title}
+                            </h2>
+                            <code className="tech-file">{step.file}</code>
+                        </div>
+                    </div>
+                    <p className="tech-step-desc">{step.description}</p>
+                    <div className="tech-step-diagram">
+                        {step.diagram}
+                    </div>
+                    <ul className="tech-step-details">
+                        {step.details.map((d, i) => <li key={i}>{d}</li>)}
+                    </ul>
+                </div>
+            ))}
+
+            {/* Inference section */}
+            <div className="tech-step">
+                <div className="tech-step-header">
+                    <svg width="80" height="80" viewBox="0 0 80 80" className="step-icon">
+                        <circle cx="40" cy="40" r="36" fill="none" stroke="#6c8cff" strokeWidth="2.5"/>
+                        <text x="40" y="46" textAnchor="middle" fill="#6c8cff" fontSize="22" fontWeight="700">▶</text>
+                    </svg>
+                    <div>
+                        <h2 className="tech-step-title" style={{ color: '#6c8cff' }}>
+                            Real-Time Inference
+                        </h2>
+                        <code className="tech-file">App/app.py</code>
+                    </div>
+                </div>
+                <p className="tech-step-desc">
+                    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.
+                </p>
+                <div className="tech-step-diagram">
+                    <svg viewBox="0 0 400 80" className="step-illustration">
+                        <rect x="5" y="15" width="65" height="50" rx="6" fill="#1a1a2e" stroke="#6c8cff" strokeWidth="1.5"/>
+                        <text x="37" y="44" textAnchor="middle" fill="#6c8cff" fontSize="9" fontWeight="600">Upload</text>
+                        <path d="M80 40 L105 40" stroke="#6c8cff" strokeWidth="1.5" markerEnd="url(#arrowI)"/>
+                        <rect x="110" y="15" width="65" height="50" rx="6" fill="#1a1a2e" stroke="#ff9800" strokeWidth="1.5"/>
+                        <text x="142" y="38" textAnchor="middle" fill="#ff9800" fontSize="9" fontWeight="600">YOLOv8</text>
+                        <text x="142" y="50" textAnchor="middle" fill="#888" fontSize="7">Face Detect</text>
+                        <path d="M185 40 L210 40" stroke="#ff9800" strokeWidth="1.5" markerEnd="url(#arrowI)"/>
+                        <rect x="215" y="15" width="65" height="50" rx="6" fill="#1a1a2e" stroke="#f44336" strokeWidth="1.5"/>
+                        <text x="247" y="38" textAnchor="middle" fill="#f44336" fontSize="8" fontWeight="600">EfficientNet</text>
+                        <text x="247" y="50" textAnchor="middle" fill="#888" fontSize="7">Predict</text>
+                        <path d="M290 40 L315 40" stroke="#4caf50" strokeWidth="1.5" markerEnd="url(#arrowI)"/>
+                        <rect x="320" y="15" width="70" height="50" rx="6" fill="#1a1a2e" stroke="#4caf50" strokeWidth="1.5"/>
+                        <text x="355" y="38" textAnchor="middle" fill="#4caf50" fontSize="9" fontWeight="600">REAL</text>
+                        <text x="355" y="50" textAnchor="middle" fill="#f44336" fontSize="9" fontWeight="600">FAKE</text>
+                        <defs><marker id="arrowI" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#6c8cff"/></marker></defs>
+                    </svg>
+                </div>
+            </div>
+        </section>
+    );
+}
+
 /* ── Main App ── */
 function App() {
     const [file, setFile] = useState(null);
@@ -214,13 +479,20 @@ function App() {
         }
     };
 
+    const route = useHashRoute();
+
     return (
         <>
-            <Navbar />
+            <Navbar route={route} />
+
+            {route === '#/technology' ? (
+                <TechnologyPage />
+            ) : (
+            <>
 
             <section className="hero">
                 <div className="hero-left">
-                    <h1 className="hero-title">DFDetect</h1>
+                    <h1 className="hero-title">AI-Deepfake Video Detection</h1>
                     <p className="hero-desc">
                         Free deepfake detection tool for videos. Upload a video and get
                         per-face authenticity scores in seconds. AI-powered synthetic face detection.
@@ -237,6 +509,10 @@ function App() {
                     {error && <div className="error-box">{error}</div>}
                 </div>
 
+                <div className="hero-right">
+                    <img src="/static/images.png" alt="AI Deepfake Detection" className="hero-image" />
+                </div>
+
             </section>
 
             <VideoComparison
@@ -245,6 +521,8 @@ function App() {
                 isProcessing={submitting}
             />
             <ResultsPanel data={result} />
+            </>
+            )}
         </>
     );
 }

App/static/style.css

@@ -41,6 +41,11 @@ input[type="file"] { display: none; }
 .video-preview video {
     max-width: 100%; max-height: 400px; border-radius: 12px; border: 1px solid #1e1e35; background: #111122;
 }
+.hero-right { flex: 1; display: flex; justify-content: center; align-items: stretch; }
+.hero-image {
+    width: 100%; height: 100%; border-radius: 14px; border: 1px solid #1e1e35;
+    object-fit: cover; box-shadow: 0 8px 32px rgba(108,140,255,0.10);
+}
 .preview-placeholder {
     width: 100%; max-width: 460px; height: 280px; border-radius: 12px; background: #111122;
     border: 1px solid #1e1e35; display: flex; align-items: center; justify-content: center; color: #333; font-size: 48px;
@@ -89,7 +94,54 @@ input[type="file"] { display: none; }
 @media (max-width: 768px) {
     .hero { flex-direction: column; padding: 0 20px; margin-top: 30px; gap: 30px; }
     .hero-left { max-width: 100%; } .hero-title { font-size: 32px; }
+    .hero-right { display: none; }
     .results-section { padding: 0 20px; } .results-panel { padding: 20px; }
     .navbar { padding: 14px 20px; } .navbar nav a { margin-left: 16px; font-size: 13px; }
     .compare-grid { flex-direction: column; }
+    .pipeline-overview { flex-direction: column; align-items: center; }
+    .flow-arrow { transform: rotate(90deg); }
+    .tech-step-header { flex-direction: column; align-items: center; text-align: center; }
+    .tech-page { padding: 0 16px; }
+}
+
+/* ── Technology Page ── */
+.tech-page { max-width: 900px; margin: 0 auto; padding: 0 40px 60px; }
+.tech-hero { text-align: center; margin: 50px 0 40px; }
+.tech-title { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 14px; }
+.tech-subtitle { font-size: 15px; color: #999; line-height: 1.7; max-width: 600px; margin: 0 auto; }
+
+.pipeline-overview {
+    display: flex; align-items: center; justify-content: center; gap: 12px;
+    margin-bottom: 50px; flex-wrap: wrap;
+}
+.pipeline-step-mini {
+    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 110px;
+}
+.flow-arrow { display: flex; align-items: center; color: #6c8cff; }
+
+.tech-step {
+    background: #111122; border: 1px solid #1e1e35; border-radius: 14px;
+    padding: 30px 36px; margin-bottom: 28px;
+}
+.tech-step-header { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
+.tech-step-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+.tech-file {
+    font-size: 12px; color: #6c8cff; background: rgba(108,140,255,0.1);
+    padding: 3px 10px; border-radius: 4px; font-family: 'Consolas', monospace;
+}
+.tech-step-desc { font-size: 14px; color: #aaa; line-height: 1.7; margin-bottom: 20px; }
+.tech-step-diagram {
+    background: #0b0b1a; border: 1px solid #1a1a2e; border-radius: 10px;
+    padding: 20px; margin-bottom: 20px; text-align: center; overflow-x: auto;
+}
+.step-illustration { max-width: 100%; height: auto; }
+.step-icon { flex-shrink: 0; }
+.tech-step-details {
+    list-style: none; padding: 0;
+}
+.tech-step-details li {
+    font-size: 13px; color: #bbb; padding: 6px 0 6px 20px; position: relative; line-height: 1.5;
+}
+.tech-step-details li::before {
+    content: '→'; position: absolute; left: 0; color: #6c8cff; font-weight: 700;
 }

App/templates/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DFDetect - DeepFake Detector</title>
+    <title>AI-Deepfake Video Detection</title>
     <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>