Spaces:
Sleeping
Sleeping
| 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) | |
| 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) | |