Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelRevive - Media Enhancement Tool</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, #667eea 0%, #764ba2 100%); | |
| } | |
| .file-upload { | |
| border: 2px dashed rgba(255, 255, 255, 0.4); | |
| transition: all 0.3s ease; | |
| } | |
| .file-upload:hover { | |
| border-color: rgba(255, 255, 255, 0.8); | |
| transform: translateY(-2px); | |
| } | |
| .enhancement-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .enhancement-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #667eea; | |
| cursor: pointer; | |
| } | |
| .before-after { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .before-after .before { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 50%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .slider-handle { | |
| position: absolute; | |
| width: 4px; | |
| height: 100%; | |
| background: white; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| cursor: ew-resize; | |
| } | |
| .slider-handle::after { | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: white; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-2">PixelRevive</h1> | |
| <p class="text-xl opacity-80">Bring your media to life with AI-powered enhancement and colorization</p> | |
| </header> | |
| <div class="max-w-4xl mx-auto bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 shadow-xl"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Upload Section --> | |
| <div class="w-full md:w-1/2"> | |
| <div class="file-upload rounded-xl p-8 text-center cursor-pointer mb-6" id="dropZone"> | |
| <i class="fas fa-cloud-upload-alt text-4xl mb-4 opacity-70"></i> | |
| <h3 class="text-xl font-semibold mb-2">Drag & Drop Media Here</h3> | |
| <p class="opacity-70 mb-4">or click to browse files</p> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*, video/*"> | |
| <button class="bg-white text-purple-700 px-6 py-2 rounded-full font-medium hover:bg-opacity-90 transition"> | |
| Select File | |
| </button> | |
| </div> | |
| <div class="bg-white bg-opacity-5 rounded-xl p-4 mb-6"> | |
| <h3 class="font-semibold mb-3">Enhancement Options</h3> | |
| <div class="space-y-4"> | |
| <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox rounded text-purple-500" checked> | |
| <span class="ml-2">Colorize B&W</span> | |
| </label> | |
| <span class="text-xs bg-purple-500 px-2 py-1 rounded-full">AI</span> | |
| </div> | |
| <p class="text-xs opacity-70">Automatically add realistic colors to black & white media</p> | |
| </div> | |
| <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox rounded text-purple-500" checked> | |
| <span class="ml-2">Enhance Quality</span> | |
| </label> | |
| <span class="text-xs bg-purple-500 px-2 py-1 rounded-full">AI</span> | |
| </div> | |
| <p class="text-xs opacity-70">Increase resolution and reduce noise</p> | |
| </div> | |
| <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox rounded text-purple-500"> | |
| <span class="ml-2">Restore Details</span> | |
| </label> | |
| </div> | |
| <p class="text-xs opacity-70">Recover lost details in old or damaged media</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-5 rounded-xl p-4"> | |
| <h3 class="font-semibold mb-3">Adjustment Sliders</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1">Color Intensity</label> | |
| <input type="range" min="0" max="100" value="70" class="w-full slider-thumb"> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Sharpness</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1">Noise Reduction</label> | |
| <input type="range" min="0" max="100" value="30" class="w-full slider-thumb"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="w-full md:w-1/2"> | |
| <div class="bg-black bg-opacity-20 rounded-xl p-4 mb-4"> | |
| <h3 class="font-semibold mb-3">Preview</h3> | |
| <div class="before-after rounded-lg overflow-hidden relative h-64 bg-gray-800 flex items-center justify-center" id="previewContainer"> | |
| <div class="text-center" id="emptyPreview"> | |
| <i class="fas fa-image text-4xl opacity-30 mb-2"></i> | |
| <p class="opacity-50">Your enhanced media will appear here</p> | |
| </div> | |
| <div class="hidden" id="imagePreview"> | |
| <img src="" alt="Preview" class="max-w-full max-h-64 mx-auto" id="previewImage"> | |
| <div class="before"> | |
| <img src="" alt="Original" class="max-w-full max-h-64" id="beforeImage"> | |
| </div> | |
| <div class="slider-handle"></div> | |
| </div> | |
| <div class="hidden" id="videoPreview"> | |
| <video controls class="max-w-full max-h-64 mx-auto" id="previewVideo"></video> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-5 rounded-xl p-4 mb-4"> | |
| <h3 class="font-semibold mb-3">Processing Status</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div> | |
| <span>File uploaded</span> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div> | |
| <span>Analyzing content</span> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div> | |
| <span>Applying enhancements</span> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div> | |
| <span>Finalizing output</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-xl font-semibold flex items-center justify-center transition disabled:opacity-50" id="processBtn" disabled> | |
| <i class="fas fa-magic mr-2"></i> Process Media | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-4xl mx-auto mt-12"> | |
| <h2 class="text-2xl font-semibold mb-6 text-center">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-upload text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Upload Media</h3> | |
| <p class="opacity-80 text-sm">Upload your black & white or low-quality images/videos</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-cogs text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">AI Processing</h3> | |
| <p class="opacity-80 text-sm">Our advanced algorithms analyze and enhance your media</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center"> | |
| <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-download text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Download Result</h3> | |
| <p class="opacity-80 text-sm">Get your colorized and enhanced media in high quality</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center py-8 opacity-70 text-sm"> | |
| <p>© 2023 PixelRevive - AI Media Enhancement Tool</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fileInput = document.getElementById('fileInput'); | |
| const dropZone = document.getElementById('dropZone'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const emptyPreview = document.getElementById('emptyPreview'); | |
| const imagePreview = document.getElementById('imagePreview'); | |
| const videoPreview = document.getElementById('videoPreview'); | |
| const previewImage = document.getElementById('previewImage'); | |
| const beforeImage = document.getElementById('beforeImage'); | |
| const previewVideo = document.getElementById('previewVideo'); | |
| // Handle file selection | |
| dropZone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFileSelect); | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropZone.classList.add('border-white', 'border-opacity-80'); | |
| } | |
| function unhighlight() { | |
| dropZone.classList.remove('border-white', 'border-opacity-80'); | |
| } | |
| dropZone.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length) { | |
| fileInput.files = files; | |
| handleFileSelect({ target: fileInput }); | |
| } | |
| } | |
| function handleFileSelect(e) { | |
| const file = e.target.files[0]; | |
| if (!file) return; | |
| // Enable process button | |
| processBtn.disabled = false; | |
| // Hide empty preview | |
| emptyPreview.classList.add('hidden'); | |
| // Check if file is image or video | |
| if (file.type.startsWith('image/')) { | |
| imagePreview.classList.remove('hidden'); | |
| videoPreview.classList.add('hidden'); | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| previewImage.src = e.target.result; | |
| beforeImage.src = e.target.result; | |
| // Initialize before/after slider | |
| initBeforeAfterSlider(); | |
| }; | |
| reader.readAsDataURL(file); | |
| } else if (file.type.startsWith('video/')) { | |
| imagePreview.classList.add('hidden'); | |
| videoPreview.classList.remove('hidden'); | |
| const videoURL = URL.createObjectURL(file); | |
| previewVideo.src = videoURL; | |
| } | |
| } | |
| function initBeforeAfterSlider() { | |
| const container = document.querySelector('.before-after'); | |
| const before = document.querySelector('.before'); | |
| const handle = document.querySelector('.slider-handle'); | |
| let isDragging = false; | |
| handle.addEventListener('mousedown', () => { | |
| isDragging = true; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| const containerRect = container.getBoundingClientRect(); | |
| let x = e.clientX - containerRect.left; | |
| // Constrain within container | |
| x = Math.max(0, Math.min(x, containerRect.width)); | |
| const percent = (x / containerRect.width) * 100; | |
| before.style.width = `${percent}%`; | |
| handle.style.left = `${percent}%`; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| }); | |
| // Touch support | |
| handle.addEventListener('touchstart', () => { | |
| isDragging = true; | |
| }); | |
| document.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| const containerRect = container.getBoundingClientRect(); | |
| let x = e.touches[0].clientX - containerRect.left; | |
| // Constrain within container | |
| x = Math.max(0, Math.min(x, containerRect.width)); | |
| const percent = (x / containerRect.width) * 100; | |
| before.style.width = `${percent}%`; | |
| handle.style.left = `${percent}%`; | |
| }); | |
| document.addEventListener('touchend', () => { | |
| isDragging = false; | |
| }); | |
| } | |
| // Process button click | |
| processBtn.addEventListener('click', function() { | |
| // Simulate processing | |
| processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; | |
| processBtn.disabled = true; | |
| // Simulate progress | |
| const statusItems = document.querySelectorAll('.bg-gray-500'); | |
| let i = 0; | |
| const interval = setInterval(() => { | |
| if (i < statusItems.length) { | |
| statusItems[i].classList.remove('bg-gray-500'); | |
| statusItems[i].classList.add('bg-green-500'); | |
| i++; | |
| } else { | |
| clearInterval(interval); | |
| // Show success message | |
| processBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Processing Complete!'; | |
| // After 2 seconds, change to download button | |
| setTimeout(() => { | |
| processBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download Result'; | |
| processBtn.disabled = false; | |
| // Change button color | |
| processBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700'); | |
| processBtn.classList.add('bg-green-600', 'hover:bg-green-700'); | |
| }, 2000); | |
| } | |
| }, 1000); | |
| }); | |
| }); | |
| </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=likesimo75/revive" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |