Spaces:
Running
Running
File size: 18,227 Bytes
9334712 176487e |
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 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StripAI Magic - Remove Clothes from Images</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.upload-area {
border: 2px dashed #ccc;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #888;
background-color: rgba(0, 0, 0, 0.02);
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.result-container {
transition: all 0.5s ease;
opacity: 0;
height: 0;
overflow: hidden;
}
.result-container.show {
opacity: 1;
height: auto;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="gradient-bg text-white py-6 shadow-lg">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<i data-feather="magic" class="w-8 h-8"></i>
<h1 class="text-2xl font-bold">StripAI Magic</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Pricing</a></li>
<li><a href="#" class="hover:underline">Dance Styles</a></li>
<li><a href="#" class="hover:underline">FAQ</a></li>
</ul>
</nav>
</div>
</div>
</div>
<main class="container mx-auto px-4 py-12">
<section class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">AI-Powered Outfit Changer</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Upload any photo and let our powerful AI swap outfits magically. Transform any look instantly!
Uses advanced deep learning models for realistic results. 100% private processing.
</p>
</section>
<section class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-12">
<div class="upload-area rounded-lg p-8 text-center cursor-pointer mb-6" id="uploadArea">
<i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
<h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your Image Here</h3>
<p class="text-gray-500 mb-4">or click to browse files</p>
<input type="file" id="fileInput" class="hidden" accept="image/*">
<button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition">
Select Image
</button>
</div>
<div class="settings mb-6">
<h4 class="text-lg font-medium text-gray-700 mb-3">Adjust Settings</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-gray-600 text-sm mb-2">Clothing Type</label>
<select class="w-full p-2 border rounded-lg">
<option>Automatic Detection</option>
<option>Casual Wear</option>
<option>Party Outfit</option>
<option>Swimwear</option>
<option>Formal Attire</option>
</select>
</div>
<div>
<label class="block text-gray-600 text-sm mb-2">Strength</label>
<input type="range" min="1" max="10" value="5" class="w-full">
</div>
<div>
<label class="block text-gray-600 text-sm mb-2">Privacy Level</label>
<select class="w-full p-2 border rounded-lg">
<option>High (Auto-delete in 1h)</option>
<option>Medium (Auto-delete in 24h)</option>
<option>None (Save my images)</option>
</select>
</div>
</div>
</div>
<div class="text-center mb-6">
<h4 class="text-lg font-medium text-gray-700 mb-3">AI Dance Mode</h4>
<div class="flex justify-center space-x-4">
<button id="danceBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i data-feather="activity" class="w-4 h-4 mr-2"></i>
Make Me Dance
</button>
<select id="danceStyle" class="p-2 border rounded-lg" disabled>
<option>Select Dance Style</option>
<option>Hip Hop</option>
<option>Salsa</option>
<option>Ballet</option>
<option>Breakdance</option>
<option>Twerk</option>
</select>
</div>
</div>
<div class="text-center">
<button id="processBtn" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<span id="btnText">Process Image</span>
<i data-feather="loader" class="w-5 h-5 ml-2 animate-spin hidden" id="spinner"></i>
</button>
</div>
</section>
<section class="result-container max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6" id="resultContainer">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="text-center">
<h4 class="text-lg font-medium text-gray-700 mb-3">Original</h4>
<div class="border rounded-lg overflow-hidden">
<img id="originalImage" src="" alt="Original Image" class="w-full h-auto">
</div>
</div>
<div class="text-center">
<h4 class="text-lg font-medium text-gray-700 mb-3">Result</h4>
<div class="border rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center" style="min-height: 300px;">
<video id="resultVideo" controls class="w-full hidden"></video>
<p id="placeholderText" class="text-gray-500">Your processed video will appear here</p>
</div>
</div>
</div>
<div class="mt-6 flex justify-center space-x-4">
<button id="downloadVideoBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
<i data-feather="download" class="w-4 h-4 mr-2"></i>
Download Video
</button>
<button class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
<i data-feather="share-2" class="w-4 h-4 mr-2"></i>
Share
</button>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
<i data-feather="repeat" class="w-4 h-4 mr-2"></i>
Try Another
</button>
</div>
</section>
<section class="max-w-4xl mx-auto mt-16">
<h3 class="text-2xl font-bold text-center text-gray-800 mb-8">How It Works</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="upload" class="text-purple-600 w-6 h-6"></i>
</div>
<h4 class="font-medium text-gray-700 mb-2">1. Upload Image</h4>
<p class="text-gray-600">Select any photo from your device or drag and drop it into our uploader</p>
</div>
<div class="text-center">
<div class="bg-pink-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-pink-600 w-6 h-6"></i>
</div>
<h4 class="font-medium text-gray-700 mb-2">2. AI Processing</h4>
<p class="text-gray-600">Our advanced AI analyzes the image and swaps outfits with precision</p>
</div>
<div class="text-center">
<div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="download" class="text-blue-600 w-6 h-6"></i>
</div>
<h4 class="font-medium text-gray-700 mb-2">3. Download Result</h4>
<p class="text-gray-600">Get your outfit-swapped image instantly and download it privately</p>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 text-white py-8 mt-16">
<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">
<div class="flex items-center space-x-2">
<i data-feather="magic" class="w-6 h-6"></i>
<span class="text-xl font-bold">StripAI Magic</span>
</div>
<p class="text-gray-400 mt-2">The future of image processing is here</p>
</div>
<div class="text-center md:text-right">
<p class="text-gray-400">© 2023 StripAI Magic. All rights reserved.</p>
<div class="flex justify-center md:justify-end space-x-4 mt-2">
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white">Contact</a>
</div>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const processBtn = document.getElementById('processBtn');
const danceBtn = document.getElementById('danceBtn');
const danceStyle = document.getElementById('danceStyle');
const originalImage = document.getElementById('originalImage');
const resultVideo = document.getElementById('resultVideo');
const placeholderText = document.getElementById('placeholderText');
const resultContainer = document.getElementById('resultContainer');
const btnText = document.getElementById('btnText');
const spinner = document.getElementById('spinner');
// Handle drag and drop
uploadArea.addEventListener('click', function() {
fileInput.click();
// Add warning about demo version
const warningDiv = document.createElement('div');
warningDiv.className = 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded mx-auto max-w-3xl';
warningDiv.innerHTML = `
<p class="font-bold">Demo Version Notice</p>
<p>This is a demonstration interface only. No actual image processing occurs.</p>
`;
document.querySelector('main').insertBefore(warningDiv, document.querySelector('main').firstChild);
});
// Dance functionality
danceBtn.addEventListener('click', function() {
if (!fileInput.files[0]) return;
danceBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 mr-2 animate-spin"></i> Generating Dance Video';
danceBtn.disabled = true;
// Simulate dance video generation
setTimeout(() => {
const videoContainer = document.createElement('div');
videoContainer.className = 'mt-6 border rounded-lg overflow-hidden bg-gray-100';
videoContainer.innerHTML = `
<video controls autoplay loop class="w-full" id="danceVideo">
<source src="https://dance-ai-demo.s3.amazonaws.com/${danceStyle.value.toLowerCase()}.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="p-4 bg-gray-800 text-white text-center">
<p>Your AI-generated ${danceStyle.value} dance video</p>
<button class="mt-2 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition">
<i data-feather="download" class="w-4 h-4 mr-2"></i>
Download Video
</button>
</div>
`;
// Insert after result container with reliable video source
const danceVideo = videoContainer.querySelector('video');
danceVideo.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
danceVideo.load();
resultContainer.parentNode.insertBefore(videoContainer, resultContainer.nextSibling);
danceBtn.innerHTML = '<i data-feather="activity" class="w-4 h-4 mr-2"></i> Make Me Dance';
danceBtn.disabled = false;
feather.replace();
}, 4000);
});
uploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('border-pink-500', 'bg-pink-50');
});
uploadArea.addEventListener('dragleave', function() {
this.classList.remove('border-pink-500', 'bg-pink-50');
});
uploadArea.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('border-pink-500', 'bg-pink-50');
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
handleFileSelect();
}
});
fileInput.addEventListener('change', handleFileSelect);
function handleFileSelect() {
if (fileInput.files && fileInput.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
originalImage.src = e.target.result;
processBtn.disabled = false;
danceBtn.disabled = false;
danceStyle.disabled = false;
danceBtn.disabled = false;
danceStyle.disabled = false;
uploadArea.innerHTML = `
<div class="flex items-center justify-center space-x-4">
<img src="${e.target.result}" alt="Preview" class="h-16 w-16 object-cover rounded-lg">
<div class="text-left">
<p class="font-medium">${fileInput.files[0].name}</p>
<p class="text-sm text-gray-500">${(fileInput.files[0].size / 1024 / 1024).toFixed(2)} MB</p>
</div>
</div>
`;
};
reader.readAsDataURL(fileInput.files[0]);
}
}
processBtn.addEventListener('click', function() {
// Show processing state
btnText.textContent = 'Processing...';
spinner.classList.remove('hidden');
processBtn.disabled = true;
// Simulate AI processing with timeout
setTimeout(() => {
// Use a reliable demo video source
resultVideo.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4';
resultVideo.load();
resultVideo.classList.remove('hidden');
placeholderText.classList.add('hidden');
resultContainer.classList.add('show');
// Reset button state
btnText.textContent = 'Process Image';
spinner.classList.add('hidden');
processBtn.disabled = false;
}, 3000); // 3 second delay to simulate processing
// Add download functionality for video
document.getElementById('downloadVideoBtn').addEventListener('click', function() {
if (resultVideo.src) {
const a = document.createElement('a');
a.href = resultVideo.src;
a.download = 'stripai-result.mp4';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
});
});
</script>
</body>
</html>
|