Update Home.py

Home.py

@@ -4,21 +4,78 @@ from keras.models import load_model
 import numpy as np
 import cv2
 
-drawing_mode = st.sidebar.selectbox("Drawing tool:", ("freedraw", "line", "rect", "circle", "transform"))
-stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 10)
-stroke_color = st.sidebar.color_picker("Stroke color hex: ", "#FFFFFF")  
-bg_color = st.sidebar.color_picker("Background color hex: ", "#000000")  
-bg_image = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
-realtime_update = st.sidebar.checkbox("Update in realtime", True)
+# --------- Page Setup ---------
+st.set_page_config(page_title="🎨 Digit Recognizer", layout="centered")
 
+# --------- Custom CSS Styling ---------
+st.markdown("""
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Poppins:wght@300;400;600&display=swap');
+
+    html, body, [class*="css"] {
+        font-family: 'Poppins', sans-serif;
+        background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
+        color: white;
+    }
+
+    h1 {
+        font-family: 'Orbitron', sans-serif;
+        font-size: 3em;
+        color: #00FFFF;
+        text-align: center;
+        text-shadow: 0px 0px 12px rgba(0, 255, 255, 0.8);
+    }
+
+    .section {
+        background: rgba(255, 255, 255, 0.07);
+        padding: 20px;
+        border-radius: 15px;
+        box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.2);
+        margin-bottom: 30px;
+    }
+
+    .prediction-box {
+        font-size: 2em;
+        font-weight: bold;
+        text-align: center;
+        color: #00ffff;
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 15px;
+        border-radius: 10px;
+        margin-top: 20px;
+        box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.4);
+    }
+
+    .emoji {
+        font-size: 3em;
+        text-align: center;
+        margin-top: 10px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+# --------- Title ---------
+st.markdown("<h1>Digit Recognizer 🔢✨</h1>", unsafe_allow_html=True)
+st.markdown("<div style='text-align:center; font-size:18px;'>Draw a digit from 0–9 and let the AI predict it!</div>", unsafe_allow_html=True)
+
+# --------- Sidebar: Drawing Settings ---------
+st.sidebar.title("🛠️ Tool Settings")
+drawing_mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line", "rect", "circle", "transform"))
+stroke_width = st.sidebar.slider("Stroke Width", 1, 25, 10)
+stroke_color = st.sidebar.color_picker("Stroke Color", "#FFFFFF")
+bg_color = st.sidebar.color_picker("Background Color", "#000000")
+realtime_update = st.sidebar.checkbox("Update in Realtime", True)
+
+# --------- Load Model ---------
 @st.cache_resource
 def load_mnist_model():
     return load_model("digit_recognization.keras")
 
 model = load_mnist_model()
 
+# --------- Canvas ---------
 canvas_result = st_canvas(
-    fill_color="rgba(255, 165, 0, 0.3)",
+    fill_color="rgba(255, 255, 255, 0.3)",
     stroke_width=stroke_width,
     stroke_color=stroke_color,
     background_color=bg_color,
@@ -26,15 +83,31 @@ canvas_result = st_canvas(
     height=280,
     width=280,
     drawing_mode=drawing_mode,
-    key="canvas",
+    key="canvas"
 )
 
-
+# --------- Prediction ---------
 if canvas_result.image_data is not None:
-    st.image(canvas_result.image_data, caption="Original Drawing")
-    img = cv2.cvtColor(canvas_result.image_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
-    img_resized = cv2.resize(img, (28, 28))
-    img_normalized = img_resized / 255.0
-    img_resh=img_normalized.reshape((1,28,28))
-    prediction = model.predict(img_resh)
-    st.write("Prediction:", np.argmax(prediction))
+    st.markdown("<div class='section'>", unsafe_allow_html=True)
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.image(canvas_result.image_data, caption="Your Drawing", use_column_width=True)
+
+    with col2:
+        # Preprocess
+        img = cv2.cvtColor(canvas_result.image_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
+        img_resized = cv2.resize(img, (28, 28))
+        img_normalized = img_resized / 255.0
+        img_reshaped = img_normalized.reshape((1, 28, 28))
+
+        # Predict
+        prediction = model.predict(img_reshaped)
+        predicted_digit = np.argmax(prediction)
+
+        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)
+
+    st.markdown("</div>", unsafe_allow_html=True)
+