Update app.py

app.py

@@ -1,8 +1,3 @@
-# -------------------------
-# Handwritten Digit Recognition App (robust preprocessing)
-# Built by Anam Jafar
-# -------------------------
-
 import streamlit as st
 import numpy as np
 import cv2
@@ -10,10 +5,14 @@ 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"
+)
 
-# Background (professional)
+# ---- Custom Background ----
 st.markdown(
     """
     <style>
@@ -25,55 +24,36 @@ st.markdown(
     unsafe_allow_html=True
 )
 
-# Load model (cached)
+# ---- Load Model ----
 @st.cache_resource
 def load_cnn_model():
     return load_model("mnist_cnn.h5")
 
 model = load_cnn_model()
 
-# ---------------------
-# Helper: preprocess PIL file uploads
-# ---------------------
+# ---- Preprocessing Helpers ----
 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
+    arr = np.array(img).astype('float32') / 255.0
 
-    # auto-invert if background is white and strokes are dark (we expect digit bright on dark background)
-    if arr.mean() > 0.5:
+    if arr.mean() > 0.5:  # invert if background is white
         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'))
+    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
+    if img_uint8.shape[2] == 4:  # RGBA
         alpha = img_uint8[..., 3] / 255.0
         rgb = img_uint8[..., :3].astype('float32')
         white = np.ones_like(rgb) * 255.0
@@ -82,10 +62,8 @@ def preprocess_canvas_image(image_data):
     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
 
@@ -93,13 +71,12 @@ def preprocess_canvas_image(image_data):
     display_img = Image.fromarray((small * 255).astype('uint8'))
     return arr, display_img
 
-# ---------------------
-# UI: header & sidebar
-# ---------------------
+# ---- 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). The app will preprocess the image and predict the digit.")
 st.markdown("---")
 
+# ---- Sidebar ----
 st.sidebar.header("📌 Instructions")
 st.sidebar.info(
     "• Upload PNG/JPG or draw a digit.  \n"
@@ -110,9 +87,7 @@ st.sidebar.markdown("---")
 st.sidebar.write("👩‍💻 **About**: Built with ❤️ by **Anam Jafar**")
 st.sidebar.write("[🔗 LinkedIn](https://www.linkedin.com/in/anam-jafar)")
 
-# ---------------------
-# FILE UPLOAD (multiple)
-# ---------------------
+# ---- File Upload ----
 uploaded_files = st.file_uploader(
     "📂 Upload digit images (single or multiple):",
     type=["png", "jpg", "jpeg"],
@@ -122,29 +97,22 @@ uploaded_files = st.file_uploader(
 if uploaded_files:
     st.subheader("📷 Uploaded Images & Predictions")
 
-    # 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)
+            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
+                st.bar_chart(probs)
 
-# ---------------------
-# DRAWING PAD
-# ---------------------
+# ---- Drawing Pad ----
 st.subheader("🖌️ Draw your digit here:")
 canvas_result = st_canvas(
     stroke_width=12,
@@ -159,10 +127,7 @@ canvas_result = st_canvas(
 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)
+        pred = model.predict(arr)
         probs = pred[0]
         label = int(np.argmax(probs))
         conf = float(np.max(probs))
@@ -179,8 +144,9 @@ if canvas_result is not None and canvas_result.image_data is not None:
         st.image(display_img, caption="Preprocessed (28×28) view", width=120)
         st.bar_chart(probs)
 
-# ---------------------
-# Footer
-# ---------------------
+# ---- 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
+)