Building a Grammar Corrector App with React, Python, Flask, Tesseract and Gramformer

June 24th, 2021

Hello everyone, today I'll try to walk you through an application that would allow you to take an image file upload to a React Frontend apply OyCR (Optical Character Recognition) on it, send it to the Flask Backend, "gramformer" library will check and correct the grammar then we'll create a new PDF with the corrected text.

You can find the source code here, I'll not explain React and OCR part here again you can find it in a former post of mine here, if you are interested you can also follow along for React OCR - Sentiment Analysis application in the link I provided.

To be able to use "gramformer" you can go the github repo from the link here and follow the instructions. "gramformer" is dependent on "pytorch", you'll also need to install it in advance, if you don't already have it use the link and install it.

After everything is ready we can start working on our application.

We first set our manual seed to the torch then we initiate our "gramformer" class with corrector settings and GPU disabled, you can also enable it if you like but will work just fine without enabling it.

Then on a different folder, in my case that one was server.py, you should first import dependencies and then we can create our server. In this particular example our "/graformer" endpoint will accept both "GET" and "POST" requests yet "GET" requests are not particularly important here. In our payload we can if there is an "ocr" field in the request, if so we do grammar correction and add that corrected ones from corrected list to "to_return" string. Other than Flask only dependency we need is "fpdf" and you can get it here.

Then we create our "pdf" object, add a page into it, add our title. Handling longer strings is a bit trickier, I've chosen counting each character and then put a new line into the pdf after a certain amount of characters, to do that I created a list with a member for each line then looped over the list and created the PDF. I also returned the corrected text as well as a 200 status code.

Results: The input image I used is like that this one below.

The output we get out of it is this one. Funny part is I realized that my hardcoded PDF title is also shit could use a "gramformer" correction. :D

Either ways the results looked pretty decent to me, especially for such a low amount of effort. I I hope that it is really useful to you.

Until we see each other again, take care of yourselves and keep learning. :)