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:

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 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 file. Open 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

# 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


# Application definition



ROOT_URLCONF = 'ocrandsummarize.urls'

'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'context_processors': [

WSGI_APPLICATION = 'ocrandsummarize.wsgi.application'

# Database

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

# Password validation

'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



USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

# Add these new lines
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 file of our project directory ocrandsummarize. This code will include the 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('', 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 ‘’ 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 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 makemigrationspython migrate

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

from django.contrib import admin

# Register your models here.
from .models import Ocr

Create a 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 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():
image = request.FILES['image']
image =
path = settings.MEDIA_ROOT
pathz = path + "/images/" + image

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

# Summary (0.1% of the original content).
summarized_text = summarize(text, ratio=0.1)
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">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/form.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/form.js' %}"></script>
<link rel="stylesheet" href="" >
<script src=""></script>
<body >
<div class="container">
<div class="form-container">
<p style="color: red;">{{message}}</p>
Ocr an Image and Summarize Using Gensim
<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>

<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>



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


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;
background: #00CED1;
h1, p
text-align: center;
input, textarea , button
width: 100%;
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



Congrats, you have gotten to the end of this tutorial. You can check out the code here:

and don’t forget to checkout the live project here:



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