Update app.py

app.py

@@ -42,10 +42,14 @@ transform = T.Compose([
 ])
 
 # ==========================================
-# 4. Inference Function
+# 4. Styled Text Blocks & Inference
 # ==========================================
-# Reusable styled text for the "Waiting" state
-waiting_text = "<h3 style='color: #64748b; text-align: center;'>Waiting for upload...</h3>"
+# Styled "Waiting" Box - Soft light gray background with dashed border
+waiting_text = """
+<div style="background-color: #f1f5f9; padding: 15px; border-radius: 10px; border: 2px dashed #cbd5e1; text-align: center; margin-bottom: 15px;">
+    <h3 style="color: #64748b; margin: 0; font-weight: 600;">⏳ Waiting for upload...</h3>
+</div>
+"""
 
 def predict(image):
     if image is None:
@@ -66,8 +70,14 @@ def predict(image):
     top_class = max(confidences, key=confidences.get)
     top_score = confidences[top_class]
     
-    # Styled Success Message (Indigo Color)
-    message = f"<h3 style='color: #4f46e5; text-align: center; font-weight: 700;'>🧠 The model is {top_score*100:.1f}% confident that the primary expression is {top_class}.</h3>"
+    # Styled Success Box - Soft light indigo background, dark indigo text, nice shadow
+    message = f"""
+    <div style="background-color: #e0e7ff; padding: 15px; border-radius: 10px; border-left: 6px solid #4f46e5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); text-align: center; margin-bottom: 15px;">
+        <h3 style="color: #312e81; margin: 0; font-weight: 800; font-size: 1.2rem;">
+            🧠 The model is {top_score*100:.1f}% confident that the primary expression is {top_class}.
+        </h3>
+    </div>
+    """
 
     return confidences, message
 
@@ -121,10 +131,12 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
 
         # Left Column: Inputs
         with gr.Column(scale=1):
-            # Styled Dark Text for Upload Header
+            # Styled Upload Header - White card, subtle shadow, indigo accent
             gr.HTML("""
-            <h3 style='color: #1e293b; margin-bottom: 0.2rem;'>📸 Upload Image</h3>
-            <p style='color: #475569; margin-bottom: 1rem;'>Upload a clear photo of a child's face.</p>
+            <div style="background-color: #ffffff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-left: 5px solid #4f46e5; margin-bottom: 15px;">
+                <h3 style="color: #1e293b; margin: 0 0 5px 0; font-weight: 800;">📸 Upload Image</h3>
+                <p style="color: #475569; margin: 0; font-size: 0.95rem;">Upload a clear photo of a child's face to begin the analysis.</p>
+            </div>
             """)
             input_image = gr.Image(
                 type="pil", label="Input Image", elem_classes="image-box")
@@ -136,8 +148,12 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
 
         # Right Column: Outputs
         with gr.Column(scale=1):
-            # Styled Dark Text for Results Header
-            gr.HTML("<h3 style='color: #1e293b; margin-bottom: 1rem;'>📊 AI Analysis Results</h3>")
+            # Styled Results Header - White card, subtle shadow, blue accent
+            gr.HTML("""
+            <div style="background-color: #ffffff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-left: 5px solid #3b82f6; margin-bottom: 15px;">
+                <h3 style="color: #1e293b; margin: 0; font-weight: 800;">📊 AI Analysis Results</h3>
+            </div>
+            """)
             
             output_message = gr.HTML(waiting_text)
             output_label = gr.Label(