Spaces:

Ozzyboo
/

faceflipper-fiesta

Running

App Files Files Community

Ozzyboo commited on Sep 26

Commit

8e72fdd

verified ·

1 Parent(s): 5061db3

Use face flipper to FaceSwap image

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +126 -18

README.md CHANGED Viewed

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

 ---
+title: FaceFlipper Fiesta 🎭
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,127 @@
-<!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">
+    <title>FaceFlipper | AI-Powered Faceswap</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .faceswap-container {
+            perspective: 1000px;
+        }
+        .faceswap-card {
+            transform-style: preserve-3d;
+            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .faceswap-card:hover {
+            transform: rotateY(180deg);
+        }
+        .faceswap-front, .faceswap-back {
+            backface-visibility: hidden;
+            border-radius: 1rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .faceswap-back {
+            transform: rotateY(180deg);
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen text-white">
+    <!-- Hero Section -->
+    <div class="container mx-auto px-6 py-16 text-center">
+        <h1 class="text-5xl font-bold mb-6">Face<span class="text-indigo-200">Flipper</span> 🌀</h1>
+        <p class="text-xl mb-12 max-w-2xl mx-auto">The most advanced AI-powered faceswap technology that creates seamless, natural-looking transformations</p>
+        <!-- Faceswap Demo -->
+        <div class="faceswap-container mx-auto w-full max-w-2xl mb-16">
+            <div class="faceswap-card relative w-full h-96">
+                <div class="faceswap-front absolute w-full h-full bg-indigo-900 rounded-2xl flex items-center justify-center">
+                    <img src="http://static.photos/people/640x360/1" alt="Original Face" class="w-full h-full object-cover rounded-2xl">
+                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4 rounded-b-2xl">
+                        <p class="text-white">Original</p>
+                    </div>
+                </div>
+                <div class="faceswap-back absolute w-full h-full bg-purple-900 rounded-2xl flex items-center justify-center">
+                    <img src="http://static.photos/people/640x360/2" alt="Swapped Face" class="w-full h-full object-cover rounded-2xl">
+                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4 rounded-b-2xl">
+                        <p class="text-white">Swapped</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Features -->
+        <div class="grid md:grid-cols-3 gap-8 mb-16">
+            <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm">
+                <i data-feather="zap" class="w-12 h-12 mb-4 text-indigo-300 mx-auto"></i>
+                <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
+                <p class="text-indigo-100">Process faceswaps in seconds with our optimized AI algorithms</p>
+            </div>
+            <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm">
+                <i data-feather="eye" class="w-12 h-12 mb-4 text-indigo-300 mx-auto"></i>
+                <h3 class="text-xl font-semibold mb-2">Realistic Results</h3>
+                <p class="text-indigo-100">Preserves lighting, skin tones and expressions perfectly</p>
+            </div>
+            <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm">
+                <i data-feather="sliders" class="w-12 h-12 mb-4 text-indigo-300 mx-auto"></i>
+                <h3 class="text-xl font-semibold mb-2">Advanced Controls</h3>
+                <p class="text-indigo-100">Fine-tune every aspect of your faceswap with precision</p>
+            </div>
+        </div>
+        <!-- CTA -->
+        <div class="flex flex-col md:flex-row gap-4 justify-center">
+            <button class="bg-white text-indigo-900 font-bold px-8 py-4 rounded-full hover:bg-indigo-100 transition-all duration-300 flex items-center">
+                <i data-feather="upload" class="mr-2"></i> Upload Image
+            </button>
+            <button class="bg-indigo-300 text-indigo-900 font-bold px-8 py-4 rounded-full hover:bg-indigo-200 transition-all duration-300 flex items-center">
+                <i data-feather="repeat" class="mr-2"></i> FaceSwap Now
+            </button>
+        </div>
+</div>
+    <!-- Floating Faces -->
+    <div class="absolute top-1/4 left-10 w-16 h-16 rounded-full bg-purple-400 opacity-20 floating"></div>
+    <div class="absolute bottom-1/3 right-20 w-24 h-24 rounded-full bg-indigo-400 opacity-20 floating" style="animation-delay: 2s;"></div>
+    <div class="absolute top-1/3 right-1/4 w-20 h-20 rounded-full bg-white opacity-10 floating" style="animation-delay: 4s;"></div>
+    <!-- FaceSwap Controls -->
+    <div class="fixed bottom-8 left-0 right-0 flex justify-center space-x-4">
+        <div class="bg-white bg-opacity-20 backdrop-blur-sm p-4 rounded-full shadow-lg">
+            <div class="flex space-x-4">
+                <button class="bg-indigo-500 text-white p-3 rounded-full hover:bg-indigo-600 transition">
+                    <i data-feather="image"></i>
+                </button>
+                <button class="bg-purple-500 text-white p-3 rounded-full hover:bg-purple-600 transition">
+                    <i data-feather="refresh-cw"></i>
+                </button>
+                <button class="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition">
+                    <i data-feather="download"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+<script>
+        feather.replace();
+        // Simple animation for the faceswap card
+        document.querySelector('.faceswap-card').addEventListener('mouseenter', function() {
+            this.style.transform = 'rotateY(180deg)';
+        });
+        document.querySelector('.faceswap-card').addEventListener('mouseleave', function() {
+            this.style.transform = 'rotateY(0deg)';
+        });
+    </script>
+</body>
 </html>