Spaces:

Mattysaur
/

faceswap-app

Running

App Files Files Community

Mattysaur commited on 11 days ago

Commit

425d1ae

verified ·

1 Parent(s): d0eb08d

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +683 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Faceswap App
-emoji: 🌖
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: faceswap-app
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,683 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>