Update app.py

app.py

@@ -34,31 +34,27 @@ def check_backend_connection():
     """Ping the HF Space and cache the client object."""
     try:
         test_client = Client("SnapwearAI/SAKS-backend", hf_token=HF_TOKEN)
-        backend_status.update(
-            {
-                "client": test_client,
-                "connected": True,
-                "error_message": "",
-                "last_check": time.time(),
-            }
-        )
+        backend_status.update({
+            "client": test_client,
+            "connected": True,
+            "error_message": "",
+            "last_check": time.time(),
+        })
         logger.info("✅ Backend connection established")
         return True, "🟢 Model is ready"
     except Exception as e:
-        backend_status.update(
-            {
-                "client": None,
-                "connected": False,
-                "last_check": time.time(),
-                "error_message": str(e),
-            }
-        )
+        backend_status.update({
+            "client": None,
+            "connected": False,
+            "last_check": time.time(),
+            "error_message": str(e),
+        })
         err = str(e).lower()
         if "timeout" in err or "read operation timed out" in err:
             return False, "🟡 Model is starting up. Please wait 3‑4 min."
         return False, f"🔴 Backend error: {e}"
 
-# Initial probe
+# initial probe
 check_backend_connection()
 
 # ─────────  Helpers ─────────
@@ -83,6 +79,7 @@ def base64_to_image(b64: str) -> Image.Image | None:
 # ─────────  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)."""
+
     if input_image is None:
         return None, None, "❌ Please upload an image."
 
@@ -129,55 +126,11 @@ def call_backend_with_retry(input_image: Image.Image, category: str, gender: str
 
     return None, None, "❌ Unknown error"
 
-# ─────────  CSS Styling ─────────
+# ─────────  CSS ─────────
 css = """
 body, .gradio-container {
     font-family: 'Inter', sans-serif;
-    background-color: #f9fafb;
-}
-
-h1, h3 {
-    font-weight: 700;
-    color: #333333;
-}
-
-h1 {
-    font-size: 2.2em;
-    margin-bottom: 0.3em;
-}
-
-h3 {
-    font-size: 1.3em;
-    margin-bottom: 0.2em;
-}
-
-p {
-    color: #555555;
-}
-
-.status-banner {
-    padding: 10px;
-    border-radius: 8px;
-    font-weight: 500;
-    text-align: center;
-    margin-bottom: 15px;
-}
-
-.status-ready {
-    background-color: #d1fae5;
-    color: #065f46;
-}
-
-.status-starting {
-    background-color: #fef9c3;
-    color: #92400e;
 }
-
-.status-error {
-    background-color: #fee2e2;
-    color: #991b1b;
-}
-
 #button {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: #ffffff;
@@ -186,48 +139,22 @@ p {
     border-radius: 12px;
     padding: 12px 24px;
     transition: all 0.3s ease;
-    font-size: 1em;
 }
-
 #button:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(102,126,234,0.3);
 }
-
-.gr-examples {
-    background: #f3f4f6;
-    border-radius: 8px;
-    padding: 10px;
-    margin-top: 10px;
-}
-
-.gr-examples p {
-    font-weight: 600;
-    color: #444444;
-    margin-bottom: 8px;
-}
-
-.markdown-output h3 {
-    color: #4b5563;
-    font-size: 1.1em;
-    margin-bottom: 6px;
-}
-
-.markdown-output p {
-    color: #6b7280;
-    font-size: 0.95em;
-}
 """
 
 # ─────────  Gradio Blocks ─────────
 with gr.Blocks(css=css, title="Jewellery Photography Preview") as demo:
     # Hero
     gr.HTML("""
-        <div style="display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px;">
-            <h1 style="margin: 0; font-size: 2.5em;">🎨 Raresence: AI-Powered Jewellery Photo Preview</h1>
+        <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>
         </div>
-        <p style="text-align: center; color: #666; margin-top: 10px;">Upload Jewellery, select your model, and get professional Photos instantly!</p>
-        """)
+    """)
 
     # Status banner
     status_html = gr.HTML()
@@ -238,39 +165,53 @@ with gr.Blocks(css=css, title="Jewellery Photography Preview") as demo:
         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)
+    gr.Button("🔄 Check Status").click(fn=_update_status, outputs=status_html)
 
     # 2‑column layout
     with gr.Row():
         # left inputs
         with gr.Column(scale=0.4):
+            gr.HTML("""
+                <div style="text-align:center; margin-bottom: 10px;">
+                    <h3>🖼️ Upload Jewellery Image</h3>
+                    <p style="color: #666; font-size: 14px;">Select a clear jewellery image for best results</p>
+                </div>
+            """)
             with gr.Tabs():
-                with gr.TabItem("Settings"):
+                with gr.TabItem("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")
             input_img = gr.Image(label="Upload image", type="pil", height=400)
 
+            # Example images
             gr.Examples(
-                label="Example Images",
-                inputs=input_img,
                 examples=[
-                    ["examples/ring.png"],
-                    ["examples/bracelet.png"],
-                    ["examples/watch.png"]
-                ]
+                    ["examples/ring1.jpg"],
+                    ["examples/bracelet1.jpg"],
+                    ["examples/watch1.jpg"],
+                    ["examples/earring1.jpg"],
+                ],
+                inputs=[input_img],
+                label="Example Images",
             )
 
         # right outputs
         with gr.Column():
-            info = gr.Markdown(value="### Preview Results", elem_classes=["markdown-output"])
+            gr.HTML("""
+                <div style="text-align:center; margin-bottom: 10px;">
+                    <h3>🎨 AI Generated Results</h3>
+                    <p style="color: #666; font-size: 14px;">Preview overlay detection and final professional background</p>
+                </div>
+            """)
+            info = gr.Markdown(value="...")
             with gr.Row():
                 run_btn = gr.Button("🎯 Generate", elem_id="button", variant="primary")
             with gr.Row():
                 with gr.Column():
-                    info1 = gr.Markdown(value="### Detection overlay", elem_classes=["markdown-output"])
+                    info1 = gr.Markdown(value="### Detection overlay")
                     out_overlay = gr.Image(height=400)
                 with gr.Column():
-                    info2 = gr.Markdown("### Final result", elem_classes=["markdown-output"])
+                    info2 = gr.Markdown(value="### Final result")
                     out_bg = gr.Image(height=400)
             out_status = gr.Text(label="Status", interactive=False)