Update app.py

app.py

@@ -1,5 +1,8 @@
+# -------------------------
+# Handwritten Digit Recognition App (robust preprocessing)
+# Built by Anam Jafar
+# -------------------------
 
-# ---- Import Libraries ----
 import streamlit as st
 import numpy as np
 import cv2
@@ -7,14 +10,10 @@ from PIL import Image
 from tensorflow.keras.models import load_model
 from streamlit_drawable_canvas import st_canvas
 
-# ---- Page Config ----
-st.set_page_config(
-    page_title="Digit Recognition App",
-    page_icon="🔢",
-    layout="wide"
-)
+# Page config
+st.set_page_config(page_title="Digit Recognition App", page_icon="🔢", layout="wide")
 
-# ---- Custom Background with CSS ----
+# Background (professional)
 st.markdown(
     """
     <style>
@@ -26,34 +25,94 @@ st.markdown(
     unsafe_allow_html=True
 )
 
-# ---- Load Model ----
+# Load model (cached)
 @st.cache_resource
 def load_cnn_model():
     return load_model("mnist_cnn.h5")
 
 model = load_cnn_model()
 
-# ---- Header ----
-st.markdown(
-    "<h1 style='text-align: center; color: #0D47A1;'> 🔢 Handwritten Digit Recognizer </h1>",
-    unsafe_allow_html=True
-)
-st.write("Upload or draw a digit (0–9), and the model will predict it.")
+# ---------------------
+# Helper: preprocess PIL file uploads
+# ---------------------
+def preprocess_pil_file(file_or_pil_image):
+    """
+    Accept either a file-like object from file_uploader or a PIL.Image.
+    Returns: preprocessed array shape (1,28,28,1), and a display PIL image (28x28)
+    """
+    if not isinstance(file_or_pil_image, Image.Image):
+        img = Image.open(file_or_pil_image)
+    else:
+        img = file_or_pil_image
+
+    # convert to grayscale and resize
+    img = img.convert('L').resize((28, 28))
+    arr = np.array(img).astype('float32') / 255.0  # 0..1
+
+    # auto-invert if background is white and strokes are dark (we expect digit bright on dark background)
+    if arr.mean() > 0.5:
+        arr = 1.0 - arr
+
+    # ensure shape (1,28,28,1)
+    arr = arr.reshape(1, 28, 28, 1).astype('float32')
+    return arr, Image.fromarray((arr[0,:,:,0]*255).astype('uint8'))
+
+# ---------------------
+# Helper: preprocess canvas image (RGBA or RGB)
+# ---------------------
+def preprocess_canvas_image(image_data):
+    """
+    image_data: HxWx4 (RGBA) or HxWx3 (RGB) numpy array from st_canvas.
+    Returns preprocessed array shape (1,28,28,1) and display PIL image.
+    """
+    if image_data is None:
+        return None, None
+
+    # If values are float [0..255] -> convert to uint8
+    img_uint8 = image_data.astype('uint8')
+
+    # If has alpha channel (4), drop or composite with white background
+    if img_uint8.shape[2] == 4:
+        # composite alpha over white background
+        alpha = img_uint8[..., 3] / 255.0
+        rgb = img_uint8[..., :3].astype('float32')
+        white = np.ones_like(rgb) * 255.0
+        comp = (rgb * alpha[..., None] + white * (1 - alpha[..., None])).astype('uint8')
+        gray = cv2.cvtColor(comp, cv2.COLOR_RGB2GRAY)
+    else:
+        gray = cv2.cvtColor(img_uint8, cv2.COLOR_RGB2GRAY)
+
+    # Resize to 28x28, normalize
+    small = cv2.resize(gray, (28, 28), interpolation=cv2.INTER_AREA).astype('float32') / 255.0
+
+    # auto-invert heuristic
+    if small.mean() > 0.5:
+        small = 1.0 - small
+
+    arr = small.reshape(1, 28, 28, 1).astype('float32')
+    display_img = Image.fromarray((small * 255).astype('uint8'))
+    return arr, display_img
+
+# ---------------------
+# UI: header & sidebar
+# ---------------------
+st.markdown("<h1 style='text-align:center;color:#0D47A1;'>🔢 Handwritten Digit Recognizer</h1>", unsafe_allow_html=True)
+st.write("Upload or draw a digit (0–9). The app will preprocess the image and predict the digit.")
 st.markdown("---")
 
-# ---- Sidebar ----
 st.sidebar.header("📌 Instructions")
 st.sidebar.info(
-    "1. Upload a clear image of a single digit (PNG/JPG), **or draw your digit below**.\n"
-    "2. The image will be preprocessed automatically.\n"
-    "3. The model predicts the digit and confidence level."
+    "• Upload PNG/JPG or draw a digit.  \n"
+    "• The app auto-preprocesses (grayscale, resize, normalize, invert if needed).  \n"
+    "• Predictions show digit + confidence & probability bar chart."
 )
-
 st.sidebar.markdown("---")
 st.sidebar.write("👩‍💻 **About**: Built with ❤️ by **Anam Jafar**")
-st.sidebar.write("[🔗 Connect on LinkedIn](https://www.linkedin.com/in/anam-jafar)")
+st.sidebar.write("[🔗 LinkedIn](https://www.linkedin.com/in/anam-jafar)")
 
-# ---- File Upload ----
+# ---------------------
+# FILE UPLOAD (multiple)
+# ---------------------
 uploaded_files = st.file_uploader(
     "📂 Upload digit images (single or multiple):",
     type=["png", "jpg", "jpeg"],
@@ -62,21 +121,30 @@ uploaded_files = st.file_uploader(
 
 if uploaded_files:
     st.subheader("📷 Uploaded Images & Predictions")
-    cols = st.columns(len(uploaded_files))  # grid layout
-
-    for idx, file in enumerate(uploaded_files):
-        img = Image.open(file).convert('L').resize((28, 28))
-        img_array = np.array(img) / 255.0
-        img_array = img_array.reshape(1, 28, 28, 1)
-
-        pred = model.predict(img_array)
-        pred_label = np.argmax(pred)
-        confidence = np.max(pred)
-
-        with cols[idx]:
-            st.image(file, caption=f"Pred: {pred_label} ({confidence*100:.1f}%)", width=120)
 
-# ---- Drawing Pad ----
+    # display in rows of up to 4 columns
+    max_cols = 4
+    for i in range(0, len(uploaded_files), max_cols):
+        row_files = uploaded_files[i:i+max_cols]
+        cols = st.columns(len(row_files))
+        for j, file in enumerate(row_files):
+            arr, display_img = preprocess_pil_file(file)
+            # Debug info (remove in production)
+            st.experimental_show({"shape": arr.shape, "min": float(arr.min()), "max": float(arr.max())})  # optional
+            # Predict
+            with st.spinner("Predicting..."):
+                pred = model.predict(arr)
+            probs = pred[0]
+            label = int(np.argmax(probs))
+            conf = float(np.max(probs))
+
+            with cols[j]:
+                st.image(display_img, caption=f"Pred: {label} ({conf*100:.1f}%)", use_column_width=True)
+                st.bar_chart(probs)   # show probability distribution
+
+# ---------------------
+# DRAWING PAD
+# ---------------------
 st.subheader("🖌️ Draw your digit here:")
 canvas_result = st_canvas(
     stroke_width=12,
@@ -88,32 +156,31 @@ canvas_result = st_canvas(
     key="canvas",
 )
 
-if canvas_result.image_data is not None:
-    img = cv2.resize(canvas_result.image_data.astype("uint8"), (28, 28))
-    img = cv2.cvtColor(img, cv2.COLOR_RGBA2GRAY)
-    img = img / 255.0
-    img = img.reshape(1, 28, 28, 1)
-
-    pred = model.predict(img)
-    pred_label = np.argmax(pred)
-    confidence = np.max(pred)
-
-    st.markdown(
-        f"""
-        <div style="padding:15px; border-radius:10px; background-color:#FFF3CD; text-align:center;">
-            <h2 style="color:#D32F2F;"> 🎯 Predicted Digit: {pred_label} </h2>
-            <p>Confidence: {confidence*100:.2f}%</p>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-
-    # Probability bar chart
-    st.bar_chart(pred[0])
-
-# ---- Footer ----
+if canvas_result is not None and canvas_result.image_data is not None:
+    arr, display_img = preprocess_canvas_image(canvas_result.image_data)
+    if arr is not None:
+        # Debug info (remove in production)
+        st.experimental_show({"canvas_shape": arr.shape, "min": float(arr.min()), "max": float(arr.max())})
+        with st.spinner("Predicting..."):
+            pred = model.predict(arr)
+        probs = pred[0]
+        label = int(np.argmax(probs))
+        conf = float(np.max(probs))
+
+        st.markdown(
+            f"""
+            <div style="padding:12px;border-radius:8px;background:#FFF3CD;text-align:center;">
+                <h2 style="color:#D32F2F;">🎯 Predicted Digit: {label}</h2>
+                <p>Confidence: {conf*100:.2f}%</p>
+            </div>
+            """,
+            unsafe_allow_html=True
+        )
+        st.image(display_img, caption="Preprocessed (28×28) view", width=120)
+        st.bar_chart(probs)
+
+# ---------------------
+# Footer
+# ---------------------
 st.markdown("---")
-st.markdown(
-    "<p style='text-align: center;'>Built with ❤️ using Streamlit & TensorFlow | By <b>Anam Jafar</b></p>",
-    unsafe_allow_html=True
-)
+st.markdown("<p style='text-align:center;'>Built with ❤️ using Streamlit & TensorFlow | By <b>Anam Jafar</b></p>", unsafe_allow_html=True)