Hugging Face's logo

Spaces:
rahul7star
/
ai-clone
Running

App Files Community
ai-clone / index.html
rahul7star's picture
rahul7star
still upload images not working - Follow Up Deployment
0bc8005 verified
raw
history blame contribute delete
55.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Clone Creator</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, #6e8efb, #a777e3);
}
.upload-area {
border: 2px dashed #a777e3;
transition: all 0.3s ease;
cursor: pointer;
}
.upload-area:hover {
border-color: #6e8efb;
background-color: rgba(110, 142, 251, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.upload-area:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.upload-area.active {
border-color: #6e8efb;
background-color: rgba(110, 142, 251, 0.15);
}
.progress-bar {
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #6e8efb, #a777e3);
transition: width 0.3s ease;
}
.result-card {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.result-card:hover {
transform: translateY(-5px);
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- User Profile Header -->
<header class="gradient-bg text-white py-6 hidden" id="user-header">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img id="user-avatar" src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full">
<span id="user-name" class="font-medium">John Doe</span>
</div>
<button id="signout-btn" class="bg-white text-purple-600 hover:bg-gray-100 font-medium py-2 px-4 rounded-full transition">
Sign Out
</button>
</div>
</div>
</header>
<!-- Main Header (hidden after login) -->
<header class="gradient-bg text-white py-6 hidden" id="main-header">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">AI Clone Creator</h1>
<nav>
<ul class="flex space-x-6 items-center">
<li><a href="#image-clone" class="hover:text-gray-200 transition">Image Clone</a></li>
<li><a href="#video-clone" class="hover:text-gray-200 transition">Video Clone</a></li>
<li><a href="#pricing" class="hover:text-gray-200 transition">Pricing</a></li>
<li><a href="#about" class="hover:text-gray-200 transition">About</a></li>
<li>
<button id="signin-btn" class="bg-white text-purple-600 hover:bg-gray-100 font-medium py-2 px-4 rounded-full transition">
Sign In
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
<!-- Hero Section -->
<section class="text-center mb-20">
<h2 class="text-4xl font-bold mb-4">Create Your Digital Twin</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Upload your photo and we'll create an AI clone that can generate images and videos of you in any scenario.
</p>
</section>
<!-- Image Clone Section -->
<section id="image-clone" class="mb-20">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<!-- Upload Area -->
<div class="md:w-1/2 p-8">
<h3 class="text-2xl font-bold mb-6">Create Your Image Clone</h3>
<p class="text-gray-600 mb-6">
Upload a clear photo of yourself (face forward, good lighting) to create your digital twin.
</p>
<div class="mb-6">
<h4 class="text-lg font-medium mb-4">Upload Options</h4>
<div class="grid grid-cols-2 gap-4 mb-4">
<div id="images-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
<input type="file" id="image-upload" class="hidden" accept="image/*" multiple>
<div id="images-upload-content" class="flex flex-col items-center justify-center">
<i class="fas fa-images text-3xl text-purple-500 mb-3"></i>
<p class="font-medium mb-1">Upload Multiple Images</p>
<p class="text-sm text-gray-500">(Minimum 5 required)</p>
<button id="images-upload-btn" class="mt-3 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-1.5 px-4 rounded-full transition">
Open Gallery
</button>
</div>
</div>
<div id="zip-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
<input type="file" id="zip-upload-input" class="hidden" accept=".zip">
<div id="zip-upload-content" class="flex flex-col items-center justify-center">
<i class="fas fa-file-archive text-3xl text-purple-500 mb-3"></i>
<p class="font-medium mb-1">Upload ZIP File</p>
<p class="text-sm text-gray-500">(Contains training images)</p>
<button id="zip-upload-btn" class="mt-3 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-1.5 px-4 rounded-full transition">
Select ZIP
</button>
</div>
</div>
</div>
<div id="upload-preview-container" class="hidden">
<div id="images-preview" class="hidden mb-4">
<p class="text-sm font-medium mb-2"><span id="image-count">0</span> images selected</p>
<div class="flex space-x-2 overflow-x-auto pb-2" style="max-height: 200px; flex-wrap: wrap; gap: 8px;">
<!-- Images will be added here -->
</div>
> </div>
<div id="zip-preview" class="hidden mb-4">
<p class="text-sm font-medium mb-2">ZIP file ready for training</p>
<div class="flex items-center text-gray-500">
<i class="fas fa-file-archive mr-2"></i>
<span id="zip-filename">training_images.zip</span>
</div>
</div>
<button id="train-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2.5 px-6 rounded-lg transition">
Train Model
</button>
</div>
<div id="upload-progress" class="hidden">
<div class="flex items-center justify-center mb-4">
<div class="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<p class="font-medium mb-2">Training your AI model...</p>
<div class="progress-bar w-full mb-2">
<div id="progress-fill" class="progress-fill" style="width: 0%"></div>
</div>
<p id="progress-text" class="text-sm text-gray-500">0% complete</p>
<p class="text-xs text-gray-500 mt-1">Processing 20 facial features...</p>
</div>
<div id="upload-preview" class="hidden">
<div class="flex justify-center mb-4">
<img id="preview-image" src="" alt="Preview" class="w-32 h-32 rounded-full object-cover border-4 border-purple-200">
</div>
<p class="font-medium mb-2">Image uploaded successfully!</p>
<button id="generate-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-6 rounded-full transition">
Create Avatar
</button>
<p class="text-xs text-gray-500 mt-2">This may take 1-2 minutes</p>
</div>
</div>
</div>
<!-- Result Area -->
<div class="md:w-1/2 bg-gray-50 p-8">
<h3 class="text-2xl font-bold mb-6">Your AI Clone Results</h3>
<p class="text-gray-600 mb-6">
Your digital twin will appear here. Try different styles and scenarios.
</p>
<div id="result-area" class="hidden">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="result-card bg-white rounded-lg overflow-hidden">
<img id="result-1" src="" alt="AI Clone 1" class="w-full h-48 object-cover">
<div class="p-4">
<p class="font-medium">Professional Headshot</p>
<button class="download-btn mt-2 text-sm text-purple-500 hover:text-purple-700" data-id="1">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
<div class="result-card bg-white rounded-lg overflow-hidden">
<img id="result-2" src="" alt="AI Clone 2" class="w-full h-48 object-cover">
<div class="p-4">
<p class="font-medium">Fantasy Character</p>
<button class="download-btn mt-2 text-sm text-purple-500 hover:text-purple-700" data-id="2">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
</div>
<div class="mb-6">
<label for="style-select" class="block text-sm font-medium text-gray-700 mb-2">Select Style</label>
<select id="style-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
<option value="professional">Professional</option>
<option value="fantasy">Fantasy</option>
<option value="anime">Anime</option>
<option value="watercolor">Watercolor</option>
<option value="cyberpunk">Cyberpunk</option>
</select>
</div>
<button id="regenerate-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg transition">
<i class="fas fa-sync-alt mr-2"></i> Regenerate with New Style
</button>
</div>
<div id="empty-result" class="flex flex-col items-center justify-center py-12">
<i class="fas fa-user-astronaut text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your AI clone will appear here after processing</p>
</div>
</div>
</div>
</div>
</section>
<!-- Video Clone Section -->
<section id="video-clone" class="mb-20">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<!-- Prompt Area -->
<div class="md:w-1/2 p-8">
<h3 class="text-2xl font-bold mb-6">Create Your Video Clone</h3>
<p class="text-gray-600 mb-6">
Describe the scenario you want your digital twin to appear in.
</p>
<div class="mb-6">
<label for="video-prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe the video</label>
<textarea id="video-prompt" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="Example: A video of me giving a TED talk about artificial intelligence on a futuristic stage with holograms..."></textarea>
</div>
<div class="mb-6">
<label for="voice-select" class="block text-sm font-medium text-gray-700 mb-2">Select Voice</label>
<select id="voice-select" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500">
<option value="male1">Male Voice 1</option>
<option value="male2">Male Voice 2</option>
<option value="female1">Female Voice 1</option>
<option value="female2">Female Voice 2</option>
<option value="custom">Use My Voice (requires recording)</option>
</select>
</div>
<button id="generate-video-btn" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg transition">
<i class="fas fa-video mr-2"></i> Generate Video
</button>
<div id="video-progress" class="hidden mt-6">
<p class="font-medium mb-2">Generating your video...</p>
<div class="progress-bar w-full mb-2">
<div id="video-progress-fill" class="progress-fill" style="width: 0%"></div>
</div>
<p id="video-progress-text" class="text-sm text-gray-500">0% complete</p>
<p class="text-sm text-gray-500 mt-2">This may take a few minutes. You can leave this page and we'll notify you when it's ready.</p>
</div>
</div>
<!-- Video Result Area -->
<div class="md:w-1/2 bg-gray-50 p-8">
<h3 class="text-2xl font-bold mb-6">Your Video Clone</h3>
<p class="text-gray-600 mb-6">
Your AI-generated video will appear here.
</p>
<div id="video-result" class="hidden">
<div class="video-container rounded-lg overflow-hidden mb-4">
<video id="generated-video" controls class="w-full">
Your browser does not support the video tag.
</video>
</div>
<div class="flex justify-between items-center">
<div>
<p class="font-medium" id="video-title">TED Talk about AI</p>
<p class="text-sm text-gray-500" id="video-duration">2:34</p>
</div>
<button id="download-video-btn" class="text-purple-500 hover:text-purple-700">
<i class="fas fa-download text-lg"></i>
</button>
</div>
</div>
<div id="empty-video" class="flex flex-col items-center justify-center py-12">
<i class="fas fa-film text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your AI video will appear here after processing</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold mb-6">Choose Your Plan</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-xl p-6 hover:border-purple-300 transition">
<h4 class="text-xl font-bold mb-2">Free</h4>
<p class="text-3xl font-bold mb-4">$0<span class="text-sm font-normal text-gray-500">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5 AI Generations</li>
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic Styles</li>
<li class="flex items-center text-gray-400"><i class="fas fa-times text-red-400 mr-2"></i> Video Generation</li>
</ul>
<button class="w-full border border-purple-500 text-purple-500 hover:bg-purple-50 font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="free">
Select Plan
</button>
</div>
<div class="border-2 border-purple-500 rounded-xl p-6 bg-purple-50">
<div class="bg-purple-500 text-white text-xs font-bold px-2 py-1 rounded-full inline-block mb-3">POPULAR</div>
<h4 class="text-xl font-bold mb-2">Pro</h4>
<p class="text-3xl font-bold mb-4">$19<span class="text-sm font-normal text-gray-500">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 100 AI Generations</li>
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Premium Styles</li>
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5 Video Minutes</li>
</ul>
<button class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="pro">
Select Plan
</button>
</div>
<div class="border border-gray-200 rounded-xl p-6 hover:border-purple-300 transition">
<h4 class="text-xl font-bold mb-2">Studio</h4>
<p class="text-3xl font-bold mb-4">$49<span class="text-sm font-normal text-gray-500">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited Generations</li>
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All Styles</li>
<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 30 Video Minutes</li>
</ul>
<button class="w-full border border-purple-500 text-purple-500 hover:bg-purple-50 font-medium py-2 px-4 rounded-lg transition plan-select" data-plan="studio">
Select Plan
</button>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="bg-white rounded-xl shadow-lg p-8 mb-12">
<h3 class="text-2xl font-bold mb-6">About AI Clone Creators</h3>
<div class="prose max-w-none">
<p class="mb-4">
AI Clone Creator uses advanced artificial intelligence to generate realistic digital twins from just a single photo. Our technology can create images and videos of you in any scenario you imagine.
</p>
<p class="mb-4">
<strong>How it works:</strong> We analyze your facial features, expressions, and voice (if provided) to create a personalized AI model. This model can then generate new content featuring your digital twin.
</p>
<p class="mb-4">
<strong>Privacy:</strong> Your data is processed securely and never shared with third parties. You maintain full control over your digital twin.
</p>
<div class="bg-purple-50 border-l-4 border-purple-500 p-4 mb-4">
<p class="text-purple-700">
<strong>Note:</strong> The current version is a demonstration. Actual AI processing would require server-side implementation.
</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<h4 class="text-xl font-bold mb-4">AI Clone Creator</h4>
<p class="text-gray-400">Create your digital twin with AI</p>
</div>
<div class="grid grid-cols-2 gap-8">
<div>
<h5 class="text-sm font-semibold uppercase tracking-wider mb-4">Links</h5>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="#image-clone" class="text-gray-400 hover:text-white transition">Image Clone</a></li>
<li><a href="#video-clone" class="text-gray-400 hover:text-white transition">Video Clone</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
</ul>
</div>
<div>
<h5 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h5>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
<p>&copy; 2023 AI Clone Creator. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Google Sign In
googleSignin.addEventListener('click', () => {
// Simulate Google OAuth flow
setTimeout(() => {
signinModal.classList.add('hidden');
document.getElementById('main-header').classList.add('hidden');
document.getElementById('user-header').classList.remove('hidden');
// Set mock user data
document.getElementById('user-name').textContent = 'Alex Johnson';
document.getElementById('user-avatar').src = 'https://randomuser.me/api/portraits/men/32.jpg';
// Show toast notification
showToast('Signed in successfully!');
}, 1500);
});
// Sign Out
document.getElementById('signout-btn').addEventListener('click', () => {
document.getElementById('user-header').classList.add('hidden');
document.getElementById('main-header').classList.remove('hidden');
signinModal.classList.remove('hidden');
showToast('Signed out successfully');
});
// Image Upload - Handle both button and container clicks
const handleImageUploadClick = () => {
const input = document.getElementById('image-upload');
if (input) {
input.click();
}
};
document.getElementById('images-upload-btn').addEventListener('click', handleImageUploadClick);
document.getElementById('images-upload').addEventListener('click', handleImageUploadClick);
// ZIP Upload
document.getElementById('zip-upload-btn').addEventListener('click', () => {
document.getElementById('zip-upload-input').click();
});
// Click on zip upload area
document.getElementById('zip-upload').addEventListener('click', () => {
document.getElementById('zip-upload-input').click();
});
// Handle image upload
document.getElementById('image-upload').addEventListener('change', (e) => {
const files = e.target.files;
if (files.length < 5) {
showToast('Please upload at least 5 images', 'error');
return;
}
document.getElementById('upload-preview-container').classList.remove('hidden');
document.getElementById('images-preview').classList.remove('hidden');
document.getElementById('zip-preview').classList.add('hidden');
// Add active state to images upload option
document.getElementById('images-upload').classList.add('active');
document.getElementById('zip-upload').classList.remove('active');
const previewContainer = document.querySelector('#images-preview div');
previewContainer.innerHTML = '';
document.getElementById('image-count').textContent = files.length;
// Show all images as preview in a scrollable container
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (!file.type.match('image.*')) continue;
const reader = new FileReader();
reader.onload = function(event) {
const img = document.createElement('img');
img.src = event.target.result;
img.className = 'w-20 h-20 object-cover rounded-lg';
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
}
// Also set the first image as the main preview
const firstFile = files[0];
if (firstFile && firstFile.type.match('image.*')) {
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('preview-image').src = event.target.result;
};
reader.readAsDataURL(firstFile);
}
});
// Handle ZIP upload
document.getElementById('zip-upload-input').addEventListener('change', (e) => {
if (e.target.files.length) {
document.getElementById('upload-preview').classList.remove('hidden');
document.getElementById('images-preview').classList.add('hidden');
document.getElementById('zip-preview').classList.remove('hidden');
document.getElementById('zip-filename').textContent = e.target.files[0].name;
// Add active state to zip upload option
document.getElementById('zip-upload').classList.add('active');
document.getElementById('images-upload').classList.remove('active');
}
});
// Train Model
document.getElementById('train-btn').addEventListener('click', () => {
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar w-full mt-4';
progressBar.innerHTML = '<div class="progress-fill" style="width: 0%"></div>';
document.getElementById('upload-preview').appendChild(progressBar);
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 5;
if (progress > 100) progress = 100;
progressBar.querySelector('.progress-fill').style.width = `${progress}%`;
if (progress === 100) {
clearInterval(interval);
setTimeout(() => {
document.getElementById('result-area').classList.remove('hidden');
document.getElementById('empty-result').classList.add('hidden');
showToast('Model trained successfully!');
}, 500);
}
}, 200);
});
// Plan Selection
document.querySelectorAll('.plan-select').forEach(btn => {
btn.addEventListener('click', function() {
const plan = this.getAttribute('data-plan');
const planName = plan.charAt(0).toUpperCase() + plan.slice(1);
// Update UI to show selected plan
document.querySelectorAll('.plan-select').forEach(b => {
b.classList.remove('bg-purple-500', 'text-white');
b.classList.add('border-purple-500', 'text-purple-500', 'hover:bg-purple-50');
});
if (plan !== 'free') {
this.classList.remove('border-purple-500', 'text-purple-500', 'hover:bg-purple-50');
this.classList.add('bg-purple-500', 'text-white');
}
showToast(`${planName} plan selected`);
});
});
// Share Buttons
document.querySelectorAll('.share-btn').forEach(btn => {
btn.addEventListener('click', function() {
const platform = this.getAttribute('data-platform');
let message = 'Link copied to clipboard';
if (platform === 'twitter') message = 'Shared to Twitter';
if (platform === 'instagram') message = 'Shared to Instagram';
showToast(message);
});
});
// Toast Notification
function showToast(message, type = 'success') {
const toast = document.createElement('div');
toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
type === 'error' ? 'bg-red-500' : 'bg-green-500'
}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.remove();
}, 3000);
}
// Image Upload Functionality
const uploadContainer = document.getElementById('upload-container');
const uploadContent = document.getElementById('upload-content');
const uploadProgress = document.getElementById('upload-progress');
const uploadPreview = document.getElementById('upload-preview');
const imageUpload = document.getElementById('image-upload');
const uploadBtn = document.getElementById('upload-btn');
const generateBtn = document.getElementById('generate-btn');
const previewImage = document.getElementById('preview-image');
const resultArea = document.getElementById('result-area');
const emptyResult = document.getElementById('empty-result');
const progressFill = document.getElementById('progress-fill');
const progressText = document.getElementById('progress-text');
const result1 = document.getElementById('result-1');
const result2 = document.getElementById('result-2');
const regenerateBtn = document.getElementById('regenerate-btn');
const styleSelect = document.getElementById('style-select');
// Video Generation Functionality
const generateVideoBtn = document.getElementById('generate-video-btn');
const videoPrompt = document.getElementById('video-prompt');
const videoProgress = document.getElementById('video-progress');
const videoProgressFill = document.getElementById('video-progress-fill');
const videoProgressText = document.getElementById('video-progress-text');
const videoResult = document.getElementById('video-result');
const emptyVideo = document.getElementById('empty-video');
const generatedVideo = document.getElementById('generated-video');
const videoTitle = document.getElementById('video-title');
const videoDuration = document.getElementById('video-duration');
const downloadVideoBtn = document.getElementById('download-video-btn');
// Handle drag and drop
uploadContainer.addEventListener('dragover', (e) => {
e.preventDefault();
uploadContainer.classList.add('border-purple-500', 'bg-purple-50');
});
uploadContainer.addEventListener('dragleave', () => {
uploadContainer.classList.remove('border-purple-500', 'bg-purple-50');
});
uploadContainer.addEventListener('drop', (e) => {
e.preventDefault();
uploadContainer.classList.remove('border-purple-500', 'bg-purple-50');
if (e.dataTransfer.files.length) {
handleImageUpload(e.dataTransfer.files[0]);
}
});
// Handle file selection via button
uploadBtn.addEventListener('click', () => {
imageUpload.click();
});
imageUpload.addEventListener('change', (e) => {
if (e.target.files.length) {
handleImageUpload(e.target.files[0]);
}
});
// Process the uploaded image
function handleImageUpload(file) {
// Check if file is an image
if (!file.type.match('image.*')) {
alert('Please upload an image file (JPEG, PNG)');
return;
}
// Check file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('File size exceeds 5MB limit');
return;
}
// Show upload progress
uploadContent.classList.add('hidden');
uploadProgress.classList.remove('hidden');
// Simulate upload progress
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(progressInterval);
// Show preview after a short delay
setTimeout(() => {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
uploadProgress.classList.add('hidden');
uploadPreview.classList.remove('hidden');
};
reader.readAsDataURL(file);
}, 500);
}
}, 200);
}
// Generate AI clone images
generateBtn.addEventListener('click', function() {
// Mock API call to create avatar
const mockApiCall = () => {
return new Promise((resolve) => {
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 5;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(interval);
resolve();
}
}, 200);
});
};
// Simulate AI processing with mock API
mockApiCall().then(() => {
uploadPreview.classList.add('hidden');
uploadProgress.classList.remove('hidden');
progressFill.style.width = '0%';
progressText.textContent = '0% complete';
let progress = 0;
const processingInterval = setInterval(() => {
progress += Math.random() * 5;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(processingInterval);
// Show results after a short delay
setTimeout(() => {
uploadProgress.classList.add('hidden');
emptyResult.classList.add('hidden');
resultArea.classList.remove('hidden');
// Generate sample results (in a real app, these would come from an AI API)
result1.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
}, 500);
}
}, 200);
});
// Regenerate with new style
regenerateBtn.addEventListener('click', function() {
const selectedStyle = styleSelect.value;
// Show processing
resultArea.classList.add('hidden');
uploadProgress.classList.remove('hidden');
progressFill.style.width = '0%';
progressText.textContent = '0% complete';
let progress = 0;
const processingInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressFill.style.width = `${progress}%`;
progressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(processingInterval);
// Show new results after a short delay
setTimeout(() => {
uploadProgress.classList.add('hidden');
resultArea.classList.remove('hidden');
// Generate different sample results based on style
if (selectedStyle === 'professional') {
result1.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'fantasy') {
result1.src = 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'anime') {
result1.src = 'https://images.unsplash.com/photo-1503249023995-51b0f3778ccb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'watercolor') {
result1.src = 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
} else if (selectedStyle === 'cyberpunk') {
result1.src = 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
result2.src = 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80';
}
}, 500);
}
}, 200);
});
// Download image buttons
document.querySelectorAll('.download-btn').forEach(btn => {
btn.addEventListener('click', function() {
const id = this.getAttribute('data-id');
const imgSrc = document.getElementById(`result-${id}`).src;
// Create a temporary anchor element to trigger download
const a = document.createElement('a');
a.href = imgSrc;
a.download = `ai-clone-${id}.jpg`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
showToast('Download started!');
});
});
// Generate video from prompt
generateVideoBtn.addEventListener('click', function() {
const prompt = videoPrompt.value.trim();
const voice = document.getElementById('voice-select').value;
if (!prompt) {
showToast('Please describe the video you want to generate', 'error');
return;
}
// Disable button during processing
generateVideoBtn.disabled = true;
generateVideoBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
// Show processing
videoProgress.classList.remove('hidden');
// Simulate video generation progress
let progress = 0;
const videoInterval = setInterval(() => {
progress += Math.random() * 3;
if (progress > 100) progress = 100;
videoProgressFill.style.width = `${progress}%`;
videoProgressText.textContent = `${Math.round(progress)}% complete`;
if (progress === 100) {
clearInterval(videoInterval);
// Show video after a short delay
setTimeout(() => {
videoProgress.classList.add('hidden');
emptyVideo.classList.add('hidden');
videoResult.classList.remove('hidden');
// Set sample video (in a real app, this would be the generated video)
generatedVideo.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
generatedVideo.load();
// Set video info
videoTitle.textContent = prompt.substring(0, 30) + (prompt.length > 30 ? '...' : '');
videoDuration.textContent = '1:45';
// Re-enable button
generateVideoBtn.disabled = false;
generateVideoBtn.innerHTML = '<i class="fas fa-video mr-2"></i> Generate Video';
showToast('Video generated successfully!');
}, 1000);
}
}, 300);
});
// Download video button
downloadVideoBtn.addEventListener('click', function() {
if (!generatedVideo.src) {
showToast('No video available to download', 'error');
return;
}
// Create a temporary anchor element to trigger download
const a = document.createElement('a');
a.href = generatedVideo.src;
a.download = 'ai-video-clone.mp4';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
showToast('Video download started!');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
});
</script>
<!-- Sign In Modal (shown by default) -->
<div id="signin-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-xl p-8 w-full max-w-md">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Sign In</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<button id="google-signin" class="w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg flex items-center justify-center transition mb-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google" class="w-5 h-5 mr-2">
Continue with Google
</button>
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">or</span>
</div>
</div>
<form id="email-signin" class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="your@email.com" required>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500" placeholder="••••••••" required>
</div>
<button type="submit" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-4 rounded-lg transition">
Sign In
</button>
</form>
<p class="text-sm text-gray-500 mt-4 text-center">
Don't have an account? <a href="#" class="text-purple-500 hover:text-purple-700">Sign up</a>
</p>
</div>
</div>
<script>
// Sign in modal functionality
const signinBtn = document.getElementById('signin-btn');
const signinModal = document.getElementById('signin-modal');
const closeModal = document.getElementById('close-modal');
const googleSignin = document.getElementById('google-signin');
const emailSignin = document.getElementById('email-signin');
signinBtn.addEventListener('click', () => {
signinModal.classList.remove('hidden');
});
closeModal.addEventListener('click', () => {
signinModal.classList.add('hidden');
});
googleSignin.addEventListener('click', () => {
// In a real app, this would trigger Google OAuth flow
alert('Redirecting to Google sign in...');
});
emailSignin.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Mock login - in a real app this would call your backend
alert(`Mock login with email: ${email}`);
signinModal.classList.add('hidden');
signinBtn.textContent = 'My Account';
});
</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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>