feat: audio deepfake detection (AI voice analysis)

Backend:
- New AudioAuthenticator with 4-agent pipeline
- AudioExtractorAgent: extracts mono 16kHz audio via moviepy
- AudioAnalysisAgent: librosa heuristics (pitch variance, MFCC delta,
spectral flatness, ZCR consistency, silence/breath ratio)
- AudioDecisionAgent: Wav2Vec2 model (Bisher/wav2vec2_ASV, labels: fake/real)
- AudioReportAgent: ensemble 65% model + 35% heuristics
- Combined visual+audio verdict in ReportGeneratorAgent
- Audio analysis runs after visual, both signals inform final verdict

Frontend:
- New Voice Authenticity Analysis card in results
- Shows AI VOICE DETECTED / HUMAN VOICE badge
- Wav2Vec2 model score + heuristic score side by side
- Voice insights with colored left border
- Signal features: pitch std, MFCC delta, spectral flatness, silence ratio

backend/audio_detector.py

@@ -0,0 +1,423 @@
+"""
+Deepfake Authenticator — Audio Analysis Agent
+Detects AI-generated / synthetic voices from video audio tracks.
+
+Pipeline:
+  1. AudioExtractorAgent  — extracts audio from video via moviepy
+  2. AudioAnalysisAgent   — librosa heuristics (MFCC, pitch, spectral)
+  3. AudioDecisionAgent   — Wav2Vec2 model (Bisher/wav2vec2_ASV_deepfake_audio_detection)
+  4. AudioReportAgent     — builds structured result
+"""
+
+import os
+import tempfile
+import logging
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+# ─────────────────────────────────────────────
+# Agent 1: Audio Extractor
+# Pulls audio track from video file
+# ─────────────────────────────────────────────
+class AudioExtractorAgent:
+    TARGET_SR = 16000   # Wav2Vec2 expects 16kHz
+
+    def extract(self, video_path: str) -> tuple[np.ndarray | None, int]:
+        """
+        Extract mono 16kHz audio from video.
+        Returns (waveform_array, sample_rate) or (None, 0) if no audio.
+        """
+        try:
+            from moviepy import VideoFileClip
+        except ImportError:
+            try:
+                from moviepy.editor import VideoFileClip
+            except ImportError:
+                logger.warning("moviepy not installed — audio analysis skipped")
+                return None, 0
+
+        tmp_wav = None
+        try:
+            clip = VideoFileClip(video_path)
+            if clip.audio is None:
+                logger.info("Video has no audio track")
+                clip.close()
+                return None, 0
+
+            # Write to temp WAV
+            tmp_wav = tempfile.mktemp(suffix=".wav")
+            clip.audio.write_audiofile(
+                tmp_wav,
+                fps=self.TARGET_SR,
+                nbytes=2,
+                codec="pcm_s16le",
+                logger=None,
+            )
+            clip.close()
+
+            # Load with soundfile for clean numpy array
+            import soundfile as sf
+            waveform, sr = sf.read(tmp_wav, dtype="float32")
+
+            # Convert stereo → mono
+            if waveform.ndim > 1:
+                waveform = waveform.mean(axis=1)
+
+            # Resample if needed
+            if sr != self.TARGET_SR:
+                import torchaudio
+                import torch
+                t = torch.from_numpy(waveform).unsqueeze(0)
+                resampler = torchaudio.transforms.Resample(sr, self.TARGET_SR)
+                waveform = resampler(t).squeeze(0).numpy()
+                sr = self.TARGET_SR
+
+            logger.info(f"Audio extracted: {len(waveform)/sr:.1f}s @ {sr}Hz")
+            return waveform, sr
+
+        except Exception as e:
+            logger.warning(f"Audio extraction failed: {e}")
+            return None, 0
+        finally:
+            if tmp_wav and os.path.exists(tmp_wav):
+                os.unlink(tmp_wav)
+
+
+# ─────────────────────────────────────────────
+# Agent 2: Audio Heuristic Analyzer
+# Librosa-based feature analysis
+# ─────────────────────────────────────────────
+class AudioAnalysisAgent:
+    """
+    Detects AI voice artifacts using signal processing:
+    - Pitch variance (AI voices are unnaturally consistent)
+    - MFCC delta variance (AI lacks natural micro-variations)
+    - Spectral flatness (AI voices have unusual spectral distribution)
+    - Zero-crossing rate (synthetic voices differ in ZCR patterns)
+    - Silence/breath ratio (AI voices often lack natural breath sounds)
+    """
+
+    def analyze(self, waveform: np.ndarray, sr: int) -> dict:
+        try:
+            import librosa
+        except ImportError:
+            logger.warning("librosa not installed — heuristic audio analysis skipped")
+            return {"heuristic_fake_prob": 0.5, "features": {}, "available": False}
+
+        scores = []
+        features = {}
+
+        # ── 1. Pitch variance ─────────────────────────────────────────
+        # AI voices have unnaturally stable pitch (low variance = suspicious)
+        try:
+            f0, voiced_flag, _ = librosa.pyin(
+                waveform, fmin=50, fmax=500, sr=sr
+            )
+            voiced_f0 = f0[voiced_flag & ~np.isnan(f0)]
+            if len(voiced_f0) > 10:
+                pitch_std = float(np.std(voiced_f0))
+                features["pitch_std_hz"] = round(pitch_std, 2)
+                # Real human speech: std typically 20-80 Hz
+                # AI voices: often < 10 Hz (too stable)
+                if pitch_std < 8:
+                    scores.append(0.80)   # Very suspicious
+                elif pitch_std < 15:
+                    scores.append(0.65)
+                elif pitch_std < 25:
+                    scores.append(0.45)
+                else:
+                    scores.append(0.25)   # Natural variation
+            else:
+                scores.append(0.50)
+        except Exception as e:
+            logger.debug(f"Pitch analysis failed: {e}")
+            scores.append(0.50)
+
+        # ── 2. MFCC delta variance ────────────────────────────────────
+        # AI voices lack natural micro-variations in articulation
+        try:
+            mfcc = librosa.feature.mfcc(y=waveform, sr=sr, n_mfcc=13)
+            delta = librosa.feature.delta(mfcc)
+            delta_var = float(np.mean(np.var(delta, axis=1)))
+            features["mfcc_delta_var"] = round(delta_var, 4)
+            # Low delta variance → unnaturally smooth transitions
+            if delta_var < 0.5:
+                scores.append(0.75)
+            elif delta_var < 1.5:
+                scores.append(0.55)
+            elif delta_var < 4.0:
+                scores.append(0.35)
+            else:
+                scores.append(0.20)
+        except Exception as e:
+            logger.debug(f"MFCC analysis failed: {e}")
+            scores.append(0.50)
+
+        # ── 3. Spectral flatness ──────────────────────────────────────
+        # AI voices often have unusual spectral distribution
+        try:
+            flatness = librosa.feature.spectral_flatness(y=waveform)
+            mean_flatness = float(np.mean(flatness))
+            features["spectral_flatness"] = round(mean_flatness, 4)
+            # Very low flatness = tonal (could be AI), very high = noisy
+            if mean_flatness < 0.001:
+                scores.append(0.65)
+            elif mean_flatness < 0.005:
+                scores.append(0.45)
+            else:
+                scores.append(0.30)
+        except Exception as e:
+            logger.debug(f"Spectral flatness failed: {e}")
+            scores.append(0.50)
+
+        # ── 4. Zero-crossing rate consistency ────────────────────────
+        # AI voices have unnaturally consistent ZCR
+        try:
+            zcr = librosa.feature.zero_crossing_rate(waveform)
+            zcr_std = float(np.std(zcr))
+            features["zcr_std"] = round(zcr_std, 4)
+            if zcr_std < 0.02:
+                scores.append(0.65)   # Too consistent
+            elif zcr_std < 0.05:
+                scores.append(0.40)
+            else:
+                scores.append(0.25)
+        except Exception as e:
+            logger.debug(f"ZCR analysis failed: {e}")
+            scores.append(0.50)
+
+        # ── 5. Silence/breath detection ───────────────────────────────
+        # Real speech has natural pauses and breath sounds
+        # AI voices often have perfectly clean silence or no breaths
+        try:
+            rms = librosa.feature.rms(y=waveform)[0]
+            silence_ratio = float(np.mean(rms < 0.01))
+            features["silence_ratio"] = round(silence_ratio, 3)
+            # Very low silence ratio = no natural pauses (suspicious)
+            # Very high = mostly silent (not useful)
+            if silence_ratio < 0.05:
+                scores.append(0.60)   # No natural pauses
+            elif 0.05 <= silence_ratio <= 0.35:
+                scores.append(0.25)   # Natural speech rhythm
+            else:
+                scores.append(0.45)
+        except Exception as e:
+            logger.debug(f"Silence analysis failed: {e}")
+            scores.append(0.50)
+
+        heuristic_prob = float(np.mean(scores)) if scores else 0.5
+        logger.info(f"Audio heuristics: {features} → fake_prob={heuristic_prob:.3f}")
+
+        return {
+            "heuristic_fake_prob": round(heuristic_prob, 4),
+            "features": features,
+            "available": True,
+        }
+
+
+# ─────────────────────────────────────────────
+# Agent 3: Audio Decision Agent
+# Wav2Vec2 model for AI voice detection
+# ─────────────────────────────────────────────
+class AudioDecisionAgent:
+    MODEL_ID   = "Bisher/wav2vec2_ASV_deepfake_audio_detection"
+    CHUNK_SEC  = 10     # Process in 10-second chunks (model limit)
+    TARGET_SR  = 16000
+
+    def __init__(self):
+        self.model     = None
+        self.processor = None
+        self.fake_idx  = 0   # label 0 = 'fake'
+        self.available = False
+        self._load()
+
+    def _load(self):
+        try:
+            from transformers import (
+                Wav2Vec2ForSequenceClassification,
+                Wav2Vec2Processor,
+            )
+            logger.info(f"Loading audio model: {self.MODEL_ID}")
+            self.processor = Wav2Vec2Processor.from_pretrained(self.MODEL_ID)
+            self.model     = Wav2Vec2ForSequenceClassification.from_pretrained(self.MODEL_ID)
+            self.model.eval()
+
+            # Confirm fake label index
+            for idx, lbl in self.model.config.id2label.items():
+                if lbl.lower() == "fake":
+                    self.fake_idx = idx
+                    break
+
+            self.available = True
+            logger.info(f"Audio model loaded — fake_idx={self.fake_idx}, labels={self.model.config.id2label}")
+        except Exception as e:
+            logger.warning(f"Audio model unavailable: {e}")
+            self.available = False
+
+    def predict(self, waveform: np.ndarray, sr: int) -> float:
+        """
+        Run Wav2Vec2 on audio in chunks, return mean fake probability.
+        """
+        if not self.available:
+            return 0.5
+
+        import torch
+
+        chunk_size = self.CHUNK_SEC * sr
+        chunks = [
+            waveform[i : i + chunk_size]
+            for i in range(0, len(waveform), chunk_size)
+            if len(waveform[i : i + chunk_size]) > sr // 2  # skip < 0.5s chunks
+        ]
+
+        if not chunks:
+            return 0.5
+
+        fake_probs = []
+        for chunk in chunks:
+            try:
+                inputs = self.processor(
+                    chunk,
+                    sampling_rate=self.TARGET_SR,
+                    return_tensors="pt",
+                    padding=True,
+                )
+                with torch.no_grad():
+                    logits = self.model(**inputs).logits
+                    probs  = torch.softmax(logits, dim=-1)[0]
+                fake_probs.append(probs[self.fake_idx].item())
+            except Exception as e:
+                logger.warning(f"Audio chunk inference failed: {e}")
+
+        if not fake_probs:
+            return 0.5
+
+        result = float(np.mean(fake_probs))
+        logger.info(f"Audio model: {len(fake_probs)} chunks → fake_prob={result:.3f}")
+        return result
+
+
+# ─────────────────────────────────────────────
+# Agent 4: Audio Report Agent
+# Builds structured audio result
+# ─────────────────────────────────────────────
+class AudioReportAgent:
+    FAKE_THRESHOLD = 0.60
+
+    def generate(
+        self,
+        model_prob: float,
+        heuristic: dict,
+        has_audio: bool,
+    ) -> dict:
+        if not has_audio:
+            return {
+                "available": False,
+                "result": "NO_AUDIO",
+                "confidence": 0,
+                "fake_probability": 0,
+                "details": ["No audio track found in video"],
+            }
+
+        heur_prob = heuristic.get("heuristic_fake_prob", 0.5)
+        features  = heuristic.get("features", {})
+
+        # Ensemble: 65% model + 35% heuristics
+        if heuristic.get("available", False):
+            combined = model_prob * 0.65 + heur_prob * 0.35
+        else:
+            combined = model_prob
+
+        combined   = float(np.clip(combined, 0.0, 1.0))
+        is_fake    = combined >= self.FAKE_THRESHOLD
+        confidence = round(combined * 100, 1)
+
+        details = self._build_details(combined, is_fake, features, model_prob, heur_prob)
+
+        return {
+            "available":       True,
+            "result":          "AI_VOICE" if is_fake else "HUMAN_VOICE",
+            "confidence":      confidence,
+            "fake_probability": round(combined, 4),
+            "model_score":     round(model_prob * 100, 1),
+            "heuristic_score": round(heur_prob * 100, 1),
+            "details":         details,
+            "features":        features,
+        }
+
+    def _build_details(
+        self,
+        prob: float,
+        is_fake: bool,
+        features: dict,
+        model_prob: float,
+        heur_prob: float,
+    ) -> list[str]:
+        details = []
+
+        if is_fake:
+            if prob > 0.85:
+                details.append("High-confidence AI-generated voice detected")
+            elif prob > 0.70:
+                details.append("Strong synthetic voice characteristics identified")
+            else:
+                details.append("AI voice patterns detected — likely TTS or voice cloning")
+
+            pitch_std = features.get("pitch_std_hz")
+            if pitch_std is not None and pitch_std < 15:
+                details.append(f"Unnaturally stable pitch (σ={pitch_std}Hz) — human speech typically varies 20-80Hz")
+
+            delta_var = features.get("mfcc_delta_var")
+            if delta_var is not None and delta_var < 1.5:
+                details.append("Insufficient micro-variation in articulation — characteristic of TTS synthesis")
+
+            silence = features.get("silence_ratio")
+            if silence is not None and silence < 0.05:
+                details.append("No natural breath pauses detected — AI voices lack organic speech rhythm")
+
+            details.append(f"Wav2Vec2 model confidence: {model_prob*100:.1f}% synthetic")
+        else:
+            if prob < 0.25:
+                details.append("Strong indicators of authentic human voice")
+            else:
+                details.append("Voice characteristics consistent with natural human speech")
+
+            pitch_std = features.get("pitch_std_hz")
+            if pitch_std is not None and pitch_std >= 20:
+                details.append(f"Natural pitch variation detected (σ={pitch_std}Hz)")
+
+            silence = features.get("silence_ratio")
+            if silence is not None and 0.05 <= silence <= 0.35:
+                details.append("Natural speech rhythm with organic pauses and breath sounds")
+
+            details.append(f"Wav2Vec2 model confidence: {(1-model_prob)*100:.1f}% human")
+
+        return details
+
+
+# ─────────────────────────────────────────────
+# Orchestrator
+# ─────────────────────────────────────────────
+class AudioAuthenticator:
+    def __init__(self):
+        self.extractor = AudioExtractorAgent()
+        self.analyzer  = AudioAnalysisAgent()
+        self.decision  = AudioDecisionAgent()
+        self.reporter  = AudioReportAgent()
+
+    def analyze(self, video_path: str) -> dict:
+        # Step 1: Extract audio
+        waveform, sr = self.extractor.extract(video_path)
+
+        if waveform is None or len(waveform) == 0:
+            return self.reporter.generate(0.5, {}, has_audio=False)
+
+        # Step 2: Heuristic analysis
+        heuristic = self.analyzer.analyze(waveform, sr)
+
+        # Step 3: Model prediction
+        model_prob = self.decision.predict(waveform, sr)
+
+        # Step 4: Report
+        return self.reporter.generate(model_prob, heuristic, has_audio=True)

backend/detector.py

@@ -425,34 +425,53 @@ class ReportGeneratorAgent:
     # Base threshold — adjusted adaptively per video
     BASE_THRESHOLD = 0.58
 
-    def generate(self, analysis: dict, metadata: dict) -> dict:
+    def generate(self, analysis: dict, metadata: dict, audio: dict | None = None) -> dict:
         prob        = analysis["overall_fake_probability"]
         consistency = analysis.get("consistency", 0.5)
         coverage    = analysis.get("face_coverage", 0.5)
 
-        # ── Adaptive threshold ────────────────────────────────────────
-        # Lower threshold when:
-        #   - High consistency (many frames agree it's fake) → easier to flag
-        #   - High face coverage (face visible throughout) → more reliable signal
-        # Raise threshold when:
-        #   - Low consistency (only a few frames look fake) → likely false positive
-        #   - Low coverage (face rarely visible) → unreliable signal
+        # ── Adaptive visual threshold ─────────────────────────────────
         threshold = self.BASE_THRESHOLD
         if consistency >= 0.70 and coverage >= 0.50:
-            threshold -= 0.06   # 0.52 — confident signal, lower bar
+            threshold -= 0.06
         elif consistency >= 0.55:
-            threshold -= 0.03   # 0.55
+            threshold -= 0.03
         elif consistency < 0.35:
-            threshold += 0.07   # 0.65 — inconsistent, raise bar
+            threshold += 0.07
+
+        visual_fake = prob >= threshold
+
+        # ── Combine with audio signal ─────────────────────────────────
+        audio_fake = False
+        audio_prob = 0.0
+        if audio and audio.get("available"):
+            audio_prob = audio.get("fake_probability", 0.0)
+            audio_fake = audio.get("result") == "AI_VOICE"
+
+        # Final verdict: visual is primary, audio can upgrade OR downgrade
+        if audio and audio.get("available"):
+            # Both agree → high confidence
+            if visual_fake and audio_fake:
+                is_fake = True
+            elif not visual_fake and not audio_fake:
+                is_fake = False
+            # Disagreement → visual wins but audio nudges the score
+            elif visual_fake and not audio_fake:
+                # Audio says real — only keep FAKE if visual is strong
+                is_fake = prob >= (threshold + 0.05)
+            else:
+                # Visual says real but audio says AI — flag as suspicious
+                is_fake = audio_prob >= 0.75  # only override if audio is very confident
+        else:
+            is_fake = visual_fake
 
-        is_fake    = prob >= threshold
         calibrated = self._calibrate(prob)
         confidence = round(calibrated * 100, 1)
         result     = "FAKE" if is_fake else "REAL"
 
         logger.info(
-            f"Decision: prob={prob:.3f} threshold={threshold:.3f} "
-            f"consistency={consistency:.2f} coverage={coverage:.2f} → {result}"
+            f"Decision: visual_prob={prob:.3f} threshold={threshold:.3f} "
+            f"visual_fake={visual_fake} audio_fake={audio_fake} → {result}"
         )
 
         details        = self._build_details(analysis, metadata, prob, is_fake, threshold)
@@ -558,18 +577,33 @@ class ReportGeneratorAgent:
 # ─────────────────────────────────────────────
 class DeepfakeAuthenticator:
     def __init__(self):
-        self.frame_agent = FrameAnalyzerAgent(sample_rate=10)
-        self.face_agent = FaceDetectorAgent(min_detection_confidence=0.5)
+        self.frame_agent  = FrameAnalyzerAgent(sample_rate=10)
+        self.face_agent   = FaceDetectorAgent(min_detection_confidence=0.5)
         self.decision_agent = DecisionAgent()
         self.report_agent = ReportGeneratorAgent()
 
+        # Audio analysis (lazy import to avoid blocking startup)
+        self._audio = None
+
+    def _get_audio(self):
+        if self._audio is None:
+            try:
+                from audio_detector import AudioAuthenticator
+                self._audio = AudioAuthenticator()
+                logger.info("AudioAuthenticator initialized")
+            except Exception as e:
+                logger.warning(f"AudioAuthenticator unavailable: {e}")
+                self._audio = False
+        return self._audio if self._audio else None
+
     def analyze(self, video_path: str) -> dict:
+        import time
         start = time.time()
         logger.info(f"Starting analysis: {video_path}")
 
         # Step 1: Extract frames
         metadata = self.frame_agent.get_video_metadata(video_path)
-        frames = self.frame_agent.extract_frames(video_path, max_frames=40)
+        frames   = self.frame_agent.extract_frames(video_path, max_frames=40)
 
         if not frames:
             return {
@@ -578,22 +612,34 @@ class DeepfakeAuthenticator:
                 "details": ["Could not extract frames from video"],
                 "frame_timeline": [],
                 "metadata": metadata,
+                "audio": {"available": False, "result": "NO_AUDIO", "confidence": 0, "details": []},
             }
 
-        # Step 2: Detect faces in each frame
+        # Step 2: Detect faces
         face_crops_per_frame = [
             self.face_agent.detect_and_crop_faces(frame) for frame in frames
         ]
 
-        # Step 3: Run decision analysis
+        # Step 3: Visual decision
         analysis = self.decision_agent.analyze_frames(frames, face_crops_per_frame)
 
-        # Step 4: Generate report
-        report = self.report_agent.generate(analysis, metadata)
+        # Step 4: Audio analysis (parallel-ish — runs after visual)
+        audio_result = {"available": False, "result": "NO_AUDIO", "confidence": 0, "details": []}
+        audio_agent = self._get_audio()
+        if audio_agent:
+            try:
+                audio_result = audio_agent.analyze(video_path)
+            except Exception as e:
+                logger.warning(f"Audio analysis failed: {e}")
+
+        # Step 5: Generate report (visual + audio combined)
+        report = self.report_agent.generate(analysis, metadata, audio_result)
         report["processing_time_sec"] = round(time.time() - start, 2)
+        report["audio"] = audio_result
 
         logger.info(
             f"Analysis complete: {report['result']} ({report['confidence']}%) "
+            f"audio={audio_result.get('result','N/A')} "
             f"in {report['processing_time_sec']}s"
         )
         return report

backend/main.py

@@ -135,7 +135,7 @@ async def analyze_video(file: UploadFile = File(...)):
 
 
 # ── Serve frontend ────────────────────────────
-frontend_path = Path(__file__).parent.parent / "frontend"
+frontend_path = Path(__file__).parent.parent / "frontend-vanilla"
 
 if frontend_path.exists():
     @app.get("/")

backend/requirements.txt

@@ -6,6 +6,13 @@ mediapipe==0.10.14
 numpy==1.26.4
 Pillow==10.3.0
 
-# HuggingFace deepfake model
+# HuggingFace models
 transformers>=4.41.0
 torch>=2.3.0
+torchvision
+torchaudio
+
+# Audio analysis
+moviepy>=1.0.3
+librosa>=0.10.0
+soundfile>=0.12.1

frontend-vanilla/index.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Deepfake Authenticator</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
+<style>
+:root{--g:#00ff88;--r:#ff3355;--w:#ffaa00;--bg:#050508;--card:rgba(255,255,255,0.04);--border:rgba(0,255,136,0.18);--muted:#5a6a7a;}
+*{box-sizing:border-box;margin:0;padding:0;}
+body{background:var(--bg);font-family:'Space Grotesk',sans-serif;color:#e2e8f0;min-height:100vh;overflow-x:hidden;}
+code,pre,.mono{font-family:'JetBrains Mono',monospace;}
+::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:rgba(0,255,136,0.25);border-radius:4px;}
+.hidden{display:none!important;}
+</style>
+</head>
+<body>
+
+<style>
+/* ── Particle Canvas ── */
+#particles{position:fixed;inset:0;z-index:0;pointer-events:none;}
+/* ── Grid overlay ── */
+.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
+  background-image:linear-gradient(rgba(0,255,136,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,0.03) 1px,transparent 1px);
+  background-size:60px 60px;}
+/* ── Glass ── */
+.glass{background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.5);}
+.glass-sm{background:rgba(255,255,255,0.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.07);border-radius:12px;}
+/* ── Glow borders ── */
+.glow-green{box-shadow:0 0 20px rgba(0,255,136,0.25),inset 0 0 20px rgba(0,255,136,0.04);}
+.glow-red{box-shadow:0 0 20px rgba(255,51,85,0.25),inset 0 0 20px rgba(255,51,85,0.04);}
+/* ── Header ── */
+header{position:sticky;top:0;z-index:50;background:rgba(5,5,8,0.85);backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,255,136,0.1);}
+/* ── Eye SVG animation ── */
+@keyframes scanPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.15);}}
+@keyframes eyeScan{0%{stroke-dashoffset:100;}100%{stroke-dashoffset:0;}}
+.eye-scan{animation:scanPulse 2.5s ease-in-out infinite;}
+/* ── Status dot ── */
+@keyframes statusBlink{0%,100%{opacity:1;box-shadow:0 0 6px var(--g);}50%{opacity:0.4;box-shadow:none;}}
+.status-dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:statusBlink 2s ease-in-out infinite;}
+/* ── Drop zone border animation ── */
+@keyframes borderDash{to{stroke-dashoffset:-20;}}
+#dropZone{border:2px dashed rgba(0,255,136,0.25);border-radius:16px;cursor:pointer;min-height:200px;display:flex;align-items:center;justify-content:center;transition:all 0.35s ease;position:relative;overflow:hidden;}
+#dropZone:hover,#dropZone.drag-over{border-color:var(--g);background:rgba(0,255,136,0.04);box-shadow:0 0 40px rgba(0,255,136,0.2),inset 0 0 30px rgba(0,255,136,0.06);transform:scale(1.01);}
+/* ── Orbit ring ── */
+@keyframes orbitRing{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
+.orbit{animation:orbitRing 3s linear infinite;transform-origin:center;}
+/* ── Analyze button ── */
+#analyzeBtn{width:100%;padding:16px;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--muted);cursor:not-allowed;transition:all 0.3s ease;position:relative;overflow:hidden;}
+#analyzeBtn.active{background:linear-gradient(135deg,#00ff88,#00cc66);color:#050508;border-color:transparent;cursor:pointer;box-shadow:0 0 30px rgba(0,255,136,0.4);}
+#analyzeBtn.active:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 0 50px rgba(0,255,136,0.6);}
+#analyzeBtn.active::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);animation:shimmer 2s ease infinite;}
+@keyframes shimmer{to{left:150%;}}
+#analyzeBtn:disabled{opacity:0.45;cursor:not-allowed;transform:none!important;}
+</style>
+
+<style>
+/* ── Loading ── */
+@keyframes radarSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
+@keyframes radarPulse{0%,100%{opacity:0.8;transform:scale(1);}50%{opacity:0.3;transform:scale(1.05);}}
+.radar-ring{border-radius:50%;border:1px solid rgba(0,255,136,0.2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
+.radar-sweep{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,transparent,var(--g));animation:radarSpin 2s linear infinite;}
+/* ── Agent cards ── */
+.agent-card{transition:all 0.4s ease;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px 16px;background:rgba(255,255,255,0.02);}
+.agent-card.active{border-color:var(--g);background:rgba(0,255,136,0.06);box-shadow:0 0 20px rgba(0,255,136,0.15);}
+.agent-card.active .agent-dot{background:var(--g);box-shadow:0 0 8px var(--g);}
+.agent-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.4s ease;flex-shrink:0;}
+/* ── Progress bar ── */
+.prog-track{height:4px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;}
+.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#00aaff,var(--g));box-shadow:0 0 12px var(--g);transition:width 0.5s ease;}
+/* ── Verdict ── */
+@keyframes glitch{0%,100%{text-shadow:0 0 10px var(--r);}20%{text-shadow:-2px 0 #ff0,2px 0 #0ff,0 0 20px var(--r);}40%{text-shadow:2px 0 #ff0,-2px 0 #0ff,0 0 10px var(--r);}60%{text-shadow:0 0 30px var(--r);}}
+.glitch-text{animation:glitch 3s ease-in-out infinite;}
+@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
+.fade-up{animation:fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;}
+@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:none;}}
+/* ── Verdict badge ── */
+.verdict-badge{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;transition:all 0.5s;border:2px solid var(--border);}
+@keyframes pulseFake{0%,100%{box-shadow:0 0 20px rgba(255,51,85,0.3);}50%{box-shadow:0 0 50px rgba(255,51,85,0.7);}}
+@keyframes pulseReal{0%,100%{box-shadow:0 0 20px rgba(0,255,136,0.3);}50%{box-shadow:0 0 50px rgba(0,255,136,0.7);}}
+.verdict-badge.fake{border-color:var(--r);animation:pulseFake 2s infinite;}
+.verdict-badge.real{border-color:var(--g);animation:pulseReal 2s infinite;}
+/* ── Confidence arc (CSS semicircle gauge) ── */
+.gauge-wrap{position:relative;width:200px;height:110px;overflow:hidden;margin:0 auto;}
+.gauge-bg{width:200px;height:200px;border-radius:50%;border:12px solid rgba(255,255,255,0.06);position:absolute;top:0;left:0;clip-path:inset(0 0 50% 0);}
+.gauge-fill{width:200px;height:200px;border-radius:50%;border:12px solid transparent;position:absolute;top:0;left:0;clip-path:inset(0 0 50% 0);transition:transform 1.2s cubic-bezier(0.22,1,0.36,1);}
+.gauge-fill.fake{border-color:var(--r);box-shadow:0 0 20px rgba(255,51,85,0.5);}
+.gauge-fill.real{border-color:var(--g);box-shadow:0 0 20px rgba(0,255,136,0.5);}
+/* ── Conf bar ── */
+.conf-track{height:10px;background:rgba(255,255,255,0.05);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);}
+.conf-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);}
+.conf-fill.fake{background:linear-gradient(90deg,#880022,var(--r));box-shadow:0 0 15px rgba(255,51,85,0.6);}
+.conf-fill.real{background:linear-gradient(90deg,#00aaff,var(--g));box-shadow:0 0 15px rgba(0,255,136,0.6);}
+/* ── Risk needle ── */
+#riskNeedle{display:inline-block;padding:4px 14px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.15em;border:1px solid;transition:all 0.5s;}
+/* ── Insight bullets ── */
+.insight-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);font-size:13px;line-height:1.6;color:#a0aec0;animation:slideInLeft 0.4s ease both;}
+.insight-item:hover{background:rgba(255,255,255,0.04);}
+.insight-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;margin-top:6px;}
+/* ── Timeline bars ── */
+.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;position:relative;}
+.bar-outer{width:100%;background:rgba(255,255,255,0.05);border-radius:4px 4px 0 0;overflow:hidden;position:relative;}
+.bar-inner{width:100%;border-radius:4px 4px 0 0;transition:height 0.8s cubic-bezier(0.22,1,0.36,1);}
+.bar-wrap:hover .bar-tooltip{opacity:1;transform:translateY(-4px);}
+.bar-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(10,10,20,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:4px 8px;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:all 0.2s ease;z-index:10;font-family:'JetBrains Mono',monospace;}
+/* ── Meta grid ── */
+.meta-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
+.meta-row:last-child{border-bottom:none;}
+/* ── Error ── */
+#errorSection{border-color:rgba(255,51,85,0.3)!important;background:rgba(255,51,85,0.04)!important;}
+/* ── Stat pills ── */
+.stat-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:99px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:600;letter-spacing:0.05em;color:#a0aec0;}
+.stat-pill .pip{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);}
+/* ── Section label ── */
+.sec-label{font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#00aaff;display:flex;align-items:center;gap:8px;margin-bottom:14px;}
+.sec-label::before{content:'';display:inline-block;width:3px;height:14px;background:#00aaff;border-radius:2px;box-shadow:0 0 8px #00aaff;}
+/* ── Model badge ── */
+#modelBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.25);font-size:11px;font-weight:600;letter-spacing:0.1em;color:var(--g);}
+</style>
+
+
+<!-- Particle canvas + grid -->
+<canvas id="particles"></canvas>
+<div class="grid-bg"></div>
+
+<!-- ══ HEADER ══ -->
+<header>
+  <div style="max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;">
+    <div style="display:flex;align-items:center;gap:14px;">
+      <!-- Animated eye logo -->
+      <div class="eye-scan" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
+        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
+          <ellipse cx="18" cy="18" rx="14" ry="9" stroke="#00ff88" stroke-width="1.5" opacity="0.9"/>
+          <circle cx="18" cy="18" r="5" fill="#00ff88" opacity="0.9"/>
+          <circle cx="18" cy="18" r="2.5" fill="#050508"/>
+          <path d="M4 18 Q18 4 32 18" stroke="#00ff88" stroke-width="0.8" stroke-dasharray="4 3" opacity="0.4">
+            <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="8s" repeatCount="indefinite"/>
+          </path>
+        </svg>
+      </div>
+      <div>
+        <div style="font-size:13px;font-weight:700;letter-spacing:0.18em;color:#fff;">DEEPFAKE AUTHENTICATOR</div>
+        <div style="font-size:9px;letter-spacing:0.25em;color:var(--muted);font-family:'JetBrains Mono',monospace;">AI-POWERED VIDEO FORENSICS</div>
+      </div>
+    </div>
+    <div id="modelBadge">
+      <div class="status-dot"></div>
+      <span>ViT ENSEMBLE</span>
+    </div>
+  </div>
+</header>
+
+<!-- ══ MAIN ══ -->
+<div style="position:relative;z-index:1;max-width:860px;margin:0 auto;padding:48px 24px 80px;">
+
+  <!-- Hero -->
+  <div class="fade-up" style="text-align:center;margin-bottom:48px;animation-delay:0.1s;">
+    <h1 style="font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;margin-bottom:16px;background:linear-gradient(135deg,#fff 30%,var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">Is This Video Real?</h1>
+    <p style="color:var(--muted);font-size:15px;max-width:480px;margin:0 auto 28px;line-height:1.7;">Advanced AI ensemble detects facial manipulation with 99%+ accuracy using dual Vision Transformer models.</p>
+    <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center;">
+      <div class="stat-pill"><span class="pip"></span>2 ViT Models</div>
+      <div class="stat-pill"><span class="pip"></span>40 Frame Analysis</div>
+      <div class="stat-pill"><span class="pip"></span>&lt; 15s Detection</div>
+    </div>
+  </div>
+
+  <!-- ══ UPLOAD SECTION ══ -->
+  <section id="uploadSection" class="glass fade-up" style="padding:32px;margin-bottom:24px;animation-delay:0.2s;">
+    <div id="dropZone">
+      <!-- Upload prompt -->
+      <div id="uploadPrompt" style="text-align:center;padding:40px 24px;">
+        <div style="position:relative;width:80px;height:80px;margin:0 auto 20px;">
+          <div style="position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(0,255,136,0.3);" class="orbit"></div>
+          <div style="position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(0,255,136,0.15);"></div>
+          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
+            <svg width="32" height="32" fill="none" stroke="#00ff88" stroke-width="1.5" viewBox="0 0 24 24" opacity="0.8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+            </svg>
+          </div>
+        </div>
+        <h3 style="font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;">Drop Video for Forensic Analysis</h3>
+        <p style="font-size:13px;color:var(--muted);">Drag &amp; drop or click to browse</p>
+        <p style="font-size:11px;color:var(--muted);margin-top:12px;opacity:0.6;font-family:'JetBrains Mono',monospace;">MP4 · AVI · MOV · MKV · WebM — Max 100MB</p>
+      </div>
+      <!-- File chosen state -->
+      <div id="fileChosen" class="hidden" style="width:100%;padding:28px 32px;display:flex;align-items:center;gap:20px;">
+        <div style="width:56px;height:56px;border-radius:12px;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 20px rgba(0,255,136,0.15);">
+          <svg width="28" height="28" fill="none" stroke="#00ff88" stroke-width="1.5" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
+          </svg>
+        </div>
+        <div style="flex:1;min-width:0;">
+          <p id="chosenName" style="font-size:14px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></p>
+          <p id="chosenSize" style="font-size:12px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace;"></p>
+        </div>
+        <button id="clearBtn" style="padding:8px;color:var(--muted);background:none;border:none;cursor:pointer;border-radius:8px;transition:all 0.2s;" onmouseover="this.style.color='#ff3355';this.style.background='rgba(255,51,85,0.1)'" onmouseout="this.style.color='var(--muted)';this.style.background='none'">
+          <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </div>
+    <input type="file" id="fileInput" accept="video/*" style="display:none;"/>
+    <div style="margin-top:20px;">
+      <button id="analyzeBtn" disabled>
+        <span id="analyzeBtnText">Analyze Video</span>
+      </button>
+    </div>
+  </section>
+
+  <!-- ══ LOADING SECTION ══ -->
+  <section id="loadingSection" class="hidden glass fade-up" style="padding:48px 32px;text-align:center;margin-bottom:24px;">
+    <!-- Radar -->
+    <div style="position:relative;width:140px;height:140px;margin:0 auto 36px;">
+      <div class="radar-ring" style="width:140px;height:140px;"></div>
+      <div class="radar-ring" style="width:100px;height:100px;"></div>
+      <div class="radar-ring" style="width:60px;height:60px;"></div>
+      <div class="radar-sweep" style="width:70px;top:50%;left:50%;transform-origin:left center;"></div>
+      <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--g);box-shadow:0 0 15px var(--g);"></div>
+    </div>
+    <!-- Status -->
+    <p id="loadingStatus" style="font-size:11px;font-weight:700;letter-spacing:0.2em;color:#00aaff;text-transform:uppercase;margin-bottom:20px;font-family:'JetBrains Mono',monospace;">Initializing sequence...</p>
+    <!-- Progress -->
+    <div style="max-width:400px;margin:0 auto 32px;">
+      <div class="prog-track">
+        <div id="progressBar" style="width:0%;" class="prog-fill"></div>
+      </div>
+    </div>
+    <!-- Agent cards -->
+    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:500px;margin:0 auto;">
+      <div id="ag0" class="agent-card" style="display:flex;align-items:center;gap:10px;">
+        <div class="agent-dot"></div>
+        <div style="text-align:left;">
+          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Frame Extractor</div>
+          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Sampling keyframes</div>
+        </div>
+      </div>
+      <div id="ag1" class="agent-card" style="display:flex;align-items:center;gap:10px;">
+        <div class="agent-dot"></div>
+        <div style="text-align:left;">
+          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Face Detector</div>
+          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Isolating regions</div>
+        </div>
+      </div>
+      <div id="ag2" class="agent-card" style="display:flex;align-items:center;gap:10px;">
+        <div class="agent-dot"></div>
+        <div style="text-align:left;">
+          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">ViT Ensemble</div>
+          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Neural inference</div>
+        </div>
+      </div>
+      <div id="ag3" class="agent-card" style="display:flex;align-items:center;gap:10px;">
+        <div class="agent-dot"></div>
+        <div style="text-align:left;">
+          <div style="font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;">Report Builder</div>
+          <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Compiling results</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ══ RESULT SECTION ══ -->
+  <section id="resultSection" class="hidden fade-up" style="display:flex;flex-direction:column;gap:20px;">
+
+    <!-- Verdict Card -->
+    <div id="verdictCard" class="glass" style="padding:40px;display:flex;flex-wrap:wrap;align-items:center;gap:36px;">
+      <!-- Badge + label -->
+      <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
+        <div id="verdictBadge" class="verdict-badge" style="margin-bottom:14px;background:rgba(5,5,8,0.8);">
+          <span id="verdictEmoji" style="font-size:2.5rem;"></span>
+        </div>
+        <div id="verdictLabel" style="font-size:28px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;"></div>
+        <div style="font-size:9px;color:var(--muted);letter-spacing:0.25em;margin-top:4px;font-family:'JetBrains Mono',monospace;">VERDICT</div>
+      </div>
+      <!-- Confidence + risk -->
+      <div style="flex:1;min-width:220px;">
+        <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;">
+          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;">Confidence Score</span>
+          <span id="confValue" style="font-size:36px;font-weight:700;font-family:'JetBrains Mono',monospace;"></span>
+        </div>
+        <div class="conf-track" style="margin-bottom:20px;">
+          <div id="confBar" class="conf-fill" style="width:0%;"></div>
+        </div>
+        <div class="glass-sm" style="padding:14px 18px;display:flex;align-items:center;justify-content:space-between;">
+          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;">Risk Assessment</span>
+          <span id="riskNeedle"></span>
+        </div>
+        <div style="margin-top:12px;text-align:right;">
+          <span id="riskLabel" style="font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;"></span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Insights + Meta -->
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
+      <div class="glass" style="padding:24px;">
+        <div class="sec-label">Analysis Insights</div>
+        <div id="detailsList" style="display:flex;flex-direction:column;gap:10px;"></div>
+      </div>
+      <div class="glass" style="padding:24px;display:flex;flex-direction:column;justify-content:space-between;">
+        <div>
+          <div class="sec-label">Video Metadata</div>
+          <div id="metaGrid"></div>
+        </div>
+        <div style="margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:8px;">
+          <div style="width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);"></div>
+          <span style="font-size:10px;color:var(--muted);letter-spacing:0.15em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">Models: ViT Ensemble</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Frame Timeline -->
+    <div class="glass" style="padding:24px;">
+      <div class="sec-label">Frame Analysis Timeline</div>
+      <div id="timelineChart" style="display:flex;align-items:flex-end;gap:3px;height:80px;position:relative;padding-bottom:20px;"></div>
+      <div style="display:flex;justify-content:space-between;margin-top:8px;">
+        <span style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Frame 0</span>
+        <span style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;">Frame 40</span>
+      </div>
+    </div>
+
+    <!-- Reset -->
+    <div style="text-align:center;margin-top:8px;">
+      <button onclick="resetAll()" style="padding:12px 28px;font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.3s;font-family:'Space Grotesk',sans-serif;" onmouseover="this.style.color='var(--g)';this.style.borderColor='rgba(0,255,136,0.4)';this.style.background='rgba(0,255,136,0.05)'" onmouseout="this.style.color='var(--muted)';this.style.borderColor='rgba(255,255,255,0.1)';this.style.background='none'">
+        ↻ &nbsp;Analyze Another Video
+      </button>
+    </div>
+  </section>
+
+  <!-- ══ ERROR SECTION ══ -->
+  <section id="errorSection" class="hidden glass fade-up" style="padding:28px 32px;margin-bottom:24px;">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
+      <svg width="22" height="22" fill="none" stroke="#ff3355" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+      <span style="font-size:12px;font-weight:700;letter-spacing:0.2em;color:#ff3355;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">Analysis Failed</span>
+    </div>
+    <p id="errorMsg" style="font-size:13px;color:var(--muted);margin-left:34px;line-height:1.6;"></p>
+    <div style="margin-left:34px;margin-top:16px;">
+      <button onclick="resetAll()" style="font-size:11px;color:rgba(255,255,255,0.4);background:none;border:none;cursor:pointer;letter-spacing:0.15em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif;transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'">↻ Try Again</button>
+    </div>
+  </section>
+
+</div><!-- /main -->
+
+<footer style="position:relative;z-index:1;text-align:center;padding:24px;font-size:10px;color:rgba(90,106,122,0.5);letter-spacing:0.2em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;">
+  Deepfake Authenticator &nbsp;·&nbsp; Secure Local Inference &nbsp;·&nbsp; ViT Ensemble v2
+</footer>
+
+<script>
+// ── Particle background ──────────────────────────────────────────────────────
+(function(){
+  const c=document.getElementById('particles');
+  const ctx=c.getContext('2d');
+  let W,H,pts=[];
+  function resize(){W=c.width=window.innerWidth;H=c.height=window.innerHeight;}
+  resize();window.addEventListener('resize',resize);
+  for(let i=0;i<60;i++)pts.push({x:Math.random()*W,y:Math.random()*H,vx:(Math.random()-0.5)*0.3,vy:(Math.random()-0.5)*0.3,r:Math.random()*1.5+0.5,a:Math.random()});
+  function draw(){
+    ctx.clearRect(0,0,W,H);
+    pts.forEach(p=>{
+      p.x+=p.vx;p.y+=p.vy;
+      if(p.x<0||p.x>W)p.vx*=-1;
+      if(p.y<0||p.y>H)p.vy*=-1;
+      ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
+      ctx.fillStyle=`rgba(0,255,136,${0.15+p.a*0.2})`;ctx.fill();
+    });
+    // draw connections
+    for(let i=0;i<pts.length;i++)for(let j=i+1;j<pts.length;j++){
+      const dx=pts[i].x-pts[j].x,dy=pts[i].y-pts[j].y,d=Math.sqrt(dx*dx+dy*dy);
+      if(d<120){ctx.beginPath();ctx.moveTo(pts[i].x,pts[i].y);ctx.lineTo(pts[j].x,pts[j].y);ctx.strokeStyle=`rgba(0,255,136,${0.06*(1-d/120)})`;ctx.lineWidth=0.5;ctx.stroke();}
+    }
+    requestAnimationFrame(draw);
+  }
+  draw();
+})();
+</script>
+<script src="script.js"></script>
+</body>
+</html>

frontend-vanilla/script.js

@@ -0,0 +1,354 @@
+/**
+ * Deepfake Authenticator — Frontend Logic (Cinematic Dark UI)
+ */
+
+const API_BASE = (window.location.protocol === 'file:')
+  ? 'http://localhost:8000'
+  : window.location.origin;
+
+let selectedFile = null;
+
+// ── Boot ──────────────────────────────────────
+window.addEventListener('load', () => {
+  initUpload();
+});
+
+// ── Upload wiring ─────────────────────────────
+function initUpload() {
+  const zone  = document.getElementById('dropZone');
+  const input = document.getElementById('fileInput');
+  const clear = document.getElementById('clearBtn');
+  const btn   = document.getElementById('analyzeBtn');
+
+  zone.addEventListener('click', e => {
+    if (!e.target.closest('#clearBtn')) input.click();
+  });
+
+  input.addEventListener('change', () => {
+    if (input.files?.[0]) applyFile(input.files[0]);
+  });
+
+  clear.addEventListener('click', e => {
+    e.stopPropagation();
+    clearFile();
+  });
+
+  zone.addEventListener('dragover', e => {
+    e.preventDefault(); e.stopPropagation();
+    zone.classList.add('drag-over');
+  });
+
+  zone.addEventListener('dragleave', e => {
+    e.preventDefault();
+    zone.classList.remove('drag-over');
+  });
+
+  zone.addEventListener('drop', e => {
+    e.preventDefault(); e.stopPropagation();
+    zone.classList.remove('drag-over');
+    const f = e.dataTransfer.files[0];
+    if (f?.type.startsWith('video/')) applyFile(f);
+    else showError('Please drop a valid video file (MP4, AVI, MOV, MKV, WebM).');
+  });
+
+  btn.addEventListener('click', analyzeVideo);
+}
+
+function applyFile(file) {
+  selectedFile = file;
+  document.getElementById('uploadPrompt').classList.add('hidden');
+  const fc = document.getElementById('fileChosen');
+  fc.classList.remove('hidden');
+  document.getElementById('chosenName').textContent = file.name;
+  document.getElementById('chosenSize').textContent = fmtBytes(file.size);
+  const btn = document.getElementById('analyzeBtn');
+  btn.disabled = false;
+  btn.classList.add('active');
+}
+
+function clearFile() {
+  selectedFile = null;
+  document.getElementById('fileInput').value = '';
+  document.getElementById('fileChosen').classList.add('hidden');
+  document.getElementById('uploadPrompt').classList.remove('hidden');
+  const btn = document.getElementById('analyzeBtn');
+  btn.disabled = true;
+  btn.classList.remove('active');
+}
+
+function resetAll() {
+  clearFile();
+  ['loadingSection', 'resultSection', 'errorSection'].forEach(hide);
+  show('uploadSection');
+}
+
+// ── Analyze ───────────────────────────────────
+async function analyzeVideo() {
+  if (!selectedFile) return;
+
+  hide('uploadSection');
+  show('loadingSection');
+  ['resultSection', 'errorSection'].forEach(hide);
+
+  startAgentAnim();
+
+  const fd = new FormData();
+  fd.append('file', selectedFile);
+
+  try {
+    const res = await fetch(`${API_BASE}/analyze`, { method: 'POST', body: fd });
+    if (!res.ok) {
+      const e = await res.json().catch(() => ({}));
+      throw new Error(e.detail || `Server error ${res.status}`);
+    }
+    const data = await res.json();
+    renderResult(data);
+  } catch (err) {
+    showError(err.message || 'Connection to analysis engine failed.');
+  } finally {
+    hide('loadingSection');
+    stopAgentAnim();
+  }
+}
+
+// ── Loading Animation ─────────────────────────
+let _simTimer = null;
+let _agentTimer = null;
+
+function startAgentAnim() {
+  const statusEl = document.getElementById('loadingStatus');
+  const progBar  = document.getElementById('progressBar');
+
+  const phases = [
+    { p: 12,  msg: 'Extracting keyframes...', ag: 0 },
+    { p: 35,  msg: 'Isolating facial regions...', ag: 1 },
+    { p: 65,  msg: 'Running ViT neural inference...', ag: 2 },
+    { p: 85,  msg: 'Cross-referencing metadata...', ag: 2 },
+    { p: 95,  msg: 'Compiling authenticity report...', ag: 3 },
+  ];
+
+  // Reset agents
+  [0,1,2,3].forEach(i => {
+    const card = document.getElementById('ag' + i);
+    if (card) card.classList.remove('active');
+  });
+
+  statusEl.textContent = 'Initializing sequence...';
+  progBar.style.width = '0%';
+
+  let idx = 0;
+  _simTimer = setInterval(() => {
+    if (idx < phases.length) {
+      const ph = phases[idx];
+      statusEl.textContent = ph.msg;
+      progBar.style.width = ph.p + '%';
+      const card = document.getElementById('ag' + ph.ag);
+      if (card) card.classList.add('active');
+      idx++;
+    }
+  }, 1100);
+}
+
+function stopAgentAnim() {
+  if (_simTimer) { clearInterval(_simTimer); _simTimer = null; }
+  document.getElementById('progressBar').style.width = '100%';
+  [0,1,2,3].forEach(i => {
+    const card = document.getElementById('ag' + i);
+    if (card) card.classList.add('active');
+  });
+}
+
+// ── Render Result ───────────���─────────────────
+function renderResult(data) {
+  const isFake = data.result === 'FAKE';
+  const pct    = data.confidence;
+
+  // Verdict card border glow
+  const vc = document.getElementById('verdictCard');
+  vc.style.borderColor = isFake ? 'rgba(255,51,85,0.5)' : 'rgba(0,255,136,0.5)';
+  vc.style.boxShadow   = isFake
+    ? '0 0 50px rgba(255,51,85,0.15), inset 0 0 30px rgba(255,51,85,0.05)'
+    : '0 0 50px rgba(0,255,136,0.15), inset 0 0 30px rgba(0,255,136,0.05)';
+
+  // Badge
+  const badge = document.getElementById('verdictBadge');
+  badge.className = 'verdict-badge ' + (isFake ? 'fake' : 'real');
+  badge.style.background = isFake ? 'rgba(255,51,85,0.08)' : 'rgba(0,255,136,0.08)';
+
+  // Emoji
+  document.getElementById('verdictEmoji').textContent = isFake ? '⚠' : '✓';
+
+  // Label
+  const lbl = document.getElementById('verdictLabel');
+  lbl.textContent = isFake ? 'DEEPFAKE' : 'AUTHENTIC';
+  lbl.style.color = isFake ? '#ff3355' : '#00ff88';
+  lbl.style.textShadow = isFake
+    ? '0 0 20px rgba(255,51,85,0.7)'
+    : '0 0 20px rgba(0,255,136,0.7)';
+  if (isFake) lbl.classList.add('glitch-text');
+  else lbl.classList.remove('glitch-text');
+
+  // Confidence value
+  const cv = document.getElementById('confValue');
+  cv.textContent = pct + '%';
+  cv.style.color = isFake ? '#ff3355' : '#00ff88';
+
+  // Confidence bar
+  const bar = document.getElementById('confBar');
+  bar.className = 'conf-fill ' + (isFake ? 'fake' : 'real');
+  setTimeout(() => { bar.style.width = pct + '%'; }, 80);
+
+  // Risk needle
+  const needle = document.getElementById('riskNeedle');
+  const riskLbl = document.getElementById('riskLabel');
+  if (pct < 35) {
+    needle.textContent = 'LOW RISK';
+    needle.style.color = '#00ff88';
+    needle.style.borderColor = 'rgba(0,255,136,0.35)';
+    needle.style.background = 'rgba(0,255,136,0.08)';
+    if (riskLbl) riskLbl.textContent = 'Minimal manipulation indicators detected';
+  } else if (pct < 65) {
+    needle.textContent = 'MEDIUM RISK';
+    needle.style.color = '#ffaa00';
+    needle.style.borderColor = 'rgba(255,170,0,0.35)';
+    needle.style.background = 'rgba(255,170,0,0.08)';
+    if (riskLbl) riskLbl.textContent = 'Moderate anomalies detected — review advised';
+  } else {
+    needle.textContent = 'CRITICAL RISK';
+    needle.style.color = '#ff3355';
+    needle.style.borderColor = 'rgba(255,51,85,0.35)';
+    needle.style.background = 'rgba(255,51,85,0.08)';
+    if (riskLbl) riskLbl.textContent = 'High-confidence manipulation signatures found';
+  }
+
+  // Insights
+  const dl = document.getElementById('detailsList');
+  dl.innerHTML = '';
+  const details = data.details || ['Analysis completed successfully.'];
+  const dotColor = isFake ? '#ff3355' : '#00ff88';
+  const dotGlow  = isFake ? 'rgba(255,51,85,0.6)' : 'rgba(0,255,136,0.6)';
+  details.forEach((txt, i) => {
+    const div = document.createElement('div');
+    div.className = 'insight-item';
+    div.style.animationDelay = (i * 0.08) + 's';
+    div.style.borderLeftColor = dotColor;
+    div.style.borderLeft = `2px solid ${dotColor}`;
+    div.innerHTML = `<span class="insight-dot" style="background:${dotColor};box-shadow:0 0 8px ${dotGlow};"></span><span>${esc(txt)}</span>`;
+    dl.appendChild(div);
+  });
+
+  // Metadata
+  const meta = data.metadata || {};
+  const mg = document.getElementById('metaGrid');
+  mg.innerHTML = '';
+  const metaItems = [
+    ['Frames Analyzed', meta.frames_analyzed ?? '—'],
+    ['Duration',        meta.video_duration_sec ? meta.video_duration_sec + 's' : '—'],
+    ['FPS',             meta.video_fps ?? '—'],
+    ['Resolution',      meta.resolution ?? '—'],
+    ['Processing Time', data.processing_time_sec ? data.processing_time_sec + 's' : '—'],
+  ];
+  metaItems.forEach(([k, v]) => {
+    const row = document.createElement('div');
+    row.className = 'meta-row';
+    row.innerHTML = `<span style="font-size:11px;color:var(--muted);letter-spacing:0.08em;">${k}</span><span style="font-size:13px;font-weight:600;color:#fff;font-family:'JetBrains Mono',monospace;">${v}</span>`;
+    mg.appendChild(row);
+  });
+
+  // Frame timeline
+  renderTimeline(data, isFake);
+
+  show('resultSection');
+}
+
+function renderTimeline(data, isFake) {
+  const chart = document.getElementById('timelineChart');
+  if (!chart) return;
+  chart.innerHTML = '';
+
+  const frames = data.frame_scores || [];
+  if (!frames.length) {
+    chart.innerHTML = '<span style="font-size:11px;color:var(--muted);font-family:\'JetBrains Mono\',monospace;margin:auto;">No per-frame data available</span>';
+    return;
+  }
+
+  const maxH = 60; // px
+  const barColor = isFake ? '#ff3355' : '#00ff88';
+  const barGlow  = isFake ? 'rgba(255,51,85,0.5)' : 'rgba(0,255,136,0.5)';
+
+  frames.forEach((score, i) => {
+    const pct = Math.round(score * 100);
+    const h   = Math.max(4, Math.round((score) * maxH));
+
+    const wrap = document.createElement('div');
+    wrap.className = 'bar-wrap';
+    wrap.style.height = maxH + 'px';
+
+    const outer = document.createElement('div');
+    outer.className = 'bar-outer';
+    outer.style.height = maxH + 'px';
+
+    const inner = document.createElement('div');
+    inner.className = 'bar-inner';
+    inner.style.height = '0px';
+    inner.style.background = score > 0.5
+      ? `linear-gradient(to top, ${barColor}, rgba(255,255,255,0.3))`
+      : 'rgba(255,255,255,0.12)';
+    if (score > 0.5) inner.style.boxShadow = `0 0 8px ${barGlow}`;
+
+    outer.appendChild(inner);
+
+    const tip = document.createElement('div');
+    tip.className = 'bar-tooltip';
+    tip.textContent = `F${i+1}: ${pct}%`;
+
+    wrap.appendChild(outer);
+    wrap.appendChild(tip);
+    chart.appendChild(wrap);
+
+    // Animate in
+    setTimeout(() => { inner.style.height = h + 'px'; }, 50 + i * 20);
+  });
+
+  // Threshold line at 50%
+  const line = document.createElement('div');
+  line.style.cssText = `position:absolute;left:0;right:0;bottom:${maxH*0.5}px;height:1px;background:rgba(255,170,0,0.4);pointer-events:none;`;
+  const lineLbl = document.createElement('span');
+  lineLbl.style.cssText = 'position:absolute;right:4px;top:-14px;font-size:9px;color:#ffaa00;font-family:\'JetBrains Mono\',monospace;letter-spacing:0.1em;';
+  lineLbl.textContent = '50%';
+  line.appendChild(lineLbl);
+  chart.appendChild(line);
+}
+
+// ── Helpers ───────────────────────────────────
+function show(id) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.remove('hidden');
+  if (el.style.display === 'none') el.style.display = '';
+}
+
+function hide(id) {
+  const el = document.getElementById(id);
+  if (el) el.classList.add('hidden');
+}
+
+function fmtBytes(b) {
+  if (b < 1024)    return b + ' B';
+  if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
+  return (b / 1048576).toFixed(1) + ' MB';
+}
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function showError(msg) {
+  hide('uploadSection');
+  hide('loadingSection');
+  document.getElementById('errorMsg').textContent = msg;
+  show('errorSection');
+}

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

frontend/index.html

@@ -318,6 +318,42 @@ header{position:sticky;top:0;z-index:50;background:rgba(5,5,8,0.85);backdrop-fil
       </div>
     </div>
 
+    <!-- ══ AUDIO ANALYSIS CARD ══ -->
+    <div id="audioSection" class="hidden glass fade-up" style="padding:28px;">
+      <div class="sec-label" style="margin-bottom:18px;">
+        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/></svg>
+        VOICE AUTHENTICITY ANALYSIS
+      </div>
+      <div style="display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:20px;">
+        <div id="audioBadge" style="padding:8px 18px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:0.1em;border:1px solid;transition:all .4s;"></div>
+        <div style="flex:1;min-width:160px;">
+          <div class="conf-track">
+            <div id="audioBar" class="conf-fill" style="width:0%;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);"></div>
+          </div>
+        </div>
+      </div>
+      <div style="display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;">
+        <div class="glass-sm" style="padding:12px 18px;flex:1;min-width:120px;text-align:center;">
+          <div style="font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:4px;">WAV2VEC2 MODEL</div>
+          <div id="audioModelScore" style="font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff;"></div>
+        </div>
+        <div class="glass-sm" style="padding:12px 18px;flex:1;min-width:120px;text-align:center;">
+          <div style="font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:4px;">SIGNAL HEURISTICS</div>
+          <div id="audioHeurScore" style="font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#fff;"></div>
+        </div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
+        <div>
+          <div style="font-size:10px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px;">VOICE INSIGHTS</div>
+          <div id="audioDetailsList" style="display:flex;flex-direction:column;gap:8px;"></div>
+        </div>
+        <div>
+          <div style="font-size:10px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px;">SIGNAL FEATURES</div>
+          <div id="audioFeatGrid"></div>
+        </div>
+      </div>
+    </div>
+
     <!-- Reset -->
     <div style="text-align:center;margin-top:8px;">
       <button onclick="resetAll()" style="padding:12px 28px;font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;transition:all 0.3s;font-family:'Space Grotesk',sans-serif;" onmouseover="this.style.color='var(--g)';this.style.borderColor='rgba(0,255,136,0.4)';this.style.background='rgba(0,255,136,0.05)'" onmouseout="this.style.color='var(--muted)';this.style.borderColor='rgba(255,255,255,0.1)';this.style.background='none'">

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.4",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.10",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "styled-components": "^6.4.1",
+    "tailwindcss": "^4.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "vite": "^8.0.10"
+  }
+}

frontend/script.js

@@ -258,6 +258,9 @@ function renderResult(data) {
   // Frame timeline
   renderTimeline(data, isFake);
 
+  // Audio result
+  renderAudio(data.audio || null);
+
   show('resultSection');
 }
 
@@ -352,3 +355,79 @@ function showError(msg) {
   document.getElementById('errorMsg').textContent = msg;
   show('errorSection');
 }
+
+// ── Audio Result ──────────────────────────────
+function renderAudio(audio) {
+  const section = document.getElementById('audioSection');
+  if (!section) return;
+
+  if (!audio || !audio.available) {
+    section.classList.add('hidden');
+    return;
+  }
+
+  section.classList.remove('hidden');
+
+  const isAI    = audio.result === 'AI_VOICE';
+  const pct     = audio.confidence;
+  const color   = isAI ? '#ff3355' : '#00ff88';
+  const colorDim = isAI ? 'rgba(255,51,85,0.15)' : 'rgba(0,255,136,0.15)';
+
+  // Header badge
+  const badge = document.getElementById('audioBadge');
+  if (badge) {
+    badge.textContent = isAI ? '🤖 AI VOICE DETECTED' : '🎙️ HUMAN VOICE';
+    badge.style.color = color;
+    badge.style.borderColor = color + '55';
+    badge.style.background  = colorDim;
+  }
+
+  // Scores
+  const modelScore = document.getElementById('audioModelScore');
+  const heurScore  = document.getElementById('audioHeurScore');
+  if (modelScore) modelScore.textContent = audio.model_score + '%';
+  if (heurScore)  heurScore.textContent  = audio.heuristic_score + '%';
+
+  // Bar
+  const bar = document.getElementById('audioBar');
+  if (bar) {
+    bar.style.background = isAI
+      ? 'linear-gradient(90deg,#880022,#ff3355)'
+      : 'linear-gradient(90deg,#00aaff,#00ff88)';
+    bar.style.boxShadow = `0 0 12px ${color}66`;
+    setTimeout(() => { bar.style.width = pct + '%'; }, 80);
+  }
+
+  // Details
+  const dl = document.getElementById('audioDetailsList');
+  if (dl) {
+    dl.innerHTML = '';
+    (audio.details || []).forEach((txt, i) => {
+      const div = document.createElement('div');
+      div.className = 'insight-item';
+      div.style.animationDelay = (i * 0.07) + 's';
+      div.style.borderLeft = `2px solid ${color}`;
+      div.innerHTML = `<span class="insight-dot" style="background:${color};box-shadow:0 0 6px ${color}88;"></span><span>${esc(txt)}</span>`;
+      dl.appendChild(div);
+    });
+  }
+
+  // Features
+  const feat = audio.features || {};
+  const featGrid = document.getElementById('audioFeatGrid');
+  if (featGrid) {
+    featGrid.innerHTML = '';
+    const items = [
+      ['Pitch Std Dev', feat.pitch_std_hz != null ? feat.pitch_std_hz + ' Hz' : '—'],
+      ['MFCC Δ Variance', feat.mfcc_delta_var != null ? feat.mfcc_delta_var : '—'],
+      ['Spectral Flatness', feat.spectral_flatness != null ? feat.spectral_flatness : '—'],
+      ['Silence Ratio', feat.silence_ratio != null ? (feat.silence_ratio * 100).toFixed(1) + '%' : '—'],
+    ];
+    items.forEach(([k, v]) => {
+      const row = document.createElement('div');
+      row.className = 'meta-row';
+      row.innerHTML = `<span style="font-size:11px;color:var(--muted);">${k}</span><span style="font-size:12px;font-weight:600;color:#fff;font-family:'JetBrains Mono',monospace;">${v}</span>`;
+      featGrid.appendChild(row);
+    });
+  }
+}

frontend/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,225 @@
+import React, { useState, useRef } from 'react';
+import Loader from './components/Loader';
+const API_BASE = 'http://localhost:8000';
+
+function App() {
+  const [file, setFile] = useState(null);
+  const [status, setStatus] = useState('idle'); // 'idle', 'analyzing', 'result', 'error'
+  const [resultData, setResultData] = useState(null);
+  const [errorMsg, setErrorMsg] = useState('');
+  
+  const fileInputRef = useRef(null);
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile && droppedFile.type.startsWith('video/')) {
+      setFile(droppedFile);
+    } else {
+      setErrorMsg('Please drop a valid video file (MP4, AVI, MOV, MKV, WebM).');
+      setStatus('error');
+    }
+  };
+
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleAnalyze = async () => {
+    if (!file) return;
+    setStatus('analyzing');
+    
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const res = await fetch(`${API_BASE}/analyze`, { method: 'POST', body: formData });
+      if (!res.ok) {
+        const e = await res.json().catch(() => ({}));
+        throw new Error(e.detail || `Server error ${res.status}`);
+      }
+      const data = await res.json();
+      setResultData(data);
+      setStatus('result');
+    } catch (err) {
+      setErrorMsg(err.message || 'Connection to analysis engine failed.');
+      setStatus('error');
+    }
+  };
+
+  const resetAll = () => {
+    setFile(null);
+    setResultData(null);
+    setErrorMsg('');
+    setStatus('idle');
+  };
+
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+  };
+
+  return (
+    <>
+      <div className="scanner"></div>
+
+      <div className="max-w-5xl mx-auto px-6 py-12 min-h-screen flex flex-col relative z-10">
+        
+        {/* Header */}
+        <header className="text-center mb-12 fade-up" style={{ animationDelay: '0.1s' }}>
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[rgba(0,255,156,0.3)] bg-[rgba(0,255,156,0.05)] mb-6 shadow-[0_0_15px_rgba(0,255,156,0.1)]">
+            <div className="w-2 h-2 rounded-full bg-[#00ff9c] shadow-[0_0_8px_#00ff9c] animate-pulse"></div>
+            <span className="text-[10px] font-semibold tracking-[0.2em] text-[#00ff9c] uppercase">AI & Machine Learning</span>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-2">Deepfake <span className="text-glow">Authenticator</span></h1>
+          <p className="text-[#849ca3] text-sm md:text-base font-light tracking-wide">Advanced video forensics and digital truth verification.</p>
+        </header>
+
+        {/* Main Content */}
+        <main className="flex-1 flex flex-col items-center gap-8 w-full">
+          
+          {status === 'idle' && (
+            <section className="w-full max-w-3xl glass p-8 fade-up" style={{ animationDelay: '0.2s' }}>
+              <div 
+                className="glass-inner rounded-xl border-2 border-dashed border-[rgba(0,255,156,0.15)] hover:border-[#00ff9c] transition-all cursor-pointer min-h-[200px] flex items-center justify-center relative overflow-hidden"
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {!file ? (
+                  <div className="text-center p-8">
+                    <div className="w-16 h-16 mx-auto mb-4 rounded-full border border-[rgba(0,255,156,0.2)] flex items-center justify-center bg-[rgba(0,255,156,0.02)] shadow-[0_0_20px_rgba(0,255,156,0.05)]">
+                      <svg className="w-8 h-8 text-[#00ff9c] opacity-70" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+                      </svg>
+                    </div>
+                    <h3 className="text-lg font-medium text-white mb-1">Upload Video for Analysis</h3>
+                    <p className="text-sm text-[#849ca3]">Drag & drop or click to browse</p>
+                    <p className="text-[11px] text-[#849ca3] mt-4 opacity-60">MP4, AVI, MOV, MKV, WebM — Max 100MB</p>
+                  </div>
+                ) : (
+                  <div className="w-full p-8 flex items-center gap-6" onClick={(e) => e.stopPropagation()}>
+                    <div className="w-14 h-14 rounded-lg bg-[rgba(0,255,156,0.1)] border border-[rgba(0,255,156,0.3)] flex items-center justify-center flex-shrink-0 shadow-[0_0_15px_rgba(0,255,156,0.15)]">
+                      <svg className="w-7 h-7 text-[#00ff9c]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                      </svg>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-white truncate">{file.name}</p>
+                      <p className="text-xs text-[#849ca3] mt-1">{formatBytes(file.size)}</p>
+                    </div>
+                    <button onClick={() => setFile(null)} className="p-2 text-[#849ca3] hover:text-[#ff4444] transition-colors rounded-lg hover:bg-[rgba(255,68,68,0.1)]">
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                )}
+              </div>
+              <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="video/*" className="hidden" />
+
+              <div className="mt-8 text-center">
+                <button 
+                  onClick={handleAnalyze} 
+                  disabled={!file}
+                  className={`border border-[rgba(0,255,156,0.15)] rounded-lg px-10 py-3 font-semibold text-sm tracking-widest uppercase transition-all ${
+                    file 
+                      ? 'bg-[#00ff9c] text-[#040906] shadow-[0_0_20px_rgba(0,255,156,0.4)] hover:bg-[#00cc7d] hover:-translate-y-1' 
+                      : 'text-[#849ca3] opacity-50 cursor-not-allowed'
+                  }`}
+                >
+                  Analyze Video
+                </button>
+              </div>
+            </section>
+          )}
+
+          {status === 'analyzing' && (
+            <section className="fade-up w-full flex justify-center py-20">
+              <Loader />
+            </section>
+          )}
+
+          {status === 'result' && resultData && (
+            <section className="w-full flex flex-col gap-10 fade-up">
+              
+              <div className="flex flex-col md:flex-row items-stretch justify-center gap-6 w-full max-w-3xl mx-auto">
+                <div className={`flex-1 glass p-8 text-center border-t-4 flex flex-col justify-center ${resultData.result === 'FAKE' ? 'border-t-[#ff4444] shadow-[0_-5px_20px_rgba(255,68,68,0.15)]' : 'border-t-[#00ff9c] shadow-[0_-5px_20px_rgba(0,255,156,0.15)]'}`}>
+                  <p className="text-[#849ca3] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Verdict</p>
+                  <h2 className={`text-4xl font-bold tracking-widest ${resultData.result === 'FAKE' ? 'text-[#ff4444] drop-shadow-[0_0_10px_rgba(255,68,68,0.5)]' : 'text-[#00ff9c] drop-shadow-[0_0_10px_rgba(0,255,156,0.5)]'}`}>
+                    {resultData.result}
+                  </h2>
+                  <div className="mt-4 inline-block bg-[rgba(255,255,255,0.05)] px-4 py-1.5 rounded-full border border-[rgba(255,255,255,0.1)]">
+                    <span className="text-[#849ca3] text-xs uppercase tracking-wider mr-2">Confidence:</span>
+                    <span className="text-white font-bold">{resultData.confidence}%</span>
+                  </div>
+                </div>
+
+                <div className="flex-1 glass p-8 text-center border-t-4 border-t-[#00e5ff] shadow-[0_-5px_20px_rgba(0,229,255,0.15)] flex flex-col justify-center">
+                  <p className="text-[#849ca3] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Metrics</p>
+                  <div className="flex flex-col gap-3 mt-2">
+                    <div className="flex justify-between items-center bg-[rgba(255,255,255,0.03)] p-3 rounded border border-[rgba(255,255,255,0.05)]">
+                      <span className="text-xs text-[#849ca3] uppercase tracking-wider">Frames</span>
+                      <span className="text-white font-mono font-medium">{resultData.metadata?.frames_analyzed || 0}</span>
+                    </div>
+                    <div className="flex justify-between items-center bg-[rgba(255,255,255,0.03)] p-3 rounded border border-[rgba(255,255,255,0.05)]">
+                      <span className="text-xs text-[#849ca3] uppercase tracking-wider">Time</span>
+                      <span className="text-[#00e5ff] font-mono font-medium">{resultData.processing_time_sec || 0}s</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="w-full max-w-3xl mx-auto glass p-8 mt-4">
+                <h3 className="text-xs font-semibold tracking-[0.15em] text-[#00e5ff] uppercase flex items-center gap-2 mb-4">
+                  <div className="w-1 h-3 rounded-sm bg-[#00e5ff] shadow-[0_0_8px_#00e5ff]"></div>
+                  Analysis Insights
+                </h3>
+                <div className="flex flex-col gap-3">
+                  {(resultData.details || ['Analysis completed successfully.']).map((txt, i) => (
+                    <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-[rgba(255,255,255,0.02)] border border-[rgba(255,255,255,0.05)]">
+                      <span className={`flex-shrink-0 w-2 h-2 rounded-full mt-1.5 ${resultData.result === 'FAKE' ? 'bg-[#ff4444] shadow-[0_0_8px_rgba(255,68,68,0.6)]' : 'bg-[#00ff9c] shadow-[0_0_8px_rgba(0,255,156,0.6)]'}`}></span>
+                      <span className="text-sm text-[#a0aec0]">{txt}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="text-center mt-4">
+                <button onClick={resetAll} className="px-6 py-3 text-xs font-semibold tracking-widest uppercase text-[#849ca3] border border-[#849ca3]/30 rounded-lg hover:text-[#00ff9c] hover:border-[#00ff9c]/50 hover:bg-[#00ff9c]/5 transition-all">
+                  <span className="mr-2">↻</span> Analyze Another Video
+                </button>
+              </div>
+            </section>
+          )}
+
+          {status === 'error' && (
+            <section className="glass p-6 border-[#ff4444]/30 bg-[#ff4444]/5 fade-up w-full max-w-3xl">
+              <div className="flex items-center gap-3 mb-2">
+                <svg className="w-6 h-6 text-[#ff4444]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                <span className="text-sm font-bold tracking-widest text-[#ff4444] uppercase">Analysis Failed</span>
+              </div>
+              <p className="text-sm text-[#849ca3] ml-9">{errorMsg}</p>
+              <div className="ml-9 mt-4">
+                <button onClick={resetAll} className="text-xs text-white/50 hover:text-white uppercase tracking-wider transition-colors">
+                  ↻ Try Again
+                </button>
+              </div>
+            </section>
+          )}
+
+        </main>
+        
+        <footer className="mt-16 text-center text-[10px] text-[#849ca3]/50 tracking-[0.2em] uppercase">
+          Deepfake Authenticator • Secure Cybernetic Analysis • Local Inference
+        </footer>
+
+      </div>
+    </>
+  );
+}
+
+export default App;

frontend/src/components/CyberCard.jsx

@@ -0,0 +1,364 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CyberCard = ({ title, subtitle, highlight, hoverText, isFake }) => {
+  return (
+    <StyledWrapper $isFake={isFake}>
+      <div className="container noselect">
+        <div className="canvas">
+          {Array.from({ length: 25 }).map((_, i) => (
+            <div key={i} className={`tracker tr-${i + 1}`} />
+          ))}
+          <div id="card">
+            <div className="card-content">
+              <div className="card-glare" />
+              <div className="cyber-lines">
+                <span /><span /><span /><span />
+              </div>
+              <p id="prompt">{hoverText || "HOVER ME"}</p>
+              <div className="title" dangerouslySetInnerHTML={{ __html: title || "CYBER<br />CARD" }} />
+              <div className="glowing-elements">
+                <div className="glow-1" />
+                <div className="glow-2" />
+                <div className="glow-3" />
+              </div>
+              <div className="subtitle">
+                <span>{subtitle || "INTERACTIVE"}</span>
+                <span className="highlight">{highlight || "3D EFFECT"}</span>
+              </div>
+              <div className="card-particles">
+                <span /><span /><span /> <span /><span /><span />
+              </div>
+              <div className="corner-elements">
+                <span /><span /><span /><span />
+              </div>
+              <div className="scan-line" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+}
+
+const StyledWrapper = styled.div`
+  .container {
+    position: relative;
+    width: 260px;
+    height: 340px;
+    transition: 200ms;
+    margin: 0 auto;
+  }
+
+  .container:active {
+    width: 250px;
+    height: 330px;
+  }
+
+  #card {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    transition: 700ms;
+    background: linear-gradient(45deg, #1a1a1a, #262626);
+    border: 2px solid ${props => props.$isFake ? 'rgba(255, 68, 68, 0.4)' : 'rgba(0, 255, 170, 0.4)'};
+    overflow: hidden;
+    box-shadow:
+      0 0 20px ${props => props.$isFake ? 'rgba(255, 68, 68, 0.3)' : 'rgba(0, 255, 170, 0.3)'},
+      inset 0 0 20px rgba(0, 0, 0, 0.2);
+  }
+
+  .card-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  #prompt {
+    bottom: 120px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    transition: 300ms ease-in-out;
+    position: absolute;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.7);
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+  }
+
+  .title {
+    opacity: 0;
+    transition: 300ms ease-in-out;
+    position: absolute;
+    font-size: 42px;
+    font-weight: 800;
+    letter-spacing: 6px;
+    text-align: center;
+    width: 100%;
+    padding-top: 40px;
+    background: ${props => props.$isFake ? 'linear-gradient(45deg, #ff4444, #ff8888)' : 'linear-gradient(45deg, #00ffaa, #00a2ff)'};
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 15px ${props => props.$isFake ? 'rgba(255, 68, 68, 0.3)' : 'rgba(0, 255, 170, 0.3)'});
+    text-shadow:
+      0 0 10px ${props => props.$isFake ? 'rgba(255, 68, 68, 0.5)' : 'rgba(92, 103, 255, 0.5)'},
+      0 0 20px ${props => props.$isFake ? 'rgba(255, 68, 68, 0.3)' : 'rgba(92, 103, 255, 0.3)'};
+  }
+
+  .subtitle {
+    position: absolute;
+    bottom: 40px;
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    letter-spacing: 2px;
+    transform: translateY(30px);
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .highlight {
+    color: ${props => props.$isFake ? '#ff4444' : '#00ffaa'};
+    margin-left: 5px;
+    background: ${props => props.$isFake ? 'linear-gradient(90deg, #ff4444, #ff8888)' : 'linear-gradient(90deg, #5c67ff, #ad51ff)'};
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+  }
+
+  .glowing-elements {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .glow-1,
+  .glow-2,
+  .glow-3 {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at center,
+      ${props => props.$isFake ? 'rgba(255, 68, 68, 0.3)' : 'rgba(0, 255, 170, 0.3)'} 0%,
+      transparent 70%
+    );
+    filter: blur(15px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .glow-1 { top: -20px; left: -20px; }
+  .glow-2 { top: 50%; right: -30px; transform: translateY(-50%); }
+  .glow-3 { bottom: -20px; left: 30%; }
+
+  .card-particles span {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: ${props => props.$isFake ? '#ff4444' : '#00ffaa'};
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  /* Hover effects */
+  .tracker:hover ~ #card .title {
+    opacity: 1;
+    transform: translateY(-10px);
+  }
+
+  .tracker:hover ~ #card .glowing-elements div {
+    opacity: 1;
+  }
+
+  .tracker:hover ~ #card .card-particles span {
+    animation: particleFloat 2s infinite;
+  }
+
+  @keyframes particleFloat {
+    0% { transform: translate(0, 0); opacity: 0; }
+    50% { opacity: 1; }
+    100% { transform: translate(calc(var(--x, 0) * 30px), calc(var(--y, 0) * 30px)); opacity: 0; }
+  }
+
+  /* Particle positions */
+  .card-particles span:nth-child(1) { --x: 1; --y: -1; top: 40%; left: 20%; }
+  .card-particles span:nth-child(2) { --x: -1; --y: -1; top: 60%; right: 20%; }
+  .card-particles span:nth-child(3) { --x: 0.5; --y: 1; top: 20%; left: 40%; }
+  .card-particles span:nth-child(4) { --x: -0.5; --y: 1; top: 80%; right: 40%; }
+  .card-particles span:nth-child(5) { --x: 1; --y: 0.5; top: 30%; left: 60%; }
+  .card-particles span:nth-child(6) { --x: -1; --y: 0.5; top: 70%; right: 60%; }
+
+  #card::before {
+    content: "";
+    background: radial-gradient(
+      circle at center,
+      ${props => props.$isFake ? 'rgba(255, 68, 68, 0.1)' : 'rgba(0, 255, 170, 0.1)'} 0%,
+      ${props => props.$isFake ? 'rgba(255, 136, 136, 0.05)' : 'rgba(0, 162, 255, 0.05)'} 50%,
+      transparent 100%
+    );
+    filter: blur(20px);
+    opacity: 0;
+    width: 150%;
+    height: 150%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.3s ease;
+  }
+
+  .tracker:hover ~ #card::before { opacity: 1; }
+
+  .tracker {
+    position: absolute;
+    z-index: 200;
+    width: 100%;
+    height: 100%;
+  }
+
+  .tracker:hover { cursor: pointer; }
+  .tracker:hover ~ #card #prompt { opacity: 0; }
+  .tracker:hover ~ #card { transition: 300ms; filter: brightness(1.1); }
+  .container:hover #card::before { transition: 200ms; content: ""; opacity: 80%; }
+
+  .canvas {
+    perspective: 800px;
+    inset: 0;
+    z-index: 200;
+    position: absolute;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    gap: 0px 0px;
+    grid-template-areas:
+      "tr-1 tr-2 tr-3 tr-4 tr-5"
+      "tr-6 tr-7 tr-8 tr-9 tr-10"
+      "tr-11 tr-12 tr-13 tr-14 tr-15"
+      "tr-16 tr-17 tr-18 tr-19 tr-20"
+      "tr-21 tr-22 tr-23 tr-24 tr-25";
+  }
+
+  .tr-1 { grid-area: tr-1; } .tr-2 { grid-area: tr-2; } .tr-3 { grid-area: tr-3; } .tr-4 { grid-area: tr-4; } .tr-5 { grid-area: tr-5; }
+  .tr-6 { grid-area: tr-6; } .tr-7 { grid-area: tr-7; } .tr-8 { grid-area: tr-8; } .tr-9 { grid-area: tr-9; } .tr-10 { grid-area: tr-10; }
+  .tr-11 { grid-area: tr-11; } .tr-12 { grid-area: tr-12; } .tr-13 { grid-area: tr-13; } .tr-14 { grid-area: tr-14; } .tr-15 { grid-area: tr-15; }
+  .tr-16 { grid-area: tr-16; } .tr-17 { grid-area: tr-17; } .tr-18 { grid-area: tr-18; } .tr-19 { grid-area: tr-19; } .tr-20 { grid-area: tr-20; }
+  .tr-21 { grid-area: tr-21; } .tr-22 { grid-area: tr-22; } .tr-23 { grid-area: tr-23; } .tr-24 { grid-area: tr-24; } .tr-25 { grid-area: tr-25; }
+
+  .tr-1:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); }
+  .tr-2:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); }
+  .tr-3:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); }
+  .tr-4:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); }
+  .tr-5:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); }
+  .tr-6:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); }
+  .tr-7:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); }
+  .tr-8:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); }
+  .tr-9:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); }
+  .tr-10:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); }
+  .tr-11:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); }
+  .tr-12:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); }
+  .tr-13:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+  .tr-14:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); }
+  .tr-15:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); }
+  .tr-16:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); }
+  .tr-17:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); }
+  .tr-18:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); }
+  .tr-19:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); }
+  .tr-20:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); }
+  .tr-21:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); }
+  .tr-22:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); }
+  .tr-23:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); }
+  .tr-24:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); }
+  .tr-25:hover ~ #card { transition: 125ms ease-in-out; transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); }
+
+  .noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .card-glare {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      125deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.05) 45%,
+      rgba(255, 255, 255, 0.1) 50%,
+      rgba(255, 255, 255, 0.05) 55%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0;
+    transition: opacity 300ms;
+  }
+
+  .cyber-lines span {
+    position: absolute;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      ${props => props.$isFake ? 'rgba(255, 68, 68, 0.4)' : 'rgba(92, 103, 255, 0.2)'},
+      transparent
+    );
+  }
+
+  .cyber-lines span:nth-child(1) { top: 20%; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; animation: lineGrow 3s linear infinite; }
+  .cyber-lines span:nth-child(2) { top: 40%; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; animation: lineGrow 3s linear infinite 1s; }
+  .cyber-lines span:nth-child(3) { top: 60%; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; animation: lineGrow 3s linear infinite 2s; }
+  .cyber-lines span:nth-child(4) { top: 80%; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; animation: lineGrow 3s linear infinite 1.5s; }
+
+  .corner-elements span {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    border: 2px solid ${props => props.$isFake ? 'rgba(255, 68, 68, 0.5)' : 'rgba(92, 103, 255, 0.3)'};
+    transition: all 0.3s ease;
+  }
+
+  .corner-elements span:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
+  .corner-elements span:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
+  .corner-elements span:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
+  .corner-elements span:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
+
+  .scan-line {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      ${props => props.$isFake ? 'rgba(255, 68, 68, 0.2)' : 'rgba(92, 103, 255, 0.1)'},
+      transparent
+    );
+    transform: translateY(-100%);
+    animation: scanMove 2s linear infinite;
+  }
+
+  @keyframes lineGrow {
+    0% { transform: scaleX(0); opacity: 0; }
+    50% { transform: scaleX(1); opacity: 1; }
+    100% { transform: scaleX(0); opacity: 0; }
+  }
+
+  @keyframes scanMove {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
+  }
+
+  #card:hover .card-glare { opacity: 1; }
+  #card:hover .corner-elements span {
+    border-color: ${props => props.$isFake ? 'rgba(255, 68, 68, 0.8)' : 'rgba(92, 103, 255, 0.8)'};
+    box-shadow: 0 0 10px ${props => props.$isFake ? 'rgba(255, 68, 68, 0.5)' : 'rgba(92, 103, 255, 0.5)'};
+  }
+`;
+
+export default CyberCard;

frontend/src/components/Loader.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Loader = () => {
+  return (
+    <StyledWrapper>
+      <div className="liquid-loader">
+        <div className="loading-text">
+          Analyzing<span className="dot">.</span><span className="dot">.</span><span className="dot">.</span>
+        </div>
+        <div className="loader-track">
+          <div className="liquid-fill" />
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+}
+
+const StyledWrapper = styled.div`
+  .liquid-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    font-family: system-ui, sans-serif;
+  }
+
+  .loader-track {
+    position: relative;
+    width: 250px;
+    height: 32px;
+    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow:
+      inset 0 2px 4px rgba(0, 0, 0, 0.6),
+      0 1px 3px rgba(255, 255, 255, 0.1);
+  }
+
+  .liquid-fill {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: calc(100% - 4px);
+    background: linear-gradient(90deg, #00ffaa, #00a2ff, #5c67ff, #00ffaa);
+    border-radius: 14px;
+    animation:
+      fillProgress 8s ease-out forwards,
+      colorShift 3s linear infinite;
+    box-shadow:
+      0 0 12px rgba(0, 255, 170, 0.4),
+      inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  }
+
+  .loading-text {
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    animation: textGlow 1s ease-in-out infinite;
+  }
+
+  .dot {
+    margin-left: 3px;
+    animation: blink 1.5s infinite;
+  }
+  .dot:nth-of-type(1) { animation-delay: 0s; }
+  .dot:nth-of-type(2) { animation-delay: 0.3s; }
+  .dot:nth-of-type(3) { animation-delay: 0.6s; }
+
+  @keyframes fillProgress {
+    0% { width: 4px; }
+    25% { width: 35%; }
+    50% { width: 65%; }
+    75% { width: 85%; }
+    100% { width: calc(100% - 4px); }
+  }
+
+  @keyframes colorShift {
+    0% { filter: hue-rotate(0deg) brightness(1); }
+    100% { filter: hue-rotate(360deg) brightness(1); }
+  }
+
+  @keyframes textGlow {
+    0%, 100% { opacity: 0.7; text-shadow: 0 0 8px rgba(0, 255, 170, 0.3); }
+    50% { opacity: 1; text-shadow: 0 0 16px rgba(0, 255, 170, 0.6); }
+  }
+
+  @keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+  }
+`;
+
+export default Loader;

frontend/src/index.css

@@ -0,0 +1,57 @@
+@import "tailwindcss";
+
+:root {
+  --primary: #00ff9c;
+  --primary-dim: #00cc7d;
+  --secondary: #00e5ff; /* soft cyan */
+  --red: #ff4444;
+  --red-dim: #cc2222;
+  --bg-dark: #040906;
+  --bg-gradient: radial-gradient(circle at top center, #001a11 0%, #040906 100%);
+  --card-bg: rgba(10, 20, 15, 0.6);
+  --card-bg-inner: rgba(15, 25, 20, 0.8);
+  --border: rgba(0, 255, 156, 0.15);
+  --border-hover: rgba(0, 255, 156, 0.4);
+  --text: #e2e8f0;
+  --muted: #849ca3;
+}
+
+body {
+  background: var(--bg-dark);
+  background-image: var(--bg-gradient);
+  font-family: 'Inter', sans-serif;
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+  letter-spacing: 0.02em;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-dark); }
+::-webkit-scrollbar-thumb { background: rgba(0, 255, 156, 0.3); border-radius: 6px; }
+
+/* ── Scanner Background ── */
+.scanner {
+  position: fixed; inset: 0; pointer-events: none; z-index: 100;
+  background: linear-gradient(to bottom,
+    transparent 0%, transparent 49.9%,
+    rgba(0, 255, 156, 0.05) 50%, transparent 50.1%);
+  background-size: 100% 4px;
+  animation: scanMove 8s linear infinite;
+}
+@keyframes scanMove {
+  0%   { background-position: 0 0; }
+  100% { background-position: 0 100vh; }
+}
+
+.text-glow {
+  color: var(--primary);
+  text-shadow: 0 0 10px rgba(0, 255, 156, 0.6);
+}
+
+.fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: none; }
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})