Spaces:

yipter
/

faceswap-magic

Running

File size: 20,125 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FaceSwap Magic ✨ - Outil de Transformation Faciale par IA</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
        
        /* Custom color palette since undefined was provided */
        :root {
            --primary: #8B5CF6;
            --primary-dark: #7C3AED;
            --secondary: #F59E0B;
            --secondary-dark: #D97706;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
        }
        
        .bg-primary {
            background-color: var(--primary);
        }
        
        .text-primary {
            color: var(--primary);
        }
        
        .border-primary {
            border-color: var(--primary);
        }
        
        .bg-secondary {
            background-color: var(--secondary);
        }
        
        .text-secondary {
            color: var(--secondary);
        }
        
        .hover\:bg-primary-dark:hover {
            background-color: var(--primary-dark);
        }
        
        .hover\:bg-secondary-dark:hover {
            background-color: var(--secondary-dark);
        }
    </style>
</head>
<body class="font-['Inter'] bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
    <!-- Navigation Component -->
    <custom-navbar></custom-navbar>
    
    <!-- Main Content -->
    <main class="pt-20 pb-16 px-4 md:px-8 max-w-7xl mx-auto">
        <!-- Hero Section -->
        <section class="mb-16">
            <div class="text-center max-w-4xl mx-auto">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 font-['Poppins']">
                    Transformez les Visages avec la <span class="text-primary">Magie de l'IA</span> ✨
                </h1>
                <p class="text-lg md:text-xl text-gray-600 mb-10 max-w-3xl mx-auto">
                    Téléchargez vos photos et laissez notre technologie IA avancée échanger les visages de manière transparente, créer des mèmes hilarants ou générer des transformations de personnages créatives.
                </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="#upload-section" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center gap-2">
                            <i data-feather="upload-cloud"></i>
                            Commencer l'Échange
                        </a>
                        <a href="#gallery" class="bg-white hover:bg-gray-50 text-dark border-2 border-gray-200 font-medium py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">
                            <i data-feather="image"></i>
                            Voir la Galerie
                        </a>
</div>
            </div>
        </section>

        <!-- Upload & Preview Section -->
        <section id="upload-section" class="mb-20">
            <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center font-['Poppins'] text-dark">
                    Téléchargez Vos Photos
                </h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- Original Image Upload -->
                    <div class="space-y-6">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="bg-primary/10 p-2 rounded-lg">
                                <i data-feather="image" class="text-primary"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Photo Originale</h3>
</div>
                        
                        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-primary transition-colors duration-300 bg-gray-50 min-h-[300px] flex flex-col items-center justify-center">
                            <div class="mb-4">
                                <i data-feather="upload" class="w-16 h-16 text-gray-400 mx-auto"></i>
                            </div>
                            <p class="text-gray-600 mb-4">Glissez-déposez votre photo originale ici</p>
                            <label for="original-upload" class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-colors inline-block">
                                Parcourir les Fichiers
                            </label>
                            <input type="file" id="original-upload" class="hidden" accept="image/*">
                            <p class="text-sm text-gray-500 mt-4">Supporte JPG, PNG, WEBP jusqu'à 10Mo</p>
</div>
                        
                        <div id="original-preview" class="hidden rounded-xl overflow-hidden shadow-lg">
                            <img id="original-image" src="" alt="Original" class="w-full h-auto">
                        </div>
                    </div>

                    <!-- Target Face Upload -->
                    <div class="space-y-6">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="bg-secondary/10 p-2 rounded-lg">
                                <i data-feather="user" class="text-secondary"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Visage Cible</h3>
</div>
                        
                        <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-secondary transition-colors duration-300 bg-gray-50 min-h-[300px] flex flex-col items-center justify-center">
                            <div class="mb-4">
                                <i data-feather="user-plus" class="w-16 h-16 text-gray-400 mx-auto"></i>
                            </div>
                            <p class="text-gray-600 mb-4">Glissez-déposez le visage que vous souhaitez échanger</p>
                            <label for="target-upload" class="bg-secondary hover:bg-secondary-dark text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-colors inline-block">
                                Parcourir les Fichiers
                            </label>
                            <input type="file" id="target-upload" class="hidden" accept="image/*">
                            <p class="text-sm text-gray-500 mt-4">Assurez-vous que le visage est clairement visible</p>
</div>
                        
                        <div id="target-preview" class="hidden rounded-xl overflow-hidden shadow-lg">
                            <img id="target-image" src="" alt="Target Face" class="w-full h-auto">
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <div class="mt-10 pt-8 border-t border-gray-200">
                    <div class="max-w-2xl mx-auto">
                        <h3 class="text-xl font-semibold mb-6 text-center">Options d'Ajustement</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                            <div class="space-y-2">
                                <label class="text-gray-700 font-medium">Alignement du Visage</label>
                                <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                            </div>
                            <div class="space-y-2">
                                <label class="text-gray-700 font-medium">Correspondance de Teint</label>
                                <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                            </div>
                            <div class="space-y-2">
                                <label class="text-gray-700 font-medium">Intensité de Fusion</label>
                                <input type="range" min="0" max="100" value="60" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                            </div>
</div>

                        <div class="text-center">
                            <button id="generate-btn" class="bg-gradient-to-r from-primary to-secondary hover:from-primary-dark hover:to-secondary-dark text-black font-semibold py-4 px-12 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center gap-3 mx-auto">
                                <i data-feather="zap"></i>
                                Générer l'Échange
                            </button>
<p class="text-gray-500 text-sm mt-4">Le traitement prend généralement 10 à 30 secondes</p>
</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Result Preview -->
        <section id="result-section" class="mb-20 hidden">
            <div class="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl shadow-xl p-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-10 text-center font-['Poppins'] text-dark">
                    Votre Image Transformée
                </h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                    <div class="text-center">
                        <div class="mb-4">
                            <i data-feather="image" class="w-10 h-10 text-primary mx-auto"></i>
                        </div>
                        <h4 class="font-semibold mb-3">Originale</h4>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
                            <img id="display-original" src="" alt="Original" class="w-full h-48 object-cover">
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <div class="mb-4">
                            <i data-feather="arrow-right" class="w-10 h-10 text-gray-500 mx-auto"></i>
                        </div>
                        <h4 class="font-semibold mb-3">Traitement IA</h4>
                        <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-xl p-8 shadow-lg">
                            <div class="animate-pulse">
                                <i data-feather="cpu" class="w-16 h-16 text-primary mx-auto"></i>
                                <p class="mt-4 text-gray-600">Analyse et Transformation...</p>
                            </div>
                        </div>
</div>
                    
                    <div class="text-center">
                        <div class="mb-4">
                            <i data-feather="star" class="w-10 h-10 text-secondary mx-auto"></i>
                        </div>
                        <h4 class="font-semibold mb-3">Résultat</h4>
<div class="bg-white rounded-xl shadow-lg overflow-hidden relative">
                            <img id="result-image" src="" alt="Result" class="w-full h-48 object-cover">
                            <div class="absolute top-2 right-2 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">
                                NEW
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-10 text-center">
                    <div class="flex flex-wrap justify-center gap-4">
                        <button id="download-btn" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                            <i data-feather="download"></i>
                            Télécharger le Résultat
                        </button>
                        <button id="share-btn" class="bg-white hover:bg-gray-50 text-dark border-2 border-gray-200 font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                            <i data-feather="share-2"></i>
                            Partager
                        </button>
                        <button id="try-again-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                            <i data-feather="refresh-cw"></i>
                            Essayer un Autre
                        </button>
</div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="mb-20">
            <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
                Pourquoi Choisir FaceSwap Magic ?
            </h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="shield" class="text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Sécurisé & Privé</h3>
                    <p class="text-gray-600">Toutes les images sont traitées de manière sécurisée et automatiquement supprimées après 24 heures. Votre confidentialité est notre priorité.</p>
</div>
                
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="bg-secondary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="zap" class="text-secondary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Précision Propulsée par IA</h3>
                    <p class="text-gray-600">Des réseaux de neurones avancés garantissent des échanges de visage réalistes avec un alignement parfait et une correspondance naturelle des tons de peau.</p>
</div>
                
                <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="smile" class="text-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Amusant & Créatif</h3>
                    <p class="text-gray-600">Créez des mèmes hilarants, des transformations de personnages de films, ou amusez-vous simplement avec des photos d'amis et de famille.</p>
</div>
            </div>
        </section>

        <!-- Gallery Section -->
        <section id="gallery" class="mb-20">
            <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
                Galerie d'Inspiration
            </h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Gallery items will be populated by JavaScript -->
                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <img src="http://static.photos/people/640x360/101" alt="Sample face swap" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h4 class="font-semibold">Transformation Célébrité</h4>
                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Alex M.</p>
                    </div>
</div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <img src="http://static.photos/people/640x360/102" alt="Sample face swap" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h4 class="font-semibold">Personnage Historique</h4>
                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Maria K.</p>
                    </div>
</div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <img src="http://static.photos/people/640x360/103" alt="Sample face swap" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h4 class="font-semibold">Personnage de Film</h4>
                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Sam R.</p>
                    </div>
</div>
            </div>
            
            <div class="text-center mt-10">
                <a href="gallery.html" class="inline-flex items-center gap-2 text-primary hover:text-primary-dark font-semibold">
                    Voir la Galerie Complète
                    <i data-feather="arrow-right"></i>
                </a>
</div>
        </section>

        <!-- FAQ Section -->
        <section class="mb-20">
            <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
                Questions Fréquemment Posées
            </h2>
<div class="max-w-3xl mx-auto space-y-6">
                <div class="bg-white rounded-xl p-6 shadow-md">
                    <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                        <i data-feather="help-circle" class="text-primary"></i>
                        Quelle est la précision des échanges de visage ?
                    </h3>
                    <p class="text-gray-600">Notre IA utilise des algorithmes avancés de reconnaissance faciale et de fusion pour créer des échanges réalistes avec un alignement approprié, une correspondance des tons de peau et des ajustements d'éclairage.</p>
</div>
                
                <div class="bg-white rounded-xl p-6 shadow-md">
                    <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                        <i data-feather="shield" class="text-primary"></i>
                        Mes données sont-elles sécurisées ?
                    </h3>
                    <p class="text-gray-600">Oui ! Toutes les images téléchargées sont chiffrées et automatiquement supprimées de nos serveurs après 24 heures. Nous ne stockons ni ne partageons vos photos.</p>
</div>
                
                <div class="bg-white rounded-xl p-6 shadow-md">
                    <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                        <i data-feather="dollar-sign" class="text-primary"></i>
                        FaceSwap Magic est-il gratuit ?
                    </h3>
                    <p class="text-gray-600">Oui ! Vous obtenez 5 échanges gratuits par jour. Pour des échanges illimités et des fonctionnalités avancées, consultez nos formules premium.</p>
</div>
            </div>
        </section>
    </main>

    <!-- Footer Component -->
    <custom-footer></custom-footer>

    <!-- Include Web Components -->
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    
    <!-- Main Script -->
    <script src="script.js"></script>
    
    <!-- Initialize Feather Icons -->
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>