Update Home.py

Home.py

@@ -7,7 +7,7 @@ import cv2
 # --- Page Configuration ---
 st.set_page_config(page_title="Digit Recognizer", layout="centered")
 
-# --- Custom CSS for Styling ---
+# --- Custom CSS Styling ---
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Outfit:wght@300;400;600&display=swap');
@@ -35,21 +35,6 @@ p {
     margin-bottom: 35px;
 }
 
-.center-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 30px 0;
-}
-
-.canvas-container {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 25px;
-    border-radius: 20px;
-    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-}
-
 .prediction-box {
     font-size: 2.2em;
     font-weight: 600;
@@ -70,11 +55,11 @@ p {
 </style>
 """, unsafe_allow_html=True)
 
-# --- App Title ---
+# --- Title + Instructions ---
 st.markdown("<h1>Digit Recognizer</h1>", unsafe_allow_html=True)
 st.markdown("<p>Draw a digit from 0–9 below. The AI will predict what you wrote.</p>", unsafe_allow_html=True)
 
-# --- Sidebar Drawing Settings ---
+# --- Sidebar Controls ---
 st.sidebar.title("✏️ Drawing Settings")
 drawing_mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line", "rect", "circle", "transform"))
 stroke_width = st.sidebar.slider("Stroke Width", 1, 25, 10)
@@ -82,15 +67,24 @@ stroke_color = st.sidebar.color_picker("Stroke Color", "#FFFFFF")
 bg_color = st.sidebar.color_picker("Background Color", "#000000")
 realtime_update = st.sidebar.checkbox("Update Realtime", True)
 
-# --- Load Digit Recognition Model ---
+# --- Load Model ---
 @st.cache_resource
 def load_mnist_model():
     return load_model("digit_recognization.keras")
 
 model = load_mnist_model()
 
-# --- Centered Canvas Pad ---
-st.markdown('<div class="center-wrapper"><div class="canvas-container">', unsafe_allow_html=True)
+# --- Centered Canvas Drawing Pad ---
+st.markdown("""
+<div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
+    <div style="
+        background: rgba(255, 255, 255, 0.05);
+        padding: 25px;
+        border-radius: 20px;
+        box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+    ">
+""", unsafe_allow_html=True)
 
 canvas_result = st_canvas(
     fill_color="rgba(255, 255, 255, 0.1)",
@@ -104,9 +98,9 @@ canvas_result = st_canvas(
     key="canvas"
 )
 
-st.markdown('</div></div>', unsafe_allow_html=True)
+st.markdown("</div></div>", unsafe_allow_html=True)
 
-# --- Prediction Logic & Display ---
+# --- Prediction Output ---
 if canvas_result.image_data is not None:
     img = cv2.cvtColor(canvas_result.image_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
     img_resized = cv2.resize(img, (28, 28))
@@ -118,3 +112,4 @@ if canvas_result.image_data is not None:
 
     st.markdown(f"<div class='prediction-box'>Prediction: {predicted_digit}</div>", unsafe_allow_html=True)
     st.markdown(f"<div class='emoji'>{['0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣'][predicted_digit]}</div>", unsafe_allow_html=True)
+