Spaces:
Running
Running
File size: 7,489 Bytes
c6e21e7 12a4e8b c6e21e7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Images - FrameForge Studio</title>
<link rel="stylesheet" href="/style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-white">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-8">
<section class="mb-12">
<h1 class="text-4xl font-bold mb-4 text-center">Upload Your Images</h1>
<p class="text-gray-300 text-center max-w-2xl mx-auto mb-8">Start creating stunning videos by uploading your images. Our AI will transform them into dynamic visual stories.</p>
<div class="max-w-2xl mx-auto">
<div class="bg-gray-800 rounded-xl p-8 mb-8">
<div id="drop-area" class="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-green-500 transition duration-300">
<i data-feather="upload" class="w-16 h-16 text-gray-500 mx-auto mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Drag & Drop Your Images</h2>
<p class="text-gray-400 mb-4">or</p>
<button id="browse-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">
Browse Files
</button>
<input type="file" id="file-input" multiple accept="image/*" class="hidden">
<p class="text-gray-400 mt-4">Supports JPG, PNG, WEBP (Max 10MB each)</p>
</div>
</div>
<div id="preview-container" class="hidden">
<h2 class="text-2xl font-bold mb-4">Image Preview</h2>
<div id="image-preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"></div>
<button id="process-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full">
Process Images
</button>
</div>
</div>
</section>
<section class="bg-gradient-to-r from-green-900 to-orange-900 rounded-2xl p-8">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl font-bold mb-4 text-center">How It Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold mb-2">Upload</h3>
<p class="text-gray-200">Select your images or drag and drop them to our secure platform</p>
</div>
<div class="text-center">
<div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold mb-2">Customize</h3>
<p class="text-gray-200">Choose your preferred Lora model and adjust settings</p>
</div>
<div class="text-center">
<div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<span class="text-2xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold mb-2">Generate</h3>
<p class="text-gray-200">Our AI creates your video masterpiece in minutes</p>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="/components/header.js"></script>
<script src="/components/footer.js"></script>
<script src="/script.js"></script>
<script>
feather.replace();
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const browseBtn = document.getElementById('browse-btn');
const previewContainer = document.getElementById('preview-container');
const imagePreview = document.getElementById('image-preview');
const processBtn = document.getElementById('process-btn');
// Event listeners
browseBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFiles);
// Drag and drop events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('border-green-500', 'bg-gray-700');
}
function unhighlight() {
dropArea.classList.remove('border-green-500', 'bg-gray-700');
}
dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles({ target: { files } });
}
function handleFiles(e) {
const files = e.target.files;
if (files.length > 0) {
previewContainer.classList.remove('hidden');
imagePreview.innerHTML = '';
Array.from(files).forEach(file => {
if (!file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.classList.add('w-full', 'h-32', 'object-cover', 'rounded');
imagePreview.appendChild(img);
}
reader.readAsDataURL(file);
});
}
}
processBtn.addEventListener('click', function() {
this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Processing...';
feather.replace();
// Simulate processing time
setTimeout(() => {
this.innerHTML = 'Process Images';
feather.replace();
alert('Images processed successfully! Redirecting to model selection...');
window.location.href = '/models/cinematic-motion';
}, 2000);
});
</script>
</body>
</html> |