Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Creator - CanvasCraft</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> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold text-gray-800 dark:text-white mb-4"> | |
| AI Video Creator | |
| </h1> | |
| <p class="text-xl text-gray-600 dark:text-gray-300 mb-8"> | |
| Create stunning videos with AI-generated images and voiceovers | |
| </p> | |
| </section> | |
| <!-- Video Creator Interface --> | |
| <section class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8"> | |
| <!-- Stepper --> | |
| <div class="flex justify-center mb-8"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="stepper-step active" data-step="1"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center font-semibold">1</div> | |
| <span class="text-sm mt-2 text-gray-600 dark:text-gray-300">Images</span> | |
| </div> | |
| <div class="w-12 h-0.5 bg-gray-300 dark:bg-gray-600"></div> | |
| <div class="stepper-step" data-step="2"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 flex items-center justify-center font-semibold">2</div> | |
| <span class="text-sm mt-2 text-gray-600 dark:text-gray-300">Voiceover</span> | |
| </div> | |
| <div class="w-12 h-0.5 bg-gray-300 dark:bg-gray-600"></div> | |
| <div class="stepper-step" data-step="3"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 flex items-center justify-center font-semibold">3</div> | |
| <span class="text-sm mt-2 text-gray-600 dark:text-gray-300">Export</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 1: Image Configuration --> | |
| <div id="step1" class="step-content"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Configure Images</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Image Theme</label> | |
| <select id="imageTheme" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="nature">Nature</option> | |
| <option value="technology">Technology</option> | |
| <option value="people">People</option> | |
| <option value="abstract">Abstract</option> | |
| <option value="minimal">Minimal</option> | |
| <option value="cityscape">Cityscape</option> | |
| <option value="food">Food</option> | |
| <option value="travel">Travel</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Image Style</label> | |
| <select id="imageStyle" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="photorealistic">Photorealistic</option> | |
| <option value="illustration">Illustration</option> | |
| <option value="watercolor">Watercolor</option> | |
| <option value="oil-painting">Oil Painting</option> | |
| <option value="sketch">Sketch</option> | |
| <option value="digital-art">Digital Art</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Image Size</label> | |
| <select id="imageSize" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="640x360">640x360 (SD)</option> | |
| <option value="1280x720">1280x720 (HD)</option> | |
| <option value="1920x1080">1920x1080 (Full HD)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Number of Images</label> | |
| <input type="range" id="imageCount" min="3" max="20" value="5" class="w-full"> | |
| <span id="imageCountDisplay" class="text-sm text-gray-600 dark:text-gray-400">5 images</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button id="generateImages" class="w-full md:w-auto px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all"> | |
| <i data-feather="image" class="inline w-5 h-5 mr-2"></i>Generate Images | |
| </button> | |
| </div> | |
| <!-- Image Preview Grid --> | |
| <div id="imagePreview" class="mt-8 grid grid-cols-2 md:grid-cols-5 gap-4 hidden"> | |
| <!-- Generated images will appear here --> | |
| </div> | |
| </div> | |
| <!-- Step 2: Voiceover Configuration --> | |
| <div id="step2" class="step-content hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Add Voiceover</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Voice Type</label> | |
| <select id="voiceType" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="male-us">Male US</option> | |
| <option value="female-us">Female US</option> | |
| <option value="male-uk">Male UK</option> | |
| <option value="female-uk">Female UK</option> | |
| <option value="neutral">Neutral</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Speech Speed</label> | |
| <input type="range" id="speechSpeed" min="0.5" max="2" step="0.1" value="1" class="w-full"> | |
| <span id="speechSpeedDisplay" class="text-sm text-gray-600 dark:text-gray-400">1.0x</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Script</label> | |
| <textarea id="voiceScript" rows="6" placeholder="Enter your script here..." class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"></textarea> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="generateVoiceover" class="px-8 py-3 bg-gradient-to-r from-green-500 to-teal-600 text-white rounded-lg hover:from-green-600 hover:to-teal-700 transition-all"> | |
| <i data-feather="mic" class="inline w-5 h-5 mr-2"></i>Generate Voiceover | |
| </button> | |
| <button id="previewVoiceover" class="ml-4 px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition-all"> | |
| <i data-feather="play" class="inline w-5 h-5 mr-2"></i>Preview | |
| </button> | |
| </div> | |
| <div id="voiceoverStatus" class="mt-4 hidden"> | |
| <div class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-4 py-2 rounded-lg"> | |
| <i data-feather="check-circle" class="inline w-4 h-4 mr-2"></i>Voiceover generated successfully! | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Export --> | |
| <div id="step3" class="step-content hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Export Video</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Video Quality</label> | |
| <select id="videoQuality" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="720p">720p HD</option> | |
| <option value="1080p">1080p Full HD</option> | |
| <option value="4k">4K Ultra HD</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Frame Rate</label> | |
| <select id="frameRate" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="24">24 fps (Cinema)</option> | |
| <option value="30">30 fps (Standard)</option> | |
| <option value="60">60 fps (Smooth)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Transition Effect</label> | |
| <select id="transitionEffect" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="fade">Fade</option> | |
| <option value="slide">Slide</option> | |
| <option value="zoom">Zoom</option> | |
| <option value="none">None</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Duration per Image</label> | |
| <select id="durationPerImage" class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300"> | |
| <option value="2">2 seconds</option> | |
| <option value="3">3 seconds</option> | |
| <option value="5">5 seconds</option> | |
| <option value="10">10 seconds</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button id="exportVideo" class="w-full md:w-auto px-8 py-3 bg-gradient-to-r from-red-500 to-pink-600 text-white rounded-lg hover:from-red-600 hover:to-pink-700 transition-all"> | |
| <i data-feather="video" class="inline w-5 h-5 mr-2"></i>Export Video | |
| </button> | |
| </div> | |
| <div id="exportProgress" class="mt-6 hidden"> | |
| <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4 overflow-hidden"> | |
| <div id="progressBar" class="bg-gradient-to-r from-red-500 to-pink-600 h-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| <p id="progressText" class="text-center text-gray-600 dark:text-gray-400 mt-2">Preparing your video...</p> | |
| </div> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-between mt-8"> | |
| <button id="prevStep" class="px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition-all hidden"> | |
| <i data-feather="arrow-left" class="inline w-4 h-4 mr-2"></i>Previous | |
| </button> | |
| <button id="nextStep" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all"> | |
| Next <i data-feather="arrow-right" class="inline w-4 h-4 ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="video-creator.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |