Update Home.py

Home.py

@@ -4,102 +4,102 @@ from keras.models import load_model
 import numpy as np
 import cv2
 
-# Set full-screen dark theme
-st.set_page_config(page_title="🧠 Digit Recognizer", layout="centered")
+# --- Page Config ---
+st.set_page_config(page_title="Digit AI", layout="centered")
 
-# Inject custom glowing CSS styles
+# --- Custom UI Styling ---
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Poppins:wght@400;600&display=swap');
+@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: 'Poppins', sans-serif;
-    background: linear-gradient(to right, #141e30, #243b55);
+    font-family: 'Outfit', sans-serif;
+    background: linear-gradient(to right, #090909, #1f1c2c);
     color: white;
 }
 
 h1 {
     font-family: 'Orbitron', sans-serif;
-    color: #00ffff;
-    text-align: center;
+    color: #00fff7;
     font-size: 3em;
-    text-shadow: 0px 0px 10px rgba(0, 255, 255, 0.9);
-    margin-bottom: 5px;
+    text-align: center;
+    text-shadow: 0 0 10px #00fff7;
+    margin-bottom: 0;
 }
 
-.subtext {
+p {
     text-align: center;
-    font-size: 18px;
-    color: #dddddd;
+    font-size: 1.1em;
+    color: #ccc;
+    margin-top: 0;
     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;
+.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 {
-    margin-top: 25px;
-    padding: 15px;
     font-size: 2.2em;
-    font-weight: bold;
-    color: #00ffff;
-    background: rgba(255, 255, 255, 0.07);
-    border-radius: 12px;
+    font-weight: 600;
     text-align: center;
-    box-shadow: 0 0 12px rgba(0,255,255,0.4);
+    color: #00fff7;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 0 15px rgba(0,255,255,0.4);
 }
 
 .emoji {
     text-align: center;
     font-size: 3em;
-    margin-top: 15px;
+    margin-top: 10px;
 }
 </style>
 """, unsafe_allow_html=True)
 
-# Title & subtitle
+# --- Title + Description ---
 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)
+st.markdown("<p>Draw a digit (0–9) below and see what the AI thinks it is!</p>", unsafe_allow_html=True)
 
-# Sidebar - Drawing settings
-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")
-realtime_update = st.sidebar.checkbox("Update in Realtime", True)
+realtime_update = st.sidebar.checkbox("Update Realtime", True)
 
-# Load model
+# --- Load Model ---
 @st.cache_resource
 def load_mnist_model():
     return load_model("digit_recognization.keras")
 
 model = load_mnist_model()
 
-# 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)
-
-# Prediction
+# --- Canvas Drawing Area ---
+st.markdown('<div class="canvas-wrapper">', unsafe_allow_html=True)
+canvas_result = st_canvas(
+    fill_color="rgba(255, 255, 255, 0.05)",
+    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)
+
+# --- 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))
@@ -109,7 +109,7 @@ if canvas_result.image_data is not None:
     prediction = model.predict(img_reshaped)
     predicted_digit = np.argmax(prediction)
 
-    # 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)
 
+