Update app.py

app.py

@@ -9,6 +9,33 @@ from keras.layers import BatchNormalization, DepthwiseConv2D, TFSMLayer
 import os
 from io import BytesIO
 import base64
+st.markdown("""
+    <style>
+    .equal-cols {
+        display: flex;
+        gap: 1.5rem;
+    }
+    .equal-cols > div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    .lime-image {
+        width: 100%;
+        border-radius: 10px;
+    }
+    .overlay-box {
+        background-color: rgba(255, 255, 255, 0.85);
+        padding: 1rem;
+        border-radius: 10px;
+        overflow-y: auto;
+        color: #333;
+        font-size: 16px;
+        line-height: 1.5;
+        height: 100%;
+    }
+    </style>
+""", unsafe_allow_html=True)
 
 # --- Fix deserialization issues for BatchNorm and DepthwiseConv2D ---
 original_bn = BatchNormalization.from_config
@@ -197,36 +224,39 @@ def show_lime(img, model, pred_idx, pred_label, all_probs):
         )
         lime_img = mark_boundaries(temp, mask)
 
-        col1, col2 = st.columns([1, 1])  # Two equal columns
+        # Save to buffer once
+        buf = BytesIO()
+        plt.imsave(buf, lime_img, format="png")
+        buf.seek(0)
+        lime_data = buf.getvalue()
 
-        with col1:
-            st.markdown("### 📍 LIME Explanation")
-
-            # Save image to BytesIO buffer for both display and download
-            buf = BytesIO()
-            plt.imsave(buf, lime_img, format="png")
-            buf.seek(0)
-
-            # Display image with full column width
-            st.image(buf.getvalue(), use_column_width=True)
+        # Custom equal-height container
+        st.markdown('<div class="equal-cols">', unsafe_allow_html=True)
 
-            # Download button
+        # Left column with image
+        with st.container():
+            st.markdown("### 📍 LIME Explanation")
+            st.image(lime_data, use_container_width=True, output_format="PNG")
             st.download_button(
                 "📥 Download LIME Image",
-                buf.getvalue(),
+                lime_data,
                 file_name=f"{pred_label}_LIME.png",
                 mime="image/png"
             )
 
-        with col2:
+        # Right column with explanation
+        with st.container():
             st.markdown(
-                "<div class='overlay'>"
+                f"<div class='overlay-box'>"
                 f"<h3>🧠 Model's Reasoning</h3>"
                 f"{explanation_text.get(pred_label, 'No explanation available.')}"
                 "</div>",
-                unsafe_allow_html=True,
+                unsafe_allow_html=True
             )
 
+        st.markdown('</div>', unsafe_allow_html=True)
+
+