Update app.py

app.py

@@ -1,18 +1,18 @@
-import streamlit as st
-import numpy as np
-import cv2
-from PIL import Image
-from tensorflow.keras.models import load_model
-from streamlit_drawable_canvas import st_canvas
-
-# ---- Page Config ----
+import streamlit as st # makes the web app
+import numpy as np #handles math & image arrays
+import cv2 #image processing(resize, grayscale)
+from PIL import Image # image handling, works with uploaded images
+from tensorflow.keras.models import load_model #loads the trained mnist model
+from streamlit_drawable_canvas import st_canvas #Imports the drawable canvas component for Streamlit which lets you draw digits inside app
+
+#This sets up the web app title, icon, and layout.
 st.set_page_config(
     page_title="Digit Recognition App",
     page_icon="🔢",
     layout="wide"
 )
 
-# ---- Custom Background ----
+# The CSS part changes the background color gradient
 st.markdown(
     """
     <style>
@@ -24,27 +24,27 @@ st.markdown(
     unsafe_allow_html=True
 )
 
-# ---- Load Model ----
-@st.cache_resource
-def load_cnn_model():
-    return load_model("mnist_cnn.h5")
+# This loads the trained model (mnist_cnn.h5) that recognizes digits.
+@st.cache_resource #makes sure the model loads only once, not every time you interact.
+def load_cnn_model(): 
+    return load_model("mnist_cnn.h5") #loads the saved model file mnist_cnn.h5.
 
-model = load_cnn_model()
+model = load_cnn_model() #stores the loaded model in the variable model so you can call it later.
 
 # ---- Preprocessing Helpers ----
-def preprocess_pil_file(file_or_pil_image):
+def preprocess_pil_file(file_or_pil_image):  #Defines a function which accepts either a file or a Image.
     if not isinstance(file_or_pil_image, Image.Image):
-        img = Image.open(file_or_pil_image)
+        img = Image.open(file_or_pil_image) #If the input is not already a PIL Image object, use Image.open() to load it. Otherwise, use it directly.
     else:
-        img = file_or_pil_image
+        img = file_or_pil_image #PIL = Python Imaging Library .It’s a library that helps you open, edit, and save images in Python.
 
-    img = img.convert('L').resize((28, 28))
-    arr = np.array(img).astype('float32') / 255.0
+    img = img.convert('L').resize((28, 28)) # Convert to grayscale & resize
+    arr = np.array(img).astype('float32') / 255.0 # Normalize (0–1 scale)
 
     if arr.mean() > 0.5:  # invert if background is white
         arr = 1.0 - arr
 
-    arr = arr.reshape(1, 28, 28, 1).astype('float32')
+    arr = arr.reshape(1, 28, 28, 1).astype('float32') #Reshape to fit model input.
     return arr, Image.fromarray((arr[0, :, :, 0] * 255).astype('uint8'))
 
 def preprocess_canvas_image(image_data):
@@ -60,7 +60,7 @@ def preprocess_canvas_image(image_data):
         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)
+        gray = cv2.cvtColor(img_uint8, cv2.COLOR_RGB2GRAY) # convert canvas to grayscale
 
     small = cv2.resize(gray, (28, 28), interpolation=cv2.INTER_AREA).astype('float32') / 255.0
 
@@ -84,8 +84,8 @@ st.sidebar.info(
     "• Predictions show digit + confidence & probability bar chart."
 )
 st.sidebar.markdown("---")
-st.sidebar.write("👩‍💻 **About**: Built with ❤️ by **Anam Jafar**")
-st.sidebar.write("[🔗 LinkedIn](https://www.linkedin.com/in/anam-jafar)")
+st.sidebar.write("👩‍💻 **About**: Built with streamlit❤️ by **Anam Jafar**")
+st.sidebar.write("[🔗 LinkedIn](https://www.linkedin.com/in/anam-jafar6/)")
 
 # ---- File Upload ----
 uploaded_files = st.file_uploader(