Upload 12 files

app.py

@@ -0,0 +1,6 @@
+from flask import Flask
+from views import views
+
+app = Flask(__name__)
+app.register_blueprint(views,url_prefix='/views')
+app.config['MAX_CONTENT_LENGTH'] = 128 * 1024 * 1024

models/ocr_big_1.h5

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

models/ocr_new_1.h5

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

static/script.js

@@ -0,0 +1,110 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('outimg').style.display = 'none'
+    document.getElementById('loader').style.visibility = 'hidden'
+    const canvas = document.getElementById('drawing-area');
+    const canvasContext = canvas.getContext('2d');
+    const clearButton = document.getElementById('clear-button');
+    const saveButton = document.getElementById('save-button');
+    const state = {
+        mousedown: false
+    };
+
+    const baseLineWidth = 3;
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const lineWidth = baseLineWidth * devicePixelRatio*(7/9);
+    const strokeStyle = '#333';
+
+    canvas.addEventListener('mousedown', handleWritingStart);
+    canvas.addEventListener('mousemove', handleWritingInProgress);
+    canvas.addEventListener('mouseup', handleDrawingEnd);
+    canvas.addEventListener('mouseout', handleDrawingEnd);
+
+    canvas.addEventListener('touchstart', handleWritingStart);
+    canvas.addEventListener('touchmove', handleWritingInProgress);
+    canvas.addEventListener('touchend', handleDrawingEnd);
+
+    clearButton.addEventListener('click', handleClearButtonClick);
+    saveButton.addEventListener('click', handleSaveButtonClick);
+
+    function handleWritingStart(event) {
+        event.preventDefault();
+        state.mousedown = true;
+        const mousePos = getMousePositionOnCanvas(event);
+        canvasContext.beginPath();
+        canvasContext.moveTo(mousePos.x, mousePos.y);
+        canvasContext.lineWidth = lineWidth;
+        canvasContext.strokeStyle = strokeStyle;
+        canvasContext.shadowColor = null;
+        canvasContext.shadowBlur = 0;
+    }
+
+    function handleWritingInProgress(event) {
+        event.preventDefault();
+        if (state.mousedown) {
+            const mousePos = getMousePositionOnCanvas(event);
+            canvasContext.lineTo(mousePos.x, mousePos.y);
+            canvasContext.stroke();
+        }
+    }
+
+    function handleDrawingEnd(event) {
+        event.preventDefault();
+        if (state.mousedown) {
+            canvasContext.shadowColor = null;
+            canvasContext.shadowBlur = 0;
+            canvasContext.stroke();
+        }
+        state.mousedown = false;
+    }
+
+    function handleClearButtonClick(event) {
+        event.preventDefault();
+        document.getElementById('outimg').style.display = 'none'
+        document.getElementById('outtext').textContent = 'Your Output will be displayed here'
+        clearCanvas();
+    }
+
+    function handleSaveButtonClick(event) {
+        event.preventDefault();
+        const dataUrl = canvas.toDataURL();
+        sendDataToFlask(dataUrl);
+    }
+
+    function getMousePositionOnCanvas(event) {
+        const clientX = event.clientX || (event.touches && event.touches[0].clientX);
+        const clientY = event.clientY || (event.touches && event.touches[0].clientY);
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;   
+        const scaleY = canvas.height / rect.height;
+        const canvasX = (clientX - rect.left) * scaleX;
+        const canvasY = (clientY - rect.top) * scaleY;
+        return { x: canvasX, y: canvasY };
+    }
+
+    function clearCanvas() {
+        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+   async function sendDataToFlask(dataUrl) {
+        document.getElementById('loader').style.visibility = 'visible'
+        const response = await fetch('/views', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ image: dataUrl })
+        })
+
+        const data = await response.json()
+        const output_image = `data:image/png;base64,${data.output_image}`
+        const output_string = data.output_string
+        if(output_string){
+        document.getElementById('outimg').style.display = "block"
+        document.getElementById('outtext').textContent = output_string
+        document.getElementById('outimg').src = output_image;
+        }
+        document.getElementById('loader').style.visibility = 'hidden'
+    }
+    
+
+});

static/styles.css

@@ -0,0 +1,149 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+.main {
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(
+    90deg,
+    #f51d88 0%,
+    #ff6200 50%,
+    black 50%,
+    black 100%
+  );
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.nav {
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.title {
+  font-weight: 800;
+  font-size: 3rem;
+  text-decoration: underline;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.drawing-area {
+  background-color: white;
+  width: 100%;
+  height: 450px;
+  cursor: pointer;
+  border: 2px solid white;
+  border-radius: 12px;
+}
+
+.clear-button {
+  margin: 2em;
+  font-size: 16px;
+}
+.maincontainer {
+  background-color: transparent;
+  width: 65%;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid white;
+  border-radius: 12px 12px;
+  padding: 12px;
+  backdrop-filter: blur(25px);
+}
+
+.form-label {
+  font-weight: 600 !important;
+}
+
+.inputcont {
+  margin-bottom: 1rem;
+}
+
+.buttoncont {
+  display: flex;
+  margin-bottom: 0.2rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn {
+  background-color: black;
+  width: 130px;
+  height: 50px;
+  color: white;
+  font-weight: 700;
+  font-size: 20px;
+  border: 2px solid white;
+  transition: 0.5s all;
+}
+.clear-button:hover {
+  background-color: black;
+  box-shadow: 10px 10px white;
+}
+.save-button {
+  background: linear-gradient(90deg, #f51d88 0%, #ff6200 50%, #ff6200 100%);
+}
+
+.save-button:hover {
+  background: linear-gradient(90deg, #f51d88 0%, #ff6200 50%, #ff6200 100%);
+  box-shadow: 10px 10px white;
+}
+.outimg {
+  width: 100%;
+  height: 450px;
+  border: 2px solid white;
+  border-radius: 12px;
+}
+
+.outtextcont {
+  display: flex;
+  justify-content: center;
+  min-height: 2rem;
+  border: 1px solid white;
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  backdrop-filter: blur(30px);
+  padding: 5px;
+}
+
+.outtext {
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+.loader {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  background-color: black;
+  opacity: 0.7;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.gifdiv {
+  background-color: transparent;
+}
+.gif {
+  border-radius: 12px !important;
+}
+@media (max-width: 800px) {
+  .maincontainer {
+    width: 90%;
+  }
+
+  .clear-button {
+    margin-left: 0;
+  }
+}

templates/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCR_RECOGNITON</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <script src="	https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body>
+    <div id="loader" class="loader">
+      <div class="gifdiv">
+        <img class="gif" src="{{ url_for('static', filename='images/dollar.gif') }}" alt="gif">
+      </div>
+    </div>
+    <div class="main">
+        <nav class="nav"> <div class="title">Optical Character Recognition</div></nav> 
+       <div class="maincontainer">
+        <div class="outtextcont">
+          <div class="outtext" id="outtext"> Your Output will be displayed here</div>
+        </div> 
+          <div class="canvascontainer"> 
+            <canvas id="drawing-area" class="drawing-area"></canvas>
+            <div class="buttoncont">
+              <button type="submit" class="btn clear-button" id="clear-button">Clear</button>
+              <button id="save-button" class="save-button btn" type="button">Save</button>
+            </div>
+          </div>
+    
+          <div class="outimgcont">
+            <img class="outimg" id="outimg" src="" alt="">
+          </div>
+        </div>
+    </div>
+    <script src="{{ url_for('static', filename='script.js') }}"></script>  
+</body>
+</html>

utils.py

@@ -0,0 +1,112 @@
+import cv2
+import numpy as np
+char_list = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C',
+       'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q',
+       'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+
+
+char_list_sub = ['A','9','G','Q','8','6']  
+
+mappings = {i: char_list[i] for i in range(len(char_list))}
+
+font = cv2.FONT_HERSHEY_TRIPLEX
+font_scale = 0.5
+color = (255, 255, 0) 
+thickness = 1
+ 
+def predict(model, sub_model, img,mappings):
+
+    kernel = np.array([[-1, -1, -1],
+                       [-1,  9, -1],
+                       [-1, -1, -1]])
+    img = cv2.resize(img,(32,32))
+    img = cv2.cvtColor(img,cv2.COLOR_RGB2GRAY)
+ 
+    img = cv2.filter2D(img, -1, kernel)
+    _, img = cv2.threshold(img, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+    img = cv2.dilate(img,(3,3),iterations=1)
+    img = img/255.
+    img = img.astype('float32')
+
+    predval = model.predict(np.expand_dims(img,axis=0))
+    argval =np.argmax(predval,axis=-1)
+    result = mappings[argval[0]]
+    
+    if result in char_list_sub:
+        predval_new = sub_model.predict(np.expand_dims(img,axis=0))
+        argval_new =np.argmax(predval_new,axis=-1)
+        result_new = mappings[argval_new[0]] 
+
+        if result == '6' and result_new == 'G':
+            return result
+        return result_new
+
+    return result
+
+
+def get_results(uploaded_image):
+    original_image = uploaded_image
+    image = cv2.cvtColor(original_image,cv2.COLOR_BGR2GRAY)
+    x,y = image.shape
+    maxH = min(1000,x)  
+    maxW = min(1000,y)
+    original_image = cv2.resize(original_image,(maxW,maxH))
+
+
+    image = cv2.resize(image,(maxW,maxH))
+ 
+    _, black_white_image = cv2.threshold(image, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+
+    if black_white_image[10,10] == 255 or black_white_image[10,len(image[0])-10] == 255 or black_white_image[len(black_white_image)-1,10] == 255 or black_white_image[len(image)-10,len(image[0])-10] == 255:
+        black_white_image = 255 - black_white_image
+
+    num_labels, _, stats, _ = cv2.connectedComponentsWithStats(black_white_image, connectivity=8)
+    output_image = original_image.copy()
+
+    sorted_indices = sorted(range(num_labels), key=lambda i: (stats[i, cv2.CC_STAT_TOP],stats[i, cv2.CC_STAT_LEFT]))
+
+    grouped_indices = []
+    current_group = [sorted_indices[0]]
+
+    for i in range(1, num_labels):
+        current_index = sorted_indices[i]
+        prev_index = current_group[-1]
+    
+        if abs(stats[current_index, cv2.CC_STAT_TOP] - stats[prev_index, cv2.CC_STAT_TOP]) <= 20:
+            current_group.append(current_index)
+        else:
+            current_group.sort(key=lambda idx: stats[idx, cv2.CC_STAT_LEFT])
+            grouped_indices.extend(current_group)
+        
+            current_group = [current_index]
+
+    current_group.sort(key=lambda idx: stats[idx, cv2.CC_STAT_LEFT])
+    grouped_indices.extend(current_group)
+    sorted_indices = grouped_indices
+
+
+    detected_contours = []
+    coords = []
+    for i in sorted_indices:
+        if i == 0:
+            continue 
+        x, y, w, h, area = stats[i]
+        
+        widthFlag = w > 2 and w < 500 and w < (maxW-50)
+        heightFlag = h > 15  and h < 500 and h < (maxH-10) 
+        areaFlag = area > 15 and area < 100000
+        
+        if widthFlag and heightFlag and areaFlag:
+            samp = image[y:y+h,x:x+w]
+            samp = cv2.resize(samp,(32,32))
+            coords.append((x,y))
+            detected_contour = output_image[y:y+h,x:x+w]
+            bordered_contour = cv2.copyMakeBorder(detected_contour, 20, 20, 20, 20, cv2.BORDER_CONSTANT, value=[0, 0, 0])
+            detected_contours.append(bordered_contour)
+            cv2.rectangle(output_image, (x-2, y-2), (x + w+2, y + h+2), (0, 1, 0), 2)
+    output_image = output_image*255
+    return detected_contours,output_image,coords
+
+
+
+

views.py

@@ -0,0 +1,56 @@
+from utils import *
+from flask import Blueprint,render_template,request,jsonify
+import tensorflow as tf
+import base64
+import io
+from PIL import Image
+views = Blueprint("views",__name__)
+ 
+ocr_model = None  
+ocr_sub_model = None
+
+
+MODEL_PATH = 'models/ocr_big_1.h5'
+SUB_MODEL_PATH= 'models/ocr_new_1.h5'
+
+@views.route('/',methods=['GET','POST'])
+def index():  
+    global ocr_model
+    global ocr_sub_model 
+
+    if request.method == 'POST':
+        data = request.json['image']
+        head, data = data.split(',', 1)
+        image_data = base64.b64decode(data)
+    
+        image = Image.open(io.BytesIO(image_data)).convert('RGB')
+        
+        processed_image = np.array(image)
+        
+        if not ocr_model:
+            ocr_model =  tf.keras.models.load_model(MODEL_PATH)
+        if not ocr_sub_model:
+            ocr_sub_model = tf.keras.models.load_model(SUB_MODEL_PATH)
+
+
+        detected_contours,output_image, coords = get_results(processed_image)
+        output_string = ""
+        for i in range(len(detected_contours)):
+            predicted_char = predict(ocr_model, ocr_sub_model,detected_contours[i],mappings)
+
+            if predicted_char == '0':
+                output_string += 'O'
+                cv2.putText(output_image, 'O', (coords[i][0]+5,coords[i][1]-5), font, font_scale, color, thickness)
+            else:
+                cv2.putText(output_image, predicted_char, (coords[i][0]+5,coords[i][1]-5), font, font_scale, color, thickness)
+                output_string += predicted_char
+
+        
+        output_image = Image.fromarray(output_image, 'RGB')
+        data = io.BytesIO()
+        output_image.save(data, "JPEG") 
+        output_image = base64.b64encode(data.getvalue()).decode('utf-8')
+        return jsonify({'output_image': output_image, 'output_string': output_string})
+    return render_template('index.html')
+
+