Update app.py

app.py

@@ -4,58 +4,59 @@ from streamlit_drawable_canvas import st_canvas
 from keras.models import load_model
 import numpy as np
 
-# Page setup
+# Page configuration
 st.set_page_config(page_title="Digit Recognizer", layout="centered")
 
-# Load the trained MNIST model
+# Load trained model (preferably CNN-based on MNIST)
 @st.cache_resource
 def load_mnist_model():
-    return load_model("mnist_model.keras")  # Ensure this model is accurate (CNN preferred)
+    return load_model("mnist_model.keras")
 
 model = load_mnist_model()
 
-# Styling
+# Custom CSS Styling
 st.markdown("""
     <style>
     .main-title {
         text-align: center;
-        font-size: 36px;
+        font-size: 40px;
+        font-weight: 700;
         color: #2c3e50;
-        margin-bottom: 10px;
     }
     .subtitle {
         text-align: center;
         font-size: 18px;
         color: #555;
+        margin-bottom: 20px;
     }
     .result-box {
-        background-color: #e8f5e9;
-        padding: 10px;
-        border-radius: 8px;
-        margin-top: 15px;
+        background-color: #f0f9ff;
+        border: 2px solid #3498db;
+        border-radius: 10px;
+        padding: 15px;
         text-align: center;
     }
     .digit {
-        font-size: 28px;
-        color: #2e7d32;
+        font-size: 36px;
+        color: #2c3e50;
         font-weight: bold;
     }
     </style>
 """, unsafe_allow_html=True)
 
-st.markdown('<div class="main-title">✏️ Draw a Digit</div>', unsafe_allow_html=True)
-st.markdown('<div class="subtitle">Draw a digit (0-9) and get an accurate prediction</div>', unsafe_allow_html=True)
+st.markdown('<div class="main-title">✍️ Digit Recognizer</div>', unsafe_allow_html=True)
+st.markdown('<div class="subtitle">Draw any digit (0-9) below and let the model predict it</div>', unsafe_allow_html=True)
 
-# Sidebar settings
-st.sidebar.header("Canvas Settings")
+# Sidebar controls
+st.sidebar.header("🛠️ Canvas Settings")
 stroke_width = st.sidebar.slider("Stroke Width", 5, 25, 15)
 stroke_color = st.sidebar.color_picker("Stroke Color", "#000000")
 bg_color = st.sidebar.color_picker("Background Color", "#FFFFFF")
 realtime = st.sidebar.checkbox("Update in Realtime", True)
 
-# Canvas
+# Drawing canvas
 canvas_result = st_canvas(
-    fill_color="rgba(255, 165, 0, 0.3)",
+    fill_color="rgba(255, 165, 0, 0.3)",  # Transparent fill
     stroke_width=stroke_width,
     stroke_color=stroke_color,
     background_color=bg_color,
@@ -66,39 +67,35 @@ canvas_result = st_canvas(
     key="canvas",
 )
 
-# Preprocessing function
+# Preprocess drawing like MNIST
 def preprocess_drawn_image(img_data):
-    img_gray = cv2.cvtColor(img_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
-    img_gray = 255 - img_gray  # Invert for white digit on black
+    gray = cv2.cvtColor(img_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
+    gray = 255 - gray  # Invert to white digit on black
+    _, thresh = cv2.threshold(gray, 50, 255, cv2.THRESH_BINARY)
 
-    # Threshold to remove background noise
-    _, img_thresh = cv2.threshold(img_gray, 50, 255, cv2.THRESH_BINARY)
-
-    # Find contours to crop the digit
-    contours, _ = cv2.findContours(img_thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
-    if len(contours) == 0:
+    contours, _ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    if not contours:
         return None
 
     x, y, w, h = cv2.boundingRect(contours[0])
-    digit_crop = img_thresh[y:y+h, x:x+w]
+    digit = thresh[y:y+h, x:x+w]
 
-    # Fit into square and resize to 20x20
-    max_side = max(w, h)
-    square_digit = np.zeros((max_side, max_side), dtype=np.uint8)
-    x_offset = (max_side - w) // 2
-    y_offset = (max_side - h) // 2
-    square_digit[y_offset:y_offset+h, x_offset:x_offset+w] = digit_crop
-    digit_resized = cv2.resize(square_digit, (20, 20))
+    # Center the digit in a square image
+    max_dim = max(w, h)
+    square = np.zeros((max_dim, max_dim), dtype=np.uint8)
+    x_offset = (max_dim - w) // 2
+    y_offset = (max_dim - h) // 2
+    square[y_offset:y_offset+h, x_offset:x_offset+w] = digit
 
-    # Place in center of 28x28 image
-    final_img = np.zeros((28, 28), dtype=np.uint8)
-    final_img[4:24, 4:24] = digit_resized
+    # Resize to 20x20, then embed in 28x28
+    resized = cv2.resize(square, (20, 20))
+    final = np.zeros((28, 28), dtype=np.uint8)
+    final[4:24, 4:24] = resized
 
-    # Normalize
-    final_img = final_img / 255.0
-    return final_img.reshape(1, 28, 28, 1)
+    final = final / 255.0
+    return final.reshape(1, 28, 28, 1)
 
-# Prediction
+# Predict and display result
 if canvas_result.image_data is not None:
     processed_img = preprocess_drawn_image(canvas_result.image_data)
 
@@ -117,4 +114,3 @@ if canvas_result.image_data is not None:
         """, unsafe_allow_html=True)
     else:
         st.warning("Couldn't detect a digit. Please try drawing again.")
-