Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Idea Generator</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> | |
| .character-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .character-preview:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .video-card { | |
| perspective: 1000px; | |
| } | |
| .video-card-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .video-card:hover .video-card-inner { | |
| transform: rotateY(10deg); | |
| } | |
| .progress-bar { | |
| animation: progress 8s linear forwards; | |
| } | |
| @keyframes progress { | |
| 0% { width: 0%; } | |
| 100% { width: 100%; } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-12 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">8-Second Video Idea Generator</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Automatically create engaging short films by analyzing your character and previous successful videos | |
| </p> | |
| </header> | |
| <!-- Main Workflow --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12"> | |
| <!-- Workflow Steps --> | |
| <div class="flex flex-wrap border-b border-gray-200"> | |
| <div class="w-full md:w-1/4 p-4 text-center border-b-4 border-indigo-500"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center mr-2">1</div> | |
| <span class="font-medium">Upload Character</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/4 p-4 text-center border-b-4 border-gray-200"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center mr-2">2</div> | |
| <span class="font-medium text-gray-500">Select Parameters</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/4 p-4 text-center border-b-4 border-gray-200"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center mr-2">3</div> | |
| <span class="font-medium text-gray-500">Generate Ideas</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/4 p-4 text-center border-b-4 border-gray-200"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center mr-2">4</div> | |
| <span class="font-medium text-gray-500">Export</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 1 Content --> | |
| <div class="p-8"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Character Upload --> | |
| <div class="w-full md:w-1/2"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Upload Your Character</h2> | |
| <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-6 bg-gray-50 hover:bg-gray-100 transition cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4 floating"></i> | |
| <p class="text-gray-600 mb-2">Drag & drop your character image here</p> | |
| <p class="text-sm text-gray-500 mb-4">or</p> | |
| <label for="character-upload" class="px-6 py-2 bg-indigo-500 text-white rounded-lg cursor-pointer hover:bg-indigo-600 transition"> | |
| Browse Files | |
| </label> | |
| <input type="file" id="character-upload" class="hidden" accept="image/*"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-700 mb-2">Previous Characters</h3> | |
| <div class="flex space-x-2 overflow-x-auto py-2"> | |
| <img src="https://placehold.co/80x80/e2e8f0/6b7280?text=P1" alt="Previous character 1" class="w-16 h-16 rounded-lg object-cover character-preview"> | |
| <img src="https://placehold.co/80x80/e2e8f0/6b7280?text=P2" alt="Previous character 2" class="w-16 h-16 rounded-lg object-cover character-preview"> | |
| <img src="https://placehold.co/80x80/e2e8f0/6b7280?text=P3" alt="Previous character 3" class="w-16 h-16 rounded-lg object-cover character-preview"> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <h3 class="font-medium text-gray-700 mb-2">Suggested Characters</h3> | |
| <div class="flex space-x-2 overflow-x-auto py-2"> | |
| <img src="https://placehold.co/80x80/e2e8f0/6b7280?text=S1" alt="Suggested character 1" class="w-16 h-16 rounded-lg object-cover character-preview"> | |
| <img src="https://placehold.co/80x80/e2e8f0/6b7280?text=S2" alt="Suggested character 2" class="w-16 h-16 rounded-lg object-cover character-preview"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- JSON Parameters Preview --> | |
| <div class="w-full md:w-1/2"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Workflow Parameters</h2> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center text-gray-400 mb-2"> | |
| <i class="fas fa-code mr-2"></i> | |
| <span class="text-sm font-mono">video_workflow.json</span> | |
| </div> | |
| <pre class="bg-gray-900 text-green-400 p-4 rounded text-xs overflow-x-auto font-mono"> | |
| { | |
| "character": { | |
| "image": "new_character.png", | |
| "style": "cartoon", | |
| "traits": ["funny", "energetic"] | |
| }, | |
| "parameters": { | |
| "duration": 8, | |
| "format": "vertical", | |
| "theme": "comedy", | |
| "elements": ["surprise", "reaction"], | |
| "previous_success": { | |
| "views": 1200000, | |
| "engagement": 0.45, | |
| "tags": ["#funny", "#viral"] | |
| } | |
| }, | |
| "automation": { | |
| "generate_concepts": 5, | |
| "select_best": true, | |
| "add_music": "auto", | |
| "output_format": "mp4" | |
| } | |
| }</pre> | |
| </div> | |
| <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-indigo-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-indigo-700"> | |
| The system will analyze your character and previous successful videos to generate new 8-second concepts with similar winning parameters. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-6"> | |
| <button class="px-6 py-3 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition flex items-center"> | |
| Next: Select Parameters | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Output Section --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition video-card"> | |
| <div class="video-card-inner"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-robot text-indigo-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">AI Analysis</h3> | |
| <p class="text-gray-600 text-center"> | |
| Our system analyzes your character's visual features and extracts key parameters from your most successful videos. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition video-card"> | |
| <div class="video-card-inner"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-lightbulb text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Concept Generation</h3> | |
| <p class="text-gray-600 text-center"> | |
| Using the JSON workflow, it generates multiple 8-second video concepts that match proven successful patterns. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition video-card"> | |
| <div class="video-card-inner"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-film text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-3">Automated Production</h3> | |
| <p class="text-gray-600 text-center"> | |
| The system automatically animates your character and assembles the short film with music and effects. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Video Preview --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden p-8 mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Sample Generated Video</h2> | |
| <div class="flex flex-col md:flex-row gap-8 items-center"> | |
| <div class="w-full md:w-1/2"> | |
| <div class="bg-black rounded-lg overflow-hidden relative" style="padding-bottom: 177.78%;"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-play-circle text-5xl text-white opacity-75 mb-2"></i> | |
| <p class="text-white">8-second preview</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">"Morning Coffee Surprise"</h3> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">#comedy</span> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">#reaction</span> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">#viral</span> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Generated Parameters:</h4> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>Duration: 8.2 seconds</li> | |
| <li>Key moment at 3.4s</li> | |
| <li>3 camera angles</li> | |
| <li>Sound effect at climax</li> | |
| </ul> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium text-gray-700 mb-1">Production Progress</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-500 h-2.5 rounded-full progress-bar" style="width: 0%"></div> | |
| </div> | |
| <p class="text-right text-sm text-gray-500 mt-1">Estimated: 12 seconds remaining</p> | |
| </div> | |
| <button class="px-6 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> | |
| Generate Another Concept | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">8-Second Video Generator</h3> | |
| <p class="text-gray-400">Automating viral content creation</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-tiktok text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm"> | |
| <p>© 2023 Video Automation Tool. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation trigger for the progress bar | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Trigger progress bar animation | |
| setTimeout(() => { | |
| const progressBar = document.querySelector('.progress-bar'); | |
| if (progressBar) { | |
| progressBar.style.width = '100%'; | |
| } | |
| }, 500); | |
| // File upload preview | |
| const fileUpload = document.getElementById('character-upload'); | |
| if (fileUpload) { | |
| fileUpload.addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| alert('Character image uploaded successfully! The system is analyzing your character...'); | |
| } | |
| }); | |
| } | |
| // Simulate workflow steps | |
| const nextButton = document.querySelector('button'); | |
| if (nextButton) { | |
| nextButton.addEventListener('click', function() { | |
| alert('In the complete application, this would move to the next workflow step where you can fine-tune parameters before generation.'); | |
| }); | |
| } | |
| }); | |
| </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=Mashl1/vodcreation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |