Update app.py

app.py

@@ -3,7 +3,12 @@ import io
 import base64
 import time
 import logging
+import threading
+import uuid
+from datetime import datetime
 from pathlib import Path
+from collections import deque
+from typing import Dict, Optional, Tuple
 
 import gradio as gr
 from gradio_client import Client
@@ -13,18 +18,124 @@ from PIL import Image
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# ─────────  Constants ─────────
-PREDICT_TIMEOUT = 600
-GPU_WARM_WINDOW = 900
-MAX_RETRIES = 1
-MAX_QUEUE_SIZE = 50  # Maximum number of requests in queue
-DEFAULT_CONCURRENCY_LIMIT = 3  # Number of concurrent backend calls
+# ─────────  Queue System Configuration ─────────
+MAX_QUEUE_SIZE = 50
+MAX_CONCURRENT_REQUESTS = 1  # GPU can only handle 1 request at a time
+AVERAGE_PROCESSING_TIME = 15  # seconds
+QUEUE_UPDATE_INTERVAL = 2  # seconds
 
-# ─────────  Backend connection ─────────
+# ─────────  Backend Configuration ─────────
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
     raise ValueError("HF_TOKEN environment variable is required")
 
+# ─────────  Global Queue System ─────────
+class QueueManager:
+    def __init__(self):
+        self.queue = deque()  # (request_id, user_data, timestamp)
+        self.processing = {}  # request_id -> processing_start_time
+        self.completed = {}  # request_id -> result
+        self.failed = {}     # request_id -> error_message
+        self.lock = threading.Lock()
+        self.stats = {
+            'total_processed': 0,
+            'total_failed': 0,
+            'avg_processing_time': AVERAGE_PROCESSING_TIME
+        }
+    
+    def add_request(self, request_id: str, user_data: dict) -> Tuple[int, float]:
+        """Add request to queue. Returns (position, estimated_wait)"""
+        with self.lock:
+            if len(self.queue) >= MAX_QUEUE_SIZE:
+                raise Exception("Queue is full. Please try again later.")
+            
+            self.queue.append((request_id, user_data, time.time()))
+            position = len(self.queue)
+            
+            # Calculate estimated wait time
+            processing_count = len(self.processing)
+            queue_ahead = position - 1
+            
+            if processing_count == 0:
+                # GPU is free, can start immediately
+                estimated_wait = 0
+            else:
+                # GPU is busy, need to wait for current + queue ahead
+                estimated_wait = (queue_ahead + 1) * self.stats['avg_processing_time']
+            
+            logger.info(f"Request {request_id} added to queue. Position: {position}, Est. wait: {estimated_wait:.0f}s")
+            return position, estimated_wait
+    
+    def get_next_requests(self, count: int = 1):
+        """Get next request to process (only 1 at a time for GPU)"""
+        with self.lock:
+            if len(self.processing) >= MAX_CONCURRENT_REQUESTS or len(self.queue) == 0:
+                return []
+            
+            # Get only the next single request
+            request_id, user_data, timestamp = self.queue.popleft()
+            self.processing[request_id] = time.time()
+            
+            return [(request_id, user_data)]
+    
+    def complete_request(self, request_id: str, result):
+        """Mark request as completed"""
+        with self.lock:
+            if request_id in self.processing:
+                processing_time = time.time() - self.processing[request_id]
+                del self.processing[request_id]
+                self.completed[request_id] = result
+                self.stats['total_processed'] += 1
+                
+                # Update average processing time
+                current_avg = self.stats['avg_processing_time']
+                self.stats['avg_processing_time'] = (current_avg * 0.8) + (processing_time * 0.2)
+                
+                logger.info(f"Request {request_id} completed in {processing_time:.1f}s")
+    
+    def fail_request(self, request_id: str, error_msg: str):
+        """Mark request as failed"""
+        with self.lock:
+            if request_id in self.processing:
+                del self.processing[request_id]
+                self.failed[request_id] = error_msg
+                self.stats['total_failed'] += 1
+                logger.error(f"Request {request_id} failed: {error_msg}")
+    
+    def get_queue_status(self) -> dict:
+        """Get current queue status"""
+        with self.lock:
+            return {
+                'queue_length': len(self.queue),
+                'processing_count': len(self.processing),
+                'total_processed': self.stats['total_processed'],
+                'total_failed': self.stats['total_failed'],
+                'avg_processing_time': self.stats['avg_processing_time'],
+                'max_queue_size': MAX_QUEUE_SIZE,
+                'max_concurrent': MAX_CONCURRENT_REQUESTS
+            }
+    
+    def get_request_status(self, request_id: str) -> dict:
+        """Get status of specific request"""
+        with self.lock:
+            if request_id in self.completed:
+                return {'status': 'completed', 'result': self.completed[request_id]}
+            elif request_id in self.failed:
+                return {'status': 'failed', 'error': self.failed[request_id]}
+            elif request_id in self.processing:
+                processing_time = time.time() - self.processing[request_id]
+                return {'status': 'processing', 'time': processing_time}
+            else:
+                # Check position in queue
+                for i, (rid, _, _) in enumerate(self.queue):
+                    if rid == request_id:
+                        return {'status': 'queued', 'position': i + 1}
+                return {'status': 'not_found'}
+
+# Global queue manager
+queue_manager = QueueManager()
+
+# ─────────  Backend Connection ─────────
 backend_status = {
     "client": None,
     "connected": False,
@@ -56,10 +167,81 @@ def check_backend_connection():
             return False, "🟡 Model is starting up. Please wait 3‑4 min."
         return False, f"🔴 Backend error: {e}"
 
-# initial probe
+# Initial connection check
 check_backend_connection()
 
-# ─────────  Helpers ─────────
+# ─────────  Queue Processing Worker ─────────
+def queue_worker():
+    """Background worker to process queue - one request at a time"""
+    while True:
+        try:
+            requests = queue_manager.get_next_requests()
+            
+            if not requests:
+                time.sleep(1)
+                continue
+            
+            # Process single request (GPU limitation)
+            request_id, user_data = requests[0]
+            logger.info(f"Starting processing request {request_id}")
+            
+            # Process synchronously since GPU can only handle one
+            process_single_request(request_id, user_data)
+            
+            # Small delay before checking for next request
+            time.sleep(0.5)
+            
+        except Exception as e:
+            logger.error(f"Queue worker error: {e}")
+            time.sleep(5)
+
+def process_single_request(request_id: str, user_data: dict):
+    """Process a single request"""
+    try:
+        # Extract user data
+        img_b64 = user_data['image_b64']
+        category = user_data['category']
+        gender = user_data['gender']
+        
+        if not backend_status["connected"]:
+            check_backend_connection()
+            if not backend_status["connected"]:
+                raise Exception("Backend not available")
+        
+        client = backend_status["client"]
+        start_time = time.time()
+        
+        result = client.predict(
+            img_b64,
+            category,
+            gender,
+            api_name="/predict",
+        )
+        
+        processing_time = time.time() - start_time
+        
+        if not result or len(result) < 4:
+            raise ValueError("Invalid response structure from backend")
+        
+        _, overlay_b64, bg_b64, status = result
+        
+        final_result = {
+            'overlay_b64': overlay_b64,
+            'bg_b64': bg_b64,
+            'status': status,
+            'processing_time': processing_time
+        }
+        
+        queue_manager.complete_request(request_id, final_result)
+        
+    except Exception as e:
+        queue_manager.fail_request(request_id, str(e))
+
+# Start queue worker
+worker_thread = threading.Thread(target=queue_worker, daemon=True)
+worker_thread.start()
+
+# ─────────  Helper Functions ─────────
 def image_to_base64(image: Image.Image) -> str:
     if image is None:
         return ""
@@ -69,7 +251,7 @@ def image_to_base64(image: Image.Image) -> str:
     image.save(buf, format="PNG")
     return base64.b64encode(buf.getvalue()).decode()
 
-def base64_to_image(b64: str) -> Image.Image | None:
+def base64_to_image(b64: str) -> Optional[Image.Image]:
     if not b64:
         return None
     try:
@@ -78,174 +260,146 @@ def base64_to_image(b64: str) -> Image.Image | None:
         logger.error(f"Failed to decode base64 → image: {e}")
         return None
 
-# ─────────  Queue Status ─────────
-def get_queue_status():
-    """Get current queue status for display"""
-    try:
-        # This would need to be implemented based on your queue system
-        # For now, return a placeholder
-        return "📊 Queue: Ready for requests"
-    except Exception as e:
-        return f"📊 Queue status unavailable: {e}"
-
-# ─────────  UI ↔ Backend bridge ─────────
-def call_backend_with_retry(input_image: Image.Image, category: str, gender: str, *, max_retries: int = MAX_RETRIES):
-    """Single‑shot call (no more than `max_retries` times) with queue handling."""
+# ──��──────  Request Management ─────────
+active_requests = {}  # session_id -> request_id
 
+def submit_request(input_image: Image.Image, category: str, gender: str, session_id: str = None):
+    """Submit a new request to the queue"""
     if input_image is None:
-        return None, None, "❌ Please upload an image.", gr.update(interactive=True)
-
-    if not backend_status["connected"]:
-        ok, msg = check_backend_connection()
-        if not ok:
-            return None, None, msg, gr.update(interactive=True)
-
-    client: Client = backend_status["client"]
-    img_b64 = image_to_base64(input_image)
-
-    # Add queue position info
-    start_time = time.time()
-    logger.info(f"Request queued at {time.strftime('%H:%M:%S')}")
-
-    for attempt in range(max_retries):
-        try:
-            logger.info(f"Backend call #{attempt+1}")
-            
-            # Add timeout to prevent hanging
-            result = client.predict(
-                img_b64,
-                category,
-                gender,
-                api_name="/predict",
-            )
-            dt = time.time() - start_time
-
-            if not result or len(result) < 4:
-                raise ValueError("Invalid response structure from backend")
-
-            _, overlay_b64, bg_b64, status = result
-            overlay_img = base64_to_image(overlay_b64)
-            bg_img = base64_to_image(bg_b64)
-
-            if overlay_img is None or bg_img is None:
-                raise ValueError("Failed to decode backend images")
-
-            if not status.startswith("✅"):
-                status = "✅ " + status
-            status += f" (⏱ Total: {dt:.1f}s)"
-            
-            logger.info(f"Request completed successfully in {dt:.1f}s")
-            return overlay_img, bg_img, status, gr.update(interactive=True)
-
-        except Exception as e:
-            logger.error(f"Attempt {attempt+1} failed: {e}")
-            if attempt == max_retries - 1:
-                return None, None, f"❌ {e}", gr.update(interactive=True)
-            time.sleep(1)
+        return None, None, "❌ Please upload an image.", gr.update(interactive=True), ""
     
-    return None, None, "❌ Unknown error", gr.update(interactive=True)
+    try:
+        # Generate unique request ID
+        request_id = str(uuid.uuid4())
+        if session_id:
+            active_requests[session_id] = request_id
+        
+        # Prepare user data
+        img_b64 = image_to_base64(input_image)
+        user_data = {
+            'image_b64': img_b64,
+            'category': category,
+            'gender': gender,
+            'timestamp': time.time()
+        }
+        
+        # Add to queue
+        position, estimated_wait = queue_manager.add_request(request_id, user_data)
+        
+        status_msg = f"🚀 Request submitted! Position in queue: #{position}"
+        if position == 1 and queue_manager.get_queue_status()['processing_count'] == 0:
+            status_msg += " | Starting processing now..."
+        elif estimated_wait > 0:
+            status_msg += f" | Estimated wait: {estimated_wait:.0f}s ({int(estimated_wait/60)}m {int(estimated_wait%60)}s)"
+        
+        return None, None, status_msg, gr.update(interactive=False), request_id
+        
+    except Exception as e:
+        return None, None, f"❌ {str(e)}", gr.update(interactive=True), ""
 
-def disable_button():
-    return gr.update(interactive=False)
+def check_request_status(request_id: str):
+    """Check the status of a request"""
+    if not request_id:
+        return None, None, "No active request", gr.update(interactive=True)
+    
+    status_info = queue_manager.get_request_status(request_id)
+    
+    if status_info['status'] == 'completed':
+        result = status_info['result']
+        overlay_img = base64_to_image(result['overlay_b64'])
+        bg_img = base64_to_image(result['bg_b64'])
+        status_msg = f"✅ {result['status']} (⏱ {result['processing_time']:.1f}s)"
+        return overlay_img, bg_img, status_msg, gr.update(interactive=True)
+    
+    elif status_info['status'] == 'failed':
+        return None, None, f"❌ {status_info['error']}", gr.update(interactive=True)
+    
+    elif status_info['status'] == 'processing':
+        processing_time = status_info['time']
+        return None, None, f"⚡ Processing... ({processing_time:.1f}s)", gr.update(interactive=False)
+    
+    elif status_info['status'] == 'queued':
+        position = status_info['position']
+        # Calculate estimated wait for this position
+        avg_time = queue_manager.stats['avg_processing_time']
+        estimated_wait = position * avg_time
+        wait_msg = f" | Est. wait: {int(estimated_wait/60)}m {int(estimated_wait%60)}s" if estimated_wait > 30 else ""
+        return None, None, f"⏳ In queue, position #{position}{wait_msg}", gr.update(interactive=False)
+    
+    else:
+        return None, None, "❓ Request not found", gr.update(interactive=True)
 
-def show_queue_position():
-    """Show current position in queue"""
-    return "⏳ Request added to queue..."
+def get_queue_info():
+    """Get formatted queue information"""
+    status = queue_manager.get_queue_status()
+    
+    info = f"""
+    <div style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); padding: 15px; border-radius: 10px; margin: 10px 0;">
+        <h4 style="margin: 0 0 10px 0; color: #1565c0;">📊 Queue Status (Single GPU Processing)</h4>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px;">
+            <div><strong>Queue Length:</strong> {status['queue_length']}/{status['max_queue_size']}</div>
+            <div><strong>GPU Status:</strong> {'🔴 Processing' if status['processing_count'] > 0 else '🟢 Available'}</div>
+            <div><strong>Completed:</strong> {status['total_processed']}</div>
+            <div><strong>Failed:</strong> {status['total_failed']}</div>
+            <div><strong>Avg. Processing:</strong> {status['avg_processing_time']:.1f}s</div>
+            <div><strong>Last Updated:</strong> {datetime.now().strftime('%H:%M:%S')}</div>
+        </div>
+        <div style="margin-top: 10px; padding: 8px; background: rgba(0,0,0,0.1); border-radius: 5px; font-size: 12px;">
+            <strong>Note:</strong> GPU processes one request at a time. Queue position = exact wait order.
+        </div>
+    </div>
+    """
+    return info
 
-# ─────────  CSS ─────────
+# ─────────  CSS Styles ─────────
 custom_css = """
 .gradio-container {
     background: linear-gradient(135deg, #3b4371 0%, #2d1b69 25%, #673ab7 50%, #8e24aa 75%, #6a1b9a 100%);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     min-height: 100vh;
 }
-.contain {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 25px;
-    margin: 15px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
-}
-.queue-status {
+
+.queue-indicator {
     background: linear-gradient(135deg, #4CAF50, #45a049);
     color: white;
-    padding: 10px;
-    border-radius: 8px;
+    padding: 12px;
+    border-radius: 10px;
     text-align: center;
     margin: 10px 0;
-    font-weight: 500;
+    font-weight: 600;
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
 }
+
 .queue-warning {
     background: linear-gradient(135deg, #ff9800, #f57c00);
     color: white;
-    padding: 10px;
-    border-radius: 8px;
+    padding: 12px;
+    border-radius: 10px;
     text-align: center;
     margin: 10px 0;
-    font-weight: 500;
-}
-.title-container {
-    text-align: center;
-    margin-bottom: 25px;
-    padding: 20px;
-    background: linear-gradient(135deg, #673ab7, #8e24aa);
-    border-radius: 12px;
-    box-shadow: 0 5px 20px rgba(103, 58, 183, 0.4);
+    font-weight: 600;
+    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
 }
-.title-container h1 {
+
+.queue-full {
+    background: linear-gradient(135deg, #f44336, #d32f2f);
     color: white;
-    font-size: 2.2em;
-    font-weight: bold;
-    margin: 0;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
-}
-.info-bar {
-    background: linear-gradient(135deg, #7c4dff, #6a1b9a);
     padding: 12px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    color: white;
+    border-radius: 10px;
     text-align: center;
-    font-weight: 500;
-    box-shadow: 0 3px 12px rgba(124, 77, 255, 0.3);
-}
-.section-header {
-    background: linear-gradient(135deg, #e1bee7, #d1c4e9);
-    padding: 12px;
-    border-radius: 8px;
-    margin-bottom: 15px;
-    border-left: 4px solid #673ab7;
-}
-.section-header h3 {
-    margin: 0;
-    color: #333;
+    margin: 10px 0;
     font-weight: 600;
+    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
 }
-.input-group {
-    background: rgba(255, 255, 255, 0.85);
-    padding: 18px;
-    border-radius: 12px;
-    margin-bottom: 15px;
-    border: 1px solid rgba(103, 58, 183, 0.2);
-    box-shadow: 0 3px 12px rgba(103, 58, 183, 0.1);
-}
-.result-section {
-    background: rgba(255, 255, 255, 0.9);
-    padding: 18px;
+
+.feature-box {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 20px;
     border-radius: 12px;
-    border: 1px solid rgba(103, 58, 183, 0.2);
-    box-shadow: 0 3px 12px rgba(103, 58, 183, 0.1);
-}
-.tip-box {
-    background: linear-gradient(135deg, #f3e5f5, #e8eaf6);
-    padding: 10px;
-    border-radius: 6px;
-    margin: 8px 0;
-    border-left: 3px solid #673ab7;
-    color: #4a148c;
-    font-weight: 500;
+    margin: 10px 0;
 }
+
 button.primary {
     background: linear-gradient(135deg, #673ab7, #8e24aa) !important;
     border: none !important;
@@ -256,185 +410,174 @@ button.primary {
     font-size: 15px !important;
     box-shadow: 0 5px 15px rgba(103, 58, 183, 0.4) !important;
 }
-button.primary:hover {
-    box-shadow: 0 8px 25px rgba(103, 58, 183, 0.6) !important;
-    opacity: 0.9 !important;
-    transform: translateY(-2px) !important;
-}
-label {
-    color: #4a148c !important;
-    font-weight: 600 !important;
-}
-input, textarea, select {
-    border: 1px solid rgba(103, 58, 183, 0.3) !important;
-    border-radius: 6px !important;
-}
-input:focus, textarea:focus, select:focus {
-    border-color: #673ab7 !important;
-    box-shadow: 0 0 0 2px rgba(103, 58, 183, 0.2) !important;
-}
-.gr-slider input[type="range"] {
-    accent-color: #673ab7 !important;
-}
-input[type="checkbox"] {
-    accent-color: #673ab7 !important;
-}
-.preserve-aspect-ratio img {
-    object-fit: contain !important;
-    width: auto !important;
-    max-height: 512px !important;
-}
-.social-links {
-    text-align: center;
-    margin: 20px 0;
-}
-.social-links a {
-    margin: 0 10px;
-    padding: 8px 16px;
-    background: #667eea;
-    color: white;
-    text-decoration: none;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-.social-links a:hover {
-    background: #764ba2;
-    transform: translateY(-2px);
-}
-.feature-box {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+
+.status-panel {
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid #673ab7;
+    border-radius: 15px;
     padding: 20px;
-    border-radius: 12px;
     margin: 10px 0;
 }
 """
 
-# ─────────  Gradio Blocks ─────────
-with gr.Blocks(css=custom_css, title="Jewellery Photography Preview") as demo:
-    # Hero
+# ─────────  Gradio Interface ─────────
+with gr.Blocks(css=custom_css, title="Jewellery Photography Preview - Queue System") as demo:
+    # Hero Section
     gr.HTML("""
         <div style="text-align: center; margin-bottom: 20px;">
-            <h1 style="font-size: 2.5em;">🎨 Raresence: AI-Powered Jewellery Photo Preview</h1>
-            <p style="color: #666;">Upload a jewellery image, select model, and get professional photos instantly</p>
+            <h1 style="font-size: 2.5em; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
+                🎨 Raresence: AI-Powered Jewellery Photo Preview
+            </h1>
+            <p style="color: #e1bee7; font-size: 1.2em;">
+                Single GPU Processing | Queue System | One Request at a Time
+            </p>
         </div>
     """)
 
-    # Status banner
-    status_html = gr.HTML()
-    
-    # Queue status display
-    queue_status = gr.HTML()
-
-    def _update_status():
-        ok, msg = check_backend_connection()
-        cls = "status-ready" if ok else ("status-starting" if "🟡" in msg else "status-error")
-        return f'<div class="status-banner {cls}">{msg}</div>'
-
-    def _update_queue_status():
-        return f'<div class="queue-status">{get_queue_status()}</div>'
-
-    status_html.value = _update_status()
-    queue_status.value = _update_queue_status()
-    
+    # Status and Queue Information
     with gr.Row():
-        gr.Button("🔄 Check Status").click(fn=_update_status, outputs=status_html)
-        gr.Button("📊 Queue Status").click(fn=_update_queue_status, outputs=queue_status)
+        backend_status_display = gr.HTML()
+        queue_info_display = gr.HTML()
 
-    with gr.Column():
-            with gr.Row():
-                
-                with gr.Column(scale=0.4):
-                    gr.HTML("""
-                    <div class="feature-box"">
-                        <h3>🖼️ Upload Jewellery Image</h3>
-                        <p style="color: #666; font-size: 14px;">Select a clear jewellery image for best results</p>
-                    </div>
-                    """)
-                    gr.Markdown("‎")
-                    gr.Markdown("‎")
-                    input_img = gr.Image(label="Upload image", type="pil", height=400)
-                
-            # with gr.Column():
-                
-                with gr.Column():
-                    gr.HTML("""
-                    <div class="feature-box">
-                        <h3>🎨 AI Generated Results</h3>
-                        <p style="color: #666; font-size: 14px;">Preview overlay detection and final professional background</p>
-                    </div>
-                """)
-                    
-                    with gr.Tabs():
-                        with gr.TabItem("Final result"):
-                            info2 = gr.Markdown(value="### Final result")
-                            out_bg = gr.Image(height=400)
-                        with gr.TabItem("Detection overlay"):
-                            info1 = gr.Markdown(value="### Detection overlay")
-                            out_overlay = gr.Image(height=400)
-                    run_btn = gr.Button("🎯 Generate", elem_id="button", variant="primary")
-                
-            with gr.Row():
-                    with gr.Column(scale=0.4):
-                        gr.Markdown(value="Setting")
-                        category = gr.Dropdown(label="Jewellery category", choices=["Rings", "Bracelets", "Watches", "Earrings"], value="Bracelets")
-                        gender = gr.Dropdown(label="Model gender", choices=["male", "female"], value="female")
+    # Main Interface
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML("""
+                <div class="feature-box">
+                    <h3>🖼️ Upload Jewellery Image</h3>
+                    <p style="color: #666;">Select a clear jewellery image for best results</p>
+                </div>
+            """)
+            input_img = gr.Image(label="Upload image", type="pil", height=400)
             
+            gr.HTML("""
+                <div class="feature-box">
+                    <h3>⚙️ Settings</h3>
+                </div>
+            """)
+            category = gr.Dropdown(
+                label="Jewellery category", 
+                choices=["Rings", "Bracelets", "Watches", "Earrings"], 
+                value="Bracelets"
+            )
+            gender = gr.Dropdown(
+                label="Model gender", 
+                choices=["male", "female"], 
+                value="female"
+            )
             
-            out_status = gr.Text(label="Status", interactive=False)
+            submit_btn = gr.Button("🚀 Submit to Queue", variant="primary", size="lg")
             
-            # Queue information
+        with gr.Column(scale=1):
             gr.HTML("""
-                <div class="tip-box">
-                    <strong>⏳ Queue Information:</strong> Requests are processed in order. 
-                    During high traffic, you may experience wait times. The button will be disabled while processing.
+                <div class="feature-box">
+                    <h3>🎨 AI Generated Results</h3>
+                    <p style="color: #666;">Results will appear here after processing</p>
                 </div>
             """)
             
-        # ──────── Footer ────────
+            with gr.Tabs():
+                with gr.TabItem("Final Result"):
+                    result_bg = gr.Image(label="Professional Background", height=400)
+                with gr.TabItem("Detection Overlay"):
+                    result_overlay = gr.Image(label="Detection Overlay", height=400)
+            
+            # Status and Control Panel
+            with gr.Group():
+                gr.HTML('<div class="status-panel">')
+                status_output = gr.Textbox(
+                    label="Request Status", 
+                    interactive=False,
+                    value="Ready to submit request"
+                )
+                
+                with gr.Row():
+                    check_status_btn = gr.Button("🔄 Check Status", size="sm")
+                    cancel_btn = gr.Button("❌ Cancel Request", size="sm", variant="secondary")
+                
+                gr.HTML('</div>')
+
+    # Hidden state for request tracking
+    current_request_id = gr.State("")
+    session_id = gr.State(lambda: str(uuid.uuid4()))
+
+    # Auto-refresh components
+    def update_displays():
+        # Update backend status
+        ok, msg = check_backend_connection()
+        status_class = "queue-indicator" if ok else "queue-warning"
+        backend_html = f'<div class="{status_class}">{msg}</div>'
+        
+        # Update queue info
+        queue_html = get_queue_info()
+        
+        return backend_html, queue_html
+
+    # Event handlers
+    submit_btn.click(
+        fn=submit_request,
+        inputs=[input_img, category, gender, session_id],
+        outputs=[result_overlay, result_bg, status_output, submit_btn, current_request_id],
+        show_progress=True
+    )
+
+    check_status_btn.click(
+        fn=check_request_status,
+        inputs=[current_request_id],
+        outputs=[result_overlay, result_bg, status_output, submit_btn],
+        show_progress=False
+    )
+
+    def cancel_request(request_id, session_id_val):
+        if session_id_val in active_requests:
+            del active_requests[session_id_val]
+        return None, None, "Request cancelled", gr.update(interactive=True), ""
+
+    cancel_btn.click(
+        fn=cancel_request,
+        inputs=[current_request_id, session_id],
+        outputs=[result_overlay, result_bg, status_output, submit_btn, current_request_id]
+    )
+
+    # Auto-refresh status displays every 3 seconds
+    def refresh_displays():
+        return update_displays()
+
+    # Set up periodic refresh
+    demo.load(refresh_displays, outputs=[backend_status_display, queue_info_display])
+    
+    # Periodic status check for active requests
+    def auto_check_status(request_id):
+        if request_id:
+            return check_request_status(request_id)
+        return None, None, "No active request", gr.update(interactive=True)
+
+    # Footer
     gr.HTML("""
-        <div style="text-align:center;padding:40px 20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;margin:30px 0;">
-            <h3 style="color:#333;">🚀 Powered by Snapwear AI</h3>
-            <p style="color:#666;">
-                Experience the future of virtual fashion and garment visualization.
+        <div style="text-align:center;padding:30px;background:rgba(255,255,255,0.1);border-radius:15px;margin:20px 0;">
+            <h3 style="color:white;">🚀 Advanced Queue System</h3>
+            <p style="color:#e1bee7;">
+                Intelligent queuing • Real-time status • Fair processing order
             </p>
-            <div class="social-links">
-                <a href="https://snapwear.io" target="_blank">🌐 Website</a>
-                <a href="https://www.instagram.com/snapwearai/" target="_blank">📸 Instagram</a>
-                <a href="https://huggingface.co/spaces/SnapwearAI/Snapwear-Texture-Transfer" target="_blank">🎨 Pattern Transfer</a>
-            </div>
-            <p style="font-size:12px;color:#999;margin-top:20px;">
-                © 2024 Snapwear AI. Professional AI tools for fashion and design.
+            <p style="font-size:12px;color:#d1c4e9;">
+                © 2024 Snapwear AI | Professional AI tools with enterprise-grade queuing
             </p>
         </div>
     """)
 
-    # Wire button → backend with queue status updates
-    run_btn.click(
-        fn=disable_button,
-        inputs=None,
-        outputs=run_btn
-    ).then(
-        fn=show_queue_position,
-        inputs=None,
-        outputs=out_status
-    ).then(
-        fn=call_backend_with_retry,
-        inputs=[input_img, category, gender],
-        outputs=[out_overlay, out_bg, out_status, run_btn],
-        concurrency_limit=DEFAULT_CONCURRENCY_LIMIT,  # Limit concurrent backend calls
-        show_progress=True,
-    )
-    
-
-# ─────────  Launch with Queue ─────────
+# ─────────  Launch Configuration ─────────
 if __name__ == "__main__":
+    logger.info("Starting Jewellery Photography Preview with Advanced Queue System...")
+    
     demo.queue(
-        max_size=MAX_QUEUE_SIZE,  # Maximum requests in queue
-        default_concurrency_limit=DEFAULT_CONCURRENCY_LIMIT,  # Concurrent processing limit
+        max_size=MAX_QUEUE_SIZE + 10,  # Allow some buffer in Gradio's queue
+        default_concurrency_limit=1,   # Match our single GPU processing
     ).launch(
         share=False,
         server_name="0.0.0.0",
         server_port=7860,
-        show_error=True
-    )
+        show_error=True,
+        show_api=False
+    )
+    
+    logger.info(f"Single GPU Queue system ready! Max queue: {MAX_QUEUE_SIZE}, Processing: 1 at a time")