Improve UX: Sample ECGs as default tab with one-click analysis

- Made Try Sample ECGs the first/default tab
- Added radio button selection for samples
- Added sample descriptions for each ECG type
- Added Quick Start notice to guide users
- Improved styling with heart theme colors
- Better summary formatting with visual progress bars

app.py

@@ -24,7 +24,6 @@ from visualization import (
     plot_ecg_waveform,
     plot_diagnosis_bars,
     plot_risk_gauges,
-    generate_thumbnail
 )
 
 # Configure logging
@@ -34,6 +33,13 @@ logger = logging.getLogger(__name__)
 # Global inference engine
 inference_engine = None
 
+# Sample ECG descriptions
+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.",
+}
+
 
 def load_inference_engine():
     """Load the inference engine on startup."""
@@ -50,18 +56,22 @@ def get_sample_ecgs():
     """Get list of sample ECG files from demo_data directory."""
     sample_dir = Path(__file__).parent / "demo_data" / "samples"
     if not sample_dir.exists():
+        logger.warning(f"Sample directory not found: {sample_dir}")
         return []
 
     samples = []
     for npy_file in sorted(sample_dir.glob("*.npy")):
+        name = npy_file.stem.replace("_", " ").title()
         samples.append({
             "path": str(npy_file),
-            "name": npy_file.stem.replace("_", " ").title()
+            "name": name,
+            "description": SAMPLE_DESCRIPTIONS.get(name, "Sample ECG recording")
         })
+    logger.info(f"Found {len(samples)} sample ECGs")
     return samples
 
 
-def analyze_ecg(ecg_signal: np.ndarray, filename: str = "Uploaded ECG"):
+def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis"):
     """
     Analyze an ECG signal and return all visualizations.
 
@@ -97,23 +107,27 @@ def analyze_ecg(ecg_signal: np.ndarray, filename: str = "Uploaded ECG"):
 
     # Generate summary text
     inference_time = results.get("inference_time_ms", 0)
-    summary = f"""## Analysis Summary
+    summary = f"""## Analysis Results: {filename}
 
 **Inference Time:** {inference_time:.1f} ms
 
 ### Risk Predictions
-- **LVEF < 40%:** {lvef_40*100:.1f}% probability
-- **LVEF < 50%:** {lvef_50*100:.1f}% probability
-- **5-year AFib Risk:** {afib_5y*100:.1f}% probability
+| Risk Factor | Probability |
+|-------------|-------------|
+| LVEF < 40% | {lvef_40*100:.1f}% |
+| LVEF < 50% | {lvef_50*100:.1f}% |
+| 5-year AFib Risk | {afib_5y*100:.1f}% |
 
-### Top Diagnoses
+### Top 5 Diagnoses
 """
     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):
-            summary += f"{i}. {class_names[idx]}: {probs[idx]*100:.1f}%\n"
+            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
 
@@ -121,44 +135,55 @@ def analyze_ecg(ecg_signal: np.ndarray, filename: str = "Uploaded ECG"):
 def analyze_uploaded_file(file):
     """Handle uploaded .npy file."""
     if file is None:
-        return None, None, None, "Please upload a .npy file containing ECG data."
+        return None, None, None, "⚠️ Please upload a .npy file containing ECG data."
 
     try:
         ecg_signal = np.load(file.name)
-        filename = Path(file.name).stem
+        filename = Path(file.name).stem.replace("_", " ").title()
         return analyze_ecg(ecg_signal, filename)
     except Exception as e:
         logger.error(f"Error loading file: {e}")
-        return None, None, None, f"Error loading file: {str(e)}"
+        return None, None, None, f"❌ Error loading file: {str(e)}"
 
 
-def analyze_sample(sample_name: str):
-    """Analyze a sample ECG from the gallery."""
-    samples = get_sample_ecgs()
+def analyze_sample_by_name(sample_name: str):
+    """Analyze a sample ECG by its name."""
+    if not sample_name:
+        return None, None, None, "Please select a sample ECG."
 
+    samples = get_sample_ecgs()
     for sample in samples:
         if sample["name"] == sample_name:
-            ecg_signal = np.load(sample["path"])
-            return analyze_ecg(ecg_signal, sample["name"])
+            try:
+                ecg_signal = np.load(sample["path"])
+                return analyze_ecg(ecg_signal, sample["name"])
+            except Exception as e:
+                logger.error(f"Error loading sample: {e}")
+                return None, None, None, f"❌ Error loading sample: {str(e)}"
 
-    return None, None, None, "Sample not found."
+    return None, None, None, "❌ Sample not found."
 
 
 def create_demo_interface():
     """Create the Gradio interface."""
 
+    # Get samples at startup
+    samples = get_sample_ecgs()
+    sample_names = [s["name"] for s in samples]
+
     # Custom CSS for styling
     custom_css = """
     .gradio-container {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     }
     .main-header {
         text-align: center;
-        padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 24px;
+        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
         color: white;
-        border-radius: 10px;
+        border-radius: 12px;
         margin-bottom: 20px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     }
     .main-header h1 {
         margin: 0;
@@ -166,144 +191,194 @@ def create_demo_interface():
     }
     .main-header p {
         margin: 10px 0 0 0;
-        opacity: 0.9;
+        opacity: 0.95;
+        font-size: 1.1em;
+    }
+    .sample-card {
+        padding: 16px;
+        border-radius: 8px;
+        background: #f8f9fa;
+        margin: 8px 0;
+        border-left: 4px solid #e74c3c;
+    }
+    .quick-start {
+        background: #e8f5e9;
+        padding: 16px;
+        border-radius: 8px;
+        margin: 16px 0;
+        border-left: 4px solid #4caf50;
     }
     """
 
-    with gr.Blocks(css=custom_css, title="HeartWatch AI") as demo:
+    with gr.Blocks(css=custom_css, title="HeartWatch AI", theme=gr.themes.Soft()) as demo:
         # Header
         gr.HTML("""
         <div class="main-header">
-            <h1>HeartWatch AI</h1>
+            <h1>❤️ HeartWatch AI</h1>
             <p>AI-Powered 12-Lead ECG Analysis</p>
         </div>
         """)
 
-        gr.Markdown("""
-        This demo analyzes 12-lead ECG signals using deep learning models trained on large clinical datasets.
+        # Quick start notice
+        gr.HTML("""
+        <div class="quick-start">
+            <strong>🚀 Quick Start:</strong> Select a sample ECG below and click "Analyze" to see the AI analysis instantly!
+        </div>
+        """)
+
+        with gr.Tabs() as tabs:
+            # Tab 1: Try Sample ECGs (DEFAULT - First Tab)
+            with gr.TabItem("🎯 Try Sample ECGs", id=0):
+                gr.Markdown("""
+                ### Select a Sample ECG
+                Choose from our collection of real ECG recordings to see the AI analysis in action.
+                """)
 
-        **Models:**
-        - 77-class ECG diagnosis classifier
-        - LVEF < 40% prediction
-        - LVEF < 50% prediction
-        - 5-year Atrial Fibrillation risk
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        # Sample selection with radio buttons for better UX
+                        if sample_names:
+                            sample_radio = gr.Radio(
+                                choices=sample_names,
+                                value=sample_names[0],
+                                label="Available ECG Samples",
+                                info="Click on a sample to select it"
+                            )
+
+                            # Sample descriptions
+                            gr.Markdown("**Sample Descriptions:**")
+                            for sample in samples:
+                                gr.Markdown(f"- **{sample['name']}**: {sample['description']}")
+
+                            analyze_sample_btn = gr.Button(
+                                "🔍 Analyze Selected ECG",
+                                variant="primary",
+                                size="lg"
+                            )
+                        else:
+                            gr.Markdown("⚠️ No sample ECGs found. Please use the Upload tab.")
+                            sample_radio = gr.Radio(choices=[], label="No samples available")
+                            analyze_sample_btn = gr.Button("Analyze", interactive=False)
 
-        **Note:** This is a research demo. Results should not be used for clinical decision-making.
-        """)
+                    with gr.Column(scale=2):
+                        sample_summary = gr.Markdown(
+                            value="👆 Select a sample and click **Analyze** to see results.",
+                            label="Analysis Summary"
+                        )
+
+                with gr.Row():
+                    sample_ecg_plot = gr.Plot(label="12-Lead ECG Waveform")
+
+                with gr.Row():
+                    with gr.Column():
+                        sample_diagnosis_plot = gr.Plot(label="Diagnosis Probabilities")
+                    with gr.Column():
+                        sample_risk_plot = gr.Plot(label="Risk Assessment Gauges")
+
+                if sample_names:
+                    analyze_sample_btn.click(
+                        fn=analyze_sample_by_name,
+                        inputs=[sample_radio],
+                        outputs=[sample_ecg_plot, sample_diagnosis_plot, sample_risk_plot, sample_summary]
+                    )
+
+            # Tab 2: Upload Your Own ECG
+            with gr.TabItem("📤 Upload Your ECG", id=1):
+                gr.Markdown("""
+                ### Upload Your Own ECG Recording
+                Have your own ECG data? Upload it here for analysis.
+                """)
 
-        with gr.Tabs():
-            # Tab 1: Upload ECG
-            with gr.TabItem("Upload ECG"):
                 with gr.Row():
                     with gr.Column(scale=1):
                         file_input = gr.File(
-                            label="Upload ECG (.npy file)",
+                            label="Upload ECG File (.npy)",
                             file_types=[".npy"],
                             type="filepath"
                         )
-                        analyze_btn = gr.Button("Analyze ECG", variant="primary")
+                        analyze_btn = gr.Button(
+                            "🔍 Analyze Uploaded ECG",
+                            variant="primary",
+                            size="lg"
+                        )
 
                         gr.Markdown("""
                         **Expected Format:**
-                        - NumPy array shape: (2500, 12) or (12, 2500)
-                        - 12 leads: I, II, III, aVR, aVL, aVF, V1-V6
-                        - 2500 samples (10 seconds at 250 Hz)
+                        - **File type:** NumPy array (.npy)
+                        - **Shape:** (2500, 12) or (12, 2500)
+                        - **Leads:** I, II, III, aVR, aVL, aVF, V1-V6
+                        - **Duration:** 10 seconds at 250 Hz
+
+                        **Tip:** Use `numpy.save('ecg.npy', signal)` to create compatible files.
                         """)
 
                     with gr.Column(scale=2):
-                        summary_output = gr.Markdown(label="Summary")
+                        upload_summary = gr.Markdown(
+                            value="👆 Upload a .npy file and click **Analyze** to see results.",
+                            label="Summary"
+                        )
 
                 with gr.Row():
-                    ecg_plot = gr.Plot(label="12-Lead ECG")
+                    upload_ecg_plot = gr.Plot(label="12-Lead ECG Waveform")
 
                 with gr.Row():
                     with gr.Column():
-                        diagnosis_plot = gr.Plot(label="Diagnosis Probabilities")
+                        upload_diagnosis_plot = gr.Plot(label="Diagnosis Probabilities")
                     with gr.Column():
-                        risk_plot = gr.Plot(label="Risk Assessment")
+                        upload_risk_plot = gr.Plot(label="Risk Assessment Gauges")
 
                 analyze_btn.click(
                     fn=analyze_uploaded_file,
                     inputs=[file_input],
-                    outputs=[ecg_plot, diagnosis_plot, risk_plot, summary_output]
+                    outputs=[upload_ecg_plot, upload_diagnosis_plot, upload_risk_plot, upload_summary]
                 )
 
-            # Tab 2: Sample Gallery
-            with gr.TabItem("Sample Gallery"):
-                gr.Markdown("### Select a sample ECG to analyze")
-
-                samples = get_sample_ecgs()
-                if samples:
-                    sample_names = [s["name"] for s in samples]
-                    sample_dropdown = gr.Dropdown(
-                        choices=sample_names,
-                        label="Select Sample",
-                        value=sample_names[0] if sample_names else None
-                    )
-                    analyze_sample_btn = gr.Button("Analyze Sample", variant="primary")
-
-                    with gr.Row():
-                        sample_summary = gr.Markdown(label="Summary")
-
-                    with gr.Row():
-                        sample_ecg_plot = gr.Plot(label="12-Lead ECG")
-
-                    with gr.Row():
-                        with gr.Column():
-                            sample_diagnosis_plot = gr.Plot(label="Diagnosis Probabilities")
-                        with gr.Column():
-                            sample_risk_plot = gr.Plot(label="Risk Assessment")
-
-                    analyze_sample_btn.click(
-                        fn=analyze_sample,
-                        inputs=[sample_dropdown],
-                        outputs=[sample_ecg_plot, sample_diagnosis_plot, sample_risk_plot, sample_summary]
-                    )
-                else:
-                    gr.Markdown("*No sample ECGs available. Upload your own in the Upload tab.*")
-
             # Tab 3: About
-            with gr.TabItem("About"):
+            with gr.TabItem("ℹ️ About", id=2):
                 gr.Markdown("""
                 ## About HeartWatch AI
 
-                HeartWatch AI is a deep learning-based ECG analysis system that can:
-
-                ### Models
+                HeartWatch AI is a deep learning-based ECG analysis system powered by state-of-the-art models.
 
-                1. **77-Class Diagnosis Model**
-                   - Trained to detect 77 different ECG patterns and conditions
-                   - Based on EfficientNetV2 architecture
-                   - Outputs probability for each condition
+                ### 🧠 AI Models
 
-                2. **LVEF Prediction Models**
-                   - LVEF < 40%: Identifies patients with reduced ejection fraction
-                   - LVEF < 50%: Identifies patients with moderately reduced ejection fraction
+                | Model | Description |
+                |-------|-------------|
+                | **77-Class Diagnosis** | Detects 77 different ECG patterns and cardiac conditions |
+                | **LVEF < 40%** | Predicts reduced left ventricular ejection fraction |
+                | **LVEF < 50%** | Predicts moderately reduced ejection fraction |
+                | **5-Year AFib Risk** | Estimates risk of developing Atrial Fibrillation |
 
-                3. **AFib Risk Model**
-                   - Predicts 5-year risk of developing Atrial Fibrillation
+                ### 📊 Technical Details
 
-                ### Technical Details
-
-                - **Input:** 12-lead ECG, 10 seconds, 250 Hz sampling rate
                 - **Architecture:** EfficientNetV2 (TorchScript optimized)
+                - **Input:** 12-lead ECG, 10 seconds, 250 Hz
                 - **Inference:** CPU-optimized for accessibility
+                - **Training Data:** Large clinical ECG datasets
+
+                ### ⚠️ Important Disclaimer
+
+                **This is a research demonstration tool.**
 
-                ### Disclaimer
+                The predictions provided should **NOT** be used for clinical decision-making.
+                Always consult qualified healthcare professionals for medical advice and diagnosis.
 
-                This is a research demonstration tool. The predictions provided should NOT be used
-                for clinical decision-making. Always consult qualified healthcare professionals
-                for medical advice and diagnosis.
+                ### 📚 References
 
-                ### Contact
+                - Models based on the DeepECG project
+                - Sample ECGs from MIT-BIH Arrhythmia Database (PhysioNet)
 
-                For questions or issues, please visit our GitHub repository.
+                ---
+                *Built with Gradio and PyTorch*
                 """)
 
         # Footer
         gr.Markdown("""
         ---
-        *Built with Gradio and PyTorch. Models from DeepECG project.*
+        <center>
+        Made with ❤️ for cardiac health research |
+        <a href="https://huggingface.co/spaces/AshkanTaghipour/HeartWatchAI">HuggingFace Space</a>
+        </center>
         """)
 
     return demo
@@ -311,12 +386,6 @@ def create_demo_interface():
 
 # Create and launch the demo
 if __name__ == "__main__":
-    # Pre-load the inference engine
-    try:
-        load_inference_engine()
-    except Exception as e:
-        logger.warning(f"Could not pre-load models: {e}")
-
     # Create and launch demo
     demo = create_demo_interface()
     demo.launch(