css update

app.py

@@ -117,8 +117,6 @@ def crop_face(img: Image.Image):
 # Prediction function
 # ============================
 def predict(img):
-    # Step 1: Show initial placeholder
-    yield "<div style='font-size:40px; font-weight:bold; color:#555; text-align:center;'>99+ years lifespan</div>"
 
     # Step 2: Fake progress updates
     for i in range(3):
@@ -134,7 +132,7 @@ def predict(img):
         mu, logvar = model(x)
     pred_years = mu.item() * lifespan_std + lifespan_mean
     
-    yield f"<div style='font-size:42px; font-weight:bold; color:#2E86AB; text-align:center;'>Estimated remaining lifespan: {pred_years:.1f} years</div>"
+    yield f"<div style='font-size:42px; font-weight:bold; color:#2E86AB; text-align:center;'>Estimated remaining lifespan: <br> {pred_years:.1f} years</div>"
 # ============================
 # Gradio UI (Webcam + Upload)
 # ============================
@@ -152,24 +150,40 @@ img3.save("example3.jpg")
 demo = gr.Interface(
     fn=predict,
     inputs=gr.Image(height=500, type="pil", sources=["upload", "webcam"], label="Face Photo"),
-    outputs=gr.HTML(label="Prediction", elem_id="pred-box"), 
+    outputs=gr.HTML(label="Prediction", elem_id="pred-box", value="<div style='font-size:36px; font-weight:bold; color:#2E86AB; text-align:center;'>Predict remaining lifespan: <br> ??? years</div>"), 
     live=False,
     title="Lifespan Predictor (Demo)",
     description="Upload or take a face photo. Model predicts remaining lifespan (years).",
     examples=[["example1.jpg"],["example2.jpg"],["example3.jpg"]],  # 👈 make sure example.jpg exists in repo
-    css="""
-    #pred-box {
-        height: 500px;               /* fixed height to match image */
-        display: flex;
-        justify-content: center;     /* horizontal center */
-        align-items: center;         /* vertical center */
-        font-size: 42px;
-        font-weight: bold;
-        color: #2E86AB;
-        text-align: center;
-        border: 1px solid;
-    }
-    """
+css="""
+#pred-box {
+    /* size & layout to mirror the image area */
+    height: 500px;                      /* match inputs=gr.Image(height=500) */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    /* typography */
+    font-size: 42px;
+    font-weight: 700;
+    color: var(--body-text-color);
+
+    /* make it look like a Gradio card */
+    background: var(--block-background-fill);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-drop);
+    padding: 16px;
+}
+
+/* tighten the label spacing so it feels like the input card */
+#pred-box + .wrap.svelte-1ipelgc,       /* older gradio */
+#pred-box + .container.svelte-1ipelgc,  /* fallback */
+#pred-box:has(+ *) {                    /* future-proof: keep label close */
+    margin-top: 0;
+}
+"""
 )
 demo.queue()
 if __name__ == "__main__":