To build a web application using Angular that allows users to draw a digit (0–9) on the screen, and the system will predict and display the recognized digit using a machine learning model. The goal is to demonstrate how a frontend app can interact with an AI model for real-time predictions.

???? Core Features:

1. Canvas for Drawing:

• A drawing board where users can write digits using a mouse or touch (like a paint tool)
• The drawn image is captured and processed for prediction

2. Digit Recognition (ML Model):

• The digit image is sent to a backend server (e.g., Python Flask or Node.js API)
• The backend runs a pre-trained ML model (like one trained on MNIST dataset) to recognize the digit
• The prediction result is returned to the Angular frontend

3. Result Display:

• The predicted digit is shown instantly in the UI
• Optionally display the confidence level or top-3 predictions

⚙️ Technology Stack:

Frontend (Angular):

• Angular (TypeScript + HTML + CSS)
• Canvas API – for capturing handwritten input
• HTTPClient – to send image data to backend via REST API
• Responsive UI with clear instructions and result section

Backend (Python/Flask or Node.js):

• Receives image input from frontend
• Preprocesses the image (resizing, grayscale, etc.)
• Passes it to a pre-trained ML model (e.g., CNN using TensorFlow/Keras)
• Sends prediction result back to the frontend

???? Machine Learning Model:

1. Trained on MNIST dataset (handwritten digits)
2. Model type: Convolutional Neural Network (CNN)
3. Accuracy: ~98% on test data
4. Saved and served through an API for predictions

✅ Outcome:

1. A real-time digit recognition app with:
2. Angular frontend
3. Machine learning backend
4. Demonstrates:
5. Angular UI interactivity
6. Frontend-backend communication
7. AI integration in a web application