Spaces:
Running
Running
Build a ai tool which is generate UGC reels for free without any watermark. And also with fre ai avatar talking with ultra lip syncing for free and also easily downloadable - Initial Deployment
9b2586c verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Reel Generator | Create UGC Reels with AI Avatars</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, #667eea 0%, #764ba2 100%); | |
| } | |
| .video-preview { | |
| aspect-ratio: 9/16; | |
| background: linear-gradient(45deg, #f3f4f6, #e5e7eb); | |
| } | |
| .avatar-option:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .waveform { | |
| height: 40px; | |
| background: repeating-linear-gradient(90deg, #6366f1, #6366f1 2px, #e0e7ff 2px, #e0e7ff 4px); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-2xl"></i> | |
| <h1 class="text-2xl font-bold">AI Reel Generator</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200">Features</a> | |
| <a href="#" class="hover:text-gray-200">Templates</a> | |
| <a href="#" class="hover:text-gray-200">Pricing</a> | |
| <a href="#" class="hover:text-gray-200">FAQ</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Create Stunning UGC Reels with AI</h2> | |
| <p class="text-xl mb-8">Generate professional-quality reels with ultra-realistic AI avatars and perfect lip-syncing - completely free with no watermarks!</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition"> | |
| <i class="fas fa-play mr-2"></i> Try It Now | |
| </button> | |
| <button class="border border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition"> | |
| <i class="fas fa-book mr-2"></i> Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="video-preview w-80 rounded-xl overflow-hidden shadow-2xl relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-6xl text-indigo-500 bg-white rounded-full"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-400 mr-3"></div> | |
| <div> | |
| <p class="text-white font-medium">AI Avatar</p> | |
| <p class="text-gray-300 text-sm">Ultra lip-sync</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Powerful Features, Zero Cost</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-user-robot text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">AI Avatars</h3> | |
| <p class="text-gray-600">Choose from 50+ ultra-realistic AI avatars that look and move like real humans.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lips text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Perfect Lip-Sync</h3> | |
| <p class="text-gray-600">Our advanced AI ensures perfect synchronization between avatar lips and your audio.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-download text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">No Watermark</h3> | |
| <p class="text-gray-600">Download high-quality reels instantly with no watermarks or hidden fees.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Generator Tool --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Create Your AI Reel</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <!-- Preview Panel --> | |
| <div class="lg:w-1/3 p-6 border-b lg:border-b-0 lg:border-r border-gray-200"> | |
| <h3 class="text-xl font-semibold mb-4">Preview</h3> | |
| <div class="video-preview w-full rounded-lg overflow-hidden relative"> | |
| <div id="preview-content" class="absolute inset-0 flex flex-col items-center justify-center p-4 text-center"> | |
| <i class="fas fa-user-robot text-5xl text-indigo-500 mb-4"></i> | |
| <p class="text-gray-600">Your AI reel will appear here</p> | |
| </div> | |
| <div id="waveform" class="waveform absolute bottom-0 left-0 right-0 hidden"></div> | |
| </div> | |
| <div id="progress-container" class="mt-4 hidden"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Generating...</span> | |
| <span id="progress-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="progress-bar" class="progress-bar bg-indigo-600 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <button id="download-btn" class="w-full mt-4 bg-indigo-600 text-white py-3 rounded-lg font-semibold hidden"> | |
| <i class="fas fa-download mr-2"></i> Download Reel | |
| </button> | |
| </div> | |
| <!-- Controls Panel --> | |
| <div class="lg:w-2/3 p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Script Input --> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Script for AI Avatar</label> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Enter what you want your AI avatar to say..."></textarea> | |
| </div> | |
| <!-- Voice Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Voice Style</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Friendly Female</option> | |
| <option>Professional Male</option> | |
| <option>Energetic Teen</option> | |
| <option>Wise Elder</option> | |
| <option>Casual Unisex</option> | |
| </select> | |
| </div> | |
| <!-- Avatar Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">AI Avatar</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="avatar-option cursor-pointer p-2 rounded-lg border border-gray-200 text-center transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full mx-auto mb-2 overflow-hidden"> | |
| <img src="https://placehold.co/80x80/6366f1/white?text=AI" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs">Business</span> | |
| </div> | |
| <div class="avatar-option cursor-pointer p-2 rounded-lg border border-gray-200 text-center transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full mx-auto mb-2 overflow-hidden"> | |
| <img src="https://placehold.co/80x80/6366f1/white?text=AI" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs">Casual</span> | |
| </div> | |
| <div class="avatar-option cursor-pointer p-2 rounded-lg border border-gray-200 text-center transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full mx-auto mb-2 overflow-hidden"> | |
| <img src="https://placehold.co/80x80/6366f1/white?text=AI" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs">Influencer</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Background Music --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Background Music</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>None</option> | |
| <option>Upbeat Corporate</option> | |
| <option>Chill Vibes</option> | |
| <option>Trendy Pop</option> | |
| <option>Epic Cinematic</option> | |
| </select> | |
| </div> | |
| <!-- Video Style --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Video Style</label> | |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Modern Reel</option> | |
| <option>Product Showcase</option> | |
| <option>Tutorial Style</option> | |
| <option>Testimonial</option> | |
| <option>News Format</option> | |
| </select> | |
| </div> | |
| <!-- Generate Button --> | |
| <div class="md:col-span-2"> | |
| <button id="generate-btn" class="w-full bg-indigo-600 text-white py-4 rounded-lg font-semibold hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-magic mr-3"></i> Generate AI Reel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What Creators Are Saying</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Sarah K.</h4> | |
| <p class="text-gray-500 text-sm">Content Creator</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"This tool saved me hours of filming and editing. The AI avatars look so real, and my engagement has doubled!"</p> | |
| <div class="mt-3 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Michael T.</h4> | |
| <p class="text-gray-500 text-sm">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The lip-sync is incredible - no one believes it's not a real person. We've scaled our content production 10x."</p> | |
| <div class="mt-3 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Jessica L.</h4> | |
| <p class="text-gray-500 text-sm">Small Business Owner</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Free with no watermark? Unbelievable value. My social media has never looked more professional."</p> | |
| <div class="mt-3 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>Is this really free with no watermarks?</span> | |
| <i class="fas fa-chevron-down text-indigo-500"></i> | |
| </button> | |
| <div class="mt-3 text-gray-600 hidden"> | |
| Yes! Unlike other platforms, we don't charge for basic features or add watermarks to your downloads. You can create and download unlimited reels completely free. | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>How realistic are the AI avatars?</span> | |
| <i class="fas fa-chevron-down text-indigo-500"></i> | |
| </button> | |
| <div class="mt-3 text-gray-600 hidden"> | |
| Our avatars use cutting-edge neural rendering technology that captures subtle facial expressions and movements. The lip-sync is particularly advanced, matching phoneme movements to your script with 98% accuracy. | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>What video formats can I download?</span> | |
| <i class="fas fa-chevron-down text-indigo-500"></i> | |
| </button> | |
| <div class="mt-3 text-gray-600 hidden"> | |
| We support MP4 (1080p and 720p) and MOV formats optimized for social media platforms like Instagram, TikTok, and YouTube Shorts. | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <button class="flex justify-between items-center w-full text-left font-medium"> | |
| <span>How long does generation take?</span> | |
| <i class="fas fa-chevron-down text-indigo-500"></i> | |
| </button> | |
| <div class="mt-3 text-gray-600 hidden"> | |
| Most reels under 60 seconds generate in 2-3 minutes. Longer videos or complex animations may take up to 5 minutes. You'll receive an email notification when your reel is ready. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Create Amazing Reels?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of creators who are saving time and increasing engagement with AI-generated content.</p> | |
| <button class="bg-white text-indigo-600 px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-play mr-2"></i> Start Creating Now - It's Free! | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-film text-2xl text-indigo-400"></i> | |
| <span class="text-white font-bold text-xl">AI Reel Generator</span> | |
| </div> | |
| <p class="mb-4">The easiest way to create professional UGC reels with AI avatars.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Features</a></li> | |
| <li><a href="#" class="hover:text-white">Templates</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">About Us</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> | |
| <p>© 2023 AI Reel Generator. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple demo functionality | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| const preview = document.getElementById('preview-content'); | |
| const progressContainer = document.getElementById('progress-container'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const waveform = document.getElementById('waveform'); | |
| // Show generating state | |
| preview.innerHTML = '<div class="text-center"><div class="animate-pulse text-4xl mb-4"><i class="fas fa-cog fa-spin"></i></div><p>Generating your AI reel...</p></div>'; | |
| progressContainer.classList.remove('hidden'); | |
| waveform.classList.remove('hidden'); | |
| // Simulate 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(() => { | |
| preview.innerHTML = '<div class="absolute inset-0 flex items-center justify-center"><i class="fas fa-check-circle text-6xl text-green-500"></i></div>'; | |
| downloadBtn.classList.remove('hidden'); | |
| waveform.classList.add('hidden'); | |
| }, 500); | |
| } | |
| }, 300); | |
| }); | |
| document.getElementById('download-btn').addEventListener('click', function() { | |
| alert('Your reel is downloading! (This is a demo - in a real app, the video would download)'); | |
| }); | |
| // FAQ accordion | |
| const faqButtons = document.querySelectorAll('#faq button'); | |
| faqButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const answer = button.nextElementSibling; | |
| answer.classList.toggle('hidden'); | |
| const icon = button.querySelector('i'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Avatar selection | |
| const avatarOptions = document.querySelectorAll('.avatar-option'); | |
| avatarOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| avatarOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50')); | |
| option.classList.add('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| }); | |
| </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=Techprotol/chaiw-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |