code and model

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+resnet_mnist_cpu.pth filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,17 @@
+# Use a lightweight Python image
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy all files into container
+COPY . .
+
+# Install dependencies
+RUN pip install -r requirements.txt
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Run Flask app
+CMD ["python", "server.py"]

README.md

@@ -1,11 +0,0 @@
----
-title: Numberclassifier
-emoji: 😻
-colorFrom: purple
-colorTo: pink
-sdk: docker
-pinned: false
-short_description: 'Code Tutorial '
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

requirements.txt

@@ -0,0 +1,4 @@
+torch
+torchvision
+flask
+flask-cors

resnet_mnist_cpu.pth

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

server.py

@@ -0,0 +1,104 @@
+import torch
+import torch.nn as nn
+import torchvision.transforms as transforms
+from flask import Flask, request, jsonify, render_template
+from PIL import Image
+import io
+from flask_cors import CORS
+import torch.nn.functional as F
+
+
+class ResBlock(nn.Module):
+    def __init__(self, input_features, output_features):
+        super(ResBlock, self).__init__()
+        self.stride = 1 if input_features == output_features else 2
+        self.features = nn.Sequential(
+            nn.Conv2d(input_features, output_features,
+                      kernel_size=3, stride=self.stride, padding=1, bias=False),
+            nn.BatchNorm2d(output_features),
+            nn.ReLU(inplace=True),
+            nn.Conv2d(output_features, output_features,
+                      kernel_size=3, stride=1, padding=1, bias=False),
+            nn.BatchNorm2d(output_features)
+        )
+
+        self.shortcut = nn.Sequential(nn.Identity())
+        if input_features != output_features:
+            self.shortcut = nn.Sequential(
+                nn.Conv2d(input_features, output_features, kernel_size=1, stride=self.stride, bias=False))
+
+    def forward(self, x):
+        residual = self.shortcut(x)
+        x = self.features(x)
+        x += residual
+        x = F.relu(x, inplace=True)
+        return x
+
+class Resnet18(nn.Module):
+    def __init__(self, num_of_classes=10):
+        super(Resnet18, self).__init__()
+        self.features = nn.Sequential(
+            nn.Conv2d(1, 64, kernel_size=7, stride=2, padding=3, bias=False),
+            nn.BatchNorm2d(64),
+            nn.ReLU(inplace=True),
+            nn.MaxPool2d(kernel_size=3, stride=2, padding=1),
+
+            ResBlock(64, 64),
+            ResBlock(64, 64),
+
+            ResBlock(64, 128),
+            ResBlock(128, 128),
+
+            ResBlock(128, 256),
+            ResBlock(256, 256),
+
+            ResBlock(256, 512),
+            ResBlock(512, 512),
+
+            nn.AdaptiveAvgPool2d((1, 1))
+        )
+        self.classifier = nn.Sequential(
+            nn.Linear(512, num_of_classes)
+        )
+
+    def forward(self, x):
+        x = self.features(x)
+        x = torch.flatten(x, 1)
+        x = self.classifier(x)
+        return x
+
+# Load model
+device = "cpu"
+model = Resnet18().to(device)
+model.load_state_dict(torch.load("resnet_mnist_cpu.pth"))
+model.eval()
+
+# Define image preprocessing
+transform = transforms.Compose([transforms.Grayscale(), transforms.Resize((224, 224)), transforms.ToTensor()])
+
+# Initialize Flask app
+app = Flask(__name__)
+CORS(app)
+
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+# Route to handle image predictions
+@app.route("/predict", methods=["POST"])
+def predict():
+    file = request.files["image"].read()
+    image = Image.open(io.BytesIO(file))
+    image = transform(image).unsqueeze(0).to(device)
+
+    with torch.no_grad():
+        outputs = model(image)
+        _, predicted = torch.max(outputs, 1)
+
+    class_labels = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ]  # Modify based on your dataset
+    prediction = class_labels[predicted.item()]
+
+    return jsonify({"prediction": prediction})
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

static/script.js

@@ -0,0 +1,75 @@
+let canvas;
+let ctx;
+document.addEventListener("DOMContentLoaded", () => {
+       canvas = document.getElementById("drawingCanvas");
+       ctx = canvas.getContext("2d");
+       let isDrawing = false;
+
+       canvas.addEventListener("mousedown", () => isDrawing = true);
+       canvas.addEventListener("mouseup", () => isDrawing = false);
+       canvas.addEventListener("mousemove", draw);
+
+       function draw(event) {
+           if (!isDrawing) return;
+           ctx.fillStyle = "black";
+           ctx.fillRect(event.offsetX, event.offsetY, 20, 20);
+       }
+   });
+
+function clearCanvas() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    document.getElementById("result").innerText = "";
+}
+
+// Inverting the images as the training images had a black background with white text,
+// opposite of what we get from the canvas
+function invertCanvasColors(inputCanvas) {
+    const tempCanvas = document.createElement("canvas");
+    const tempCtx = tempCanvas.getContext("2d");
+
+    // Set the size of the temporary canvas to match the original canvas
+    tempCanvas.width = inputCanvas.width;
+    tempCanvas.height = inputCanvas.height;
+
+    // Draw the original canvas onto the temporary canvas
+    tempCtx.drawImage(inputCanvas, 0, 0);
+
+    // Get the pixel data of the image
+    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+    const data = imageData.data;
+
+    // Invert each pixel's RGB values
+    for (let i = 0; i < data.length; i += 4) {
+        data[i] = 255 - data[i];     // Red channel
+        data[i + 1] = 255 - data[i + 1]; // Green channel
+        data[i + 2] = 255 - data[i + 2]; // Blue channel
+    }
+    tempCtx.putImageData(imageData, 0, 0);
+    return tempCanvas;
+}
+
+function sendToServer() {
+    const invertedCanvas = invertCanvasColors(canvas);
+    let image = invertedCanvas.toDataURL("image/png");
+    let blob = dataURItoBlob(image);
+    let formData = new FormData();
+    formData.append("image", blob, "drawing.png");
+
+    fetch("https://ramachandrankulothungan-digit-doodle-recognition.hf.space/predict", {
+        method: "POST",
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => document.getElementById("result").innerText = "Prediction: " + data.prediction)
+    .catch(error => console.error("Error:", error));
+}
+
+function dataURItoBlob(dataURI) {
+    let byteString = atob(dataURI.split(",")[1]);
+    let arrayBuffer = new ArrayBuffer(byteString.length);
+    let uint8Array = new Uint8Array(arrayBuffer);
+    for (let i = 0; i < byteString.length; i++) {
+        uint8Array[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([uint8Array], { type: "image/png" });
+}

templates/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digit Doodle Recognition</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</head>
+<body class="bg-gray-900 text-gray-200 font-sans min-h-screen">
+<div class="container mx-auto p-6">
+    <!-- Title -->
+    <h1 class="text-4xl font-bold text-center mb-6">Digit Doodle Recognition</h1>
+
+    <!-- Canvas Section -->
+    <div class="flex flex-col items-center gap-4">
+        <!-- Canvas -->
+        <canvas id="drawingCanvas" width="500" height="500" class="bg-gray-800 border border-gray-700 shadow-md rounded-lg"></canvas>
+
+        <!-- Buttons for Canvas -->
+        <div class="flex gap-4">
+            <button
+                    onclick="clearCanvas()"
+                    class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded shadow-md transition duration-300">
+                Clear
+            </button>
+            <button
+                    onclick="sendToServer()"
+                    class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded shadow-md transition duration-300">
+                Predict
+            </button>
+        </div>
+
+        <!-- Prediction Result -->
+        <p id="result" class="text-lg font-medium text-green-400 mt-2"></p>
+    </div>
+
+</div>
+</body>
+</html>