Add handwritten digit recognizer with MLP classifier

- Drawable canvas for user input (streamlit-drawable-canvas)
- MLP model trained on sklearn digits dataset (97.78% accuracy)
- Real-time prediction with confidence visualization
- Plotly bar chart showing probabilities for all 10 digits

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Dockerfile

@@ -6,6 +6,8 @@ RUN apt-get update && apt-get install -y \
     build-essential \
     curl \
     git \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
     && rm -rf /var/lib/apt/lists/*
 
 COPY requirements.txt ./
@@ -17,4 +19,4 @@ EXPOSE 8501
 
 HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
 
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -1,19 +1,39 @@
 ---
-title: Another Demo
-emoji: 🚀
-colorFrom: red
-colorTo: red
+title: Digit Recognizer
+emoji: ✏️
+colorFrom: blue
+colorTo: purple
 sdk: docker
 app_port: 8501
 tags:
 - streamlit
+- machine-learning
+- digit-recognition
 pinned: false
-short_description: Streamlit template space
+short_description: Draw a digit and watch AI recognize it!
 ---
 
-# Welcome to Streamlit!
+# ✏️ Handwritten Digit Recognizer
 
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
+An interactive machine learning demo where you can draw digits and watch an AI model recognize them in real-time!
 
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+## Features
+
+- **Drawing Canvas**: Draw digits (0-9) with your mouse or touchscreen
+- **Real-time Prediction**: See the model's prediction instantly
+- **Confidence Visualization**: View probability scores for all 10 digits
+- **Easy Reset**: Clear the canvas and try again
+
+## How It Works
+
+1. Draw a digit (0-9) on the canvas
+2. Click "Predict" to see the model's prediction
+3. View the confidence chart showing probabilities for each digit
+4. Click "Clear Canvas" to draw another digit
+
+## Technical Details
+
+- **Model**: MLP Neural Network trained on sklearn's digits dataset
+- **Input**: 8x8 grayscale images (scaled from canvas)
+- **Accuracy**: ~97% on test set
+- **Framework**: Streamlit with streamlit-drawable-canvas

requirements.txt

@@ -1,3 +1,8 @@
-altair
+streamlit
 pandas
-streamlit
+numpy
+scikit-learn
+joblib
+plotly
+streamlit-drawable-canvas
+Pillow

src/model/digit_classifier.joblib

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2182dbf208c3ea6c5e2384366e5496bea047e4ad286a2e300afb14f431c52376
+size 560992

src/streamlit_app.py

@@ -1,40 +1,136 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import numpy as np
+from PIL import Image
+import joblib
+import os
+import plotly.graph_objects as go
+from streamlit_drawable_canvas import st_canvas
+
+# Page config
+st.set_page_config(
+    page_title="Digit Recognizer",
+    page_icon="✏️",
+    layout="centered"
+)
+
+# Load model
+@st.cache_resource
+def load_model():
+    model_path = os.path.join(os.path.dirname(__file__), "model", "digit_classifier.joblib")
+    return joblib.load(model_path)
+
+model = load_model()
+
+# Title and instructions
+st.title("✏️ Handwritten Digit Recognizer")
+st.markdown("""
+Draw a digit (0-9) in the canvas below and click **Predict** to see what the AI thinks it is!
+
+*Tip: Draw the digit large and centered for best results.*
+""")
+
+# Create two columns for layout
+col1, col2 = st.columns([1, 1])
+
+with col1:
+    st.subheader("Draw Here")
+
+    # Drawing canvas
+    canvas_result = st_canvas(
+        fill_color="black",
+        stroke_width=20,
+        stroke_color="white",
+        background_color="black",
+        height=280,
+        width=280,
+        drawing_mode="freedraw",
+        key="canvas",
+    )
+
+    # Buttons
+    btn_col1, btn_col2 = st.columns(2)
+    with btn_col1:
+        predict_btn = st.button("🔮 Predict", type="primary", use_container_width=True)
+    with btn_col2:
+        if st.button("🗑️ Clear Canvas", use_container_width=True):
+            st.rerun()
+
+with col2:
+    st.subheader("Prediction")
+
+    # Placeholder for results
+    result_container = st.container()
+
+    if predict_btn and canvas_result.image_data is not None:
+        # Process the canvas image
+        img_array = canvas_result.image_data
+
+        # Check if canvas has any drawing (not all black)
+        if np.sum(img_array[:, :, :3]) > 0:
+            # Convert to PIL Image and process
+            img = Image.fromarray(img_array.astype('uint8'), 'RGBA')
+            img = img.convert('L')  # Convert to grayscale
+
+            # Resize to 8x8 (sklearn digits format)
+            img = img.resize((8, 8), Image.Resampling.LANCZOS)
+
+            # Convert to numpy array and normalize to 0-16 range (sklearn format)
+            img_array = np.array(img)
+            img_array = (img_array / 255.0) * 16
+
+            # Flatten for prediction
+            img_flat = img_array.flatten().reshape(1, -1)
+
+            # Get prediction and probabilities
+            prediction = model.predict(img_flat)[0]
+            probabilities = model.predict_proba(img_flat)[0]
+
+            with result_container:
+                # Display large prediction
+                st.markdown(f"""
+                <div style="text-align: center; padding: 20px; background-color: #1e1e1e; border-radius: 10px; margin-bottom: 20px;">
+                    <h1 style="font-size: 72px; margin: 0; color: #4CAF50;">{prediction}</h1>
+                    <p style="font-size: 18px; color: #888;">Confidence: {probabilities[prediction]*100:.1f}%</p>
+                </div>
+                """, unsafe_allow_html=True)
+
+                # Probability chart
+                st.subheader("Confidence Scores")
+
+                # Create horizontal bar chart with Plotly
+                fig = go.Figure(go.Bar(
+                    x=probabilities * 100,
+                    y=[str(i) for i in range(10)],
+                    orientation='h',
+                    marker_color=['#4CAF50' if i == prediction else '#2196F3' for i in range(10)],
+                    text=[f'{p*100:.1f}%' for p in probabilities],
+                    textposition='outside'
+                ))
+
+                fig.update_layout(
+                    xaxis_title="Confidence (%)",
+                    yaxis_title="Digit",
+                    height=400,
+                    margin=dict(l=20, r=20, t=20, b=40),
+                    xaxis=dict(range=[0, 105]),
+                    paper_bgcolor='rgba(0,0,0,0)',
+                    plot_bgcolor='rgba(0,0,0,0)',
+                    font=dict(color='white')
+                )
+
+                st.plotly_chart(fig, use_container_width=True)
+        else:
+            with result_container:
+                st.info("👆 Draw a digit on the canvas first!")
+    else:
+        with result_container:
+            st.info("👆 Draw a digit on the canvas and click **Predict**")
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# Footer
+st.markdown("---")
+st.markdown("""
+<div style="text-align: center; color: #888; font-size: 14px;">
+    <p>Built with Streamlit | Model trained on sklearn digits dataset (8x8 images)</p>
+    <p>The model is a Multi-Layer Perceptron (MLP) with ~97% accuracy</p>
+</div>
+""", unsafe_allow_html=True)

train_model.py

@@ -0,0 +1,74 @@
+"""
+Train a digit classifier on sklearn's digits dataset.
+Run this script locally to generate the model file.
+
+Usage:
+    python train_model.py
+"""
+
+import os
+from sklearn.datasets import load_digits
+from sklearn.model_selection import train_test_split
+from sklearn.neural_network import MLPClassifier
+from sklearn.metrics import accuracy_score, classification_report
+import joblib
+
+
+def train_digit_classifier():
+    """Train an MLP classifier on the sklearn digits dataset (8x8 images)."""
+
+    print("Loading digits dataset...")
+    digits = load_digits()
+    X, y = digits.data, digits.target
+
+    print(f"Dataset shape: {X.shape}")
+    print(f"Number of classes: {len(set(y))}")
+    print(f"Image size: 8x8 (64 features)")
+
+    # Split data
+    X_train, X_test, y_train, y_test = train_test_split(
+        X, y, test_size=0.2, random_state=42, stratify=y
+    )
+
+    print(f"\nTraining samples: {len(X_train)}")
+    print(f"Test samples: {len(X_test)}")
+
+    # Train MLP classifier
+    print("\nTraining MLP classifier...")
+    model = MLPClassifier(
+        hidden_layer_sizes=(128, 64),
+        activation='relu',
+        max_iter=500,
+        random_state=42,
+        verbose=True
+    )
+
+    model.fit(X_train, y_train)
+
+    # Evaluate
+    y_pred = model.predict(X_test)
+    accuracy = accuracy_score(y_test, y_pred)
+
+    print(f"\n{'='*50}")
+    print(f"Test Accuracy: {accuracy:.4f} ({accuracy*100:.2f}%)")
+    print(f"{'='*50}")
+    print("\nClassification Report:")
+    print(classification_report(y_test, y_pred))
+
+    # Save model
+    model_dir = os.path.join(os.path.dirname(__file__), "src", "model")
+    os.makedirs(model_dir, exist_ok=True)
+    model_path = os.path.join(model_dir, "digit_classifier.joblib")
+
+    joblib.dump(model, model_path)
+    print(f"\nModel saved to: {model_path}")
+
+    # Check file size
+    file_size = os.path.getsize(model_path) / 1024
+    print(f"Model file size: {file_size:.2f} KB")
+
+    return model
+
+
+if __name__ == "__main__":
+    train_digit_classifier()