Feat: Huggingface App

.gitignore

@@ -9,7 +9,6 @@ __pycache__
 data/
 models/
 *.log
-*.txt
 *.csv
 *.json
 *.pickle

Dockerfile

@@ -0,0 +1,39 @@
+# Use an official Python runtime as the base image
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the requirements first to leverage Docker cache
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application files
+COPY . .
+
+# Create necessary directories and ensure proper permissions
+RUN mkdir -p data/MNIST/raw scripts/training/models \
+    && chmod -R 755 static \
+    && chmod -R 755 templates \
+    && chown -R nobody:nogroup static templates
+
+# Make port 8000 available (FastAPI default port)
+EXPOSE 8000
+
+# Set environment variable for FastAPI to listen on 0.0.0.0
+ENV HOST=0.0.0.0
+ENV PORT=8000
+
+# Switch to non-root user
+USER nobody
+
+# Command to run the application using uvicorn
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"] 

README.md

@@ -0,0 +1,36 @@
+---
+title: MnistStudio
+emoji: 🐨
+colorFrom: red
+colorTo: indigo
+sdk: docker
+app_port: 8000
+pinned: false
+license: mit
+short_description: Train and perform inference on MNIST dataset
+---
+# MNIST Application
+
+## Overview
+
+This is a simple application that can be used to train a convolutional neural network model to classify images of handwritten digits. The same application can also be used to perform inference of the digits drawn by the user.
+
+## Application Description
+- The landing page consists of two buttons, one for training the model and one for performing inference.
+- On clicking the inference button, a new page is loaded where the user can draw a digit on the canvasand select the model to perform inference. 
+- The inference results are displayed on the same page.
+- On clicking the training button, a new page is loaded where two buttons are displayed, one for training single model and another for comparing multiple models.
+- On clicking the train single model button, a new page is loaded where the user can select following options:
+    - Number of kernels of three blocks of the network
+    - Optimizer [Admam, SGD]
+    - Batch Size [32, 64, 128]
+    - Number of Epochs [1, 2, 3]
+- Once these parameters are selected, the user can click on the train button to start the training. Training and validation loss, accuracy are displayed on the same page.
+- On clicking the train and compare models button, a new page is loaded where the user can select following options for both the models:
+    - Number of kernels of three blocks of the network for each model
+    - Optimizer [Admam, SGD] for each model
+    - Batch Size [32, 64, 128] for each model
+    - Number of Epochs [1, 2, 3] for each model
+- Once these parameters are selected, the user can click on the train button to start the training. Training and validation loss, accuracy are displayed on the same page.
+
+

app.py

@@ -13,6 +13,7 @@ from fastapi import BackgroundTasks
 import warnings
 import asyncio
 import json
+import numpy as np
 
 warnings.filterwarnings("ignore", category=UserWarning, module="torchvision.transforms")
 
@@ -300,6 +301,9 @@ async def perform_inference(data: dict):
             # Resize using PIL directly with LANCZOS
             image = image.resize((28, 28), Image.LANCZOS)
             
+            # Invert the image (subtract from 255 to invert grayscale)
+            image = Image.fromarray(255 - np.array(image))
+            
             # Preprocess image
             transform = transforms.Compose([
                 transforms.ToTensor(),

requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+torch
+torchvision
+numpy
+plotly
+tqdm
+python-multipart
+jinja2
+aiofiles
+websockets 

templates/inference.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Test Model - MNIST</title>
     <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', path='/css/buttons.css') }}">
+    <!-- <link rel="stylesheet" href="{{ url_for('static', path='/css/buttons.css') }}"> -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
@@ -69,6 +69,54 @@
 
     <script src="{{ url_for('static', path='/js/inference.js') }}"></script>
     <script>
+        async function predict() {
+            const modelSelect = document.getElementById('model-select');
+            const selectedModel = modelSelect.value;
+            
+            if (!selectedModel) {
+                alert('Please train a model first');
+                return;
+            }
+            
+            const imageData = canvas.toDataURL('image/png');
+            
+            try {
+                const response = await fetch('/api/inference', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        image: imageData,
+                        model_name: selectedModel
+                    })
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Prediction failed');
+                }
+                
+                const data = await response.json();
+                displayPrediction(data);
+            } catch (error) {
+                console.error('Error:', error);
+                alert(error.message || 'Error during prediction');
+            }
+        }
+
+        function displayPrediction(data) {
+            const resultDiv = document.getElementById('prediction-result');
+            resultDiv.classList.remove('hidden');
+            resultDiv.innerHTML = `
+                <h2>Prediction Result</h2>
+                <p class="prediction-text">Predicted Digit: ${data.prediction}</p>
+                <p class="model-info">Model Architecture: ${data.model_config.architecture}</p>
+                <p class="model-info">Optimizer: ${data.model_config.optimizer}</p>
+                <p class="model-info">Batch Size: ${data.model_config.batch_size}</p>
+            `;
+        }
+
         // Update the displayPrediction function
         function displayPrediction(result) {
             const resultDiv = document.getElementById('prediction-result');