chore: remove unused files — frontend React, stitch designs, stripe scripts, setup scripts

.gitignore

@@ -10,18 +10,31 @@ dist/
 build/
 .eggs/
 
-# Uploads (temp video files)
+# Uploads
 backend/uploads/
 
-# HuggingFace model cache (large, re-downloads automatically)
-# Uncomment below if you want to exclude the cache too
-# ~/.cache/huggingface/
-
-# Environment
+# Sensitive files
+backend/api_keys.json
+backend/usage.json
 .env
 .env.local
 *.env
 
+# Unused folders
+frontend/
+stitch_authrix_deepfake_detection_engine/
+
+# One-time / internal scripts
+backend/create_owner_key.py
+backend/stripe_integration.py
+STRIPE_SETUP.md
+DEPLOY_HF.md
+render.yaml
+setup.bat
+setup.sh
+start.bat
+start.sh
+
 # IDE
 .vscode/settings.json
 .idea/
@@ -33,19 +46,23 @@ backend/uploads/
 Thumbs.db
 desktop.ini
 
-# Stitch design files (not needed for deployment)
-stitch_authrix_deepfake_detection_engine/
+# Logs
+*.log
+logs/
+
+# Video test artifacts
+*.mp4
+*.avi
+*.mov
+*.mkv
+*.webm
 
-# PNG/binary files (use Git LFS or HF Xet for these)
+# Binary / image files (force-add icons explicitly with git add -f)
 *.png
 *.jpg
 *.jpeg
 *.gif
 *.ico
 
-# Test artifacts
-*.mp4
-*.avi
-*.mov
-*.mkv
-*.webm
+# Node
+node_modules/

DEPLOY_HF.md

@@ -1,101 +0,0 @@
-# Deploy Authrix to Hugging Face Spaces (Free)
-
-## Why HF Spaces?
-- FREE 16GB RAM
-- FREE CPU (and optional GPU)
-- Always-on (no sleep on free tier for public spaces)
-- Built for AI apps exactly like this
-
----
-
-## Step-by-Step Deployment
-
-### 1. Create HuggingFace Account
-Go to https://huggingface.co/join and sign up (free)
-
-### 2. Create a New Space
-1. Go to https://huggingface.co/new-space
-2. Fill in:
-   - **Space name:** authrix (or authrix-deepfake-detector)
-   - **License:** MIT
-   - **SDK:** Docker
-   - **Visibility:** Public (required for free tier)
-3. Click **Create Space**
-
-### 3. Push Your Code
-
-Install Git LFS first:
-```bash
-# Windows
-winget install Git.Git
-git lfs install
-```
-
-Then push:
-```bash
-# In your project root (E:\DeepFake Detect)
-git init
-git add .
-git commit -m "Initial deployment"
-
-# Add HuggingFace remote (replace YOUR_USERNAME)
-git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/authrix
-
-# Push (will ask for HF username + token)
-git push hf main
-```
-
-Get your HF token at: https://huggingface.co/settings/tokens
-(Create a token with "write" permission)
-
-### 4. Wait for Build
-- Build takes 10-15 minutes (downloading models)
-- Watch progress at: https://huggingface.co/spaces/YOUR_USERNAME/authrix
-
-### 5. Update Extension API URL
-Once deployed, your app will be at:
-`https://YOUR_USERNAME-authrix.hf.space`
-
-Update `extension/background.js`:
-```javascript
-const API_BASE = 'https://YOUR_USERNAME-authrix.hf.space';
-```
-
-Update `extension/popup.js`:
-```javascript
-const API_BASE = 'https://YOUR_USERNAME-authrix.hf.space';
-```
-
-Update `extension/content.js` (Open Authrix App button):
-```javascript
-window.open('https://YOUR_USERNAME-authrix.hf.space', '_blank');
-```
-
----
-
-## Limitations of Free HF Spaces
-
-| Feature | Free Tier |
-|---------|-----------|
-| RAM | 16GB ✅ |
-| CPU | 2 vCPUs ✅ |
-| GPU | ❌ (CPU only) |
-| Storage | 50GB ✅ |
-| Sleep | Never (public spaces) ✅ |
-| Custom domain | ❌ (need Pro $9/mo) |
-| Private space | ❌ (need Pro) |
-
-## Upgrade Options
-- **HF Pro ($9/mo):** Custom domain, private spaces, more storage
-- **HF GPU Space ($0.60/hr):** 10x faster inference with T4 GPU
-
----
-
-## After Deployment
-
-Your app will be live at:
-`https://YOUR_USERNAME-authrix.hf.space`
-
-Share this URL with anyone — no installation needed!
-
-The browser extension will also work with this URL once you update `API_BASE`.

STRIPE_SETUP.md

@@ -1,315 +0,0 @@
-# 💳 Stripe Subscription Setup Guide
-
-## Your Owner API Key
-
-```
-🔑 API Key: authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE
-⭐ Tier: Owner (Unlimited Access)
-```
-
-**Save this key securely!** You have unlimited analyses.
-
----
-
-## Quick Start: Accept Payments in 30 Minutes
-
-### Step 1: Create Stripe Account (5 min)
-
-1. Go to https://dashboard.stripe.com/register
-2. Sign up with your email
-3. Complete business verification
-
-### Step 2: Get API Keys (2 min)
-
-1. Go to https://dashboard.stripe.com/apikeys
-2. Copy your **Secret Key** (starts with `sk_test_` or `sk_live_`)
-3. Add to your environment:
-
-```bash
-# Windows
-set STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE
-
-# Linux/Mac
-export STRIPE_SECRET_KEY=sk_test_YOUR_KEY_HERE
-```
-
-### Step 3: Create Products & Prices (10 min)
-
-1. Go to https://dashboard.stripe.com/products
-2. Click **+ Add product**
-
-**Create these products:**
-
-#### Product 1: Authrix Pro
-- **Name:** Authrix Pro
-- **Description:** 100 video analyses per month
-- **Pricing:**
-  - Monthly: $9.99/month (recurring)
-  - Yearly: $99/year (recurring)
-- Copy the **Price ID** (starts with `price_`)
-
-#### Product 2: Authrix Business
-- **Name:** Authrix Business
-- **Description:** 1,000 video analyses per month
-- **Pricing:**
-  - Monthly: $49/month (recurring)
-  - Yearly: $490/year (recurring)
-- Copy the **Price ID**
-
-### Step 4: Update Price IDs (2 min)
-
-Edit `backend/stripe_integration.py`:
-
-```python
-PRICE_IDS = {
-    "pro_monthly": "price_YOUR_PRO_MONTHLY_ID",
-    "pro_yearly": "price_YOUR_PRO_YEARLY_ID",
-    "business_monthly": "price_YOUR_BUSINESS_MONTHLY_ID",
-    "business_yearly": "price_YOUR_BUSINESS_YEARLY_ID",
-}
-```
-
-### Step 5: Set Up Webhooks (5 min)
-
-1. Go to https://dashboard.stripe.com/webhooks
-2. Click **+ Add endpoint**
-3. **Endpoint URL:** `https://your-domain.com/api/stripe/webhook`
-4. **Events to send:**
-   - `checkout.session.completed`
-   - `customer.subscription.updated`
-   - `customer.subscription.deleted`
-5. Copy the **Signing secret** (starts with `whsec_`)
-6. Add to environment:
-
-```bash
-set STRIPE_WEBHOOK_SECRET=whsec_YOUR_SECRET_HERE
-```
-
-### Step 6: Test Payment (5 min)
-
-```bash
-# Start backend
-python -m uvicorn main:app --port 8000
-
-# Test checkout (in another terminal)
-curl -X POST http://localhost:8000/api/stripe/create-checkout-session \
-  -H "Content-Type: application/json" \
-  -d '{
-    "email": "test@example.com",
-    "plan": "pro_monthly",
-    "success_url": "http://localhost:8000/success",
-    "cancel_url": "http://localhost:8000/pricing"
-  }'
-```
-
-You'll get a `checkout_url` - open it in your browser!
-
-**Test Card Numbers:**
-- Success: `4242 4242 4242 4242`
-- Decline: `4000 0000 0000 0002`
-- Any future expiry date, any CVC
-
----
-
-## Integration Examples
-
-### Frontend: Create Checkout
-
-```javascript
-// When user clicks "Subscribe to Pro"
-async function subscribeToPro() {
-  const response = await fetch('http://localhost:8000/api/stripe/create-checkout-session', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      email: 'user@example.com',
-      plan: 'pro_monthly',
-      success_url: window.location.origin + '/success',
-      cancel_url: window.location.origin + '/pricing'
-    })
-  });
-  
-  const { checkout_url } = await response.json();
-  window.location.href = checkout_url;  // Redirect to Stripe
-}
-```
-
-### Backend: Use API with Key
-
-```python
-import requests
-
-response = requests.post(
-    'http://localhost:8000/analyze',
-    headers={'X-API-Key': 'authrix_YOUR_KEY_HERE'},
-    files={'file': open('video.mp4', 'rb')}
-)
-
-print(response.json())
-```
-
-### Extension: Add API Key
-
-Edit `extension/background.js`:
-
-```javascript
-const API_KEY = 'authrix_vx5b5HqXIEtAuhUJw92p-aU7Ucz34RtWHzpBCzbKqKE';
-
-async function submitBlob(chunks, mimeType, totalSize) {
-  // ... existing code ...
-  
-  const res = await fetch(`${API_BASE}/analyze`, {
-    method: 'POST',
-    headers: {
-      'X-API-Key': API_KEY  // Add this line
-    },
-    body: fd
-  });
-  
-  // ... rest of code ...
-}
-```
-
----
-
-## Pricing Page HTML
-
-Create `pricing.html`:
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Authrix Pricing</title>
-  <script src="https://js.stripe.com/v3/"></script>
-</head>
-<body>
-  <h1>Choose Your Plan</h1>
-  
-  <div class="pricing-cards">
-    <!-- Free -->
-    <div class="card">
-      <h2>Free</h2>
-      <p class="price">$0<span>/month</span></p>
-      <ul>
-        <li>10 analyses/month</li>
-        <li>Browser extension</li>
-        <li>2-min videos</li>
-      </ul>
-      <button onclick="window.location.href='/signup'">Get Started</button>
-    </div>
-    
-    <!-- Pro -->
-    <div class="card popular">
-      <h2>Pro</h2>
-      <p class="price">$9.99<span>/month</span></p>
-      <ul>
-        <li>100 analyses/month</li>
-        <li>10-min videos</li>
-        <li>API access</li>
-        <li>Email support</li>
-      </ul>
-      <button onclick="subscribe('pro_monthly')">Subscribe</button>
-    </div>
-    
-    <!-- Business -->
-    <div class="card">
-      <h2>Business</h2>
-      <p class="price">$49<span>/month</span></p>
-      <ul>
-        <li>1,000 analyses/month</li>
-        <li>Unlimited length</li>
-        <li>White-label reports</li>
-        <li>Priority support</li>
-      </ul>
-      <button onclick="subscribe('business_monthly')">Subscribe</button>
-    </div>
-  </div>
-  
-  <script>
-    async function subscribe(plan) {
-      const email = prompt('Enter your email:');
-      if (!email) return;
-      
-      const response = await fetch('http://localhost:8000/api/stripe/create-checkout-session', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email,
-          plan,
-          success_url: window.location.origin + '/success',
-          cancel_url: window.location.origin + '/pricing'
-        })
-      });
-      
-      const { checkout_url } = await response.json();
-      window.location.href = checkout_url;
-    }
-  </script>
-</body>
-</html>
-```
-
----
-
-## Go Live Checklist
-
-### Before Launch:
-- [ ] Switch to **Live mode** in Stripe Dashboard
-- [ ] Update `STRIPE_SECRET_KEY` with live key (`sk_live_...`)
-- [ ] Update webhook endpoint to production URL
-- [ ] Test with real card (will charge!)
-- [ ] Set up email notifications (welcome, payment failed, etc.)
-- [ ] Add terms of service & privacy policy
-- [ ] Set up customer support email
-
-### After Launch:
-- [ ] Monitor Stripe Dashboard for payments
-- [ ] Set up Stripe Radar for fraud prevention
-- [ ] Enable 3D Secure for EU customers
-- [ ] Set up tax collection (Stripe Tax)
-- [ ] Create refund policy
-
----
-
-## Revenue Tracking
-
-### Check Earnings:
-```bash
-# Get all API keys and their tiers
-python -c "from auth import load_api_keys; import json; print(json.dumps(load_api_keys(), indent=2))"
-
-# Check usage for a key
-python -c "from auth import check_usage_limit; print(check_usage_limit('authrix_YOUR_KEY'))"
-```
-
-### Stripe Dashboard:
-- **Revenue:** https://dashboard.stripe.com/revenue
-- **Customers:** https://dashboard.stripe.com/customers
-- **Subscriptions:** https://dashboard.stripe.com/subscriptions
-
----
-
-## Support & Resources
-
-- **Stripe Docs:** https://stripe.com/docs
-- **Stripe Testing:** https://stripe.com/docs/testing
-- **Webhook Testing:** https://stripe.com/docs/webhooks/test
-- **Stripe CLI:** https://stripe.com/docs/stripe-cli
-
----
-
-## Next Steps
-
-1. **Deploy to production** (Heroku, AWS, DigitalOcean)
-2. **Get a domain** (authrix.ai, authrix.com)
-3. **Set up SSL** (Let's Encrypt, Cloudflare)
-4. **Create landing page** (Webflow, Carrd, custom)
-5. **Launch on Product Hunt**
-6. **Start marketing!**
-
----
-
-**Questions?** Open an issue or email support@authrix.ai
-
-**Built with ❤️ by the Authrix Team**

backend/api_keys.json

@@ -1,15 +0,0 @@
-{
-  "c522f03ba084fc1150f9ab5bd78bf23e295dbf15cf75d232f3cf0dc3afad3641": {
-    "email": "demo@authrix.ai",
-    "tier": "pro",
-    "created_at": "2026-04-25T20:13:27.568274",
-    "active": true
-  },
-  "b35e8f8fb3db9ee0f6c4bc3b5a01112861de233b93610e5eeca87b75563ab030": {
-    "email": "owner@authrix.ai",
-    "tier": "owner",
-    "created_at": "2026-04-25T20:16:53.342074",
-    "active": true,
-    "unlimited": true
-  }
-}

backend/create_owner_key.py

@@ -1,27 +0,0 @@
-"""
-Create owner API key with unlimited access
-"""
-
-from auth import create_api_key, load_api_keys, save_api_keys, hash_key
-
-# Create owner key
-owner_email = "owner@authrix.ai"
-owner_key = create_api_key(owner_email, "owner")
-
-# Update to unlimited tier
-keys = load_api_keys()
-key_hash = hash_key(owner_key)
-keys[key_hash]["tier"] = "owner"
-keys[key_hash]["unlimited"] = True
-save_api_keys(keys)
-
-print("\n" + "="*60)
-print("🎉 OWNER API KEY CREATED")
-print("="*60)
-print(f"\n📧 Email: {owner_email}")
-print(f"🔑 API Key: {owner_key}")
-print(f"⭐ Tier: Owner (Unlimited)")
-print(f"\n💡 Add this to your requests:")
-print(f'   X-API-Key: {owner_key}')
-print(f"\n📝 Save this key securely - it won't be shown again!")
-print("="*60 + "\n")

backend/stripe_integration.py

@@ -1,264 +0,0 @@
-"""
-Authrix - Stripe Subscription Integration
-"""
-
-import os
-from typing import Optional
-import stripe
-from fastapi import APIRouter, HTTPException, Request
-from pydantic import BaseModel
-import logging
-
-from auth import create_api_key, load_api_keys, save_api_keys, hash_key
-
-logger = logging.getLogger(__name__)
-
-# Set your Stripe secret key (get from https://dashboard.stripe.com/apikeys)
-stripe.api_key = os.getenv("STRIPE_SECRET_KEY", "sk_test_YOUR_KEY_HERE")
-STRIPE_WEBHOOK_SECRET = os.getenv("STRIPE_WEBHOOK_SECRET", "whsec_YOUR_WEBHOOK_SECRET")
-
-router = APIRouter(prefix="/api/stripe", tags=["stripe"])
-
-# Stripe Price IDs (create these in Stripe Dashboard)
-PRICE_IDS = {
-    "pro_monthly": "price_PRO_MONTHLY_ID",      # $9.99/month
-    "pro_yearly": "price_PRO_YEARLY_ID",        # $99/year (2 months free)
-    "business_monthly": "price_BUSINESS_MONTHLY_ID",  # $49/month
-    "business_yearly": "price_BUSINESS_YEARLY_ID",    # $490/year
-}
-
-class CheckoutRequest(BaseModel):
-    email: str
-    plan: str  # "pro_monthly", "pro_yearly", "business_monthly", "business_yearly"
-    success_url: str
-    cancel_url: str
-
-class PortalRequest(BaseModel):
-    customer_id: str
-    return_url: str
-
-@router.post("/create-checkout-session")
-async def create_checkout_session(request: CheckoutRequest):
-    """
-    Create a Stripe Checkout session for subscription.
-    
-    Usage:
-    POST /api/stripe/create-checkout-session
-    {
-        "email": "user@example.com",
-        "plan": "pro_monthly",
-        "success_url": "https://authrix.ai/success",
-        "cancel_url": "https://authrix.ai/pricing"
-    }
-    """
-    try:
-        price_id = PRICE_IDS.get(request.plan)
-        if not price_id:
-            raise HTTPException(status_code=400, detail=f"Invalid plan: {request.plan}")
-        
-        # Create Stripe Checkout Session
-        session = stripe.checkout.Session.create(
-            customer_email=request.email,
-            payment_method_types=["card"],
-            line_items=[{
-                "price": price_id,
-                "quantity": 1,
-            }],
-            mode="subscription",
-            success_url=request.success_url + "?session_id={CHECKOUT_SESSION_ID}",
-            cancel_url=request.cancel_url,
-            metadata={
-                "email": request.email,
-                "plan": request.plan,
-            },
-        )
-        
-        return {"checkout_url": session.url, "session_id": session.id}
-    
-    except stripe.error.StripeError as e:
-        logger.error(f"Stripe error: {e}")
-        raise HTTPException(status_code=400, detail=str(e))
-
-@router.post("/create-portal-session")
-async def create_portal_session(request: PortalRequest):
-    """
-    Create a Stripe Customer Portal session for managing subscription.
-    
-    Usage:
-    POST /api/stripe/create-portal-session
-    {
-        "customer_id": "cus_XXXXX",
-        "return_url": "https://authrix.ai/account"
-    }
-    """
-    try:
-        session = stripe.billing_portal.Session.create(
-            customer=request.customer_id,
-            return_url=request.return_url,
-        )
-        return {"portal_url": session.url}
-    
-    except stripe.error.StripeError as e:
-        logger.error(f"Stripe error: {e}")
-        raise HTTPException(status_code=400, detail=str(e))
-
-@router.post("/webhook")
-async def stripe_webhook(request: Request):
-    """
-    Handle Stripe webhook events.
-    
-    Events handled:
-    - checkout.session.completed: Create API key when subscription starts
-    - customer.subscription.updated: Update tier when subscription changes
-    - customer.subscription.deleted: Downgrade to free when subscription cancels
-    """
-    payload = await request.body()
-    sig_header = request.headers.get("stripe-signature")
-    
-    try:
-        event = stripe.Webhook.construct_event(
-            payload, sig_header, STRIPE_WEBHOOK_SECRET
-        )
-    except ValueError:
-        raise HTTPException(status_code=400, detail="Invalid payload")
-    except stripe.error.SignatureVerificationError:
-        raise HTTPException(status_code=400, detail="Invalid signature")
-    
-    # Handle the event
-    if event["type"] == "checkout.session.completed":
-        session = event["data"]["object"]
-        await handle_checkout_completed(session)
-    
-    elif event["type"] == "customer.subscription.updated":
-        subscription = event["data"]["object"]
-        await handle_subscription_updated(subscription)
-    
-    elif event["type"] == "customer.subscription.deleted":
-        subscription = event["data"]["object"]
-        await handle_subscription_deleted(subscription)
-    
-    return {"status": "success"}
-
-async def handle_checkout_completed(session: dict):
-    """Create API key when checkout completes."""
-    email = session["metadata"]["email"]
-    plan = session["metadata"]["plan"]
-    customer_id = session["customer"]
-    subscription_id = session["subscription"]
-    
-    # Determine tier from plan
-    tier = "pro" if "pro" in plan else "business"
-    
-    # Create API key
-    api_key = create_api_key(email, tier)
-    
-    # Store Stripe customer ID and subscription ID
-    keys = load_api_keys()
-    key_hash = hash_key(api_key)
-    keys[key_hash]["stripe_customer_id"] = customer_id
-    keys[key_hash]["stripe_subscription_id"] = subscription_id
-    save_api_keys(keys)
-    
-    logger.info(f"Created {tier} API key for {email} (customer: {customer_id})")
-    
-    # TODO: Send welcome email with API key
-    # send_email(email, "Welcome to Authrix!", f"Your API key: {api_key}")
-
-async def handle_subscription_updated(subscription: dict):
-    """Update tier when subscription changes."""
-    customer_id = subscription["customer"]
-    status = subscription["status"]
-    
-    # Find API key by customer ID
-    keys = load_api_keys()
-    for key_hash, key_data in keys.items():
-        if key_data.get("stripe_customer_id") == customer_id:
-            if status == "active":
-                # Subscription is active - ensure tier is correct
-                logger.info(f"Subscription active for {key_data['email']}")
-            elif status in ("past_due", "unpaid"):
-                # Payment failed - send warning
-                logger.warning(f"Payment issue for {key_data['email']}")
-            break
-
-async def handle_subscription_deleted(subscription: dict):
-    """Downgrade to free when subscription cancels."""
-    customer_id = subscription["customer"]
-    
-    # Find API key and downgrade to free
-    keys = load_api_keys()
-    for key_hash, key_data in keys.items():
-        if key_data.get("stripe_customer_id") == customer_id:
-            keys[key_hash]["tier"] = "free"
-            keys[key_hash]["active"] = False  # Deactivate key
-            save_api_keys(keys)
-            logger.info(f"Downgraded {key_data['email']} to free tier")
-            break
-
-# Pricing plans for frontend
-PRICING_PLANS = {
-    "free": {
-        "name": "Free",
-        "price": 0,
-        "interval": "month",
-        "analyses": 10,
-        "features": [
-            "10 video analyses per month",
-            "Browser extension",
-            "Max 2-minute videos",
-            "Community support",
-        ],
-    },
-    "pro": {
-        "name": "Pro",
-        "price_monthly": 9.99,
-        "price_yearly": 99,
-        "interval": "month",
-        "analyses": 100,
-        "features": [
-            "100 analyses per month",
-            "Up to 10-minute videos",
-            "API access (100 calls/month)",
-            "Priority processing",
-            "Email support",
-            "Batch upload",
-        ],
-        "popular": True,
-    },
-    "business": {
-        "name": "Business",
-        "price_monthly": 49,
-        "price_yearly": 490,
-        "interval": "month",
-        "analyses": 1000,
-        "features": [
-            "1,000 analyses per month",
-            "Unlimited video length",
-            "API access (5,000 calls/month)",
-            "White-label reports",
-            "Slack/Teams integration",
-            "Priority support",
-            "Custom branding",
-        ],
-    },
-    "enterprise": {
-        "name": "Enterprise",
-        "price": "Custom",
-        "interval": "month",
-        "analyses": "Unlimited",
-        "features": [
-            "Unlimited analyses",
-            "On-premise deployment",
-            "Custom model training",
-            "SLA guarantees",
-            "Dedicated support",
-            "Multi-user accounts",
-        ],
-        "contact": True,
-    },
-}
-
-@router.get("/pricing")
-async def get_pricing():
-    """Get pricing plans."""
-    return PRICING_PLANS

frontend/.gitignore

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

frontend/README.md

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

frontend/eslint.config.js

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

frontend/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Deepfake Authenticator</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/package.json

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

frontend/script.js

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

frontend/src/App.css

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

frontend/src/App.jsx

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

frontend/src/App.tsx

@@ -1,183 +0,0 @@
-import { useEffect, Suspense, lazy } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { useStore } from './store'
-import { checkHealth } from './api'
-import UploadZone from './components/UploadZone'
-import ResultPanel from './components/ResultPanel'
-
-// Lazy-load the heavy 3D component
-const DeepfakeOrb = lazy(() => import('./components/DeepfakeOrb'))
-
-export default function App() {
-  const { state, result, error, reset } = useStore()
-  const verdict = result?.result ?? null
-
-  // Health check on mount
-  useEffect(() => {
-    const badge = document.getElementById('modelBadge')
-    checkHealth()
-      .then((d) => {
-        if (badge) {
-          badge.textContent = d.model.toUpperCase()
-          badge.style.color = '#00ff88bb'
-          badge.style.borderColor = '#00ff8844'
-        }
-      })
-      .catch(() => {
-        if (badge) {
-          badge.textContent = 'SERVER OFFLINE'
-          badge.style.color = '#ff3355bb'
-          badge.style.borderColor = '#ff335544'
-        }
-      })
-  }, [])
-
-  const showUpload = state === 'idle' || state === 'loading'
-  const showResult = state === 'result'
-  const showError  = state === 'error'
-
-  return (
-    <div className="min-h-screen text-white overflow-x-hidden" style={{ background: '#050508' }}>
-
-      {/* ── Sticky header ── */}
-      <header className="sticky top-0 z-50 border-b border-white/5"
-        style={{ background: 'rgba(5,5,8,0.85)', backdropFilter: 'blur(20px)' }}>
-        <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <motion.div
-              className="w-9 h-9 rounded-lg border border-[#00ff8855] flex items-center justify-center"
-              animate={{ boxShadow: ['0 0 8px #00ff8820', '0 0 20px #00ff8840', '0 0 8px #00ff8820'] }}
-              transition={{ duration: 2.5, repeat: Infinity }}
-            >
-              <svg width="18" height="18" fill="none" stroke="#00ff88" strokeWidth="1.5" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.964-7.178z"/>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-              </svg>
-            </motion.div>
-            <div>
-              <p className="text-sm font-bold tracking-widest" style={{ color: '#00ff88', textShadow: '0 0 12px #00ff8855' }}>
-                DEEPFAKE AUTHENTICATOR
-              </p>
-              <p className="text-[9px] tracking-widest text-white/30 font-mono">AI-POWERED VIDEO FORENSICS</p>
-            </div>
-          </div>
-          <div
-            id="modelBadge"
-            className="text-[10px] px-3 py-1.5 rounded-full border font-mono tracking-wider transition-all duration-500"
-            style={{ borderColor: 'rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.3)' }}
-          >
-            CONNECTING...
-          </div>
-        </div>
-      </header>
-
-      {/* ── Main layout ── */}
-      <main className="max-w-5xl mx-auto px-6 py-10">
-        <div className="flex flex-col lg:flex-row gap-10 items-start">
-
-          {/* ── Left: 3D orb + hero ── */}
-          <div className="w-full lg:w-80 flex-shrink-0 flex flex-col items-center gap-6 lg:sticky lg:top-24">
-            {/* 3D Orb */}
-            <div className="w-64 h-64 relative">
-              <Suspense fallback={
-                <div className="w-full h-full rounded-full border border-[#00ff8830] flex items-center justify-center">
-                  <div className="w-16 h-16 rounded-full border-2 border-[#00ff88] border-t-transparent animate-spin" />
-                </div>
-              }>
-                <DeepfakeOrb state={state} verdict={verdict} />
-              </Suspense>
-            </div>
-
-            {/* Hero text */}
-            <AnimatePresence mode="wait">
-              {showUpload && (
-                <motion.div
-                  key="hero"
-                  className="text-center"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                >
-                  <h1 className="text-2xl font-bold mb-2 leading-tight"
-                    style={{ background: 'linear-gradient(135deg, #fff 30%, #00ff88)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
-                    Is This Video Real?
-                  </h1>
-                  <p className="text-white/40 text-xs leading-relaxed max-w-xs">
-                    Dual ViT ensemble + Wav2Vec2 audio analysis detects facial manipulation and AI-generated voices.
-                  </p>
-                  {/* Stat pills */}
-                  <div className="flex flex-wrap gap-2 justify-center mt-4">
-                    {['2 ViT Models', '40 Frames', 'Audio AI', '< 20s'].map((s) => (
-                      <span key={s} className="text-[10px] px-2.5 py-1 rounded-full border border-white/8 text-white/40 bg-white/3">
-                        {s}
-                      </span>
-                    ))}
-                  </div>
-                </motion.div>
-              )}
-
-              {showResult && verdict && (
-                <motion.div
-                  key="verdict-summary"
-                  className="text-center"
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0 }}
-                >
-                  <p className="text-3xl font-bold tracking-widest mb-1"
-                    style={{ color: verdict === 'FAKE' ? '#ff3355' : '#00ff88', textShadow: `0 0 20px ${verdict === 'FAKE' ? '#ff335566' : '#00ff8866'}` }}>
-                    {verdict === 'FAKE' ? 'DEEPFAKE' : 'AUTHENTIC'}
-                  </p>
-                  <p className="text-white/30 text-xs font-mono">{result?.confidence}% confidence</p>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-
-          {/* ── Right: Upload / Result / Error ── */}
-          <div className="flex-1 min-w-0">
-            <AnimatePresence mode="wait">
-              {showUpload && (
-                <motion.div key="upload" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
-                  <UploadZone />
-                </motion.div>
-              )}
-
-              {showResult && (
-                <motion.div key="result" initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }}>
-                  <ResultPanel />
-                </motion.div>
-              )}
-
-              {showError && (
-                <motion.div
-                  key="error"
-                  className="rounded-2xl border border-red-500/20 bg-red-500/5 p-6"
-                  initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0 }}
-                >
-                  <div className="flex items-center gap-3 mb-3">
-                    <span className="text-xl">⚠️</span>
-                    <span className="text-red-400 font-bold text-sm tracking-wider uppercase">Analysis Failed</span>
-                  </div>
-                  <p className="text-white/50 text-sm leading-relaxed">{error}</p>
-                  <button
-                    onClick={reset}
-                    className="mt-4 text-xs text-white/30 hover:text-white transition-colors font-mono tracking-wider"
-                  >
-                    ↻ Try again
-                  </button>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </main>
-
-      <footer className="text-center py-8 text-[10px] text-white/15 font-mono tracking-widest border-t border-white/3">
-        DEEPFAKE AUTHENTICATOR · MEDIAPIPE + VIT ENSEMBLE + WAV2VEC2 · LOCAL INFERENCE
-      </footer>
-    </div>
-  )
-}

frontend/src/api.ts

@@ -1,20 +0,0 @@
-import type { AnalysisResult } from './store'
-
-const BASE = import.meta.env.DEV ? 'http://localhost:8000' : window.location.origin
-
-export async function analyzeVideo(file: File): Promise<AnalysisResult> {
-  const fd = new FormData()
-  fd.append('file', file)
-  const res = await fetch(`${BASE}/analyze`, { method: 'POST', body: fd })
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({}))
-    throw new Error((err as any).detail || `Server error ${res.status}`)
-  }
-  return res.json()
-}
-
-export async function checkHealth(): Promise<{ status: string; model: string; ready: boolean }> {
-  const res = await fetch(`${BASE}/health`)
-  if (!res.ok) throw new Error('Server offline')
-  return res.json()
-}

frontend/src/components/CyberCard.jsx

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

frontend/src/components/DeepfakeOrb.tsx

@@ -1,103 +0,0 @@
-import { useRef, useMemo } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
-import { Sphere, MeshDistortMaterial, Float, Stars } from '@react-three/drei'
-import * as THREE from 'three'
-import type { AppState, Verdict } from '../store'
-
-// ── Inner animated orb ────────────────────────────────────────────────────────
-function Orb({ state, verdict }: { state: AppState; verdict: Verdict }) {
-  const meshRef = useRef<THREE.Mesh>(null)
-  const ringRef = useRef<THREE.Mesh>(null)
-  const ring2Ref = useRef<THREE.Mesh>(null)
-
-  const isFake = verdict === 'FAKE'
-  const isReal = verdict === 'REAL'
-  const isLoading = state === 'loading'
-
-  const color = isFake ? '#ff3355' : isReal ? '#00ff88' : '#00aaff'
-  const emissive = isFake ? '#ff0033' : isReal ? '#00cc66' : '#0066ff'
-
-  useFrame((_, delta) => {
-    if (!meshRef.current) return
-    meshRef.current.rotation.y += delta * (isLoading ? 1.5 : 0.4)
-    meshRef.current.rotation.x += delta * (isLoading ? 0.8 : 0.15)
-    if (ringRef.current) ringRef.current.rotation.z += delta * 0.6
-    if (ring2Ref.current) ring2Ref.current.rotation.x += delta * 0.4
-  })
-
-  // Particle ring
-  const particles = useMemo(() => {
-    const count = 120
-    const positions = new Float32Array(count * 3)
-    for (let i = 0; i < count; i++) {
-      const angle = (i / count) * Math.PI * 2
-      const radius = 1.8 + Math.random() * 0.4
-      positions[i * 3]     = Math.cos(angle) * radius
-      positions[i * 3 + 1] = (Math.random() - 0.5) * 0.3
-      positions[i * 3 + 2] = Math.sin(angle) * radius
-    }
-    return positions
-  }, [])
-
-  return (
-    <group>
-      {/* Stars background */}
-      <Stars radius={8} depth={4} count={300} factor={1} fade speed={isLoading ? 3 : 0.5} />
-
-      {/* Main orb */}
-      <Float speed={isLoading ? 4 : 1.5} rotationIntensity={isLoading ? 1 : 0.3} floatIntensity={isLoading ? 1.5 : 0.5}>
-        <Sphere ref={meshRef} args={[1, 64, 64]}>
-          <MeshDistortMaterial
-            color={color}
-            emissive={emissive}
-            emissiveIntensity={isLoading ? 0.8 : 0.4}
-            distort={isLoading ? 0.6 : isFake ? 0.45 : 0.25}
-            speed={isLoading ? 4 : 2}
-            roughness={0.1}
-            metalness={0.8}
-            transparent
-            opacity={0.9}
-          />
-        </Sphere>
-      </Float>
-
-      {/* Orbit ring 1 */}
-      <mesh ref={ringRef} rotation={[Math.PI / 2, 0, 0]}>
-        <torusGeometry args={[1.6, 0.015, 8, 100]} />
-        <meshBasicMaterial color={color} transparent opacity={0.5} />
-      </mesh>
-
-      {/* Orbit ring 2 */}
-      <mesh ref={ring2Ref} rotation={[Math.PI / 3, Math.PI / 4, 0]}>
-        <torusGeometry args={[1.9, 0.008, 8, 100]} />
-        <meshBasicMaterial color={color} transparent opacity={0.25} />
-      </mesh>
-
-      {/* Particle ring */}
-      <points>
-        <bufferGeometry>
-          <bufferAttribute attach="attributes-position" args={[particles, 3]} />
-        </bufferGeometry>
-        <pointsMaterial color={color} size={0.025} transparent opacity={0.6} />
-      </points>
-
-      {/* Ambient + point lights */}
-      <ambientLight intensity={0.2} />
-      <pointLight position={[3, 3, 3]} intensity={2} color={color} />
-      <pointLight position={[-3, -3, -3]} intensity={1} color={emissive} />
-    </group>
-  )
-}
-
-// ── Exported canvas wrapper ───────────────────────────────────────────────────
-export default function DeepfakeOrb({ state, verdict }: { state: AppState; verdict: Verdict }) {
-  return (
-    <Canvas
-      camera={{ position: [0, 0, 4], fov: 50 }}
-      style={{ width: '100%', height: '100%' }}
-      gl={{ antialias: true, alpha: true }}
-    >
-      <Orb state={state} verdict={verdict} />
-    </Canvas>
-  )
-}

frontend/src/components/Loader.jsx

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

frontend/src/components/ResultPanel.tsx

@@ -1,346 +0,0 @@
-import { motion, AnimatePresence } from 'framer-motion'
-import { useStore } from '../store'
-import type { FramePoint, AudioResult } from '../store'
-
-// ── Animated confidence arc ───────────────────────────────────────────────────
-function ConfidenceArc({ pct, isFake }: { pct: number; isFake: boolean }) {
-  const r = 54
-  const circ = 2 * Math.PI * r
-  const half = circ / 2
-  const fill = (pct / 100) * half
-  const color = isFake ? '#ff3355' : '#00ff88'
-
-  return (
-    <div className="relative w-40 h-20 mx-auto">
-      <svg width="160" height="80" viewBox="0 0 160 80">
-        {/* Track */}
-        <path
-          d={`M 16 80 A ${r} ${r} 0 0 1 144 80`}
-          fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="10" strokeLinecap="round"
-        />
-        {/* Fill */}
-        <motion.path
-          d={`M 16 80 A ${r} ${r} 0 0 1 144 80`}
-          fill="none"
-          stroke={color}
-          strokeWidth="10"
-          strokeLinecap="round"
-          strokeDasharray={`${half} ${half}`}
-          initial={{ strokeDashoffset: half }}
-          animate={{ strokeDashoffset: half - fill }}
-          transition={{ duration: 1.4, ease: [0.22, 1, 0.36, 1] }}
-          style={{ filter: `drop-shadow(0 0 8px ${color})` }}
-        />
-      </svg>
-      <div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
-        <motion.span
-          className="text-2xl font-bold font-mono"
-          style={{ color }}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.5 }}
-        >
-          {pct}%
-        </motion.span>
-      </div>
-    </div>
-  )
-}
-
-// ── Frame timeline ────────────────────────────────────────────────────────────
-function Timeline({ frames, isFake }: { frames: FramePoint[]; isFake: boolean }) {
-  if (!frames.length) return (
-    <p className="text-white/30 text-xs font-mono text-center py-4">No per-frame data</p>
-  )
-
-  const color = isFake ? '#ff3355' : '#00ff88'
-  const maxH = 60
-
-  return (
-    <div className="flex items-end gap-1 overflow-x-auto pb-1" style={{ height: maxH + 24 + 'px', position: 'relative' }}>
-      {/* 60% threshold line */}
-      <div
-        className="absolute left-0 right-0 pointer-events-none"
-        style={{ bottom: 24 + maxH * 0.6, height: 1, background: 'rgba(255,170,0,0.35)' }}
-      >
-        <span className="absolute right-0 -top-4 text-[9px] text-yellow-400/60 font-mono">60%</span>
-      </div>
-
-      {frames.map((pt, i) => {
-        const h = Math.max(3, (pt.fake_pct / 100) * maxH)
-        const hot = pt.fake_pct >= 60
-        return (
-          <div key={i} className="group relative flex-shrink-0" style={{ width: 10, height: maxH }}>
-            {/* Tooltip */}
-            <div className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 bg-[#0a0a14] border border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity z-10 pointer-events-none">
-              F{pt.frame}: {pt.fake_pct}%
-            </div>
-            <motion.div
-              className="absolute bottom-0 w-full rounded-t"
-              style={{
-                background: hot
-                  ? `linear-gradient(to top, ${color}, rgba(255,255,255,0.3))`
-                  : 'rgba(255,255,255,0.1)',
-                boxShadow: hot ? `0 0 6px ${color}66` : 'none',
-              }}
-              initial={{ height: 0 }}
-              animate={{ height: h }}
-              transition={{ duration: 0.6, delay: i * 0.02, ease: [0.22, 1, 0.36, 1] }}
-            />
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// ── Audio card ────────────────────────────────────────────────────────────────
-function AudioCard({ audio }: { audio: AudioResult }) {
-  if (!audio?.available) return null
-
-  const isAI = audio.result === 'AI_VOICE'
-  const color = isAI ? '#ff3355' : '#00ff88'
-  const colorDim = isAI ? 'rgba(255,51,85,0.12)' : 'rgba(0,255,136,0.12)'
-
-  return (
-    <motion.div
-      className="rounded-2xl border p-5"
-      style={{ borderColor: `${color}33`, background: colorDim }}
-      initial={{ opacity: 0, y: 16 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: 0.4 }}
-    >
-      <div className="flex items-center gap-3 mb-4">
-        <div className="w-1 h-5 rounded-full" style={{ background: '#00aaff', boxShadow: '0 0 8px #00aaff' }} />
-        <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Voice Authenticity</span>
-      </div>
-
-      <div className="flex items-center gap-3 mb-4">
-        <span
-          className="px-3 py-1.5 rounded-full text-xs font-bold tracking-wider border"
-          style={{ color, borderColor: `${color}55`, background: `${color}12` }}
-        >
-          {isAI ? '🤖 AI VOICE DETECTED' : '🎙️ HUMAN VOICE'}
-        </span>
-        <span className="text-2xl font-bold font-mono ml-auto" style={{ color }}>
-          {audio.confidence}%
-        </span>
-      </div>
-
-      {/* Bar */}
-      <div className="h-2 rounded-full bg-white/5 overflow-hidden mb-4">
-        <motion.div
-          className="h-full rounded-full"
-          style={{
-            background: isAI ? 'linear-gradient(90deg,#880022,#ff3355)' : 'linear-gradient(90deg,#00aaff,#00ff88)',
-            boxShadow: `0 0 10px ${color}66`,
-          }}
-          initial={{ width: 0 }}
-          animate={{ width: `${audio.confidence}%` }}
-          transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
-        />
-      </div>
-
-      {/* Scores */}
-      <div className="grid grid-cols-2 gap-3 mb-4">
-        {[
-          { label: 'Wav2Vec2 Model', val: `${audio.model_score}%` },
-          { label: 'Signal Heuristics', val: `${audio.heuristic_score}%` },
-        ].map(({ label, val }) => (
-          <div key={label} className="rounded-xl bg-white/3 border border-white/5 p-3 text-center">
-            <p className="text-[10px] text-white/40 tracking-wider mb-1">{label}</p>
-            <p className="text-lg font-bold font-mono text-white">{val}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Details */}
-      <div className="space-y-2">
-        {audio.details.map((d, i) => (
-          <motion.div
-            key={i}
-            className="flex items-start gap-2.5 text-xs text-white/60 bg-white/2 rounded-lg px-3 py-2 border-l-2"
-            style={{ borderLeftColor: color }}
-            initial={{ opacity: 0, x: -8 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 0.5 + i * 0.07 }}
-          >
-            <span className="w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1" style={{ background: color, boxShadow: `0 0 6px ${color}` }} />
-            {d}
-          </motion.div>
-        ))}
-      </div>
-
-      {/* Features */}
-      {audio.features && Object.keys(audio.features).length > 0 && (
-        <div className="mt-4 pt-4 border-t border-white/5">
-          <p className="text-[10px] text-white/30 tracking-widest uppercase mb-2">Signal Features</p>
-          <div className="grid grid-cols-2 gap-2">
-            {Object.entries(audio.features).map(([k, v]) => (
-              <div key={k} className="flex justify-between text-[10px]">
-                <span className="text-white/30 capitalize">{k.replace(/_/g, ' ')}</span>
-                <span className="text-white/70 font-mono">{typeof v === 'number' ? v.toFixed(3) : v}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </motion.div>
-  )
-}
-
-// ── Main result panel ─────────────────────────────────────────────────────────
-export default function ResultPanel() {
-  const { result, reset } = useStore()
-  if (!result) return null
-
-  const isFake = result.result === 'FAKE'
-  const color = isFake ? '#ff3355' : '#00ff88'
-  const colorDim = isFake ? 'rgba(255,51,85,0.08)' : 'rgba(0,255,136,0.08)'
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        className="w-full max-w-2xl mx-auto space-y-4"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-      >
-        {/* Verdict card */}
-        <motion.div
-          className="rounded-2xl border-2 p-6"
-          style={{ borderColor: `${color}55`, background: colorDim, boxShadow: `0 0 50px ${color}15` }}
-          initial={{ scale: 0.95, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          transition={{ type: 'spring', stiffness: 200, damping: 20 }}
-        >
-          <div className="flex flex-wrap items-center gap-6">
-            {/* Badge */}
-            <div className="text-center flex-shrink-0">
-              <motion.div
-                className="w-24 h-24 rounded-full border-2 flex items-center justify-center mx-auto mb-3 text-4xl"
-                style={{ borderColor: color, boxShadow: `0 0 30px ${color}44`, background: `${color}10` }}
-                animate={{ boxShadow: [`0 0 20px ${color}30`, `0 0 50px ${color}60`, `0 0 20px ${color}30`] }}
-                transition={{ duration: 2, repeat: Infinity }}
-              >
-                {isFake ? '⚠️' : '✅'}
-              </motion.div>
-              <motion.p
-                className="text-2xl font-bold tracking-widest"
-                style={{ color, textShadow: `0 0 20px ${color}66` }}
-                animate={isFake ? { textShadow: [`0 0 10px ${color}44`, `0 0 25px ${color}88`, `0 0 10px ${color}44`] } : {}}
-                transition={{ duration: 2.5, repeat: Infinity }}
-              >
-                {isFake ? 'DEEPFAKE' : 'AUTHENTIC'}
-              </motion.p>
-              <p className="text-[10px] text-white/30 tracking-widest mt-1">VERDICT</p>
-            </div>
-
-            {/* Confidence */}
-            <div className="flex-1 min-w-[200px]">
-              <p className="text-[10px] text-white/40 tracking-widest uppercase mb-3">Confidence Score</p>
-              <ConfidenceArc pct={result.confidence} isFake={isFake} />
-
-              {/* Risk pill */}
-              <div className="mt-4 flex items-center justify-between bg-white/3 rounded-xl px-4 py-3 border border-white/5">
-                <span className="text-[10px] text-white/40 tracking-wider uppercase">Risk Level</span>
-                <span
-                  className="text-xs font-bold tracking-wider px-3 py-1 rounded-full border"
-                  style={{
-                    color: result.confidence < 35 ? '#00ff88' : result.confidence < 65 ? '#ffaa00' : '#ff3355',
-                    borderColor: result.confidence < 35 ? '#00ff8844' : result.confidence < 65 ? '#ffaa0044' : '#ff335544',
-                    background: result.confidence < 35 ? '#00ff8810' : result.confidence < 65 ? '#ffaa0010' : '#ff335510',
-                  }}
-                >
-                  {result.confidence < 35 ? 'LOW' : result.confidence < 65 ? 'MEDIUM' : result.confidence < 80 ? 'HIGH' : 'CRITICAL'}
-                </span>
-              </div>
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Insights + Meta */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {/* Insights */}
-          <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
-            <div className="flex items-center gap-2 mb-4">
-              <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
-              <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Analysis Insights</span>
-            </div>
-            <div className="space-y-2">
-              {result.details.map((d, i) => (
-                <motion.div
-                  key={i}
-                  className="flex items-start gap-2.5 text-xs text-white/60 bg-white/2 rounded-lg px-3 py-2.5 border-l-2"
-                  style={{ borderLeftColor: color }}
-                  initial={{ opacity: 0, x: -10 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.1 + i * 0.07 }}
-                >
-                  <span className="w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1" style={{ background: color }} />
-                  {d}
-                </motion.div>
-              ))}
-            </div>
-          </div>
-
-          {/* Metadata */}
-          <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
-            <div className="flex items-center gap-2 mb-4">
-              <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
-              <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Video Metadata</span>
-            </div>
-            <div className="space-y-2.5">
-              {[
-                ['Frames Analyzed', result.metadata.frames_analyzed],
-                ['Faces Detected', result.metadata.frames_with_faces],
-                ['Duration', `${result.metadata.video_duration_sec}s`],
-                ['FPS', result.metadata.video_fps],
-                ['Resolution', result.metadata.resolution],
-                ['Processing Time', `${result.processing_time_sec}s`],
-              ].map(([k, v]) => (
-                <div key={String(k)} className="flex justify-between items-center border-b border-white/4 pb-2 last:border-0 last:pb-0">
-                  <span className="text-[11px] text-white/40">{k}</span>
-                  <span className="text-[12px] font-bold font-mono text-white">{v ?? '—'}</span>
-                </div>
-              ))}
-            </div>
-            <div className="mt-4 pt-3 border-t border-white/5 flex items-center gap-2">
-              <div className="w-1.5 h-1.5 rounded-full bg-[#00ff88] shadow-[0_0_6px_#00ff88]" />
-              <span className="text-[10px] text-white/30 font-mono tracking-wider">ViT Ensemble · 2 Models</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Frame Timeline */}
-        <div className="rounded-2xl border border-white/6 bg-white/2 p-5">
-          <div className="flex items-center gap-2 mb-4">
-            <div className="w-0.5 h-4 rounded-full bg-[#00aaff] shadow-[0_0_8px_#00aaff]" />
-            <span className="text-[10px] font-bold tracking-widest text-[#00aaff] uppercase">Frame Analysis Timeline</span>
-            <span className="text-[10px] text-white/20 font-mono ml-1">— {result.frame_timeline.length} frames</span>
-          </div>
-          <Timeline frames={result.frame_timeline} isFake={isFake} />
-          <div className="flex justify-between mt-2">
-            <span className="text-[10px] text-white/20 font-mono">Frame 0</span>
-            <span className="text-[10px] text-white/20 font-mono">Frame {result.frame_timeline.length}</span>
-          </div>
-        </div>
-
-        {/* Audio */}
-        {result.audio && <AudioCard audio={result.audio} />}
-
-        {/* Reset */}
-        <div className="text-center pt-2">
-          <motion.button
-            onClick={reset}
-            className="px-6 py-2.5 text-xs font-bold tracking-widest uppercase text-white/40 border border-white/10 rounded-xl hover:text-[#00ff88] hover:border-[#00ff8840] hover:bg-[#00ff8808] transition-all duration-200"
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
-          >
-            ↻ &nbsp;Analyze Another Video
-          </motion.button>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  )
-}

frontend/src/components/UploadZone.tsx

@@ -1,190 +0,0 @@
-import { useRef, useState } from 'react'
-import { motion } from 'framer-motion'
-import { useStore } from '../store'
-import { analyzeVideo } from '../api'
-
-const AGENTS = [
-  { icon: '🎬', label: 'Frame Extractor',  sub: 'Sampling keyframes' },
-  { icon: '👤', label: 'Face Detector',    sub: 'Isolating regions' },
-  { icon: '🧠', label: 'ViT Ensemble',     sub: 'Neural inference' },
-  { icon: '📊', label: 'Report Builder',   sub: 'Compiling results' },
-]
-
-function fmtBytes(b: number) {
-  if (b < 1024) return `${b} B`
-  if (b < 1048576) return `${(b / 1024).toFixed(1)} KB`
-  return `${(b / 1048576).toFixed(1)} MB`
-}
-
-export default function UploadZone() {
-  const { file, state, setFile, setState, setResult, setError, setAgentStep, reset } = useStore()
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [dragging, setDragging] = useState(false)
-
-  const isLoading = state === 'loading'
-
-  function applyFile(f: File) {
-    if (f.type.startsWith('video/')) setFile(f)
-    else setError('Please select a valid video file (MP4, AVI, MOV, MKV, WebM).')
-  }
-
-  async function handleAnalyze() {
-    if (!file) return
-    setState('loading')
-    setAgentStep(0)
-
-    // Simulate agent steps
-    const delays = [0, 1800, 4200, 7500]
-    delays.forEach((d, i) => setTimeout(() => setAgentStep(i), d))
-
-    try {
-      const result = await analyzeVideo(file)
-      setResult(result)
-    } catch (e: any) {
-      setError(e.message || 'Analysis failed')
-    }
-  }
-
-  return (
-    <div className="w-full max-w-xl mx-auto flex flex-col gap-5">
-      {/* Drop zone */}
-      <motion.div
-        className={`relative rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-300 overflow-hidden
-          ${dragging ? 'border-[#00ff88] bg-[#00ff8808] shadow-[0_0_40px_#00ff8820]' : 'border-[#00ff8830] hover:border-[#00ff8866] hover:bg-[#00ff8806]'}
-          ${file ? 'py-6 px-8' : 'py-12 px-8'}`}
-        onClick={() => !file && inputRef.current?.click()}
-        onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
-        onDragLeave={() => setDragging(false)}
-        onDrop={(e) => {
-          e.preventDefault(); setDragging(false)
-          const f = e.dataTransfer.files[0]
-          if (f) applyFile(f)
-        }}
-        whileHover={{ scale: file ? 1 : 1.01 }}
-        whileTap={{ scale: 0.99 }}
-      >
-        <input
-          ref={inputRef}
-          type="file"
-          accept="video/*"
-          className="hidden"
-          onChange={(e) => e.target.files?.[0] && applyFile(e.target.files[0])}
-        />
-
-        {!file ? (
-          <motion.div className="text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-            {/* Orbit upload icon */}
-            <div className="relative w-20 h-20 mx-auto mb-5">
-              <motion.div
-                className="absolute inset-0 rounded-full border border-dashed border-[#00ff8840]"
-                animate={{ rotate: 360 }}
-                transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}
-              />
-              <motion.div
-                className="absolute inset-3 rounded-full border border-[#00ff8820]"
-                animate={{ rotate: -360 }}
-                transition={{ duration: 5, repeat: Infinity, ease: 'linear' }}
-              />
-              <div className="absolute inset-0 flex items-center justify-center">
-                <svg width="28" height="28" fill="none" stroke="#00ff8899" strokeWidth="1.5" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
-                </svg>
-              </div>
-            </div>
-            <p className="text-white/80 font-semibold text-base mb-1">Drop video for forensic analysis</p>
-            <p className="text-white/40 text-sm">Drag & drop or click to browse</p>
-            <p className="text-white/20 text-xs mt-3 font-mono">MP4 · AVI · MOV · MKV · WebM — Max 100MB</p>
-          </motion.div>
-        ) : (
-          <motion.div
-            className="flex items-center gap-4"
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-          >
-            <div className="w-12 h-12 rounded-xl bg-[#00ff8812] border border-[#00ff8830] flex items-center justify-center flex-shrink-0 shadow-[0_0_20px_#00ff8820]">
-              <svg width="22" height="22" fill="none" stroke="#00ff88" strokeWidth="1.5" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
-              </svg>
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-white font-semibold text-sm truncate">{file.name}</p>
-              <p className="text-white/40 text-xs mt-0.5 font-mono">{fmtBytes(file.size)}</p>
-            </div>
-            <button
-              onClick={(e) => { e.stopPropagation(); reset() }}
-              className="p-2 text-white/30 hover:text-red-400 transition-colors rounded-lg hover:bg-red-400/10"
-            >
-              <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
-              </svg>
-            </button>
-          </motion.div>
-        )}
-      </motion.div>
-
-      {/* Analyze button */}
-      <motion.button
-        disabled={!file || isLoading}
-        onClick={handleAnalyze}
-        className={`w-full py-4 rounded-xl font-bold text-sm tracking-widest uppercase transition-all duration-300 relative overflow-hidden
-          ${file && !isLoading
-            ? 'bg-gradient-to-r from-[#00ff88] to-[#00cc66] text-[#050508] shadow-[0_0_30px_#00ff8840] cursor-pointer'
-            : 'bg-white/5 text-white/20 cursor-not-allowed border border-white/10'}`}
-        whileHover={file && !isLoading ? { scale: 1.02, boxShadow: '0 0 50px #00ff8860' } : {}}
-        whileTap={file && !isLoading ? { scale: 0.98 } : {}}
-      >
-        {/* Shimmer */}
-        {file && !isLoading && (
-          <motion.div
-            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12"
-            animate={{ x: ['-100%', '200%'] }}
-            transition={{ duration: 2.5, repeat: Infinity, ease: 'linear' }}
-          />
-        )}
-        <span className="relative z-10">
-          {isLoading ? '⏳ Analyzing...' : '▶  Analyze Video'}
-        </span>
-      </motion.button>
-
-      {/* Agent pipeline (loading state) */}
-      {isLoading && <AgentPipeline />}
-    </div>
-  )
-}
-
-function AgentPipeline() {
-  const agentStep = useStore((s) => s.agentStep)
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 12 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="grid grid-cols-2 gap-3"
-    >
-      {AGENTS.map((agent, i) => {
-        const active = i <= agentStep
-        const current = i === agentStep
-        return (
-          <motion.div
-            key={i}
-            className={`rounded-xl p-3 border transition-all duration-500 flex items-center gap-3
-              ${active
-                ? 'border-[#00ff8844] bg-[#00ff8808] shadow-[0_0_15px_#00ff8815]'
-                : 'border-white/5 bg-white/2'}`}
-            animate={current ? { scale: [1, 1.02, 1] } : {}}
-            transition={{ duration: 0.6, repeat: current ? Infinity : 0 }}
-          >
-            <div className={`w-2 h-2 rounded-full flex-shrink-0 transition-all duration-500
-              ${active ? 'bg-[#00ff88] shadow-[0_0_8px_#00ff88]' : 'bg-white/15'}`} />
-            <div>
-              <p className="text-xs font-semibold text-white/80">{agent.label}</p>
-              <p className={`text-[10px] font-mono transition-colors duration-300 ${active ? 'text-[#00ff88]' : 'text-white/30'}`}>
-                {active ? (current ? agent.sub : 'Done ✓') : 'Waiting...'}
-              </p>
-            </div>
-          </motion.div>
-        )
-      })}
-    </motion.div>
-  )
-}

frontend/src/index.css

@@ -1,43 +0,0 @@
-@import "tailwindcss";
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  background: #050508;
-  color: #e2e8f0;
-  font-family: 'Space Grotesk', 'Inter', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-
-::-webkit-scrollbar { width: 4px; height: 4px; }
-::-webkit-scrollbar-track { background: #050508; }
-::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.2); border-radius: 4px; }
-
-/* Animated grid background */
-body::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background-image:
-    linear-gradient(rgba(0,255,136,0.025) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(0,255,136,0.025) 1px, transparent 1px);
-  background-size: 60px 60px;
-}
-
-/* Radial glow at top */
-body::after {
-  content: '';
-  position: fixed;
-  top: -200px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: 600px;
-  background: radial-gradient(ellipse, rgba(0,255,136,0.06) 0%, transparent 70%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-main, header, footer { position: relative; z-index: 1; }

frontend/src/main.jsx

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

frontend/src/main.tsx

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

frontend/src/store.ts

@@ -1,59 +0,0 @@
-import { create } from 'zustand'
-
-export type AppState = 'idle' | 'loading' | 'result' | 'error'
-export type Verdict = 'FAKE' | 'REAL' | null
-
-export interface FramePoint { frame: number; fake_pct: number }
-export interface AudioResult {
-  available: boolean
-  result: string
-  confidence: number
-  fake_probability: number
-  model_score: number
-  heuristic_score: number
-  details: string[]
-  features: Record<string, number>
-}
-export interface AnalysisResult {
-  result: 'FAKE' | 'REAL'
-  confidence: number
-  details: string[]
-  frame_timeline: FramePoint[]
-  metadata: {
-    frames_analyzed: number
-    frames_with_faces: number
-    video_duration_sec: number
-    video_fps: number
-    resolution: string
-  }
-  processing_time_sec: number
-  audio: AudioResult
-}
-
-interface Store {
-  state: AppState
-  file: File | null
-  result: AnalysisResult | null
-  error: string | null
-  agentStep: number
-  setState: (s: AppState) => void
-  setFile: (f: File | null) => void
-  setResult: (r: AnalysisResult) => void
-  setError: (e: string) => void
-  setAgentStep: (n: number) => void
-  reset: () => void
-}
-
-export const useStore = create<Store>((set) => ({
-  state: 'idle',
-  file: null,
-  result: null,
-  error: null,
-  agentStep: -1,
-  setState: (state) => set({ state }),
-  setFile: (file) => set({ file }),
-  setResult: (result) => set({ result, state: 'result' }),
-  setError: (error) => set({ error, state: 'error' }),
-  setAgentStep: (agentStep) => set({ agentStep }),
-  reset: () => set({ state: 'idle', file: null, result: null, error: null, agentStep: -1 }),
-}))

frontend/vite.config.js

@@ -1,18 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: 5173,
-    proxy: {
-      '/analyze': 'http://localhost:8000',
-      '/health':  'http://localhost:8000',
-    },
-  },
-  build: {
-    outDir: '../frontend-dist',
-    emptyOutDir: true,
-  },
-})

render.yaml

@@ -1,12 +0,0 @@
-services:
-  - type: web
-    name: authrix-api
-    runtime: docker
-    dockerfilePath: ./Dockerfile
-    plan: standard
-    healthCheckPath: /health
-    envVars:
-      - key: PORT
-        value: 8000
-      - key: PYTHONUNBUFFERED
-        value: "1"

setup.bat

@@ -1,44 +0,0 @@
-@echo off
-echo.
-echo ==========================================
-echo    DEEPFAKE AUTHENTICATOR -- SETUP
-echo ==========================================
-echo.
-
-where python >nul 2>&1
-if %errorlevel% neq 0 (
-    echo ERROR: Python not found. Please install Python 3.9+
-    pause
-    exit /b 1
-)
-
-echo Creating virtual environment...
-python -m venv venv
-call venv\Scripts\activate.bat
-
-echo Upgrading pip...
-python -m pip install --upgrade pip -q
-
-echo Installing core dependencies...
-pip install fastapi==0.111.0 "uvicorn[standard]==0.29.0" python-multipart==0.0.9 -q
-pip install opencv-python==4.9.0.80 mediapipe==0.10.14 numpy==1.26.4 Pillow==10.3.0 -q
-
-echo Installing HuggingFace dependencies (optional)...
-pip install transformers==4.41.0 torch==2.3.0 --index-url https://download.pytorch.org/whl/cpu -q
-if %errorlevel% neq 0 (
-    echo WARNING: torch/transformers install failed -- will use heuristic fallback
-)
-
-echo.
-echo ==========================================
-echo          SETUP COMPLETE
-echo ==========================================
-echo.
-echo To start the server:
-echo   venv\Scripts\activate.bat
-echo   cd backend
-echo   python main.py
-echo.
-echo Then open: http://localhost:8000
-echo.
-pause

setup.sh

@@ -1,55 +0,0 @@
-#!/bin/bash
-# Deepfake Authenticator — Setup Script
-
-set -e
-
-echo ""
-echo "╔══════════════════════════════════════════╗"
-echo "║     DEEPFAKE AUTHENTICATOR — SETUP       ║"
-echo "╚══════════════════════════════════════════╝"
-echo ""
-
-# Check Python
-if ! command -v python3 &>/dev/null; then
-  echo "❌ Python 3 not found. Please install Python 3.9+"
-  exit 1
-fi
-
-PYTHON_VERSION=$(python3 -c "import sys; print(f'{sys.version_info.major}.{sys.version_info.minor}')")
-echo "✅ Python $PYTHON_VERSION detected"
-
-# Create virtual environment
-echo ""
-echo "📦 Creating virtual environment..."
-python3 -m venv venv
-source venv/bin/activate
-
-# Upgrade pip
-pip install --upgrade pip -q
-
-# Install dependencies
-echo ""
-echo "📥 Installing dependencies..."
-echo "   (This may take a few minutes for torch/transformers)"
-echo ""
-
-pip install fastapi==0.111.0 uvicorn[standard]==0.29.0 python-multipart==0.0.9 -q
-pip install opencv-python==4.9.0.80 mediapipe==0.10.14 numpy==1.26.4 Pillow==10.3.0 -q
-
-echo ""
-echo "🤖 Installing HuggingFace model dependencies..."
-echo "   (Optional — skip with Ctrl+C if you want heuristic-only mode)"
-pip install transformers==4.41.0 torch==2.3.0 --index-url https://download.pytorch.org/whl/cpu -q || \
-  echo "⚠️  torch/transformers install failed — will use heuristic fallback"
-
-echo ""
-echo "╔══════════════════════════════════════════╗"
-echo "║           SETUP COMPLETE ✅              ║"
-echo "╚══════════════════════════════════════════╝"
-echo ""
-echo "To start the server:"
-echo "  source venv/bin/activate"
-echo "  cd backend && python main.py"
-echo ""
-echo "Then open: http://localhost:8000"
-echo ""

start.bat

@@ -1,45 +0,0 @@
-@echo off
-title Deepfake Authenticator
-color 0A
-
-echo.
-echo  ============================================
-echo    DEEPFAKE AUTHENTICATOR - Starting...
-echo  ============================================
-echo.
-
-:: Check if venv exists
-if not exist "venv\Scripts\activate.bat" (
-    echo  [!] Virtual environment not found.
-    echo  [*] Run setup.bat first to install dependencies.
-    echo.
-    pause
-    exit /b 1
-)
-
-:: Activate venv
-call venv\Scripts\activate.bat
-
-:: Kill anything on port 8000
-echo  [*] Clearing port 8000...
-for /f "tokens=5" %%a in ('netstat -aon ^| findstr ":8000 " 2^>nul') do (
-    taskkill /PID %%a /F >nul 2>&1
-)
-
-echo  [*] Starting server...
-echo  [*] Open your browser at: http://localhost:8000
-echo.
-echo  Press Ctrl+C to stop the server.
-echo  ============================================
-echo.
-
-:: Open browser after 5 seconds in background
-start /b cmd /c "timeout /t 8 /nobreak >nul && start http://localhost:8000"
-
-:: Start server
-cd backend
-python -m uvicorn main:app --host 0.0.0.0 --port 8000 --log-level warning
-
-echo.
-echo  Server stopped.
-pause

start.sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-clear
-echo ""
-echo " ============================================"
-echo "   DEEPFAKE AUTHENTICATOR - Starting..."
-echo " ============================================"
-echo ""
-
-# Check venv
-if [ ! -f "venv/bin/activate" ]; then
-    echo " [!] Virtual environment not found."
-    echo " [*] Run ./setup.sh first to install dependencies."
-    echo ""
-    exit 1
-fi
-
-source venv/bin/activate
-
-# Kill anything on port 8000
-echo " [*] Clearing port 8000..."
-lsof -ti:8000 | xargs kill -9 2>/dev/null
-
-echo " [*] Starting server..."
-echo " [*] Open your browser at: http://localhost:8000"
-echo ""
-echo " Press Ctrl+C to stop."
-echo " ============================================"
-echo ""
-
-# Open browser after 8s in background
-(sleep 8 && open "http://localhost:8000" 2>/dev/null || xdg-open "http://localhost:8000" 2>/dev/null) &
-
-cd backend
-python -m uvicorn main:app --host 0.0.0.0 --port 8000 --log-level warning