🕵️‍♂️ Deepfake Detector

Open in Spaces

 ╭─────────────────────────────────────────────────────────────╮
 │ 🎯 Detect deepfakes with cutting-edge AI technology │
 │ 🎨 Stunning 3D animated UI with glassmorphism design │
 │ ⚡ Real-time monitoring & comprehensive diagnostics │
 ╰─────────────────────────────────────────────────────────────╯

✨ Features

🚀 Quick Start

📋 Prerequisites

🔧 Backend Setup

# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 1: Clone the repository │
# └─────────────────────────────────────────────────────────────┘
git clone <repository-url>
cd deepfake-defender/backend
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 2: Create virtual environment │
# └─────────────────────────────────────────────────────────────┘
python -m venv venv
venv\Scripts\activate # Windows
# source venv/bin/activate # Linux/Mac
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 3: Install dependencies │
# └─────────────────────────────────────────────────────────────┘
pip install -r requirements.txt
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 4: Configure environment variables │
# └─────────────────────────────────────────────────────────────┘
echo "HUGGINGFACE_TOKEN=your_token_here" > .env
echo "MODEL_NAME=Naman712/Deep-fake-detection" >> .env
echo "FLASK_DEBUG=1" >> .env
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 5: Test model loading (optional but recommended) │
# └─────────────────────────────────────────────────────────────┘
python debug_hf_model.py
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 6: Start the backend server │
# └─────────────────────────────────────────────────────────────┘
python app.py

🎨 Frontend Setup

# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 1: Navigate to frontend directory │
# └─────────────────────────────────────────────────────────────┘
cd ../frontend
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 2: Install Node.js dependencies │
# └─────────────────────────────────────────────────────────────┘
npm install
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 3: Start development server │
# └─────────────────────────────────────────────────────────────┘
npm start
# ┌─────────────────────────────────────────────────────────────┐
# │ OPTIONAL: Run tests │
# └─────────────────────────────────────────────────────────────┘
npm test
# ┌─────────────────────────────────────────────────────────────┐
# │ OPTIONAL: Build for production │
# └─────────────────────────────────────────────────────────────┘
npm run build

🎯 Complete User Flow

1️⃣ Application Launch & Initialization

2️⃣ Main Interface (/) - Primary User Experience

3️⃣ Diagnostics Page (/status) - Advanced Monitoring

4️⃣ Video Analysis Workflow

5️⃣ Error States & Recovery

6️⃣ Responsive Design Breakpoints

🔧 Configuration

🔐 Environment Variables (backend/.env)

# Required: Your Hugging Face authentication token
HUGGINGFACE_TOKEN=your_token_here_replace_this
# Optional: Model configuration
MODEL_NAME=Naman712/Deep-fake-detection
FLASK_DEBUG=1
SECRET_KEY=your-secret-key

🎫 Getting Your Hugging Face Token

📦 Dependencies & Packages

🐍 Backend Dependencies (requirements.txt)

# Core Flask Framework
flask>=2.3.0 # Web framework
flask-cors>=4.0.0 # Cross-origin resource sharing
# Machine Learning & AI
torch>=2.6.0 # PyTorch deep learning framework
transformers>=4.40.0 # Hugging Face transformers
huggingface-hub>=0.17.0 # Model hub integration
opencv-python>=4.8.0 # Computer vision library
pillow>=10.0.0 # Image processing
numpy>=1.24.0 # Numerical computing
# Utilities
python-dotenv>=1.0.0 # Environment variable management

⚛️ Frontend Dependencies (package.json)

{
 "dependencies": {
 // Core React Framework
 "react": "^19.1.1",
 "react-dom": "^19.1.1",
 "react-router-dom": "^7.8.0",
 "react-scripts": "5.0.1",
 
 // 3D Graphics & Animation
 "@react-three/fiber": "^9.3.0", // React Three.js renderer
 "@react-three/drei": "^10.6.1", // Three.js helpers
 "three": "^0.179.1", // 3D graphics library
 
 // Styling & UI
 "styled-components": "^6.1.19", // CSS-in-JS styling
 
 // HTTP & API
 "axios": "^1.11.0", // HTTP client
 
 // TypeScript Support
 "typescript": "^4.9.5",
 "@types/react": "^19.1.9",
 "@types/react-dom": "^19.1.7",
 "@types/react-router-dom": "^5.3.3",
 "@types/styled-components": "^5.1.34",
 
 // Testing Framework
 "@testing-library/react": "^16.3.0",
 "@testing-library/jest-dom": "^6.6.4",
 "@testing-library/dom": "^10.4.1",
 "@testing-library/user-event": "^14.6.1",
 "msw": "^2.10.4" // Mock service worker
 }
}

📁 Project Structure

🌳 deepfake-defender/
├── 🐍 backend/ # Flask API Server
│ ├── 📄 app.py # Main Flask application with all routes
│ ├── 🔍 debug_hf_model.py # Model diagnostics and testing script
│ ├── 🧠 correct_model.py # Custom model architecture definitions
│ ├── ⚙️ simple_processor.py # Video frame processing utilities
│ ├── 📋 requirements.txt # Python dependencies list
│ ├── 🔐 .env # Environment variables (create this)
│ ├── 💾 model_cache/ # Cached Hugging Face model files
│ └── 📦 venv/ # Python virtual environment
│
├── ⚛️ frontend/ # React Application
│ ├── 📂 src/
│ │ ├── 🎯 App.tsx # Main app with routing and health checks
│ │ ├── 🧪 App.test.tsx # Comprehensive Jest tests
│ │ ├── 🎨 App.css # Global styles and fonts
│ │ ├── 🚀 index.tsx # React entry point
│ │ └── 📂 components/
│ │ ├── 📊 StatusPage.tsx # Diagnostics & monitoring interface
│ │ ├── 🌌 BackgroundManager.tsx # 3D background effect manager
│ │ ├── ✨ Beams.tsx # Complex 3D beam animations
│ │ ├── 🌟 SimpleBeams.tsx # Fallback 2D beam animations
│ │ ├── 💅 Beams.css # Beam-specific styles
│ │ └── ⏳ Loader.tsx # Loading animation component
│ ├── 📂 public/
│ │ ├── 📄 index.html # HTML template
│ │ ├── 🖼️ bg.jpg # Fallback background image (optional)
│ │ └── 🎨 favicon.ico # App icon
│ ├── 📋 package.json # Node.js dependencies and scripts
│ └── 📦 node_modules/ # Installed npm packages
│
├── 📖 README.md # This comprehensive documentation
└── 🚫 .gitignore # Git ignore patterns

🤖 AI Model Details

🧠 Model Information

🔄 Model Pipeline

╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ 1️⃣ FRAME EXTRACTION ║
║ ├─► Extract evenly distributed frames from video ║
║ └─► Select up to 20 representative frames ║
║ ║
║ 2️⃣ PREPROCESSING ║
║ ├─► Resize frames to 112x112 pixels ║
║ ├─► Normalize pixel values ║
║ └─► Convert to tensor format ║
║ ║
║ 3️⃣ SEQUENCE PROCESSING ║
║ ├─► Feed 20-frame sequence to ResNeXt50 ║
║ ├─► Extract spatial features ║
║ └─► Process temporal patterns with LSTM ║
║ ║
║ 4️⃣ CLASSIFICATION ║
║ ├─► Binary classification layer ║
║ ├─► Softmax activation ║
║ └─► Generate confidence scores ║
║ ║
║ 5️⃣ RESULT AGGREGATION ║
║ ├─► Calculate final prediction ║
║ ├─► Determine deepfake probability ║
║ └─► Return detailed analysis ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝

🌐 API Endpoints

🔙 Backend Routes

🎨 Frontend Routes

🎨 UI/UX Features & Styling

🎭 Design System

┌─────────────────────────────────────────────────────────────────────┐
│ 🪟 GLASSMORPHISM │
├─────────────────────────────────────────────────────────────────────┤
│ • Modern translucent cards with backdrop blur effects │
│ • Semi-transparent backgrounds with frosted glass appearance │
│ • Layered depth with shadow and border effects │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ 🌌 3D BACKGROUND │
├─────────────────────────────────────────────────────────────────────┤
│ • Customizable animated beam system │
│ • React Three Fiber powered WebGL graphics │
│ • Automatic fallback to 2D animations │
│ • Configurable speed, intensity, and rotation │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ ✍️ TYPOGRAPHY │
├─────────────────────────────────────────────────────────────────────┤
│ • Headers: "Advent Pro" with optical sizing │
│ • Body: "Ubuntu" for optimal readability │
│ • Smooth font rendering with antialiasing │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ 🎨 COLOR PALETTE │
├─────────────────────────────────────────────────────────────────────┤
│ • Success: #22c55e (Vibrant Green) │
│ • Error: #ef4444 (Bold Red) │
│ • Info: #3b82f6 (Bright Blue) │
│ • Background: Dynamic gradients with transparency │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ 📱 RESPONSIVE BREAKPOINTS │
├─────────────────────────────────────────────────────────────────────┤
│ • Mobile: < 768px (Single column, touch-optimized) │
│ • Tablet: 768px - 1024px (Stacked layout) │
│ • Desktop: > 1024px (Full two-column layout) │
└─────────────────────────────────────────────────────────────────────┘

3D Background Configuration

// Current beam settings (customizable)
beamWidth: 3, // Beam thickness
beamHeight: 30, // Beam length
beamCount: 20, // Number of beams
speed: 2, // Animation speed
noiseIntensity: 1.75, // Visual noise effect
scale: 0.2, // Noise scale
rotation: 30 // Beam rotation angle

Animation System

Accessibility Features

🔍 Troubleshooting

🚨 Common Issues

❌ Backend Won't Start

# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 1: Check Python version │
# └─────────────────────────────────────────────────────────────┘
python --version # Should be 3.8+
# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 2: Verify dependencies │
# └─────────────────────────────────────────────────────────────┘
pip install -r requirements.txt
# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 3: Check Hugging Face token │
# └─────────────────────────────────────────────────────────────┘
python -c "import os; from dotenv import load_dotenv; load_dotenv(); print(os.getenv('HUGGINGFACE_TOKEN'))"

⚠️ Model Loading Fails

┌──────────────────────────────────────────────────────────────┐
│ ✓ Verify Hugging Face token is valid │
│ ✓ Check internet connection │
│ ✓ Run diagnostics: python debug_hf_model.py │
│ ✓ Ensure 4GB+ RAM available │
│ ✓ Check disk space for model cache │
└──────────────────────────────────────────────────────────────┘

🔴 Frontend Build Errors

# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 1: Clear cache and reinstall │
# └─────────────────────────────────────────────────────────────┘
rm -rf node_modules package-lock.json
npm install
# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 2: Check Node.js version │
# └─────────────────────────────────────────────────────────────┘
node --version # Should be 16+
# ┌─────────────────────────────────────────────────────────────┐
# │ SOLUTION 3: Try with legacy peer deps │
# └─────────────────────────────────────────────────────────────┘
npm install --legacy-peer-deps

🔌 Connection Issues

┌──────────────────────────────────────────────────────────────┐
│ ✓ Ensure backend is running on port 5000 │
│ ✓ Check CORS configuration in app.py │
│ ✓ Verify firewall settings │
│ ✓ Test with: curl http://localhost:5000/health │
│ ✓ Check if port 5000 is already in use │
└──────────────────────────────────────────────────────────────┘

🚀 Deployment

🔧 Development Mode

# ┌─────────────────────────────────────────────────────────────┐
# │ TERMINAL 1: Start Backend Server │
# └─────────────────────────────────────────────────────────────┘
cd backend
python app.py
# ✅ Backend running on http://localhost:5000
# ┌─────────────────────────────────────────────────────────────┐
# │ TERMINAL 2: Start Frontend Development Server │
# └─────────────────────────────────────────────────────────────┘
cd frontend
npm start
# ✅ Frontend running on http://localhost:3000

🏭 Production Build

# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 1: Build optimized frontend │
# └─────────────────────────────────────────────────────────────┘
cd frontend
npm run build
# ✅ Creates optimized production build in /build
# ┌─────────────────────────────────────────────────────────────┐
# │ STEP 2: Serve with backend │
# └─────────────────────────────────────────────────────────────┘
cd ../backend
python app.py
# ✅ Production server ready

🤝 Contributing

┌──────────────────────────────────────────────────────────────┐
│ │
│ 1️⃣ Fork the repository │
│ └─► Create your own copy │
│ │
│ 2️⃣ Create a feature branch │
│ └─► git checkout -b feature/amazing-feature │
│ │
│ 3️⃣ Make your changes │
│ └─► Write clean, documented code │
│ │
│ 4️⃣ Test thoroughly │
│ └─► Run all tests and verify functionality │
│ │
│ 5️⃣ Submit a pull request │
│ └─► Describe your changes clearly │
│ │
└──────────────────────────────────────────────────────────────┘

📄 License

🙏 Acknowledgments

✍️ Author

╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ⭐ Star this repo if you like it! ⭐ ║
║ ║
║ 🐛 Found a bug? Open an issue! 🐛 ║
║ ║
║ 💡 Have an idea? Submit a pull request! 💡 ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝

Made with 🔥 by Naman

_{Protecting digital authenticity, one frame at a time}