Update app.py

app.py

@@ -22,9 +22,8 @@ logger = logging.getLogger(__name__)
 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 Configuration ─────────
+# ─────────  Backend connection ─────────
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
     raise ValueError("HF_TOKEN environment variable is required")
@@ -52,30 +51,26 @@ class QueueManager:
             self.queue.append((request_id, user_data, time.time()))
             position = len(self.queue)
             
-            # Calculate estimated wait time
+            # Calculate estimated wait time for single GPU
             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):
+    def get_next_requests(self):
         """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):
@@ -102,19 +97,6 @@ class QueueManager:
                 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:
@@ -126,7 +108,6 @@ class QueueManager:
                 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}
@@ -135,7 +116,6 @@ class QueueManager:
 # Global queue manager
 queue_manager = QueueManager()
 
-# ─────────  Backend Connection ─────────
 backend_status = {
     "client": None,
     "connected": False,
@@ -167,7 +147,7 @@ def check_backend_connection():
             return False, "🟡 Model is starting up. Please wait 3‑4 min."
         return False, f"🔴 Backend error: {e}"
 
-# Initial connection check
+# initial probe
 check_backend_connection()
 
 # ─────────  Queue Processing Worker ─────────
@@ -185,10 +165,7 @@ def queue_worker():
             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:
@@ -198,7 +175,6 @@ def queue_worker():
 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']
@@ -241,7 +217,7 @@ def process_single_request(request_id: str, user_data: dict):
 worker_thread = threading.Thread(target=queue_worker, daemon=True)
 worker_thread.start()
 
-# ─────────  Helper Functions ─────────
+# ─────────  Helpers ─────────
 def image_to_base64(image: Image.Image) -> str:
     if image is None:
         return ""
@@ -263,18 +239,14 @@ def base64_to_image(b64: str) -> Optional[Image.Image]:
 # ───���─────  Request Management ─────────
 active_requests = {}  # session_id -> request_id
 
-def submit_request(input_image: Image.Image, category: str, gender: str, session_id: str = None):
+def submit_request(input_image: Image.Image, category: str, gender: str):
     """Submit a new request to the queue"""
     if input_image is None:
         return None, None, "❌ Please upload an image.", 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,
@@ -283,14 +255,13 @@ def submit_request(input_image: Image.Image, category: str, gender: str, session
             '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:
+        if position == 1 and len(queue_manager.processing) == 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)"
+            status_msg += f" | Estimated wait: {estimated_wait:.0f}s"
         
         return None, None, status_msg, gr.update(interactive=False), request_id
         
@@ -320,7 +291,6 @@ def check_request_status(request_id: str):
     
     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 ""
@@ -329,74 +299,85 @@ def check_request_status(request_id: str):
     else:
         return None, None, "❓ Request not found", gr.update(interactive=True)
 
-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</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>Processing:</strong> {status['processing_count']}/{status['max_concurrent']}</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>
-    """
-    return info
+def disable_button():
+    return gr.update(interactive=False)
 
-# ─────────  CSS Styles ─────────
+# ─────────  CSS ─────────
 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;
 }
-
-.queue-indicator {
-    background: linear-gradient(135deg, #4CAF50, #45a049);
-    color: white;
-    padding: 12px;
-    border-radius: 10px;
+.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);
+}
+.title-container {
     text-align: center;
-    margin: 10px 0;
-    font-weight: 600;
-    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
+    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);
 }
-
-.queue-warning {
-    background: linear-gradient(135deg, #ff9800, #f57c00);
+.title-container h1 {
     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: 10px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    color: white;
     text-align: center;
-    margin: 10px 0;
-    font-weight: 600;
-    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
+    font-weight: 500;
+    box-shadow: 0 3px 12px rgba(124, 77, 255, 0.3);
 }
-
-.queue-full {
-    background: linear-gradient(135deg, #f44336, #d32f2f);
-    color: white;
+.section-header {
+    background: linear-gradient(135deg, #e1bee7, #d1c4e9);
     padding: 12px;
-    border-radius: 10px;
-    text-align: center;
-    margin: 10px 0;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid #673ab7;
+}
+.section-header h3 {
+    margin: 0;
+    color: #333;
     font-weight: 600;
-    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
 }
-
-.feature-box {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    padding: 20px;
+.input-group {
+    background: rgba(255, 255, 255, 0.85);
+    padding: 18px;
     border-radius: 12px;
-    margin: 10px 0;
+    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;
+    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;
 }
-
 button.primary {
     background: linear-gradient(135deg, #673ab7, #8e24aa) !important;
     border: none !important;
@@ -407,174 +388,171 @@ button.primary {
     font-size: 15px !important;
     box-shadow: 0 5px 15px rgba(103, 58, 183, 0.4) !important;
 }
-
-.status-panel {
-    background: rgba(255, 255, 255, 0.95);
-    border: 2px solid #673ab7;
-    border-radius: 15px;
+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;
     padding: 20px;
+    border-radius: 12px;
     margin: 10px 0;
 }
 """
 
-# ─────────  Gradio Interface ─────────
-with gr.Blocks(css=custom_css, title="Jewellery Photography Preview - Queue System") as demo:
-    # Hero Section
+# ─────────  Gradio Blocks ─────────
+with gr.Blocks(css=custom_css, title="Jewellery Photography Preview") as demo:
+    # Hero
     gr.HTML("""
         <div style="text-align: center; margin-bottom: 20px;">
-            <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;">
-                Upload a jewellery image, select model, and get professional photos instantly
-            </p>
+            <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>
         </div>
     """)
 
-    # Status and Queue Information
-    with gr.Row():
-        backend_status_display = gr.HTML()
-        queue_info_display = gr.HTML()
+    # Status banner
+    status_html = gr.HTML()
 
-    # 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"
-            )
-            
-            submit_btn = gr.Button("🚀 Submit to Queue", variant="primary", size="lg")
+    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>'
+
+    status_html.value = _update_status()
+    gr.Button("🔄 Check Status").click(fn=_update_status, outputs=status_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():
+                    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")
             
-        with gr.Column(scale=1):
-            gr.HTML("""
-                <div class="feature-box">
-                    <h3>🎨 AI Generated Results</h3>
-                    <p style="color: #666;">Results will appear here after processing</p>
-                </div>
-            """)
             
-            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)
+            out_status = gr.Text(label="Status", interactive=False)
             
-            # 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>')
+        # ──────── 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.
+            </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>
+        </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(
+    # Wire button → queue system
+    run_btn.click(
+        fn=disable_button,
+        inputs=None,
+        outputs=run_btn
+    ).then(
         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
+        inputs=[input_img, category, gender],
+        outputs=[out_overlay, out_bg, out_status, run_btn, current_request_id],
+        show_progress=True,
     )
 
-    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):
+    # Auto-check status every 2 seconds for active requests
+    def auto_status_check(request_id):
         if request_id:
             return check_request_status(request_id)
-        return None, None, "No active request", gr.update(interactive=True)
+        return None, None, "Ready to generate", gr.update(interactive=True)
 
-    # Footer
-    gr.HTML("""
-        <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>
-            <p style="font-size:12px;color:#d1c4e9;">
-                © 2024 Snapwear AI | Professional AI tools with enterprise-grade queuing
-            </p>
-        </div>
-    """)
-
-# ─────────  Launch Configuration ─────────
-if __name__ == "__main__":
-    logger.info("Starting Jewellery Photography Preview with Advanced Queue System...")
+    # Set up periodic status checking
+    demo.load(lambda: None)  # Initial load
     
-    demo.queue(
-        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_api=False
+    # Create a timer that checks status every 2 seconds
+    timer = gr.Timer(2)  # Check every 2 seconds
+    timer.tick(
+        fn=auto_status_check,
+        inputs=[current_request_id],
+        outputs=[out_overlay, out_bg, out_status, run_btn]
     )
-    
-    logger.info(f"Single GPU Queue system ready! Max queue: {MAX_QUEUE_SIZE}, Processing: 1 at a time")
+
+# ─────────  Launch ─────────
+if __name__ == "__main__":
+    demo.queue(max_size=MAX_QUEUE_SIZE + 10, default_concurrency_limit=1).launch(share=False)