Redesign UI: Modern dashboard with animated header

app.py

@@ -33,11 +33,20 @@ logger = logging.getLogger(__name__)
 # Global inference engine
 inference_engine = None
 
-# Sample ECG descriptions
+# Sample ECG descriptions - mapped by file stem (with underscores replaced by spaces and title-cased)
+# The files are: Atrial_Flutter.npy, Normal_Sinus_Rhythm.npy, Ventricular_Tachycardia.npy
+# They get sorted alphabetically: Atrial Flutter, Normal Sinus Rhythm, Ventricular Tachycardia
+# We want to display them as Sample 1, Sample 2, Sample 3
+SAMPLE_FILE_TO_DISPLAY = {
+    "Atrial Flutter": "Sample 1",
+    "Normal Sinus Rhythm": "Sample 2",
+    "Ventricular Tachycardia": "Sample 3",
+}
+
 SAMPLE_DESCRIPTIONS = {
-    "Normal Sinus Rhythm": "A healthy heart rhythm with regular beats originating from the sinus node.",
-    "Atrial Flutter": "A rapid but regular atrial rhythm, typically around 250-350 bpm in the atria.",
-    "Ventricular Tachycardia": "A fast heart rhythm originating from the ventricles, potentially life-threatening.",
+    "Sample 1": "Atrial Flutter - A rapid but regular atrial rhythm, typically around 250-350 bpm in the atria.",
+    "Sample 2": "Normal Sinus Rhythm - A healthy heart rhythm with regular beats originating from the sinus node.",
+    "Sample 3": "Ventricular Tachycardia - A fast heart rhythm originating from the ventricles, potentially life-threatening.",
 }
 
 
@@ -61,11 +70,14 @@ def get_sample_ecgs():
 
     samples = []
     for npy_file in sorted(sample_dir.glob("*.npy")):
-        name = npy_file.stem.replace("_", " ").title()
+        original_name = npy_file.stem.replace("_", " ").title()
+        # Map to new display name (Sample 1, Sample 2, Sample 3)
+        display_name = SAMPLE_FILE_TO_DISPLAY.get(original_name, original_name)
         samples.append({
             "path": str(npy_file),
-            "name": name,
-            "description": SAMPLE_DESCRIPTIONS.get(name, "Sample ECG recording")
+            "name": display_name,
+            "original_name": original_name,
+            "description": SAMPLE_DESCRIPTIONS.get(display_name, "Sample ECG recording")
         })
     logger.info(f"Found {len(samples)} sample ECGs")
     return samples
@@ -105,13 +117,50 @@ def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis"):
     afib_5y = results.get("afib_5y", 0.0)
     risk_fig = plot_risk_gauges(lvef_40, lvef_50, afib_5y)
 
-    # Generate summary text
+    # Generate modern HTML summary with styled diagnosis cards
     inference_time = results.get("inference_time_ms", 0)
-    summary = f"""## Analysis Results: {filename}
 
-**Inference Time:** {inference_time:.1f} ms
+    # Build the diagnosis cards HTML
+    diagnosis_html = ""
+    if "diagnosis_77" in results:
+        probs = results["diagnosis_77"]["probabilities"]
+        class_names = results["diagnosis_77"]["class_names"]
+        top_indices = np.argsort(probs)[::-1][:5]
+
+        for i, idx in enumerate(top_indices, 1):
+            prob_pct = probs[idx] * 100
+            # Determine severity class based on probability
+            if prob_pct < 30:
+                severity_class = "severity-low"
+            elif prob_pct < 60:
+                severity_class = "severity-medium"
+            else:
+                severity_class = "severity-high"
+
+            diagnosis_html += f"""
+            <div class="diagnosis-card">
+                <div class="diagnosis-header">
+                    <span class="diagnosis-rank">#{i}</span>
+                    <span class="diagnosis-name">{class_names[idx]}</span>
+                    <span class="diagnosis-percent {severity_class}">{prob_pct:.1f}%</span>
+                </div>
+                <div class="progress-container">
+                    <div class="progress-bar {severity_class}" style="width: {prob_pct}%;"></div>
+                </div>
+            </div>
+            """
+
+    summary = f"""
+<div style="padding: 10px;">
+
+## Analysis Results: {filename}
+
+<div style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9em; margin-bottom: 20px;">
+Inference Time: {inference_time:.1f} ms
+</div>
 
 ### Risk Predictions
+
 | Risk Factor | Probability |
 |-------------|-------------|
 | LVEF < 40% | {lvef_40*100:.1f}% |
@@ -119,15 +168,13 @@ def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis"):
 | 5-year AFib Risk | {afib_5y*100:.1f}% |
 
 ### Top 5 Diagnoses
+
+<div class="diagnosis-dashboard">
+{diagnosis_html}
+</div>
+
+</div>
 """
-    if "diagnosis_77" in results:
-        probs = results["diagnosis_77"]["probabilities"]
-        class_names = results["diagnosis_77"]["class_names"]
-        top_indices = np.argsort(probs)[::-1][:5]
-        for i, idx in enumerate(top_indices, 1):
-            prob_pct = probs[idx] * 100
-            bar = "█" * int(prob_pct / 10) + "░" * (10 - int(prob_pct / 10))
-            summary += f"| {i}. {class_names[idx]} | {bar} {prob_pct:.1f}% |\n"
 
     return ecg_fig, diagnosis_fig, risk_fig, summary
 
@@ -173,29 +220,123 @@ def create_demo_interface():
     samples = get_sample_ecgs()
     sample_names = [s["name"] for s in samples]
 
-    # Custom CSS for styling
+    # Custom CSS for styling with modern animated header
     custom_css = """
     .gradio-container {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
+
+    /* Animated Header Styles */
     .main-header {
         text-align: center;
-        padding: 24px;
-        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+        padding: 40px 24px;
+        background: linear-gradient(-45deg, #ee7752, #e73c7e, #c0392b, #e74c3c);
+        background-size: 400% 400%;
+        animation: gradientShift 8s ease infinite;
         color: white;
-        border-radius: 12px;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        border-radius: 16px;
+        margin-bottom: 24px;
+        box-shadow: 0 10px 40px rgba(231, 76, 60, 0.3);
+        position: relative;
+        overflow: hidden;
     }
+
+    .main-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
+        pointer-events: none;
+    }
+
+    @keyframes gradientShift {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+    }
+
+    .header-content {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+    }
+
+    /* Pulsing Heart Container */
+    .heart-container {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Heart SVG Animation */
+    .heart-svg {
+        width: 80px;
+        height: 80px;
+        animation: heartbeat 1.2s ease-in-out infinite;
+        filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
+    }
+
+    @keyframes heartbeat {
+        0% { transform: scale(1); }
+        14% { transform: scale(1.15); }
+        28% { transform: scale(1); }
+        42% { transform: scale(1.1); }
+        70% { transform: scale(1); }
+    }
+
+    /* ECG Line Animation */
+    .ecg-line {
+        position: absolute;
+        width: 200px;
+        height: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -10px;
+    }
+
+    .ecg-path {
+        stroke: rgba(255,255,255,0.8);
+        stroke-width: 2;
+        fill: none;
+        stroke-linecap: round;
+        stroke-dasharray: 200;
+        stroke-dashoffset: 200;
+        animation: ecgDraw 2s ease-in-out infinite;
+    }
+
+    @keyframes ecgDraw {
+        0% { stroke-dashoffset: 200; opacity: 0; }
+        10% { opacity: 1; }
+        50% { stroke-dashoffset: 0; opacity: 1; }
+        90% { opacity: 1; }
+        100% { stroke-dashoffset: -200; opacity: 0; }
+    }
+
     .main-header h1 {
         margin: 0;
-        font-size: 2.5em;
+        font-size: 2.8em;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
     }
+
     .main-header p {
-        margin: 10px 0 0 0;
+        margin: 0;
         opacity: 0.95;
-        font-size: 1.1em;
+        font-size: 1.2em;
+        font-weight: 400;
+        letter-spacing: 0.02em;
     }
+
     .sample-card {
         padding: 16px;
         border-radius: 8px;
@@ -203,21 +344,155 @@ def create_demo_interface():
         margin: 8px 0;
         border-left: 4px solid #e74c3c;
     }
+
     .quick-start {
-        background: #e8f5e9;
-        padding: 16px;
+        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+        padding: 18px 20px;
+        border-radius: 12px;
+        margin: 20px 0;
+        border-left: 5px solid #4caf50;
+        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
+    }
+
+    /* Modern Diagnosis Card Styles */
+    .diagnosis-dashboard {
+        padding: 20px;
+    }
+
+    .diagnosis-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border-radius: 16px;
+        padding: 20px;
+        margin: 12px 0;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        border: 1px solid rgba(0,0,0,0.05);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .diagnosis-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+    }
+
+    .diagnosis-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    .diagnosis-rank {
+        font-size: 0.85em;
+        font-weight: 600;
+        color: #666;
+        background: #f0f0f0;
+        padding: 4px 10px;
+        border-radius: 20px;
+    }
+
+    .diagnosis-name {
+        font-size: 1.1em;
+        font-weight: 600;
+        color: #333;
+        flex: 1;
+        margin-left: 12px;
+    }
+
+    .diagnosis-percent {
+        font-size: 1.3em;
+        font-weight: 700;
+    }
+
+    .progress-container {
+        height: 10px;
+        background: #e9ecef;
+        border-radius: 10px;
+        overflow: hidden;
+    }
+
+    .progress-bar {
+        height: 100%;
+        border-radius: 10px;
+        transition: width 0.8s ease;
+    }
+
+    .severity-low {
+        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
+        color: #28a745;
+    }
+
+    .severity-medium {
+        background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
+        color: #fd7e14;
+    }
+
+    .severity-high {
+        background: linear-gradient(90deg, #dc3545 0%, #e83e8c 100%);
+        color: #dc3545;
+    }
+
+    /* Footer Styles */
+    .footer-container {
+        margin-top: 40px;
+        padding: 30px;
+        background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
+        border-radius: 16px;
+        color: white;
+        text-align: center;
+    }
+
+    .footer-content {
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .footer-acknowledgement {
+        font-size: 1em;
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .footer-acknowledgement a {
+        color: #3498db;
+        text-decoration: none;
+        font-weight: 600;
+    }
+
+    .footer-acknowledgement a:hover {
+        text-decoration: underline;
+    }
+
+    .footer-disclaimer {
+        font-size: 0.9em;
+        color: rgba(255,255,255,0.7);
+        padding: 12px 20px;
+        background: rgba(231, 76, 60, 0.2);
         border-radius: 8px;
-        margin: 16px 0;
-        border-left: 4px solid #4caf50;
+        border: 1px solid rgba(231, 76, 60, 0.3);
+    }
+
+    .footer-disclaimer strong {
+        color: #e74c3c;
     }
     """
 
     with gr.Blocks(css=custom_css, title="HeartWatch AI", theme=gr.themes.Soft()) as demo:
-        # Header
+        # Animated Header with Pulsing Heart
         gr.HTML("""
         <div class="main-header">
-            <h1>❤️ HeartWatch AI</h1>
-            <p>AI-Powered 12-Lead ECG Analysis</p>
+            <div class="header-content">
+                <div class="heart-container">
+                    <svg class="heart-svg" viewBox="0 0 32 29.6">
+                        <path fill="white" d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
+                    </svg>
+                    <svg class="ecg-line" viewBox="0 0 200 40">
+                        <path class="ecg-path" d="M0,20 L40,20 L50,20 L55,5 L60,35 L65,10 L70,25 L75,20 L120,20 L130,20 L135,8 L140,32 L145,12 L150,24 L155,20 L200,20"/>
+                    </svg>
+                </div>
+                <h1>HeartWatch AI</h1>
+                <p>AI-Powered 12-Lead ECG Analysis</p>
+            </div>
         </div>
         """)
 
@@ -374,13 +649,18 @@ def create_demo_interface():
                 *Built with Gradio and PyTorch*
                 """)
 
-        # Footer
-        gr.Markdown("""
-        ---
-        <center>
-        Made with ❤️ for cardiac health research |
-        <a href="https://huggingface.co/spaces/AshkanTaghipour/HeartWatchAI">HuggingFace Space</a>
-        </center>
+        # Modern Footer with Acknowledgement and Disclaimer
+        gr.HTML("""
+        <div class="footer-container">
+            <div class="footer-content">
+                <div class="footer-acknowledgement">
+                    Based on <a href="https://github.com/HeartWise-AI/DeepECG_Docker" target="_blank">HeartWise-AI/DeepECG_Docker</a>
+                </div>
+                <div class="footer-disclaimer">
+                    <strong>Disclaimer:</strong> This is a research demo. Not for clinical use.
+                </div>
+            </div>
+        </div>
         """)
 
     return demo