Spaces:

mattx6
/

bot3

Running

App Files Files Community

mattx6 commited on Jun 6, 2025

Commit

b2cb0a5

verified ·

1 Parent(s): b3d8d4a

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

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +434 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Bot3
-emoji: 🐠
-colorFrom: green
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: bot3
+emoji: 🐳
+colorFrom: purple
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,434 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ 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