Optimize caching and further reduce asset sizes for better UI responsiveness

web/server.py

@@ -119,15 +119,15 @@ async def upload_image(file: UploadFile = File(...)):
         # Get original dimensions after transposition for the web cropper
         width, height = img.size
 
-        # Create a faster, smaller thumbnail for the UI (400x400 is plenty for the queue)
-        img.thumbnail((400, 400), Image.BILINEAR)
+        # Create a faster, smaller thumbnail for the UI (200x200 is plenty for the 72px grid)
+        img.thumbnail((200, 200), 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", quality=85)
+            bg.save(thumb_path, "JPEG", quality=60)
         else:
-            img.convert("RGB").save(thumb_path, "JPEG", quality=85)
+            img.convert("RGB").save(thumb_path, "JPEG", quality=60)
     return {
         "id": file_id, 
         "filename": file.filename, 
@@ -225,15 +225,15 @@ async def process_image(
         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
+        # 5. Generate a lightweight WEB PREVIEW (max 900px 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
+        p_scale = 900 / pw if pw > 900 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)
+            preview_img.save(preview_path, "JPEG", quality=70)
         else:
-            final_layout.save(preview_path, "JPEG", quality=80)
+            final_layout.save(preview_path, "JPEG", quality=70)
 
         if temp_crop.exists(): temp_crop.unlink()
 

web/web_storage/index.html

@@ -793,7 +793,7 @@
             for (let file of files) {
                 try {
                     const data = await uploadFileWithProgress(file);
-                    imageData.push({ ...data, name: "", id_num: "", result_url: null, custom_crop: null, steps: null, status: 'waiting' });
+                    imageData.push({ ...data, name: "", id_num: "", result_url: null, preview_url: null, version: 1, custom_crop: null, steps: null, status: 'waiting' });
                     renderQueue();
                     if (currentIndex === -1) selectImage(imageData.length - 1);
                 } catch (e) {
@@ -840,7 +840,6 @@
                 return;
             }
 
-            const t = new Date().getTime();
             const html = imageData.map((img, idx) => {
                 let statusIcon = '';
                 if (img.status === 'waiting') statusIcon = '<i class="fa-regular fa-clock text-slate-500"></i>';
@@ -850,7 +849,7 @@
 
                 return `
                 <div onclick="selectImage(${idx})" class="queue-slide ${currentIndex === idx ? 'active' : ''}">
-                    <img src="${img.preview_url ? img.preview_url + '?t=' + t : img.thumb_url}" alt="">
+                    <img src="${img.preview_url ? img.preview_url + '?v=' + img.version : 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,16 +894,10 @@
             reprocessBtn.disabled = !data.result_url;
 
             const previewSkeleton = document.getElementById('preview-skeleton');
-            const url = data.preview_url ? data.preview_url + '?t=' + Date.now() : 
-                        data.result_url ? data.result_url + '?t=' + Date.now() : 
+            const url = data.preview_url ? data.preview_url + '?v=' + data.version : 
+                        data.result_url ? data.result_url + '?v=' + data.version : 
                         data.thumb_url;
 
-            // Reset the image completely before loading the new one
-            mainPreview.classList.add('hidden');
-            mainPreview.classList.remove('opacity-100');
-            mainPreview.classList.add('opacity-0');
-            mainPreview.removeAttribute('src');
-            
             if (!data.result_url) {
                 previewSkeleton.classList.remove('hidden');
             } else {
@@ -912,7 +905,7 @@
             }
             previewPlaceholder.classList.add('hidden');
 
-            // Create a fresh Image to avoid any caching/onload issues
+            // Load new image
             const tempImg = new Image();
             tempImg.onload = () => {
                 mainPreview.src = tempImg.src;
@@ -952,7 +945,7 @@
                     mainPreview.src = data.thumb_url;
                     label.textContent = 'النتيجة';
                 } else {
-                    mainPreview.src = (data.preview_url || data.result_url) + '?t=' + t;
+                    mainPreview.src = (data.preview_url || data.result_url) + '?v=' + data.version;
                     label.textContent = 'الأصلية';
                 }
                 mainPreview.onload = () => {
@@ -1045,6 +1038,7 @@
                 if (result.error) throw new Error(result.error);
                 imageData[idx].result_url = result.result_url;
                 imageData[idx].preview_url = result.preview_url;
+                imageData[idx].version++;
                 imageData[idx].status = 'done';
                 imageData[idx].steps = {
                     rmbg: document.getElementById('step-rmbg').checked,