Hugging Face's logo

Spaces:
mattx6
/
bot3
Running

App Files Community
bot3 / 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 - Initial Deployment
b2cb0a5 verified
raw
history blame contribute delete
21.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 Video 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>
 #previewCanvas, #resultCanvas {
 border: 2px dashed #ccc;
 max-width: 100%;
 height: auto;
 }
 .progress-container {
 height: 8px;
 background-color: #e2e8f0;
 border-radius: 4px;
 }
 .progress-bar {
 height: 100%;
 border-radius: 4px;
 background-color: #4f46e5;
 transition: width 0.3s ease;
 }
 .tooltip {
 position: relative;
 display: inline-block;
 }
 .tooltip .tooltiptext {
 visibility: hidden;
 width: 200px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -100px;
 opacity: 0;
 transition: opacity 0.3s;
 font-size: 14px;
 }
 .tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }
 @keyframes pulse {
 0% { opacity: 0.6; }
 50% { opacity: 1; }
 100% { opacity: 0.6; }
 }
 .ai-processing {
 animation: pulse 1.5s infinite;
 }
 </style>
</head>
<body class="bg-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <header class="text-center mb-8">
 <h1 class="text-3xl font-bold text-indigo-700 mb-2">AI Video Generator</h1>
 <p class="text-gray-600">Transform your images into 5-second animated videos (local CPU/GPU processing)</p>
 </header>
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
 <div class="flex flex-col md:flex-row gap-6">
 <!-- Input Section -->
 <div class="flex-1">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">Input Image</h2>
 <div id="uploadArea" class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer transition-all hover:border-indigo-500 mb-4">
 <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
 <p class="text-gray-600 mb-2">Drag & drop your photo here</p>
 <p class="text-sm text-gray-500">or</p>
 <input type="file" id="imageInput" accept="image/*" class="hidden">
 <button id="selectFileBtn" class="mt-3 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors">
 Select File
 </button>
 </div>
 <canvas id="previewCanvas" class="w-full rounded-lg hidden"></canvas>
<div class="mt-4">
 <h3 class="text-md font-medium text-gray-700 mb-3">Settings</h3>
 <div class="grid grid-cols-2 gap-4">
 <div>
 <label for="styleSelect" class="block text-sm font-medium text-gray-700 mb-1">Style</label>
 <select id="styleSelect" class="w-full p-2 border border-gray-300 rounded-md">
 <option value="realistic">Realistic</option>
 <option value="anime">Anime Style</option>
 <option value="cartoon">Cartoon Effect</option>
 </select>
 </div>
 <div>
 <label for="durationSelect" class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
 <select id="durationSelect" class="w-full p-2 border border-gray-300 rounded-md">
 <option value="3">3 seconds</option>
 <option value="5" selected>5 seconds</option>
 <option value="7">7 seconds</option>
 </select>
 </div>
 </div>
<div class="mt-4">
 <label class="flex items-center space-x-3">
 <input type="checkbox" id="highQuality" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
 <span class="text-gray-700 font-medium">High Quality Render</span>
 <div class="tooltip">
 <i class="fas fa-info-circle text-gray-400"></i>
 <span class="tooltiptext">Higher quality takes longer to process and requires more GPU memory</span>
 </div>
 </label>
 </div>
 </div>
 </div>
<!-- Output Section -->
 <div class="flex-1">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">Generated Video</h2>
 <div id="outputSection" class="bg-gray-100 rounded-xl p-4 flex items-center justify-center min-h-64">
 <div id="outputPlaceholder" class="text-center text-gray-400">
 <i class="fas fa-video text-4xl mb-3"></i>
 <p>Generated video will appear here</p>
 </div>
 <canvas id="resultCanvas" class="w-full rounded-lg hidden"></canvas>
 <video id="resultVideo" class="w-full rounded-lg hidden" controls></video>
 </div>
<div class="mt-4">
 <div id="progressSection" class="hidden">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium text-indigo-700">Processing</span>
 <span id="progressStatus" class="text-sm text-gray-500">0%</span>
 </div>
 <div class="progress-container">
 <div id="progressBar" class="progress-bar" style="width:0%"></div>
 </div>
 <p class="text-xs text-gray-500 mt-1 text-right" id="gpuStatus">
 <i id="gpuIcon" class="fas fa-microchip text-indigo-600"></i>
 <span>Running on GPU: </span>
 <span id="gpuName">NVIDIA GTX 1080</span>
 </p>
 </div>
<div class="flex gap-3 mt-4">
 <button id="generateBtn" class="flex-1 bg-indigo-600 text-white py-3 px-6 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50" disabled>
 <span id="generateText">Generate Video</span>
 <span id="generatingText" class="hidden"><i class="fas fa-cog fa-spin mr-2"></i>Processing...</span>
 </button>
 <button id="downloadBtn" class="flex-1 bg-gray-200 text-gray-800 py-3 px-6 rounded-lg hover:bg-gray-300 transition-colors hidden">
 <i class="fas fa-download mr-2"></i>Download
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow-lg p-6">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">Recent Generations</h2>
 <div id="historyGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
 <div class="text-center p-4 rounded-lg bg-gray-100 text-gray-500">
 <i class="fas fa-history text-2xl mb-2"></i>
 <p>No history yet</p>
 </div>
 </div>
 </div>
<div class="mt-8 text-center text-sm text-gray-500">
 <p class="mb-2">
 <i class="fas fa-shield-alt mr-1"></i>
 All processing happens on your local machine - your images never leave your computer
 </p>
 <p>© 2023 AI Video Generator | CPU/GPU Version</p>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Elements
 const uploadArea = document.getElementById('uploadArea');
 const selectFileBtn = document.getElementById('selectFileBtn');
 const imageInput = document.getElementById('imageInput');
 const previewCanvas = document.getElementById('previewCanvas');
 const resultCanvas = document.getElementById('resultCanvas');
 const resultVideo = document.getElementById('resultVideo');
 const outputPlaceholder = document.getElementById('outputPlaceholder');
 const generateBtn = document.getElementById('generateBtn');
 const downloadBtn = document.getElementById('downloadBtn');
 const progressSection = document.getElementById('progressSection');
 const progressBar = document.getElementById('progressBar');
 const progressStatus = document.getElementById('progressStatus');
 const gpuName = document.getElementById('gpuName');
 const highQuality = document.getElementById('highQuality');
 const generateText = document.getElementById('generateText');
 const generatingText = document.getElementById('generatingText');
 const historyGrid = document.getElementById('historyGrid');
// Detect available GPUs
 detectGPU();
// Event listeners
 uploadArea.addEventListener('click', () => imageInput.click());
 selectFileBtn.addEventListener('click', () => imageInput.click());
 imageInput.addEventListener('change', handleImageUpload);
 generateBtn.addEventListener('click', generateVideo);
 downloadBtn.addEventListener('click', downloadVideo);
// Drag and drop
 uploadArea.addEventListener('dragover', (e) => {
 e.preventDefault();
 uploadArea.classList.add('border-indigo-500', 'bg-indigo-50');
 });
uploadArea.addEventListener('dragleave', () => {
 uploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
 });
uploadArea.addEventListener('drop', (e) => {
 e.preventDefault();
 uploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
 if (e.dataTransfer.files.length > 0) {
 imageInput.files = e.dataTransfer.files;
 handleImageUpload();
 }
 });
// Handle image upload
 function handleImageUpload() {
 const file = imageInput.files[0];
 if (!file) return;
const reader = new FileReader();
 reader.onload = function(e) {
 const img = new Image();
 img.onload = function() {
 // Display preview
 previewCanvas.classList.remove('hidden');
 const ctx = previewCanvas.getContext('2d');
// Set canvas size (max 500px width/height)
 const maxSize = 500;
 let width = img.width;
 let height = img.height;
if (width > height && width > maxSize) {
 height = (height / width) * maxSize;
 width = maxSize;
 } else if (height > maxSize) {
 width = (width / height) * maxSize;
 height = maxSize;
 }
previewCanvas.width = width;
 previewCanvas.height = height;
 ctx.drawImage(img, 0, 0, width, height);
// Enable generate button
 generateBtn.disabled = false;
 };
 img.src = e.target.result;
 };
 reader.readAsDataURL(file);
 }
// Generate video (simulated)
 function generateVideo() {
 if (!imageInput.files[0]) return;
// Show processing state
 generateText.classList.add('hidden');
 generatingText.classList.remove('hidden');
 generateBtn.disabled = true;
 progressSection.classList.remove('hidden');
 outputPlaceholder.classList.add('hidden');
 resultCanvas.classList.remove('hidden');
 resultVideo.classList.add('hidden');
// Simulate processing with progress updates
 const duration = parseInt(document.getElementById('durationSelect').value) * 1000;
 let progress = 0;
 const timer = setInterval(() => {
 progress += Math.random() * 10;
 if (progress >= 100) {
 progress = 100;
 clearInterval(timer);
 showResult();
 }
 updateProgress(progress);
 }, duration / 20);
// Draw processing animation on canvas
 const ctx = resultCanvas.getContext('2d');
 resultCanvas.width = previewCanvas.width;
 resultCanvas.height = previewCanvas.height;
function drawProcessingFrame() {
 ctx.clearRect(0, 0, resultCanvas.width, resultCanvas.height);
// Draw base image with fading effect
 const baseImg = new Image();
 baseImg.src = previewCanvas.toDataURL();
 ctx.globalAlpha = 0.8 - (progress/100 * 0.3);
 ctx.drawImage(baseImg, 0, 0, resultCanvas.width, resultCanvas.height);
// Draw "AI Processing" text
 ctx.globalAlpha = 1;
 ctx.font = 'bold 16px Arial';
 ctx.fillStyle = '#4f46e5';
 ctx.textAlign = 'center';
 ctx.fillText('AI VIDEO GENERATION IN PROGRESS', resultCanvas.width/2, resultCanvas.height/2);
// Draw progress percentage
 ctx.font = 'bold 20px Arial';
 ctx.fillText(`${Math.round(progress)}%`, resultCanvas.width/2, resultCanvas.height/2 + 30);
// Draw animated dots
 const dots = progress % 3 + 1;
 ctx.fillText('Processing' + '.'.repeat(dots), resultCanvas.width/2, resultCanvas.height/2 + 60);
if (progress < 100) {
 requestAnimationFrame(drawProcessingFrame);
 }
 }
drawProcessingFrame();
 }
function updateProgress(value) {
 progressBar.style.width = `${value}%`;
 progressStatus.textContent = `${Math.round(value)}%`;
 }
function showResult() {
 // Simulate completed generation
 generatingText.classList.add('hidden');
 generateText.classList.remove('hidden');
 generateBtn.disabled = false;
 downloadBtn.classList.remove('hidden');
// Hide canvas, show video placeholder (in a real app, this would be an actual video)
 resultCanvas.classList.add('hidden');
 resultVideo.classList.remove('hidden');
// Set a placeholder video source (in a real app, this would be the generated video)
 resultVideo.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
 resultVideo.load();
// Add to history
 addToHistory();
 }
function downloadVideo() {
 // Simulate download
 alert('In a real application, this would download the generated video file.');
// In a real app, you would use something like:
 // const a = document.createElement('a');
 // a.href = videoUrl;
 // a.download = 'ai-generated-video.mp4';
 // a.click();
 }
function addToHistory() {
 // Add the preview to history
 if (historyGrid.firstChild.classList.contains('bg-gray-100')) {
 historyGrid.innerHTML = '';
 }
const thumbnail = document.createElement('div');
 thumbnail.className = 'cursor-pointer overflow-hidden rounded-lg transition-all hover:scale-105';
 thumbnail.innerHTML = `
 <div class="relative group">
 <img src="${previewCanvas.toDataURL()}" class="w-full h-auto rounded-lg">
 <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
 <button class="bg-white rounded-full p-2 hover:bg-gray-100">
 <i class="fas fa-redo text-indigo-600"></i>
 </button>
 </div>
 </div>
 <p class="text-xs mt-1 text-gray-600">Just now</p>
 `;
// Add click handler to reuse this image
 thumbnail.querySelector('button').addEventListener('click', () => {
 // In a real app, you might store the generation parameters and reuse them
 generateBtn.disabled = false;
 resultVideo.classList.add('hidden');
 outputPlaceholder.classList.remove('hidden');
 });
historyGrid.insertBefore(thumbnail, historyGrid.firstChild);
 }
function detectGPU() {
 // This is a simulation - in a real app you would use WebGL to detect actual GPU
 const knownGPUs = [
 'NVIDIA RTX 3090',
 'AMD Radeon RX 6900 XT',
 'Intel Iris Xe',
 'Apple M1 GPU',
 'NVIDIA GTX 1080',
 'AMD Radeon RX 580'
 ];
const randomGPU = knownGPUs[Math.floor(Math.random() * knownGPUs.length)];
 gpuName.textContent = randomGPU;
// If the GPU is lower-end, show a warning
 if (randomGPU.includes('GTX 1080') || randomGPU.includes('RX 580')) {
 showGPUWarming();
 }
 }
function showGPUWarming() {
 const warning = document.createElement('div');
 warning.className = 'bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4';
 warning.innerHTML = `
 <div class="flex items-center">
 <i class="fas fa-exclamation-triangle text-yellow-400 mr-3"></i>
 <p class="text-sm text-yellow-700">
 <span class="font-medium">Performance Notice:</span> Your GPU is below recommended specs.
Processing times may be longer or you might experience reduced quality.
 </p>
 </div>
 `;
document.querySelector('.container').insertBefore(warning, document.querySelector('.bg-white'));
 }
 });
 </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/bot3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>