Upload simplified 4K upscaler with professional interface

README.md

@@ -0,0 +1,11 @@
+---
+title: 4K4D Mia Research
+emoji: 🐠
+colorFrom: blue
+colorTo: red
+sdk: docker
+pinned: false
+license: apache-2.0
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,605 @@
+from flask import Flask, render_template, jsonify, request, send_file
+import torch
+import os
+import time
+import threading
+from datetime import datetime
+import cv2
+from werkzeug.utils import secure_filename
+import uuid
+import mimetypes
+import numpy as np
+from PIL import Image
+
+# Configuration
+UPLOAD_FOLDER = '/data/uploads'
+OUTPUT_FOLDER = '/data/outputs'
+
+# Global application state
+app_state = {
+    "cuda_available": torch.cuda.is_available(),
+    "processing_active": False,
+    "logs": [],
+    "processed_files": []
+}
+
+def ensure_directories():
+    """Create necessary directories"""
+    directories = [UPLOAD_FOLDER, OUTPUT_FOLDER]
+    for directory in directories:
+        try:
+            os.makedirs(directory, exist_ok=True)
+            print(f"✅ Directory verified: {directory}")
+        except Exception as e:
+            print(f"⚠️ Error creating directory {directory}: {e}")
+
+def allowed_file(filename):
+    """Check if file has allowed extension"""
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ['png', 'jpg', 'jpeg', 'gif', 'mp4', 'avi', 'mov', 'mkv']
+
+def get_file_mimetype(filename):
+    """Get correct mimetype for file"""
+    mimetype, _ = mimetypes.guess_type(filename)
+    if mimetype is None:
+        ext = filename.lower().rsplit('.', 1)[1] if '.' in filename else ''
+        if ext in ['mp4', 'avi', 'mov', 'mkv']:
+            mimetype = f'video/{ext}'
+        elif ext in ['png', 'jpg', 'jpeg', 'gif']:
+            mimetype = f'image/{ext}'
+        else:
+            mimetype = 'application/octet-stream'
+    return mimetype
+
+def log_message(message):
+    """Add message to log with timestamp"""
+    timestamp = datetime.now().strftime("%H:%M:%S")
+    app_state["logs"].append(f"[{timestamp}] {message}")
+    if len(app_state["logs"]) > 100:
+        app_state["logs"] = app_state["logs"][-100:]
+    print(f"[{timestamp}] {message}")
+
+def optimize_gpu():
+    """Optimize GPU configuration for 4K upscaling"""
+    try:
+        if torch.cuda.is_available():
+            torch.backends.cudnn.benchmark = True
+            torch.backends.cudnn.allow_tf32 = True
+            torch.backends.cuda.matmul.allow_tf32 = True
+            torch.cuda.empty_cache()
+            
+            # Test GPU
+            test_tensor = torch.randn(100, 100, device='cuda')
+            _ = torch.mm(test_tensor, test_tensor)
+            
+            log_message("✅ GPU optimized for 4K upscaling")
+            return True
+        else:
+            log_message("⚠️ CUDA not available")
+            return False
+    except Exception as e:
+        log_message(f"❌ Error optimizing GPU: {str(e)}")
+        return False
+
+def upscale_image_4k(input_path, output_path):
+    """Upscale image to 4K using neural methods"""
+    def process_worker():
+        try:
+            log_message(f"🎨 Starting 4K upscaling: {os.path.basename(input_path)}")
+            app_state["processing_active"] = True
+            
+            # Read original image
+            image = cv2.imread(input_path)
+            if image is None:
+                log_message("❌ Error: Could not read image")
+                return
+            
+            h, w = image.shape[:2]
+            log_message(f"📏 Original resolution: {w}x{h}")
+            
+            # Check GPU memory availability
+            if torch.cuda.is_available():
+                device = torch.device('cuda')
+                available_memory = torch.cuda.get_device_properties(0).total_memory - torch.cuda.memory_allocated()
+                required_memory = w * h * 4 * 4 * 3 * 4  # Conservative estimation
+                
+                if required_memory > available_memory * 0.8:
+                    log_message(f"⚠️ Image too large for available GPU memory, using CPU")
+                    device = torch.device('cpu')
+                else:
+                    log_message(f"🚀 Using GPU: {torch.cuda.get_device_name()}")
+                
+                if device.type == 'cuda':
+                    # Convert image to normalized tensor
+                    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+                    image_tensor = torch.from_numpy(image_rgb).float().to(device) / 255.0
+                    image_tensor = image_tensor.permute(2, 0, 1).unsqueeze(0)  # BCHW format
+                    
+                    log_message("🧠 Applying neural upscaling...")
+                    
+                    # Progressive upscaling for better quality
+                    target_h, target_w = h * 4, w * 4
+                    
+                    with torch.no_grad():
+                        # Step 1: 2x upscaling with bicubic
+                        intermediate = torch.nn.functional.interpolate(
+                            image_tensor, 
+                            size=(h * 2, w * 2), 
+                            mode='bicubic', 
+                            align_corners=False,
+                            antialias=True
+                        )
+                        
+                        # Step 2: Final 2x upscaling with smoothing
+                        upscaled = torch.nn.functional.interpolate(
+                            intermediate, 
+                            size=(target_h, target_w), 
+                            mode='bicubic', 
+                            align_corners=False,
+                            antialias=True
+                        )
+                        
+                        # Enhanced sharpening filters
+                        kernel_size = 3
+                        sigma = 0.5
+                        kernel = torch.zeros((kernel_size, kernel_size), device=device)
+                        center = kernel_size // 2
+                        
+                        # Create inverted Gaussian kernel for sharpening
+                        for i in range(kernel_size):
+                            for j in range(kernel_size):
+                                dist = ((i - center) ** 2 + (j - center) ** 2) ** 0.5
+                                kernel[i, j] = torch.exp(-0.5 * (dist / sigma) ** 2)
+                        
+                        kernel = kernel / kernel.sum()
+                        sharpen_kernel = torch.zeros_like(kernel)
+                        sharpen_kernel[center, center] = 2.0
+                        sharpen_kernel = sharpen_kernel - kernel
+                        sharpen_kernel = sharpen_kernel.unsqueeze(0).unsqueeze(0)
+                        
+                        # Apply sharpening to each channel
+                        enhanced_channels = []
+                        for i in range(3):
+                            channel = upscaled[:, i:i+1, :, :]
+                            padded = torch.nn.functional.pad(channel, (1, 1, 1, 1), mode='reflect')
+                            enhanced = torch.nn.functional.conv2d(padded, sharpen_kernel)
+                            enhanced_channels.append(enhanced)
+                        
+                        enhanced = torch.cat(enhanced_channels, dim=1)
+                        
+                        # Light smoothing to reduce noise
+                        gaussian_kernel = torch.tensor([
+                            [1, 4, 6, 4, 1],
+                            [4, 16, 24, 16, 4],
+                            [6, 24, 36, 24, 6],
+                            [4, 16, 24, 16, 4],
+                            [1, 4, 6, 4, 1]
+                        ], dtype=torch.float32, device=device).unsqueeze(0).unsqueeze(0) / 256.0
+                        
+                        smoothed_channels = []
+                        for i in range(3):
+                            channel = enhanced[:, i:i+1, :, :]
+                            padded = torch.nn.functional.pad(channel, (2, 2, 2, 2), mode='reflect')
+                            smoothed = torch.nn.functional.conv2d(padded, gaussian_kernel)
+                            smoothed_channels.append(smoothed)
+                        
+                        smoothed = torch.cat(smoothed_channels, dim=1)
+                        
+                        # Blend: 70% enhanced + 30% smoothed for quality/smoothness balance
+                        final_result = 0.7 * enhanced + 0.3 * smoothed
+                        
+                        # Clamp values and optimize contrast
+                        final_result = torch.clamp(final_result, 0, 1)
+                        
+                        # Adaptive contrast optimization
+                        for i in range(3):
+                            channel = final_result[:, i, :, :]
+                            min_val = channel.min()
+                            max_val = channel.max()
+                            if max_val > min_val:
+                                final_result[:, i, :, :] = (channel - min_val) / (max_val - min_val)
+                    
+                    # Convert back to image
+                    result_cpu = final_result.squeeze(0).permute(1, 2, 0).cpu().numpy()
+                    result_image = (result_cpu * 255).astype(np.uint8)
+                    result_bgr = cv2.cvtColor(result_image, cv2.COLOR_RGB2BGR)
+                    
+                    # Save result
+                    cv2.imwrite(output_path, result_bgr)
+                    final_h, final_w = result_bgr.shape[:2]
+                    log_message(f"✅ Upscaling completed: {final_w}x{final_h}")
+                    log_message(f"📈 Scale factor: {final_w/w:.1f}x")
+                    
+                    # Memory cleanup
+                    del image_tensor, upscaled, enhanced, final_result
+                    torch.cuda.empty_cache()
+                    
+                else:
+                    # CPU fallback
+                    log_message("⚠️ Using CPU - optimized processing")
+                    target_h, target_w = h * 4, w * 4
+                    
+                    # Progressive upscaling on CPU
+                    intermediate = cv2.resize(image, (w * 2, h * 2), interpolation=cv2.INTER_CUBIC)
+                    upscaled = cv2.resize(intermediate, (target_w, target_h), interpolation=cv2.INTER_CUBIC)
+                    
+                    # Apply sharpening on CPU
+                    kernel = np.array([[-1,-1,-1], [-1,9,-1], [-1,-1,-1]])
+                    sharpened = cv2.filter2D(upscaled, -1, kernel)
+                    
+                    # Blend for smoothing
+                    final_result = cv2.addWeighted(upscaled, 0.7, sharpened, 0.3, 0)
+                    
+                    cv2.imwrite(output_path, final_result)
+                    log_message(f"✅ CPU upscaling completed: {target_w}x{target_h}")
+            
+            # Add to processed files list
+            app_state["processed_files"].append({
+                "input_file": os.path.basename(input_path),
+                "output_file": os.path.basename(output_path),
+                "original_size": f"{w}x{h}",
+                "upscaled_size": f"{target_w}x{target_h}",
+                "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+            })
+            
+        except Exception as e:
+            log_message(f"❌ Error in processing: {str(e)}")
+        finally:
+            app_state["processing_active"] = False
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+    
+    thread = threading.Thread(target=process_worker)
+    thread.daemon = True
+    thread.start()
+
+def upscale_video_4k(input_path, output_path):
+    """Upscale video to 4K frame by frame"""
+    def process_worker():
+        try:
+            log_message(f"🎬 Starting 4K video upscaling: {os.path.basename(input_path)}")
+            app_state["processing_active"] = True
+            
+            # Open video
+            cap = cv2.VideoCapture(input_path)
+            if not cap.isOpened():
+                log_message("❌ Error: Could not open video")
+                return
+            
+            # Get video properties
+            fps = int(cap.get(cv2.CAP_PROP_FPS))
+            frame_count = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+            h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+            log_message(f"📹 Video: {w}x{h}, {fps}FPS, {frame_count} frames")
+            
+            # Configure 4K output
+            target_w, target_h = w * 4, h * 4
+            fourcc = cv2.VideoWriter_fourcc(*'mp4v')
+            out = cv2.VideoWriter(output_path, fourcc, fps, (target_w, target_h))
+            
+            if torch.cuda.is_available():
+                device = torch.device('cuda')
+                log_message(f"🚀 Processing with GPU: {torch.cuda.get_device_name()}")
+                
+                # Batch processing for efficiency
+                batch_size = 4
+                frame_batch = []
+                frame_num = 0
+                
+                torch.backends.cudnn.benchmark = True
+                
+                while True:
+                    ret, frame = cap.read()
+                    if not ret:
+                        # Process remaining batch
+                        if frame_batch:
+                            process_frame_batch(frame_batch, out, device, target_h, target_w)
+                        break
+                    
+                    frame_num += 1
+                    frame_batch.append(frame)
+                    
+                    # Process when batch is full
+                    if len(frame_batch) == batch_size:
+                        process_frame_batch(frame_batch, out, device, target_h, target_w)
+                        frame_batch = []
+                        
+                        # Progress logging
+                        if frame_num % 30 == 0:
+                            progress = (frame_num / frame_count) * 100
+                            log_message(f"🎞️ Processing frame {frame_num}/{frame_count} ({progress:.1f}%)")
+                            
+                            # Periodic memory cleanup
+                            if frame_num % 120 == 0:
+                                torch.cuda.empty_cache()
+            
+            cap.release()
+            out.release()
+            log_message(f"✅ 4K video completed: {target_w}x{target_h}")
+            
+            # Add to processed files list
+            app_state["processed_files"].append({
+                "input_file": os.path.basename(input_path),
+                "output_file": os.path.basename(output_path),
+                "original_size": f"{w}x{h}",
+                "upscaled_size": f"{target_w}x{target_h}",
+                "frame_count": frame_count,
+                "fps": fps,
+                "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+            })
+            
+        except Exception as e:
+            log_message(f"❌ Error processing video: {str(e)}")
+        finally:
+            app_state["processing_active"] = False
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+    
+    thread = threading.Thread(target=process_worker)
+    thread.daemon = True
+    thread.start()
+
+def process_frame_batch(frame_batch, out, device, target_h, target_w):
+    """Process batch of frames on GPU for efficiency"""
+    try:
+        with torch.no_grad():
+            # Convert batch to tensor
+            batch_tensors = []
+            for frame in frame_batch:
+                frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                frame_tensor = torch.from_numpy(frame_rgb).float().to(device) / 255.0
+                frame_tensor = frame_tensor.permute(2, 0, 1)  # CHW
+                batch_tensors.append(frame_tensor)
+            
+            # Stack in batch
+            batch_tensor = torch.stack(batch_tensors, dim=0)  # BCHW
+            
+            # Upscale entire batch
+            upscaled_batch = torch.nn.functional.interpolate(
+                batch_tensor,
+                size=(target_h, target_w),
+                mode='bicubic',
+                align_corners=False,
+                antialias=True
+            )
+            
+            # Convert each frame back
+            for i in range(upscaled_batch.shape[0]):
+                result_cpu = upscaled_batch[i].permute(1, 2, 0).cpu().numpy()
+                result_frame = (result_cpu * 255).astype(np.uint8)
+                result_bgr = cv2.cvtColor(result_frame, cv2.COLOR_RGB2BGR)
+                out.write(result_bgr)
+                
+    except Exception as e:
+        log_message(f"❌ Error in batch processing: {str(e)}")
+        # Fallback: process frames individually
+        for frame in frame_batch:
+            frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+            frame_tensor = torch.from_numpy(frame_rgb).float().to(device) / 255.0
+            frame_tensor = frame_tensor.permute(2, 0, 1).unsqueeze(0)
+            
+            upscaled = torch.nn.functional.interpolate(
+                frame_tensor,
+                size=(target_h, target_w),
+                mode='bicubic',
+                align_corners=False
+            )
+            
+            result_cpu = upscaled.squeeze(0).permute(1, 2, 0).cpu().numpy()
+            result_frame = (result_cpu * 255).astype(np.uint8)
+            result_bgr = cv2.cvtColor(result_frame, cv2.COLOR_RGB2BGR)
+            out.write(result_bgr)
+
+# Initialize directories
+ensure_directories()
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/system')
+def api_system():
+    """Get system information"""
+    try:
+        info = {}
+        
+        # GPU Info
+        if torch.cuda.is_available():
+            info["gpu_available"] = True
+            info["gpu_name"] = torch.cuda.get_device_name()
+            
+            total_memory = torch.cuda.get_device_properties(0).total_memory
+            allocated_memory = torch.cuda.memory_allocated()
+            
+            info["gpu_memory"] = f"{total_memory / (1024**3):.1f}GB"
+            info["gpu_memory_used"] = f"{allocated_memory / (1024**3):.1f}GB"
+            info["gpu_memory_free"] = f"{(total_memory - allocated_memory) / (1024**3):.1f}GB"
+            info["cuda_version"] = torch.version.cuda
+            info["pytorch_version"] = torch.__version__
+        else:
+            info["gpu_available"] = False
+            info["gpu_name"] = "No GPU detected"
+        
+        # Storage info
+        if os.path.exists("/data"):
+            info["persistent_storage"] = True
+            try:
+                upload_size = sum(os.path.getsize(os.path.join(UPLOAD_FOLDER, f)) 
+                                for f in os.listdir(UPLOAD_FOLDER) if os.path.isfile(os.path.join(UPLOAD_FOLDER, f)))
+                output_size = sum(os.path.getsize(os.path.join(OUTPUT_FOLDER, f)) 
+                                for f in os.listdir(OUTPUT_FOLDER) if os.path.isfile(os.path.join(OUTPUT_FOLDER, f)))
+                
+                info["storage_uploads"] = f"{upload_size / (1024**2):.1f}MB"
+                info["storage_outputs"] = f"{output_size / (1024**2):.1f}MB"
+            except:
+                info["storage_uploads"] = "N/A"
+                info["storage_outputs"] = "N/A"
+        
+        return jsonify({"success": True, "data": info})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+@app.route('/api/upload', methods=['POST'])
+def api_upload():
+    """Upload and process file for 4K upscaling"""
+    try:
+        if 'file' not in request.files:
+            return jsonify({"success": False, "error": "No file provided"})
+        
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({"success": False, "error": "No file selected"})
+        
+        if file and allowed_file(file.filename):
+            file_id = str(uuid.uuid4())
+            filename = secure_filename(file.filename)
+            file_ext = filename.rsplit('.', 1)[1].lower()
+            
+            input_filename = f"{file_id}_input.{file_ext}"
+            input_path = os.path.join(UPLOAD_FOLDER, input_filename)
+            file.save(input_path)
+            
+            output_filename = f"{file_id}_4k.{file_ext}"
+            output_path = os.path.join(OUTPUT_FOLDER, output_filename)
+            
+            if file_ext in ['png', 'jpg', 'jpeg', 'gif']:
+                upscale_image_4k(input_path, output_path)
+                media_type = "image"
+            elif file_ext in ['mp4', 'avi', 'mov', 'mkv']:
+                upscale_video_4k(input_path, output_path)
+                media_type = "video"
+            
+            log_message(f"📤 File uploaded: {filename}")
+            log_message(f"🎯 Starting 4K transformation...")
+            
+            return jsonify({
+                "success": True, 
+                "file_id": file_id,
+                "filename": filename,
+                "output_filename": output_filename,
+                "media_type": media_type,
+                "message": "Upload successful, processing started"
+            })
+        else:
+            return jsonify({"success": False, "error": "File type not allowed"})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+@app.route('/api/processing-status')
+def api_processing_status():
+    """Get processing status"""
+    return jsonify({
+        "success": True,
+        "processing": app_state["processing_active"],
+        "processed_files": app_state["processed_files"]
+    })
+
+@app.route('/api/download/<filename>')
+def api_download(filename):
+    """Download processed file"""
+    try:
+        file_path = os.path.join(OUTPUT_FOLDER, filename)
+        if os.path.exists(file_path):
+            mimetype = get_file_mimetype(filename)
+            file_ext = filename.lower().rsplit('.', 1)[1] if '.' in filename else ''
+            
+            if file_ext in ['mp4', 'avi', 'mov', 'mkv']:
+                return send_file(
+                    file_path,
+                    as_attachment=True,
+                    download_name=f"4k_upscaled_{filename}",
+                    mimetype=mimetype
+                )
+            else:
+                return send_file(
+                    file_path, 
+                    as_attachment=True,
+                    download_name=f"4k_upscaled_{filename}",
+                    mimetype=mimetype
+                )
+        else:
+            return jsonify({"error": "File not found"}), 404
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/preview/<filename>')
+def api_preview(filename):
+    """Preview processed file"""
+    try:
+        file_path = os.path.join(OUTPUT_FOLDER, filename)
+        if os.path.exists(file_path):
+            mimetype = get_file_mimetype(filename)
+            return send_file(file_path, mimetype=mimetype)
+        else:
+            return jsonify({"error": "File not found"}), 404
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/logs')
+def api_logs():
+    """Get application logs"""
+    return jsonify({
+        "success": True,
+        "logs": app_state["logs"]
+    })
+
+@app.route('/api/clear-logs', methods=['POST'])
+def api_clear_logs():
+    """Clear application logs"""
+    app_state["logs"] = []
+    log_message("🧹 Logs cleared")
+    return jsonify({"success": True, "message": "Logs cleared"})
+
+@app.route('/api/optimize-gpu', methods=['POST'])
+def api_optimize_gpu():
+    """Optimize GPU for processing"""
+    try:
+        success = optimize_gpu()
+        if success:
+            return jsonify({"success": True, "message": "GPU optimized"})
+        else:
+            return jsonify({"success": False, "message": "GPU optimization failed"})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+@app.route('/api/clear-cache', methods=['POST'])
+def api_clear_cache():
+    """Clear GPU cache and processed files"""
+    try:
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+        
+        app_state["processed_files"] = []
+        log_message("🧹 Cache and history cleared")
+        
+        return jsonify({"success": True, "message": "Cache cleared"})
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+if __name__ == '__main__':
+    # Initialize system
+    log_message("🚀 4K Upscaler starting...")
+    
+    try:
+        # Optimize GPU if available
+        if optimize_gpu():
+            log_message("✅ GPU optimized for 4K upscaling")
+        else:
+            log_message("⚠️ GPU optimization failed, using CPU fallback")
+        
+        log_message("✅ 4K Upscaler ready")
+        log_message("📤 Upload images or videos to upscale to 4K resolution")
+        
+    except Exception as e:
+        log_message(f"❌ Initialization error: {str(e)}")
+        log_message("⚠️ Starting in fallback mode...")
+    
+    # Run application
+    try:
+        app.run(host='0.0.0.0', port=7860, debug=False, threaded=True)
+    except Exception as e:
+        log_message(f"❌ Server startup error: {str(e)}")
+        print(f"Critical error: {str(e)}")

requirements.txt

@@ -0,0 +1,10 @@
+flask>=2.0.0
+requests>=2.28.0
+opencv-python-headless
+numpy>=1.21.0,<2.0.0
+pillow>=9.0.0
+tqdm
+pyyaml
+rich
+click
+packaging

templates/index.html

@@ -0,0 +1,487 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🚀 4K Upscaler</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
+            background: #0a0a0a;
+            color: #ffffff; min-height: 100vh; overflow-x: hidden;
+        }
+        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
+        .header { text-align: center; margin-bottom: 40px; }
+        .header h1 {
+            font-size: 2.5rem; font-weight: 700;
+            color: #ffffff;
+            margin-bottom: 10px;
+            letter-spacing: -0.02em;
+        }
+        .subtitle {
+            font-size: 1.1rem; opacity: 0.7; margin-bottom: 20px;
+            color: #cccccc;
+            font-weight: 400;
+        }
+        .status-bar {
+            display: flex; justify-content: center; gap: 15px; margin-bottom: 30px;
+            flex-wrap: wrap;
+        }
+        .status-badge {
+            padding: 8px 16px; background: #1a1a1a;
+            border-radius: 6px;
+            border: 1px solid #333333;
+            font-size: 0.85rem; font-weight: 500;
+            color: #ffffff;
+        }
+        .cards-grid {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 20px; margin-bottom: 40px;
+        }
+        .card {
+            background: #111111;
+            border-radius: 8px; padding: 24px;
+            border: 1px solid #333333;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+            transition: all 0.2s ease;
+        }
+        .card:hover { 
+            border-color: #555555; 
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); 
+        }
+        .card h3 {
+            font-size: 1.2rem; margin-bottom: 16px; display: flex;
+            align-items: center; gap: 8px; color: #ffffff;
+            font-weight: 600;
+        }
+        .card-icon { font-size: 1.2rem; }
+        .btn {
+            background: #2d2d2d;
+            border: 1px solid #404040; padding: 10px 16px; color: #ffffff;
+            font-size: 0.9rem; font-weight: 500; cursor: pointer;
+            transition: all 0.2s ease; margin: 4px;
+            border-radius: 6px; min-width: 100px;
+        }
+        .btn:hover {
+            background: #404040;
+            border-color: #555555;
+        }
+        .btn:disabled {
+            background: #1a1a1a; cursor: not-allowed;
+            color: #666666; border-color: #2a2a2a;
+        }
+        .file-upload {
+            border: 2px dashed #404040;
+            border-radius: 8px; padding: 32px; text-align: center;
+            background: #0f0f0f; cursor: pointer;
+            transition: all 0.2s ease; margin-bottom: 16px;
+        }
+        .file-upload:hover {
+            border-color: #666666; background: #151515;
+        }
+        .file-upload.dragover {
+            border-color: #888888; background: #1a1a1a;
+        }
+        .file-input { display: none; }
+        .progress-container {
+            background: #1a1a1a; border-radius: 6px;
+            padding: 16px; margin-top: 16px; display: none;
+            border: 1px solid #333333;
+        }
+        .progress-bar {
+            width: 100%; height: 6px; background: #2a2a2a;
+            border-radius: 3px; overflow: hidden; margin-bottom: 8px;
+        }
+        .progress-fill {
+            height: 100%; background: #ffffff;
+            width: 0%; transition: width 0.3s ease;
+        }
+        .logs-container {
+            background: #050505; border-radius: 6px;
+            padding: 16px; max-height: 300px; overflow-y: auto;
+            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 0.8rem;
+            border: 1px solid #222222;
+        }
+        .log-entry {
+            margin: 4px 0; padding: 4px 8px; border-radius: 3px;
+            background: #0a0a0a; color: #cccccc;
+            border-left: 2px solid #333333;
+        }
+        .results-grid {
+            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 16px; margin-top: 16px;
+        }
+        .result-card {
+            background: #111111; border-radius: 6px;
+            padding: 16px; border: 1px solid #333333;
+        }
+        .result-preview {
+            width: 100%; height: 180px; background: #0a0a0a;
+            border-radius: 4px; margin-bottom: 12px; object-fit: cover;
+            border: 1px solid #222222;
+        }
+        .processing-indicator {
+            display: none; text-align: center; margin: 16px 0;
+        }
+        .spinner {
+            border: 3px solid #333333;
+            border-radius: 50%; border-top: 3px solid #ffffff;
+            width: 32px; height: 32px; animation: spin 1s linear infinite;
+            margin: 0 auto 8px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>4K Upscaler</h1>
+            <div class="subtitle">Professional AI-powered image and video enhancement</div>
+        </div>
+
+        <div class="status-bar">
+            <div class="status-badge" id="gpu-status">Checking GPU...</div>
+            <div class="status-badge" id="memory-status">Memory: --</div>
+            <div class="status-badge" id="processing-status">Ready</div>
+        </div>
+
+        <div class="cards-grid">
+            <!-- Upload Card -->
+            <div class="card">
+                <h3><span class="card-icon">⬆</span>Upload & Process</h3>
+                <div class="file-upload" id="fileUpload">
+                    <div style="font-size: 1.5rem; margin-bottom: 8px;">📁</div>
+                    <div style="font-size: 1rem; margin-bottom: 4px; font-weight: 500;">Drop files here or click to browse</div>
+                    <div style="opacity: 0.6; font-size: 0.85rem;">Supports: PNG, JPG, GIF, MP4, AVI, MOV, MKV</div>
+                    <input type="file" id="fileInput" class="file-input" accept=".png,.jpg,.jpeg,.gif,.mp4,.avi,.mov,.mkv" multiple>
+                </div>
+                <div class="processing-indicator" id="processingIndicator">
+                    <div class="spinner"></div>
+                    <div>Processing your file...</div>
+                </div>
+                <div style="text-align: center;">
+                    <button class="btn" onclick="clearCache()">Clear Cache</button>
+                    <button class="btn" onclick="optimizeGPU()">Optimize GPU</button>
+                </div>
+            </div>
+
+            <!-- System Info Card -->
+            <div class="card">
+                <h3><span class="card-icon">⚙</span>System Status</h3>
+                <div id="systemInfo">
+                    <div style="margin: 10px 0;">Loading system information...</div>
+                </div>
+                <div style="text-align: center; margin-top: 16px;">
+                    <button class="btn" onclick="refreshSystemInfo()">Refresh</button>
+                    <button class="btn" onclick="toggleLogs()">View Logs</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Results Section -->
+        <div class="card" id="resultsSection" style="display: none;">
+            <h3><span class="card-icon">✓</span>Processed Files</h3>
+            <div id="resultsGrid" class="results-grid"></div>
+        </div>
+
+        <!-- Logs Section -->
+        <div class="card" id="logsSection" style="display: none;">
+            <h3><span class="card-icon">□</span>Processing Logs</h3>
+            <div class="logs-container" id="logsContainer"></div>
+            <div style="text-align: center; margin-top: 16px;">
+                <button class="btn" onclick="clearLogs()">Clear Logs</button>
+                <button class="btn" onclick="refreshLogs()">Refresh</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let isProcessing = false;
+        let logsVisible = false;
+
+        // Initialize app
+        document.addEventListener('DOMContentLoaded', function() {
+            setupFileUpload();
+            refreshSystemInfo();
+            startStatusUpdates();
+        });
+
+        function setupFileUpload() {
+            const fileUpload = document.getElementById('fileUpload');
+            const fileInput = document.getElementById('fileInput');
+
+            fileUpload.addEventListener('click', () => fileInput.click());
+            fileUpload.addEventListener('dragover', handleDragOver);
+            fileUpload.addEventListener('dragleave', handleDragLeave);
+            fileUpload.addEventListener('drop', handleDrop);
+            fileInput.addEventListener('change', handleFileSelect);
+        }
+
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.currentTarget.classList.add('dragover');
+        }
+
+        function handleDragLeave(e) {
+            e.preventDefault();
+            e.currentTarget.classList.remove('dragover');
+        }
+
+        function handleDrop(e) {
+            e.preventDefault();
+            e.currentTarget.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                processFiles(files);
+            }
+        }
+
+        function handleFileSelect(e) {
+            const files = e.target.files;
+            if (files.length > 0) {
+                processFiles(files);
+            }
+        }
+
+        function processFiles(files) {
+            if (isProcessing) {
+                alert('Already processing a file. Please wait.');
+                return;
+            }
+
+            Array.from(files).forEach(file => uploadFile(file));
+        }
+
+        function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            isProcessing = true;
+            document.getElementById('processingIndicator').style.display = 'block';
+            updateProcessingStatus('Processing...');
+
+            fetch('/api/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    console.log('Upload successful:', data);
+                    pollProcessingStatus(data.file_id, data.output_filename);
+                } else {
+                    throw new Error(data.error || 'Upload failed');
+                }
+            })
+            .catch(error => {
+                console.error('Upload error:', error);
+                alert('Upload failed: ' + error.message);
+                isProcessing = false;
+                document.getElementById('processingIndicator').style.display = 'none';
+                updateProcessingStatus('Error');
+            });
+        }
+
+        function pollProcessingStatus(fileId, outputFilename) {
+            const pollInterval = setInterval(() => {
+                fetch('/api/processing-status')
+                .then(response => response.json())
+                .then(data => {
+                    if (!data.processing) {
+                        clearInterval(pollInterval);
+                        isProcessing = false;
+                        document.getElementById('processingIndicator').style.display = 'none';
+                        updateProcessingStatus('Complete');
+                        
+                        // Check if file was processed successfully
+                        if (data.processed_files && data.processed_files.length > 0) {
+                            updateResults(data.processed_files);
+                            alert('File processed successfully! Check the results below.');
+                        }
+                    }
+                })
+                .catch(error => {
+                    console.error('❌ Status poll error:', error);
+                    clearInterval(pollInterval);
+                    isProcessing = false;
+                    document.getElementById('processingIndicator').style.display = 'none';
+                });
+            }, 2000);
+        }
+
+        function updateResults(processedFiles) {
+            const resultsSection = document.getElementById('resultsSection');
+            const resultsGrid = document.getElementById('resultsGrid');
+            
+            resultsGrid.innerHTML = '';
+            
+            processedFiles.forEach(file => {
+                const resultCard = document.createElement('div');
+                resultCard.className = 'result-card';
+                resultCard.innerHTML = `
+                    <div style="font-weight: 600; margin-bottom: 8px;">${file.input_file}</div>
+                    <div style="opacity: 0.7; margin-bottom: 8px; font-size: 0.9rem;">
+                        ${file.original_size} → ${file.upscaled_size}
+                    </div>
+                    <div style="opacity: 0.6; font-size: 0.8rem; margin-bottom: 12px;">
+                        ${file.timestamp}
+                    </div>
+                    <div style="text-align: center;">
+                        <button class="btn" onclick="previewFile('${file.output_file}')">Preview</button>
+                        <button class="btn" onclick="downloadFile('${file.output_file}')">Download</button>
+                    </div>
+                `;
+                resultsGrid.appendChild(resultCard);
+            });
+            
+            resultsSection.style.display = 'block';
+        }
+
+        function previewFile(filename) {
+            window.open(`/api/preview/${filename}`, '_blank');
+        }
+
+        function downloadFile(filename) {
+            window.location.href = `/api/download/${filename}`;
+        }
+
+        function refreshSystemInfo() {
+            fetch('/api/system')
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    displaySystemInfo(data.data);
+                    updateStatusBadges(data.data);
+                }
+            })
+            .catch(error => console.error('❌ System info error:', error));
+        }
+
+        function displaySystemInfo(info) {
+            const container = document.getElementById('systemInfo');
+            container.innerHTML = `
+                <div style="margin: 6px 0;"><strong>GPU:</strong> ${info.gpu_name || 'Not available'}</div>
+                <div style="margin: 6px 0;"><strong>Memory:</strong> ${info.gpu_memory || 'N/A'}</div>
+                <div style="margin: 6px 0;"><strong>CUDA:</strong> ${info.cuda_version || 'Not available'}</div>
+                <div style="margin: 6px 0;"><strong>PyTorch:</strong> ${info.pytorch_version || 'N/A'}</div>
+                <div style="margin: 6px 0;"><strong>Storage:</strong> ${info.storage_outputs || 'N/A'} used</div>
+            `;
+        }
+
+        function updateStatusBadges(info) {
+            document.getElementById('gpu-status').textContent = 
+                info.gpu_available ? `GPU: ${info.gpu_name}` : 'CPU Only';
+            document.getElementById('memory-status').textContent = 
+                `Memory: ${info.gpu_memory_used || '0MB'} / ${info.gpu_memory || 'N/A'}`;
+        }
+
+        function updateProcessingStatus(status) {
+            document.getElementById('processing-status').textContent = status;
+        }
+
+        function startStatusUpdates() {
+            setInterval(() => {
+                if (!isProcessing) {
+                    fetch('/api/processing-status')
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.processed_files && data.processed_files.length > 0) {
+                            updateResults(data.processed_files);
+                        }
+                    })
+                    .catch(error => console.error('❌ Status update error:', error));
+                }
+            }, 5000);
+        }
+
+        function optimizeGPU() {
+            fetch('/api/optimize-gpu', { method: 'POST' })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('GPU optimized successfully!');
+                    refreshSystemInfo();
+                } else {
+                    alert('GPU optimization failed: ' + (data.message || data.error));
+                }
+            })
+            .catch(error => {
+                console.error('GPU optimization error:', error);
+                alert('Error optimizing GPU');
+            });
+        }
+
+        function clearCache() {
+            fetch('/api/clear-cache', { method: 'POST' })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Cache cleared successfully!');
+                    document.getElementById('resultsSection').style.display = 'none';
+                    refreshSystemInfo();
+                } else {
+                    alert('Failed to clear cache: ' + (data.message || data.error));
+                }
+            })
+            .catch(error => {
+                console.error('Clear cache error:', error);
+                alert('Error clearing cache');
+            });
+        }
+
+        function toggleLogs() {
+            const logsSection = document.getElementById('logsSection');
+            logsVisible = !logsVisible;
+            
+            if (logsVisible) {
+                logsSection.style.display = 'block';
+                refreshLogs();
+            } else {
+                logsSection.style.display = 'none';
+            }
+        }
+
+        function refreshLogs() {
+            fetch('/api/logs')
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const container = document.getElementById('logsContainer');
+                    container.innerHTML = '';
+                    
+                    data.logs.forEach(log => {
+                        const logEntry = document.createElement('div');
+                        logEntry.className = 'log-entry';
+                        logEntry.textContent = log;
+                        container.appendChild(logEntry);
+                    });
+                    
+                    container.scrollTop = container.scrollHeight;
+                }
+            })
+            .catch(error => console.error('❌ Logs error:', error));
+        }
+
+        function clearLogs() {
+            fetch('/api/clear-logs', { method: 'POST' })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    document.getElementById('logsContainer').innerHTML = '';
+                    alert('Logs cleared successfully!');
+                } else {
+                    alert('Failed to clear logs');
+                }
+            })
+            .catch(error => {
+                console.error('Clear logs error:', error);
+                alert('Error clearing logs');
+            });
+        }
+    </script>
+</body>
+</html>