Add initial project files

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.9-slim
+
+# Install system dependencies for building PyQt5 and OpenCV
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory
+WORKDIR /app
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt ./
+RUN pip install --upgrade pip && pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose the port (adjust if needed)
+EXPOSE 7890
+
+# Set environment variables for a Flask app
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+
+# Command to run the application
+CMD ["flask", "run", "--port=7890"]
+

app.py

@@ -0,0 +1,126 @@
+from flask import Flask, render_template, Response, request, jsonify, send_file
+import cv2
+import numpy as np
+import insightface
+import base64
+from insightface.app import FaceAnalysis
+import os
+from werkzeug.utils import secure_filename
+import shutil
+
+app = Flask(__name__)
+
+# Initialize the face detection and swapping models
+app_model = FaceAnalysis(name='buffalo_l')
+app_model.prepare(ctx_id=0, det_size=(640, 640))
+
+swapper_model_path = 'src/inswapper_128.onnx'
+swapper = insightface.model_zoo.get_model(swapper_model_path, download=False, download_zip=False)
+
+# Load the default image for face swapping
+default_img_path = 'assets/face.jpg'
+default_img = cv2.imread(default_img_path)
+
+# Make sure the assets directory exists
+if not os.path.exists('assets'):
+    os.makedirs('assets')
+
+# Check if a face is detected in the default image
+faces_in_default_img = app_model.get(default_img)
+if len(faces_in_default_img) == 0:
+    raise Exception("No face detected in the default image.")
+
+default_face = faces_in_default_img[0]
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/process_frame', methods=['POST'])
+def process_frame():
+    try:
+        data = request.json['image']
+        img_data = base64.b64decode(data.split(',')[1])
+        np_img = np.frombuffer(img_data, np.uint8)
+        frame = cv2.imdecode(np_img, cv2.IMREAD_COLOR)
+
+        faces_in_frame = app_model.get(frame)
+        if len(faces_in_frame) > 0:
+            face_in_frame = faces_in_frame[0]
+            try:
+                # Perform face swap
+                swapped_frame = swapper.get(frame, face_in_frame, default_face, paste_back=True)
+            except Exception as e:
+                print(f"Error during face swap: {e}")
+                swapped_frame = frame
+        else:
+            swapped_frame = frame
+
+        _, buffer = cv2.imencode('.jpg', swapped_frame)
+        processed_img_data = base64.b64encode(buffer).decode('utf-8')
+        return {'image': 'data:image/jpeg;base64,' + processed_img_data}
+    except Exception as e:
+        print(f"Error processing frame: {e}")
+        return {'error': str(e)}, 500
+
+
+@app.route('/get_current_face')
+def get_current_face():
+    return send_file(default_img_path, mimetype='image/jpeg')
+
+
+@app.route('/upload_face', methods=['POST'])
+def upload_face():
+    if 'face' not in request.files:
+        return jsonify({'success': False, 'message': 'No file part'})
+
+    file = request.files['face']
+    if file.filename == '':
+        return jsonify({'success': False, 'message': 'No selected file'})
+
+    # Create a backup of the original default face if it doesn't exist
+    backup_path = 'assets/face.jpg'
+    if not os.path.exists(backup_path):
+        shutil.copy2(default_img_path, backup_path)
+
+    # Save the new face (always as face.jpg)
+    file_path = os.path.join('assets', 'face.jpg')
+    file.save(file_path)
+
+    # Reload the face for face swapping
+    global default_img, default_face
+    default_img = cv2.imread(default_img_path)
+    faces_in_default_img = app_model.get(default_img)
+
+    if len(faces_in_default_img) == 0:
+        # If no face detected, restore the backup
+        shutil.copy2(backup_path, default_img_path)
+        default_img = cv2.imread(default_img_path)
+        faces_in_default_img = app_model.get(default_img)
+        return jsonify({'success': False, 'message': 'No face detected in the uploaded image'})
+
+    default_face = faces_in_default_img[0]
+    return jsonify({'success': True})
+
+
+@app.route('/reset_face', methods=['POST'])
+def reset_face():
+    backup_path = 'assets/face.jpg'
+    if os.path.exists(backup_path):
+        # Restore the original face
+        shutil.copy2(backup_path, default_img_path)
+
+        # Reload the face for face swapping
+        global default_img, default_face
+        default_img = cv2.imread(default_img_path)
+        faces_in_default_img = app_model.get(default_img)
+        default_face = faces_in_default_img[0]
+        return jsonify({'success': True})
+    else:
+        return jsonify({'success': False, 'message': 'No backup found'})
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7890)

requirements.txt

@@ -0,0 +1,9 @@
+insightface==0.7.3
+onnxruntime==1.19.2
+torch==2.5.1
+transformers==4.46.1
+opencv-python==4.10.0.84
+opencv-python-headless==4.10.0.84
+Flask==3.0.3
+numpy==1.22.0
+requests==2.32.3

src/inswapper_128.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4a3f08c753cb72d04e10aa0f7dbe3deebbf39567d4ead6dce08e98aa49e16af
+size 554253681

templates/index.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LetsPhish Morphis</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+  <style>
+    :root {
+      --primary: #4f46e5;
+      --primary-hover: #4338ca;
+      --background: #f9fafb;
+      --card-bg: #ffffff;
+      --text: #1f2937;
+      --text-light: #6b7280;
+      --border: #e5e7eb;
+      --radius: 8px;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    body { background-color: var(--background); color: var(--text); padding: 0; margin: 0; min-height: 100vh; }
+    .navbar { background-color: var(--card-bg); padding: 1rem 2rem; box-shadow: var(--shadow); display: flex; align-items: center; }
+    .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; }
+    .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
+    .app-header { text-align: center; margin-bottom: 2rem; }
+    .app-title { font-size: 2rem; margin-bottom: 0.5rem; color: var(--text); }
+    .app-description { color: var(--text-light); max-width: 600px; margin: 0 auto; }
+    .card { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 2rem; }
+    .card-header { padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 600; }
+    .card-body { padding: 1rem; }
+    .flex { display: flex; }
+    .flex-col { flex-direction: column; }
+    .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
+    @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
+    .video-container { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); background-color: #000; }
+    video, #output { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
+    #video { z-index: 1; }
+    #output { z-index: 2; }
+    #canvas { display: none; }
+    .controls { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
+    .btn { padding: 0.5rem 1rem; border-radius: var(--radius); border: none; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; }
+    .btn-primary { background-color: var(--primary); color: white; }
+    .btn-primary:hover { background-color: var(--primary-hover); }
+    .btn-outline { border: 1px solid var(--primary); color: var(--primary); background-color: transparent; }
+    .btn-outline:hover { background-color: var(--primary); color: white; }
+    .file-input-container { display: flex; flex-direction: column; gap: 1rem; }
+    .file-input-label { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s; }
+    .file-input-label:hover { border-color: var(--primary); }
+    .file-input { display: none; }
+    .preview-container { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 1rem auto; border: 4px solid var(--primary); }
+    .preview-image { width: 100%; height: 100%; object-fit: cover; }
+    .status-container { display: flex; align-items: center; gap: 0.5rem; color: var(--text-light); margin-top: 1rem; }
+    .status-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; }
+    .status-dot.active { background-color: #10b981; }
+    .timer { margin-top: 1rem; font-size: 1.2rem; font-weight: bold; text-align: center; }
+    .footer { padding: 2rem; text-align: center; color: var(--text-light); border-top: 1px solid var(--border); margin-top: 3rem; }
+  </style>
+</head>
+<body>
+  <nav class="navbar">
+    <div class="logo">
+      <i class="fas fa-mask"></i>
+      <span>LetsPhish Morphis</span>
+    </div>
+  </nav>
+  <div class="container">
+    <div class="app-header">
+      <h1 class="app-title">Real-Time Face Swapping</h1>
+      <p class="app-description">Experience real-time face swapping powered by AI. Upload your own face or use the default one.</p>
+    </div>
+    <div class="grid">
+      <!-- Live preview card spans both columns to be bigger -->
+      <div class="flex flex-col" style="grid-column: span 2;">
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-camera"></i> Live Preview
+          </div>
+          <div class="card-body">
+            <div class="video-container">
+              <video id="video" autoplay></video>
+              <img id="output">
+            </div>
+            <canvas id="canvas"></canvas>
+            <div class="controls">
+              <button id="toggleBtn" class="btn btn-primary">
+                <i class="fas fa-pause"></i> Pause Face Swap
+              </button>
+              <button id="screenshotBtn" class="btn btn-outline">
+                <i class="fas fa-camera"></i> Take Screenshot
+              </button>
+            </div>
+            <div class="status-container">
+              <div id="statusDot" class="status-dot active"></div>
+              <span id="statusText">Face swap active</span>
+            </div>
+            <!-- Timer display -->
+            <div id="timerDisplay" class="timer">Time remaining: 02:00</div>
+          </div>
+        </div>
+      </div>
+      <!-- Upload card remains in one column -->
+      <div class="flex flex-col">
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-upload"></i> Upload Reference Face
+          </div>
+          <div class="card-body">
+            <div class="preview-container">
+              <img id="facePreview" class="preview-image" src="/get_current_face" alt="Current face">
+            </div>
+            <div class="file-input-container">
+              <label for="faceUpload" class="file-input-label">
+                <i class="fas fa-cloud-upload-alt fa-2x"></i>
+                <p>Drop your image here or click to browse</p>
+                <p class="text-light">JPG or PNG, max 5MB</p>
+              </label>
+              <input type="file" id="faceUpload" class="file-input" accept="image/*">
+            </div>
+            <div class="controls">
+              <button id="uploadBtn" class="btn btn-primary" disabled>
+                <i class="fas fa-check"></i> Use This Face
+              </button>
+              <button id="resetBtn" class="btn btn-outline">
+                <i class="fas fa-undo"></i> Reset to Default
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer class="footer">
+    <p>Powered By LetsPhish Morphis</p>
+  </footer>
+  <script>
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    const output = document.getElementById('output');
+    const context = canvas.getContext('2d');
+    const toggleBtn = document.getElementById('toggleBtn');
+    const screenshotBtn = document.getElementById('screenshotBtn');
+    const faceUpload = document.getElementById('faceUpload');
+    const facePreview = document.getElementById('facePreview');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    const statusDot = document.getElementById('statusDot');
+    const statusText = document.getElementById('statusText');
+    const timerDisplay = document.getElementById('timerDisplay');
+
+    let isProcessing = true;
+    let processingInterval = 100; // interval in ms
+    let intervalId = null;
+    let selectedFile = null;
+    let frameCounter = 0;
+    const skipFrames = 2; // Process every 2nd frame (adjust as needed)
+    let processingInProgress = false;
+
+    // Total time in seconds for live preview
+    let totalTime = 120;
+    let timerIntervalId = null;
+
+    // Function to update timer display in mm:ss format
+    function updateTimerDisplay() {
+      let minutes = Math.floor(totalTime / 60);
+      let seconds = totalTime % 60;
+      timerDisplay.textContent = `Time remaining: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    // Start the countdown timer
+    function startTimer() {
+      updateTimerDisplay();
+      timerIntervalId = setInterval(() => {
+        totalTime--;
+        updateTimerDisplay();
+        if (totalTime <= 0) {
+          clearInterval(timerIntervalId);
+          if (isProcessing) {
+            clearInterval(intervalId);
+            isProcessing = false;
+            toggleBtn.innerHTML = '<i class="fas fa-play"></i> Resume Face Swap';
+            statusDot.classList.remove('active');
+            statusText.textContent = 'Live preview turned off after 2 minutes';
+            alert("Live preview has been turned off after 2 minutes.");
+          }
+        }
+      }, 1000);
+    }
+
+    // Toggle face swapping
+    toggleBtn.addEventListener('click', () => {
+      isProcessing = !isProcessing;
+      if (isProcessing) {
+        toggleBtn.innerHTML = '<i class="fas fa-pause"></i> Pause Face Swap';
+        intervalId = setInterval(captureFrame, processingInterval);
+        statusDot.classList.add('active');
+        statusText.textContent = 'Face swap active';
+        // Restart timer if it had stopped
+        if (totalTime <= 0) {
+          totalTime = 120;
+          startTimer();
+        }
+      } else {
+        toggleBtn.innerHTML = '<i class="fas fa-play"></i> Resume Face Swap';
+        clearInterval(intervalId);
+        statusDot.classList.remove('active');
+        statusText.textContent = 'Face swap paused';
+      }
+    });
+
+    // Take screenshot
+    screenshotBtn.addEventListener('click', () => {
+      const link = document.createElement('a');
+      link.download = 'faceswap-screenshot.jpg';
+      link.href = output.src;
+      link.click();
+    });
+
+    // Handle file upload preview
+    faceUpload.addEventListener('change', (e) => {
+      selectedFile = e.target.files[0];
+      if (selectedFile) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          facePreview.src = event.target.result;
+          uploadBtn.disabled = false;
+        };
+        reader.readAsDataURL(selectedFile);
+      }
+    });
+
+    // Upload new face
+    uploadBtn.addEventListener('click', () => {
+      if (!selectedFile) return;
+      const formData = new FormData();
+      formData.append('face', selectedFile);
+      fetch('/upload_face', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          alert('Face updated successfully!');
+          facePreview.src = `/get_current_face?t=${new Date().getTime()}`;
+          uploadBtn.disabled = true;
+        } else {
+          alert('Error: ' + data.message);
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        alert('An error occurred while uploading the face.');
+      });
+    });
+
+    // Reset to default face
+    resetBtn.addEventListener('click', () => {
+      fetch('/reset_face', { method: 'POST' })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          alert('Reset to default face successfully!');
+          facePreview.src = `/get_current_face?t=${new Date().getTime()}`;
+        } else {
+          alert('Error: ' + data.message);
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        alert('An error occurred while resetting the face.');
+      });
+    });
+
+    // Access the webcam and stream the video to the video element
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then((stream) => { video.srcObject = stream; })
+      .catch((err) => {
+        console.error("Error accessing webcam: " + err);
+        statusText.textContent = 'Error: Cannot access webcam';
+        statusDot.classList.remove('active');
+        statusDot.style.backgroundColor = 'red';
+      });
+
+    // Asynchronous function to capture and process the frame
+    async function captureFrame() {
+      if (processingInProgress) return;
+      frameCounter++;
+      if (frameCounter % skipFrames !== 0) return;
+      if (!video.videoWidth) return;
+
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+
+      // Mirror the video: save and restore context
+      context.save();
+      context.scale(-1, 1);
+      context.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);
+      context.restore();
+
+      // Reduce image quality by using a lower quality parameter (0.5 here)
+      const dataURL = canvas.toDataURL('image/jpeg', 0.5);
+      processingInProgress = true;
+      try {
+        const response = await fetch('/process_frame', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ image: dataURL })
+        });
+        const data = await response.json();
+        output.src = data.image;
+      } catch (error) {
+        console.error('Error:', error);
+      } finally {
+        processingInProgress = false;
+      }
+    }
+
+    // Start capturing frames and start the timer
+    intervalId = setInterval(captureFrame, processingInterval);
+    startTimer();
+  </script>
+</body>
+</html>