Update app.py

app.py

@@ -1,5 +1,5 @@
 # Face Detection-Based AI Automation of Lab Tests
-# Redesigned UI using Gradio Blocks + HTML Cards (Fixed .then() error)
+# Redesigned UI using Clean Table Format for Results
 
 import gradio as gr
 import cv2
@@ -28,11 +28,22 @@ def estimate_spo2_rr(heart_rate):
 def get_risk_color(value, normal_range):
     low, high = normal_range
     if value < low:
-        return ("🔻 LOW", "#FFCCCC")
+        return ("Low", "🔻", "#FFCCCC")
     elif value > high:
-        return ("🔺 HIGH", "#FFE680")
+        return ("High", "🔺", "#FFE680")
     else:
-        return ("✅ Normal", "#CCFFCC")
+        return ("Normal", "✅", "#CCFFCC")
+
+def build_table(title, rows):
+    html = f'<div style="margin-bottom: 24px;">
+    <h4 style="margin: 8px 0;">{title}</h4>
+    <table style="width:100%; border-collapse:collapse;">
+    <thead><tr style="background:#f0f0f0;"><th style="padding:8px;border:1px solid #ccc;">Test</th><th style="padding:8px;border:1px solid #ccc;">Result</th><th style="padding:8px;border:1px solid #ccc;">Expected Range</th><th style="padding:8px;border:1px solid #ccc;">Level</th></tr></thead><tbody>'
+    for label, value, ref in rows:
+        level, icon, bg = get_risk_color(value, ref)
+        html += f'<tr style="background:{bg};"><td style="padding:6px;border:1px solid #ccc;">{label}</td><td style="padding:6px;border:1px solid #ccc;">{value}</td><td style="padding:6px;border:1px solid #ccc;">{ref[0]} – {ref[1]}</td><td style="padding:6px;border:1px solid #ccc;">{icon} {level}</td></tr>'
+    html += '</tbody></table></div>'
+    return html
 
 def analyze_face(image):
     if image is None:
@@ -53,28 +64,18 @@ def analyze_face(image):
     tsh, cortisol = 2.5, 18
     fbs, hba1c = 120, 6.2
 
-    def section(title, items):
-        html = f'<div style="padding:10px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;background:#f8f9fa;">'
-        html += f'<h4 style="margin:0 0 10px 0">{title}</h4>'
-        for label, val, rng in items:
-            status, bgcolor = get_risk_color(val, rng)
-            html += f'<div style="padding:6px;margin-bottom:4px;background:{bgcolor};border-radius:4px;">{label}: {val} - {status}</div>'
-        html += '</div>'
-        return html
-
-    report = "".join([
-        section("🩸 Hematology", [("Hemoglobin", hb, (13.5, 17.5)), ("WBC Count", wbc, (4.0, 11.0)), ("Platelets", platelets, (150, 450))]),
-        section("🧬 Iron & Liver Panel", [("Iron", iron, (60, 170)), ("Ferritin", ferritin, (30, 300)), ("TIBC", tibc, (250, 400)), ("Bilirubin", bilirubin, (0.3, 1.2))]),
-        section("🧪 Kidney, Thyroid & Stress", [("Creatinine", creatinine, (0.6, 1.2)), ("TSH", tsh, (0.4, 4.0)), ("Cortisol", cortisol, (5, 25))]),
-        section("🧁 Metabolic Panel", [("Fasting Blood Sugar", fbs, (70, 110)), ("HbA1c", hba1c, (4.0, 5.7))]),
-        section("❤️ Vital Signs", [("SpO2", spo2, (95, 100)), ("Heart Rate", heart_rate, (60, 100)), ("Respiratory Rate", rr, (12, 20))])
+    html_output = "".join([
+        build_table("🩸 Hematology", [("Hemoglobin", hb, (13.5, 17.5)), ("WBC Count", wbc, (4.0, 11.0)), ("Platelets", platelets, (150, 450))]),
+        build_table("🧬 Iron & Liver Panel", [("Iron", iron, (60, 170)), ("Ferritin", ferritin, (30, 300)), ("TIBC", tibc, (250, 400)), ("Bilirubin", bilirubin, (0.3, 1.2))]),
+        build_table("🧪 Kidney, Thyroid & Stress", [("Creatinine", creatinine, (0.6, 1.2)), ("TSH", tsh, (0.4, 4.0)), ("Cortisol", cortisol, (5, 25))]),
+        build_table("🧁 Metabolic Panel", [("Fasting Blood Sugar", fbs, (70, 110)), ("HbA1c", hba1c, (4.0, 5.7))]),
+        build_table("❤️ Vital Signs", [("SpO2", spo2, (95, 100)), ("Heart Rate", heart_rate, (60, 100)), ("Respiratory Rate", rr, (12, 20))])
     ])
 
-    return report, frame_rgb
+    return html_output, frame_rgb
 
-# Gradio App Layout (Fixed HTML output handling)
-demo = gr.Blocks()
-with demo:
+# Gradio App Layout
+with gr.Blocks() as demo:
     gr.Markdown("""
     # 🧠 Face-Based Lab Test AI Report
     Upload a face photo to infer health diagnostics with AI-based visual markers.
@@ -85,13 +86,14 @@ with demo:
             image_input = gr.Image(type="numpy", label="📸 Upload Face Image")
             submit_btn = gr.Button("🔍 Analyze")
         with gr.Column(scale=2):
-            result_html = gr.HTML(label="🧪 Visual Diagnostic Cards")
+            result_html = gr.HTML(label="🧪 Health Report Table")
             result_image = gr.Image(label="📷 Face Scan Annotated")
 
-    submit_btn.click(
-        fn=analyze_face,
-        inputs=image_input,
-        outputs=[result_html, result_image]
-    )
+    submit_btn.click(fn=analyze_face, inputs=image_input, outputs=[result_html, result_image])
+
+    gr.Markdown("""
+    ---
+    ✅ Table Format • Color-coded Status • Normal Range View
+    """)
 
 demo.launch()