Merge pull request avinashkranjan#1577 from Raghucharan16/master

Hand-Written-Digit-Recognition

Author: avinashkranjan

Hand-Written-Digit-Recognition/README.md

@@ -0,0 +1,49 @@
+# Hand-Written-Digit-Recognition
+
+This project is a demonstration of a Hand Written Digit Recognition system. It uses machine learning techniques to recognize and classify handwritten digits.
+Fed and trained on MNIST dataset using 5 layer convolution neural network.
+
+The project is hosted on GitHub Pages and can be accessed at https://raghucharan16.github.io/Hand-Written-Digit-Recognition/.
+
+# Features
+* Handwritten digit recognition: The system can recognize and classify handwritten digits ranging from 0 to 9.
+* Web interface: Users can draw digits on the web canvas provided by the application.
+* Real-time prediction: The application provides real-time predictions as the user draws the digit.
+* Clear functionality: Users can clear the canvas to start a new drawing.
+* Model details: The repository includes the trained model used for digit recognition.
+
+# Usage
+To use the Hand Written Digit Recognition system, follow these steps:
+
+* Open the web application using the provided link: https://raghucharan16.github.io/Hand-Written-Digit-Recognition/.
+* Once the application is loaded, you will see a canvas on which you can draw digits using your mouse or touch input.
+* Draw a digit on the canvas. As you draw, the application will display real-time predictions for the digit you are drawing.
+* If you want to start a new drawing, click the "Clear" button to clear the canvas and predictions.
+* Repeat steps 3-4 as desired.
+
+# Development
+If you are interested in contributing to this project or running it locally, follow these instructions:
+
+Clone the repository: git clone https://github.com/raghucharan16/Hand-Written-Digit-Recognition.git
+Navigate to the project directory: cd Hand-Written-Digit-Recognition
+Open the index.html file in a web browser to access the application locally.
+
+# Dependencies
+The Hand Written Digit Recognition project relies on the following dependencies:
+
+* HTML5 Canvas: Used for drawing and capturing user input.
+* TensorFlow.js: A JavaScript library for machine learning used for the digit recognition model(tensorflowjs works only when tensorflow version <1.6).
+* Bootstrap: A CSS framework used for styling and layout.
+* jQuery: A JavaScript library used for DOM manipulation and event handling.
+* The required dependencies are already included in the project repository, so there is no need for additional setup.
+
+## Demo
+![handwritten-recognition-5](https://github.com/Raghucharan16/Amazing-Python-Scripts/assets/104614903/872abeb1-5e44-496c-a166-b9f25e2f7acd)
+
+
+Contact
+If you have any questions, suggestions, ideas or issues regarding the project, please feel free to contact the me.
+
+GitHub: [Raghucharan16](https://github.com/Raghucharan16)
+
+**Your feedback and contributions are most welcome!!**

Hand-Written-Digit-Recognition/Requirements.txt

@@ -0,0 +1,3 @@
+python==3.6
+tensorflow==2.1
+tensorflowjs==3.1

Hand-Written-Digit-Recognition/app.py

@@ -0,0 +1,33 @@
+import tensorflow as tf
+import tensorflowjs as tfjs
+from tensorflow import keras
+
+# load the data
+(train_img,train_label),(test_img,test_label) = keras.datasets.mnist.load_data()
+train_img = train_img.reshape([-1, 28, 28, 1])
+test_img = test_img.reshape([-1, 28, 28, 1])
+train_img = train_img/255.0
+test_img = test_img/255.0
+train_label = keras.utils.to_categorical(train_label)
+test_label = keras.utils.to_categorical(test_label)
+
+# define the model architecture
+model = keras.Sequential([
+    keras.layers.Conv2D(32, (5, 5), padding="same", input_shape=[28, 28, 1]),
+    keras.layers.MaxPool2D((2,2)),
+    keras.layers.Conv2D(64, (5, 5), padding="same"),
+    keras.layers.MaxPool2D((2,2)),
+    keras.layers.Flatten(),
+    keras.layers.Dense(1024, activation='relu'),
+    keras.layers.Dropout(0.2),
+    keras.layers.Dense(10, activation='softmax')
+])
+model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=['accuracy'])
+
+# train the model
+model.fit(train_img,train_label, validation_data=(test_img,test_label), epochs=10)
+test_loss,test_acc = model.evaluate(test_img, test_label)
+print('Test accuracy:', test_acc)
+
+# save model as tfjs format
+tfjs.converters.save_keras_model(model, 'models')

Hand-Written-Digit-Recognition/images/handwritten-recognition-5.gif

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset='utf-8'>
+	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
+	<meta name='viewport' content='width=device-width, initial-scale=1'>
+	<title>Hand Written Digit Recognition using TensorFlow.js</title>
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+	<script src="js/chart.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >    
+	<link rel="stylesheet" type="text/css" href="style/digit.css">
+</head>
+<body>
+	<main>
+		<div class="container mt-1">
+			<div class="digit-demo-container">
+				<h3>Hand Written Digit Recognition</h3>
+					<div class="flex-two">
+						<div id="canvas_box_wrapper" class="canvas-box-wrapper">
+							<div id="canvas_box" class="canvas-box"></div>
+							<div class="col-12">
+								<button id="clear-button" class="btn btn-dark">Clear</button>
+							</div>
+							<div class="col-12">
+								<button id="predict-button" class="btn btn-dark">Predict</button>
+							</div>
+						</div>
+						<div class="col-6">
+							<div id="result_box" class="col-12 col-md-7">
+								<canvas id="chart_box" width="100" height="100"></canvas>
+							</div>
+							<div class="col-12 d-block mt-2 mt-md-0 text-md-left prediction-text"></div>
+						</div>
+					</div>
+			</div>
+		</div>
+	</main>   
+
+	<script src="js/digit-recognition.js"></script>
+</body>
+</html>