Update app.py

app.py

@@ -9,28 +9,161 @@ from keras.layers import BatchNormalization, DepthwiseConv2D, TFSMLayer
 import os
 from io import BytesIO
 import base64
+
+# Enhanced CSS with Medical-Professional Color Scheme
 st.markdown(
     """
     <style>
+    /* Main App Styling */
+    .stApp {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    }
+    
+    /* Header Styling */
+    .main-header {
+        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+        color: white;
+        padding: 1.5rem;
+        border-radius: 12px;
+        margin-bottom: 2rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Flex Container for Equal Height Columns */
     .flex-row {
         display: flex;
         gap: 2rem;
-        align-items: stretch; /* ensures equal height */
+        align-items: stretch;
+        margin-top: 1rem;
     }
     .flex-row > div {
         flex: 1;
         display: flex;
         flex-direction: column;
     }
-    .overlay {
-        background-color: rgba(255, 255, 255, 0.85);
+    
+    /* Medical Information Cards */
+    .medical-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        padding: 1.5rem;
+        border-radius: 12px;
+        border-left: 4px solid #3b82f6;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        flex-grow: 1;
+    }
+    
+    .medical-card h3 {
+        margin-top: 0;
+        border-bottom: 2px solid #e2e8f0;
+        padding-bottom: 0.5rem;
+    }
+    
+    /* Prediction Result Styling */
+    .prediction-card {
+        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        border: 2px solid #3b82f6;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin: 1rem 0;
+        text-align: center;
+    }
+    
+    .prediction-high {
+        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+        border-color: #22c55e;
+    }
+    
+    .prediction-medium {
+        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+        border-color: #f59e0b;
+    }
+    
+    .prediction-low {
+        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
+        border-color: #ef4444;
+    }
+    
+    /* Processing Steps Cards */
+    .processing-step {
+        background: white;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.5rem 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        border-left: 3px solid #3b82f6;
+    }
+    
+    /* Sidebar Styling */
+    .sidebar-content {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px;
+        padding: 1rem;
+        margin: 1rem 0;
+        border: 1px solid #e2e8f0;
+    }
+    
+    /* Button Styling */
+    .stDownloadButton button {
+        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 0.75rem 1.5rem;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+    
+    .stDownloadButton button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+    }
+    
+    /* Success/Warning/Error Messages */
+    .stSuccess {
+        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+        border-left: 4px solid #22c55e;
+        border-radius: 8px;
+    }
+    
+    .stWarning {
+        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+        border-left: 4px solid #f59e0b;
+        border-radius: 8px;
+    }
+    
+    .stError {
+        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
+        border-left: 4px solid #ef4444;
+        border-radius: 8px;
+    }
+    
+    /* Spinner Styling */
+    .stSpinner {
+        color: #3b82f6 !important;
+    }
+    
+    /* Image Container */
+    .image-container {
+        background: white;
+        border-radius: 12px;
         padding: 1rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e2e8f0;
+    }
+    
+    /* Confidence Bar */
+    .confidence-bar {
+        background: #e2e8f0;
         border-radius: 10px;
-        overflow-y: auto;
-        color: #333;
-        font-size: 16px;
-        line-height: 1.5;
-        flex-grow: 1;  /* fills the column height */
+        overflow: hidden;
+        margin: 1rem 0;
+        height: 8px;
+    }
+    
+    .confidence-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #22c55e 0%, #3b82f6 50%, #f59e0b 100%);
+        transition: width 0.3s ease;
     }
     </style>
     """,
@@ -49,36 +182,43 @@ DepthwiseConv2D.from_config = classmethod(
     lambda cls, config, *a, **k: original_dw({k: v for k, v in config.items() if k != "groups"}, *a, **k)
 )
 
-# --- Set Background ---
+# --- Enhanced Background Function ---
 def set_background(main_bg_path, sidebar_bg_path):
     def encode_image(path):
-        with open(path, "rb") as f:
-            return base64.b64encode(f.read()).decode()
+        if os.path.exists(path):
+            with open(path, "rb") as f:
+                return base64.b64encode(f.read()).decode()
+        return None
 
     main_bg = encode_image(main_bg_path)
     sidebar_bg = encode_image(sidebar_bg_path)
-
-    st.markdown(f"""
-        <style>
-        .stApp {{
-            background-image: url("data:image/jpg;base64,{main_bg}");
-            background-size: cover;
-            background-attachment: fixed;
-        }}
-        [data-testid="stSidebar"] > div:first-child {{
-            background-image: url("data:image/jpg;base64,{sidebar_bg}");
-            background-size: cover;
-            background-position: center;
-            padding: 1rem;
-            border-radius: 0 15px 15px 0;
-        }}
-        </style>
-    """, unsafe_allow_html=True)
-
-
+    
+    if main_bg:
+        st.markdown(f"""
+            <style>
+            .stApp {{
+                background-image: linear-gradient(rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.9)), url("data:image/jpg;base64,{main_bg}");
+                background-size: cover;
+                background-attachment: fixed;
+            }}
+            </style>
+        """, unsafe_allow_html=True)
+    
+    if sidebar_bg:
+        st.markdown(f"""
+            <style>
+            [data-testid="stSidebar"] > div:first-child {{
+                background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url("data:image/jpg;base64,{sidebar_bg}");
+                background-size: cover;
+                background-position: center;
+                border-radius: 0 15px 15px 0;
+            }}
+            </style>
+        """, unsafe_allow_html=True)
+
+# Try to set background if images exist
 set_background("5858.jpg", "7070.jpg")
 
-
 # --- Constants ---
 IMG_SIZE = (224, 224)
 CLASS_NAMES = [
@@ -92,13 +232,13 @@ LIME_EXPLAINER = lime_image.LimeImageExplainer()
 def load_model():
     model_path = "Model"
     if not os.path.exists(model_path):
-        st.error(f"Model folder '{model_path}' not found.")
+        st.error(f"🚨 Model folder '{model_path}' not found.")
         st.stop()
     try:
         model = tf.keras.Sequential([TFSMLayer(model_path, call_endpoint="serving_default")])
         return model
     except Exception as e:
-        st.error(f"Error loading model: {e}")
+        st.error(f"🚨 Error loading model: {e}")
         st.stop()
 
 # --- Prediction ---
@@ -113,7 +253,7 @@ def predict(images, model):
     else:
         return preds
 
-# --- Preprocessing Steps ---
+# --- Enhanced Preprocessing Steps ---
 def preprocess_with_steps(img):
     h, w = img.shape[:2]
     center, radius = (w // 2, h // 2), min(w, h) // 2
@@ -133,104 +273,129 @@ def preprocess_with_steps(img):
     sharp = cv2.addWeighted(clahe_img, 4, cv2.GaussianBlur(clahe_img, (0, 0), 10), -4, 128)
     resized = cv2.resize(sharp, IMG_SIZE) / 255.0
 
+    # Enhanced visualization with medical styling
     fig, axs = plt.subplots(1, 4, figsize=(16, 4))
+    fig.patch.set_facecolor('#f8fafc')
+    
     for ax, image, title in zip(
         axs, [img, circ, clahe_img, resized],
         ["Original", "Circular Crop", "CLAHE", "Sharpen + Resize"]
     ):
         ax.imshow(image)
-        ax.set_title(title)
+        ax.set_title(title, fontsize=14, fontweight='bold', color='#1e40af')
         ax.axis("off")
+        # Add subtle border
+        for spine in ax.spines.values():
+            spine.set_edgecolor('#e2e8f0')
+            spine.set_linewidth(1)
+    
+    plt.tight_layout()
     st.pyplot(fig)
     plt.close(fig)
     return resized
 
+# Enhanced explanation text with better medical styling
 explanation_text = {
     'Normal': """
-    <h3 style="color:#2E7D32; font-weight:bold;">✅ Normal</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🟢 <strong>Clear retina</strong>, no lesions</li>
-        <li>🩺 <strong>Blood vessels</strong> normal</li>
-        <li>👁 <strong>Healthy optic disc & macula</strong></li>
-        <li>✔️ No signs of retinal disease</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#059669; font-weight:bold;">✅ Normal Retina</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>🟢 <strong>Clear retinal structure</strong> - No pathological lesions detected</li>
+            <li>🩺 <strong>Healthy blood vessels</strong> - Normal caliber and branching pattern</li>
+            <li>👁 <strong>Intact optic disc & macula</strong> - Proper anatomical structure</li>
+            <li>✅ <strong>No disease indicators</strong> - Excellent retinal health</li>
+        </ul>
+    </div>
     """,
 
     'Diabetic Retinopathy': """
-    <h3 style="color:#D84315; font-weight:bold;">💉 Diabetic Retinopathy</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🔶 Red spots / hemorrhages</li>
-        <li>🩸 Leaking or swollen vessels</li>
-        <li>👁 Macula possibly thickened</li>
-        <li>⚠️ Diabetes-related damage</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#dc2626; font-weight:bold;">⚠️ Diabetic Retinopathy</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>🔴 <strong>Microhemorrhages</strong> - Red spots indicating vessel damage</li>
+            <li>🩸 <strong>Vascular leakage</strong> - Fluid accumulation in retinal tissue</li>
+            <li>👁 <strong>Macular involvement</strong> - Possible diabetic macular edema</li>
+            <li>🔬 <strong>Requires monitoring</strong> - Regular ophthalmologic follow-up needed</li>
+        </ul>
+    </div>
     """,
 
     'Glaucoma': """
-    <h3 style="color:#6A1B9A; font-weight:bold;">👁 Glaucoma</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🔴 Thinned nerve fiber layer</li>
-        <li>💉 Cupping in optic disc</li>
-        <li>👁 Risk of peripheral vision loss</li>
-        <li>🔴 Long-term eye pressure control needed</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#7c3aed; font-weight:bold;">👁 Glaucoma</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>🔴 <strong>Optic nerve damage</strong> - Thinning of nerve fiber layer</li>
+            <li>⚪ <strong>Increased cup-to-disc ratio</strong> - Optic disc cupping</li>
+            <li>📉 <strong>Visual field risk</strong> - Potential peripheral vision loss</li>
+            <li>💊 <strong>Pressure management</strong> - IOP control essential</li>
+        </ul>
+    </div>
     """,
 
     'Cataract': """
-    <h3 style="color:#FF8F00; font-weight:bold;">🌫 Cataract</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🌫 Cloudy or hazy image</li>
-        <li>👁 Disc/macula not clearly visible</li>
-        <li>🔍 Overall low contrast</li>
-        <li>⚠️ Likely due to lens opacity</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#f59e0b; font-weight:bold;">🌫️ Cataract</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>☁️ <strong>Lens opacity</strong> - Clouding affecting image clarity</li>
+            <li>🔍 <strong>Reduced contrast</strong> - Decreased retinal detail visibility</li>
+            <li>👁 <strong>Fundus visualization</strong> - Limited view of posterior structures</li>
+            <li>🏥 <strong>Surgical consideration</strong> - May benefit from cataract extraction</li>
+        </ul>
+    </div>
     """,
 
     'Age-related Macular Degeneration (AMD)': """
-    <h3 style="color:#AD1457; font-weight:bold;">🧓 Age-related Macular Degeneration (AMD)</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🔴 Yellow drusen near macula</li>
-        <li>👁 Center vision affected</li>
-        <li>🩺 Degenerative macula changes</li>
-        <li>⚠️ Early/moderate AMD signs</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#be185d; font-weight:bold;">🧓 Age-related Macular Degeneration</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>🟡 <strong>Drusen deposits</strong> - Yellow spots near macular region</li>
+            <li>👁 <strong>Central vision impact</strong> - Macula-specific changes</li>
+            <li>📈 <strong>Progressive condition</strong> - Age-related degenerative process</li>
+            <li>🔬 <strong>Monitoring required</strong> - Regular assessment for progression</li>
+        </ul>
+    </div>
     """,
 
     'Hypertension': """
-    <h3 style="color:#C62828; font-weight:bold;">⚠️ Hypertension</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🔶 Bright lesions or hemorrhages</li>
-        <li>🩸 Twisted/narrowed vessels</li>
-        <li>👁 Star or flame-like patterns</li>
-        <li>⚠️ Vascular damage from high BP</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#dc2626; font-weight:bold;">🩸 Hypertensive Retinopathy</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>⭐ <strong>Cotton wool spots</strong> - Nerve fiber layer infarcts</li>
+            <li>🔴 <strong>Flame hemorrhages</strong> - Superficial retinal bleeding</li>
+            <li>🩸 <strong>Arteriovenous nicking</strong> - Vessel caliber changes</li>
+            <li>💊 <strong>BP management</strong> - Systemic hypertension control needed</li>
+        </ul>
+    </div>
     """,
 
     'Myopia': """
-    <h3 style="color:#1565C0; font-weight:bold;">👓 Myopia</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>🔵 Elongated eyeball signs</li>
-        <li>🩺 Slight disc tilting</li>
-        <li>👁 Possible peripapillary atrophy</li>
-        <li>ℹ️ Common in nearsighted eyes</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#2563eb; font-weight:bold;">👓 Myopic Changes</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>🔵 <strong>Axial elongation signs</strong> - Elongated eyeball morphology</li>
+            <li>⚪ <strong>Peripapillary atrophy</strong> - Tissue thinning around optic disc</li>
+            <li>📐 <strong>Disc tilting</strong> - Oblique optic disc orientation</li>
+            <li>👁 <strong>Refractive changes</strong> - Associated with high myopia</li>
+        </ul>
+    </div>
     """,
 
     'Others': """
-    <h3 style="color:#424242; font-weight:bold;">🔎 Others</h3>
-    <ul style="font-size:16px; line-height:1.6; color:#333;">
-        <li>⚪ Unusual or unclassified patterns</li>
-        <li>🩸 Irregular vascular changes</li>
-        <li>👁 Disc or macula abnormalities</li>
-        <li>❓ Possibly rare or overlapping conditions</li>
-    </ul>
+    <div class="medical-card">
+        <h3 style="color:#6b7280; font-weight:bold;">🔍 Unclassified Findings</h3>
+        <ul style="font-size:16px; line-height:1.8; color:#374151; margin:0;">
+            <li>❓ <strong>Atypical presentation</strong> - Unusual retinal patterns</li>
+            <li>🔬 <strong>Further evaluation</strong> - Additional testing recommended</li>
+            <li>🩺 <strong>Specialist referral</strong> - Ophthalmologist consultation advised</li>
+            <li>📋 <strong>Comprehensive exam</strong> - Complete ocular assessment needed</li>
+        </ul>
+    </div>
     """
 }
 
-
-# --- LIME Display ---
+# --- Enhanced LIME Display ---
 def show_lime(img, model, pred_idx, pred_label, all_probs):
-    with st.spinner("🟡 Generating LIME explanation..."):
+    with st.spinner("🔬 Generating LIME explanation..."):
         explanation = LIME_EXPLAINER.explain_instance(
             image=img,
             classifier_fn=lambda imgs: predict(imgs, model),
@@ -248,59 +413,142 @@ def show_lime(img, model, pred_idx, pred_label, all_probs):
         buf.seek(0)
         lime_data = buf.getvalue()
 
-        # Wrap columns inside a flex container for equal height
+        # Enhanced layout with medical styling
         st.markdown('<div class="flex-row">', unsafe_allow_html=True)
 
         col1, col2 = st.columns(2)
         with col1:
-            st.markdown("### 📍 LIME Explanation")
-            st.image(lime_data, width=224, output_format="PNG")
+            st.markdown("""
+                <div class="image-container">
+                    <h3 style="color:#1e40af; margin-bottom:1rem;">🔬 LIME Explanation</h3>
+                </div>
+            """, unsafe_allow_html=True)
+            st.image(lime_data, width=280, output_format="PNG")
             st.download_button(
-                "📥 Download LIME Image",
+                "📥 Download LIME Analysis",
                 lime_data,
-                file_name=f"{pred_label}_LIME.png",
+                file_name=f"{pred_label}_LIME_Analysis.png",
                 mime="image/png"
             )
+        
         with col2:
-            st.markdown(
-                f'<div class="overlay">{explanation_text.get(pred_label, "No explanation available.")}</div>',
-                unsafe_allow_html=True
-            )
+            st.markdown(explanation_text.get(pred_label, "<p>No explanation available.</p>"), unsafe_allow_html=True)
 
         st.markdown('</div>', unsafe_allow_html=True)
 
+# --- Enhanced Confidence Display ---
+def show_confidence(confidence, pred_label):
+    if confidence >= 80:
+        card_class = "prediction-high"
+        icon = "🎯"
+    elif confidence >= 60:
+        card_class = "prediction-medium"
+        icon = "⚠️"
+    else:
+        card_class = "prediction-low"
+        icon = "🔍"
+    
+    st.markdown(f"""
+        <div class="prediction-card {card_class}">
+            <h2 style="margin:0; color:#1e40af;">{icon} Diagnosis: <strong>{pred_label}</strong></h2>
+            <div class="confidence-bar">
+                <div class="confidence-fill" style="width:{confidence}%"></div>
+            </div>
+            <p style="margin:0.5rem 0 0 0; font-size:18px; font-weight:bold;">
+                Confidence: {confidence:.1f}%
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
 
-# --- Streamlit App UI ---
-st.set_page_config(page_title="👁 Retina Classifier with LIME", layout="wide")
-st.title("👁 Retina Disease Classifier with LIME Explanation")
+# --- Enhanced Streamlit App UI ---
+st.set_page_config(
+    page_title="👁️ Retina AI Classifier", 
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Main header
+st.markdown("""
+    <div class="main-header">
+        <h1 style="margin:0; font-size:2.5rem;">👁️ Retina Disease Classifier</h1>
+        <p style="margin:0.5rem 0 0 0; font-size:1.2rem; opacity:0.9;">
+            AI-Powered Retinal Analysis with LIME Explainability
+        </p>
+    </div>
+""", unsafe_allow_html=True)
 
 model = load_model()
 
+# Enhanced sidebar
 with st.sidebar:
+    st.markdown("""
+        <div class="sidebar-content">
+            <h3 style="color:#1e40af; margin-top:0;">📂 Upload Images</h3>
+            <p style="color:#6b7280; margin-bottom:1rem;">
+                Upload retinal fundus images for AI analysis
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
+    
     uploaded_files = st.file_uploader(
-        "📂 Upload retinal images", type=["jpg", "jpeg", "png"], accept_multiple_files=True
+        "Choose retinal images",
+        type=["jpg", "jpeg", "png"],
+        accept_multiple_files=True,
+        help="Upload high-quality fundus photographs"
     )
+    
     selected_filename = None
     if uploaded_files:
+        st.markdown("""
+            <div class="sidebar-content">
+                <h4 style="color:#1e40af; margin-top:0;">🎯 Select Image</h4>
+            </div>
+        """, unsafe_allow_html=True)
         filenames = [f.name for f in uploaded_files]
-        selected_filename = st.selectbox("🎯 Select an image to explain", filenames)
+        selected_filename = st.selectbox(
+            "Choose image for analysis",
+            filenames,
+            help="Select which image to analyze with LIME"
+        )
 
+# Main content area
 if uploaded_files and selected_filename:
     file = next(f for f in uploaded_files if f.name == selected_filename)
     file.seek(0)
     bgr = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)
     rgb = cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)
 
-    st.subheader("🔍 Preprocessing Steps")
+    # Processing steps section
+    st.markdown("""
+        <div class="processing-step">
+            <h3 style="color:#1e40af; margin-top:0;">🔍 Image Preprocessing Pipeline</h3>
+            <p style="color:#6b7280; margin-bottom:1rem;">
+                Standardized preprocessing steps for optimal AI analysis
+            </p>
+        </div>
+    """, unsafe_allow_html=True)
+    
     preprocessed = preprocess_with_steps(rgb)
     input_tensor = np.expand_dims(preprocessed, axis=0)
 
+    # Prediction
     preds = predict(input_tensor, model)
     pred_idx = np.argmax(preds)
     pred_label = CLASS_NAMES[pred_idx]
     confidence = np.max(preds) * 100
 
-    st.success(f"✅ Prediction: **{pred_label}** ({confidence:.2f}%)")
+    # Enhanced prediction display
+    show_confidence(confidence, pred_label)
+    
+    # LIME explanation
     show_lime(preprocessed, model, pred_idx, pred_label, preds)
+    
 else:
-    st.info("📤 Upload a retinal image from the sidebar to get started.")
+    st.info("📤 Please upload retinal images from the sidebar to begin analysis.")
+    st.markdown("""
+        <div style="text-align:center; padding:3rem; color:#6b7280;">
+            <h3>Welcome to the Retina AI Classifier</h3>
+            <p>This system uses advanced deep learning to analyze retinal fundus images and identify various eye conditions.</p>
+            <p>📋 Supported conditions: Normal, Diabetic Retinopathy, Glaucoma, Cataract, AMD, Hypertension, Myopia, and Others</p>
+        </div>
+    """, unsafe_allow_html=True)