Update Home.py

Home.py

@@ -1,109 +1,92 @@
 import streamlit as st
 from streamlit_drawable_canvas import st_canvas
-from keras.models import load_model
+from tensorflow.keras.models import load_model
 import numpy as np
 import cv2
 
-# Page configuration
-st.set_page_config(page_title="DigitGlow - AI Digit Identifier", layout="centered")
+# App configuration
+st.set_page_config(page_title="DigitSketch - AI Digit Classifier", layout="centered")
 
-# Custom CSS Styling
-st.markdown(
-    """
+# Custom styling with CSS
+st.markdown("""
     <style>
-        .stApp {
-            background-color: #1e1e1e;
-            font-family: 'Segoe UI', sans-serif;
-        }
-        .title-box {
-            text-align: center;
-            padding: 20px;
-        }
-        .main-title {
-            font-size: 3em;
-            font-weight: bold;
-            color: #00ffcc;
-            text-shadow: 1px 1px 5px #00ffff;
-        }
-        .sub-title {
-            font-size: 1.2em;
-            color: #ccc;
-            font-style: italic;
-        }
-        .prediction-box {
-            text-align: center;
-            margin-top: 30px;
-        }
-        .prediction-text {
-            font-size: 3em;
-            font-weight: bold;
-            color: #ff4d4d;
-            text-shadow: 2px 2px 8px #ff0000;
-        }
-        .canvas-title {
-            text-align: center;
-            color: #00ccff;
-            font-size: 1.2em;
-            margin-bottom: 10px;
-        }
-        .sidebar .sidebar-content {
-            background-color: #2c2c2c;
-        }
+    .stApp {
+        background-color: #121212;
+        color: #f0f0f0;
+    }
+    h1 {
+        color: #00ffff;
+        text-align: center;
+        text-shadow: 1px 1px 8px #00ffff;
+    }
+    .digit-result {
+        text-align: center;
+        font-size: 2.5em;
+        font-weight: bold;
+        color: #ff4d4d;
+        text-shadow: 1px 1px 10px #ff4d4d;
+        margin-top: 20px;
+    }
+    .canvas-title {
+        text-align: center;
+        color: #80dfff;
+        font-size: 1.2em;
+        margin-bottom: 10px;
+    }
     </style>
-    <div class="title-box">
-        <div class="main-title">DigitGlow</div>
-        <div class="sub-title">AI-Powered Handwritten Digit Recognition</div>
-    </div>
-    <hr style="border-top: 1px solid #555;">
-    """,
-    unsafe_allow_html=True
-)
+""", unsafe_allow_html=True)
+
+# App title and description
+st.title("🎨 DigitSketch: AI Handwritten Digit Classifier")
+st.markdown("Draw a digit between **0–9** below, then click **🔮 Predict** to see what the AI thinks it is!")
 
-# Sidebar - Drawing Settings
-st.sidebar.header("✏️ Canvas Controls")
-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("Canvas background:", "#000000")
-realtime_update = st.sidebar.checkbox("Update in real-time", True)
+# Sidebar: Drawing settings
+st.sidebar.header("🛠️ Drawing Controls")
+drawing_mode = st.sidebar.selectbox("Choose a drawing tool:", ("freedraw", "line", "rect", "circle", "transform"))
+stroke_width = st.sidebar.slider("Pen thickness", 1, 25, 10)
+stroke_color = st.sidebar.color_picker("Pen color", "#FFFFFF")
+bg_color = st.sidebar.color_picker("Canvas background", "#000000")
+realtime_update = st.sidebar.checkbox("Live update", True)
 
-# Load Model
+# Load the trained model
 @st.cache_resource
-def load_mnist_model():
-    return load_model("handwritten_digit_recognition.keras")
+def load_digit_model():
+    return load_model("digit_reco.keras")
 
-model = load_mnist_model()
+model = load_digit_model()
 
-# Layout columns
-col1, col2 = st.columns([1, 1])
+# Canvas drawing area
+st.markdown('<div class="canvas-title">✏️ Draw your digit below</div>', unsafe_allow_html=True)
 
-with col1:
-    st.markdown('<div class="canvas-title">🖌️ Draw a digit below:</div>', unsafe_allow_html=True)
-    canvas_result = st_canvas(
-        fill_color="rgba(255, 255, 255, 1)",
-        stroke_width=stroke_width,
-        stroke_color=stroke_color,
-        background_color=bg_color,
-        update_streamlit=realtime_update,
-        height=280,
-        width=250,
-        drawing_mode=drawing_mode,
-        key="canvas",
-    )
+canvas_result = st_canvas(
+    fill_color="rgba(255, 255, 255, 0.0)",  # Transparent fill
+    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",
+)
 
-with col2:
+# Predict Button
+if st.button("🔮 Predict"):
     if canvas_result.image_data is not None:
-        st.image(canvas_result.image_data, caption="Your Drawing", width=280)
-        # Preprocess image
+        st.image(canvas_result.image_data, caption="🖼️ Your Drawing", use_container_width=True)
+
+        # Image preprocessing
         img = cv2.cvtColor(canvas_result.image_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
-        img = 255 - img
+        img = 255 - img  # Invert for white digit on black
         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)
 
-        # Display Prediction
-        st.markdown(
-            f'<div class="prediction-box"><div class="prediction-text">Prediction: {np.argmax(prediction)}</div></div>',
-            unsafe_allow_html=True,
-        )
+        # Display result
+        st.markdown(f'<div class="digit-result">Predicted Digit: {predicted_digit}</div>', unsafe_allow_html=True)
+    else:
+        st.warning("⚠️ Please draw something before clicking Predict.")