Update app.py

app.py

@@ -8,86 +8,104 @@ import numpy as np
 import cv2
 from PIL import Image, ImageOps
 
-# Page config
-st.set_page_config(page_title="Digit Recognizer", layout="centered")
-st.title("✍️ Handwritten Digit Recognizer")
-
-# Sidebar - Drawing options
-st.sidebar.title("🛠 Drawing Settings")
-mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line"))
-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")
-
-# Load trained model
+# Custom styles
+st.markdown("""
+    <style>
+    .big-font {
+        font-size:40px !important;
+        font-weight: bold;
+        color: #5A189A;
+        text-align: center;
+    }
+    .result-box {
+        background-color: #F0EBF8;
+        border-radius: 10px;
+        padding: 20px;
+        text-align: center;
+        font-size: 24px;
+        color: #3C096C;
+        font-weight: bold;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+# App title
+st.markdown('<p class="big-font">✍️ Handwritten Digit Recognizer</p>', unsafe_allow_html=True)
+st.markdown("### 🔢 Draw or Upload a digit and get it recognized by our ML model!")
+
+# Load model
 @st.cache_resource
 def load_mnist_model():
     return load_model("final_model.keras")
 
 model = load_mnist_model()
 
-# Preprocessing Function
+# Preprocessing
 def preprocess(img):
     img = ImageOps.grayscale(img)
     img = img.resize((200, 200))
     img = np.array(img)
-
-    # Invert if background is light
     if np.mean(img) > 127:
         img = 255 - img
-
-    # Thresholding
     _, img = cv2.threshold(img, 100, 255, cv2.THRESH_BINARY)
-
-    # Find bounding box of the digit
     coords = cv2.findNonZero(img)
     if coords is not None:
         x, y, w, h = cv2.boundingRect(coords)
         digit = img[y:y+h, x:x+w]
     else:
         return np.zeros((1, 28, 28), dtype="float32")
-
-    # Resize and pad
     digit = cv2.resize(digit, (20, 20), interpolation=cv2.INTER_AREA)
     digit = np.pad(digit, ((4, 4), (4, 4)), mode="constant", constant_values=0)
-
-    # Normalize
     digit = digit.astype("float32") / 255.0
     digit = digit.reshape(1, 28, 28)
     return digit
 
-# Upload image
-st.subheader("📤 Upload an Image")
-uploaded_file = st.file_uploader("Choose a digit image...", type=["jpg", "png"])
+# Sidebar settings
+st.sidebar.title("🎨 Drawing Settings")
+mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line"))
+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")
 
-# Canvas drawing
-st.subheader("🖌️ Draw a Digit")
-canvas_result = st_canvas(
-    stroke_width=stroke_width,
-    stroke_color=stroke_color,
-    background_color=bg_color,
-    height=200,
-    width=200,
-    drawing_mode=mode,
-    key="canvas",
-)
+# Tabs for draw vs upload
+tab1, tab2 = st.tabs(["🖌️ Draw Digit", "📤 Upload Image"])
 
-# Get input image from upload or canvas
 input_img = None
-if uploaded_file:
-    input_img = Image.open(uploaded_file).convert("RGB")
-elif canvas_result.image_data is not None:
-    input_img = Image.fromarray(canvas_result.image_data.astype("uint8"))
 
-# Display & Predict
+# Tab 1: Draw
+with tab1:
+    canvas_result = st_canvas(
+        stroke_width=stroke_width,
+        stroke_color=stroke_color,
+        background_color=bg_color,
+        height=200,
+        width=200,
+        drawing_mode=mode,
+        key="canvas",
+    )
+    if canvas_result.image_data is not None:
+        input_img = Image.fromarray(canvas_result.image_data.astype("uint8"))
+
+# Tab 2: Upload
+with tab2:
+    uploaded_file = st.file_uploader("Upload a digit image...", type=["jpg", "png"])
+    if uploaded_file:
+        input_img = Image.open(uploaded_file).convert("RGB")
+
+# Prediction
 if input_img:
-    st.image(input_img, caption="🖼 Input Image", width=150)
+    st.image(input_img, caption="🔍 Input Image", width=150)
 
-    if st.button("🔍 Predict"):
+    if st.button("🎯 Predict"):
         processed = preprocess(input_img)
         prediction = model.predict(processed, verbose=0)
-        digit = np.argmax(prediction)
-        confidence = np.max(prediction) * 100
-
-        st.image(processed.reshape(28, 28), width=150, caption="🧪 Processed Image")
-        st.success(f"🧠 Predicted Digit: **{digit}** with **{confidence:.2f}%** confidence")
+        digit = int(np.argmax(prediction))
+        confidence = float(np.max(prediction)) * 100
+
+        st.image(processed.reshape(28, 28), width=150, caption="🧪 Preprocessed Image")
+        st.markdown(f"""
+            <div class="result-box">
+            🧠 Predicted Digit: <strong>{digit}</strong><br/>
+            🔎 Confidence: <strong>{confidence:.2f}%</strong>
+            </div>
+        """, unsafe_allow_html=True)