Update Home.py

Home.py

@@ -4,17 +4,17 @@ from keras.models import load_model
 import numpy as np
 import cv2
 
-# --- Page Config ---
-st.set_page_config(page_title="Digit AI", layout="centered")
+# --- Page Configuration ---
+st.set_page_config(page_title="Digit Recognizer", layout="centered")
 
-# --- Custom UI Styling ---
+# --- Custom CSS for 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, #090909, #1f1c2c);
+    background: linear-gradient(to right, #0f0f0f, #1e1e2e);
     color: white;
 }
 
@@ -23,27 +23,31 @@ h1 {
     color: #00fff7;
     font-size: 3em;
     text-align: center;
-    text-shadow: 0 0 10px #00fff7;
-    margin-bottom: 0;
+    text-shadow: 0 0 15px #00fff7;
+    margin-bottom: 10px;
 }
 
 p {
     text-align: center;
     font-size: 1.1em;
-    color: #ccc;
+    color: #bbbbbb;
     margin-top: 0;
-    margin-bottom: 30px;
+    margin-bottom: 35px;
 }
 
-.canvas-wrapper {
+.center-wrapper {
     display: flex;
     justify-content: center;
-    background: rgba(255,255,255,0.05);
+    align-items: center;
+    padding: 30px 0;
+}
+
+.canvas-container {
+    background: rgba(255, 255, 255, 0.05);
     padding: 25px;
-    border-radius: 25px;
-    box-shadow: 0 8px 24px rgba(0,255,255,0.1);
+    border-radius: 20px;
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
     backdrop-filter: blur(10px);
-    margin-bottom: 30px;
 }
 
 .prediction-box {
@@ -54,7 +58,8 @@ p {
     background: rgba(255, 255, 255, 0.05);
     padding: 20px;
     border-radius: 15px;
-    box-shadow: 0 0 15px rgba(0,255,255,0.4);
+    box-shadow: 0 0 12px rgba(0,255,255,0.4);
+    margin-top: 25px;
 }
 
 .emoji {
@@ -65,29 +70,30 @@ p {
 </style>
 """, unsafe_allow_html=True)
 
-# --- Title + Description ---
+# --- App Title ---
 st.markdown("<h1>Digit Recognizer</h1>", 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)
+st.markdown("<p>Draw a digit from 0–9 below. The AI will predict what you wrote.</p>", unsafe_allow_html=True)
 
-# --- Sidebar Settings ---
-st.sidebar.markdown("### ✏️ Drawing Settings")
-drawing_mode = st.sidebar.selectbox("Tool", ("freedraw", "line", "rect", "circle", "transform"))
+# --- 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 Realtime", True)
 
-# --- Load Model ---
+# --- Load Digit Recognition Model ---
 @st.cache_resource
 def load_mnist_model():
     return load_model("digit_recognization.keras")
 
 model = load_mnist_model()
 
-# --- Canvas Drawing Area ---
-st.markdown('<div class="canvas-wrapper">', unsafe_allow_html=True)
+# --- Centered Canvas Pad ---
+st.markdown('<div class="center-wrapper"><div class="canvas-container">', unsafe_allow_html=True)
+
 canvas_result = st_canvas(
-    fill_color="rgba(255, 255, 255, 0.05)",
+    fill_color="rgba(255, 255, 255, 0.1)",
     stroke_width=stroke_width,
     stroke_color=stroke_color,
     background_color=bg_color,
@@ -97,9 +103,10 @@ canvas_result = st_canvas(
     drawing_mode=drawing_mode,
     key="canvas"
 )
-st.markdown('</div>', unsafe_allow_html=True)
 
-# --- Prediction Display ---
+st.markdown('</div></div>', unsafe_allow_html=True)
+
+# --- Prediction Logic & 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))
@@ -111,5 +118,3 @@ 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)
-
-