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

st.set_page_config(
    page_title="Digit Recognizer",
    layout="centered",
    initial_sidebar_state="expanded"
)

st.markdown("""
    <style>
        
        .stApp {
            background-color: white !important;
        }
        
        section[data-testid="stSidebar"] {
            background: linear-gradient(to bottom, #dbeafe, #e0f2fe) !important;
            color: #1e3a8a;
        }
        .stSidebar .css-1cpxqw2, .stSidebar .css-1n76uvr, .stSidebar .st-bx {
            color: #1e3a8a !important;
        }
        label, .stSelectbox label, .stSlider label, .stColorPicker label {
            color: #1e3a8a !important;
            font-weight: bold;
        }
        .css-1d391kg p, .css-1d391kg a {
            color: #1e3a8a !important;
            font-weight: bold;
        }

        
        .main-title {
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            background: linear-gradient(to right, #6dd5ed, #2193b0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 1px 1px 10px rgba(0,0,0,0.1);
        }

        .content-text {
            font-size: 18px;
            color: #334155 !important;
            text-align: center;
        }

        
        .prediction-box {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            padding: 15px;
            margin-top: 30px;
            border-radius: 12px;
            color: #ffffff;
            background: linear-gradient(135deg, #76b852, #8DC26F);
            box-shadow: 0 4px 15px rgba(118, 184, 82, 0.3);
        }
    </style>
""", unsafe_allow_html=True)

st.sidebar.title("🖌️ Drawing Settings")
drawing_mode = st.sidebar.selectbox("Drawing tool:", ("freedraw", "line"))
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("Canvas background", "#FFFFFF")
bg_image = st.sidebar.file_uploader("Upload background image", type=["png", "jpg"])
realtime_update = st.sidebar.checkbox("Update in realtime", True)

@st.cache_resource
def load_mnist_model():
    return load_model("Handwritten_digit.keras")

model = load_mnist_model()

st.markdown("<div class='main-title'>Handwritten Digit Recognizer</div>", unsafe_allow_html=True)
st.markdown("<p class='content-text'>Draw a digit (0–9) and let the ANN model predict it!</p>", unsafe_allow_html=True)
st.markdown("<p class='content-text'>🖍️ Tip: Use a high stroke width for better prediction accuracy.</p>", unsafe_allow_html=True)

st.markdown("</div>", unsafe_allow_html=True)

# -------- Canvas Drawing --------
canvas_result = st_canvas(
    fill_color="rgba(173, 216, 230, 0.3)",
    stroke_width=stroke_width,
    stroke_color=stroke_color,
    background_color=bg_color,
    update_streamlit=realtime_update,
    height=200,
    width=200,
    drawing_mode=drawing_mode,
    key="canvas",
)

st.markdown("</div>", unsafe_allow_html=True)

# -------- Prediction Logic --------
if canvas_result.image_data is not None:
    st.image(canvas_result.image_data, caption="Your Drawing", width=150)

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

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

    st.markdown(f"<div class='prediction-box'>Prediction: {predicted_digit}</div>", unsafe_allow_html=True)