Update app.py

app.py

@@ -34,27 +34,31 @@ 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 ─────────
@@ -79,7 +83,6 @@ 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."
 
@@ -126,11 +129,55 @@ def call_backend_with_retry(input_image: Image.Image, category: str, gender: str
 
     return None, None, "❌ Unknown error"
 
-# ─────────  CSS ─────────
+# ─────────  CSS Styling ─────────
 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;
@@ -139,22 +186,48 @@ body, .gradio-container {
     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="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 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>
-    """)
+        <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()
@@ -165,53 +238,39 @@ 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("Setting"):
+                with gr.TabItem("Settings"):
                     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(
-                examples=[
-                    ["examples/ring1.jpg"],
-                    ["examples/bracelet1.jpg"],
-                    ["examples/watch1.jpg"],
-                    ["examples/earring1.jpg"],
-                ],
-                inputs=[input_img],
                 label="Example Images",
+                inputs=input_img,
+                examples=[
+                    ["examples/ring.png"],
+                    ["examples/bracelet.png"],
+                    ["examples/watch.png"]
+                ]
             )
 
         # right outputs
         with gr.Column():
-            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="...")
+            info = gr.Markdown(value="### Preview Results", elem_classes=["markdown-output"])
             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")
+                    info1 = gr.Markdown(value="### Detection overlay", elem_classes=["markdown-output"])
                     out_overlay = gr.Image(height=400)
                 with gr.Column():
-                    info2 = gr.Markdown(value="### Final result")
+                    info2 = gr.Markdown("### Final result", elem_classes=["markdown-output"])
                     out_bg = gr.Image(height=400)
             out_status = gr.Text(label="Status", interactive=False)