Spaces:

Mattysaur
/

faceswap-app

Running

File size: 29,008 Bytes

425d1ae

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Mobile Face Swap</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/face-api.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        #canvas {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 12px;
        }
        
        #preview {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 12px;
        }
        
        .camera-container {
            position: relative;
            margin: 0 auto;
            width: 100%;
            max-width: 400px;
        }
        
        .face-landmark {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 50%;
            transform: translate(-4px, -4px);
        }
        
        .loading-spinner {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tab-button.active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
        }
        
        #swapResult {
            transition: all 0.3s ease;
        }
        
        .face-box {
            position: absolute;
            border: 2px solid #3b82f6;
            background-color: rgba(59, 130, 246, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-md">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">
                <i class="fas fa-user-astronaut text-blue-500"></i> Face Swap
            </h1>
            <p class="text-gray-600 mt-2">Swap faces between photos in real-time</p>
        </header>
        
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
            <div class="flex border-b border-gray-200">
                <button class="tab-button active px-4 py-2 font-medium text-gray-700" data-tab="camera">
                    <i class="fas fa-camera mr-2"></i>Camera
                </button>
                <button class="tab-button px-4 py-2 font-medium text-gray-700" data-tab="upload">
                    <i class="fas fa-upload mr-2"></i>Upload
                </button>
                <button class="tab-button px-4 py-2 font-medium text-gray-700" data-tab="gallery">
                    <i class="fas fa-images mr-2"></i>Gallery
                </button>
            </div>
            
            <!-- Camera Tab -->
            <div id="camera" class="tab-content active mt-4">
                <div class="camera-container">
                    <video id="video" autoplay muted playsinline class="w-full rounded-lg hidden"></video>
                    <canvas id="canvas" class="hidden"></canvas>
                    <div id="preview-container" class="hidden">
                        <img id="preview" src="" alt="Preview">
                        <div id="face-boxes"></div>
                    </div>
                    
                    <div id="camera-controls" class="flex justify-center mt-4 space-x-4">
                        <button id="startCamera" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full">
                            <i class="fas fa-play mr-2"></i>Start Camera
                        </button>
                        <button id="capture" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full hidden">
                            <i class="fas fa-camera mr-2"></i>Capture
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Upload Tab -->
            <div id="upload" class="tab-content mt-4">
                <div class="text-center">
                    <label class="block mb-4">
                        <span class="text-gray-700">First Face Image</span>
                        <input type="file" id="image1" accept="image/*" class="mt-1 block w-full text-sm text-gray-500
                            file:mr-4 file:py-2 file:px-4
                            file:rounded-full file:border-0
                            file:text-sm file:font-semibold
                            file:bg-blue-50 file:text-blue-700
                            hover:file:bg-blue-100">
                    </label>
                    
                    <label class="block mb-4">
                        <span class="text-gray-700">Second Face Image</span>
                        <input type="file" id="image2" accept="image/*" class="mt-1 block w-full text-sm text-gray-500
                            file:mr-4 file:py-2 file:px-4
                            file:rounded-full file:border-0
                            file:text-sm file:font-semibold
                            file:bg-blue-50 file:text-blue-700
                            hover:file:bg-blue-100">
                    </label>
                    
                    <button id="processUpload" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full">
                        <i class="fas fa-exchange-alt mr-2"></i>Swap Faces
                    </button>
                </div>
            </div>
            
            <!-- Gallery Tab -->
            <div id="gallery" class="tab-content mt-4">
                <div class="text-center">
                    <p class="text-gray-600 mb-4">Select from sample images</p>
                    
                    <div class="grid grid-cols-2 gap-4 mb-6">
                        <div class="cursor-pointer" onclick="selectSampleImage('sample1a', 'sample1b')">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" class="w-full rounded-lg">
                            <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=200&h=200&fit=crop" class="w-full rounded-lg mt-2">
                            <p class="text-sm mt-1">Sample 1</p>
                        </div>
                        <div class="cursor-pointer" onclick="selectSampleImage('sample2a', 'sample2b')">
                            <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=200&h=200&fit=crop" class="w-full rounded-lg">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop" class="w-full rounded-lg mt-2">
                            <p class="text-sm mt-1">Sample 2</p>
                        </div>
                    </div>
                    
                    <button id="processGallery" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full">
                        <i class="fas fa-exchange-alt mr-2"></i>Swap Faces
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Result Section -->
        <div id="result-section" class="bg-white rounded-xl shadow-lg p-6 hidden">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-magic mr-2 text-blue-500"></i>Result
            </h2>
            
            <div class="flex justify-center mb-4">
                <img id="swapResult" src="" alt="Face Swap Result" class="max-w-full rounded-lg">
            </div>
            
            <div class="flex justify-center space-x-4">
                <button id="saveResult" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full">
                    <i class="fas fa-save mr-2"></i>Save
                </button>
                <button id="newSwap" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full">
                    <i class="fas fa-redo mr-2"></i>New Swap
                </button>
            </div>
        </div>
        
        <!-- Loading Indicator -->
        <div id="loading" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
            <div class="bg-white p-6 rounded-lg shadow-xl text-center">
                <div class="loading-spinner inline-block text-blue-500 text-4xl mb-4">
                    <i class="fas fa-spinner"></i>
                </div>
                <p class="text-lg font-medium">Processing faces...</p>
                <p class="text-sm text-gray-600 mt-2" id="loadingStatus">Detecting facial landmarks</p>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        let videoStream;
        let faceImages = {
            image1: null,
            image2: null
        };
        let modelsLoaded = false;
        
        // DOM elements
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const preview = document.getElementById('preview');
        const previewContainer = document.getElementById('preview-container');
        const faceBoxes = document.getElementById('face-boxes');
        const swapResult = document.getElementById('swapResult');
        const resultSection = document.getElementById('result-section');
        const loading = document.getElementById('loading');
        const loadingStatus = document.getElementById('loadingStatus');
        
        // Tab switching
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
                
                button.classList.add('active');
                document.getElementById(button.dataset.tab).classList.add('active');
                
                // Stop camera when switching tabs
                if (button.dataset.tab !== 'camera' && videoStream) {
                    stopCamera();
                }
            });
        });
        
        // Initialize camera
        document.getElementById('startCamera').addEventListener('click', async () => {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ 
                    video: { 
                        width: { ideal: 640 }, 
                        height: { ideal: 480 },
                        facingMode: 'user' 
                    }, 
                    audio: false 
                });
                
                video.srcObject = stream;
                videoStream = stream;
                video.classList.remove('hidden');
                document.getElementById('capture').classList.remove('hidden');
                document.getElementById('startCamera').classList.add('hidden');
                
                // Load models if not already loaded
                if (!modelsLoaded) {
                    await loadModels();
                }
            } catch (err) {
                alert('Could not access the camera. Please make sure you have granted camera permissions.');
                console.error(err);
            }
        });
        
        // Capture photo from camera
        document.getElementById('capture').addEventListener('click', () => {
            const context = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            // Show preview
            preview.src = canvas.toDataURL('image/png');
            previewContainer.classList.remove('hidden');
            video.classList.add('hidden');
            
            // Process the captured image
            processImage(canvas).then(faces => {
                if (faces.length > 0) {
                    faceImages.image1 = canvas;
                    showFaceBoxes(faces);
                    alert('Face captured! Now switch to upload tab to select the second face.');
                } else {
                    alert('No faces detected. Please try again.');
                    previewContainer.classList.add('hidden');
                    video.classList.remove('hidden');
                }
            });
        });
        
        // Process uploaded images
        document.getElementById('processUpload').addEventListener('click', async () => {
            const image1Input = document.getElementById('image1');
            const image2Input = document.getElementById('image2');
            
            if (!image1Input.files[0] || !image2Input.files[0]) {
                alert('Please select both images first');
                return;
            }
            
            showLoading('Loading and processing images...');
            
            try {
                // Load models if not already loaded
                if (!modelsLoaded) {
                    await loadModels();
                }
                
                // Process first image
                const img1 = await loadImage(image1Input.files[0]);
                const faces1 = await faceapi.detectAllFaces(img1).withFaceLandmarks().run();
                
                if (faces1.length === 0) {
                    hideLoading();
                    alert('No face detected in the first image');
                    return;
                }
                
                // Process second image
                const img2 = await loadImage(image2Input.files[0]);
                const faces2 = await faceapi.detectAllFaces(img2).withFaceLandmarks().run();
                
                if (faces2.length === 0) {
                    hideLoading();
                    alert('No face detected in the second image');
                    return;
                }
                
                // Perform face swap
                loadingStatus.textContent = 'Swapping faces...';
                const result = await swapFaces(img1, faces1[0], img2, faces2[0]);
                
                // Show result
                swapResult.src = result.toDataURL('image/png');
                resultSection.classList.remove('hidden');
                hideLoading();
                
                // Scroll to result
                resultSection.scrollIntoView({ behavior: 'smooth' });
            } catch (err) {
                hideLoading();
                alert('An error occurred while processing the images');
                console.error(err);
            }
        });
        
        // Process gallery images
        document.getElementById('processGallery').addEventListener('click', async () => {
            if (!window.selectedSample1 || !window.selectedSample2) {
                alert('Please select a sample pair first');
                return;
            }
            
            showLoading('Processing sample images...');
            
            try {
                // Load models if not already loaded
                if (!modelsLoaded) {
                    await loadModels();
                }
                
                // Process first image
                const img1 = await loadImageFromUrl(window.selectedSample1);
                const faces1 = await faceapi.detectAllFaces(img1).withFaceLandmarks().run();
                
                if (faces1.length === 0) {
                    hideLoading();
                    alert('No face detected in the first image');
                    return;
                }
                
                // Process second image
                const img2 = await loadImageFromUrl(window.selectedSample2);
                const faces2 = await faceapi.detectAllFaces(img2).withFaceLandmarks().run();
                
                if (faces2.length === 0) {
                    hideLoading();
                    alert('No face detected in the second image');
                    return;
                }
                
                // Perform face swap
                loadingStatus.textContent = 'Swapping faces...';
                const result = await swapFaces(img1, faces1[0], img2, faces2[0]);
                
                // Show result
                swapResult.src = result.toDataURL('image/png');
                resultSection.classList.remove('hidden');
                hideLoading();
                
                // Scroll to result
                resultSection.scrollIntoView({ behavior: 'smooth' });
            } catch (err) {
                hideLoading();
                alert('An error occurred while processing the images');
                console.error(err);
            }
        });
        
        // Save result
        document.getElementById('saveResult').addEventListener('click', () => {
            if (!swapResult.src) return;
            
            const link = document.createElement('a');
            link.download = 'face-swap-result.png';
            link.href = swapResult.src;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        
        // New swap
        document.getElementById('newSwap').addEventListener('click', () => {
            resultSection.classList.add('hidden');
            
            // Reset camera tab
            if (videoStream) {
                stopCamera();
                video.classList.remove('hidden');
                previewContainer.classList.add('hidden');
                document.getElementById('startCamera').classList.remove('hidden');
                document.getElementById('capture').classList.add('hidden');
            }
            
            // Reset upload tab
            document.getElementById('image1').value = '';
            document.getElementById('image2').value = '';
            
            // Reset gallery tab
            window.selectedSample1 = null;
            window.selectedSample2 = null;
        });
        
        // Helper functions
        async function loadModels() {
            showLoading('Loading face detection models...');
            
            await faceapi.nets.tinyFaceDetector.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
            await faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
            
            modelsLoaded = true;
            hideLoading();
        }
        
        function loadImage(file) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = URL.createObjectURL(file);
            });
        }
        
        function loadImageFromUrl(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = url;
            });
        }
        
        async function processImage(imageElement) {
            showLoading('Detecting faces...');
            
            try {
                const detections = await faceapi.detectAllFaces(imageElement)
                    .withFaceLandmarks()
                    .run();
                
                hideLoading();
                return detections;
            } catch (err) {
                hideLoading();
                console.error(err);
                return [];
            }
        }
        
        function showFaceBoxes(faces) {
            faceBoxes.innerHTML = '';
            
            faces.forEach(face => {
                const box = face.detection.box;
                const faceBox = document.createElement('div');
                faceBox.className = 'face-box';
                faceBox.style.width = `${box.width}px`;
                faceBox.style.height = `${box.height}px`;
                faceBox.style.left = `${box.x}px`;
                faceBox.style.top = `${box.y}px`;
                faceBoxes.appendChild(faceBox);
            });
        }
        
        function stopCamera() {
            if (videoStream) {
                videoStream.getTracks().forEach(track => track.stop());
                videoStream = null;
                video.srcObject = null;
                video.classList.add('hidden');
                document.getElementById('capture').classList.add('hidden');
                document.getElementById('startCamera').classList.remove('hidden');
                previewContainer.classList.add('hidden');
            }
        }
        
        function showLoading(message) {
            loadingStatus.textContent = message;
            loading.classList.remove('hidden');
        }
        
        function hideLoading() {
            loading.classList.add('hidden');
        }
        
        // Sample image selection
        window.selectSampleImage = function(img1, img2) {
            window.selectedSample1 = `https://images.unsplash.com/photo-${getImageId(img1)}?w=800&h=800&fit=crop`;
            window.selectedSample2 = `https://images.unsplash.com/photo-${getImageId(img2)}?w=800&h=800&fit=crop`;
            
            // Highlight selected sample
            document.querySelectorAll('#gallery .cursor-pointer').forEach(el => {
                el.classList.remove('ring-2', 'ring-blue-500');
            });
            event.currentTarget.classList.add('ring-2', 'ring-blue-500');
        };
        
        function getImageId(img) {
            const samples = {
                'sample1a': '1507003211169-0a1dd7228f2d',
                'sample1b': '1531123897727-8f129e1688ce',
                'sample2a': '1554151228-14d9def656e4',
                'sample2b': '1494790108377-be9c29b29330'
            };
            return samples[img];
        }
        
        // Face swap algorithm
        async function swapFaces(img1, face1, img2, face2) {
            // Create canvas for result
            const resultCanvas = document.createElement('canvas');
            const ctx = resultCanvas.getContext('2d');
            
            // Set canvas dimensions to match first image
            resultCanvas.width = img1.width;
            resultCanvas.height = img1.height;
            
            // Draw first image as background
            ctx.drawImage(img1, 0, 0);
            
            // Get facial landmarks
            const landmarks1 = face1.landmarks;
            const landmarks2 = face2.landmarks;
            
            // Calculate transformation matrix from face2 to face1
            const matrix = getTransformationMatrix(landmarks2, landmarks1);
            
            // Create temporary canvas for warped face
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = img2.width;
            tempCanvas.height = img2.height;
            const tempCtx = tempCanvas.getContext('2d');
            tempCtx.drawImage(img2, 0, 0);
            
            // Warp the second face to match the first face's shape
            warpFace(tempCanvas, matrix, face2.detection.box, face1.detection.box);
            
            // Draw the warped face onto the result
            ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 
                          0, 0, resultCanvas.width, resultCanvas.height);
            
            // Blend the faces for more natural result
            blendFaces(resultCanvas, face1, tempCanvas, face2);
            
            return resultCanvas;
        }
        
        function getTransformationMatrix(sourceLandmarks, targetLandmarks) {
            // This is a simplified version - a real implementation would use
            // more sophisticated algorithms like affine transformation or thin plate splines
            
            // For demo purposes, we'll just calculate an average scaling factor
            const sourcePoints = sourceLandmarks.positions;
            const targetPoints = targetLandmarks.positions;
            
            let totalDistanceSource = 0;
            let totalDistanceTarget = 0;
            
            // Calculate average distances between some key points
            const pairs = [
                [36, 39], // left eye
                [42, 45], // right eye
                [48, 54], // mouth width
                [27, 8]   // nose to chin
            ];
            
            pairs.forEach(pair => {
                const [i, j] = pair;
                totalDistanceSource += distance(sourcePoints[i], sourcePoints[j]);
                totalDistanceTarget += distance(targetPoints[i], targetPoints[j]);
            });
            
            const scale = totalDistanceTarget / totalDistanceSource;
            
            // Calculate average offset
            const sourceCenter = getCenter(sourceLandmarks);
            const targetCenter = getCenter(targetLandmarks);
            
            return {
                scale,
                translateX: targetCenter.x - sourceCenter.x * scale,
                translateY: targetCenter.y - sourceCenter.y * scale
            };
        }
        
        function warpFace(canvas, matrix, sourceBox, targetBox) {
            const ctx = canvas.getContext('2d');
            
            // Create a temporary canvas to hold the transformed image
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = canvas.width;
            tempCanvas.height = canvas.height;
            const tempCtx = tempCanvas.getContext('2d');
            
            // Apply transformation
            tempCtx.save();
            tempCtx.translate(matrix.translateX, matrix.translateY);
            tempCtx.scale(matrix.scale, matrix.scale);
            tempCtx.drawImage(canvas, 0, 0);
            tempCtx.restore();
            
            // Copy back to original canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(tempCanvas, 0, 0);
        }
        
        function blendFaces(resultCanvas, face1, face2Canvas, face2) {
            // This is a simplified blending function
            // A real implementation would use more sophisticated techniques like:
            // - Poisson blending
            // - Feathering at the edges
            // - Color correction
            
            const ctx = resultCanvas.getContext('2d');
            
            // For demo, we'll just draw the second face over the first with some opacity
            ctx.globalCompositeOperation = 'source-atop';
            ctx.globalAlpha = 0.7;
            ctx.drawImage(face2Canvas, 0, 0);
            ctx.globalAlpha = 1.0;
            ctx.globalCompositeOperation = 'source-over';
        }
        
        function distance(p1, p2) {
            return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
        }
        
        function getCenter(landmarks) {
            const points = landmarks.positions;
            let x = 0, y = 0;
            
            points.forEach(point => {
                x += point.x;
                y += point.y;
            });
            
            return {
                x: x / points.length,
                y: y / points.length
            };
        }
        
        // Initialize with some sample images
        window.selectedSample1 = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=800&fit=crop';
        window.selectedSample2 = 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=800&h=800&fit=crop';
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mattysaur/faceswap-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>