Initial commit. Clean .git history. No binaries. Nothin

.github/README.md

@@ -0,0 +1,87 @@
+# Optical Character Recognition
+
+![Demonstration](../imgs/demo.png)
+
+Use the tool live [here](https://ocr.varak.dev).
+
+This is an optical character recognition (OCR) tool that extracts characters from drawings.  Using basic JS/HTML, we create a canvas to draw on, convert the drawing toa usable 28x28 pixel format, and send to the backend for prediction. In the backend, we use FastAPI to handle requests, with the only routes being `\` for the home page and `\predict` for predictions. The prediction route uses a pre-trained CNN model that is able to recognize all English characters and digits. For more details on the architecture, the dataset, and training process, check out [this writeup](https://github.com/intelligent-username/CNN/tree/main/char), which presents the simpler of two models trained for my writeup on CNNs (this one).
+
+## Usage
+
+Once again, the tool is hosted [here](https://ocr.varak.dev) for easy access. 
+
+Draw the character you want to recognize on the left canvas. The right canvas will display the top-k predictions, where k can be adjusted using the slider below it. The slider is capped at 15 since, after 15, all of the predictions are basically at 0% probability.
+
+To run this project locally, take the following steps:
+
+### Installation
+
+1. Clone this repository.
+
+```bash
+git clone https://github.com/intelligent-username/OCR
+cd OCR
+```
+
+2. Install the Python dependencies to a virtual environment.
+
+```bash
+python -m venv OCR-env
+OCR-env\Scripts\activate  # On Windows
+source OCR-env/bin/activate  # On macOS/Linux
+pip install -r requirements.txt
+```
+
+3. Run the backend.
+
+<!--
+
+Note that, to run the backend from the `backend/` folder, some adjustments to the file paths in `app.py` need to be made, since this version of the project is for the HuggingFace deployment, which uses the root directory as the working directory. The only real difference will be to add `../` to the files paths. Here's the list of changes to make in `app.py`:
+
+Change lines 5 and 6 to:
+
+```python
+from utils import predict_image
+from model import EMNIST_VGG
+
+```
+
+- Change line 40 to:
+
+```python
+model.load_state_dict(t.load("EMNIST_CNN.pth", map_location=device, weights_only=True))
+
+```
+
+- Change line 43 to:
+
+```python
+model = t.load("EMNIST_CNN.pth", map_location=device, weights_only=False)
+```
+
+- Change line 47 to:
+
+```python
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+```
+
+- Change line 51 to:
+
+```python
+path = os.path.join("..", "frontend", "index.html")
+``` 
+
+You may want to run it from the backend folder if you really want to avoid typing `backend.` at the beginning of the uvicorn command.
+
+-->
+
+
+```bash
+uvicorn backend.app:app --reload
+```
+
+4. Once the backend is running, go to [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your web browser to access the frontend. This link will appear in the terminal when you run the backend.
+
+## License
+
+This project is licensed under the MIT License. For details, see the [LICENSE](LICENSE) file.

.github/sync_to_hf.yaml

@@ -0,0 +1,17 @@
+name: Sync to Hugging Face
+on:
+  push:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Push to HF
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git push --force https://intelligent-username:$HF_TOKEN@huggingface.co/spaces/compendious/EMNIST-OCR main

.gitignore

@@ -0,0 +1,12 @@
+# Cache 
+
+**pycache**/
+*cpython*
+backend/EMNIST_CNN.pth
+
+# Tests, cache, etc.
+*test*
+*TEMP*
+*old*
+*OLD*
+

Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.10-slim
+WORKDIR /code
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# We run from /code so that 'frontend/' and 'models/' are visible to app.py
+CMD ["uvicorn", "backend.app:app", "--host", "0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,7 @@
+© 2026 intelligent-username
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,95 @@
+---
+title: EMNIST Predictor
+emoji: 🖊️
+colorFrom: blue
+colorTo: black
+sdk: docker
+app_port: 7860
+---
+# Optical Character Recognition
+
+![Demonstration](imgs/demo.png)
+
+Use the tool live [here](https://ocr.varak.dev).
+
+This is an optical character recognition (OCR) tool that extracts characters from drawings.  Using basic JS/HTML, we create a canvas to draw on, convert the drawing toa usable 28x28 pixel format, and send to the backend for prediction. In the backend, we use FastAPI to handle requests, with the only routes being `\` for the home page and `\predict` for predictions. The prediction route uses a pre-trained CNN model that is able to recognize all English characters and digits. For more details on the architecture, the dataset, and training process, check out [this writeup](https://github.com/intelligent-username/CNN/tree/main/char), which presents the simpler of two models trained for my writeup on CNNs (this one).
+
+## Usage
+
+Once again, the tool is hosted [here](https://ocr.varak.dev) for easy access. 
+
+Draw the character you want to recognize on the left canvas. The right canvas will display the top-k predictions, where k can be adjusted using the slider below it. The slider is capped at 15 since, after 15, all of the predictions are basically at 0% probability.
+
+To run this project locally, take the following steps:
+
+### Installation
+
+1. Clone this repository.
+
+```bash
+git clone https://github.com/intelligent-username/OCR
+cd OCR
+```
+
+2. Install the Python dependencies to a virtual environment.
+
+```bash
+python -m venv OCR-env
+OCR-env\Scripts\activate  # On Windows
+source OCR-env/bin/activate  # On macOS/Linux
+pip install -r requirements.txt
+```
+
+3. Run the backend.
+
+<!--
+
+Note that, to run the backend from the `backend/` folder, some adjustments to the file paths in `app.py` need to be made, since this version of the project is for the HuggingFace deployment, which uses the root directory as the working directory. The only real difference will be to add `../` to the files paths. Here's the list of changes to make in `app.py`:
+
+Change lines 5 and 6 to:
+
+```python
+from utils import predict_image
+from model import EMNIST_VGG
+
+```
+
+- Change line 40 to:
+
+```python
+model.load_state_dict(t.load("EMNIST_CNN.pth", map_location=device, weights_only=True))
+
+```
+
+- Change line 43 to:
+
+```python
+model = t.load("EMNIST_CNN.pth", map_location=device, weights_only=False)
+```
+
+- Change line 47 to:
+
+```python
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+```
+
+- Change line 51 to:
+
+```python
+path = os.path.join("..", "frontend", "index.html")
+``` 
+
+You may want to run it from the backend folder if you really want to avoid typing `backend.` at the beginning of the uvicorn command.
+
+-->
+
+
+```bash
+uvicorn backend.app:app --reload
+```
+
+4. Once the backend is running, go to [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your web browser to access the frontend. This link will appear in the terminal when you run the backend.
+
+## License
+
+This project is licensed under the MIT License. For details, see the [LICENSE](LICENSE) file.

backend/__init__.py

@@ -0,0 +1 @@
+# Just for Docker

backend/app.py

@@ -0,0 +1,62 @@
+import torch as t
+import asyncio
+import os
+
+from backend.utils import predict_image
+from backend.model import EMNIST_VGG
+
+from pydantic import BaseModel
+
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from contextlib import asynccontextmanager
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    try:
+        yield
+    except asyncio.CancelledError:
+        print("Code likely edited, restarting server...")
+        return # Suppressing annoying tracebacks on --reload
+    except Exception:
+        # real startup/shutdown failure
+        raise
+
+
+app = FastAPI(lifespan=lifespan)
+
+device = t.device("cuda" if t.cuda.is_available() else "cpu")
+print(f"Server running on: {device}")
+
+# Instantiate the empty architecture first
+model = EMNIST_VGG(num_classes=62).to(device)
+
+# Load the weights safely
+# Note: If this fails, it means your file is still the old "full model" format.
+# If so, re-run your training script to generate a clean state_dict.
+try:
+    model.load_state_dict(t.load("backend/EMNIST_CNN.pth", map_location=device, weights_only=True))
+except Exception as e:
+    print("State dict load failed, trying legacy full-load (not recommended for long term):", e)
+    model = t.load("backend/EMNIST_CNN.pth", map_location=device, weights_only=False)
+
+model.eval()
+
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+
+@app.get("/")
+async def read_index():
+    path = os.path.join("frontend", "index.html")
+    return FileResponse(path)
+
+class PredictRequest(BaseModel):
+    image: list[float]  # flat 28*28 array
+    k: int = 10  # number of top predictions to return
+
+@app.post("/predict")
+def predict(req: PredictRequest):
+    print(f"Predicting... +{1+1}")
+    # top_k currently set to 10 to preserve existing behavior
+    return predict_image(req.image, model, device, top_k=req.k)

backend/model.py

@@ -0,0 +1,69 @@
+"""
+VGG-style CNN for EMNIST character classification.
+See the README for a better description.
+"""
+
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+
+class ConvBlock(nn.Module):
+    """Convolutional block: 2 conv layers, ReLU, MaxPool"""
+    def __init__(self, in_channels, out_channels, padding=1, pool_kernel=2, pool_stride=2):
+        super(ConvBlock, self).__init__()
+        self.conv1 = nn.Conv2d(in_channels, out_channels, kernel_size=3, padding=padding)
+        self.conv2 = nn.Conv2d(out_channels, out_channels, kernel_size=3, padding=padding)
+        self.pool = nn.MaxPool2d(kernel_size=pool_kernel, stride=pool_stride)
+    def forward(self, x):
+        x = F.relu(self.conv1(x))
+        x = F.relu(self.conv2(x))
+        x = self.pool(x)
+        return x
+
+class EMNIST_VGG(nn.Module):
+    """
+    The actual CNN that will be trained.
+    Brought to you by composition.
+    """
+
+    def __init__(self, num_classes=62):
+        super(EMNIST_VGG, self).__init__()
+        
+        # The two blocks
+        self.conv1 = ConvBlock(in_channels=1, out_channels=32, pool_kernel=2, pool_stride=2)
+        self.bn1 = nn.BatchNorm2d(32)
+        self.conv2 = ConvBlock(in_channels=32, out_channels=64, pool_stride=2)
+        self.bn2 = nn.BatchNorm2d(64)
+        self.conv3 = ConvBlock(in_channels=64, out_channels=128, pool_stride=1)
+        self.bn3 = nn.BatchNorm2d(128)
+        self.conv4 = ConvBlock(in_channels=128, out_channels=256, pool_stride=1)
+        self.bn4 = nn.BatchNorm2d(256)
+
+        # Flatten layer (no parameters needed, only reshaping)
+        self.flatten = nn.Flatten()
+
+        # (Since the Dense layers just take flat inputs)
+
+        # Two fully-connected layers
+
+        # For the first layer, notice that, due to the stride and pool sizes, we need to adjust the input size to 256 * 5 * 5
+        self.fc1 = nn.Linear(256 * 5 * 5, 256)
+        self.dropout = nn.Dropout(p=0.5)
+
+        # Classifier
+        self.fc2 = nn.Linear(256, num_classes)
+
+    def forward(self, x):
+        x = self.conv1(x)
+        x = self.bn1(x)
+        x = self.conv2(x)
+        x = self.bn2(x)
+        x = self.conv3(x)
+        x = self.bn3(x)
+        x = self.conv4(x)
+        x = self.bn4(x)
+        x = self.flatten(x)
+        x = F.relu(self.fc1(x))
+        x = self.dropout(x)
+        x = self.fc2(x)
+        return x

backend/utils.py

@@ -0,0 +1,62 @@
+import torch as t
+import numpy as np
+
+MAX_CLASSES = 15
+
+def predict_image(image: list[float], model, device, top_k: int = 10) -> dict:
+    # RESHAPE
+    # Input comes in as flat 784 list -> (1 batch, 1 channel, 28 height, 28 width)
+    x = t.tensor(image, dtype=t.float32).view(1, 1, 28, 28)
+
+    # Invert
+    x = 1.0 - x
+    # Match the loader.py normalization
+    x = (x - 0.1307) / 0.3081
+    
+    # ROTATE FOR EMNIST
+    # The frontend sends an "Upright" image.
+    # EMNIST models are trained on (sideways) images. They're still supposed to recognize upright ones,
+    # but this pre-rotation helps.
+    # We flip the last two dimensions (Height and Width) to match the model's worldview.
+    x = x.transpose(-1, -2)
+
+    # Send to GPU if available
+    x = x.to(device)
+
+    # So glad I made this
+    # # --------------- DEBUG --------------- #
+    # # This prints the image to your SERVER TERMINAL so you can see what the model sees.
+    # print("\n------ INCOMING IMAGE ------")
+    # img_data = x.squeeze().cpu().numpy()
+    # for row in img_data:
+    #     line = ""
+    #     for pixel in row:
+    #         # Use distinct chars for different intensity
+    #         if pixel > 0.7: line += "@"
+    #         elif pixel > 0.3: line += "."
+    #         else: line += " "
+    #     print(line)
+    # print("------------------------------\n")
+    # # ------------------------------------ #
+
+
+    # Ensure top_k is an int within valid range
+    top_k = max(1, min(MAX_CLASSES, int(top_k)))
+
+    with t.no_grad():
+        logits = model(x)
+        probs = t.softmax(logits, dim=1)
+        topk = t.topk(probs, k=top_k)
+    
+    label_map = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+    
+    # Move back to CPU for response processing
+    indices = topk.indices[0].cpu().numpy()
+    values = topk.values[0].cpu().numpy()
+
+    results = [{"char": label_map[i], "prob": float(p)} for i, p in zip(indices, values)]
+    
+    # Debug print to see if the model is confident or guessing
+    print(f"Top prediction: {results[0]['char']} ({results[0]['prob']:.4f})")
+    
+    return {"predictions": results}

frontend/helpers/Sanitizer.js

@@ -0,0 +1,29 @@
+const blockSize = 15; // 420 / 28 = 15
+
+// Input Processor
+
+function getEMNISTInput(binaryArray, canvasWidth = 420, canvasHeight = 420, blockSize = 15) {
+    const downsampled = new Float32Array(28 * 28);
+
+    for (let y = 0; y < 28; y++) {
+        for (let x = 0; x < 28; x++) {
+            let sum = 0;
+            for (let by = 0; by < blockSize; by++) {
+                for (let bx = 0; bx < blockSize; bx++) {
+                    const ix = x * blockSize + bx;
+                    const iy = y * blockSize + by;
+                    // Assuming binaryArray is 1 for White (bg), 0 for Black (ink)
+                    sum += binaryArray[iy * canvasWidth + ix];
+                }
+            }
+            
+            // Calculate average brightness (0.0 to 1.0)
+            let avg = sum / (blockSize * blockSize);
+
+            // INVERT: Make background 0, Ink 1
+            // IMPORTANT: PRESERVE THE GRAYSCALE!
+            downsampled[y * 28 + x] = 1.0 - avg; 
+        }
+    }
+    return Array.from(downsampled);
+}

frontend/helpers/barGraphs.js

@@ -0,0 +1,36 @@
+function drawPredictionGraph(canvas, predictions) {
+    const ctx = canvas.getContext("2d");
+    const w = canvas.width;
+    const h = canvas.height;
+    const padding = 20;
+    const labelSpace = 40; // Space for character labels on left
+    const barSpace = w - padding * 2 - labelSpace - 60; // Max width for bars (leaving room for %)
+    
+    // Clear and set white background
+    ctx.clearRect(0, 0, w, h);
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, w, h);
+
+    const barHeight = (h - 2 * padding) / predictions.length - 10;
+
+    predictions.forEach((pred, i) => {
+        const y = padding + i * (barHeight + 10);
+        const barWidth = Math.max(pred.prob * barSpace, 2); // Ensure tiny bars are visible
+
+        // 1. Draw Label (Character)
+        ctx.fillStyle = "black";
+        ctx.font = "bold 24px monospace";
+        ctx.textAlign = "center";
+        ctx.fillText(pred.char, padding + labelSpace / 2, y + barHeight / 1.5);
+
+        // 2. Draw Bar
+        ctx.fillStyle = pred.prob > 0.5 ? "black" : "#555"; // Darker for high confidence
+        ctx.fillRect(padding + labelSpace, y, barWidth, barHeight);
+
+        // 3. Draw Percentage
+        ctx.fillStyle = "#333";
+        ctx.font = "14px monospace";
+        ctx.textAlign = "left";
+        ctx.fillText((pred.prob * 100).toFixed(2) + "%", padding + labelSpace + barWidth + 5, y + barHeight / 1.6);
+    });
+}

frontend/helpers/footer.js

@@ -0,0 +1,60 @@
+function initFooter() {
+    const footer = document.createElement('footer');
+    footer.className = 'footer';
+    
+    // ------------------------------------------------
+    // Left: Copyright
+    const copyright = document.createElement('div');
+    copyright.className = 'footer-left';
+    copyright.textContent = '© 2026 intelligent-username';
+    // ------------------------------------------------
+
+    // ------------------------------------------------
+    // Centre: Project info
+    const info = document.createElement('div');
+    info.className = 'footer-center';
+    info.textContent = 'This project currently supports all English lowercase and uppercase letters (a-z, A-Z), as well as all arabic numerals (0-9).';
+    // ------------------------------------------------
+
+
+    // ------------------------------------------------
+    // Right: GitHub link
+    
+    const github = document.createElement('div');
+    github.className = 'footer-right';
+    const githubLink = document.createElement('a');
+    githubLink.href = 'https://github.com/intelligent-username/OCR';
+    githubLink.target = '_blank';
+    githubLink.rel = 'noopener noreferrer';
+    
+    // GitHub logo
+    const logoSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    logoSvg.setAttribute('width', '20');
+    logoSvg.setAttribute('height', '20');
+    logoSvg.setAttribute('viewBox', '0 0 24 24');
+    logoSvg.setAttribute('fill', 'currentColor');
+    logoSvg.innerHTML = `<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>`;  // This took too long just to get right, don't get rid :)
+    githubLink.appendChild(logoSvg);
+    
+    // GitHub text
+    const githubText = document.createElement('span');
+    githubText.textContent = 'GitHub';
+    githubLink.appendChild(githubText);
+    
+    github.appendChild(githubLink);
+    // ------------------------------------------------
+    
+    // Assemble footer
+    footer.appendChild(copyright);
+    footer.appendChild(info);
+    footer.appendChild(github);
+    
+    document.body.appendChild(footer);
+}
+
+// Initialize footer when DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFooter);
+} else {
+    initFooter();
+}

frontend/helpers/kSlider.js

@@ -0,0 +1,10 @@
+const slider = document.getElementById("k-slider");
+const output = document.getElementById("k-value");
+
+// Initialize w/ default
+output.textContent = slider.value;
+
+// Update number instantly on drag
+slider.addEventListener("input", function() {
+    output.textContent = this.value;
+});

frontend/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>EMNIST OCR Canvas</title>
+    <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+    <!-- Header / Banner -->
+    <header class="header">
+    
+        <h1>Handwritten Optical Character Recognition</h1>
+        <p class="underline">
+            Draw a single character on the canvas below. The model will predict what it is
+        </p>
+        <p>
+            Use this to test out how recognition models work or to see how clear your handwriting is to a computer.
+        </p>
+    
+    </header>
+
+    <!-- Main Layout -->
+    <main class="container">
+        <!-- Left: Drawing Canvas -->
+        <section class="drawing-section">
+            <h2>Draw Here</h2>
+            <canvas
+                id="draw-canvas"
+                width="420"
+                height="420"
+                style="width: 420px; height: 420px; border: 1px solid black;"
+            ></canvas>
+            <div class="controls">
+                <button id="clear-btn">Clear</button>
+            </div>
+        </section>
+
+        <!-- Right side reserved for predictions-->
+        <section class="prediction-section">
+            <h2>Predictions</h2>
+            <canvas
+                id="prediction-canvas"
+                width="420"
+                height="420"
+            ></canvas>
+            <div class="slider-container">
+                <input type="range" id="k-slider" min="1" max="15" step="1" value="10">
+                <div id="k-value">10</div>
+            </div>
+        </section>
+    </main>
+
+    <script src="/static/helpers/barGraphs.js"></script>
+    <script src="/static/helpers/Sanitizer.js"></script>
+    <script src="/static/helpers/kSlider.js"></script>
+    <script src="/static/helpers/footer.js"></script>
+    <script src="/static/main.js"></script>
+
+</body>
+</html>

frontend/main.js

@@ -0,0 +1,186 @@
+// main.js is just for putting everything together quickly and simply. Don't grow into a monolith or complicate the project.
+
+const canvas = document.getElementById("draw-canvas");
+// Use willReadFrequently to optimize repeated getImageData readbacks
+const ctx = canvas.getContext("2d", { willReadFrequently: true });
+
+const predCanvas = document.getElementById("prediction-canvas");
+const predCtx = predCanvas.getContext("2d");
+
+// Canvas drawing setup
+ctx.lineWidth = 42;
+ctx.lineCap = "round";
+ctx.strokeStyle = "black";
+
+// Track drawing state
+let drawing = false;
+let erase = false;
+let lastLogTime = 0;
+// Milliseconds between read/process cycles (tweakable)
+let logGapMs = 250;
+// Processing loop control
+let processingLoopRunning = false;
+// Store latest predictions
+let latestPredictions = [];
+
+// Function to redraw the graph with current k
+function redrawGraph() {
+    const k = parseInt(document.getElementById("k-slider").value);
+    if (latestPredictions.length > 0) {
+        drawPredictionGraph(predCanvas, latestPredictions.slice(0, k));
+    }
+}
+
+// Function to perform prediction with current canvas content
+function performPrediction() {
+    try {
+        // 1. Extract and Normalize (Don't Binarize!)
+        const inputArray = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const alphaValues = Array.from(inputArray.data)
+            .filter((_, i) => i % 4 === 3) // Keep only Alpha
+            .map(a => a / 255.0);          // Normalize 0-255 to 0.0-1.0
+
+        // 2. Downsample (Using the modified function below)
+        const temp = getEMNISTInput(alphaValues);
+
+        // console.log("Input Array: ", inputArray);
+        // console.log("Temp: ", temp);
+
+        // (Preview drawing removed — bar graph will visualize predictions)
+
+        // Send to server with error handling (non-blocking)
+        fetch("/predict", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ image: temp, k: 15 }),
+        })
+        .then(async response => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(`Server error: ${response.status} ${response.statusText} - ${text}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            // console.log("Predictions:", data.predictions);
+            latestPredictions = data.predictions;
+            redrawGraph();
+        })
+        .catch(error => console.error("Error:", error));
+    } catch (err) {
+        console.error("Prediction error:", err);
+    }
+}
+
+// Prevent context menu on right click
+canvas.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+});
+
+canvas.addEventListener("mousedown", (e) => {
+    drawing = true;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    
+    if (e.button === 2) { // Right click
+        erase = true;
+        ctx.strokeStyle = "white";
+    } else {
+        erase = false;
+        ctx.strokeStyle = "black";
+    }
+
+    // Start the processing loop if not already running
+    if (!processingLoopRunning) {
+        processingLoopRunning = true;
+        requestAnimationFrame(processingLoop);
+    }
+});
+
+canvas.addEventListener("mouseup", () => {
+    drawing = false;
+    erase = false;
+    ctx.strokeStyle = "black";
+});
+
+// Processing loop runs while `drawing` is true and throttles work via `logGapMs`.
+function processingLoop() {
+    if (!drawing) {
+        processingLoopRunning = false;
+        return;
+    }
+
+    const now = Date.now();
+    if (now - lastLogTime >= logGapMs) {
+        lastLogTime = now;
+
+        // Schedule after paint
+        requestAnimationFrame(() => {
+            performPrediction();
+        });
+    }
+
+    requestAnimationFrame(processingLoop);
+}
+canvas.addEventListener("mouseleave", () => {
+    drawing = false;
+    erase = false;
+    ctx.strokeStyle = "black";
+});
+canvas.addEventListener("mousemove", draw);
+
+canvas.addEventListener("touchstart", (e) => {
+    e.preventDefault();
+    drawing = true;
+    const touch = e.touches[0];
+    const rect = canvas.getBoundingClientRect();
+    ctx.beginPath();
+    ctx.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
+
+    // Start the processing loop if not already running
+    if (!processingLoopRunning) {
+        processingLoopRunning = true;
+        requestAnimationFrame(processingLoop);
+    }
+}, { passive: false });
+
+canvas.addEventListener("touchmove", (e) => {
+    e.preventDefault();
+    if (!drawing) return;
+    const touch = e.touches[0];
+    const rect = canvas.getBoundingClientRect();
+    ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
+    ctx.stroke();
+}, { passive: false });
+
+canvas.addEventListener("touchend", (e) => {
+    drawing = false;
+}, { passive: false });
+
+// Draw function for mouse
+function draw(e) {
+    if (!drawing) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    
+    // (Processing loop now handles getImageData and updates; draw() stays lightweight)
+}
+
+// Clear button
+document.getElementById("clear-btn").addEventListener("click", () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Clear and reset prediction canvas to white so it's visually clear
+    predCtx.clearRect(0, 0, predCanvas.width, predCanvas.height);
+    predCtx.fillStyle = 'white';
+    predCtx.fillRect(0, 0, predCanvas.width, predCanvas.height);
+    latestPredictions = [];
+});
+
+// Slider change listener to redraw graph
+document.getElementById("k-slider").addEventListener("input", redrawGraph);

frontend/style.css

@@ -0,0 +1,209 @@
+body {
+    font-family: 'Consolas', 'Courier New', monospace;
+    margin: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+    color: #333;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background-color: #ffffff;
+    text-align: center;
+    padding: 20px;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 20px;
+}
+
+.header h1 {
+    margin: 0;
+    font-size: 2.5em;
+    color: #333;
+}
+
+.header p {
+    margin: 10px 0 0 0;
+    font-size: 1.1em;
+    color: #666;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 40px;
+    padding: 20px;
+    flex-grow: 1;
+}
+
+.drawing-section, .prediction-section {
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 20px;
+    min-width: 300px;
+}
+
+.drawing-section h2 {
+    text-align: center;
+    margin-top: 0;
+    color: #333;
+}
+
+#draw-canvas {
+    display: block;
+    margin: 0 auto 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: white;
+    cursor: crosshair;
+}
+
+.controls {
+    text-align: center;
+}
+
+#clear-btn {
+    background-color: #777;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#clear-btn:hover {
+    background-color: #555;
+}
+
+.prediction-section h2 {
+    text-align: center;
+    margin-top: 0;
+    color: #292929;
+}
+
+#prediction-canvas {
+    display: block;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: white;
+}
+
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .drawing-section, .prediction-section {
+        min-width: 280px;
+    }
+}
+
+.slider-container {
+    width: 100%; /* Occupy full width of parent */
+    text-align: center;
+    padding: 10px 0;
+}
+
+#k-slider {
+    /* -webkit-appearance: none; */
+    width: 100%;
+    height: 4px;
+    background: #e0e0e0;
+    border-radius: 2px;
+    outline: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+/* Chrome/Safari/Edge Thumb */
+#k-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: black;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.1s;
+}
+
+#k-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+/* Firefox Thumb */
+#k-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: black;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+#k-value {
+    font-family: monospace;
+    font-size: 14px;
+    margin-top: 8px;
+    color: #333;
+}
+/* Footer Styles */
+footer.footer {
+    background-color: #ffffff;
+    border-top: 1px solid #e0e0e0;
+    padding: 20px;
+    margin-top: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    font-size: 0.9em;
+    color: #666;
+    flex-wrap: wrap;
+}
+
+.footer-left {
+    flex: 1;
+    min-width: 150px;
+}
+
+.footer-center {
+    flex: 2;
+    text-align: center;
+    min-width: 300px;
+}
+
+.footer-right {
+    flex: 1;
+    text-align: right;
+    min-width: 120px;
+}
+
+.footer-right a {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: #333;
+    text-decoration: none;
+    transition: color 0.3s ease;
+    font-weight: 500;
+}
+
+.footer-right a:hover {
+    color: #0969da;
+}
+
+.footer-right svg {
+    transition: fill 0.3s ease;
+}
+
+.footer-right a:hover svg {
+    fill: #0969da;
+}

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+aiofiles
+torch --index-url https://download.pytorch.org/whl/cpu
+torchvision --index-url https://download.pytorch.org/whl/cpu
+numpy
+pydantic