imtoobose · pixelexel · Mar 24, 2018
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/studentapp/static/css/ocr_form.css b/studentapp/static/css/ocr_form.css
@@ -0,0 +1,70 @@
+.vertical-center {
+    min-height: 100%;
+    min-height: 100vh;
+
+    display: flex;
+    align-items: center;
+}
+
+.form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
+    margin-left: 2vw;
+    margin-right: 2vw;
+    height: 80vh;
+}
+
+.input-container {
+    min-height: 5vh;
+    display: flex;
+    align-items: center;
+}
+
+.image-result-container {
+    display: flex;
+    flex: 1;
+}
+
+.image-container {
+    border-color: black;
+    border-width: medium;
+    border-style: dashed;
+    margin-right: 1vw;
+    flex: 1;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-position: 0% 0%;
+    object-fit: scale-down;
+}
+
+.result-container {
+    border-style: dashed;
+    border-width: medium;
+    margin-left: 1vw;
+    flex: 1;
+    font-family: monospace;
+}
+
+.result-default {
+    border-color: black;
+}
+
+.result-error {
+    border-color: red;
+}
+
+.result-success {
+    border-color: green;
+}
+
+.button-container {
+    min-height: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
diff --git a/studentapp/static/js/ocr_form.js b/studentapp/static/js/ocr_form.js
@@ -0,0 +1,41 @@
+$(document).ready(function() {
+    var $imageInput = $("[data-js-image-input]");
+    var $imageContainer = $("[data-js-image-container]");
+    var $resultContainer = $("[data-js-result-container]");
+    $imageInput.change(function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        var file = event.target.files[0];
+
+        var fileReader = new FileReader();
+        fileReader.onload = (function(theFile) {
+            return function(event) {
+                $imageContainer.html('<img class="image" src="' + event.target.result + '">');
+            };
+        })(file);
+        fileReader.readAsDataURL(file);
+    });
+    $("[data-js-go-button]").click(function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        data = new FormData();
+        data.append('image', $imageInput[0].files[0]);
+        $.post({
+            url: "ocr",
+            data: data,
+            cache: false,
+            contentType: false,
+            processData: false
+        }).done(function(data) {
+            console.log(data);
+            $resultContainer.removeClass("result-default result-error");
+            $resultContainer.addClass("result-success");
+            $resultContainer.html(data.utf8_text);
+        })
+        .fail(function(jqXHR) {
+            $resultContainer.removeClass("result-default result-success");
+            $resultContainer.addClass("result-error");
+            $resultContainer.html('I AM ERROR');
+        });
+    });
+});
diff --git a/studentapp/templates/ocr_form.html b/studentapp/templates/ocr_form.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+        <title>OCR With Django</title>
+          <!-- Bootstrap -->
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <!-- Optional theme -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+        <!--[if lt IE 9]>
+          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <link rel="stylesheet" href="{% static 'css/ocr_form.css' %}"/>
+    </head>
+    <body>
+        <div class="vertical-center">
+            <div class="form-container">
+              <div class="input-container">
+                <div class="form-group">
+                  <label for="image">Chose an image...</label>
+                  <input type="file" id="image-input" data-js-image-input/>
+                </div>
+              </div>
+              <div class="image-result-container">
+                  <div class="image-container" data-js-image-container></img></div>
+                  <div class="result-container result-default" data-js-result-container>&nbsp;</div>
+              </div>
+              <div class="button-container"><button class="btn btn-default" type="button" data-js-go-button>Go!</button></div>
+            </div>
+        </div>
+        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <!-- Include all compiled plugins (below), or include individual files as needed -->
+        <!-- Latest compiled and minified JavaScript -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+        <script src="{% static 'js/ocr_form.js' %}"></script>
+    </body>
+</html>
diff --git a/studentapp/urls.py b/studentapp/urls.py
@@ -2,6 +2,7 @@
 from django.urls import path, include
 from . import views
 from django.contrib.auth import views as auth_views
+from studentapp.views import ocr_view, ocr_form_view #importing class based views
 
 
 urlpatterns = [
@@ -17,4 +18,6 @@
     path('get_student_data/<int:aadhar_id>/', views.getStudentData, name='getStudentData'),
     path('studentform/new', views.studentform, name = 'studentform'),
     path('chatbot', views.chatbot, name='chatbot'),
+    path('ocr/ocr', ocr_view, name='ocr_view'),
+    path('ocr/form', ocr_form_view, name='ocr_form_view'),
 ]
diff --git a/studentapp/views.py b/studentapp/views.py
@@ -8,6 +8,11 @@
 import datetime
 from pprint import pprint
 from .forms import StudentForm
+from django.views.generic.base import View, TemplateView
+#install a few things to get the next two imports working
+from PIL import Image, ImageFilter
+from tesserocr import PyTessBaseAPI
+from django.views import View
 # Create your views here.
 
 def index(req):
@@ -416,3 +421,21 @@ def chatbot(request):
 			return JsonResponse({
 				'error': 'false',
 			})
+
+class OcrFormView(TemplateView):
+    template_name = 'ocr_form.html'
+ocr_form_view = OcrFormView.as_view()
+
+
+class OcrView(View):
+    def post(self, request, *args, **kwargs):
+        with PyTessBaseAPI() as api:
+            with Image.open(request.FILES['image']) as image:
+                image = image.convert('RGB')
+                sharpened_image = image.filter(ImageFilter.SHARPEN)
+                api.SetImage(sharpened_image)
+                utf8_text = api.GetUTF8Text()
+
+        return JsonResponse({'utf8_text': utf8_text})
+ocr_view = csrf_exempt(OcrView.as_view())
+