Update app.py

app.py

@@ -10,26 +10,28 @@ import os
 from io import BytesIO
 import base64
 
-# Enhanced CSS with Medical-Professional Color Scheme
+# FIXED CSS - Removed animations and stabilized background
 st.markdown(
     """
     <style>
-    /* Main App Styling */
+    /* Main App Styling - FIXED: Stable background */
     .stApp {
-        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        background: #f8fafc !important;
+        /* Removed gradient and animations */
     }
     
-    /* Header Styling */
+    /* Header Styling - FIXED: No animations */
     .main-header {
-        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+        background: #1e40af;
         color: white;
         padding: 1.5rem;
         border-radius: 12px;
         margin-bottom: 2rem;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        /* Removed gradient animations */
     }
     
-    /* Flex Container for Equal Height Columns */
+    /* FIXED: Stable flex container */
     .flex-row {
         display: flex;
         gap: 2rem;
@@ -42,14 +44,16 @@ st.markdown(
         flex-direction: column;
     }
     
-    /* Medical Information Cards */
+    /* FIXED: Stable medical cards */
     .medical-card {
-        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+        background: white;
         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;
+        border: 1px solid #e2e8f0;
+        /* Removed gradient and animations */
     }
     
     .medical-card h3 {
@@ -58,88 +62,62 @@ st.markdown(
         padding-bottom: 0.5rem;
     }
     
-    /* Remove conflicting prediction card styles */
-    .prediction-card, .prediction-high, .prediction-medium, .prediction-low {
-        display: none;
+    /* FIXED: Removed conflicting prediction styles */
+    .prediction-card {
+        background: white;
+        padding: 2rem;
+        border-radius: 16px;
+        margin: 2rem 0;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e2e8f0;
+        /* Removed all animations and gradients */
     }
     
-    /* Enhanced Image Processing Steps */
+    /* FIXED: Stable processing container */
     .processing-container {
         background: white;
         border-radius: 16px;
         padding: 2rem;
         margin: 2rem 0;
-        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         border: 1px solid #e2e8f0;
+        /* Removed animations */
     }
     
-    /* LIME Analysis Container */
+    /* FIXED: Stable LIME container */
     .lime-container {
         background: white;
         border-radius: 16px;
         padding: 2rem;
         margin: 2rem 0;
-        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-        border: 1px solid #e2e8f0;
-    }
-    
-    /* Enhanced Medical Cards */
-    .medical-card {
-        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-        padding: 2rem;
-        border-radius: 16px;
-        border-left: 6px solid #3b82f6;
-        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
-        flex-grow: 1;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         border: 1px solid #e2e8f0;
+        /* Removed animations */
     }
     
-    .medical-card h3 {
-        margin-top: 0;
-        margin-bottom: 1rem;
-        border-bottom: 2px solid #e2e8f0;
-        padding-bottom: 0.5rem;
-        font-size: 1.25rem;
-    }
-    
-    .medical-card li {
-        margin-bottom: 0.5rem;
-        padding-left: 0.5rem;
-    }
-    
-    /* Enhanced Button Styling */
+    /* FIXED: Stable button styling */
     .stDownloadButton > button {
-        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        background: #3b82f6;
         color: white;
         border: none;
         border-radius: 12px;
         padding: 0.75rem 1.5rem;
         font-weight: 600;
         font-size: 1rem;
-        transition: all 0.3s ease;
         width: 100%;
         margin-top: 1rem;
+        /* Removed all hover animations and transitions */
     }
     
-    .stDownloadButton > button:hover {
-        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-        transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
-    }
-    
-    /* Enhanced Spinner */
-    .stSpinner > div {
-        border-color: #3b82f6 transparent transparent transparent;
-    }
-    
-    /* Upload Instructions */
+    /* FIXED: Stable upload instructions */
     .upload-instructions {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-        border: 2px dashed #3b82f6;
+        background: #f0f9ff;
+        border: 2px solid #3b82f6;
         border-radius: 12px;
         padding: 3rem;
         text-align: center;
         margin: 2rem 0;
+        /* Removed gradient */
     }
     
     .upload-instructions h3 {
@@ -153,7 +131,7 @@ st.markdown(
         margin-bottom: 1rem;
     }
     
-    /* Feature Grid */
+    /* FIXED: Stable feature grid */
     .feature-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -167,12 +145,8 @@ st.markdown(
         padding: 1.5rem;
         text-align: center;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        border: 1px solid #e2e8f2;
-        transition: transform 0.3s ease;
-    }
-    
-    .feature-card:hover {
-        transform: translateY(-4px);
+        border: 1px solid #e2e8f0;
+        /* Removed hover animations */
     }
     
     .feature-icon {
@@ -192,75 +166,7 @@ st.markdown(
         font-size: 0.9rem;
     }
     
-    /* 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 - Fixed */
+    /* FIXED: Stable confidence bar */
     .confidence-bar {
         background: #e2e8f0;
         border-radius: 10px;
@@ -274,49 +180,40 @@ st.markdown(
         height: 100%;
         border-radius: 10px;
         position: relative;
-        transition: width 0.8s ease-out;
+        /* Removed transitions */
     }
     
     .confidence-fill.high {
-        background: linear-gradient(90deg, #16a34a 0%, #059669 100%);
+        background: #16a34a;
     }
     
     .confidence-fill.medium {
-        background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
+        background: #f59e0b;
     }
     
     .confidence-fill.low {
-        background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
+        background: #ef4444;
     }
     
-    /* Prediction Results Container */
-    .prediction-container {
+    /* FIXED: Stable sidebar */
+    .sidebar-content {
         background: white;
-        border-radius: 16px;
-        padding: 2rem;
-        margin: 2rem 0;
-        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        border-radius: 12px;
+        padding: 1rem;
+        margin: 1rem 0;
         border: 1px solid #e2e8f0;
     }
     
-    /* Enhanced Typography */
-    .prediction-title {
-        font-size: 1.75rem;
-        font-weight: 700;
-        color: #1e40af;
-        margin-bottom: 1rem;
-        text-align: center;
-    }
-    
-    .confidence-text {
-        font-size: 1.2rem;
-        font-weight: 600;
-        color: #374151;
-        text-align: center;
-        margin-top: 0.5rem;
+    /* FIXED: Stable 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;
     }
     
-    /* Additional Metrics */
+    /* FIXED: Stable metrics */
     .metrics-row {
         display: flex;
         justify-content: space-around;
@@ -344,6 +241,65 @@ st.markdown(
         text-transform: uppercase;
         letter-spacing: 0.1em;
     }
+    
+    /* FIXED: Stable typography */
+    .prediction-title {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: #1e40af;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    
+    .confidence-text {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: #374151;
+        text-align: center;
+        margin-top: 0.5rem;
+    }
+    
+    /* FIXED: Stable processing steps */
+    .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;
+    }
+    
+    /* FIXED: Stable message styling */
+    .stSuccess {
+        background: #f0fdf4;
+        border-left: 4px solid #22c55e;
+        border-radius: 8px;
+    }
+    
+    .stWarning {
+        background: #fffbeb;
+        border-left: 4px solid #f59e0b;
+        border-radius: 8px;
+    }
+    
+    .stError {
+        background: #fef2f2;
+        border-left: 4px solid #ef4444;
+        border-radius: 8px;
+    }
+    
+    /* FIXED: Remove any potential animation triggers */
+    * {
+        transition: none !important;
+        animation: none !important;
+        transform: none !important;
+    }
+    
+    /* FIXED: Ensure stable viewport */
+    .block-container {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
     </style>
     """,
     unsafe_allow_html=True,
@@ -361,42 +317,23 @@ DepthwiseConv2D.from_config = classmethod(
     lambda cls, config, *a, **k: original_dw({k: v for k, v in config.items() if k != "groups"}, *a, **k)
 )
 
-# --- Enhanced Background Function ---
-def set_background(main_bg_path, sidebar_bg_path):
-    def encode_image(path):
-        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)
-    
-    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)
+# --- FIXED: Simplified background function (no dynamic changes) ---
+def set_background():
+    """Set a stable, consistent background"""
+    st.markdown("""
+        <style>
+        .stApp {
+            background: #f8fafc !important;
+        }
+        [data-testid="stSidebar"] > div:first-child {
+            background: white !important;
+            border-radius: 0 15px 15px 0;
+        }
+        </style>
+    """, unsafe_allow_html=True)
 
-# Try to set background if images exist
-set_background("5858.jpg", "7070.jpg")
+# Apply stable background
+set_background()
 
 # --- Constants ---
 IMG_SIZE = (224, 224)
@@ -432,7 +369,7 @@ def predict(images, model):
     else:
         return preds
 
-# --- Enhanced Preprocessing Steps ---
+# --- FIXED: Stable preprocessing with consistent styling ---
 def preprocess_with_steps(img):
     h, w = img.shape[:2]
     center, radius = (w // 2, h // 2), min(w, h) // 2
@@ -452,9 +389,9 @@ 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
+    # FIXED: Stable visualization with consistent styling
     fig, axs = plt.subplots(1, 4, figsize=(16, 4))
-    fig.patch.set_facecolor('#f8fafc')
+    fig.patch.set_facecolor('white')  # Fixed to white background
     
     for ax, image, title in zip(
         axs, [img, circ, clahe_img, resized],
@@ -463,17 +400,13 @@ def preprocess_with_steps(img):
         ax.imshow(image)
         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
+# FIXED: Stable explanation text (no dynamic styling)
 explanation_text = {
     'Normal': """
     <div class="medical-card">
@@ -572,7 +505,7 @@ explanation_text = {
     """
 }
 
-# --- Enhanced LIME Display ---
+# --- FIXED: Stable LIME Display ---
 def show_lime(img, model, pred_idx, pred_label, all_probs):
     with st.spinner("🔬 Generating LIME explanation..."):
         explanation = LIME_EXPLAINER.explain_instance(
@@ -592,9 +525,7 @@ def show_lime(img, model, pred_idx, pred_label, all_probs):
         buf.seek(0)
         lime_data = buf.getvalue()
 
-        # Enhanced layout with medical styling
-        st.markdown('<div class="flex-row">', unsafe_allow_html=True)
-
+        # FIXED: Stable layout
         col1, col2 = st.columns(2)
         with col1:
             st.markdown("""
@@ -613,25 +544,24 @@ def show_lime(img, model, pred_idx, pred_label, all_probs):
         with col2:
             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 ---
+# --- FIXED: Stable confidence display ---
 def show_confidence(confidence, pred_label):
+    # FIXED: Determine confidence level without dynamic styling
     if confidence >= 80:
-        card_class = "prediction-high"
         icon = "🎯"
+        level = "high"
     elif confidence >= 60:
-        card_class = "prediction-medium"
         icon = "⚠️"
+        level = "medium"
     else:
-        card_class = "prediction-low"
         icon = "🔍"
+        level = "low"
     
     st.markdown(f"""
-        <div class="prediction-card {card_class}">
+        <div class="prediction-card">
             <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 class="confidence-fill {level}" style="width:{confidence}%"></div>
             </div>
             <p style="margin:0.5rem 0 0 0; font-size:18px; font-weight:bold;">
                 Confidence: {confidence:.1f}%
@@ -639,18 +569,18 @@ def show_confidence(confidence, pred_label):
         </div>
     """, unsafe_allow_html=True)
 
-# --- Enhanced Streamlit App UI ---
+# --- FIXED: Stable Streamlit App UI ---
 st.set_page_config(
     page_title="👁️ Retina AI Classifier", 
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Main header
+# FIXED: Stable 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;">
+        <p style="margin:0.5rem 0 0 0; font-size:1.2rem;">
             AI-Powered Retinal Analysis with LIME Explainability
         </p>
     </div>
@@ -658,7 +588,7 @@ st.markdown("""
 
 model = load_model()
 
-# Enhanced sidebar
+# FIXED: Stable sidebar
 with st.sidebar:
     st.markdown("""
         <div class="sidebar-content">
@@ -690,14 +620,14 @@ with st.sidebar:
             help="Select which image to analyze with LIME"
         )
 
-# Main content area
+# FIXED: Stable 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)
 
-    # Processing steps section
+    # FIXED: Stable processing steps section
     st.markdown("""
         <div class="processing-container">
             <h3 style="color:#1e40af; margin-top:0; font-size:1.5rem;">🔬 Image Preprocessing Pipeline</h3>
@@ -716,10 +646,10 @@ if uploaded_files and selected_filename:
     pred_label = CLASS_NAMES[pred_idx]
     confidence = np.max(preds) * 100
 
-    # Enhanced prediction display
+    # FIXED: Stable prediction display
     show_confidence(confidence, pred_label)
     
-    # Enhanced LIME explanation section
+    # FIXED: Stable LIME explanation section
     st.markdown("""
         <div class="lime-container">
             <h3 style="color:#1e40af; margin-top:0; font-size:1.5rem;">🧠 AI Explanation & Clinical Insights</h3>
@@ -733,7 +663,7 @@ if uploaded_files and selected_filename:
     show_lime(preprocessed, model, pred_idx, pred_label, preds)
     
 else:
-    # Enhanced welcome screen
+    # FIXED: Stable welcome screen
     st.markdown("""
         <div class="upload-instructions">
             <h3>Welcome to the Retina AI Classifier</h3>
@@ -742,7 +672,7 @@ else:
         </div>
     """, unsafe_allow_html=True)
     
-    # Feature grid
+    # FIXED: Stable feature grid
     st.markdown("""
         <div class="feature-grid">
             <div class="feature-card">