Fix IndentationErrors and optimize image loading performance

web/server.py

@@ -115,19 +115,19 @@ async def upload_image(file: UploadFile = File(...)):
         from PIL import ImageOps
         # FIX: Handle EXIF orientation (rotation)
         img = ImageOps.exif_transpose(img)
-        
+
         # Get original dimensions after transposition for the web cropper
         width, height = img.size
-        
-        img.thumbnail((800, 800), Image.LANCZOS)
+
+        # Create a faster, smaller thumbnail for the UI (400x400 is plenty for the queue)
+        img.thumbnail((400, 400), Image.BILINEAR)
         thumb_path = UPLOAD_DIR / f"{file_id}_thumb.jpg"
         if img.mode in ("RGBA", "LA"):
             bg = Image.new("RGB", img.size, (255, 255, 255))
             bg.paste(img, mask=img.split()[-1])
-            bg.save(thumb_path, "JPEG")
+            bg.save(thumb_path, "JPEG", quality=85)
         else:
-            img.convert("RGB").save(thumb_path, "JPEG")
-        
+            img.convert("RGB").save(thumb_path, "JPEG", quality=85)
     return {
         "id": file_id, 
         "filename": file.filename, 
@@ -216,19 +216,32 @@ async def process_image(
             
         print(f"Pipeline: Generating final layout for {file_id}...")
         final_layout = generate_layout(
-            final_processed, name, id_number, 
-            add_studio_name=add_studio_name, 
-            add_logo=add_logo, 
+            final_processed, name, id_number,
+            add_studio_name=add_studio_name,
+            add_logo=add_logo,
             add_date=add_date
         )
-        
+
         result_path = RESULT_DIR / f"{file_id}_layout.jpg"
         final_layout.save(result_path, "JPEG", quality=95, dpi=(300, 300))
-        
+
+        # 5. Generate a lightweight WEB PREVIEW (max 1200px width) for the UI
+        preview_path = RESULT_DIR / f"{file_id}_preview.jpg"
+        pw, ph = final_layout.size
+        p_scale = 1200 / pw if pw > 1200 else 1.0
+        if p_scale < 1.0:
+            preview_img = final_layout.resize((int(pw * p_scale), int(ph * p_scale)), Image.BILINEAR)
+            preview_img.save(preview_path, "JPEG", quality=80)
+        else:
+            final_layout.save(preview_path, "JPEG", quality=80)
+
         if temp_crop.exists(): temp_crop.unlink()
-        
-        return {"id": file_id, "result_url": f"/static/results/{file_id}_layout.jpg"}
-        
+
+        return {
+            "id": file_id,
+            "result_url": f"/static/results/{file_id}_layout.jpg",
+            "preview_url": f"/static/results/{file_id}_preview.jpg"
+        }
     except Exception as e:
         import traceback
         traceback.print_exc()

web/web_storage/index.html

@@ -850,7 +850,7 @@
 
                 return `
                 <div onclick="selectImage(${idx})" class="queue-slide ${currentIndex === idx ? 'active' : ''}">
-                    <img src="${img.result_url ? img.result_url + '?t=' + t : img.thumb_url}" alt="">
+                    <img src="${img.preview_url ? img.preview_url + '?t=' + t : img.thumb_url}" alt="">
                     <div class="slide-status">${statusIcon}</div>
                     <button onclick="deleteImage(event, ${idx})" class="slide-delete" title="حذف"><i class="fa-solid fa-xmark"></i></button>
                     <div class="slide-name">${img.filename}</div>
@@ -895,7 +895,9 @@
             reprocessBtn.disabled = !data.result_url;
 
             const previewSkeleton = document.getElementById('preview-skeleton');
-            const url = data.result_url ? data.result_url + '?t=' + Date.now() : data.thumb_url;
+            const url = data.preview_url ? data.preview_url + '?t=' + Date.now() : 
+                        data.result_url ? data.result_url + '?t=' + Date.now() : 
+                        data.thumb_url;
 
             // Reset the image completely before loading the new one
             mainPreview.classList.add('hidden');
@@ -950,7 +952,7 @@
                     mainPreview.src = data.thumb_url;
                     label.textContent = 'النتيجة';
                 } else {
-                    mainPreview.src = data.result_url + '?t=' + t;
+                    mainPreview.src = (data.preview_url || data.result_url) + '?t=' + t;
                     label.textContent = 'الأصلية';
                 }
                 mainPreview.onload = () => {
@@ -1042,6 +1044,7 @@
                 const result = await res.json();
                 if (result.error) throw new Error(result.error);
                 imageData[idx].result_url = result.result_url;
+                imageData[idx].preview_url = result.preview_url;
                 imageData[idx].status = 'done';
                 imageData[idx].steps = {
                     rmbg: document.getElementById('step-rmbg').checked,