Update Home.py

Home.py

@@ -4,17 +4,17 @@ from keras.models import load_model
 import numpy as np
 import cv2
 
-# --- Page Configuration ---
-st.set_page_config(page_title="Digit Recognizer", layout="centered")
+# --- Page Config ---
+st.set_page_config(page_title="Digit AI", layout="centered")
 
-# --- Custom CSS Styling ---
+# --- Custom UI Styling ---
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Outfit:wght@300;400;600&display=swap');
 
 html, body, [class*="css"] {
     font-family: 'Outfit', sans-serif;
-    background: linear-gradient(to right, #0f0f0f, #1e1e2e);
+    background: linear-gradient(to right, #090909, #1f1c2c);
     color: white;
 }
 
@@ -23,16 +23,27 @@ h1 {
     color: #00fff7;
     font-size: 3em;
     text-align: center;
-    text-shadow: 0 0 15px #00fff7;
-    margin-bottom: 10px;
+    text-shadow: 0 0 10px #00fff7;
+    margin-bottom: 0;
 }
 
 p {
     text-align: center;
     font-size: 1.1em;
-    color: #bbbbbb;
+    color: #ccc;
     margin-top: 0;
-    margin-bottom: 35px;
+    margin-bottom: 30px;
+}
+
+.canvas-wrapper {
+    display: flex;
+    justify-content: center;
+    background: rgba(255,255,255,0.05);
+    padding: 25px;
+    border-radius: 25px;
+    box-shadow: 0 8px 24px rgba(0,255,255,0.1);
+    backdrop-filter: blur(10px);
+    margin-bottom: 30px;
 }
 
 .prediction-box {
@@ -43,8 +54,7 @@ p {
     background: rgba(255, 255, 255, 0.05);
     padding: 20px;
     border-radius: 15px;
-    box-shadow: 0 0 12px rgba(0,255,255,0.4);
-    margin-top: 25px;
+    box-shadow: 0 0 15px rgba(0,255,255,0.4);
 }
 
 .emoji {
@@ -55,13 +65,13 @@ p {
 </style>
 """, unsafe_allow_html=True)
 
-# --- Title + Instructions ---
+# --- Title + Description ---
 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)
+st.markdown("<p>Draw a digit (0–9) below and see what the AI thinks it is!</p>", unsafe_allow_html=True)
 
-# --- Sidebar Controls ---
-st.sidebar.title("✏️ Drawing Settings")
-drawing_mode = st.sidebar.selectbox("Drawing Tool", ("freedraw", "line", "rect", "circle", "transform"))
+# --- Sidebar Settings ---
+st.sidebar.markdown("### ✏️ Drawing Settings")
+drawing_mode = st.sidebar.selectbox("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")
@@ -74,20 +84,10 @@ def load_mnist_model():
 
 model = load_mnist_model()
 
-# --- 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 Drawing Area ---
+st.markdown('<div class="canvas-wrapper">', unsafe_allow_html=True)
 canvas_result = st_canvas(
-    fill_color="rgba(255, 255, 255, 0.1)",
+    fill_color="rgba(255, 255, 255, 0.05)",
     stroke_width=stroke_width,
     stroke_color=stroke_color,
     background_color=bg_color,
@@ -97,10 +97,9 @@ canvas_result = st_canvas(
     drawing_mode=drawing_mode,
     key="canvas"
 )
+st.markdown('</div>', unsafe_allow_html=True)
 
-st.markdown("</div></div>", unsafe_allow_html=True)
-
-# --- Prediction Output ---
+# --- Prediction Display ---
 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))
@@ -113,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)
 
+