CodeFormer

Paused

App Files Files Community

Avanish11 commited on 17 days ago

Commit

6a2ea73

verified ·

1 Parent(s): d40e23c

Update app.py

Browse files

Files changed (1) hide show

app.py +731 -129

app.py CHANGED Viewed

@@ -231,190 +231,792 @@ def process_job(job_id, image):
 HTML_PAGE = """
 <!DOCTYPE html>
-<html>
 <head>
     <title>CodeFormer Face Enhancement</title>
     <style>
-        body{
-            font-family:Arial,sans-serif;
-            max-width:1000px;
-            margin:auto;
-            padding:30px;
         }
-        .container{
-            display:flex;
-            gap:20px;
         }
-        .card{
-            flex:1;
         }
-        img{
-            width:100%;
-            border:1px solid #ddd;
-            border-radius:8px;
         }
-        button{
-            padding:12px 20px;
-            cursor:pointer;
-            margin-top:10px;
         }
-        h1{
-            text-align:center;
         }
-        .progress-container {
-            width:100%;
-            border:1px solid #ccc;
-            height:30px;
-            margin:10px 0;
-            border-radius:4px;
-            overflow:hidden;
         }
         .progress-bar {
-            height:100%;
-            width:0%;
-            background:#4CAF50;
-            transition: width 0.3s ease;
         }
-    </style>
-</head>
-<body>
-<h1>CodeFormer Face Enhancement</h1>
-<input type="file" id="file">
-<br>
-<button onclick="enhance()">
-Enhance Face
-</button>
-<p id="status"></p>
-<div class="progress-container">
-    <div id="bar" class="progress-bar"></div>
-</div>
-<div class="container">
-    <div class="card">
-        <h3>Original</h3>
-        <img id="inputPreview">
-    </div>
-    <div class="card">
-        <h3>Enhanced</h3>
-        <img id="outputPreview">
-    </div>
-</div>
-<script>
-const fileInput =
-document.getElementById("file");
-fileInput.addEventListener("change", function(){
-    const file = this.files[0];
-    if(file){
-        document.getElementById("inputPreview")
-        .src = URL.createObjectURL(file);
-    }
-});
-async function enhance(){
-    const file =
-    document.getElementById("file")
-    .files[0];
-    if(!file){
-        alert("Select an image");
-        return;
-    }
-    document.getElementById("status")
-    .innerHTML = "Starting...";
-    document.getElementById("bar")
-    .style.width = "0%";
-    const formData = new FormData();
-    formData.append(
-        "file",
-        file
-    );
-    const start =
-        await fetch("/convert", {
-            method: "POST",
-            body: formData
-        });
-    const data =
-        await start.json();
-    const jobId =
-        data.job_id;
-    const timer = setInterval(
-        async () => {
-            const res =
-                await fetch(
-                    "/progress/" + jobId
-                );
-            const progress =
-                await res.json();
-            document.getElementById(
-                "status"
-            ).innerHTML =
-                progress.message;
-            document.getElementById(
-                "bar"
-            ).style.width =
-                progress.progress + "%";
-            if(progress.progress >= 100){
-                clearInterval(timer);
-                document
-                    .getElementById("outputPreview")
-                    .src =
-                    "/result/" +
-                    jobId +
-                    "?t=" +
-                    Date.now();
             }
-            if(progress.progress < 0){
-                clearInterval(timer);
-                document.getElementById("status")
-                .innerHTML = "Error: " + progress.message;
             }
-        },
-        500
-    );
-}
-</script>
 </body>
 </html>

 HTML_PAGE = """
 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CodeFormer Face Enhancement</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
+        .main-container {
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
         }
+        .card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            padding: 40px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
+        h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 8px;
         }
+        .subtitle {
+            text-align: center;
+            color: #6b7280;
+            font-size: 1rem;
+            margin-bottom: 30px;
+            font-weight: 400;
         }
+        .upload-area {
+            border: 2px dashed #d1d5db;
+            border-radius: 16px;
+            padding: 40px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: #f9fafb;
+            position: relative;
         }
+        .upload-area:hover {
+            border-color: #667eea;
+            background: #f3f4f6;
+            transform: translateY(-2px);
+        }
+        .upload-area.dragover {
+            border-color: #667eea;
+            background: #eef2ff;
+            transform: scale(1.02);
+        }
+        .upload-icon {
+            font-size: 48px;
+            margin-bottom: 12px;
+        }
+        .upload-text {
+            color: #374151;
+            font-size: 1.1rem;
+            font-weight: 500;
+        }
+        .upload-subtext {
+            color: #6b7280;
+            font-size: 0.9rem;
+            margin-top: 4px;
+        }
+        #file {
+            display: none;
+        }
+        .controls {
+            display: flex;
+            gap: 12px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .btn {
+            padding: 12px 32px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-family: 'Inter', sans-serif;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+        }
+        .btn-primary:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .btn-secondary {
+            background: #f3f4f6;
+            color: #374151;
+        }
+        .btn-secondary:hover {
+            background: #e5e7eb;
+            transform: translateY(-2px);
+        }
+        .btn-danger {
+            background: #ef4444;
+            color: white;
+        }
+        .btn-danger:hover {
+            background: #dc2626;
+            transform: translateY(-2px);
+        }
+        .status-container {
+            margin-top: 20px;
+            padding: 16px;
+            border-radius: 12px;
+            background: #f9fafb;
+            display: none;
+        }
+        .status-container.active {
+            display: block;
+            animation: slideDown 0.3s ease;
+        }
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .status-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .status-message {
+            color: #374151;
+            font-weight: 500;
+            font-size: 0.95rem;
+        }
+        .status-percentage {
+            color: #667eea;
+            font-weight: 700;
+            font-size: 1.1rem;
+        }
+        .progress-wrapper {
+            width: 100%;
+            height: 8px;
+            background: #e5e7eb;
+            border-radius: 100px;
+            overflow: hidden;
+            position: relative;
+        }
         .progress-bar {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            border-radius: 100px;
+            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
         }
+        .progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+        @keyframes shimmer {
+            0% {
+                transform: translateX(-100%);
+            }
+            100% {
+                transform: translateX(100%);
+            }
+        }
+        .progress-bar.complete::after {
+            animation: none;
+        }
+        .image-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+            margin-top: 24px;
+        }
+        @media (max-width: 768px) {
+            .image-grid {
+                grid-template-columns: 1fr;
+                gap: 16px;
+            }
+        }
+        .image-card {
+            background: #f9fafb;
+            border-radius: 16px;
+            padding: 16px;
+            transition: all 0.3s ease;
+        }
+        .image-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        }
+        .image-label {
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.95rem;
+        }
+        .image-label .badge {
+            background: #667eea;
+            color: white;
+            padding: 2px 10px;
+            border-radius: 100px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        .image-container {
+            width: 100%;
+            aspect-ratio: 1;
+            background: #e5e7eb;
+            border-radius: 12px;
+            overflow: hidden;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .image-container img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: opacity 0.5s ease;
+        }
+        .image-container .placeholder {
+            color: #9ca3af;
+            font-size: 0.9rem;
+            text-align: center;
+            padding: 20px;
+        }
+        .image-container .placeholder .icon {
+            font-size: 32px;
+            display: block;
+            margin-bottom: 8px;
+        }
+        .image-container.loading::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+        }
+        @keyframes loading {
+            0% {
+                background-position: -200% 0;
+            }
+            100% {
+                background-position: 200% 0;
+            }
+        }
+        .file-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            background: #f3f4f6;
+            border-radius: 8px;
+            margin-top: 12px;
+            font-size: 0.9rem;
+            color: #374151;
+        }
+        .file-info .file-name {
+            font-weight: 500;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .file-info .file-size {
+            color: #6b7280;
+            font-size: 0.85rem;
+        }
+        .file-info .remove-file {
+            cursor: pointer;
+            color: #ef4444;
+            font-weight: 600;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: background 0.2s;
+        }
+        .file-info .remove-file:hover {
+            background: #fee2e2;
+        }
+        .toast {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 16px 24px;
+            border-radius: 12px;
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+            max-width: 400px;
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+        .toast.success {
+            background: #10b981;
+        }
+        .toast.error {
+            background: #ef4444;
+        }
+        .toast.info {
+            background: #3b82f6;
+        }
+        @media (max-width: 640px) {
+            .card {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+            .controls {
+                flex-direction: column;
+            }
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+            .upload-area {
+                padding: 24px;
+            }
+            .toast {
+                left: 20px;
+                right: 20px;
+                max-width: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="main-container">
+        <div class="card">
+            <h1>✨ Face Enhancer</h1>
+            <p class="subtitle">AI-powered face restoration using CodeFormer</p>
+            <!-- Upload Area -->
+            <div class="upload-area" id="uploadArea">
+                <div class="upload-icon">📸</div>
+                <div class="upload-text">Drop your image here or click to browse</div>
+                <div class="upload-subtext">Supports JPG, PNG, WEBP (Max 10MB)</div>
+                <input type="file" id="file" accept="image/*">
+            </div>
+            <!-- File Info -->
+            <div id="fileInfo" class="file-info" style="display:none;">
+                <span>📎</span>
+                <span class="file-name" id="fileName">image.jpg</span>
+                <span class="file-size" id="fileSize">2.4 MB</span>
+                <span class="remove-file" id="removeFile">✕</span>
+            </div>
+            <!-- Controls -->
+            <div class="controls">
+                <button class="btn btn-primary" id="enhanceBtn" disabled>
+                    🚀 Enhance Face
+                </button>
+                <button class="btn btn-secondary" id="resetBtn">
+                    🔄 Reset
+                </button>
+            </div>
+            <!-- Status -->
+            <div class="status-container" id="statusContainer">
+                <div class="status-header">
+                    <span class="status-message" id="statusMessage">Processing...</span>
+                    <span class="status-percentage" id="statusPercentage">0%</span>
+                </div>
+                <div class="progress-wrapper">
+                    <div class="progress-bar" id="progressBar"></div>
+                </div>
+            </div>
+            <!-- Image Grid -->
+            <div class="image-grid">
+                <div class="image-card">
+                    <div class="image-label">
+                        <span>📷 Original</span>
+                        <span class="badge">Input</span>
+                    </div>
+                    <div class="image-container" id="inputContainer">
+                        <div class="placeholder">
+                            <span class="icon">🖼️</span>
+                            No image selected
+                        </div>
+                        <img id="inputPreview" style="display:none;" alt="Original">
+                    </div>
+                </div>
+                <div class="image-card">
+                    <div class="image-label">
+                        <span>✨ Enhanced</span>
+                        <span class="badge">Output</span>
+                    </div>
+                    <div class="image-container" id="outputContainer">
+                        <div class="placeholder">
+                            <span class="icon">🎯</span>
+                            Waiting for enhancement
+                        </div>
+                        <img id="outputPreview" style="display:none;" alt="Enhanced">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Toast Notification -->
+    <div class="toast" id="toast"></div>
+    <script>
+        // DOM Elements
+        const fileInput = document.getElementById('file');
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInfo = document.getElementById('fileInfo');
+        const fileName = document.getElementById('fileName');
+        const fileSize = document.getElementById('fileSize');
+        const removeFile = document.getElementById('removeFile');
+        const enhanceBtn = document.getElementById('enhanceBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const inputPreview = document.getElementById('inputPreview');
+        const outputPreview = document.getElementById('outputPreview');
+        const inputContainer = document.getElementById('inputContainer');
+        const outputContainer = document.getElementById('outputContainer');
+        const statusContainer = document.getElementById('statusContainer');
+        const statusMessage = document.getElementById('statusMessage');
+        const statusPercentage = document.getElementById('statusPercentage');
+        const progressBar = document.getElementById('progressBar');
+        const toast = document.getElementById('toast');
+        let selectedFile = null;
+        let pollingInterval = null;
+        let currentJobId = null;
+        // Toast function
+        function showToast(message, type = 'info') {
+            toast.textContent = message;
+            toast.className = `toast ${type}`;
+            setTimeout(() => {
+                toast.classList.add('show');
+            }, 10);
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Format file size
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        }
+        // Update UI with selected file
+        function handleFileSelect(file) {
+            if (!file) return;
+            // Validate file type
+            if (!file.type.startsWith('image/')) {
+                showToast('Please select an image file', 'error');
+                return;
+            }
+            // Validate file size (10MB)
+            if (file.size > 10 * 1024 * 1024) {
+                showToast('File size must be less than 10MB', 'error');
+                return;
+            }
+            selectedFile = file;
+            fileName.textContent = file.name;
+            fileSize.textContent = formatFileSize(file.size);
+            fileInfo.style.display = 'flex';
+            enhanceBtn.disabled = false;
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                inputPreview.src = e.target.result;
+                inputPreview.style.display = 'block';
+                inputContainer.querySelector('.placeholder').style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+            showToast(`Loaded: ${file.name}`, 'success');
+        }
+        // Remove file
+        function removeSelectedFile() {
+            selectedFile = null;
+            fileInput.value = '';
+            fileInfo.style.display = 'none';
+            enhanceBtn.disabled = true;
+            inputPreview.style.display = 'none';
+            inputContainer.querySelector('.placeholder').style.display = 'block';
+            outputPreview.style.display = 'none';
+            outputContainer.querySelector('.placeholder').style.display = 'block';
+            resetProgress();
+            if (pollingInterval) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+            }
+        }
+        // Reset progress UI
+        function resetProgress() {
+            statusContainer.classList.remove('active');
+            statusMessage.textContent = 'Processing...';
+            statusPercentage.textContent = '0%';
+            progressBar.style.width = '0%';
+            progressBar.classList.remove('complete');
+        }
+        // Update progress
+        function updateProgress(progress) {
+            statusContainer.classList.add('active');
+            statusMessage.textContent = progress.message || 'Processing...';
+            const value = Math.min(Math.max(progress.progress, 0), 100);
+            statusPercentage.textContent = Math.round(value) + '%';
+            progressBar.style.width = value + '%';
+            if (value >= 100) {
+                progressBar.classList.add('complete');
+            }
+        }
+        // Enhance function
+        async function enhance() {
+            if (!selectedFile) {
+                showToast('Please select an image first', 'error');
+                return;
             }
+            // Reset previous results
+            outputPreview.style.display = 'none';
+            outputContainer.querySelector('.placeholder').style.display = 'block';
+            resetProgress();
+            // Disable button during processing
+            enhanceBtn.disabled = true;
+            enhanceBtn.textContent = '⏳ Processing...';
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                const response = await fetch('/convert', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to start processing');
+                }
+                const data = await response.json();
+                currentJobId = data.job_id;
+                // Start polling for progress
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                }
+                pollingInterval = setInterval(async () => {
+                    try {
+                        const res = await fetch(`/progress/${currentJobId}`);
+                        const progress = await res.json();
+                        updateProgress(progress);
+                        if (progress.progress >= 100) {
+                            clearInterval(pollingInterval);
+                            pollingInterval = null;
+                            // Fetch the result
+                            const resultResponse = await fetch(`/result/${currentJobId}?t=${Date.now()}`);
+                            if (resultResponse.ok) {
+                                const blob = await resultResponse.blob();
+                                const url = URL.createObjectURL(blob);
+                                outputPreview.src = url;
+                                outputPreview.style.display = 'block';
+                                outputContainer.querySelector('.placeholder').style.display = 'none';
+                                showToast('✨ Enhancement completed!', 'success');
+                            }
+                            enhanceBtn.disabled = false;
+                            enhanceBtn.textContent = '🚀 Enhance Face';
+                        } else if (progress.progress < 0) {
+                            // Error occurred
+                            clearInterval(pollingInterval);
+                            pollingInterval = null;
+                            showToast(`Error: ${progress.message}`, 'error');
+                            enhanceBtn.disabled = false;
+                            enhanceBtn.textContent = '🚀 Enhance Face';
+                        }
+                    } catch (error) {
+                        console.error('Polling error:', error);
+                    }
+                }, 500);
+            } catch (error) {
+                console.error('Enhancement error:', error);
+                showToast(`Error: ${error.message}`, 'error');
+                enhanceBtn.disabled = false;
+                enhanceBtn.textContent = '🚀 Enhance Face';
+            }
+        }
+        // Reset everything
+        function resetAll() {
+            removeSelectedFile();
+            if (pollingInterval) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+            }
+            resetProgress();
+            outputPreview.style.display = 'none';
+            outputContainer.querySelector('.placeholder').style.display = 'block';
+            enhanceBtn.disabled = true;
+            enhanceBtn.textContent = '🚀 Enhance Face';
+            showToast('Reset complete', 'info');
+        }
+        // Event Listeners
+        fileInput.addEventListener('change', function(e) {
+            if (this.files && this.files[0]) {
+                handleFileSelect(this.files[0]);
+            }
+        });
+        uploadArea.addEventListener('click', function() {
+            fileInput.click();
+        });
+        uploadArea.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            this.classList.add('dragover');
+        });
+        uploadArea.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            this.classList.remove('dragover');
+        });
+        uploadArea.addEventListener('drop', function(e) {
+            e.preventDefault();
+            this.classList.remove('dragover');
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                handleFileSelect(e.dataTransfer.files[0]);
+                // Update file input
+                const dt = new DataTransfer();
+                dt.items.add(e.dataTransfer.files[0]);
+                fileInput.files = dt.files;
             }
+        });
+        removeFile.addEventListener('click', removeSelectedFile);
+        enhanceBtn.addEventListener('click', enhance);
+        resetBtn.addEventListener('click', resetAll);
+        // Keyboard shortcuts
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !enhanceBtn.disabled) {
+                enhance();
+            }
+            if (e.key === 'Escape') {
+                resetAll();
+            }
+        });
+        // Initial state
+        console.log('✨ Face Enhancer ready!');
+    </script>
 </body>
 </html>