Initial commit: TrueFrame

.gitignore

@@ -0,0 +1,18 @@
+# Ignore Python cache
+__pycache__/
+*.pyc
+
+# Ignore uploaded and processed media
+uploads/
+processed_frames/
+
+# Ignore AI Models and large binaries
+local_clip_model/
+*.bin
+*.safetensors
+*.h5
+*.pt
+
+# Virtual environment (if you have one)
+venv/
+env/

app.py

@@ -0,0 +1,232 @@
+import os
+import shutil
+import certifi
+from flask import Flask, request, render_template, redirect, url_for, session, flash
+from authlib.integrations.flask_client import OAuth
+from flask_pymongo import PyMongo
+from werkzeug.security import generate_password_hash, check_password_hash
+from frame_extractor import FrameExtractor
+
+# --- IMPORT DETECTORS ---
+from video_detect import VideoDeepfakeDetector
+from image_detect import ImageDeepfakeDetector
+from audio_detect import AudioDeepfakeDetector 
+from combined_detect import CombinedDeepfakeDetector # 👈 NEW FEATURE
+
+app = Flask(__name__)
+
+
+app.secret_key = 'super_secret_key_change_this_for_production'
+
+app.config['GOOGLE_CLIENT_ID'] = "199550854045-o17gcos3v84ca47r3vjuf6h0erqnjtds.apps.googleusercontent.com"
+app.config['GOOGLE_CLIENT_SECRET'] = "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"
+app.config["MONGO_URI"] = "mongodb+srv://gauravymhatre_db_user:ojvk39Q0CDDCOA3X@gaurav-mhatre.pdgnaul.mongodb.net/deepfake_db?retryWrites=true&w=majority"
+app.config['SESSION_COOKIE_SECURE'] = False
+app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
+
+oauth = OAuth(app)
+mongo = PyMongo(app, tls=True, tlsAllowInvalidCertificates=True)
+
+google = oauth.register(
+    name='google',
+    client_id=app.config['GOOGLE_CLIENT_ID'],
+    client_secret=app.config['GOOGLE_CLIENT_SECRET'],
+    server_metadata_url='https://accounts.google.com/.well-known/openid-configuration',
+    client_kwargs={'scope': 'openid email profile'},
+)
+
+UPLOAD_FOLDER = 'uploads'
+if os.path.exists(UPLOAD_FOLDER):
+    shutil.rmtree(UPLOAD_FOLDER)
+os.makedirs(UPLOAD_FOLDER)
+
+# ============================
+# ⚡ GLOBALLY LOAD AI MODELS
+# ============================
+print("⚡ Starting Server & Pre-loading Audio Model...")
+audio_detector = AudioDeepfakeDetector()
+
+video_detector = None
+image_detector = None
+extractor = None
+
+def get_video_detector():
+    global video_detector, extractor
+    if video_detector is None:
+        print("⚡ Loading Video AI Model...")
+        video_detector = VideoDeepfakeDetector()
+        extractor = FrameExtractor()
+    return video_detector, extractor
+
+def get_image_detector():
+    global image_detector
+    if image_detector is None:
+        print("⚡ Loading Image AI Model...")
+        image_detector = ImageDeepfakeDetector()
+    return image_detector
+
+# ============================
+# 🔐 AUTHENTICATION ROUTES
+# ============================
+@app.route('/login', methods=['GET', 'POST'])
+def login_page():
+    if session.get('logged_in'): return redirect(url_for('index'))
+
+    if request.method == 'POST':
+        email = request.form.get('email')
+        password = request.form.get('password')
+
+        try:
+            user = mongo.db.users.find_one({"email": email})
+        except Exception as e:
+            return f"❌ Database Connection Error: {e}"
+
+        if user and check_password_hash(user['password'], password):
+            session['logged_in'] = True
+            session['user_name'] = user['name']
+            session['user_email'] = user['email']
+            return redirect(url_for('index'))
+        else:
+            flash("Invalid email or password.")
+            
+    return render_template('login.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        name = request.form.get('name')
+        email = request.form.get('email')
+        password = request.form.get('password')
+
+        try:
+            existing_user = mongo.db.users.find_one({"email": email})
+            if existing_user:
+                flash("Email already registered. Please login.")
+                return redirect(url_for('login_page'))
+
+            hashed_password = generate_password_hash(password)
+            mongo.db.users.insert_one({
+                "name": name,
+                "email": email,
+                "password": hashed_password,
+                "auth_type": "manual"
+            })
+        except Exception as e:
+            return f"❌ Database Error: {e}"
+        
+        flash("Account created! Please login.")
+        return redirect(url_for('login_page'))
+
+    return render_template('register.html')
+
+@app.route('/login/google')
+def google_login():
+    redirect_uri = url_for('authorize', _external=True)
+    return google.authorize_redirect(redirect_uri)
+
+@app.route('/authorize')
+def authorize():
+    try:
+        token = google.authorize_access_token()
+        user_info = token.get('userinfo')
+        
+        existing_user = mongo.db.users.find_one({"email": user_info['email']})
+        
+        if not existing_user:
+            mongo.db.users.insert_one({
+                "name": user_info['name'],
+                "email": user_info['email'],
+                "picture": user_info['picture'],
+                "auth_type": "google",
+                "password": ""
+            })
+
+        session['logged_in'] = True
+        session['user_email'] = user_info['email']
+        session['user_name'] = user_info['name']
+        session['profile_pic'] = user_info.get('picture')
+        
+        return redirect(url_for('index'))
+        
+    except Exception as e:
+        return f"Login failed: {e}"
+
+@app.route('/logout')
+def logout():
+    session.clear()
+    return redirect(url_for('login_page'))
+
+# ============================
+# 🏠 MAIN APP ROUTE
+# ============================
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    if not session.get('logged_in'): return redirect(url_for('login_page'))
+    user_name = session.get('user_name', 'User')
+
+    if request.method == 'POST':
+        if 'file' not in request.files: return redirect(request.url)
+        file = request.files['file']
+        mode = request.form.get('mode')
+        
+        if file.filename == '': return redirect(request.url)
+
+        if mode == 'audio':
+            filename = "input_audio.mp3"
+            file_path = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(file_path)
+            
+            verdict, confidence = audio_detector.predict(file_path)
+            
+            css_class = "fake" if verdict == "DEEPFAKE DETECTED" else "real"
+            return render_template('result.html', result=verdict, css_class=css_class, confidence=f"{confidence*100:.1f}", type="Audio Only", extra_info="<p>Audio Analysis Complete</p>")
+
+        elif mode == 'image':
+            filename = "input_image.jpg"
+            file_path = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(file_path)
+            
+            detector = get_image_detector()
+            verdict, confidence = detector.predict(file_path)
+            
+            css_class = "fake" if verdict == "DEEPFAKE DETECTED" else "real"
+            return render_template('result.html', result=verdict, css_class=css_class, confidence=f"{confidence*100:.1f}", type="Image", extra_info="<p>Image Analysis Complete</p>")
+
+        # 👇 THE NEW COMBINED ROUTE 👇
+        elif mode == 'combined':
+            filename = "input_combined.mp4" 
+            video_path = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(video_path)
+            
+            v_detector, v_extractor = get_video_detector()
+            a_detector = audio_detector 
+            
+            combined_detector = CombinedDeepfakeDetector(a_detector, v_detector, v_extractor)
+            final_result, details = combined_detector.predict(video_path)
+            
+            css_class = "fake" if final_result == "DEEPFAKE DETECTED" else "real"
+            return render_template('result.html', result=final_result, css_class=css_class, confidence="N/A", type="Video + Audio Combined", extra_info=details)
+
+        else: # Video Only Mode (Frames)
+            filename = "input_video.mp4" 
+            video_path = os.path.join(UPLOAD_FOLDER, filename)
+            file.save(video_path)
+            
+            v_detector, v_extractor = get_video_detector()
+            image_paths = v_extractor.extract(video_path)
+            
+            if not image_paths: return "Error: Could not extract frames."
+            
+            fake_votes = 0
+            for img_path in image_paths:
+                result, _ = v_detector.predict(img_path)
+                if result == "DEEPFAKE DETECTED": fake_votes += 1
+            
+            final_result = "DEEPFAKE DETECTED" if fake_votes > (len(image_paths) * 0.51) else "REAL"
+            css_class = "fake" if final_result == "DEEPFAKE DETECTED" else "real"
+            return render_template('result.html', result=final_result, css_class=css_class, confidence="N/A", type="Video (Frames Only)", extra_info=f"<p>Analyzed {len(image_paths)} visual frames.</p>")
+
+    return render_template('index.html', user_name=user_name)
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000, use_reloader=False)

audio_detect.py

@@ -0,0 +1,102 @@
+import os
+import torch
+import librosa
+import soundfile as sf  
+import numpy as np
+import subprocess
+import traceback
+import imageio_ffmpeg # ⚡ NEW: Added FFmpeg engine
+from transformers import AutoModelForAudioClassification, AutoFeatureExtractor
+
+class AudioDeepfakeDetector:
+    def __init__(self):
+        self.model_name = "Hemgg/Deepfake-audio-detection"
+        self.model = None
+        self.extractor = None
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+
+        # Limit CPU threads to prevent bottlenecking
+        if self.device == "cpu":
+            torch.set_num_threads(4)
+
+        print(f"⚡ Loading Audio AI Model: {self.model_name}...")
+        
+        try:
+            self.extractor = AutoFeatureExtractor.from_pretrained(self.model_name)
+            self.model = AutoModelForAudioClassification.from_pretrained(self.model_name).to(self.device)
+            self.model.eval() 
+            
+            print(f"   ℹ️ Labels: {self.model.config.id2label}")
+            print("✅ Audio Model Loaded Successfully.")
+            
+        except Exception as e:
+            print(f"❌ Failed to load Audio Model: {e}")
+            traceback.print_exc()
+
+    def predict(self, audio_path):
+        if not self.model:
+            return "ERROR: MODEL NOT LOADED", 0.0
+
+        temp_wav = "uploads/temp_fast_audio.wav"
+
+        try:
+            print(f"🔍 Analyzing audio: {audio_path}")
+            
+            # ⚡ ULTRA-FAST FFMPEG PRE-PROCESSING
+            # Instantly chops the file to 4 seconds, forces Mono, and sets 16kHz
+            ffmpeg_exe = imageio_ffmpeg.get_ffmpeg_exe()
+            command = [
+                ffmpeg_exe,
+                "-y",                   # Overwrite existing files
+                "-i", audio_path,       # Input file (mp3, wav, etc.)
+                "-t", "4",              # ⚡ Only grab the first 4 seconds
+                "-ac", "1",             # ⚡ Force Mono (1 channel)
+                "-ar", "16000",         # ⚡ Force 16000Hz sample rate
+                temp_wav                # Output perfectly formatted temp file
+            ]
+            
+            # Run the command silently and instantly
+            subprocess.run(command, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+
+            # Now Soundfile can load it in a fraction of a millisecond 
+            # because it requires ZERO math or resampling from Python!
+            if os.path.exists(temp_wav):
+                audio, sr = sf.read(temp_wav)
+                os.remove(temp_wav) # Clean up temp file
+            else:
+                raise Exception("FFmpeg failed to process audio.")
+
+            # Ensure data format matches PyTorch requirements
+            audio = audio.astype(np.float32)
+
+            inputs = self.extractor(audio, sampling_rate=sr, return_tensors="pt", padding=True)
+            inputs = {key: val.to(self.device) for key, val in inputs.items()}
+
+            # Fast AI Inference
+            with torch.inference_mode():
+                logits = self.model(**inputs).logits
+
+            probs = torch.nn.functional.softmax(logits, dim=-1)
+            confidence, predicted_class_id = torch.max(probs, dim=-1)
+            
+            raw_label = self.model.config.id2label[predicted_class_id.item()]
+            
+            is_fake = False
+            check_label = raw_label.lower()
+            
+            if "ai" in check_label or "fake" in check_label or "spoof" in check_label:
+                is_fake = True
+
+            label = "DEEPFAKE DETECTED" if is_fake else "REAL"
+            score = confidence.item()
+
+            print(f"✅ AI Verdict: {raw_label} -> {label} ({score*100:.1f}%)")
+            return label, score
+
+        except Exception as e:
+            print(f"❌ AUDIO ERROR: {e}")
+            traceback.print_exc() 
+            return "ERROR", 0.0
+
+if __name__ == "__main__":
+    detector = AudioDeepfakeDetector()

combined_detect.py

@@ -0,0 +1,100 @@
+import os
+import subprocess
+import concurrent.futures
+import imageio_ffmpeg # This automatically installed when you installed moviepy
+
+class CombinedDeepfakeDetector:
+    def __init__(self, audio_detector, video_detector, extractor):
+        self.audio_detector = audio_detector
+        self.video_detector = video_detector
+        self.extractor = extractor
+
+    def analyze_audio(self, video_path):
+        temp_audio_path = "uploads/temp_combined_audio.wav"
+        try:
+            if os.path.exists(temp_audio_path):
+                os.remove(temp_audio_path)
+                
+            # ⚡ ULTRA-FAST AUDIO EXTRACTION 
+            # We command FFmpeg to instantly rip just the first 4 seconds 
+            # and format it perfectly for the AI model natively.
+            ffmpeg_exe = imageio_ffmpeg.get_ffmpeg_exe()
+            command = [
+                ffmpeg_exe, 
+                "-y",                   # Overwrite existing files
+                "-i", video_path,       # Input video
+                "-t", "4",              # ⚡ STOP reading after exactly 4 seconds
+                "-vn",                  # ⚡ Ignore video stream completely
+                "-acodec", "pcm_s16le", # Format as standard WAV
+                "-ar", "16000",         # ⚡ Pre-resample to 16kHz so Python doesn't have to
+                temp_audio_path
+            ]
+            
+            # Run the command silently
+            subprocess.run(command, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+            
+            if os.path.exists(temp_audio_path):
+                verdict, _ = self.audio_detector.predict(temp_audio_path)
+                os.remove(temp_audio_path) 
+                return verdict
+            else:
+                return "NO AUDIO FOUND"
+        except Exception as e:
+            print(f"❌ Fast Audio Extraction Error: {e}")
+            return "ERROR"
+
+    def analyze_video(self, video_path):
+        image_paths = self.extractor.extract(video_path)
+        if not image_paths:
+            return "ERROR"
+        
+        # ⚡ OPTIMIZATION 1: SMART SAMPLING
+        max_frames_to_check = 10
+        if len(image_paths) > max_frames_to_check:
+            step = len(image_paths) // max_frames_to_check
+            image_paths = image_paths[::step][:max_frames_to_check]
+            
+        total_frames = len(image_paths)
+        fake_votes = 0
+        threshold = total_frames * 0.51 
+        
+        for i, img_path in enumerate(image_paths):
+            result, _ = self.video_detector.predict(img_path)
+            if result == "DEEPFAKE DETECTED":
+                fake_votes += 1
+                
+            # ⚡ OPTIMIZATION 2 & 3: EARLY STOPPING
+            if fake_votes > threshold:
+                return "DEEPFAKE DETECTED"
+                
+            remaining_frames = total_frames - (i + 1)
+            if (fake_votes + remaining_frames) < threshold:
+                return "REAL"
+        
+        return "DEEPFAKE DETECTED" if fake_votes > threshold else "REAL"
+
+    def predict(self, video_path):
+        print(f"🔍 Starting ULTRA-FAST Combined Analysis for: {video_path}")
+        
+        # Parallel execution: Audio and Video run at the exact same time
+        with concurrent.futures.ThreadPoolExecutor() as executor:
+            audio_future = executor.submit(self.analyze_audio, video_path)
+            video_future = executor.submit(self.analyze_video, video_path)
+            
+            audio_verdict = audio_future.result()
+            video_verdict = video_future.result()
+
+        is_fake = (audio_verdict == "DEEPFAKE DETECTED") or (video_verdict == "DEEPFAKE DETECTED")
+        final_verdict = "DEEPFAKE DETECTED" if is_fake else "REAL"
+
+        details = f"""
+        <div style='text-align: left; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 15px; color: #333; border: 1px solid #ddd;'>
+            <h4 style='margin-top:0; margin-bottom: 10px;'>Combined Analysis Breakdown:</h4>
+            <ul style='list-style-type: none; padding-left: 0; margin-bottom: 0;'>
+                <li style='margin-bottom: 5px;'>🎤 <b>Background Audio:</b> {audio_verdict}</li>
+                <li>🎞️ <b>Visual Frames:</b> {video_verdict} (Fast Scan)</li>
+            </ul>
+        </div>
+        """
+        
+        return final_verdict, details

frame_extractor.py

@@ -0,0 +1,73 @@
+import cv2
+import os
+import shutil
+import numpy as np
+
+class FrameExtractor:
+    def extract(self, video_path):
+        """
+        Crash-Proof Extraction Logic:
+        - Short Videos (< 25s): Extract 5 frames.
+        - Long Videos: Extract evenly spaced frames, but NEVER more than 30.
+        """
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened():
+            print(f"Error: Could not open video {video_path}")
+            return []
+
+        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        
+        if total_frames <= 0 or fps <= 0:
+            print("Error: Video file seems corrupted or empty.")
+            return []
+
+        duration = total_frames / fps
+        print(f"🎬 Video Duration: {duration:.1f}s ({total_frames} frames)")
+
+        # --- SMART SELECTION LOGIC ---
+        MAX_FRAMES = 30  # Safety Limit (Prevents Crashes)
+        
+        target_indices = []
+        
+        if duration < 25:
+            # Short Video: Force exactly 5 frames
+            count = 5
+        else:
+            # Long Video: Cap at 30 frames max
+            count = MAX_FRAMES
+
+        # Select 'count' frames spread evenly from start to end
+        # np.linspace handles the math perfectly
+        target_indices = np.linspace(0, total_frames - 1, count, dtype=int).tolist()
+
+        # --- EXTRACTION LOOP ---
+        extracted_files = []
+        
+        base_name = os.path.splitext(os.path.basename(video_path))[0]
+        output_dir = os.path.join(os.path.dirname(video_path), base_name + "_frames")
+        
+        if os.path.exists(output_dir):
+            shutil.rmtree(output_dir)
+        os.makedirs(output_dir)
+
+        saved_count = 0
+        
+        for frame_idx in target_indices:
+            cap.set(cv2.CAP_PROP_POS_FRAMES, frame_idx)
+            success, frame = cap.read()
+            
+            if success:
+                output_filename = f"frame_{saved_count}.jpg"
+                output_path = os.path.join(output_dir, output_filename)
+                
+                try:
+                    cv2.imwrite(output_path, frame)
+                    extracted_files.append(output_path)
+                    saved_count += 1
+                except Exception as e:
+                    print(f"Warning: Failed to save frame {saved_count}: {e}")
+
+        cap.release()
+        print(f"✅ Extraction Complete. Analyzed {len(extracted_files)} frames.")
+        return extracted_files

image_detect.py

@@ -0,0 +1,81 @@
+import torch
+from transformers import CLIPProcessor, CLIPModel
+from PIL import Image
+
+class ImageDeepfakeDetector:
+    def __init__(self, local_model_path="./local_clip_model"):
+        print("⚡ Loading Image AI Model...")
+        try:
+            self.model = CLIPModel.from_pretrained(local_model_path)
+            self.processor = CLIPProcessor.from_pretrained(local_model_path)
+            print("✅ Image Model Ready.")
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            print("Run 'setup_model.py' first.")
+            exit()
+
+    def predict(self, image_path):
+        try:
+            image = Image.open(image_path)
+            
+            # --- THE "PHYSICS" FIX ---
+            # We are now detecting "Camera Physics" vs "Generative Patterns"
+            labels = [
+                # === REAL (Camera Physics) ===
+                # Real cameras leave specific traces: noise, focus fall-off, organic skin.
+                "photo taken with a canon or nikon dslr camera",    # Specific camera brand hints
+                "real human skin with natural pores and imperfections", # Texture check
+                "authentic photograph with natural lighting shadows",   # Lighting physics
+                "candid photo from a smartphone camera",                # Lower quality real
+                "high resolution raw photography",                      # HD Real
+
+                # === FAKE (Generative Patterns) ===
+                # AI generators leave specific traces: overly smooth, distorted backgrounds.
+                "ai generated image by midjourney",          # Specific Generator
+                "stable diffusion synthetic image",          # Specific Generator
+                "deepfake face swap with artifacts",         # Manipulation
+                "computer generated 3d character render",    # CGI look
+                "perfectly smooth plastic skin texture",     # The "AI Glow"
+                "unnatural distorted background details"     # Background check
+            ]
+            
+            inputs = self.processor(
+                text=labels, 
+                images=image, 
+                return_tensors="pt", 
+                padding=True
+            )
+
+            with torch.no_grad():
+                outputs = self.model(**inputs)
+            
+            probs = outputs.logits_per_image.softmax(dim=1)
+            scores = probs.tolist()[0]
+            
+            # --- SCORING ---
+            # Real = Indices 0 to 4 (5 labels)
+            real_score = sum(scores[:5])
+            
+            # Fake = Indices 5 to 10 (6 labels)
+            fake_score = sum(scores[5:])
+            
+            # --- "UNCERTAINTY" LOGIC ---
+            # If the scores are very close (e.g., 49% Real vs 51% Fake), 
+            # it means the AI is guessing. In court, "Innocent until proven guilty".
+            # So, if the gap is small (< 5%), we assume it's REAL.
+            
+            score_diff = abs(real_score - fake_score)
+            
+            if fake_score > real_score:
+                # It thinks it's fake, but is it sure?
+                if score_diff < 0.05:
+                    # Not sure enough -> Call it Real (but low confidence)
+                    return "REAL", real_score
+                else:
+                    return "DEEPFAKE DETECTED", fake_score
+            else:
+                return "REAL", real_score
+
+        except Exception as e:
+            print(f"Error predicting {image_path}: {e}")
+            return "ERROR", 0.0

requirement.txt

@@ -0,0 +1,6 @@
+flask
+transformers
+torch
+pillow
+opencv-python
+numpy

setup_model.py

@@ -0,0 +1,27 @@
+import os
+from transformers import CLIPProcessor, CLIPModel
+
+# Define where we want to save the model locally
+MODEL_PATH = "./local_clip_model"
+
+def download_and_save_model():
+    print("⏳ Downloading OpenAI CLIP model... (This may take a minute)")
+    
+    model_name = "openai/clip-vit-base-patch32"
+    
+    # Download Model and Processor
+    model = CLIPModel.from_pretrained(model_name)
+    processor = CLIPProcessor.from_pretrained(model_name)
+    
+    # Save them to the local directory
+    if not os.path.exists(MODEL_PATH):
+        os.makedirs(MODEL_PATH)
+        
+    model.save_pretrained(MODEL_PATH)
+    processor.save_pretrained(MODEL_PATH)
+    
+    print(f"✅ Model successfully saved to '{MODEL_PATH}'")
+    print("You can now run the project offline.")
+
+if __name__ == "__main__":
+    download_and_save_model()

templates/index.html

@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TrueFrame - Dashboard</title>
+    <style>
+        :root {
+            --bg-dark: #0b111e;
+            --card-bg: #141c2b;
+            --card-hover: #1c273b;
+            --primary-cyan: #00e5ff;
+            --primary-blue: #0077ff;
+            --text-main: #ffffff;
+            --text-muted: #8b9bb4;
+            --border-color: rgba(255, 255, 255, 0.1);
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg-dark);
+            background-image: 
+                radial-gradient(circle at 20% 20%, rgba(19, 54, 75, 0.945) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(13, 42, 70, 0.801) 0%, transparent 50%);
+            color: var(--text-main);
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        /* --- Navbar & Profile Dropdown --- */
+        .navbar {
+            width: 100%;
+            padding: 15px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            background-color: transparent;
+            
+            backdrop-filter: blur(10px);
+            
+        }
+
+        .brand {
+            font-size: 1.5em;
+            font-weight: bold;
+            color: var(--text-main);
+            letter-spacing: 1px;
+            display: flex;
+            align-items: center;
+            gap: 0px;
+        }
+
+        .brand span { color: var(--primary-cyan); }
+
+        .profile-container {
+            position: relative;
+        }
+
+        .avatar-btn {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-blue));
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: 0.3s;
+            color: white;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        .avatar-btn:hover {
+            border-color: var(--primary-cyan);
+            box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: 60px;
+            right: 0;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            width: 250px;
+            padding: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            display: none;
+            flex-direction: column;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+
+        .dropdown-menu.active {
+            display: flex;
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .dropdown-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 15px;
+        }
+
+        .dropdown-header .avatar-lg {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary-cyan), var(--primary-blue));
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.5em;
+            font-weight: bold;
+        }
+
+        .dropdown-header-info h4 { margin: 0 0 5px 0; font-size: 16px; }
+        .dropdown-header-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
+
+        .logout-btn {
+            background: rgba(255, 59, 48, 0.1);
+            color: #ff3b30;
+            text-decoration: none;
+            padding: 10px;
+            border-radius: 8px;
+            text-align: center;
+            font-weight: bold;
+            transition: 0.3s;
+        }
+
+        .logout-btn:hover { background: #ff3b30; color: white; }
+
+        /* --- Main Content --- */
+        .main-container {
+            margin-top: 50px;
+            width: 100%;
+            max-width: 800px;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .header-titles { text-align: center; margin-bottom: 40px; }
+        .header-titles h1 { font-size: 2.5em; margin: 0 0 10px 0; }
+        .header-titles p { color: var(--text-muted); font-size: 1.1em; margin: 0; }
+
+        /* --- File Upload Area --- */
+        .upload-area {
+            background: var(--card-bg);
+            border: 2px dashed var(--text-muted);
+            border-radius: 16px;
+            padding: 40px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        .upload-area:hover {
+            border-color: var(--primary-cyan);
+            background: var(--card-hover);
+        }
+
+        .upload-area input[type="file"] {
+            position: absolute; width: 100%; height: 100%; top: 0; left: 0;
+            opacity: 0; cursor: pointer;
+        }
+
+        .upload-icon { font-size: 3em; margin-bottom: 10px; display: block; }
+        .upload-text { font-size: 1.2em; color: var(--text-main); font-weight: 500; }
+        .upload-subtext { display: block; color: var(--text-muted); margin-top: 5px; font-size: 0.9em; }
+        
+        #fileName { margin-top: 15px; color: var(--primary-cyan); font-weight: bold; }
+
+        /* --- 4 Feature Cards --- */
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+
+        .feature-card-label { cursor: pointer; display: block; }
+        
+        .feature-card-label input[type="radio"] { display: none; }
+
+        .feature-card {
+            background: var(--card-bg);
+            border: 2px solid var(--border-color);
+            border-radius: 16px;
+            padding: 25px 20px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            transition: all 0.3s;
+        }
+
+        .feature-card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.4); }
+
+        .card-icon {
+            font-size: 2em;
+            background: rgba(255,255,255,0.05);
+            width: 60px; height: 60px;
+            display: flex; justify-content: center; align-items: center;
+            border-radius: 12px;
+        }
+
+        .card-info h3 { margin: 0 0 5px 0; font-size: 1.2em; }
+        .card-info p { margin: 0; color: var(--text-muted); font-size: 0.9em; }
+
+        /* Magic happens here: When radio is checked, style the card */
+        .feature-card-label input[type="radio"]:checked + .feature-card {
+            border-color: var(--primary-cyan);
+            background: linear-gradient(to bottom right, var(--card-bg), rgba(0, 229, 255, 0.05));
+            box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
+        }
+        
+        .feature-card-label input[type="radio"]:checked + .feature-card .card-icon {
+            background: rgba(0, 229, 255, 0.1);
+        }
+
+        /* --- Submit Button --- */
+        .submit-btn {
+            background: linear-gradient(90deg, var(--primary-cyan), var(--primary-blue));
+            color: white;
+            border: none;
+            padding: 16px 40px;
+            border-radius: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            width: 100%;
+            transition: 0.3s;
+            box-shadow: 0 8px 20px rgba(0, 119, 255, 0.3);
+        }
+
+        .submit-btn:hover {
+            transform: scale(1.02);
+            box-shadow: 0 10px 25px rgba(0, 229, 255, 0.5);
+        }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+            .cards-grid { grid-template-columns: 1fr; }
+            .navbar { padding: 15px 20px; }
+        }
+    </style>
+</head>
+<body>
+
+    <nav class="navbar">
+        <div class="brand">True<span>Frame</span></div>
+        
+        <div class="profile-container">
+            <div class="avatar-btn" onclick="toggleDropdown()" id="userInitial">U</div>
+            
+            <div class="dropdown-menu" id="profileDropdown">
+                <div class="dropdown-header">
+                    <div class="avatar-lg" id="dropdownInitial">U</div>
+                    <div class="dropdown-header-info">
+                        <h4>{{ user_name }}</h4>
+                        <p>Authenticated User</p>
+                    </div>
+                </div>
+                <a href="/logout" class="logout-btn">Log Out</a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="main-container">
+        
+        <div class="header-titles">
+            <h1>Authenticate Media.</h1>
+            <p>Upload your file and select a detection model.</p>
+        </div>
+
+        <form method="POST" enctype="multipart/form-data">
+            
+            <div class="upload-area">
+                <input type="file" name="file" required id="fileInput">
+                <span class="upload-icon">📂</span>
+                <span class="upload-text">Click or drag file to upload</span>
+                <span class="upload-subtext">Supports MP4, AVI, MP3, WAV, JPG, PNG</span>
+                <div id="fileName"></div>
+            </div>
+
+            <div class="cards-grid">
+                
+                <label class="feature-card-label">
+                    <input type="radio" name="mode" value="video" checked>
+                    <div class="feature-card">
+                        <div class="card-icon">🎞️</div>
+                        <div class="card-info">
+                            <h3>Video Scan</h3>
+                            <p>Analyzes visual frames for manipulation</p>
+                        </div>
+                    </div>
+                </label>
+
+                <label class="feature-card-label">
+                    <input type="radio" name="mode" value="image">
+                    <div class="feature-card">
+                        <div class="card-icon">🖼️</div>
+                        <div class="card-info">
+                            <h3>Image Scan</h3>
+                            <p>Detects AI generated photos and faces</p>
+                        </div>
+                    </div>
+                </label>
+
+                <label class="feature-card-label">
+                    <input type="radio" name="mode" value="audio">
+                    <div class="feature-card">
+                        <div class="card-icon">🎙️</div>
+                        <div class="card-info">
+                            <h3>Audio Scan</h3>
+                            <p>Detects voice cloning and AI audio</p>
+                        </div>
+                    </div>
+                </label>
+
+                <label class="feature-card-label">
+                    <input type="radio" name="mode" value="combined">
+                    <div class="feature-card">
+                        <div class="card-icon">⚡</div>
+                        <div class="card-info">
+                            <h3>Deep Scan</h3>
+                            <p>Combined Video + Audio analysis</p>
+                        </div>
+                    </div>
+                </label>
+
+            </div>
+
+            <button type="submit" class="submit-btn">Analyze Media</button>
+        </form>
+
+    </div>
+
+    <script>
+        // Set User Initials for Profile Picture dynamically
+        const userName = "{{ user_name }}";
+        const initial = userName !== "" && userName !== "{{ user_name }}" ? userName.charAt(0).toUpperCase() : "U";
+        document.getElementById("userInitial").innerText = initial;
+        document.getElementById("dropdownInitial").innerText = initial;
+
+        // Display File Name on Upload
+        document.getElementById('fileInput').addEventListener('change', function(e) {
+            const fileName = e.target.files[0] ? e.target.files[0].name : '';
+            if(fileName) {
+                document.getElementById('fileName').innerHTML = `✅ Selected: ${fileName}`;
+            }
+        });
+
+        // Toggle Profile Dropdown
+        function toggleDropdown() {
+            const dropdown = document.getElementById("profileDropdown");
+            dropdown.classList.toggle("active");
+        }
+
+        // Close dropdown if clicked outside
+        window.addEventListener('click', function(e) {
+            const profileContainer = document.querySelector('.profile-container');
+            const dropdown = document.getElementById("profileDropdown");
+            if (!profileContainer.contains(e.target)) {
+                dropdown.classList.remove("active");
+            }
+        });
+    </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - TrueFrame</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* --- CSS Reset and Variables --- */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        :root {
+            --bg-dark: #0a0e17;
+            --panel-dark: #131c2a;
+            --accent-primary: #00f2fe;
+            --accent-secondary: #4facfe;
+            --error-color: #ff4b4b;
+            --text-light: #e0e0e0;
+            --text-muted: #8d97a5;
+        }
+
+        body {
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--bg-dark);
+            background-image: 
+                radial-gradient(circle at 20% 20%, rgba(19, 54, 75, 0.945) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(13, 42, 70, 0.801) 0%, transparent 50%);
+            overflow: hidden;
+        }
+
+        /* --- Main Container --- */
+        .login-container {
+            display: flex;
+            width: 900px;
+            max-width: 95%;
+            height: 600px;
+            background-color: var(--panel-dark);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+            border: 1px solid rgba(0, 242, 254, 0.1);
+        }
+
+        /* --- Left Side: Visuals --- */
+        .visual-side {
+            flex: 1;
+            background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(79, 172, 254, 0.2));
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+            padding: 40px;
+            color: var(--text-light);
+        }
+
+        .visual-content h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        
+        .visual-content h2 span {
+            color: var(--accent-primary);
+        }
+
+        .visual-content p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            text-align: center;
+        }
+
+        /* --- INTEGRATED SCANNER CSS --- */
+        .scanner-graphic {
+            margin-top: 40px;
+            position: relative;
+            width: 150px; 
+            height: 150px;
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 50%; 
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(0, 242, 254, 0.2); 
+            border: 2px solid rgba(0, 242, 254, 0.2); 
+        }
+
+        #character-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.6; /* Set to 0.4 for holographic effect */
+            transition: opacity 0.3s ease;
+            mix-blend-mode: screen;
+        }
+
+        .scan-beam {
+            position: absolute;
+            top: 0;
+            left: -10%;
+            width: 120%;
+            height: 3px;
+            background: var(--accent-primary);
+            box-shadow: 0 0 15px var(--accent-primary), 0 0 30px var(--accent-secondary);
+            animation: scanning 2.5s linear infinite; 
+        }
+
+        @keyframes scanning {
+            0% { top: -5%; opacity: 0; }
+            5% { opacity: 1; }
+            95% { opacity: 1; }
+            100% { top: 105%; opacity: 0; }
+        }
+
+        /* --- Right Side: Form --- */
+        .form-side {
+            flex: 1;
+            padding: 50px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .form-header {
+            margin-bottom: 25px;
+        }
+
+        .form-header h1 {
+            color: var(--text-light);
+            font-size: 1.8rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        /* Flask Flashed Messages Styling */
+        .error-message {
+            background-color: rgba(255, 75, 75, 0.1);
+            border-left: 4px solid var(--error-color);
+            color: var(--error-color);
+            padding: 10px 15px;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+
+        /* Input Groups */
+        .input-group {
+            margin-bottom: 20px;
+        }
+
+        .input-group input {
+            width: 100%;
+            padding: 12px 15px;
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            color: var(--text-light);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+        }
+
+        .input-group input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+
+        /* Buttons */
+        .login-btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(to right, var(--accent-secondary), var(--accent-primary));
+            color: var(--bg-dark);
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            margin-bottom: 15px;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
+        }
+
+        /* Divider */
+        .divider {
+            margin: 20px 0;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            text-align: center;
+        }
+        
+        .divider span {
+            position: absolute;
+            top: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--panel-dark); 
+            padding: 0 15px;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+
+        /* Google Button */
+        .google-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            color: var(--text-light);
+            font-size: 1rem;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            box-sizing: border-box;
+        }
+
+        .google-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+
+        .google-btn img {
+            width: 20px;
+            margin-right: 12px;
+        }
+
+        /* Bottom Links */
+        .signup-link {
+            text-align: center;
+            margin-top: 25px;
+            font-size: 0.9rem;
+            color: var(--text-muted);
+        }
+
+        .signup-link a {
+            color: var(--accent-primary);
+            text-decoration: none;
+            font-weight: 600;
+            transition: color 0.2s;
+        }
+
+        .signup-link a:hover {
+            color: var(--accent-secondary);
+        }
+
+        /* --- Responsive Design --- */
+        @media (max-width: 768px) {
+            .login-container {
+                flex-direction: column;
+                height: auto;
+            }
+            .visual-side {
+                padding: 30px 20px;
+                min-height: 200px;
+            }
+            .scanner-graphic {
+                display: none;
+            }
+            .form-side {
+                padding: 30px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-container">
+        <div class="visual-side">
+            <div class="visual-content">
+                <h2>True<span>Frame</span></h2>
+                <p>Authenticating media. Protecting truth.</p>
+            </div>
+            
+            <div class="scanner-graphic">
+                <img id="character-img" src="" alt="Analyzing Media...">
+                <div class="scan-beam"></div>
+            </div>
+        </div>
+
+        <div class="form-side">
+            <div class="form-header">
+                <h1>Login</h1>
+            </div>
+
+            {% with messages = get_flashed_messages() %}
+                {% if messages %}
+                    <div class="error-message">{{ messages[0] }}</div>
+                {% endif %}
+            {% endwith %}
+
+            <form method="POST" action="/login">
+                
+                <div class="input-group">
+                    <input type="email" name="email" placeholder="Email Address" required>
+                </div>
+
+                <div class="input-group">
+                    <input type="password" name="password" placeholder="Password" required>
+                </div>
+
+                <button type="submit" class="login-btn">Login</button>
+            </form>
+
+            <div class="divider"><span>OR</span></div>
+
+            <a href="/login/google" class="google-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20px" height="20px" style="margin-right: 12px; display: block;">
+                    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+                    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+                    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+                    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+                    <path fill="none" d="M0 0h48v48H0z"/>
+                </svg>
+                Sign in with Google
+            </a>
+
+            <div class="signup-link">
+                No account? <a href="/register">Register here</a>
+            </div>
+        </div>
+    </div>
+
+<script>
+    // 1. Add your relative local paths here
+    const maleImages = [
+      "{{ url_for('static', filename='avatars/Male1.png') }}",
+      "{{ url_for('static', filename='avatars/Male2.png') }}"
+    ];
+  
+    const femaleImages = [
+      "{{ url_for('static', filename='avatars/Female1.png') }}",
+      "{{ url_for('static', filename='avatars/Female2.png') }}"
+    ];
+  
+    let showMaleNext = true; 
+    const imgElement = document.getElementById('character-img');
+  
+    // 2. Function to pick a random image and alternate genders
+    function getRandomImage() {
+      let selectedArray = showMaleNext ? maleImages : femaleImages;
+      showMaleNext = !showMaleNext; 
+      
+      const randomIndex = Math.floor(Math.random() * selectedArray.length);
+      return selectedArray[randomIndex];
+    }
+  
+    // Initialize the first image
+    imgElement.src = getRandomImage();
+  
+    // Loop to match the CSS scanner
+    setInterval(() => {
+      // Fade out
+      imgElement.style.opacity = 0;
+      
+      setTimeout(() => {
+        // Swap image
+        imgElement.src = getRandomImage();
+        
+        // Fade back in to 0.4
+        imgElement.style.opacity = 0.6;
+      }, 300); 
+      
+    }, 2500); 
+</script>
+
+</body>
+</html>

templates/register.html

@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - TrueFrame</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* --- CSS Reset and Variables --- */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        :root {
+            --bg-dark: #0a0e17;
+            --panel-dark: #131c2a;
+            --accent-primary: #00f2fe;
+            --accent-secondary: #4facfe;
+            --error-color: #ff4b4b;
+            --text-light: #e0e0e0;
+            --text-muted: #8d97a5;
+        }
+
+        body {
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--bg-dark);
+           background-color: var(--bg-dark);
+            background-image: 
+                radial-gradient(circle at 20% 20%, rgba(19, 54, 75, 0.945) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(13, 42, 70, 0.801) 0%, transparent 50%);
+            overflow: hidden;
+        }
+
+        /* --- Main Container --- */
+        .login-container {
+            display: flex;
+            width: 900px;
+            max-width: 95%;
+            height: 600px;
+            background-color: var(--panel-dark);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+            border: 1px solid rgba(0, 242, 254, 0.1);
+        }
+
+        /* --- Left Side: Visuals --- */
+        .visual-side {
+            flex: 1;
+            background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(79, 172, 254, 0.2));
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+            padding: 40px;
+            color: var(--text-light);
+        }
+
+        .visual-content h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        
+        .visual-content h2 span {
+            color: var(--accent-primary);
+        }
+
+        .visual-content p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            text-align: center;
+        }
+
+        /* --- INTEGRATED SCANNER CSS --- */
+        .scanner-graphic {
+            margin-top: 40px;
+            position: relative;
+            width: 150px; 
+            height: 150px;
+            background-color: rgba(0, 0, 0, 0.2);
+            border-radius: 50%; 
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(0, 242, 254, 0.2); 
+            border: 2px solid rgba(0, 242, 254, 0.2); 
+        }
+
+        #character-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.4; 
+            transition: opacity 0.3s ease;
+            mix-blend-mode: screen;
+        }
+
+        .scan-beam {
+            position: absolute;
+            top: 0;
+            left: -10%;
+            width: 120%;
+            height: 3px;
+            background: var(--accent-primary);
+            box-shadow: 0 0 15px var(--accent-primary), 0 0 30px var(--accent-secondary);
+            animation: scanning 2.5s linear infinite; 
+        }
+
+        @keyframes scanning {
+            0% { top: -5%; opacity: 0; }
+            5% { opacity: 1; }
+            95% { opacity: 1; }
+            100% { top: 105%; opacity: 0; }
+        }
+
+        /* --- Right Side: Form --- */
+        .form-side {
+            flex: 1;
+            padding: 50px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .form-header {
+            margin-bottom: 25px;
+        }
+
+        .form-header h1 {
+            color: var(--text-light);
+            font-size: 1.8rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        /* Flask Flashed Messages Styling */
+        .error-message {
+            background-color: rgba(255, 75, 75, 0.1);
+            border-left: 4px solid var(--error-color);
+            color: var(--error-color);
+            padding: 10px 15px;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+
+        /* Input Groups */
+        .input-group {
+            margin-bottom: 20px;
+        }
+
+        .input-group input {
+            width: 100%;
+            padding: 12px 15px;
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            color: var(--text-light);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+        }
+
+        .input-group input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+
+        /* Buttons */
+        .login-btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(to right, #00f2fe, #4facfe);
+            color: var(--bg-dark);
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            margin-top: 10px;
+            margin-bottom: 15px;
+        }
+
+        .login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
+        }
+
+        /* Bottom Links */
+        .signup-link {
+            text-align: center;
+            margin-top: 25px;
+            font-size: 0.9rem;
+            color: var(--text-muted);
+        }
+
+        .signup-link a {
+            color: var(--accent-primary);
+            text-decoration: none;
+            font-weight: 600;
+            transition: color 0.2s;
+        }
+
+        .signup-link a:hover {
+            color: var(--accent-secondary);
+        }
+
+        /* --- Responsive Design --- */
+        @media (max-width: 768px) {
+            .login-container {
+                flex-direction: column;
+                height: auto;
+            }
+            .visual-side {
+                padding: 30px 20px;
+                min-height: 200px;
+            }
+            .scanner-graphic {
+                display: none;
+            }
+            .form-side {
+                padding: 30px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-container">
+        <div class="visual-side">
+            <div class="visual-content">
+                <h2>True<span>Frame</span></h2>
+                <p>Authenticating media. Protecting truth.</p>
+            </div>
+            
+            <div class="scanner-graphic">
+                <img id="character-img" src="" alt="Analyzing Media...">
+                <div class="scan-beam"></div>
+            </div>
+        </div>
+
+        <div class="form-side">
+            <div class="form-header">
+                <h1>Create Account</h1>
+            </div>
+
+            {% with messages = get_flashed_messages() %}
+                {% if messages %}
+                    <div class="error-message">{{ messages[0] }}</div>
+                {% endif %}
+            {% endwith %}
+
+            <form method="POST" action="/register">
+                
+                <div class="input-group">
+                    <input type="text" name="name" placeholder="Full Name" required>
+                </div>
+
+                <div class="input-group">
+                    <input type="email" name="email" placeholder="Email Address" required>
+                </div>
+
+                <div class="input-group">
+                    <input type="password" name="password" placeholder="Create Password" required>
+                </div>
+
+                <button type="submit" class="login-btn">Sign Up</button>
+            </form>
+
+            <div class="signup-link">
+                Already have an account? <a href="/login">Login here</a>
+            </div>
+        </div>
+    </div>
+
+<script>
+    // 1. Array of Flask static image paths
+    const maleImages = [
+      "{{ url_for('static', filename='avatars/Male1.png') }}",
+      "{{ url_for('static', filename='avatars/Male2.png') }}"
+    ];
+  
+    const femaleImages = [
+      "{{ url_for('static', filename='avatars/Female1.png') }}",
+      "{{ url_for('static', filename='avatars/Female2.png') }}"
+    ];
+  
+    let showMaleNext = true; 
+    const imgElement = document.getElementById('character-img');
+  
+    // 2. Function to pick a random image and alternate genders
+    function getRandomImage() {
+      let selectedArray = showMaleNext ? maleImages : femaleImages;
+      showMaleNext = !showMaleNext; 
+      
+      const randomIndex = Math.floor(Math.random() * selectedArray.length);
+      return selectedArray[randomIndex];
+    }
+  
+    // Initialize the first image
+    imgElement.src = getRandomImage();
+  
+    // Loop to match the CSS scanner
+    setInterval(() => {
+      // Fade out
+      imgElement.style.opacity = 0;
+      
+      setTimeout(() => {
+        // Swap image
+        imgElement.src = getRandomImage();
+        
+        // Fade back in to 0.4
+        imgElement.style.opacity = 0.4;
+      }, 300); 
+      
+    }, 2500); 
+</script>
+
+</body>
+</html>

templates/result.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TrueFrame - Analysis Result</title>
+    <style>
+        :root {
+            --bg-dark: #0b111e;
+            --card-bg: #141c2b;
+            --primary-cyan: #00e5ff;
+            --primary-blue: #0077ff;
+            --text-main: #ffffff;
+            --text-muted: #8b9bb4;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --danger: #ff3b30;
+            --success: #28a745;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        /* Navbar & Profile (Matched to Dashboard) */
+        .navbar {
+            width: 100%;
+            padding: 15px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-sizing: border-box;
+            background: rgba(20, 28, 43, 0.8);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+        }
+        .brand { font-size: 1.5em; font-weight: bold; letter-spacing: 1px; }
+        .brand span { color: var(--primary-cyan); }
+
+        /* Main Container */
+        .container {
+            margin: 60px 20px;
+            background: var(--card-bg);
+            border-radius: 24px;
+            padding: 50px;
+            width: 100%;
+            max-width: 600px;
+            text-align: center;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+        }
+
+        h1 { font-size: 2.5em; margin: 0 0 10px 0; }
+
+        /* Verdict Styling */
+        .verdict-box {
+            padding: 20px;
+            border-radius: 16px;
+            font-size: 28px;
+            font-weight: 800;
+            text-transform: uppercase;
+            margin-bottom: 40px;
+            letter-spacing: 2px;
+            border: 2px solid transparent;
+        }
+
+        .fake { 
+            color: var(--danger); 
+            background: rgba(255, 59, 48, 0.1); 
+            border-color: var(--danger);
+            box-shadow: 0 0 20px rgba(255, 59, 48, 0.2);
+        }
+
+        .real { 
+            color: var(--primary-cyan); 
+            background: rgba(0, 229, 255, 0.1); 
+            border-color: var(--primary-cyan);
+            box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
+        }
+
+        /* Scan Details Info */
+        .details-panel {
+            text-align: left;
+            background: rgba(255,255,255,0.03);
+            padding: 30px;
+            border-radius: 16px;
+            margin-bottom: 30px;
+            border-left: 4px solid var(--primary-cyan);
+        }
+
+        .details-panel h3 { margin-top: 0; color: var(--primary-cyan); font-size: 18px; text-transform: uppercase; }
+        .data-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.1em; }
+        .data-label { color: var(--text-muted); }
+
+        /* Buttons */
+        .btn-group { display: flex; gap: 15px; }
+        .btn {
+            flex: 1;
+            padding: 15px;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: bold;
+            transition: 0.3s;
+            text-align: center;
+        }
+
+        .btn-primary {
+            background: linear-gradient(90deg, var(--primary-cyan), var(--primary-blue));
+            color: white;
+            box-shadow: 0 8px 20px rgba(0, 119, 255, 0.3);
+        }
+
+        .btn-secondary {
+            background: rgba(255,255,255,0.05);
+            color: white;
+            border: 1px solid var(--border-color);
+        }
+
+        .btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
+
+    </style>
+</head>
+<body>
+
+    <nav class="navbar">
+        <div class="brand">True<span>Frame</span></div>
+        <div style="color: var(--text-muted); font-size: 0.9em;">Analysis Report</div>
+    </nav>
+
+    <div class="container">
+        <h1>Analysis Complete</h1>
+
+        <div class="verdict-box {{ css_class }}">
+            {{ result }}
+        </div>
+
+        <div class="details-panel">
+            <h3>Scan Metadata</h3>
+            <div class="data-row">
+                <span class="data-label">Media Type:</span>
+                <span>{{ type }}</span>
+            </div>
+            <div class="data-row">
+                <span class="data-label">AI Confidence:</span>
+                <span style="color: var(--primary-cyan); font-weight: bold;">{{ confidence }}%</span>
+            </div>
+            
+            <hr style="border: 0; border-top: 1px solid var(--border-color); margin: 20px 0;">
+            
+            <div style="color: var(--text-muted); font-size: 0.95em; line-height: 1.6;">
+                {{ extra_info | safe }}
+            </div>
+        </div>
+
+        <div class="btn-group">
+            <a href="/" class="btn btn-primary">New Analysis</a>
+            <a href="javascript:window.print()" class="btn btn-secondary">Download Report</a>
+        </div>
+    </div>
+
+</body>
+</html>

video_detect.py

@@ -0,0 +1,64 @@
+import torch
+from transformers import CLIPProcessor, CLIPModel
+from PIL import Image
+
+class VideoDeepfakeDetector:
+    def __init__(self, local_model_path="./local_clip_model"):
+        print("⚡ Loading Video AI Model...")
+        try:
+            self.model = CLIPModel.from_pretrained(local_model_path)
+            self.processor = CLIPProcessor.from_pretrained(local_model_path)
+            print("✅ Video Model Ready.")
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            print("Run 'setup_model.py' first.")
+            exit()
+
+    def predict(self, image_path):
+        try:
+            image = Image.open(image_path)
+            
+            # --- VIDEO SPECIFIC LABELS ---
+            # These work best for Vlogs, Motion Blur, and Lower Quality Frames
+            labels = [
+                # --- REAL CATEGORY ---
+                "raw authentic photo from a camera",         
+                "youtube vlog frame with text and emojis",   
+                "low quality phone camera footage",          
+
+                # --- FAKE CATEGORY ---
+                "ai generated image from text prompt",       
+                "hyper-realistic cgi 3d render",             
+                "digital art style synthetic face",          
+                "deepfake face swap artifacts",              
+                "unnatural smooth skin texture"              
+            ]
+            
+            inputs = self.processor(
+                text=labels, 
+                images=image, 
+                return_tensors="pt", 
+                padding=True
+            )
+
+            with torch.no_grad():
+                outputs = self.model(**inputs)
+            
+            probs = outputs.logits_per_image.softmax(dim=1)
+            scores = probs.tolist()[0]
+            
+            # Real = Indices 0, 1, 2
+            real_score = sum(scores[:3])
+            
+            # Fake = Indices 3 to 7
+            fake_score = sum(scores[3:])
+            
+            # Video Sensitivity: 0.51 (Stricter because video frames are messy)
+            if fake_score > 0.51:
+                return "DEEPFAKE DETECTED", fake_score
+            else:
+                return "REAL", real_score
+
+        except Exception as e:
+            print(f"Error predicting {image_path}: {e}")
+            return "ERROR", 0.0