Update Home.py

Home.py

@@ -4,110 +4,112 @@ from keras.models import load_model
 import numpy as np
 import cv2
 
-# --------- Page Setup ---------
-st.set_page_config(page_title="🎨 Digit Recognizer", layout="centered")
+# Set full-screen dark theme
+st.set_page_config(page_title="🧠 Digit Recognizer", layout="centered")
 
-# --------- Custom CSS Styling ---------
+# Inject custom glowing CSS styles
 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>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Poppins:wght@400;600&display=swap');
+
+html, body, [class*="css"] {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(to right, #141e30, #243b55);
+    color: white;
+}
+
+h1 {
+    font-family: 'Orbitron', sans-serif;
+    color: #00ffff;
+    text-align: center;
+    font-size: 3em;
+    text-shadow: 0px 0px 10px rgba(0, 255, 255, 0.9);
+    margin-bottom: 5px;
+}
+
+.subtext {
+    text-align: center;
+    font-size: 18px;
+    color: #dddddd;
+    margin-bottom: 30px;
+}
+
+.canvas-box {
+    background: rgba(255, 255, 255, 0.08);
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 0 20px rgba(0,255,255,0.2);
+    text-align: center;
+    margin: auto;
+    width: fit-content;
+}
+
+.prediction-box {
+    margin-top: 25px;
+    padding: 15px;
+    font-size: 2.2em;
+    font-weight: bold;
+    color: #00ffff;
+    background: rgba(255, 255, 255, 0.07);
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 0 12px rgba(0,255,255,0.4);
+}
+
+.emoji {
+    text-align: center;
+    font-size: 3em;
+    margin-top: 15px;
+}
+</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)
+# Title & subtitle
+st.markdown("<h1>Digit Recognizer</h1>", unsafe_allow_html=True)
+st.markdown("<div class='subtext'>Draw a digit (0-9) below and let AI guess it!</div>", unsafe_allow_html=True)
 
-# --------- Sidebar: Drawing Settings ---------
-st.sidebar.title("🛠️ Tool Settings")
+# Sidebar - Drawing settings
+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)
 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 ---------
+# 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, 255, 255, 0.3)",
-    stroke_width=stroke_width,
-    stroke_color=stroke_color,
-    background_color=bg_color,
-    update_streamlit=realtime_update,
-    height=280,
-    width=280,
-    drawing_mode=drawing_mode,
-    key="canvas"
-)
-
-# --------- Prediction ---------
-if canvas_result.image_data is not None:
-    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_container_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))
+# Canvas Area
+with st.container():
+    st.markdown("<div class='canvas-box'>", unsafe_allow_html=True)
+    canvas_result = st_canvas(
+        fill_color="rgba(255, 255, 255, 0.3)",
+        stroke_width=stroke_width,
+        stroke_color=stroke_color,
+        background_color=bg_color,
+        update_streamlit=realtime_update,
+        height=280,
+        width=280,
+        drawing_mode=drawing_mode,
+        key="canvas"
+    )
+    st.markdown("</div>", unsafe_allow_html=True)
 
-        # Predict
-        prediction = model.predict(img_reshaped)
-        predicted_digit = np.argmax(prediction)
+# Prediction
+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))
+    img_normalized = img_resized / 255.0
+    img_reshaped = img_normalized.reshape((1, 28, 28))
 
-        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)
+    prediction = model.predict(img_reshaped)
+    predicted_digit = np.argmax(prediction)
 
-    st.markdown("</div>", unsafe_allow_html=True)
+    # Show prediction result
+    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)