Depoloyed

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

Weights/v_20.h5

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

Weights/v_42.h5

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

Weights/v_44.h5

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

Weights/v_45.h5

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

Weights/v_46.h5

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

Weights/v_48.h5

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

Weights/v_50.h5

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

app.py

@@ -0,0 +1,62 @@
+from flask import Flask, request, render_template
+import numpy as np
+from tensorflow.keras.models import load_model
+
+from tensorflow.keras import Sequential
+from tensorflow.keras.layers import Conv2D, MaxPooling2D, Conv2D, Flatten, Dense, Dropout
+from tensorflow.keras.metrics import Precision, Recall, TopKCategoricalAccuracy
+from tensorflow.keras.optimizers import Adamax
+
+
+
+#  Replace this with any version of interest: (Available: 20, 42, 44, 45, 46, 48, 50 )
+version = 50
+WEIGHTS_PATH = f"Weights/v_{version}.h5"
+
+
+model = Sequential([
+    Conv2D(16, (3,3), activation='relu', input_shape=(28, 28, 1)),
+    MaxPooling2D(2,2),
+    Conv2D(64, (3,3), activation='relu'),
+    MaxPooling2D(2,2),
+    Flatten(),
+    Dropout(0.2),
+    Dense(128, activation='relu'),
+    Dropout(0.2),
+    Dense(64, activation='relu'),
+    Dropout(0.2),
+    Dense(35, activation='softmax') 
+])
+model.compile(
+    optimizer=Adamax(0.001),
+    loss='categorical_crossentropy',
+    metrics=['accuracy',  TopKCategoricalAccuracy(3), Precision(), Recall()]
+)
+
+model.load_weights(WEIGHTS_PATH) 
+
+app = Flask(__name__)
+
+classes = ['Airplane', 'Alarm Clock', 'Ant', 'Bear', 'Beard', 'Bird', 'Bus',
+       'Cookie', 'Cow', 'Donut', 'Hand', 'Hat', 'Key', 'Moon',
+       'Motorbike', 'Octagon', 'Pizza', 'Rabbit', 'School Bus', 'Shark',
+       'Skull', 'Smiley Face', 'Snake', 'Spider', 'Square', 'Star', 'Sun',
+       'Swing Set', 'Table', 'Tent', 'Tree', 'Triangle', 'Whale', 'Wheel',
+       'Windmill']
+
+def label(pred):
+    return {classes[i]: float(pred[0][i]) for i in range(len(classes))}
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/classify', methods=['POST'])
+def classify():
+    doodle = request.get_json()['doodle']
+    doodle = np.array(doodle)
+    pred = model.predict(np.expand_dims(doodle, axis=0).astype(np.float16))[0].astype(np.float64)
+    return {classes[i]: pred[i] for i in range(35)}
+    
+if __name__ == '__main__':
+    app.run(debug=True)

static/script.js

@@ -0,0 +1,173 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const canvas = document.getElementById('drawingCanvas');
+    const ctx = canvas.getContext('2d');
+    const clearButton = document.getElementById('clearButton');
+    const resultsBody = document.getElementById('resultsBody');
+
+
+    const canvasSize = { width: 280, height: 280 }; 
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+
+    const gridSize = 28;
+
+    let isDrawing = false;
+
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.lineWidth = 15; 
+    ctx.strokeStyle = 'black';
+
+    function clearCanvas() {
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, canvasSize.width, canvasSize.height);
+        resultsBody.innerHTML = `
+            <tr class="empty-state">
+                <td colspan="2">Draw something to see classification results</td>
+            </tr>
+        `;
+    }
+
+    clearCanvas();
+
+    function canvasToArray() {
+        const imageData = ctx.getImageData(0, 0, canvasSize.width, canvasSize.height);
+        const data = imageData.data;
+
+        const result = Array(gridSize).fill(0).map(() => Array(gridSize).fill(0));
+
+        const cellWidth = canvasSize.width / gridSize;
+        const cellHeight = canvasSize.height / gridSize;
+
+        for (let i = 0; i < gridSize; i++) {
+            for (let j = 0; j < gridSize; j++) {
+                let sum = 0;
+                let count = 0;
+
+                for (let x = Math.floor(j * cellWidth); x < Math.floor((j + 1) * cellWidth); x++) {
+                    for (let y = Math.floor(i * cellHeight); y < Math.floor((i + 1) * cellHeight); y++) {
+                        const idx = (y * canvasSize.width + x) * 4;
+                        const gray = 1 - (data[idx] + data[idx + 1] + data[idx + 2]) / (3 * 255);
+                        sum += gray;
+                        count++;
+                    }
+                }
+
+                result[i][j] = count > 0 ? sum / count : 0;
+            }
+        }
+
+        return result;
+    }
+
+    function debounce(func, delay) {
+        let timeoutId;
+        return function (...args) {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => func.apply(this, args), delay);
+        };
+    }
+
+    async function classifyDoodle() {
+        showLoadingState();
+
+        const doodleData = canvasToArray();
+
+        try {
+            const response = await fetch('/classify', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ doodle: doodleData }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+
+            const results = await response.json();
+            displayResults(results);
+        } catch (error) {
+            console.error('Error classifying doodle:', error);
+        }
+    }
+
+    const debouncedClassify = debounce(classifyDoodle, 500);
+
+    function showLoadingState() {
+        let loadingRows = '';
+        for (let i = 0; i < 5; i++) {
+            loadingRows += `
+                <tr>
+                    <td><div class="loading-placeholder">Loading...</div></td>
+                    <td><div class="loading-placeholder"></div></td>
+                </tr>
+            `;
+        }
+        resultsBody.innerHTML = loadingRows;
+    }
+
+    function displayResults(results) {
+        const topResults = Object.entries(results)
+            .sort((a, b) => b[1] - a[1])
+            .slice(0, 5);
+
+        if (topResults.length === 0) {
+            resultsBody.innerHTML = `
+                <tr>
+                    <td colspan="2">No results found</td>
+                </tr>
+            `;
+            return;
+        }
+
+        let tableRows = '';
+        topResults.forEach(([category, probability]) => {
+            const probabilityPercent = (probability * 100).toFixed(2);
+            tableRows += `
+                <tr>
+                    <td>${category}</td>
+                    <td>
+                        ${probabilityPercent}%
+                        <div class="probability-bar">
+                            <div class="probability-fill" style="width: ${probabilityPercent}%;"></div>
+                        </div>
+                    </td>
+                </tr>
+            `;
+        });
+
+        resultsBody.innerHTML = tableRows;
+    }
+
+    function startDrawing(e) {
+        isDrawing = true;
+        draw(e);
+    }
+
+    function stopDrawing() {
+        if (isDrawing) {
+            isDrawing = false;
+            ctx.beginPath();
+            debouncedClassify();
+        }
+    }
+
+    function draw(e) {
+        if (!isDrawing) return;
+        e.preventDefault();
+
+        const rect = canvas.getBoundingClientRect();
+        const x = (e.clientX || e.touches[0].clientX) - rect.left;
+        const y = (e.clientY || e.touches[0].clientY) - rect.top;
+
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', stopDrawing);
+    clearButton.addEventListener('click', clearCanvas);
+});

static/style.css

@@ -0,0 +1,122 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #121212;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.main-container {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 30px;
+    width: 80%;
+    max-width: 1000px;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px rgba(0, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+.left-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+canvas {
+    border-radius: 15px;
+    border: 3px solid rgba(0, 255, 255, 0.4);
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+    transition: transform 0.3s ease-in-out;
+}
+
+canvas:hover {
+    transform: scale(1.02);
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
+}
+
+h1 {
+    font-size: 24px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #0ff;
+    text-shadow: 0 0 10px #0ff;
+    text-align: center;
+}
+
+table {
+    width: 100%;
+    margin-top: 15px;
+    border-collapse: collapse;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+th {
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #0ff;
+}
+
+tr:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.probability-bar {
+    height: 12px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+}
+
+.probability-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #ff00ff, #0ff);
+    transition: width 0.4s ease-in-out;
+}
+
+button {
+    display: block;
+    margin: 20px auto 0;
+    padding: 12px 20px;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #fff;
+    background: linear-gradient(90deg, #ff00ff, #0ff);
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    box-shadow: 0 4px 10px rgba(255, 0, 255, 0.5);
+}
+
+button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 15px rgba(255, 0, 255, 0.8);
+}
+
+button:active {
+    transform: scale(0.95);
+}
+
+@media (max-width: 768px) {
+    .main-container {
+        grid-template-columns: 1fr;
+    }
+}

templates/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Doodle Classifier</title>
+    <link
+        rel="stylesheet"
+        href="{{ url_for('static', filename='style.css') }}"
+    />
+
+  </head>
+  <body>
+    <h1>Doodle Classifier</h1>
+    <div class="main-container">
+        <div class="left-section" >
+            <canvas id="drawingCanvas"></canvas>
+            <button id="clearButton">Clear</button>
+        </div>
+      <table >
+        <thead>
+          <tr>
+            <th>Prediction</th>
+            <th>Probability</th>
+          </tr>
+        </thead>
+        <tbody id="resultsBody">
+          <tr>
+            <td colspan="2">Draw something to classify</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
+  </body>
+</html>