Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Upscaler Pro</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> | |
| .dropzone { | |
| border: 2px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: rgba(59, 130, 246, 0.05); | |
| } | |
| .image-card { | |
| transition: all 0.3s ease; | |
| } | |
| .image-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Image Upscaler Pro</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Enhance your images with our advanced upscaling technology. Upload multiple images, process them, and download the results.</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit sticky top-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Upload Images</h2> | |
| <!-- Dropzone --> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4"> | |
| <div class="flex flex-col items-center justify-center space-y-2"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500"></i> | |
| <p class="text-gray-600">Drag & drop images here or click to browse</p> | |
| <p class="text-sm text-gray-400">Supports JPG, PNG, WEBP (Max 10MB each)</p> | |
| </div> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*" multiple> | |
| </div> | |
| <button id="uploadBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-upload"></i> | |
| <span>Select Files</span> | |
| </button> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 mb-2">Upscale Options</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scale2x" name="scale" value="2" class="h-4 w-4 text-blue-600" checked> | |
| <label for="scale2x" class="ml-2 text-gray-700">2x Upscale</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scale4x" name="scale" value="4" class="h-4 w-4 text-blue-600"> | |
| <label for="scale4x" class="ml-2 text-gray-700">4x Upscale</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="scale8x" name="scale" value="8" class="h-4 w-4 text-blue-600"> | |
| <label for="scale8x" class="ml-2 text-gray-700">8x Upscale (Slow)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 mb-2">Processing Options</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="enhanceDetails" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <label for="enhanceDetails" class="ml-2 text-gray-700">Enhance Details</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="reduceNoise" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <label for="reduceNoise" class="ml-2 text-gray-700">Reduce Noise</label> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="processBtn" class="w-full mt-6 bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i class="fas fa-magic"></i> | |
| <span>Process Images</span> | |
| </button> | |
| <button id="downloadBtn" class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled> | |
| <i class="fas fa-file-export"></i> | |
| <span>Export Results</span> | |
| </button> | |
| </div> | |
| <!-- Image Gallery --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Image Gallery</h2> | |
| <div class="text-sm text-gray-500"> | |
| <span id="imageCount">0</span> images selected | |
| </div> | |
| </div> | |
| <!-- Status Messages --> | |
| <div id="statusMessage" class="hidden mb-6 p-4 rounded-lg"></div> | |
| <!-- Processing Progress --> | |
| <div id="progressContainer" class="hidden mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Processing images</span> | |
| <span id="progressText">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progressBar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="text-center py-12"> | |
| <i class="fas fa-images text-4xl text-gray-300 mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-500">No images uploaded yet</h3> | |
| <p class="text-gray-400 mt-1">Upload some images to get started</p> | |
| </div> | |
| <!-- Image Grid --> | |
| <div id="imageGrid" class="grid grid-cols-1 sm:grid-cols-2 gap-4 hidden"> | |
| <!-- Images will be added here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const uploadBtn = document.getElementById('uploadBtn'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const imageGrid = document.getElementById('imageGrid'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const imageCount = document.getElementById('imageCount'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressText = document.getElementById('progressText'); | |
| const statusMessage = document.getElementById('statusMessage'); | |
| // State | |
| let images = []; | |
| let processedImages = []; | |
| // Event Listeners | |
| uploadBtn.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFileSelect); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| fileInput.files = e.dataTransfer.files; | |
| handleFileSelect({ target: fileInput }); | |
| }); | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| processBtn.addEventListener('click', processImages); | |
| downloadBtn.addEventListener('click', exportResults); | |
| // Functions | |
| function handleFileSelect(event) { | |
| const files = event.target.files; | |
| if (!files.length) return; | |
| images = []; | |
| processedImages = []; | |
| imageGrid.innerHTML = ''; | |
| let validFiles = 0; | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| // Check file type | |
| if (!file.type.match('image.*')) { | |
| showStatus(`Skipped ${file.name}: Not an image file`, 'warning'); | |
| continue; | |
| } | |
| // Check file size (10MB max) | |
| if (file.size > 10 * 1024 * 1024) { | |
| showStatus(`Skipped ${file.name}: File too large (max 10MB)`, 'warning'); | |
| continue; | |
| } | |
| validFiles++; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = new Image(); | |
| img.onload = function() { | |
| images.push({ | |
| id: Date.now() + i, | |
| name: file.name, | |
| original: e.target.result, | |
| processed: null, | |
| width: img.width, | |
| height: img.height, | |
| status: 'pending' | |
| }); | |
| updateUI(); | |
| }; | |
| img.src = e.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| if (validFiles > 0) { | |
| showStatus(`Successfully added ${validFiles} image(s)`, 'success'); | |
| processBtn.disabled = false; | |
| } | |
| } | |
| function updateUI() { | |
| if (images.length === 0) { | |
| emptyState.classList.remove('hidden'); | |
| imageGrid.classList.add('hidden'); | |
| imageCount.textContent = '0'; | |
| processBtn.disabled = true; | |
| downloadBtn.disabled = true; | |
| return; | |
| } | |
| emptyState.classList.add('hidden'); | |
| imageGrid.classList.remove('hidden'); | |
| imageCount.textContent = images.length; | |
| imageGrid.innerHTML = ''; | |
| images.forEach((img, index) => { | |
| const card = document.createElement('div'); | |
| card.className = 'image-card bg-gray-50 rounded-lg overflow-hidden border border-gray-200'; | |
| card.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${img.original}" alt="${img.name}" class="w-full h-40 object-contain bg-gray-100"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow"> | |
| ${img.status === 'processed' ? | |
| '<i class="fas fa-check-circle text-green-500"></i>' : | |
| img.status === 'processing' ? | |
| '<i class="fas fa-spinner fa-spin text-blue-500"></i>' : | |
| '<i class="fas fa-clock text-gray-400"></i>'} | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="flex justify-between items-start"> | |
| <div class="truncate"> | |
| <h3 class="text-sm font-medium text-gray-800 truncate">${img.name}</h3> | |
| <p class="text-xs text-gray-500">${img.width} × ${img.height}</p> | |
| </div> | |
| ${img.processed ? | |
| `<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">${Math.round((img.processed.size / img.original.length) * 100)}% larger</span>` : | |
| ''} | |
| </div> | |
| ${img.status === 'processed' ? ` | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="view-result-btn flex-1 bg-blue-50 hover:bg-blue-100 text-blue-600 text-xs py-1 px-2 rounded flex items-center justify-center space-x-1" data-id="${img.id}"> | |
| <i class="fas fa-eye text-xs"></i> | |
| <span>View</span> | |
| </button> | |
| </div>` : ''} | |
| </div> | |
| `; | |
| imageGrid.appendChild(card); | |
| }); | |
| // Add event listeners to view buttons | |
| document.querySelectorAll('.view-result-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const id = parseInt(this.getAttribute('data-id')); | |
| viewResult(id); | |
| }); | |
| }); | |
| } | |
| function processImages() { | |
| if (images.length === 0) return; | |
| processBtn.disabled = true; | |
| downloadBtn.disabled = true; | |
| progressContainer.classList.remove('hidden'); | |
| // Simulate processing with progress updates | |
| let processed = 0; | |
| const total = images.length; | |
| // Update all images to processing status | |
| images.forEach(img => { | |
| img.status = 'processing'; | |
| }); | |
| updateUI(); | |
| // Process each image (simulated) | |
| const processInterval = setInterval(() => { | |
| if (processed >= total) { | |
| clearInterval(processInterval); | |
| processingComplete(); | |
| return; | |
| } | |
| const currentImage = images[processed]; | |
| // Simulate processing time (1-3 seconds per image) | |
| setTimeout(() => { | |
| // This is where you would normally call your actual upscaling API | |
| // For demo purposes, we're just creating a slightly larger version | |
| const scaleFactor = parseInt(document.querySelector('input[name="scale"]:checked').value); | |
| const enhanceDetails = document.getElementById('enhanceDetails').checked; | |
| const reduceNoise = document.getElementById('reduceNoise').checked; | |
| // Create a canvas to "process" the image | |
| const canvas = document.createElement('canvas'); | |
| const img = new Image(); | |
| img.onload = function() { | |
| canvas.width = img.width * scaleFactor; | |
| canvas.height = img.height * scaleFactor; | |
| const ctx = canvas.getContext('2d'); | |
| ctx.imageSmoothingEnabled = true; | |
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | |
| // Apply some "enhancements" (simulated) | |
| if (enhanceDetails || reduceNoise) { | |
| // In a real app, you would apply actual image processing here | |
| // For demo, we'll just add a slight overlay | |
| ctx.globalCompositeOperation = 'overlay'; | |
| ctx.fillStyle = enhanceDetails ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.02)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.globalCompositeOperation = 'source-over'; | |
| } | |
| const processedDataUrl = canvas.toDataURL('image/jpeg', 0.9); | |
| currentImage.processed = { | |
| data: processedDataUrl, | |
| size: processedDataUrl.length, | |
| width: canvas.width, | |
| height: canvas.height, | |
| scale: scaleFactor, | |
| options: { | |
| enhanceDetails, | |
| reduceNoise | |
| } | |
| }; | |
| currentImage.status = 'processed'; | |
| processed++; | |
| const progress = Math.round((processed / total) * 100); | |
| progressBar.style.width = `${progress}%`; | |
| progressText.textContent = `${progress}%`; | |
| updateUI(); | |
| if (processed === total) { | |
| processingComplete(); | |
| } | |
| }; | |
| img.src = currentImage.original; | |
| }, Math.random() * 2000 + 1000); | |
| }, 100); | |
| } | |
| function processingComplete() { | |
| showStatus('All images processed successfully!', 'success'); | |
| processBtn.disabled = true; | |
| downloadBtn.disabled = false; | |
| processedImages = [...images]; | |
| // Hide progress bar after a delay | |
| setTimeout(() => { | |
| progressContainer.classList.add('hidden'); | |
| progressBar.style.width = '0%'; | |
| progressText.textContent = '0%'; | |
| }, 2000); | |
| } | |
| function viewResult(id) { | |
| const image = images.find(img => img.id === id); | |
| if (!image || !image.processed) return; | |
| // Create modal | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4'; | |
| modal.innerHTML = ` | |
| <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-lg font-semibold">${image.name}</h3> | |
| <button class="close-modal text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Original (${image.width} × ${image.height})</h4> | |
| <img src="${image.original}" class="w-full h-auto max-h-[60vh] object-contain bg-gray-100 rounded"> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Upscaled ${image.processed.scale}x (${image.processed.width} × ${image.processed.height})</h4> | |
| <img src="${image.processed.data}" class="w-full h-auto max-h-[60vh] object-contain bg-gray-100 rounded"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t p-4 flex justify-end space-x-3"> | |
| <button class="download-single-btn bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2" data-id="${image.id}"> | |
| <i class="fas fa-download"></i> | |
| <span>Download</span> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| // Add event listeners | |
| modal.querySelector('.close-modal').addEventListener('click', () => { | |
| document.body.removeChild(modal); | |
| }); | |
| modal.querySelector('.download-single-btn').addEventListener('click', () => { | |
| downloadSingleImage(image); | |
| document.body.removeChild(modal); | |
| }); | |
| } | |
| function downloadSingleImage(image) { | |
| if (!image.processed) return; | |
| const a = document.createElement('a'); | |
| a.href = image.processed.data; | |
| a.download = `upscaled_${image.name.split('.')[0]}.jpg`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| showStatus(`Downloaded upscaled version of ${image.name}`, 'success'); | |
| } | |
| function exportResults() { | |
| if (processedImages.length === 0) return; | |
| // Prepare data for export | |
| const exportData = processedImages.map(img => ({ | |
| id: img.id, | |
| name: img.name, | |
| originalWidth: img.width, | |
| originalHeight: img.height, | |
| originalBase64: img.original, | |
| processedWidth: img.processed.width, | |
| processedHeight: img.processed.height, | |
| processedBase64: img.processed.data, | |
| scaleFactor: img.processed.scale, | |
| processingOptions: img.processed.options, | |
| timestamp: new Date().toISOString() | |
| })); | |
| // Create JSON file | |
| const json = JSON.stringify(exportData, null, 2); | |
| const blob = new Blob([json], { type: 'application/json' }); | |
| const url = URL.createObjectURL(blob); | |
| // Create download link | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `image_upscale_results_${new Date().toISOString().slice(0, 10)}.json`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| // Clean up | |
| setTimeout(() => { | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }, 100); | |
| showStatus(`Exported ${processedImages.length} image results`, 'success'); | |
| } | |
| function showStatus(message, type) { | |
| statusMessage.classList.remove('hidden'); | |
| statusMessage.textContent = message; | |
| // Set color based on type | |
| const colors = { | |
| success: 'bg-green-100 text-green-800', | |
| warning: 'bg-yellow-100 text-yellow-800', | |
| error: 'bg-red-100 text-red-800', | |
| info: 'bg-blue-100 text-blue-800' | |
| }; | |
| // Reset classes | |
| statusMessage.className = 'mb-6 p-4 rounded-lg'; | |
| statusMessage.classList.add(colors[type] || colors.info); | |
| // Auto-hide after 5 seconds | |
| setTimeout(() => { | |
| statusMessage.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| }); | |
| </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=Svngoku/image-upscaler-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |