Spaces:
Running
Running
remove Ready to create your AI Clone? when user click on pricing take them to choose your plan area. Also when user is signed in focus the page to upload image area . after signed in show signout option and when user click then take use back to orignal UI without image upload section - Follow Up Deployment
4d868fb
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Clone - Create Your Digital Twin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .upload-area { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: #667eea; | |
| background-color: rgba(102, 126, 234, 0.05); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .avatar-preview { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .plan-card { | |
| transition: all 0.3s ease; | |
| } | |
| .plan-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .selected-plan { | |
| border-color: #667eea; | |
| background-color: rgba(102, 126, 234, 0.05); | |
| } | |
| .toast { | |
| animation: slideIn 0.5s, fadeOut 0.5s 2.5s; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(0); } | |
| } | |
| @keyframes fadeOut { | |
| from { opacity: 1; } | |
| to { opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">AI Clone</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a> | |
| <a href="#features" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Features</a> | |
| <a href="#create" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Create</a> | |
| <a href="#pricing" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Pricing</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-indigo-600 text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">AI Clone</h1> | |
| </div> | |
| <div id="auth-section"> | |
| <button id="sign-in-btn" class="bg-white text-gray-700 px-6 py-2 rounded-full shadow-md hover:bg-gray-100 transition flex items-center"> | |
| <i class="fab fa-google text-red-500 mr-2"></i> | |
| Sign In with Google | |
| </button> | |
| <div id="user-profile" class="hidden flex items-center space-x-4"> | |
| <img id="user-avatar" class="w-10 h-10 rounded-full" src="" alt="User Avatar"> | |
| <span id="user-name" class="font-medium text-gray-700"></span> | |
| <button id="sign-out-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-4xl mx-auto"> | |
| <!-- Home Section --> | |
| <section id="home" class="text-center py-16"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Create Your Digital Twin</h1> | |
| <p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p> | |
| <button id="get-started-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition"> | |
| Get Started | |
| </button> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="mb-16"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-user-circle"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3> | |
| <p class="text-gray-600">Generate high-quality avatars that capture your unique features.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-purple-500 text-3xl mb-4"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Animated Videos</h3> | |
| <p class="text-gray-600">Bring your avatar to life with custom animated videos.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-pink-500 text-3xl mb-4"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">AI Magic</h3> | |
| <p class="text-gray-600">Use AI to transform your photos into stunning digital art.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Section --> | |
| <section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Image Upload --> | |
| <div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="image-upload"> | |
| <i class="fas fa-images text-indigo-500 text-4xl mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Upload Images</h3> | |
| <p class="text-gray-500 mb-4">Upload at least 5 images of yourself from different angles</p> | |
| <input type="file" id="image-input" class="hidden" accept="image/*" multiple> | |
| <button class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full text-sm font-medium"> | |
| Select Files | |
| </button> | |
| </div> | |
| <!-- ZIP Upload --> | |
| <div class="upload-area rounded-lg p-8 text-center cursor-pointer" id="zip-upload"> | |
| <i class="fas fa-file-archive text-purple-500 text-4xl mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Upload ZIP File</h3> | |
| <p class="text-gray-500 mb-4">Compress your images into a single .zip file</p> | |
| <input type="file" id="zip-input" class="hidden" accept=".zip"> | |
| <button class="bg-purple-100 text-purple-600 px-4 py-2 rounded-full text-sm font-medium"> | |
| Select ZIP File | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Image Preview Carousel --> | |
| <div id="image-preview-container" class="hidden mt-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-md font-medium text-gray-700"> | |
| <span id="image-count">0</span> images selected | |
| </h3> | |
| <button id="clear-images" class="text-red-500 text-sm font-medium">Clear all</button> | |
| </div> | |
| <div id="image-carousel" class="flex space-x-4 overflow-x-auto pb-4"> | |
| <!-- Images will be added here dynamically --> | |
| </div> | |
| </div> | |
| <!-- Train Model Button --> | |
| <div id="train-model-section" class="hidden mt-8 text-center"> | |
| <button id="train-model-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition"> | |
| Train Your AI Model | |
| </button> | |
| </div> | |
| <!-- Training Progress --> | |
| <div id="training-progress" class="hidden mt-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Training in progress...</span> | |
| <span id="progress-percent" class="text-sm font-medium text-gray-700">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="bg-gradient-to-r from-indigo-500 to-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Clone Results --> | |
| <section id="results-section" class="hidden mb-12 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Your AI Clone Results</h2> | |
| <div class="flex flex-col items-center"> | |
| <div class="avatar-preview w-64 h-64 rounded-full bg-gray-100 mb-6 overflow-hidden flex items-center justify-center"> | |
| <img id="generated-avatar" src="" alt="Generated Avatar" class="hidden w-full h-full object-cover"> | |
| <i class="fas fa-user text-gray-400 text-6xl" id="avatar-placeholder"></i> | |
| </div> | |
| <button id="recreate-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition"> | |
| <i class="fas fa-sync-alt mr-2"></i> Recreate | |
| </button> | |
| <div class="mt-6 flex space-x-4"> | |
| <button class="share-btn bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter mr-2"></i> Share to Twitter | |
| </button> | |
| <button class="share-btn bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram mr-2"></i> Share to Instagram | |
| </button> | |
| <button class="share-btn bg-gray-700 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition"> | |
| <i class="fas fa-link mr-2"></i> Copy Link | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bring Avatar to Life --> | |
| <section id="animate-section" class="hidden mb-12 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Bring Your Avatar to Life</h2> | |
| <div class="mb-6"> | |
| <label for="prompt-input" class="block text-sm font-medium text-gray-700 mb-2">Enter a prompt for your avatar</label> | |
| <textarea id="prompt-input" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="E.g., 'A professional headshot with a blue background'"></textarea> | |
| </div> | |
| <button id="generate-video-btn" class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition"> | |
| <i class="fas fa-film mr-2"></i> Generate Video | |
| </button> | |
| <!-- Video Loading --> | |
| <div id="video-loading" class="hidden mt-8 text-center"> | |
| <div class="inline-block animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-500 mb-4"></div> | |
| <p class="text-gray-700">Generating your animated avatar... This may take a few moments.</p> | |
| </div> | |
| <!-- Video Preview --> | |
| <div id="video-preview" class="hidden mt-8"> | |
| <div class="bg-gray-100 rounded-xl overflow-hidden w-full aspect-video flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-purple-500 text-6xl opacity-70" id="video-play-icon"></i> | |
| </div> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="share-btn bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition"> | |
| <i class="fab fa-twitter mr-2"></i> Share | |
| </button> | |
| <button class="share-btn bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram mr-2"></i> Share | |
| </button> | |
| <button class="share-btn bg-gray-700 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Plans --> | |
| <section id="pricing" class="mb-12 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Free Plan --> | |
| <div class="plan-card border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-plan="free"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Free</h3> | |
| <p class="text-gray-600 text-sm">Basic features</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-2xl font-bold text-gray-800">$0</span> | |
| <span class="text-gray-500 text-sm">/month</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>5 AI Generations</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Standard Quality</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times-circle text-gray-300 mr-2"></i> | |
| <span>No Video Generation</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times-circle text-gray-300 mr-2"></i> | |
| <span>No Priority Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border-2 border-gray-300 text-gray-700 py-2 rounded-lg font-medium hover:bg-gray-50 transition"> | |
| Current Plan | |
| </button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="plan-card border-2 border-indigo-300 rounded-xl p-6 cursor-pointer bg-indigo-50" data-plan="pro"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Pro</h3> | |
| <p class="text-gray-600 text-sm">For creators</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-2xl font-bold text-gray-800">$19</span> | |
| <span class="text-gray-500 text-sm">/month</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>100 AI Generations</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>High Quality</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>5 Video Generations</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times-circle text-gray-300 mr-2"></i> | |
| <span>Standard Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition"> | |
| Upgrade to Pro | |
| </button> | |
| </div> | |
| <!-- Studio Plan --> | |
| <div class="plan-card border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-plan="studio"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Studio</h3> | |
| <p class="text-gray-600 text-sm">For professionals</p> | |
| </div> | |
| <div class="text-right"> | |
| <span class="text-2xl font-bold text-gray-800">$49</span> | |
| <span class="text-gray-500 text-sm">/month</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Unlimited Generations</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Ultra Quality</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Unlimited Videos</span> | |
| </li> | |
| <li class="flex items-center text-gray-700"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Priority Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border-2 border-gray-300 text-gray-700 py-2 rounded-lg font-medium hover:bg-gray-50 transition"> | |
| Choose Studio | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Plan Confirmation --> | |
| <div id="plan-confirmation" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg text-center"> | |
| <div class="flex justify-center items-center text-green-600"> | |
| <i class="fas fa-check-circle text-2xl mr-2"></i> | |
| <span class="font-medium">Your plan has been updated successfully!</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 bg-white py-8 border-t border-gray-200"> | |
| <div class="container mx-auto px-4 text-center text-gray-600"> | |
| <p>© 2023 AI Clone. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-4 right-4 hidden"> | |
| <div class="bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span id="toast-message">Link copied to clipboard!</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mock user data | |
| const mockUser = { | |
| name: "John Doe", | |
| avatar: "https://randomuser.me/api/portraits/men/1.jpg" | |
| }; | |
| // DOM Elements | |
| const signOutBtn = document.getElementById('sign-out-btn'); | |
| // Mock generated avatars | |
| const mockAvatars = [ | |
| "https://randomuser.me/api/portraits/men/2.jpg", | |
| "https://randomuser.me/api/portraits/men/3.jpg", | |
| "https://randomuser.me/api/portraits/men/4.jpg", | |
| "https://randomuser.me/api/portraits/men/5.jpg" | |
| ]; | |
| // DOM Elements | |
| const signInBtn = document.getElementById('sign-in-btn'); | |
| const userProfile = document.getElementById('user-profile'); | |
| const userName = document.getElementById('user-name'); | |
| const userAvatar = document.getElementById('user-avatar'); | |
| const imageUpload = document.getElementById('image-upload'); | |
| const zipUpload = document.getElementById('zip-upload'); | |
| const imageInput = document.getElementById('image-input'); | |
| const zipInput = document.getElementById('zip-input'); | |
| const imagePreviewContainer = document.getElementById('image-preview-container'); | |
| const imageCarousel = document.getElementById('image-carousel'); | |
| const imageCount = document.getElementById('image-count'); | |
| const clearImagesBtn = document.getElementById('clear-images'); | |
| const trainModelSection = document.getElementById('train-model-section'); | |
| const trainModelBtn = document.getElementById('train-model-btn'); | |
| const trainingProgress = document.getElementById('training-progress'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const generatedAvatar = document.getElementById('generated-avatar'); | |
| const avatarPlaceholder = document.getElementById('avatar-placeholder'); | |
| const recreateBtn = document.getElementById('recreate-btn'); | |
| const animateSection = document.getElementById('animate-section'); | |
| const promptInput = document.getElementById('prompt-input'); | |
| const generateVideoBtn = document.getElementById('generate-video-btn'); | |
| const videoLoading = document.getElementById('video-loading'); | |
| const videoPreview = document.getElementById('video-preview'); | |
| const pricingSection = document.getElementById('pricing-section'); | |
| const planCards = document.querySelectorAll('.plan-card'); | |
| const planConfirmation = document.getElementById('plan-confirmation'); | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toast-message'); | |
| // State | |
| let selectedImages = []; | |
| let currentAvatarIndex = 0; | |
| let selectedPlan = 'free'; | |
| // Event Listeners | |
| signInBtn.addEventListener('click', handleSignIn); | |
| signOutBtn.addEventListener('click', handleSignOut); | |
| imageUpload.addEventListener('click', () => imageInput.click()); | |
| zipUpload.addEventListener('click', () => zipInput.click()); | |
| imageInput.addEventListener('change', handleImageUpload); | |
| zipInput.addEventListener('change', handleZipUpload); | |
| clearImagesBtn.addEventListener('click', clearImages); | |
| trainModelBtn.addEventListener('click', trainModel); | |
| recreateBtn.addEventListener('click', recreateAvatar); | |
| generateVideoBtn.addEventListener('click', generateVideo); | |
| planCards.forEach(card => card.addEventListener('click', () => selectPlan(card.dataset.plan))); | |
| document.querySelectorAll('.share-btn').forEach(btn => btn.addEventListener('click', showToast)); | |
| // Functions | |
| function handleSignIn() { | |
| // Mock Google sign in | |
| signInBtn.classList.add('hidden'); | |
| userProfile.classList.remove('hidden'); | |
| userName.textContent = mockUser.name; | |
| userAvatar.src = mockUser.avatar; | |
| // Show upload section after sign in and scroll to it | |
| const uploadSection = document.getElementById('create'); | |
| uploadSection.classList.remove('hidden'); | |
| window.scrollTo({ | |
| top: uploadSection.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| function handleSignOut() { | |
| signInBtn.classList.remove('hidden'); | |
| userProfile.classList.add('hidden'); | |
| // Hide upload section and clear any uploaded images | |
| document.getElementById('create').classList.add('hidden'); | |
| clearImages(); | |
| // Scroll back to top | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| function handleImageUpload(e) { | |
| const files = Array.from(e.target.files); | |
| if (files.length < 5) { | |
| alert('Please upload at least 5 images'); | |
| return; | |
| } | |
| selectedImages = files.slice(0, 5); // Limit to 5 images | |
| updateImagePreview(); | |
| // Show the train model button if we have enough images | |
| trainModelSection.classList.remove('hidden'); | |
| } | |
| function handleZipUpload(e) { | |
| if (e.target.files.length > 0) { | |
| // Show the train model button when ZIP is uploaded | |
| trainModelSection.classList.remove('hidden'); | |
| showToast("ZIP file uploaded successfully!"); | |
| } | |
| } | |
| function updateImagePreview() { | |
| imageCarousel.innerHTML = ''; | |
| imageCount.textContent = selectedImages.length; | |
| selectedImages.forEach((file, index) => { | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| const imgContainer = document.createElement('div'); | |
| imgContainer.className = 'flex-shrink-0 relative'; | |
| const img = document.createElement('img'); | |
| img.src = e.target.result; | |
| img.className = 'w-24 h-24 rounded-lg object-cover'; | |
| img.alt = `Preview ${index + 1}`; | |
| imgContainer.appendChild(img); | |
| imageCarousel.appendChild(imgContainer); | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| imagePreviewContainer.classList.remove('hidden'); | |
| } | |
| function clearImages() { | |
| selectedImages = []; | |
| imageInput.value = ''; | |
| imagePreviewContainer.classList.add('hidden'); | |
| trainModelSection.classList.add('hidden'); | |
| } | |
| function trainModel() { | |
| // Show training progress | |
| trainingProgress.classList.remove('hidden'); | |
| trainModelSection.classList.add('hidden'); | |
| // Simulate training progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressPercent.textContent = `${Math.floor(progress)}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| trainingProgress.classList.add('hidden'); | |
| showResults(); | |
| }, 500); | |
| } | |
| }, 500); | |
| } | |
| function showResults() { | |
| resultsSection.classList.remove('hidden'); | |
| currentAvatarIndex = 0; | |
| displayGeneratedAvatar(); | |
| } | |
| function displayGeneratedAvatar() { | |
| avatarPlaceholder.classList.add('hidden'); | |
| generatedAvatar.classList.remove('hidden'); | |
| generatedAvatar.src = mockAvatars[currentAvatarIndex]; | |
| } | |
| function recreateAvatar() { | |
| avatarPlaceholder.classList.remove('hidden'); | |
| generatedAvatar.classList.add('hidden'); | |
| // Simulate loading | |
| setTimeout(() => { | |
| currentAvatarIndex = (currentAvatarIndex + 1) % mockAvatars.length; | |
| displayGeneratedAvatar(); | |
| showToast("New avatar generated!"); | |
| }, 800); | |
| } | |
| function generateVideo() { | |
| if (!promptInput.value.trim()) { | |
| showToast("Please enter a prompt first"); | |
| return; | |
| } | |
| videoLoading.classList.remove('hidden'); | |
| videoPreview.classList.add('hidden'); | |
| // Simulate video generation | |
| setTimeout(() => { | |
| videoLoading.classList.add('hidden'); | |
| videoPreview.classList.remove('hidden'); | |
| showToast("Video generated successfully!"); | |
| }, 3000); | |
| } | |
| function selectPlan(plan) { | |
| selectedPlan = plan; | |
| // Update UI | |
| planCards.forEach(card => { | |
| if (card.dataset.plan === plan) { | |
| card.classList.add('selected-plan'); | |
| card.querySelector('button').classList.add('bg-indigo-600', 'text-white'); | |
| card.querySelector('button').classList.remove('border-gray-300', 'text-gray-700'); | |
| } else { | |
| card.classList.remove('selected-plan'); | |
| card.querySelector('button').classList.remove('bg-indigo-600', 'text-white'); | |
| card.querySelector('button').classList.add('border-gray-300', 'text-gray-700'); | |
| } | |
| }); | |
| // Show confirmation | |
| planConfirmation.classList.remove('hidden'); | |
| setTimeout(() => { | |
| planConfirmation.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| function showToast(message) { | |
| toastMessage.textContent = message; | |
| toast.classList.remove('hidden'); | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Navigation functionality | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const targetId = link.getAttribute('href').substring(1); | |
| const targetElement = document.getElementById(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Get Started button | |
| document.getElementById('get-started-btn').addEventListener('click', () => { | |
| document.getElementById('sign-in-btn').click(); | |
| }); | |
| // Mobile menu toggle (placeholder - would need additional HTML/CSS) | |
| document.getElementById('mobile-menu-button').addEventListener('click', () => { | |
| showToast("Mobile menu would open here"); | |
| }); | |
| </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=rahul7star/ai-clone-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |