Home.py

import streamlit as st
from streamlit_drawable_canvas import st_canvas
from keras.models import load_model
import numpy as np
import cv2

# 🎯 App title and intro
st.set_page_config(page_title="MNIST Digit Recognizer", layout="centered")
st.title("🤖 VisionAI: MNIST Digit Predictor")
st.markdown("Draw a digit (0-9) below and click **Predict** to see the result!")

# 🎨 Sidebar 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", "#000000")
bg_color = st.sidebar.color_picker("Background color", "#FFFFFF")
bg_image = st.sidebar.file_uploader("Background image (optional):", type=["png", "jpg"])
realtime_update = st.sidebar.checkbox("Update in realtime", True)

# 🧠 Load model from local path
@st.cache_resource
def load_mnist_model():
    return load_model("digit_reco.keras")

model = load_mnist_model()

# 🖌️ Canvas setup
canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",  # 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",
)

# 📤 Predict button
if st.button("🔮 Predict"):
    if canvas_result.image_data is not None:
        st.image(canvas_result.image_data, caption="🖼️ Your Drawing", use_container_width=True)  # Updated

        # Preprocess image
        img = cv2.cvtColor(canvas_result.image_data.astype("uint8"), cv2.COLOR_RGBA2GRAY)
        img = 255 - img  # Invert colors
        img_resized = cv2.resize(img, (28, 28))
        img_normalized = img_resized / 255.0
        img_reshaped = img_normalized.reshape((1, 28, 28))

        # Model prediction
        prediction = model.predict(img_reshaped)
        predicted_digit = np.argmax(prediction)

        # Show result
        st.markdown(f"## 🧠 Predicted Digit: **{predicted_digit}**")
    else:
        st.warning("Please draw something before predicting!")