first commit

app.py

@@ -0,0 +1,96 @@
+import io
+import time
+import cv2
+from flask import Flask, render_template, request, redirect, url_for, flash,jsonify
+from PIL import Image  # For image processing (optional)
+import os
+import base64
+import json
+from .model import predict
+
+ALLOWED_EXTENSIONS = {'jpg', 'jpeg'}
+
+app = Flask(__name__)
+app.secret_key='your_secret_key'
+
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+
+@app.route('/help')
+def help():
+    return render_template('help.html')
+
+
+@app.route('/about')
+def aboutus():
+    return render_template('about.html')
+
+
+@app.route('/upload', methods=['POST'])
+def upload_image():
+    
+    
+    if 'file-input' in request.files:
+        uploaded_file = request.files['file-input']
+        
+        
+        if uploaded_file and allowed_file(uploaded_file.filename):
+        
+            filename= uploaded_file.filename
+            
+            try:
+                # Read and validate the image (modify as needed)
+                image_buffer=io.BytesIO(uploaded_file.read()) 
+                
+                # print(image_buffer.getvalue())
+                
+                pred= predict(image_buffer=image_buffer)
+                    
+            
+                return jsonify(pred)
+
+            except (IOError, OSError, ValueError) as e:
+                return jsonify(json.dumps({'error': "Server Error "+ str(e)})), 500
+                
+
+        else:
+            return jsonify(json.dumps({'error': "Invalid file format. Please upload a  JPEG, or JPG image."})), 500
+            
+        
+    if 'file-input-64'  in request.form:
+        try:
+    # Decode the base64 data (replace with your processing logic)
+            base64_data = request.form['file-input-64']
+            
+            image_buffer= io.BytesIO(base64.b64decode(base64_data))
+            
+            
+            try: 
+                image_buffer.seek(0)
+
+    # Use Pillow to open the image data from BytesIO
+                image = Image.open(image_buffer)
+
+    # Save the image as a JPEG with appropriate quality (adjust quality as needed)
+                # image.save("canvas.jpeg", quality=90, format="JPEG")                
+                image_buffer.seek(0)
+                
+                pred= predict(image_buffer=image_buffer)
+                return jsonify(pred)
+
+            except (IOError, OSError, ValueError) as e:
+                return jsonify(json.dumps({'error': "Khali Na Patha"})), 500
+                
+            
+            
+        except Exception as e:
+            return jsonify(json.dumps({'error': str(e)})), 500
+
+if __name__ == '__main__':
+    app.run(debug=True,reload=True)

dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860","main:app"]

model.py

@@ -0,0 +1,169 @@
+import numpy as np 
+from io import BytesIO
+import cv2
+from captum.attr import IntegratedGradients
+from captum.attr import visualization as viz
+import io
+import torch 
+import torchvision 
+import torch.nn as nn
+from torchvision import transforms,models
+from torchvision.transforms import v2
+import torch.nn.functional as F
+torchvision.disable_beta_transforms_warning()
+import json
+import base64
+    
+
+index_to_target = {
+0: 'अ', 1: 'अं', 2: 'अः', 3: 'आ', 4: 'इ', 5: 'ई', 6: 'उ', 7: 'ऊ', 8: 'ए', 9: 'ऐ', 10: 'ओ', 11: 'औ', 12: 'क', 13: 'क्ष', 14: 'ख', 15: 'ग', 16: 'घ', 17: 'ङ', 18: 'च', 19: 'छ', 20: 'ज', 21: 'ज्ञ', 22: 'झ', 23: 'ञ', 24: 'ट', 25: 'ठ', 26: 'ड', 27: 'ढ', 28: 'ण', 29: 'त', 30: 'त्र', 31: 'थ', 32: 'द', 33: 'ध', 34: 'न', 35: 'प', 36: 'फ', 37: 'ब', 38: 'भ', 39: 'म', 40: 'य', 41: 'र', 42: 'ल', 43: 'व', 44: 'श', 45: 'ष', 46: 'स', 47: 'ह', 48: '०', 49: '१', 50: '२', 51: '३', 52: '४', 53: '५', 54: '६', 55: '७', 56: '८', 57: '९'}
+target_to_index = {value:key for key,value in index_to_target.items()}
+
+
+device = 'cuda:0' if torch.cuda.is_available() else "cpu"
+
+img_transforms = v2.Compose([
+    transforms.ToTensor(),
+    v2.ToDtype(torch.float32),
+    v2.Normalize((0.5,),(0.5,))
+])
+
+#
+def crop_characters(img) -> np.array:
+
+
+    blur_img =cv2.GaussianBlur(img,(5,5),3)
+    gray = cv2.cvtColor(blur_img,cv2.COLOR_BGR2GRAY)
+
+    # bin_img= cv2.threshold(gray,0,255,cv2.THRESH_BINARY + cv2.THRESH_OTSU)[1]
+
+    thres_value,thresh_img= cv2.threshold(gray,0,255,cv2.THRESH_BINARY_INV + cv2.THRESH_OTSU)
+
+    contours, _ = cv2.findContours(thresh_img, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+
+    # cv2.drawContours(img,contours,-1,(0,255,0),2)
+
+
+    bounding_boxes = []
+    for contour in contours:
+        area = cv2.contourArea(contour)
+
+        #neglecting very small contours which are actually noise 
+        if area<200:
+            continue
+
+        # Get the bounding box coordinates
+        x, y, w, h = cv2.boundingRect(contour)
+        
+        # Draw rectangle around contour
+        # cv2.rectangle(img, (x, y), (x + w, y + h), (0, 255, 0),1)
+        
+        # Store bounding box coordinates
+        bounding_boxes.append((x, y, x + w, y + h))
+
+    # Calculate the minimum bounding rectangle that encloses all the smaller bounding rectangles
+    x_min = min(box[0] for box in bounding_boxes) 
+    y_min = min(box[1] for box in bounding_boxes)
+    x_max = max(box[2] for box in bounding_boxes)
+    y_max = max(box[3] for box in bounding_boxes)
+
+    padding_left=3
+    padding_right =3
+    padding_bottom =3
+    padding_top =3
+    x_min -= padding_left
+    y_min -= padding_bottom
+    x_max += padding_top
+    y_max += padding_right
+
+
+    cropped_img = img[y_min:y_max, x_min:x_max]
+    return cropped_img
+
+
+
+
+def predict(image_buffer:BytesIO)->str:
+    device = 'cuda:0' if torch.cuda.is_available() else "cpu"
+
+    model_path ="res97_state.pth"
+    
+    model = models.resnet101(weights=None).to(device)
+    num_classes = 58
+    model.fc = nn.Linear(model.fc.in_features, num_classes).to(device)
+    model.load_state_dict(torch.load(model_path,map_location=device))
+
+    image_buffer.seek(0)
+    
+    img= cv2.imdecode(np.frombuffer(image_buffer.read(),np.uint8),-1)
+    
+    if img is None:
+        raise RuntimeError("Failed to decode image")
+    
+    img = crop_characters(img)
+    
+    img = cv2.resize(img, (28, 28), interpolation=cv2.INTER_AREA)
+    
+    img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)  # Convert to grayscale
+    
+
+    img_bin = cv2.adaptiveThreshold(img_gray,255,cv2.ADAPTIVE_THRESH_MEAN_C,cv2.THRESH_BINARY,11,6)
+    thres_rgb= cv2.cvtColor(img_bin,cv2.COLOR_GRAY2BGR)
+    
+    model.eval()
+    
+    transformed_img =  img_transforms(thres_rgb).unsqueeze(dim=0)
+  
+    
+    
+    with torch.inference_mode():
+        transformed_img = transformed_img.to(device)
+        outputs = model(transformed_img)
+        _,predicted_index = torch.max(outputs.data,1) #returns max value and index
+        probabilities = F.softmax(outputs,1)
+
+    
+
+    def attribute_image_features(algorithm,image , **kwargs):
+        model.zero_grad()
+        tensor_attributions = algorithm.attribute(image,
+                                                target=predicted_index,
+                                                **kwargs
+                                                )
+        
+        return tensor_attributions
+
+    ig = IntegratedGradients(model)
+    attr_ig, delta = attribute_image_features(ig, transformed_img, baselines=transformed_img * 0, return_convergence_delta=True)
+    attr_ig = np.transpose(attr_ig.squeeze().cpu().detach().numpy(), (1, 2, 0))
+    
+
+    original_image = img
+
+    # org_img,axes1 = viz.visualize_image_attr(None, original_image, 
+    #                     method="original_image", title="Original Image",use_pyplot=False)
+        
+    img_attr,axes2= viz.visualize_image_attr(attr_ig, original_image, method="blended_heat_map",sign="all",
+                                        title="Overlayed Integrated Gradients",use_pyplot=False,show_colorbar=True)
+    
+    img_attr_bytes = io.BytesIO()
+    img_attr.savefig(img_attr_bytes,format="jpeg")
+    
+
+    
+    top3,top3index= torch.topk(probabilities,3)
+    # print(top3,top3index)
+    top3Value= top3.tolist()
+    top3Index= top3index.tolist()
+    # print(top3Value,top3Index)
+    
+    
+    json_data_dict={
+        "prob":top3Value[0],
+        "item":[ index_to_target[int(item)] for item in top3Index[0]],
+        "ig":base64.b64encode(img_attr_bytes.getvalue()).decode('utf-8')
+       
+    }
+    
+    return  json.dumps( json_data_dict)
+    

requirements.txt

@@ -0,0 +1,8 @@
+flask
+opencv-python
+scikit-learn
+numpy 
+pandas
+matplotlib
+torch
+torchvision

static/script/dialog.js

@@ -0,0 +1,87 @@
+
+const canvas = document.getElementById('drawing-board');
+
+
+// Get the 2D rendering context of the canvas
+var ctx = canvas.getContext('2d');
+
+// Initialize variables to track pointer movements
+var isDrawing = false;
+var lastX = 0;
+var lastY = 0;
+
+// Event listener to track pointer movements and draw lines
+canvas.addEventListener('pointerdown', function (e) {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+});
+
+canvas.addEventListener('pointermove', function (e) {
+    if (isDrawing) {
+        var x = e.offsetX;
+        var y = e.offsetY;
+        drawLine(lastX, lastY, x, y);
+        lastX = x;
+        lastY = y;
+    }
+});
+
+canvas.addEventListener('pointerup', function () {
+    isDrawing = false;
+});
+
+canvas.addEventListener('pointerout', function () {
+    isDrawing = false;
+});
+
+// Function to draw lines on the canvas
+function drawLine(startX, startY, endX, endY) {
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.strokeStyle = '#000'; // Color of the line
+    ctx.lineWidth = 2; // Thickness of the line
+    ctx.stroke();
+    ctx.closePath();
+}
+
+
+
+function showDialog() {
+
+    const modal = document.getElementById("dialog-area")
+    const overlay = document.getElementById("overlay");
+
+
+    const canvas = document.getElementById("drawing-board");
+    const ctx = canvas.getContext('2d');
+
+
+
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    modal.style.display = 'flex';
+    overlay.style.display = 'block';
+
+}
+
+
+
+function closeDialog() {
+    const modal = document.getElementById("dialog-area");
+    const overlay = document.getElementById("overlay");
+
+    const canvas = document.getElementById("drawing-board");
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    modal.style.display = 'none';
+    overlay.style.display = 'none';
+
+}
+
+
+function clearCanvas() {
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}

static/script/faq.js

@@ -0,0 +1,10 @@
+const faqQuestions = document.querySelectorAll('.faq-question');
+
+faqQuestions.forEach(question => {
+    question.addEventListener('click', function () {
+        const answer = this.nextElementSibling;
+        answer.classList.toggle('show');
+        // const arrow = this.querySelector('.faq-arrow');
+        // arrow.classList.toggle('rotate'); // Simplified class toggle
+    });
+});

static/script/nav.js

@@ -0,0 +1,14 @@
+
+
+
+function setIdActive(id) {
+    const menu = document.getElementById(id);
+
+    // const navMenu = document.querySelectorAll("#nav-bar a");
+
+    // navMenu.forEach(item => {
+    //     item.classList.remove("active");
+    // });
+
+    menu.classList.add("active");
+}

static/script/popup.js

@@ -0,0 +1,33 @@
+const images = [...document.querySelectorAll('.image')];
+
+// popup
+
+const popup = document.querySelector('.popup');
+const closeBtn = document.querySelector('.close-btn');
+const largeImage = document.querySelector('.large-image');
+
+
+popup.addEventListener('click', (e) => {
+
+    const bound = largeImage.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+
+    if (!(x >= bound.left && x <= bound.right &&
+        y >= bound.top && y <= bound.bottom)) {
+        popup.classList.toggle('active');u
+    }
+});
+
+images.forEach((item, i) => {
+    item.addEventListener('click', () => {
+
+        largeImage.src = item.src;
+        popup.classList.toggle('active');
+    })
+})
+
+
+closeBtn.addEventListener('click', () => {
+    popup.classList.toggle('active');
+})

static/script/script.js

@@ -0,0 +1,260 @@
+
+const fileInput = document.getElementById('file-input');
+const button = document.getElementById('button');
+const errorMessage = document.getElementById('error-message');
+const container = document.getElementById('container');
+
+const imageContainer = document.getElementById('image-container');
+const previewImage = document.getElementById('file-image');
+const resultImage = document.getElementById('result-image');
+
+
+const fileTitle = document.querySelector(".title");
+const predInfo = document.querySelector(".pred-info");
+
+const predictedValue = document.querySelector(".pred-info h3 span");
+
+
+const topPred = document.querySelector(".pred-info ul");
+
+
+
+const sendByCanvas = document.getElementById("canvas-send");
+
+
+function createBlobFromImageData(imageData, mimeType = "image/jpeg") {
+    const buffer = new ArrayBuffer(imageData.length);
+    const view = new Uint8Array(buffer);
+    for (let i = 0; i < imageData.length; i++) {
+        view[i] = imageData.charCodeAt(i);
+    }
+
+    return new Blob([buffer], { type: mimeType });
+}
+
+
+function initialState() {
+    button.textContent = 'Choose file';
+    predInfo.style.display = 'none';
+    fileTitle.textContent = "Upload your file here";
+    imageContainer.style.display = 'none';
+}
+
+function displayError(message, timeout = 3000) { // Set default timeout if needed
+    errorMessage.textContent = message;
+    errorMessage.style.display = 'block';
+    initialState();
+    setTimeout(() => {
+        errorMessage.style.display = 'none';
+    }, timeout);
+}
+
+
+async function sendImageToServer(image, filename) {
+
+
+
+    // Send the file to the server using Fetch API
+    try {
+        const formData = new FormData();
+
+        console.log(image)
+
+        const base64Data = image.split(',')[1];
+
+        formData.append('file-input-64', base64Data);
+
+
+
+
+        // formData.append('file-name', filename);
+
+        // console.log(`form data ${formData}`);
+
+
+        predInfo.style.display = 'none';
+        button.textContent = 'Processing....';
+        fileTitle.textContent = filename;
+
+
+
+        console.log("Submit button is clicked");
+
+        const response = await fetch('/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        topPred.innerHTML = "";
+        console.log('I am here')
+
+        const jsonData = await response.json();
+
+        console.log(jsonData)
+        console.log(typeof (jsonData))
+        const jsonObject = JSON.parse(jsonData);
+
+        if (!response.ok) {
+            throw new Error(`Error uploading file: ${jsonData.error}`);
+        }
+
+        resultImage.src = `data:image/jpeg;base64,` + jsonObject["ig"];
+        predInfo.style.display = 'flex';
+
+        predictedValue.textContent = `${jsonObject.item[0]} ( ${(jsonObject.prob[0] * 100).toFixed(3)}%)`;
+
+        for (let index = 0; index < jsonObject.item.length; index++) {
+            const newItem = document.createElement("li");
+            newItem.textContent = `${jsonObject.item[index]} ( ${(jsonObject.prob[index] * 100).toFixed(3)}%)`
+            topPred.appendChild(newItem);
+        }
+
+
+        // Handle successful upload response (e.g., display message)
+        console.log('File uploaded successfully!');
+
+    } catch (error) {
+        // errorMessage.textContent = `Error uploading file: ${error.message}`;
+        displayError(error.message);
+    } finally {
+        // Hide progress message (optional)
+        button.textContent = 'Choose file';
+    }
+}
+
+async function sentImageDataToSeverViaImage(event) {
+
+    const file = event.target.files[0];
+    const allowedExtensions = ['jpeg', 'jpg'];
+
+    const extension = file.name.split('.').pop().toLowerCase();
+
+
+    // console.log(extension);
+
+    if (!allowedExtensions.includes(extension)) {
+        event.target.value = ''; // Clear file selection
+        displayError('Invalid file format. Please upload a JPG or JPEG image.')
+    } else {
+
+
+        const reader = new FileReader();
+
+
+        reader.onload = function (event) {
+            previewImage.src = event.target.result;
+            resultImage.src = '';
+
+            imageContainer.style.display = 'flex';
+
+        };
+
+        reader.readAsDataURL(file); // Read the file and convert it to a data URL
+
+
+        // Send the file to the server using Fetch API
+        try {
+            const formData = new FormData();
+            formData.append('file-input', file);
+
+
+
+            button.textContent = 'Processing....';
+            fileTitle.textContent = file.name;
+            predInfo.style.display = 'none';
+
+
+
+
+            const response = await fetch('/upload', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                throw new Error(`Error uploading file: ${response.statusText}`);
+            }
+
+            topPred.innerHTML = "";
+
+            const jsonData = await response.json();
+
+            console.log(jsonData)
+            console.log(typeof (jsonData))
+            const jsonObject = JSON.parse(jsonData);
+
+
+            resultImage.src = `data:image/jpeg;base64,` + jsonObject["ig"];
+            predInfo.style.display = 'flex';
+
+            predictedValue.textContent = `${jsonObject.item[0]} ( ${(jsonObject.prob[0] * 100).toFixed(3)}%)`;
+
+            for (let index = 0; index < jsonObject.item.length; index++) {
+                const newItem = document.createElement("li");
+                newItem.textContent = `${jsonObject.item[index]} ( ${(jsonObject.prob[index] * 100).toFixed(3)}%)`
+                topPred.appendChild(newItem);
+            }
+
+
+            // Handle successful upload response (e.g., display message)
+            console.log('File uploaded successfully!');
+
+        } catch (error) {
+            errorMessage.textContent = `Error uploading file: ${error.message}`;
+        } finally {
+            // Hide progress message (optional)
+            button.textContent = 'Choose file';
+        }
+        errorMessage.style.display = 'none'; // Hide the error message
+    }
+}
+
+
+async function sentImageDataToSeverViaCanvas() {
+    const canvas = document.getElementById('drawing-board'); // Replace with your canvas ID
+    var dataURL = canvas.toDataURL("image/jpeg");
+
+    previewImage.src = dataURL;
+    resultImage.src = '';
+
+    imageContainer.style.display = 'flex';
+
+    // // Create a dummy link text
+    // var a = document.createElement('a');
+    // // Set the link to the image so that when clicked, the image begins downloading
+    // a.href = dataURL
+    // // Specify the image filename
+    // a.download = 'canvas-download.jpeg';
+    // // Click on the link to set off download
+    // a.click();
+
+    closeDialog();
+
+    await sendImageToServer(dataURL, 'canvas_image.jpeg');
+
+
+
+
+}
+
+
+
+button.addEventListener('click', () => {
+    errorMessage.style.display = 'none';
+    fileInput.click();
+});
+
+
+
+
+sendByCanvas.addEventListener('click', async () => {
+
+
+
+    sentImageDataToSeverViaCanvas();
+});
+
+
+fileInput.addEventListener('change', async (event) => {
+    sentImageDataToSeverViaImage(event);
+});

static/style/about.css

@@ -0,0 +1,93 @@
+#my-table {
+    width: 100%;
+    border-collapse: collapse;
+    /* border-radius: 8px; */
+    border-radius: 8px;
+}
+
+.container {
+    margin: 2%;
+}
+
+#table-container {
+    border-radius: 12px;
+
+}
+
+#my-table th,
+#my-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+tr:nth-child(odd) {
+    background: #e6e1e1;
+}
+
+#my-table th {
+    background-color: #a7cefa;
+    color: white;
+}
+
+#table-container button {
+    display: inline-block;
+    padding: 6px 12px;
+    margin: 10px 0;
+    cursor: pointer;
+}
+
+#table-container button:hover {
+    /* background-color: #45a049; */
+    border-color: #0F79EF;
+}
+
+
+#my-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: 8px;
+    /* Add border radius for roundish feel */
+}
+
+#my-table th,
+#my-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+    color: #333;
+    /* Set text color */
+}
+
+tr:nth-child(odd) {
+    background: #f9f9f9;
+    /* Lighter background color for odd rows */
+}
+
+#my-table th {
+    background-color: #4a90e2;
+    /* Blue background for table header */
+    color: white;
+}
+
+#table-container button {
+    display: inline-block;
+    padding: 6px 12px;
+    margin: 10px 0;
+    cursor: pointer;
+    background-color: #4a90e2;
+    /* Blue button background */
+    color: white;
+    /* Button text color */
+    border: 1px solid #4a90e2;
+    /* Button border color */
+    border-radius: 4px;
+    /* Button border radius */
+}
+
+#table-container button:hover {
+    background-color: #0F79EF;
+    /* Darker blue on hover */
+    border-color: #0F79EF;
+    /* Darker blue for border on hover */
+}

static/style/dialog.css

@@ -0,0 +1,121 @@
+#dialog-area {
+    /* min-width: 50vw;
+    max-width: 60vw;
+    min-height: fit-content;
+
+    max-height: 60vh; */
+
+
+
+    /* height: 300px; */
+    width: 300px;
+    height: 300px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+
+
+    /* padding-bottom: 24px; */
+    padding-right: 12px;
+    padding-left: 12px;
+
+    /* border-width: 2px;
+    border: 2px solid black; */
+
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+
+    background-color: #f2f2f2;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
+    z-index: 999;
+
+}
+
+.close {
+    font-size: 45px;
+    font-weight: 600;
+}
+
+
+#canvas-send {
+    margin: 0 auto;
+    flex: 1;
+}
+
+#clear-btn {
+    height: 30px;
+    width: 30px;
+    margin-right: 5px;
+
+    cursor: pointer;
+}
+
+
+
+.drawing-board {
+    margin-top: 20px;
+    /* padding: 12px;
+    padding-left: 30px; */
+    margin-bottom: 8px;
+}
+
+#drawing-board {
+
+
+    margin: 20px;
+    width: 100%;
+    /* height: 100%; */
+
+    flex: 1;
+    margin: 0 auto;
+    background-color: #f2f2f2;
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
+}
+
+.action-section {
+
+    margin-top: 10px;
+    display: flex;
+    /* height: 50px; */
+    flex-direction: row;
+    /* justify-content: flex-end; */
+    height: 35px;
+}
+
+
+
+canvas {
+    width: 100%;
+    height: 100%;
+}
+
+
+
+
+#close-cntr {
+    display: flex;
+    justify-content: start;
+}
+
+
+#close-cntr span:hover {
+    cursor: pointer;
+}
+
+
+#overlay {
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 998;
+
+    display: none;
+}

static/style/help.css

@@ -0,0 +1,53 @@
+.container {
+    margin: 2%;
+}
+
+
+.faq {
+    margin-bottom: 20px;
+    position: relative;
+    /* Required for arrow positioning */
+}
+
+.faq-question {
+    cursor: pointer;
+    font-weight: bold;
+    padding: 10px 15px;
+    border-bottom: 1px solid #ddd;
+    position: relative;
+    /* Required for arrow positioning */
+}
+
+.faq-answer {
+    padding: 10px 15px;
+    display: none;
+}
+
+.faq-answer.show {
+    display: block;
+}
+
+.faq-arrow {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid #ddd;
+    position: absolute;
+    /* Position the arrow */
+    right: 10px;
+    /* Place it on the right edge */
+    top: 50%;
+    transform: translateY(-50%);
+    /* Vertical centering */
+    transition: transform 0.3s ease-in-out;
+}
+
+.faq-answer.show .faq-arrow {
+    transform: translateY(-50%) rotate(180deg);
+    /* Rotate on expand */
+}
+
+
+
+

static/style/home.css

@@ -0,0 +1,90 @@
+body {
+    text-align: center;
+
+}
+
+#banner {
+    /* Set image to full width and height */
+    width: 100%;
+    height: 25vh;
+
+    /* Maintain image aspect ratio and avoid distortion */
+    object-fit: contain;
+
+
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+
+    /* Optional: Center the image vertically */
+    /* position: absolute; */
+    /* top: 50%; */
+    /* transform: translateY(-50%); */
+}
+
+#blank-area {
+    height: 25vh;
+    width: 100%;
+    background-color: #252525;
+    /* margin-top: 20vh; */
+
+    /* background-color: rgb(102, 91, 91); */
+    /* background-image: url("./banner.png"); */
+    /* background-position: -20px; */
+    margin-bottom: 50px;
+    /* background-repeat: no-repeat;
+    background-size: contain; */
+
+}
+
+#container {
+    /* width: 400px; */
+    height: 20vh;
+    margin: 0 auto;
+
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.title {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.button {
+    background-color: red;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.file-input {
+    display: none;
+}
+
+#image-container {
+    display: none;
+    text-align: center;
+    justify-content: center;
+
+    flex-wrap: wrap;
+
+
+}
+
+#image-container div {
+    width: 200px;
+}
+
+#file-image {
+    max-width: 200px;
+}
+
+
+
+#result-image {
+    max-width: 200px;
+
+
+    transition: transform 0.5s ease-in-out;
+}

static/style/info-panel.css

@@ -0,0 +1,57 @@
+  .info-panel {
+      width: 70%;
+      padding: 20px;
+      background-color: white;
+      border-radius: 5px;
+
+      margin: 0 auto;
+      margin-bottom: 20px;
+
+      display: flex;
+      flex-wrap: wrap;
+
+
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  .info-panel .pred-info {
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+      flex: 1;
+
+      display: none;
+
+      transition: display 1s ease-in-out;
+  }
+
+
+  .info-panel .img-info {
+      flex: 2;
+      padding-left: 12px;
+
+      text-align: left;
+
+      transition: width 1s ease-out;
+  }
+
+  .info-panel ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+  }
+
+  .bar {
+      height: 70px;
+      width: 5px;
+
+
+      background-color: red;
+  }
+
+
+  .img-info label {
+      display: flex;
+      justify-content: flex-end;
+      /* Align label content to end */
+  }

static/style/navbar.css

@@ -0,0 +1,71 @@
+#nav-bar {
+    /* padding-top: 8px; */
+    padding-left: 8px;
+    /* padding-bottom: 50px; */
+    padding-right: 8px;
+
+
+    background-color: white;
+
+
+    display: flex;
+    align-items: center;
+    /* Ensure vertical alignment */
+    justify-content: space-between;
+
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+
+    /* Distribute evenly */
+}
+
+
+#nav-bar img {
+    max-height: 75px;
+    /* Adjust as needed */
+}
+
+#nav-bar a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.nav-area {
+    display: flex;
+}
+
+.logo-area {
+    display: flex;
+    flex: 1;
+
+
+
+    display: flex;
+    align-items: center;
+    /* Optional, depending on desired alignment */
+
+}
+
+.logo-area span {
+    padding-bottom: 0;
+    /* padding-top: 12px; */
+}
+
+#nav-bar span {
+    padding: 12px;
+    font-weight: bold;
+}
+
+#nav-bar span:hover {
+    /* background-color: rgb(180, 173, 173); */
+    justify-content: center;
+    cursor: pointer;
+    color: #0F79EF;
+
+}
+
+#nav-bar a.active {
+    color: #0F79EF;
+    /* text-decoration: underline;
+    text-decoration-color: red;
+    text-decoration-thickness: 4px; */
+}

static/style/popup.css

@@ -0,0 +1,50 @@
+.popup {
+    display: none;
+    /* Initially hide the modal */
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    /* Transparent background with slight opacity */
+    text-align: center;
+    z-index: 10;
+    /* Ensure modal stays above other content */
+}
+
+.popup.active {
+    display: block;
+    /* Show the modal when the 'active' class is added */
+}
+
+.top-bar {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.close-btn {
+    color: red;
+    font-size: 36px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: 0.3s ease;
+}
+
+.close-btn:hover {
+    color: #f1f1f1;
+}
+
+.large-image {
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    display: block;
+}
+
+.image {
+    cursor: pointer;
+}

static/style/style.css

@@ -0,0 +1,64 @@
+body {
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    /* padding: 20px; */
+    background-color: #f2f2f2;
+}
+
+
+#error-message {
+    color: white;
+    background-color: red;
+    padding: 30px;
+    border-radius: 5px;
+    font-size: 14px;
+    display: none;
+
+
+    font: size 32px;
+    font-weight: bold;
+
+    position: fixed;
+
+    top: 90%;
+    left: 81%;
+    transform: translate(-50%, -50%);
+
+    /* Center the message horizontally and vertically */
+    width: 400px;
+    /* Specify desired width */
+    text-align: center;
+    z-index: 999;
+    /* Ensure the message is on top of other elements */
+    animation: fade-in 0.5s ease-in-out;
+    /* Add a smooth fade-in animation */
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+#error-message.fade-out {
+    animation: fade-out 0.5s ease-in-out backwards;
+    /* Add a smooth fade-out animation */
+}
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+
+

templates/about.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/about.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+
+</head>
+
+<body>
+
+    {% extends 'layout.html' %}
+
+    {% block content %}
+
+
+    <div class="container">
+
+        <h1>Developing an Interpretable Nepali Handwritten Character Recognizer</h1>
+
+        This project was driven by the desire to create a robust and informative character recognition system for the
+        Nepali
+        language. We believe that understanding how models make decisions is crucial for building trust and
+        transparency,
+        especially in culturally significant domains like handwriting recognition.
+
+
+        <h3>Technology Stack</h3>
+        <ul>
+            <li>
+                Programming language: Python
+            </li>
+            <li>
+                Deep learning libraries: PyTorch
+            </li>
+            <li>
+                Visualization tools:Matplotlib
+            </li>
+            <li>
+                Web Stack: FlaskI
+            </li>
+        </ul>
+
+        <!-- <h3>Future Plans</h3>
+
+        - Expanding character set recognition
+        - Enhancing interpretability methods
+        - Integrating with educational or assistive technologies
+
+        We are committed to advancing this project and its capabilities. We welcome your feedback and collaboration! -->
+
+        <h2>Metrices</h2>
+
+        <div id="confusion_matrix_cnt" style="width: 90%;"></div>
+
+
+        <h3>Classification Report</h3>
+
+        <div id="table-container">
+            <table id="my-table">
+                <thead>
+                    <tr>
+                        <th>Class</th>
+                        <th>Precision</th>
+                        <th>Recall</th>
+                        <th>F1 score</th>
+
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- Table rows will be added here -->
+                </tbody>
+            </table>
+
+            <!-- Pagination buttons -->
+            <button id="prev-btn">Previous</button>
+            <span id="page-info"></span>
+            <button id="next-btn">Next</button>
+        </div>
+
+
+
+
+        <script src="{{ url_for('static', filename='script/plotly.js') }}"></script>
+        <script src="{{ url_for('static', filename='script/metrices.js') }}"></script>
+
+
+
+    </div>
+
+    <script>
+        setIdActive("about-men");
+    </script>
+    {% endblock %}
+
+</body>
+
+</html>

templates/components/navbar.html

@@ -0,0 +1,13 @@
+<div id="nav-bar">
+    <div class="logo-area">
+        <a href="/"><img src="{{ url_for('static', filename='logo.png') }}"></a>
+        <a href="/help" id="help-men"><span>Help</span></a>
+
+    </div>
+    <div class="nav-area">
+        <a href="/" id="home-men"><span>Home</span></a>
+        <a href="/about" id="about-men"> <span>About</span></a>
+    </div>
+
+    <script src="{{ url_for('static', filename='script/nav.js') }}"></script>
+</div>

templates/help.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Help</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/help.css') }}">
+</head>
+
+<body>
+    {% extends 'layout.html' %}
+
+    {% block content %}
+
+    <div class="container">
+
+
+        <h1>Getting Started</h1>
+
+        <li> Upload a clear image of a handwritten Nepali character in supported formats (e.g., JPG, JPEG).</li>
+        <li> The recognized character will be displayed, along with a visualization of the pixels that influenced the
+            prediction.</li>
+
+
+
+
+        <h3>FAQ</h3>
+
+        <div class="faq">
+            <h3 class="faq-question">What character sets are supported?</h3>
+            <div class="faq-answer">
+                Currently, the model recognizes all basic Nepali characters (क्ष, त्र,ज्ञ,etc.).
+            </div>
+        </div>
+        <div class="faq">
+            <h3 class="faq-question">How accurate is the recognition?</h3>
+            <div class="faq-answer">
+                The accuracy rate is 97.5% on a standard test dataset.
+            </div>
+        </div>
+        <div class="faq">
+            <h3 class="faq-question">Will you add support for more features?</h3>
+            <div class="faq-answer">
+                We are actively working on improving the model and adding new
+                features. Stay tuned for updates!
+            </div>
+        </div>
+
+
+    </div>
+    <script src="{{ url_for('static', filename='script/faq.js') }}"></script>
+    <script>
+        setIdActive("help-men");
+    </script>
+    {% endblock %}
+
+
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>अक्षर</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/home.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/info-panel.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/dialog.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/popup.css') }}">
+    <link rel="icon" href="{{ url_for('static', filename='logo.png') }}" type="image/x-icon">
+</head>
+
+<body>
+
+    {% extends 'layout.html' %}
+
+    {% block content %}
+
+
+    <div id="blank-area">
+        <img id="banner" src="{{ url_for('static', filename='banner.png') }}">
+    </div>
+
+
+
+    <!-- <div id="container">
+       
+
+    </div> -->
+
+
+
+    <div class="popup">
+        <div class="top-bar">
+            <span class="close-btn">&times;</span>
+        </div>
+        <img src="" class="large-image" alt="">
+    </div>
+
+
+
+
+    <div class="info-panel">
+        <div class="pred-info">
+            <h3>Predicted Label: <span></span></h3>
+            <h5>Top 3 Predictions:</h5>
+            <ul>
+            </ul>
+        </div>
+
+        <div class="bar"></div>
+
+        <div class="img-info">
+            <h3>Photos</h3>
+            <h6 class="title">Upload your file here</h6>
+            <div id="image-container">
+                <img id='file-image'>
+                <img id='result-image' class="image">
+            </div>
+
+
+            <div style="display: flex;flex-direction: row;justify-content: flex-end;">
+                <label style="margin-right: 12px;">
+                    <button class="button" id="try-btn" style="background-color: #1363EF;" onclick="showDialog()">Try
+                        Yourself</button>
+                </label>
+
+                <label for="file-input">
+                    <input type="file" id="file-input" class="file-input" accept="image/jpeg,image/jpg">
+                    <button class="button" id="button">Choose file </button>
+                </label>
+            </div>
+        </div>
+
+    </div>
+
+
+    <div id="overlay"></div>
+    <div id="dialog-area" style="display: none;">
+
+        <div id="close-cntr"> <span
+                style="padding-left: 90px; padding-top: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 18px;font-weight: bold;">
+                PLAYGROUND</span>
+            <div style="flex: 1;"></div><span class="close" onclick="closeDialog()">×</span>
+        </div>
+
+        <div class="drawing-board">
+            <canvas id="drawing-board"></canvas>
+        </div>
+        <span
+            style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 12px;font-weight: 600; color: grey;">NOTE:
+            Make sure to cover the drawing area</span>
+        <div class="action-section">
+            <img src="{{ url_for('static', filename='clear.png') }}" id="clear-btn" onclick="clearCanvas()">
+            <button class="button" style="background-color: #1363EF;" id="canvas-send">Submit</button>
+        </div>
+
+    </div>
+
+
+
+
+    <div id="error-message"></div>
+    <script src="{{ url_for('static', filename='script/script.js') }}"></script>
+    <script src="{{ url_for('static', filename='script/dialog.js') }}"></script>
+    <script src="{{ url_for('static', filename='script/popup.js') }}"></script>
+
+
+    <script>
+        setIdActive("home-men");
+    </script>
+
+    {% endblock %}
+
+
+
+
+</body>
+
+</html>

templates/layout.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Website</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
+</head>
+<body>
+  {% include 'components/navbar.html' %}
+  <main>
+    {% block content %}{% endblock %}
+  </main>
+</body>
+</html>