Update app.py

app.py

@@ -1,62 +1,119 @@
+
+# ---- Import Libraries ----
 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 ----
+st.set_page_config(
+    page_title="Digit Recognition App",
+    page_icon="🔢",
+    layout="wide"
+)
 
-# Load trained model (placed in same directory as app.py)
-@st.cache_resource  # cache so model loads only once
+# ---- Custom Background with CSS ----
+st.markdown(
+    """
+    <style>
+    .stApp {
+        background: linear-gradient(to right, #f8f9fa, #e3f2fd);
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# ---- Load Model ----
+@st.cache_resource
 def load_cnn_model():
     return load_model("mnist_cnn.h5")
 
 model = load_cnn_model()
 
-# ---- PAGE CONFIG ----
-st.set_page_config(
-    page_title="Digit Recognition App",
-    page_icon="✍️",
-    layout="wide"
+# ---- Header ----
+st.markdown(
+    "<h1 style='text-align: center; color: #0D47A1;'> 🔢 Handwritten Digit Recognizer </h1>",
+    unsafe_allow_html=True
 )
-
-# ---- HEADER ----
-st.markdown("<h1 style='text-align: center; color: #4CAF50;'>🖊️ Handwritten Digit Recognizer</h1>", unsafe_allow_html=True)
-st.write("Upload an image of a digit (0–9) and the model will predict it.")
+st.write("Upload or draw a digit (0–9), and the model will predict it.")
 st.markdown("---")
 
-# ---- SIDEBAR ----
+# ---- Sidebar ----
 st.sidebar.header("📌 Instructions")
 st.sidebar.info(
-    "1. Upload a clear image of a single digit (PNG/JPG).\n"
-    "2. Wait for the model to process.\n"
-    "3. See the predicted digit and probabilities."
+    "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."
 )
 
 st.sidebar.markdown("---")
-st.sidebar.write("👩‍💻 **About**: Built with ❤️ using Streamlit & TensorFlow")
-
-# ---- FILE UPLOAD ----
-uploaded_file = st.file_uploader("📂 Upload your digit image", type=["png", "jpg", "jpeg"])
+st.sidebar.write("👩‍💻 **About**: Built with ❤️ by **Anam Jafar**")
+st.sidebar.write("[🔗 Connect on LinkedIn](https://www.linkedin.com/in/anam-jafar)")
 
-if uploaded_file is not None:
-    col1, col2 = st.columns([1,2])  # image left, results right
+# ---- File Upload ----
+uploaded_files = st.file_uploader(
+    "📂 Upload digit images (single or multiple):",
+    type=["png", "jpg", "jpeg"],
+    accept_multiple_files=True
+)
 
-    with col1:
-        st.image(uploaded_file, caption="Uploaded Image", width=150)
+if uploaded_files:
+    st.subheader("📷 Uploaded Images & Predictions")
+    cols = st.columns(len(uploaded_files))  # grid layout
 
-    with col2:
-        # Preprocess
-        img = Image.open(uploaded_file).convert('L')
-        img = img.resize((28,28))
+    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)
+        img_array = img_array.reshape(1, 28, 28, 1)
 
-        # Predict
         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 ----
+st.subheader("🖌️ Draw your digit here:")
+canvas_result = st_canvas(
+    stroke_width=12,
+    stroke_color="#000000",
+    background_color="#FFFFFF",
+    width=280,
+    height=280,
+    drawing_mode="freedraw",
+    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)
 
-        # ---- SHOW RESULT ----
-        st.markdown(f"<h2 style='color: #FF5733;'>Predicted Digit: {pred_label}</h2>", unsafe_allow_html=True)
-        st.bar_chart(pred[0])  # visualize probabilities
+    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
+    )
 
-# ---- FOOTER ----
+    # Probability bar chart
+    st.bar_chart(pred[0])
+
+# ---- Footer ----
 st.markdown("---")
-st.markdown("<p style='text-align: center;'>Built with ❤️ using Streamlit & TensorFlow</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
+)