Update app.py

app.py

@@ -7,6 +7,7 @@ from lime import lime_image
 from skimage.segmentation import mark_boundaries
 from keras.layers import BatchNormalization, DepthwiseConv2D, TFSMLayer
 import os
+from io import BytesIO
 
 # --- Fix deserialization issues ---
 original_bn = BatchNormalization.from_config
@@ -26,6 +27,30 @@ IMG_SIZE = (224, 224)
 CLASS_NAMES = ['Normal', 'Diabetes', 'Glaucoma', 'Cataract', 'AMD', 'Hypertension', 'Myopia', 'Others']
 LIME_EXPLAINER = lime_image.LimeImageExplainer()
 
+# --- Enhanced LIME Explanation Dictionary (HTML + Icons + Colors) ---
+explanation_text = {
+    'Normal': """✅ **<span style='color:green'>Normal</span>**\nThe model predicted <span style='color:green'><strong>Normal</strong></span> because everything looks healthy:\n- 🟢 **Overall Look**: Clear retina, no spots or damage  \n- 🩺 **Blood Vessels**: Normal size and shape  \n- 👁 **Optic Disc & Macula**: Clean, no swelling or dark areas  \n<span style='color:green'>✔️ The eye appears completely healthy.</span>""",
+    'Diabetes': """💉 **<span style='color:orange'>Diabetes</span>**\nThe model predicted <span style='color:orange'><strong>Diabetes</strong></span> due to signs of diabetic eye disease:\n- 🔶 **Overall Look**: Tiny spots, bleeding, or swelling  \n- 🩸 **Blood Vessels**: Damaged or swollen  \n- 👁 **Optic Disc & Macula**: Swelling or fluid may be present  \n<span style='color:orange'>⚠️ Signs of diabetic retinopathy.</span>""",
+    'Glaucoma': """👁 **<span style='color:red'>Glaucoma</span>**\nThe model predicted <span style='color:red'><strong>Glaucoma</strong></span> by detecting optic nerve changes:\n- 🔴 **Overall Look**: Some nerve areas look damaged  \n- 💉 **Blood Vessels**: Mostly normal  \n- 👁 **Optic Disc & Macula**: Disc cupping, nerve fiber loss  \n<span style='color:red'>🔴 Serious condition—can lead to vision loss.</span>""",
+    'Cataract': """🌫 **<span style='color:gray'>Cataract</span>**\nThe model predicted <span style='color:gray'><strong>Cataract</strong></span> based on blurry image quality:\n- 🌫 **Overall Look**: Image appears cloudy or foggy  \n- 👁 **Blood Vessels**: Hard to see clearly  \n- 🔍 **Optic Disc & Macula**: Low contrast and unclear  \n<span style='color:gray'>⚠️ Likely due to a cloudy lens (cataract).</span>""",
+    'AMD': """🧓 **<span style='color:red'>AMD (Macular Degeneration)</span>**\nThe model predicted <span style='color:red'><strong>AMD</strong></span> by focusing on the center of the retina:\n- 🔴 **Overall Look**: Mostly clear except center  \n- 🩺 **Blood Vessels**: Usually look fine  \n- 👁 **Optic Disc & Macula**: Yellow spots or damage in macula  \n<span style='color:red'>⚠️ Early signs of age-related vision loss.</span>""",
+    'Hypertension': """⚠️ **<span style='color:orange'>Hypertension</span>**\nThe model predicted <span style='color:orange'><strong>Hypertension</strong></span> due to blood vessel changes:\n- 🔶 **Overall Look**: Small bleeds or spots  \n- 🩸 **Blood Vessels**: Narrowed or twisted  \n- 👁 **Optic Disc & Macula**: Swelling or star patterns  \n<span style='color:orange'>⚠️ May be caused by high blood pressure.</span>""",
+    'Myopia': """👓 **<span style='color:blue'>Myopia</span>**\nThe model predicted <span style='color:blue'><strong>Myopia</strong></span> based on eye structure:\n- 🔵 **Overall Look**: Stretched or thin retina edges  \n- 🩺 **Blood Vessels**: Usually normal  \n- 👁 **Optic Disc & Macula**: Tilted disc, outer damage  \n<span style='color:blue'>ℹ️ Common in people with nearsightedness.</span>""",
+    'Others': """🔎 **<span style='color:gray'>Others</span>**\nThe model predicted <span style='color:gray'><strong>Others</strong></span> due to unknown or rare changes:\n- ⚪ **Overall Look**: Mixed or unusual patterns  \n- 🩸 **Blood Vessels**: Varies by case  \n- 👁 **Optic Disc & Macula**: Random changes  \n<span style='color:gray'>❓ May indicate a rare or mixed eye condition.</span>"""
+}
+
+# --- Streamlit Setup ---
+st.set_page_config(page_title="👁 Retina Classifier - Multi Image LIME", layout="wide")
+st.title("👁 Retina Disease Classifier with LIME Explanation")
+st.markdown("""
+    <style>
+    .lime-text {
+        color: var(--text-color);
+        font-size: 16px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
 @st.cache_resource
 def load_model():
     model_path = "Model"
@@ -56,11 +81,8 @@ def preprocess_with_steps(img):
     resized = cv2.resize(sharp, IMG_SIZE) / 255.0
 
     fig, axs = plt.subplots(1, 4, figsize=(20, 5))
-    for ax, image, title in zip(
-        axs,
-        [img, circ, clahe_img, resized],
-        ["Original", "Circular Crop", "CLAHE", "Sharpen + Resize"],
-    ):
+    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.axis("off")
@@ -86,116 +108,29 @@ def show_lime(img, model, pred_idx, pred_label):
             label=pred_idx, positive_only=True, num_features=10, hide_rest=False
         )
 
-        # --- Enhanced LIME Explanation Dictionary ---
-        # --- Easy Language LIME Explanation Dictionary with Color Tags ---
-explanation_text = {
-    'Normal': """✅ **<span style='color:green'>Normal</span>**
-The model predicted <span style='color:green'><strong>Normal</strong></span> because everything looks healthy:
-
-- 🟢 **Overall Look**: Clear retina, no spots or damage  
-- 🩺 **Blood Vessels**: Normal size and shape  
-- 👁 **Optic Disc & Macula**: Clean, no swelling or dark areas  
-
-<span style='color:green'>✔️ The eye appears completely healthy.</span>""",
-
-    'Diabetes': """💉 **<span style='color:orange'>Diabetes</span>**
-The model predicted <span style='color:orange'><strong>Diabetes</strong></span> due to signs of diabetic eye disease:
-
-- 🔶 **Overall Look**: Tiny spots, bleeding, or swelling  
-- 🩸 **Blood Vessels**: Damaged or swollen  
-- 👁 **Optic Disc & Macula**: Swelling or fluid may be present  
-
-<span style='color:orange'>⚠️ Signs of diabetic retinopathy.</span>""",
-
-    'Glaucoma': """👁 **<span style='color:red'>Glaucoma</span>**
-The model predicted <span style='color:red'><strong>Glaucoma</strong></span> by detecting optic nerve changes:
-
-- 🔴 **Overall Look**: Some nerve areas look damaged  
-- 💉 **Blood Vessels**: Mostly normal  
-- 👁 **Optic Disc & Macula**: Disc cupping, nerve fiber loss  
-
-<span style='color:red'>🔴 Serious condition—can lead to vision loss.</span>""",
-
-    'Cataract': """🌫 **<span style='color:gray'>Cataract</span>**
-The model predicted <span style='color:gray'><strong>Cataract</strong></span> based on blurry image quality:
-
-- 🌫 **Overall Look**: Image appears cloudy or foggy  
-- 👁 **Blood Vessels**: Hard to see clearly  
-- 🔍 **Optic Disc & Macula**: Low contrast and unclear  
-
-<span style='color:gray'>⚠️ Likely due to a cloudy lens (cataract).</span>""",
-
-    'AMD': """🧓 **<span style='color:red'>AMD (Macular Degeneration)</span>**
-The model predicted <span style='color:red'><strong>AMD</strong></span> by focusing on the center of the retina:
-
-- 🔴 **Overall Look**: Mostly clear except center  
-- 🩺 **Blood Vessels**: Usually look fine  
-- 👁 **Optic Disc & Macula**: Yellow spots or damage in macula  
-
-<span style='color:red'>⚠️ Early signs of age-related vision loss.</span>""",
-
-    'Hypertension': """⚠️ **<span style='color:orange'>Hypertension</span>**
-The model predicted <span style='color:orange'><strong>Hypertension</strong></span> due to blood vessel changes:
-
-- 🔶 **Overall Look**: Small bleeds or spots  
-- 🩸 **Blood Vessels**: Narrowed or twisted  
-- 👁 **Optic Disc & Macula**: Swelling or star patterns  
-
-<span style='color:orange'>⚠️ May be caused by high blood pressure.</span>""",
-
-    'Myopia': """👓 **<span style='color:blue'>Myopia</span>**
-The model predicted <span style='color:blue'><strong>Myopia</strong></span> based on eye structure:
-
-- 🔵 **Overall Look**: Stretched or thin retina edges  
-- 🩺 **Blood Vessels**: Usually normal  
-- 👁 **Optic Disc & Macula**: Tilted disc, outer damage  
-
-<span style='color:blue'>ℹ️ Common in people with nearsightedness.</span>""",
-
-    'Others': """🔎 **<span style='color:gray'>Others</span>**
-The model predicted <span style='color:gray'><strong>Others</strong></span> due to unknown or rare changes:
-
-- ⚪ **Overall Look**: Mixed or unusual patterns  
-- 🩸 **Blood Vessels**: Varies by case  
-- 👁 **Optic Disc & Macula**: Random changes  
-
-<span style='color:gray'>❓ May indicate a rare or mixed eye condition.</span>"""
-}
-
-        }
-
-        # --- Side-by-side layout ---
-        col1, col2 = st.columns([1, 2])  # left for image, right for text
-
-        with col1:
-            fig, ax = plt.subplots(figsize=(3, 3))
-            ax.imshow(mark_boundaries(temp, mask))
-            ax.axis("off")
-            ax.text(
-                5, 20,
-                f"LIME: {pred_label}",
-                color="black",
-                fontsize=10,
-                bbox=dict(facecolor='white', alpha=0.7, pad=2)
-            )
-            st.pyplot(fig)
-            plt.close(fig)
-
-        with col2:
-            st.markdown("#### 👁 Detailed LIME Explanation")
-            st.markdown(explanation_text.get(pred_label, "No explanation available."))
-
-
-# --- UI ---
-st.set_page_config(page_title="👁 Retina Classifier - Multi Image LIME", layout="wide")
-st.title("👁 Retina Disease Classifier with LIME Explanation")
+        fig, ax = plt.subplots(figsize=(3, 3))
+        ax.imshow(mark_boundaries(temp, mask))
+        ax.axis("off")
+        ax.text(5, 20, f"LIME: {pred_label}", color="black", fontsize=10,
+                bbox=dict(facecolor='white', alpha=0.7, pad=2))
+        st.pyplot(fig)
+
+        buf = BytesIO()
+        fig.savefig(buf, format="png")
+        st.download_button("📥 Download LIME Image", buf.getvalue(), file_name=f"{pred_label}_LIME.png", mime="image/png")
+        plt.close(fig)
+
+        st.markdown("#### 👁 Detailed LIME Explanation")
+        st.markdown(
+            f"<div class='lime-text'>{explanation_text.get(pred_label, 'No explanation available.')}</div>",
+            unsafe_allow_html=True
+        )
 
+# --- Sidebar + File Upload ---
 model = load_model()
 
 with st.sidebar:
-    uploaded_files = st.file_uploader(
-        "📂 Upload retinal images", type=["jpg", "jpeg", "png"], accept_multiple_files=True
-    )
+    uploaded_files = st.file_uploader("📂 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]
@@ -217,4 +152,23 @@ if uploaded_files and selected_filename:
     confidence = np.max(preds) * 100
 
     st.success(f"✅ Prediction: **{pred_label}** ({confidence:.2f}%)")
-    show_lime(preprocessed, model, pred_idx, pred_label)
+
+    # Show probability chart
+    st.markdown("#### 📊 Class Probabilities")
+    prob_dict = {label: float(preds[0][i]) for i, label in enumerate(CLASS_NAMES)}
+    prob_chart_data = sorted(prob_dict.items(), key=lambda x: x[1], reverse=True)
+
+    prob_labels = [k for k, _ in prob_chart_data]
+    prob_values = [v for _, v in prob_chart_data]
+
+    fig_bar, ax_bar = plt.subplots(figsize=(8, 3))
+    bars = ax_bar.barh(prob_labels, prob_values, color="skyblue")
+    ax_bar.set_xlim(0, 1)
+    ax_bar.invert_yaxis()
+    ax_bar.set_xlabel("Confidence Score")
+    for bar in bars:
+        ax_bar.text(bar.get_width() + 0.01, bar.get_y() + 0.25, f"{bar.get_width()*100:.1f}%", color='black')
+    st.pyplot(fig_bar)
+    plt.close(fig_bar)
+
+    show_lime(preprocessed, model, pred_idx, pred_label)