Add progress indicators and improve image enhancement functionality

Implement asynchronous processing with progress polling for image enhancement and other features, including UI updates for progress display and improved error handling for API responses.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 064f791d-a5ee-4eab-ab49-cbb215105dc0
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: f6a563d0-2106-4108-9f7d-27dee4df41da

templates/index.html

@@ -264,6 +264,40 @@
             to { transform: rotate(360deg); }
         }
         
+        .progress-container {
+            width: 100%;
+            max-width: 400px;
+            margin: 20px auto;
+        }
+        
+        .progress-bar-wrapper {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            overflow: hidden;
+            height: 20px;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
+            border-radius: 10px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        
+        .progress-text {
+            margin-top: 10px;
+            color: #888;
+            font-size: 0.9rem;
+        }
+        
+        .progress-percentage {
+            color: #00d2ff;
+            font-weight: 600;
+            font-size: 1.1rem;
+            margin-bottom: 5px;
+        }
+        
         .error {
             background: rgba(255, 50, 50, 0.2);
             border: 1px solid #ff3232;
@@ -425,6 +459,13 @@
         <div class="loading" id="loading">
             <div class="spinner"></div>
             <p id="loadingText">Processing your image with AI...</p>
+            <div class="progress-container">
+                <div class="progress-percentage" id="progressPercentage">0%</div>
+                <div class="progress-bar-wrapper">
+                    <div class="progress-bar" id="progressBar"></div>
+                </div>
+                <p class="progress-text" id="progressMessage">Initializing...</p>
+            </div>
             <p><small>This may take a moment</small></p>
         </div>
         
@@ -482,6 +523,9 @@
         const downloadBtn = document.getElementById('downloadBtn');
         const resultBox = document.getElementById('resultBox');
         const resultLabel = document.getElementById('resultLabel');
+        const progressBar = document.getElementById('progressBar');
+        const progressPercentage = document.getElementById('progressPercentage');
+        const progressMessage = document.getElementById('progressMessage');
         
         const featureTabs = document.querySelectorAll('.feature-tab');
         const bgcolorSelect = document.getElementById('bgcolor');
@@ -575,22 +619,91 @@
             hideError();
         }
         
+        function updateProgress(progress, message) {
+            progressBar.style.width = `${progress}%`;
+            progressPercentage.textContent = `${Math.round(progress)}%`;
+            if (message) {
+                progressMessage.textContent = message;
+            }
+        }
+        
+        function resetProgress() {
+            progressBar.style.width = '0%';
+            progressPercentage.textContent = '0%';
+            progressMessage.textContent = 'Initializing...';
+        }
+        
+        async function pollProgress(jobId, resultUrl) {
+            const progressUrl = `/progress/${jobId}`;
+            const maxRetries = 600;
+            let retries = 0;
+            
+            while (retries < maxRetries) {
+                retries++;
+                
+                try {
+                    const response = await fetch(progressUrl);
+                    if (!response.ok) {
+                        throw new Error('Failed to get progress');
+                    }
+                    
+                    const data = await response.json();
+                    updateProgress(data.progress, data.message);
+                    
+                    if (data.status === 'completed') {
+                        let resultRetries = 0;
+                        while (resultRetries < 10) {
+                            const resultResponse = await fetch(resultUrl);
+                            
+                            if (resultResponse.status === 202) {
+                                resultRetries++;
+                                await new Promise(resolve => setTimeout(resolve, 1000));
+                                continue;
+                            }
+                            
+                            if (!resultResponse.ok) {
+                                let errorMessage = 'Failed to get result';
+                                try {
+                                    const errorData = await resultResponse.json();
+                                    errorMessage = errorData.detail || errorMessage;
+                                } catch (e) {}
+                                throw new Error(errorMessage);
+                            }
+                            
+                            const blob = await resultResponse.blob();
+                            return URL.createObjectURL(blob);
+                        }
+                        throw new Error('Timed out waiting for result');
+                    } else if (data.status === 'failed') {
+                        throw new Error(data.error || data.message || 'Processing failed');
+                    }
+                    
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                } catch (err) {
+                    throw err;
+                }
+            }
+            
+            throw new Error('Timed out waiting for processing to complete');
+        }
+        
         processBtn.addEventListener('click', async () => {
             if (!selectedFile) return;
             
             const formData = new FormData();
             formData.append('file', selectedFile);
             
-            let endpoint = '/enhance';
+            let endpoint = '/enhance/async';
             let params = new URLSearchParams();
             
             if (currentFeature === 'enhance') {
+                endpoint = '/enhance/async';
                 const scale = document.getElementById('scale').value;
                 params.append('scale', scale);
                 loadingText.textContent = 'Enhancing your image with AI...';
                 resultLabel.textContent = 'Enhanced';
             } else if (currentFeature === 'remove-bg') {
-                endpoint = '/remove-background';
+                endpoint = '/remove-background/async';
                 let bgcolor = bgcolorSelect.value;
                 if (bgcolor === 'custom') {
                     bgcolor = document.getElementById('customColor').value;
@@ -600,13 +713,13 @@
                 resultLabel.textContent = 'Background Removed';
                 resultBox.classList.add('checkerboard');
             } else if (currentFeature === 'denoise') {
-                endpoint = '/denoise';
+                endpoint = '/denoise/async';
                 const strength = document.getElementById('strength').value;
                 params.append('strength', strength);
                 loadingText.textContent = 'Reducing noise in your image...';
                 resultLabel.textContent = 'Denoised';
             } else if (currentFeature === 'docscan') {
-                endpoint = '/docscan';
+                endpoint = '/docscan/async';
                 const docScale = document.getElementById('docScale').value;
                 const enhanceHd = document.getElementById('enhanceHd').value;
                 params.append('scale', docScale);
@@ -623,6 +736,7 @@
             results.classList.remove('show');
             processBtn.disabled = true;
             hideError();
+            resetProgress();
             
             try {
                 const response = await fetch(`${endpoint}?${params.toString()}`, {
@@ -635,8 +749,13 @@
                     throw new Error(errorData.detail || 'Processing failed');
                 }
                 
-                const blob = await response.blob();
-                const imageUrl = URL.createObjectURL(blob);
+                const jobData = await response.json();
+                const jobId = jobData.job_id;
+                const resultUrl = jobData.result_url;
+                
+                updateProgress(5, 'Job started...');
+                
+                const imageUrl = await pollProgress(jobId, resultUrl);
                 
                 processedImg.src = imageUrl;
                 downloadBtn.href = imageUrl;