[Deployment Phase 1 & 2] - Neon DB and R2 with working turnstile in login page implemented

backend/app/api/file_routes.py

@@ -12,6 +12,7 @@ from app.core.limiter import limiter
 from app.security.turnstile import verify_turnstile_token
 from datetime import datetime, UTC
 from app.models.file_model import File
+from app.core.storage import active_storage
 import base64
 import struct
 
@@ -39,8 +40,8 @@ def format_file_response(f):
     base_dict = {
         "id": encode_id(f.id),
         "filename": f.filename,
-        "filepath": f.filepath,
-        "heatmap_path": f.heatmap_path,
+        "filepath": active_storage.get_presigned_url(f.filepath) if f.filepath else None,
+        "heatmap_path": active_storage.get_presigned_url(f.heatmap_path) if f.heatmap_path else None,
         "type": f.filetype,
         "size": f.filesize,
         "status": f.status,
@@ -95,12 +96,10 @@ def get_file(
 async def upload_file(
     request: Request,
     file: UploadFile = FastAPIFile(...),
-    cf_turnstile_response: str = Header(None, alias="cf-turnstile-response"),
     db: Session = Depends(get_db),
     current_user: User = Depends(get_optional_user)
 ):
     client_ip = request.client.host
-    await verify_turnstile_token(cf_turnstile_response, client_ip)
 
     if not current_user:
         today = datetime.now(UTC).date()

backend/app/core/config.py

@@ -20,6 +20,11 @@ class Settings(BaseSettings):
     SMTP_SERVER: str | None = None
     FRONTEND_URL: str = "http://localhost:3000"
     TURNSTILE_SECRET_KEY: str | None = None
+    
+    R2_ENDPOINT_URL: str | None = None
+    R2_ACCESS_KEY_ID: str | None = None
+    R2_SECRET_ACCESS_KEY: str | None = None
+    R2_BUCKET_NAME: str | None = None
 
     model_config = SettingsConfigDict(
         env_file=".env",

backend/app/core/processor.py

@@ -14,6 +14,9 @@ from app.ai.feature_extractor import extract_features
 from app.ai.attribution import generate_attribution
 from app.ai.explanation_engine import generated_structured_explanation
 from app.ai.explanation_formatter import format_explanation_with_llm
+from app.core.storage import active_storage
+import os
+
 
 def process_file(file_id: int, db: Session):
     file = db.query(File).filter(File.id == file_id).first()
@@ -21,20 +24,33 @@ def process_file(file_id: int, db: Session):
     if not file:
         return
     
+    local_path = active_storage.download_to_temp(file.filepath)
+
     safe_heatmap_name = f"{uuid.uuid4().hex}.png"
-    heatmap_path = f"uploads/heatmaps/{safe_heatmap_name}"
+    os.makedirs("uploads/heatmaps", exist_ok=True)
+    local_heatmap_path = f"uploads/heatmaps/{safe_heatmap_name}"
+    
     file.status = "PROCESSING"
-
     active_version = model_loader.get_latest_model_version()
     file.model_version_used = active_version
     db.commit()
     
     try:
-        nsfw_result = detect_ai_image(file.filepath)
-        features = extract_features(file.filepath)
+        nsfw_result = detect_ai_image(local_path)
+        features = extract_features(local_path)
         label, prob = predict_ai(features["frequency_score"], features["cnn_score"])
-        attribution_data = generate_attribution(file.filepath, heatmap_path)
-        file.heatmap_path = attribution_data["heatmap_path"]
+        attribution_data = generate_attribution(local_path, local_heatmap_path)
+        
+        class MockFile:
+            def __init__(self, f):
+                self.file = f
+                self.content_type = "image/png"
+                
+        with open(local_heatmap_path, "rb") as hf:
+            mock_hf = MockFile(hf)
+            r2_heatmap_key = active_storage.save(mock_hf, f"heatmaps/{safe_heatmap_name}")
+            
+        file.heatmap_path = r2_heatmap_key
         structured_reasoning = generated_structured_explanation(features, prob)
         natural_reasoning = format_explanation_with_llm(structured_reasoning)
             
@@ -47,5 +63,11 @@ def process_file(file_id: int, db: Session):
         file.status = "FAILED"
         file.result = str(e)
         
+    finally:
+        if 'local_path' in locals() and os.path.exists(local_path) and getattr(active_storage, '__class__').__name__ == "R2StorageProvider":
+            os.remove(local_path)
+        if 'local_heatmap_path' in locals() and os.path.exists(local_heatmap_path):
+            os.remove(local_heatmap_path)
+            
     db.commit()
     db.close()

backend/app/core/storage.py

@@ -1,32 +1,118 @@
-import os
-from abc import ABC, abstractmethod
-from fastapi import UploadFile
-
-class StorageProvider(ABC):
-    @abstractmethod
-    def save(self, file: UploadFile, filename: str) -> str:
-        pass
-    
-    @abstractmethod
-    def delete(self, filepath: str) -> bool:
-        pass
-
-class LocalStorageProvider(StorageProvider):
-    def __init__(self, upload_dir: str = "uploads"):
-        self.upload_dir = upload_dir
-        os.makedirs(self.upload_dir, exist_ok=True)
-
-    def save(self, file: UploadFile, filename: str) -> str:
-        filepath = os.path.join(self.upload_dir, filename)
-        with open(filepath, "wb") as buffer:
-            while chunk := file.file.read(1024 * 1024):
-                buffer.write(chunk)
-        return filepath
-    
-    def delete(self, filepath: str) -> bool:
-        if os.path.exists(filepath):
-            os.remove(filepath)
-            return True
-        return False
-    
-active_storage: StorageProvider = LocalStorageProvider()
+import os
+import boto3
+from botocore.exceptions import ClientError
+from botocore.client import Config
+from abc import ABC, abstractmethod
+from fastapi import UploadFile
+from app.core.config import settings
+import logging
+
+logger = logging.getLogger(__name__)
+
+class StorageProvider(ABC):
+    @abstractmethod
+    def save(self, file: UploadFile, filename: str) -> str:
+        pass
+    
+    @abstractmethod
+    def delete(self, filepath: str) -> bool:
+        pass
+
+    @abstractmethod
+    def get_presigned_url(self, filepath: str) -> str:
+        pass
+
+    @abstractmethod
+    def download_to_temp(self, filepath: str) -> str:
+        pass
+
+class LocalStorageProvider(StorageProvider):
+    def __init__(self, upload_dir: str = "uploads"):
+        self.upload_dir = upload_dir
+        os.makedirs(self.upload_dir, exist_ok=True)
+
+    def save(self, file: UploadFile, filename: str) -> str:
+        filepath = os.path.join(self.upload_dir, filename)
+        with open(filepath, "wb") as buffer:
+            while chunk := file.file.read(1024 * 1024):
+                buffer.write(chunk)
+        return filepath
+    
+    def delete(self, filepath: str) -> bool:
+        if os.path.exists(filepath):
+            os.remove(filepath)
+            return True
+        return False
+
+    def get_presigned_url(self, filepath: str) -> str:
+        # Local storage doesn't need presigned URLs, returning the path for local streaming
+        return filepath
+
+    def download_to_temp(self, filepath: str) -> str:
+        # It's already local
+        return filepath
+
+class R2StorageProvider(StorageProvider):
+    def __init__(self):
+        self.s3_client = boto3.client(
+            service_name="s3",
+            endpoint_url=settings.R2_ENDPOINT_URL,
+            aws_access_key_id=settings.R2_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.R2_SECRET_ACCESS_KEY,
+            region_name="auto",
+            config=Config(signature_version="s3v4")
+        )
+        self.bucket_name = settings.R2_BUCKET_NAME
+
+    def save(self, file: UploadFile, filename: str) -> str:
+        r2_key = f"uploads/{filename}"
+        file.file.seek(0)
+        self.s3_client.upload_fileobj(
+            file.file,
+            self.bucket_name,
+            r2_key,
+            ExtraArgs={"ContentType": file.content_type}
+        )
+        return r2_key
+    
+    def delete(self, filepath: str) -> bool:
+        try:
+            self.s3_client.delete_object(Bucket=self.bucket_name, Key=filepath)
+            return True
+        except ClientError as e:
+            logger.error(f"Error deleting file from R2: {e}")
+            return False
+
+    def get_presigned_url(self, filepath: str) -> str:
+        try:
+            url = self.s3_client.generate_presigned_url(
+                'get_object',
+                Params={'Bucket': self.bucket_name, 'Key': filepath},
+                ExpiresIn=3600 # 1 hour expiry
+            )
+            return url
+        except ClientError as e:
+            logger.error(f"Error generating presigned url: {e}")
+            return filepath
+
+    def download_to_temp(self, filepath: str) -> str:
+        import tempfile
+        ext = filepath.split(".")[-1] if "." in filepath else "tmp"
+        temp_file = tempfile.NamedTemporaryFile(delete=False, suffix=f".{ext}")
+        temp_file.close()
+        try:
+            self.s3_client.download_file(self.bucket_name, filepath, temp_file.name)
+            return temp_file.name
+        except ClientError as e:
+            logger.error(f"Error downloading file from R2: {e}")
+            import os
+            if os.path.exists(temp_file.name):
+                os.remove(temp_file.name)
+            raise
+
+if settings.R2_ENDPOINT_URL and settings.R2_ACCESS_KEY_ID and settings.R2_SECRET_ACCESS_KEY and settings.R2_BUCKET_NAME:
+    active_storage: StorageProvider = R2StorageProvider()
+    logger.info("Using R2StorageProvider for active_storage")
+else:
+    active_storage: StorageProvider = LocalStorageProvider()
+    logger.info("Using LocalStorageProvider for active_storage (R2 config missing)")

backend/app/db/database.py

@@ -1,8 +1,19 @@
 from sqlalchemy import create_engine
 from sqlalchemy.orm import sessionmaker, declarative_base
 from app.core.config import settings
-
-engine = create_engine(settings.DATABASE_URL)
+if settings.DATABASE_URL.startswith("sqlite"):
+    engine = create_engine(
+        settings.DATABASE_URL, 
+        connect_args={"check_same_thread": False}
+    )
+else:
+    engine = create_engine(
+        settings.DATABASE_URL,
+        pool_pre_ping=True,
+        pool_recycle=300,
+        pool_size=10,
+        max_overflow=20
+    )
 
 SessionLocal = sessionmaker(
     autocommit=False,

backend/app/security/turnstile.py

@@ -17,7 +17,7 @@ async def verify_turnstile_token(token: str, ip_address: str = None) -> bool:
 
     verify_url = "https://challenges.cloudflare.com/turnstile/v0/siteverify"
     payload = {
-        "secret": settings.TURNSTILE_SECRET_KEY,
+        "secret": settings.TURNSTILE_SECRET_KEY or "1x0000000000000000000000000000000AA",
         "response": token
     }
 

backend/app/services/file_delete_service.py

@@ -13,7 +13,10 @@ def delete_file_service(db: Session, file_id: int, user_id: int):
     if file.owner_id != user_id:
         raise HTTPException(status_code=403, detail="Not Authorized to delete this file")
     
-    active_storage.delete(file.filepath)
+    if file.filepath:
+        active_storage.delete(file.filepath)
+    if file.heatmap_path:
+        active_storage.delete(file.heatmap_path)
         
     # Delete related jobs first to prevent FK IntegrityError in SQLite
     from app.models.job_model import Job

backend/app/services/video_processor.py

@@ -1,116 +1,142 @@
-import time
-import logging
-import os
-import json
-from sqlalchemy.orm import Session
-from app.models.file_model import File
-from app.ai.video.frame_extractor import extract_frames
-from app.ai.video.frame_detector import analyze_frame
-from app.ai.video.motion_detector import compute_motion_anomaly
-from app.ai.video.noise_entropy_detector import compute_noise_entropy_anomaly
-from app.ai.video.metadata_analyzer import analyze_metadata
-from app.ai.video.aggregator import aggregate_scores
-from app.ai.video.diffusion_spectrum_analyzer import compute_diffusion_spectrum_anomaly
-from app.ai.video.keyframe_heatmap import generate_video_anomaly_keyframe
-from app.ai.video.anomaly_gif_maker import generate_anomaly_gif
-
-logger = logging.getLogger(__name__)
-
-def process_video_pipeline(file_id: int, file_path: str, db: Session):
-    start_time = time.time()
-    logger.info(f"Starting Video Pipeline for file_id: {file_id}")
-
-    try:
-        db_file = db.query(File).filter(File.id == file_id).first()
-        if not db_file:
-            logger.error(f"File ID {file_id} not found in DB.")
-            return
-        
-        md_score, md_dict = analyze_metadata(file_path)
-
-        frame_scores = []
-        motion_scores = []
-        noise_scores = []
-        diffusion_scores = []
-
-        previous_frame = None
-        highest_ai_score = 0
-        most_suspect_frame_idx = 0
-        all_extracted_frames = []
-        timeline_data = []
-
-        for frame, timestamp_sec in extract_frames(file_path, sample_rate=15, max_frames=50):
-            all_extracted_frames.append(frame.copy())
-            
-            # Module A: ViT Image Forensic Analysis
-            f_score = analyze_frame(frame)
-            frame_scores.append(f_score)
-            
-            # Add this specific second to the UI Scrubber Data
-            timeline_data.append({"time": round(timestamp_sec, 2), "ai_score": round(f_score, 3)})
-
-            if f_score > highest_ai_score:
-                highest_ai_score = f_score
-                most_suspect_frame_idx = len(all_extracted_frames) - 1
-
-            # Module B: Microscopic Silicon Noise Analysis
-            n_score = compute_noise_entropy_anomaly(frame)
-            if n_score is not None:
-                noise_scores.append(n_score)
-            
-            # Module C: Diffusion Spectrum Analysis (FFT)
-            d_score = compute_diffusion_spectrum_anomaly(frame)
-            diffusion_scores.append(d_score)
-            
-            # Module D: Farneback Optical Flow
-            if previous_frame is not None:
-                m_score = compute_motion_anomaly(previous_frame, frame)
-                
-                if m_score is not None:
-                    motion_scores.append(m_score)
-            
-            previous_frame = frame
-
-        if all_extracted_frames:
-            # 1. Generate the 2-second GIF Clip 
-            gif_path = generate_anomaly_gif(all_extracted_frames, most_suspect_frame_idx)
-            db_file.heatmap_path = gif_path    # Overwriting the static image column with the GIF file!
-            
-            # 2. Save the JSON string for the Line Chart Scrubber
-            db_file.timeline_data = json.dumps(timeline_data)
-
-        avg_motion = sum(motion_scores)/len(motion_scores) if motion_scores else None
-        avg_noise = sum(noise_scores)/len(noise_scores) if noise_scores else None
-        avg_diffusion = sum(diffusion_scores)/len(diffusion_scores) if diffusion_scores else 0.0
-
-        final_verdict = aggregate_scores(
-            frame_scores=frame_scores,
-            motion_score=avg_motion,
-            noise_score=avg_noise,
-            diffusion_score=avg_diffusion,
-            metadata_score=md_score
-        )
-
-        db_file.status = "Completed"
-        db_file.result = f"{final_verdict['label']} ({final_verdict['probability']*100:.1f}%)"
-        db_file.confidence = final_verdict['probability']
-        db_file.ai_explanation = final_verdict['explanation']
-
-        db.commit()
-
-        elapsed = time.time() - start_time
-        logger.info(f"Successfully processed video {file_id} in {elapsed:.2f} seconds.")
-        logger.info(f"Verdict: {db_file.result}")
-    
-    except Exception as e:
-        logger.error(f"FATAL Pipeline Crash for file_id {file_id}: {str(e)}")
-
-        try:
-            db_file = db.query(File).filter(File.id == file_id).first()
-
-            if db_file:
-                db_file.status = "Failed"
-                db_file.result = str(e)
-                db.commit()
-        except:
-            pass
+import time
+import logging
+import os
+import json
+from sqlalchemy.orm import Session
+from app.models.file_model import File
+from app.ai.video.frame_extractor import extract_frames
+from app.ai.video.frame_detector import analyze_frame
+from app.ai.video.motion_detector import compute_motion_anomaly
+from app.ai.video.noise_entropy_detector import compute_noise_entropy_anomaly
+from app.ai.video.metadata_analyzer import analyze_metadata
+from app.ai.video.aggregator import aggregate_scores
+from app.ai.video.diffusion_spectrum_analyzer import compute_diffusion_spectrum_anomaly
+from app.ai.video.keyframe_heatmap import generate_video_anomaly_keyframe
+from app.ai.video.anomaly_gif_maker import generate_anomaly_gif
+from app.core.storage import active_storage
+import tempfile
+
+logger = logging.getLogger(__name__)
+
+def process_video_pipeline(file_id: int, file_path: str, db: Session):
+    start_time = time.time()
+    logger.info(f"Starting Video Pipeline for file_id: {file_id}")
+
+    try:
+        db_file = db.query(File).filter(File.id == file_id).first()
+        if not db_file:
+            logger.error(f"File ID {file_id} not found in DB.")
+            return
+            
+        local_path = active_storage.download_to_temp(file_path)
+        
+        md_score, md_dict = analyze_metadata(local_path)
+
+        frame_scores = []
+        motion_scores = []
+        noise_scores = []
+        diffusion_scores = []
+
+        previous_frame = None
+        highest_ai_score = 0
+        most_suspect_frame_idx = 0
+        all_extracted_frames = []
+        timeline_data = []
+
+        for frame, timestamp_sec in extract_frames(local_path, sample_rate=15, max_frames=50):
+            all_extracted_frames.append(frame.copy())
+            
+            # Module A: ViT Image Forensic Analysis
+            f_score = analyze_frame(frame)
+            frame_scores.append(f_score)
+            
+            # Add this specific second to the UI Scrubber Data
+            timeline_data.append({"time": round(timestamp_sec, 2), "ai_score": round(f_score, 3)})
+
+            if f_score > highest_ai_score:
+                highest_ai_score = f_score
+                most_suspect_frame_idx = len(all_extracted_frames) - 1
+
+            # Module B: Microscopic Silicon Noise Analysis
+            n_score = compute_noise_entropy_anomaly(frame)
+            if n_score is not None:
+                noise_scores.append(n_score)
+            
+            # Module C: Diffusion Spectrum Analysis (FFT)
+            d_score = compute_diffusion_spectrum_anomaly(frame)
+            diffusion_scores.append(d_score)
+            
+            # Module D: Farneback Optical Flow
+            if previous_frame is not None:
+                m_score = compute_motion_anomaly(previous_frame, frame)
+                
+                if m_score is not None:
+                    motion_scores.append(m_score)
+            
+            previous_frame = frame
+
+        if all_extracted_frames:
+            # 1. Generate the 2-second GIF Clip 
+            gif_path = generate_anomaly_gif(all_extracted_frames, most_suspect_frame_idx)
+            
+            # Upload GIF to R2
+            class MockFile:
+                def __init__(self, f):
+                    self.file = f
+                    self.content_type = "image/gif"
+                    
+            with open(gif_path, "rb") as hf:
+                mock_hf = MockFile(hf)
+                import uuid
+                safe_gif_name = f"{uuid.uuid4().hex}.gif"
+                r2_gif_key = active_storage.save(mock_hf, f"heatmaps/{safe_gif_name}")
+                
+            db_file.heatmap_path = r2_gif_key    # Overwriting the static image column with the GIF file!
+            
+            # clean up local gif
+            if os.path.exists(gif_path):
+                os.remove(gif_path)
+
+            
+            # 2. Save the JSON string for the Line Chart Scrubber
+            db_file.timeline_data = json.dumps(timeline_data)
+
+        avg_motion = sum(motion_scores)/len(motion_scores) if motion_scores else None
+        avg_noise = sum(noise_scores)/len(noise_scores) if noise_scores else None
+        avg_diffusion = sum(diffusion_scores)/len(diffusion_scores) if diffusion_scores else 0.0
+
+        final_verdict = aggregate_scores(
+            frame_scores=frame_scores,
+            motion_score=avg_motion,
+            noise_score=avg_noise,
+            diffusion_score=avg_diffusion,
+            metadata_score=md_score
+        )
+
+        db_file.status = "Completed"
+        db_file.result = f"{final_verdict['label']} ({final_verdict['probability']*100:.1f}%)"
+        db_file.confidence = final_verdict['probability']
+        db_file.ai_explanation = final_verdict['explanation']
+
+        db.commit()
+
+        elapsed = time.time() - start_time
+        logger.info(f"Successfully processed video {file_id} in {elapsed:.2f} seconds.")
+        logger.info(f"Verdict: {db_file.result}")
+    
+    except Exception as e:
+        logger.error(f"FATAL Pipeline Crash for file_id {file_id}: {str(e)}")
+
+        try:
+            db_file = db.query(File).filter(File.id == file_id).first()
+
+            if db_file:
+                db_file.status = "Failed"
+                db_file.result = str(e)
+                db.commit()
+        except:
+            pass
+            
+    finally:
+        if 'local_path' in locals() and os.path.exists(local_path) and getattr(active_storage, '__class__').__name__ == "R2StorageProvider":
+            os.remove(local_path)

backend/app/worker/tasks.py

@@ -97,11 +97,12 @@ def delete_guest_file_task(file_id: int):
     try:
         from app.models.file_model import File
         db_file = db.query(File).filter(File.id == file_id).first()
+        from app.core.storage import active_storage
         if db_file:
-            if os.path.exists(db_file.filepath):
-                os.remove(db_file.filepath)
-            if db_file.heatmap_path and os.path.exists(db_file.heatmap_path):
-                os.remove(db_file.heatmap_path)
+            if db_file.filepath:
+                active_storage.delete(db_file.filepath)
+            if db_file.heatmap_path:
+                active_storage.delete(db_file.heatmap_path)
 
             db.delete(db_file)
             db.commit()

backend/requirements.txt

@@ -178,3 +178,5 @@ webencodings==0.5.1
 websocket-client==1.9.0
 win32_setctime==1.2.0
 wrapt==2.1.1
+
+boto3==1.34.84

frontend/app/login/page.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { ArrowRight, Fingerprint, Mail, KeyRound, User, ArrowLeft } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { Turnstile } from "@marsidev/react-turnstile";
 
 export default function LoginPage() {
     const [mode, setMode] = useState<'login' | 'signup'>('login');
@@ -13,6 +14,7 @@ export default function LoginPage() {
     const [error, setError] = useState("");
     const [successMessage, setSuccessMessage] = useState("");
     const [loading, setLoading] = useState(false);
+    const [turnstileToken, setTurnstileToken] = useState("");
     const router = useRouter();
 
     // OAuth Token Intake
@@ -65,23 +67,22 @@ export default function LoginPage() {
         setSuccessMessage("");
         setLoading(true);
         
-        // Dynamic Turnstile Logic
-        let currentToken = sessionStorage.getItem('turnstile_token');
-        if (!currentToken) {
-            currentToken = "dummy_swagger_token";
-            sessionStorage.setItem('turnstile_token', currentToken);
+        if (!turnstileToken) {
+            setError("Please complete the security check.");
+            setLoading(false);
+            return;
         }
-        
+
         try {
             if (mode === 'login') {
                 const res = await axios.post("http://localhost:8000/auth/login", { identifier, password }, {
-                    headers: { "cf-turnstile-response": currentToken }
+                    headers: { "cf-turnstile-response": turnstileToken }
                 });
                 localStorage.setItem("access_token", res.data.access_token);
                 window.location.href = "/dashboard";
             } else {
                 const res = await axios.post("http://localhost:8000/users/register", { email, username, password }, {
-                    headers: { "cf-turnstile-response": currentToken }
+                    headers: { "cf-turnstile-response": turnstileToken }
                 });
                 setSuccessMessage(res.data.message || "Account created! Check your email to verify.");
                 setMode('login');
@@ -203,6 +204,18 @@ export default function LoginPage() {
                             />
                         </div>
                         
+                        <div className="flex justify-center mt-4">
+                            <Turnstile 
+                                siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || '1x00000000000000000000AA'} 
+                                onSuccess={(token) => setTurnstileToken(token)}
+                                onError={() => setError("Turnstile security check failed.")}
+                                onExpire={() => setTurnstileToken("")}
+                                options={{
+                                    theme: 'dark',
+                                }}
+                            />
+                        </div>
+
                         <button 
                             type="submit" 
                             disabled={loading}

frontend/app/result/[id]/page.tsx

@@ -37,6 +37,8 @@ export default function ResultPage() {
     const [globalDrag, setGlobalDrag] = useState(false);
     const [showAuthModal, setShowAuthModal] = useState(true);
     const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+    const [mediaLoaded, setMediaLoaded] = useState(false);
+    const [heatmapLoaded, setHeatmapLoaded] = useState(false);
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -123,23 +125,31 @@ export default function ResultPage() {
     if (fileData) {
 
         if (fileData.filepath) {
-            const fp = fileData.filepath.replace(/\\/g, '/');
-            const match = fp.match(/uploads[/].*$/);
-            if (match) {
-                mediaUrl = `http://localhost:8000/static/${match[0]}`;
+            if (fileData.filepath.startsWith('http://') || fileData.filepath.startsWith('https://')) {
+                mediaUrl = fileData.filepath;
             } else {
-                const filename = fp.split('/').pop();
-                mediaUrl = filename ? `http://localhost:8000/static/uploads/${filename}` : "";
+                const fp = fileData.filepath.replace(/\\/g, '/');
+                const match = fp.match(/uploads[/].*$/);
+                if (match) {
+                    mediaUrl = `http://localhost:8000/static/${match[0]}`;
+                } else {
+                    const filename = fp.split('/').pop();
+                    mediaUrl = filename ? `http://localhost:8000/static/uploads/${filename}` : "";
+                }
             }
         }
         
         if (fileData.heatmap_path) {
-            const hp = fileData.heatmap_path.replace(/\\/g, '/');
-            const match = hp.match(/uploads[/].*$/);
-            if (match) {
-                heatmapUrl = `http://localhost:8000/static/${match[0]}`;
+            if (fileData.heatmap_path.startsWith('http://') || fileData.heatmap_path.startsWith('https://')) {
+                heatmapUrl = fileData.heatmap_path;
             } else {
-                heatmapUrl = `http://localhost:8000/static/${hp.startsWith('/') ? hp.slice(1) : hp}`;
+                const hp = fileData.heatmap_path.replace(/\\/g, '/');
+                const match = hp.match(/uploads[/].*$/);
+                if (match) {
+                    heatmapUrl = `http://localhost:8000/static/${match[0]}`;
+                } else {
+                    heatmapUrl = `http://localhost:8000/static/${hp.startsWith('/') ? hp.slice(1) : hp}`;
+                }
             }
         }
         
@@ -188,6 +198,9 @@ export default function ResultPage() {
         }
     }
 
+    const isVideo = fileData?.type?.startsWith("video/");
+    const allLoaded = isVideo ? mediaLoaded : (mediaLoaded && (!heatmapUrl || heatmapLoaded));
+
     return (
         <main className="min-h-screen bg-[var(--theme-bg)] text-[var(--theme-text)] selection:bg-[var(--theme-text)]/20 selection:text-[var(--theme-text)] pb-32 !cursor-none relative overflow-x-hidden">
             <style dangerouslySetInnerHTML={{__html: `
@@ -261,13 +274,30 @@ export default function ResultPage() {
                     </div>
                     
                     <div className="relative aspect-auto rounded-3xl overflow-hidden bg-black/40 border border-theme-border shadow-2xl dash-border flex items-center justify-center min-h-[300px]">
+                        {/* Skeleton Loader */}
+                        <div className={`absolute inset-0 bg-[var(--theme-bg)] z-50 transition-opacity duration-700 pointer-events-none flex items-center justify-center ${allLoaded ? 'opacity-0' : 'opacity-100'}`}>
+                            <div className="absolute inset-0 bg-[var(--theme-text)]/5 animate-pulse"></div>
+                            <div className="w-12 h-12 border-4 border-[var(--theme-border)] border-t-[var(--theme-text)] rounded-full animate-spin shadow-[0_0_15px_rgba(253,232,214,0.2)]"></div>
+                        </div>
+
                         {/* Media Layers */}
-                        {fileData?.type.startsWith("video/") ? (
-                            <video src={mediaUrl} controls className="w-full max-h-[70vh] object-contain rounded-3xl !cursor-none z-10 relative" autoPlay loop muted playsInline />
+                        {isVideo ? (
+                            <video 
+                                src={mediaUrl} 
+                                controls 
+                                className="w-full max-h-[70vh] object-contain rounded-3xl !cursor-none z-10 relative" 
+                                autoPlay loop muted playsInline 
+                                onLoadedData={() => setMediaLoaded(true)}
+                            />
                         ) : (
                             <>
                                 {/* Base Image */}
-                                <img src={mediaUrl} alt="Analyzed Media" className="w-full max-h-[70vh] object-contain !cursor-none z-10 relative pointer-events-none" />
+                                <img 
+                                    src={mediaUrl} 
+                                    alt="Analyzed Media" 
+                                    className="w-full max-h-[70vh] object-contain !cursor-none z-10 relative pointer-events-none" 
+                                    onLoad={() => setMediaLoaded(true)}
+                                />
                                 
                                 {/* Heatmap Overlay (Clipped) */}
                                 {heatmapUrl && (
@@ -276,6 +306,7 @@ export default function ResultPage() {
                                         alt="Heatmap/Noise Pattern" 
                                         className="absolute inset-0 w-full h-full object-contain !cursor-none z-20 pointer-events-none" 
                                         style={{ clipPath: `inset(0 ${100 - sliderValue}% 0 0)` }}
+                                        onLoad={() => setHeatmapLoaded(true)}
                                     />
                                 )}
 

frontend/components/upload/UploadZone.tsx

@@ -49,8 +49,7 @@ export default function UploadZone({ autoAnalyze = false }: { autoAnalyze?: bool
         try {
             const token = localStorage.getItem("access_token");
             const headers: Record<string, string> = {
-                "Content-Type": "multipart/form-data",
-                "cf-turnstile-response": "dummy_swagger_token"
+                "Content-Type": "multipart/form-data"
             };
             if (token) headers["Authorization"] = `Bearer ${token}`;
 

frontend/contexts/AuthContext.tsx

@@ -29,7 +29,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [loading, setLoading] = useState(true);
   
   const router = useRouter();
-  const pathname = usePathname();
 
   useEffect(() => {
     // Only check if we are not on a public unprotected path unless it's specifically standard.
@@ -45,14 +44,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         setIsAuthenticated(false);
         setUser(null);
         // Explicitly guard the dashboard
-        if (pathname?.includes('/dashboard')) {
+        if (window.location.pathname.includes('/dashboard')) {
           router.push('/login');
         }
       })
       .finally(() => {
         setLoading(false);
       });
-  }, [pathname, router]);
+  }, [router]);
 
   const logout = () => {
     localStorage.removeItem("access_token");