| title | emoji | colorFrom | colorTo | sdk | pinned | app_port |
|---|---|---|---|---|---|---|
Deepfake Defender |
🛡️ |
blue |
green |
docker |
false |
7860 |
╭─────────────────────────────────────────────────────────────╮
│ 🎯 Detect deepfakes with cutting-edge AI technology │
│ 🎨 Stunning 3D animated UI with glassmorphism design │
│ ⚡ Real-time monitoring & comprehensive diagnostics │
╰─────────────────────────────────────────────────────────────╯
╔═══════════════════════════════════════════════════════════════════════════╗
║ 🌈 FEATURE SHOWCASE 🌈 ║
╠═══════════════════════════════════════════════════════════════════════════╣
║ ║
║ 🎥 VIDEO ANALYSIS ║
║ ├─► Upload & analyze videos for deepfake detection ║
║ ├─► Confidence scoring with visual feedback ║
║ └─► Support for all major video formats ║
║ ║
║ 🔍 REAL-TIME STATUS ║
║ ├─► Live health monitoring every 5 seconds ║
║ ├─► Comprehensive system diagnostics ║
║ └─► Service breakdown with status indicators ║
║ ║
║ 📊 TIMELINE VISUALIZATION ║
║ ├─► Animated 5-step progress tracking ║
║ ├─► Model testing pipeline visualization ║
║ └─► Real-time step-by-step feedback ║
║ ║
║ 🎨 MODERN UI ║
║ ├─► Glassmorphism design with blur effects ║
║ ├─► Smooth animations & transitions ║
║ └─► Color-coded results (Green=Real, Red=Fake) ║
║ ║
║ 🌟 3D BACKGROUND ║
║ ├─► Customizable animated beam effects ║
║ ├─► React Three Fiber powered graphics ║
║ └─► WebGL with 2D fallback support ║
║ ║
║ 🤖 AI-POWERED ║
║ ├─► Hugging Face transformer models ║
║ ├─► ResNeXt50 + LSTM architecture ║
║ └─► 20-frame sequence analysis ║
║ ║
║ 📱 RESPONSIVE DESIGN ║
║ ├─► Mobile-first approach ║
║ ├─► Touch-optimized interface ║
║ └─► Works on all devices & screen sizes ║
║ ║
║ 🧪 TESTING SUITE ║
║ ├─► Comprehensive Jest tests ║
║ ├─► Mocked API interactions with MSW ║
║ └─► 100% component coverage ║
║ ║
║ 🔧 DIAGNOSTICS ║
║ ├─► Advanced model testing capabilities ║
║ ├─► Detailed error messages & hints ║
║ └─► Debug mode for troubleshooting ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
╔═══════════════════════════════════════════════════════════╗
║ ║
║ ⚡ GET STARTED IN 5 MINUTES ⚡ ║
║ ║
╚═══════════════════════════════════════════════════════════╝
|
|
|
|
╔════════════════════════════════════════════════════════════════╗
║ 🐍 PYTHON 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 ✅ Backend running on http://localhost:5000
╔════════════════════════════════════════════════════════════════╗
║ ⚛️ REACT 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 ✅ Frontend running on http://localhost:3000
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ██╗ ██╗███████╗███████╗██████╗ ███████╗██╗ ██████╗ ██╗ ██╗
║ ██║ ██║██╔════╝██╔════╝██╔══██╗ ██╔════╝██║ ██╔═══██╗██║ ██║
║ ██║ ██║███████╗█████╗ ██████╔╝ █████╗ ██║ ██║ ██║██║ █╗ ██║
║ ██║ ██║╚════██║██╔══╝ ██╔══██╗ ██╔══╝ ██║ ██║ ██║██║███╗██║
║ ╚██████╔╝███████║███████╗██║ ██║ ██║ ███████╗╚██████╔╝╚███╔███╔╝
║ ╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚═════╝ ╚══╝╚══╝
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
- Backend: Starts on
http://localhost:5000with Flask server - Frontend: Starts on
http://localhost:3000with React development server - 3D Background: Animated beam effects initialize with custom parameters:
- Beam Width: 3px
- Beam Height: 30px
- Beam Count: 20 beams
- Animation Speed: 2x
- Noise Intensity: 1.75
- Rotation: 30 degrees
- Health Check: Automatic backend connectivity verification every 5 seconds
-
Header Section:
- 🛡️ Title: "Deepfake Detection" with modern typography
- Subtitle: "Advanced AI-powered video authenticity analysis"
- Connection Status: Live indicator (🔄 Checking... → ᑕᗝᑎᑎᗴᑕ丅ᗴᗪ → ❌ Offline)
- DIAGNOSTICS Button: Enhanced button for quick access to status page
-
Upload Section (when online):
- Glassmorphism Card: Translucent container with blur effects
- File Input: Drag & drop or click interface with visual feedback
- Supported Formats: All common video formats (MP4, AVI, MOV, etc.)
- Upload & Analyze Button: Single-click processing with loading states
-
Analysis Display:
- Loading Animation: Custom spinner with progress text
- Results Card: Color-coded results (Green = Authentic, Red = Deepfake)
- Confidence Meter: Animated progress bar with percentage
- Visual Indicators: Icons and color schemes for quick understanding
-
Header: "🔧 System Diagnostics" with subtitle
-
Two-Column Layout:
Left Column - Model Testing Pipeline:
- Run Diagnostics Button: Triggers comprehensive 5-step testing
- Animated Timeline: Growing progress line with step indicators
- Step-by-Step Process:
- 🔧 Environment Check: Validates Hugging Face token and configuration
- 🌐 Repository Access: Tests model repository connectivity
- 📥 Model Download: Downloads and caches model files (first run)
- 🔧 Module Import: Imports custom model and processor classes
- 🤖 Model Loading: Full model initialization and readiness test
- Visual Feedback: Each step shows pending → running → success/error states
- Error Details: Specific error messages and troubleshooting hints
Right Column - Live Health Monitor:
- Real-time Status: Updates every 5 seconds
- Service Breakdown:
- ✅ Flask Server (Backend API)
- ✅ CORS Configuration (Cross-origin requests)
- ✅ Deepfake Detector (Model availability)
- ✅ Model Loaded (Ready for inference)
- Last Updated: Timestamp of latest health check
-
File Selection:
- User selects video file via file picker or drag-drop
- File validation and size checking
- Visual confirmation with filename display
-
Upload Process:
- FormData creation with video file
- POST request to
/analyzeendpoint - Real-time upload progress (if implemented)
-
Backend Processing:
- Video frame extraction (up to 20 frames)
- Frame preprocessing (resize to 112x112, normalization)
- Model inference on frame sequence
- Result aggregation and confidence calculation
-
Results Display:
- Authentic Video: Green card with ✅ icon and confidence percentage
- Deepfake Detected: Red card with
⚠️ icon and confidence percentage - Confidence Visualization: Animated progress bar
- Error Handling: Clear error messages for failed analyses
-
Backend Offline:
- Shows "Service Unavailable" message
- Provides troubleshooting instructions
- Retry button for reconnection attempts
-
Model Loading Issues:
- Diagnostics page shows specific failure points
- Detailed error messages in timeline
- Suggestions for token validation and network checks
-
Upload Failures:
- File format validation errors
- Network timeout handling
- Clear user feedback with retry options
- Desktop (1024px+): Full two-column layout
- Tablet (768px-1024px): Stacked layout with adjusted spacing
- Mobile (< 768px): Single column, touch-optimized interface
╔═══════════════════════════════════════════════════════════════╗
║ ⚙️ CONFIGURATION GUIDE ⚙️ ║
╚═══════════════════════════════════════════════════════════════╝
# 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┌──────────────────────────────────────────────────────────────┐
│ │
│ STEP 1 → Visit https://huggingface.co/settings/tokens │
│ │
│ STEP 2 → Click "New token" button │
│ │
│ STEP 3 → Select "Read" permissions │
│ │
│ STEP 4 → Copy token to your .env file │
│ │
└──────────────────────────────────────────────────────────────┘
╔═══════════════════════════════════════════════════════════════╗
║ 📚 TECHNOLOGY STACK & PACKAGES 📚 ║
╚═══════════════════════════════════════════════════════════════╝
# 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{
"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
}
}╔═══════════════════════════════════════════════════════════════╗
║ 🗂️ FILE ORGANIZATION 🗂️ ║
╚═══════════════════════════════════════════════════════════════╝
🌳 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
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ █████╗ ██╗ ███╗ ███╗ ██████╗ ██████╗ ███████╗██╗ ║
║ ██╔══██╗██║ ████╗ ████║██╔═══██╗██╔══██╗██╔════╝██║ ║
║ ███████║██║ ██╔████╔██║██║ ██║██║ ██║█████╗ ██║ ║
║ ██╔══██║██║ ██║╚██╔╝██║██║ ██║██║ ██║██╔══╝ ██║ ║
║ ██║ ██║██║ ██║ ╚═╝ ██║╚██████╔╝██████╔╝███████╗███████╗ ║
║ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
|
|
|
|
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ 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 REFERENCE 🔌 ║
╚═══════════════════════════════════════════════════════════════╝
| Endpoint | Method | Description |
/ |
GET |
🏠 API information and status |
/health |
GET |
💚 Comprehensive health check |
/analyze |
POST |
🔍 Video analysis endpoint |
/debug-model |
POST |
🐛 Model diagnostics testing |
/upload |
POST |
📤 File upload (legacy) |
| Route | Description |
/ |
🏠 Main application interface with upload & analysis |
/status |
📊 System diagnostics and monitoring dashboard |
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ ███████╗███████╗██╗ ██████╗ ███╗ ██╗ ║
║ ██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗ ██║ ║
║ ██║ ██║█████╗ ███████╗██║██║ ███╗██╔██╗ ██║ ║
║ ██║ ██║██╔══╝ ╚════██║██║██║ ██║██║╚██╗██║ ║
║ ██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║ ║
║ ╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
┌─────────────────────────────────────────────────────────────────────┐
│ 🪟 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) │
└─────────────────────────────────────────────────────────────────────┘
// 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- Loading States: Custom spinners with contextual messages
- Transitions: Smooth 0.3s ease transitions throughout
- Hover Effects: Subtle transform and shadow changes
- Progress Indicators: Animated progress bars and timelines
- Error Animations: Shake effects and color transitions
- Keyboard Navigation: Full tab-based navigation support
- Screen Reader: Comprehensive ARIA labels and semantic HTML
- High Contrast: Clear visual hierarchy with sufficient color contrast
- Error States: Descriptive error messages with recovery instructions
- Focus Indicators: Clear focus outlines for interactive elements
- Reduced Motion: Respects user's motion preferences
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ████████╗██████╗ ██████╗ ██╗ ██╗██████╗ ██╗ ███████╗ ║
║ ╚══██╔══╝██╔══██╗██╔═══██╗██║ ██║██╔══██╗██║ ██╔════╝ ║
║ ██║ ██████╔╝██║ ██║██║ ██║██████╔╝██║ █████╗ ║
║ ██║ ██╔══██╗██║ ██║██║ ██║██╔══██╗██║ ██╔══╝ ║
║ ██║ ██║ ██║╚██████╔╝╚██████╔╝██████╔╝███████╗███████╗ ║
║ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
# ┌─────────────────────────────────────────────────────────────┐
# │ 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'))"┌──────────────────────────────────────────────────────────────┐
│ ✓ 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 │
└──────────────────────────────────────────────────────────────┘
# ┌─────────────────────────────────────────────────────────────┐
# │ 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┌──────────────────────────────────────────────────────────────┐
│ ✓ 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 │
└──────────────────────────────────────────────────────────────┘
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ ███████╗██████╗ ██╗ ██████╗ ██╗ ██╗ ║
║ ██╔══██╗██╔════╝██╔══██╗██║ ██╔═══██╗╚██╗ ██╔╝ ║
║ ██║ ██║█████╗ ██████╔╝██║ ██║ ██║ ╚████╔╝ ║
║ ██║ ██║██╔══╝ ██╔═══╝ ██║ ██║ ██║ ╚██╔╝ ║
║ ██████╔╝███████╗██║ ███████╗╚██████╔╝ ██║ ║
║ ╚═════╝ ╚══════╝╚═╝ ╚══════╝ ╚═════╝ ╚═╝ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
# ┌─────────────────────────────────────────────────────────────┐
# │ 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# ┌─────────────────────────────────────────────────────────────┐
# │ 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╔═══════════════════════════════════════════════════════════════╗
║ 💝 CONTRIBUTIONS WELCOME 💝 ║
╚═══════════════════════════════════════════════════════════════╝
┌──────────────────────────────────────────────────────────────┐
│ │
│ 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 │
│ │
└──────────────────────────────────────────────────────────────┘
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ This project is licensed under the MIT License ║
║ ║
║ Free to use, modify, and distribute ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
┌──────────────────────────────────────────────────────────────┐
│ │
│ 🤗 Hugging Face │
│ └─► Model hosting and transformers library │
│ │
│ ⚛️ React Three Fiber │
│ └─► Stunning 3D graphics and animations │
│ │
│ 💅 Styled Components │
│ └─► Modern CSS-in-JS styling solution │
│ │
│ 📹 OpenCV │
│ └─► Powerful video processing capabilities │
│ │
│ 🔥 PyTorch │
│ └─► Deep learning framework │
│ │
│ ⚡ Flask │
│ └─► Lightweight and flexible web framework │
│ │
└──────────────────────────────────────────────────────────────┘
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ║
║ ███╗ ███╗ █████╗ ██████╗ ███████╗ ██████╗ ██╗ ██╗ ║
║ ████╗ ████║██╔══██╗██╔══██╗██╔════╝ ██╔══██╗╚██╗ ██╔╝ ║
║ ██╔████╔██║███████║██║ ██║█████╗ ██████╔╝ ╚████╔╝ ║
║ ██║╚██╔╝██║██╔══██║██║ ██║██╔══╝ ██╔══██╗ ╚██╔╝ ║
║ ██║ ╚═╝ ██║██║ ██║██████╔╝███████╗ ██████╔╝ ██║ ║
║ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝ ╚═════╝ ╚═╝ ║
║ ║
║ ███╗ ██╗ █████╗ ███╗ ███╗ █████╗ ███╗ ██╗ ║
║ ████╗ ██║██╔══██╗████╗ ████║██╔══██╗████╗ ██║ ║
║ ██╔██╗ ██║███████║██╔████╔██║███████║██╔██╗ ██║ ║
║ ██║╚██╗██║██╔══██║██║╚██╔╝██║██╔══██║██║╚██╗██║ ║
║ ██║ ╚████║██║ ██║██║ ╚═╝ ██║██║ ██║██║ ╚████║ ║
║ ╚═╝ ╚═══╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ║
║ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ ⭐ 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