Spaces:

Svngoku
/

image-upscaler-ui

Running

File size: 27,298 Bytes

1e958b1

<!DOCTYPE html>
<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>