Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Free WAN 2.1 Media 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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .media-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .media-preview:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| } | |
| .generation-progress { | |
| height: 6px; | |
| transition: width 0.5s ease; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid white; | |
| font-weight: 600; | |
| } | |
| #previewContainer { | |
| min-height: 400px; | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 12px; | |
| } | |
| .free-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-photo-film text-3xl mr-3"></i> | |
| <h1 class="text-3xl font-bold">WAN 2.1 Media Studio</h1> | |
| <span class="free-badge ml-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full font-bold">FREE</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full font-medium transition"> | |
| <i class="fas fa-info-circle mr-2"></i> About | |
| </button> | |
| </div> | |
| </header> | |
| <div class="bg-green-500/20 border border-green-500 rounded-lg p-4 mb-8 flex items-start"> | |
| <i class="fas fa-gift text-green-300 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-bold text-green-100">Completely Free Forever!</h3> | |
| <p class="text-green-100 text-sm">Enjoy unlimited image and video generation with WAN 2.1 at no cost. No login required.</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-8 border-b border-white/20"> | |
| <button id="imageTab" class="tab-active px-6 py-3 text-lg">Image Generation</button> | |
| <button id="videoTab" class="px-6 py-3 text-lg hover:bg-white/10 rounded-t-lg">Video Generation</button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div id="previewContainer" class="flex items-center justify-center p-6 mb-8"> | |
| <div id="emptyState" class="text-center"> | |
| <i class="fas fa-cloud-arrow-up text-5xl mb-4 opacity-50"></i> | |
| <p class="text-xl opacity-70">Your generated media will appear here</p> | |
| </div> | |
| <img id="generatedImage" src="" alt="Generated Image" class="hidden w-full h-auto rounded-lg"> | |
| <video id="generatedVideo" controls class="hidden w-full rounded-lg"></video> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-semibold mb-4">Generation Controls</h3> | |
| <div class="mb-6"> | |
| <label class="block mb-2 font-medium">Prompt</label> | |
| <textarea id="promptInput" rows="3" class="w-full bg-white/20 border border-white/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-400" placeholder="Describe what you want to generate..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block mb-2 font-medium">Style</label> | |
| <select id="styleSelect" class="w-full bg-white/20 border border-white/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-400"> | |
| <option value="realistic">Realistic</option> | |
| <option value="fantasy">Fantasy</option> | |
| <option value="anime">Anime</option> | |
| <option value="painting">Painting</option> | |
| <option value="cyberpunk">Cyberpunk</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium">Quality</label> | |
| <select id="qualitySelect" class="w-full bg-white/20 border border-white/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-400"> | |
| <option value="standard">Standard (512x512)</option> | |
| <option value="hd">HD (1024x1024)</option> | |
| <option value="4k">4K (2048x2048)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="videoOptions" class="hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block mb-2 font-medium">Duration (seconds)</label> | |
| <input type="range" id="durationSlider" min="2" max="30" value="5" class="w-full"> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span>2s</span> | |
| <span id="durationValue">5s</span> | |
| <span>30s</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium">Frame Rate</label> | |
| <select id="fpsSelect" class="w-full bg-white/20 border border-white/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-400"> | |
| <option value="24">24 FPS</option> | |
| <option value="30">30 FPS</option> | |
| <option value="60">60 FPS</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex space-x-3"> | |
| <button id="generateBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate | |
| </button> | |
| <button id="randomPromptBtn" class="bg-white/10 hover:bg-white/20 px-4 py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-dice mr-2"></i> Random Prompt | |
| </button> | |
| </div> | |
| <div id="downloadSection" class="hidden"> | |
| <button id="downloadBtn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="progressContainer" class="hidden bg-white/10 backdrop-blur-sm rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-semibold mb-4">Generation Progress</h3> | |
| <div class="flex items-center mb-2"> | |
| <span id="progressText" class="font-medium">Initializing WAN 2.1 engine...</span> | |
| <span id="progressPercent" class="ml-auto font-bold">0%</span> | |
| </div> | |
| <div class="w-full bg-white/20 rounded-full h-2.5"> | |
| <div id="progressBar" class="generation-progress bg-purple-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-semibold mb-4">Recent Creations</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="media-preview bg-white/5 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/200x200/6e8efb/a777e3?text=Sample+1" alt="Sample" class="w-full h-auto"> | |
| </div> | |
| <div class="media-preview bg-white/5 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/200x200/a777e3/6e8efb?text=Sample+2" alt="Sample" class="w-full h-auto"> | |
| </div> | |
| <div class="media-preview bg-white/5 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/200x200/6e8efb/a777e3?text=Sample+3" alt="Sample" class="w-full h-auto"> | |
| </div> | |
| <div class="media-preview bg-white/5 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/200x200/a777e3/6e8efb?text=Sample+4" alt="Sample" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6"> | |
| <h3 class="text-xl font-semibold mb-4">WAN 2.1 Features</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-2"></i> | |
| <span>100% Free - No hidden costs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-2"></i> | |
| <span>No login required</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-2"></i> | |
| <span>Hyper-realistic image generation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-2"></i> | |
| <span>4K resolution support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-purple-300 mt-1 mr-2"></i> | |
| <span>60 FPS smooth video generation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-12 text-center text-white/70 text-sm"> | |
| <p>WAN 2.1 Media Generator - Free Forever | No Login Required | Unlimited Generations</p> | |
| <p class="mt-2">© 2023 WAN Technologies - All rights reserved</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const imageTab = document.getElementById('imageTab'); | |
| const videoTab = document.getElementById('videoTab'); | |
| const videoOptions = document.getElementById('videoOptions'); | |
| const promptInput = document.getElementById('promptInput'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const randomPromptBtn = document.getElementById('randomPromptBtn'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const downloadSection = document.getElementById('downloadSection'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressText = document.getElementById('progressText'); | |
| const progressPercent = document.getElementById('progressPercent'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const generatedImage = document.getElementById('generatedImage'); | |
| const generatedVideo = document.getElementById('generatedVideo'); | |
| const durationSlider = document.getElementById('durationSlider'); | |
| const durationValue = document.getElementById('durationValue'); | |
| // Sample prompts for random generation | |
| const samplePrompts = [ | |
| "A futuristic cityscape at sunset with flying cars and neon lights", | |
| "A majestic dragon perched on a mountain peak, digital art style", | |
| "Portrait of a cyberpunk samurai with glowing red eyes", | |
| "Underwater scene with colorful coral reefs and tropical fish", | |
| "A cozy cabin in the woods during winter, warm lights inside", | |
| "An astronaut floating in space with Earth in the background", | |
| "A fantasy marketplace with elves, dwarves, and magical creatures", | |
| "A steampunk airship flying through stormy clouds", | |
| "A mystical forest with giant mushrooms and fireflies", | |
| "A hyper-realistic close-up of a tiger's face" | |
| ]; | |
| // Tab switching | |
| imageTab.addEventListener('click', () => { | |
| imageTab.classList.add('tab-active'); | |
| videoTab.classList.remove('tab-active'); | |
| videoOptions.classList.add('hidden'); | |
| generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Image'; | |
| }); | |
| videoTab.addEventListener('click', () => { | |
| videoTab.classList.add('tab-active'); | |
| imageTab.classList.remove('tab-active'); | |
| videoOptions.classList.remove('hidden'); | |
| generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Video'; | |
| }); | |
| // Duration slider update | |
| durationSlider.addEventListener('input', () => { | |
| durationValue.textContent = `${durationSlider.value}s`; | |
| }); | |
| // Random prompt generator | |
| randomPromptBtn.addEventListener('click', () => { | |
| const randomPrompt = samplePrompts[Math.floor(Math.random() * samplePrompts.length)]; | |
| promptInput.value = randomPrompt; | |
| }); | |
| // Generate media | |
| generateBtn.addEventListener('click', () => { | |
| const prompt = promptInput.value.trim(); | |
| if (!prompt) { | |
| alert('Please enter a prompt'); | |
| return; | |
| } | |
| // Show progress | |
| progressContainer.classList.remove('hidden'); | |
| downloadSection.classList.add('hidden'); | |
| // Hide empty state and any previous media | |
| emptyState.classList.add('hidden'); | |
| generatedImage.classList.add('hidden'); | |
| generatedVideo.classList.add('hidden'); | |
| // Simulate generation progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressPercent.textContent = `${Math.floor(progress)}%`; | |
| // Update status text | |
| if (progress < 30) { | |
| progressText.textContent = "Initializing WAN 2.1 engine..."; | |
| } else if (progress < 60) { | |
| progressText.textContent = "Processing your prompt..."; | |
| } else if (progress < 90) { | |
| progressText.textContent = "Generating media content..."; | |
| } else { | |
| progressText.textContent = "Finalizing output..."; | |
| } | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(showGeneratedMedia, 500); | |
| } | |
| }, 300); | |
| }); | |
| // Show generated media | |
| function showGeneratedMedia() { | |
| progressContainer.classList.add('hidden'); | |
| downloadSection.classList.remove('hidden'); | |
| const isImage = imageTab.classList.contains('tab-active'); | |
| if (isImage) { | |
| // For demo purposes, we'll use a placeholder image | |
| // In a real app, this would be the generated image from your API | |
| generatedImage.src = `https://source.unsplash.com/random/1024x1024/?${encodeURIComponent(promptInput.value)}`; | |
| generatedImage.onload = () => { | |
| generatedImage.classList.remove('hidden'); | |
| }; | |
| } else { | |
| // For demo purposes, we'll use a sample video | |
| // In a real app, this would be the generated video from your API | |
| generatedVideo.src = "https://samplelib.com/lib/preview/mp4/sample-5s.mp4"; | |
| generatedVideo.onloadeddata = () => { | |
| generatedVideo.classList.remove('hidden'); | |
| }; | |
| } | |
| } | |
| // Download functionality | |
| downloadBtn.addEventListener('click', () => { | |
| const isImage = imageTab.classList.contains('tab-active'); | |
| let downloadUrl, fileName; | |
| if (isImage) { | |
| downloadUrl = generatedImage.src; | |
| fileName = `wan-image-${Date.now()}.jpg`; | |
| } else { | |
| downloadUrl = generatedVideo.src; | |
| fileName = `wan-video-${Date.now()}.mp4`; | |
| } | |
| const a = document.createElement('a'); | |
| a.href = downloadUrl; | |
| a.download = fileName; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| // Show download confirmation | |
| const originalText = downloadBtn.innerHTML; | |
| downloadBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Downloaded!'; | |
| setTimeout(() => { | |
| downloadBtn.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| </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=theunseenones94/level-up-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |