Spaces:
Running
Running
| <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> |