Analytics Vidhya
Published in

Analytics Vidhya

Build an OCR and SUMMARIZE Webapp using pytesseract, gensim, and Django

Photo by Nick Morrison on Unsplash

In this tutorial, we are going to build a web app that will extract text from an image and give a summary of the ocred text using gensim library.

Check out the final project here: http://emmamichael.pythonanywhere.com/

Let get in:

Setup Project and app

Create New Project using pycharm and name the project ocr. Open the terminal and install Django using the following command:

pip install Django==3.1.3

then run the following command to create a new django project named ocrandsummarize:

django-admin startproject ocrandsummarize .

run the command below to create a new app ‘oands’.

python manage.py startapp oands

Now we need to register the new app in INSTALLED_APPS. Since we are going to work with static and media files, we are going to add STATICFILES_DIRS, STATIC_ROOT, MEDIA_URL, MEDIA_ROOT settings to our settings.py file. Open settings.py file of ocrandsummarize directory and add the following code in ‘bold’.

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = #your secret key will be here

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'oands',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'ocrandsummarize.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'ocrandsummarize.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

# Add these new lines
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

open your terminal and run the command below to install pytesseract, gensim, pillow since we are going to work with pytesseract to extract text from images, gensim to summarize the ocred text and pillow to work with images:

pip install pillow==8.0.1

pip install pytesseract==0.3.6

pip install gensim==3.8.3

Add the following code in ‘bold’ to the urls.py file of our project directory ocrandsummarize. This code will include the urls.py file of our installed application, and also add configuration for our media files.

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static # new
from django.conf import settings # new

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('oands.urls')),
]

if settings.DEBUG: # new
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

The URL conf of our app

Create a ‘urls.py’ file in our app directory ‘oands’. Add the code below to create a resource locator to our view function called ‘index’ which will carry out most of the actions and also render our html file.

from django.urls import path
from .views import index

urlpatterns = [
path('', index, name='index'),
]

The Model

Add the code below to our models.py file of our app to create model called ‘Ocr’ with one image field.

from django.db import models


# Create your models here.
class Ocr(models.Model):
image = models.ImageField(upload_to='images/')

run the command below to create the model in our database:

python manage.py makemigrationspython manage.py migrate

Admins.py

We need to register our model to the admin. Add the code in bold to our admins.py of our app.

from django.contrib import admin

# Register your models here.
from .models import Ocr

admin.site.register(Ocr)

forms.py

Create a forms.py file in our app directory and add the code below to create our form which will render one field ‘image’ from the model.

from django import forms
from .models import Ocr


class ImageUpload(forms.ModelForm):
class Meta:
model = Ocr
fields = ['image']

The View

Open the views.py file of our app. This is where most of the functionality will be carried out, first, we will import pytesseract, summarize.., pytesseract will convert text in image to string, while summarize will assist to summarize the converted text.

from django.shortcuts import render

# import pytesseract to convert text in image to string
import pytesseract

# import summarize to summarize the ocred text
from gensim.summarization.summarizer import summarize

from .forms import ImageUpload
import os

# import Image from PIL to read image
from PIL import Image

from django.conf import settings


# Create your views here.
def index(request):
text = ""
summarized_text = ""
message = ""
if request.method == 'POST':
form = ImageUpload(request.POST, request.FILES)
if form.is_valid():
try:
form.save()
image = request.FILES['image']
image = image.name
path = settings.MEDIA_ROOT
pathz = path + "/images/" + image

text = pytesseract.image_to_string(Image.open(pathz))
text = text.encode("ascii", "ignore")
text = text.decode()



# Summary (0.1% of the original content).
summarized_text = summarize(text, ratio=0.1)
os.remove(pathz)
except:
message = "check your filename and ensure it doesn't have any space or check if it has any text"

context = {
'text': text,
'summarized_text': summarized_text,
'message': message
}
return render(request, 'formpage.html', context)

The code above will accept the uploaded image by the user, convert text in image to string, summarize the converted text and then render both converted text and summarized text to the html page which will be viewed by the user.

The Template

Create a folder called templates in the app directory of our project, then create an html file called ‘formpage.html’ inside the directory and add the following code:

<!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">
<title>OCR AN IMAGE AND SUMMARIZE</title>
<link href="{% static 'css/form.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/form.js' %}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body >
<div class="container">
<div class="form-container">
<p style="color: red;">{{message}}</p>
<h1>
Ocr an Image and Summarize Using Gensim
</h1>
<form method="POST" enctype=multipart/form-data>
{% csrf_token %}
<label> Image Upload:</label>
<input type="file" class="form-control" id="image" name="image" />
<button class="button-primary" type="submit" >Submit</button>
</form>

<label><h2>Ocred Text:</h2></label>
<span class="textarea" role="textbox" contenteditable>{{text}}</span>

<label><h2>Summarized Text:</h2></label>
<span class="textarea" role="textbox" contenteditable>{{summarized_text}}</span>

</div>
</div>
</body>


</html>

the form will send the uploaded image to our view called ‘index’ which will ocr the image and summarize the text. Both the raw ocred and summarized text will be displayed to the user in the ‘span’ tag

Styling

Create a folder called ‘static’ in our project directory and inside the folder, create another folder called ‘css’.

in the css folder, create a css file called ‘form.css’ and add the following code

@media  only screen and (min-device-width: 768px) 
{
.form-container {
padding: 5%;
background: #ffffff;
border: 9px solid #f2f2f2;
max-width: 520px;
margin: auto;
}
}
body
{
background: #00CED1;
}
h1, p
{
text-align: center;
}
input, textarea , button
{
width: 100%;
}
textarea
{
height: 200px;
} <span class="textarea" role="textbox" contenteditable>{{text}}</span>

The above code will add styling to our html tags.

Follow me on twitter: @emmakodes

linkedin: https://www.linkedin.com/in/emmanuelonwuegbusi/

Conclusion

Congrats, you have gotten to the end of this tutorial. You can check out the code here: https://github.com/emmakodes/ocrandsummarize

and don’t forget to checkout the live project here: http://emmamichael.pythonanywhere.com/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store