Hugging Face's logo

Spaces:
mattx6
/
mybot2
Running

App Files Community
mybot2 / index.html
mattx6's picture
mattx6
Build a simple but functional image-to-video AI generator running on my local CPU and GPU system bot generator but that's similar to telegram's shirt-up bots that can generate a 5 second undress topless video from photo's - Follow Up Deployment
8ee5cbb verified
Raw
History Blame Contribute Delete
17.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AI VideoGen | Image-to-Video Converter</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>
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }
 .animate-pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 .dropzone {
 border: 2px dashed rgba(156, 163, 175, 0.5);
 transition: all 0.3s ease;
 }
 .dropzone.active {
 border-color: rgba(99, 102, 241, 0.8);
 background-color: rgba(99, 102, 241, 0.05);
 }
 #previewVideo {
 max-height: 400px;
 }
 .settings-panel {
 transition: all 0.3s ease;
 max-height: 0;
 overflow: hidden;
 }
 .settings-panel.open {
 max-height: 500px;
 }
 </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="flex flex-col items-center mb-10">
 <div class="flex items-center mb-4">
 <i class="fas fa-video text-indigo-500 text-3xl mr-3"></i>
 <h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-400 to-purple-600 bg-clip-text text-transparent">AI VideoGen</h1>
 </div>
 <p class="text-gray-400 text-center max-w-2xl">
 Transform your images into stunning short videos with our AI-powered technology. Upload an image and customize the animation effects.
 </p>
 </header>
<!-- Main Content -->
 <main class="max-w-4xl mx-auto">
 <!-- Upload Section -->
 <div class="bg-gray-800 rounded-xl p-6 mb-8 shadow-lg">
 <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
 <input type="file" id="fileInput" accept="image/*" class="hidden">
 <div id="uploadContent" class="flex flex-col items-center justify-center py-10">
 <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
 <h3 class="text-xl font-semibold mb-2">Upload an Image</h3>
 <p class="text-gray-400 mb-4">Drag & drop your image here or click to browse</p>
 <button id="uploadBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full transition-all">
 Select File
 </button>
 </div>
 <div id="previewContainer" class="hidden">
 <div class="flex flex-col md:flex-row gap-6 items-center">
 <div class="w-full md:w-1/2">
 <h4 class="text-lg font-medium mb-3">Original Image</h4>
 <img id="imagePreview" class="w-full rounded-lg border border-gray-700 max-h-80 object-contain" alt="Image preview">
 </div>
 <div class="w-full md:w-1/2">
 <h4 class="text-lg font-medium mb-3">AI Generated Video</h4>
 <video id="previewVideo" class="w-full rounded-lg border border-gray-700 bg-black aspect-video" controls></video>
 <div id="videoLoading" class="hidden flex flex-col items-center justify-center py-10 bg-gray-700 rounded-lg mt-4">
 <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
 <p class="text-gray-300">Processing your video... This may take a minute</p>
 <div class="w-full bg-gray-600 rounded-full h-1.5 mt-4">
 <div id="progressBar" class="bg-indigo-600 h-1.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="flex justify-end mt-6">
 <button id="regenerateBtn" class="hidden bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full transition-all mr-3">
 <i class="fas fa-sync-alt mr-2"></i> Regenerate
 </button>
 <button id="downloadBtn" class="hidden bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full transition-all">
 <i class="fas fa-download mr-2"></i> Download Video
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Settings Section -->
 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
 <div class="flex justify-between items-center cursor-pointer" id="settingsToggle">
 <h2 class="text-xl font-semibold flex items-center">
 <i class="fas fa-sliders-h text-indigo-500 mr-2"></i> Video Settings
 </h2>
 <i class="fas fa-chevron-down text-gray-400 transition-transform" id="settingsIcon"></i>
 </div>
<div class="settings-panel mt-4" id="settingsPanel">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Animation Style -->
 <div>
 <label class="block text-sm font-medium mb-2">Animation Style</label>
 <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-indigo-500 focus:border-indigo-500">
 <option>Subtle Movement</option>
 <option>Zoom In/Out</option>
 <option>Pan Left/Right</option>
 <option>3D Rotation</option>
 </select>
 </div>
<!-- Duration -->
 <div>
 <label class="block text-sm font-medium mb-2">Duration (seconds)</label>
 <input type="range" min="2" max="10" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-indigo-500">
 <div class="flex justify-between text-xs text-gray-400 mt-1">
 <span>2s</span>
 <span>5s</span>
 <span>10s</span>
 </div>
 </div>
<!-- Transition Style -->
 <div>
 <label class="block text-sm font-medium mb-2">Transition Effect</label>
 <div class="grid grid-cols-2 gap-2">
 <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm transition-colors">Fade</button>
 <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm transition-colors">Slide</button>
 <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm transition-colors">Zoom</button>
 <button class="bg-gray-700 hover:bg-gray-600 py-2 px-3 rounded text-sm transition-colors">None</button>
 </div>
 </div>
<!-- Enhancements -->
 <div>
 <label class="block text-sm font-medium mb-2">Enhancements</label>
 <div class="space-y-2">
 <label class="flex items-center space-x-2">
 <input type="checkbox" class="form-checkbox text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
 <span>Enhance Image Quality</span>
 </label>
 <label class="flex items-center space-x-2">
 <input type="checkbox" class="form-checkbox text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
 <span>Add Background Music</span>
 </label>
 <label class="flex items-center space-x-2">
 <input type="checkbox" class="form-checkbox text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
 <span>Apply AI Beautification</span>
 </label>
 </div>
 </div>
 </div>
<div class="mt-6">
 <button id="generateBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-full transition-all font-medium w-full">
 <i class="fas fa-magic mr-2"></i> Generate Video
 </button>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="mt-16 text-center text-gray-500 text-sm">
 <p>AI VideoGen uses advanced machine learning algorithms to create videos from images.</p>
 <p class="mt-2">This is a frontend demonstration. Actual processing would require backend AI services.</p>
 </footer>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // DOM Elements
 const dropzone = document.getElementById('dropzone');
 const fileInput = document.getElementById('fileInput');
 const uploadBtn = document.getElementById('uploadBtn');
 const uploadContent = document.getElementById('uploadContent');
 const previewContainer = document.getElementById('previewContainer');
 const imagePreview = document.getElementById('imagePreview');
 const previewVideo = document.getElementById('previewVideo');
 const generateBtn = document.getElementById('generateBtn');
 const downloadBtn = document.getElementById('downloadBtn');
 const regenerateBtn = document.getElementById('regenerateBtn');
 const videoLoading = document.getElementById('videoLoading');
 const progressBar = document.getElementById('progressBar');
 const settingsToggle = document.getElementById('settingsToggle');
 const settingsPanel = document.getElementById('settingsPanel');
 const settingsIcon = document.getElementById('settingsIcon');
 // Toggle settings panel
 settingsToggle.addEventListener('click', function() {
 settingsPanel.classList.toggle('open');
 settingsIcon.classList.toggle('transform');
 settingsIcon.classList.toggle('rotate-180');
 });
 // Handle drag and drop
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
 dropzone.addEventListener(eventName, preventDefaults, false);
 });
 function preventDefaults(e) {
 e.preventDefault();
 e.stopPropagation();
 }
 ['dragenter', 'dragover'].forEach(eventName => {
 dropzone.addEventListener(eventName, highlight, false);
 });
 ['dragleave', 'drop'].forEach(eventName => {
 dropzone.addEventListener(eventName, unhighlight, false);
 });
 function highlight() {
 dropzone.classList.add('active');
 }
 function unhighlight() {
 dropzone.classList.remove('active');
 }
 // Handle dropped files
 dropzone.addEventListener('drop', handleDrop, false);
 function handleDrop(e) {
 const dt = e.dataTransfer;
 const files = dt.files;
 handleFiles(files);
 }
 // Handle file selection via button
 uploadBtn.addEventListener('click', function() {
 fileInput.click();
 });
 fileInput.addEventListener('change', function() {
 if (fileInput.files.length) {
 handleFiles(fileInput.files);
 }
 });
 // Process selected files
 function handleFiles(files) {
 const file = files[0];
 if (!file.type.match('image.*')) {
 alert('Please select an image file.');
 return;
 }
 const reader = new FileReader();
 reader.onload = function(e) {
 imagePreview.src = e.target.result;
 uploadContent.classList.add('hidden');
 previewContainer.classList.remove('hidden');
 generateBtn.classList.remove('hidden');
 downloadBtn.classList.add('hidden');
 regenerateBtn.classList.add('hidden');
 previewVideo.src = '';
 };
 reader.readAsDataURL(file);
 }
 // Simulate video generation
 generateBtn.addEventListener('click', function() {
 videoLoading.classList.remove('hidden');
 previewVideo.classList.add('hidden');
 generateBtn.disabled = true;
 generateBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Processing...';
 generateBtn.classList.add('opacity-75');
// Simulate progress
 let progress = 0;
 const interval = setInterval(() => {
 progress += 5 + Math.random() * 5;
 if (progress > 100) progress = 100;
 progressBar.style.width = `${progress}%`;
if (progress >= 100) {
 clearInterval(interval);
 setTimeout(function() {
 // In a real app, you would have the actual video URL here
 // For demo purposes, we'll simulate a result
 videoLoading.classList.add('hidden');
 previewVideo.classList.remove('hidden');
// This would be your actual video source in a real app
 previewVideo.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
generateBtn.disabled = false;
 generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Video';
 generateBtn.classList.remove('opacity-75');
 downloadBtn.classList.remove('hidden');
 regenerateBtn.classList.remove('hidden');
 }, 500);
 }
 }, 200);
 });
 // Download button (would require actual video data in a real app)
 downloadBtn.addEventListener('click', function() {
 if (!previewVideo.src) return;
// In a real app, you would trigger an actual download
 const a = document.createElement('a');
 a.href = previewVideo.src;
 a.download = 'ai-generated-video.mp4';
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
// Alert for demo purposes
 alert('In a real application, this would download the generated video. For this demo, nothing is actually downloaded.');
 });
 // Regenerate button
 regenerateBtn.addEventListener('click', function() {
 generateBtn.click();
 });
 });
 </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=mattx6/mybot2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>