Update app.py

app.py

@@ -51,49 +51,6 @@ def set_background(image_path):
 
 set_background("5858.jpg")
 
-# --- Custom CSS for layout and styling ---
-st.markdown("""
-    <style>
-    .stApp {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-    .preview-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 1rem;
-        margin-bottom: 2rem;
-    }
-    .preview-grid img {
-        border-radius: 12px;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-        max-width: 100%;
-        height: auto;
-    }
-    .lime-row {
-        display: flex;
-        gap: 2rem;
-        margin-top: 2rem;
-    }
-    .lime-row > div {
-        flex: 1;
-    }
-    .overlay {
-        background-color: rgba(255, 255, 255, 0.9);
-        padding: 1rem 1.5rem;
-        border-radius: 12px;
-        font-size: 16px;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-        height: 100%;
-    }
-    .sidebar .block-container {
-        background-color: #f5f7fa;
-        padding: 1rem;
-        border-radius: 12px;
-        box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    }
-    </style>
-""", unsafe_allow_html=True)
-
 # --- Constants ---
 IMG_SIZE = (224, 224)
 CLASS_NAMES = [
@@ -148,20 +105,16 @@ 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
 
-    # Visualization with grid layout
-    st.markdown("### 🔍 Preprocessing Steps")
-    st.markdown('<div class="preview-grid">', unsafe_allow_html=True)
-
-    for img_preview, title in zip(
-        [img, circ, clahe_img, (resized * 255).astype(np.uint8)],
+    fig, axs = plt.subplots(1, 4, figsize=(16, 4))
+    for ax, image, title in zip(
+        axs, [img, circ, clahe_img, resized],
         ["Original", "Circular Crop", "CLAHE", "Sharpen + Resize"]
     ):
-        buf = BytesIO()
-        plt.imsave(buf, img_preview, format='png')
-        st.image(buf.getvalue(), caption=title, use_container_width=True)
-
-    st.markdown("</div>", unsafe_allow_html=True)
-
+        ax.imshow(image)
+        ax.set_title(title)
+        ax.axis("off")
+    st.pyplot(fig)
+    plt.close(fig)
     return resized
 
 # --- Reasoning Text ---
@@ -196,44 +149,36 @@ def show_lime(img, model, pred_idx, pred_label, all_probs):
         buf.seek(0)
         lime_data = buf.getvalue()
 
-        st.markdown("## 🧠 LIME Explanation & Reasoning")
-        st.markdown('<div class="lime-row">', unsafe_allow_html=True)
-
         col1, col2 = st.columns(2)
         with col1:
-            st.image(lime_data, caption="LIME Explanation", width=224)
-            st.download_button("📥 Download LIME Image", lime_data, file_name=f"{pred_label}_LIME.png", mime="image/png")
-
+            st.markdown("### 📍 LIME Explanation")
+            st.image(lime_data, width=224, output_format="PNG")  # 👈 Small LIME image
+            st.download_button(
+                "📥 Download LIME Image",
+                lime_data,
+                file_name=f"{pred_label}_LIME.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("</div>", unsafe_allow_html=True)
+            st.markdown(
+                f"<div class='overlay'>{explanation_text.get(pred_label, 'No explanation available.')}</div>",
+                unsafe_allow_html=True
+            )
 
-# --- Main App UI ---
+# --- Streamlit App UI ---
 st.set_page_config(page_title="👁 Retina Classifier with LIME", layout="wide")
 st.title("👁 Retina Disease Classifier with LIME Explanation")
 
+model = load_model()
+
 with st.sidebar:
-    st.header("📁 Upload & Select")
     uploaded_files = st.file_uploader(
-        "Upload retinal images", type=["jpg", "jpeg", "png"], accept_multiple_files=True
+        "📂 Upload retinal images", type=["jpg", "jpeg", "png"], accept_multiple_files=True
     )
     selected_filename = None
     if uploaded_files:
         filenames = [f.name for f in uploaded_files]
-        selected_filename = st.selectbox("🎯 Choose an image", filenames)
-
-    st.markdown("---")
-    st.markdown("ℹ️ **App Info**")
-    st.markdown("""
-    This app detects retinal diseases using a deep learning model and explains the decision using **LIME**.
-
-    Model: `CoAtNet / SavedModel`
-
-    Accuracy: ~92%
-    """)
-
-model = load_model()
+        selected_filename = st.selectbox("🎯 Select an image to explain", filenames)
 
 if uploaded_files and selected_filename:
     file = next(f for f in uploaded_files if f.name == selected_filename)
@@ -241,6 +186,7 @@ if uploaded_files and selected_filename:
     bgr = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)
     rgb = cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)
 
+    st.subheader("🔍 Preprocessing Steps")
     preprocessed = preprocess_with_steps(rgb)
     input_tensor = np.expand_dims(preprocessed, axis=0)