dhamacher / image-text-detection-app

Get text from images with this application by leveraging Tesseract, Vue.js, and Flask

Introduction

This is a single page application (SPA) where users can upload an image and extract the text contained in that image.

Prerequisites

The following software packages are required to build and run the application locally and in docker

• Docker Desktop +20.10.8
• chocolatey package manager (Windows only)
• npm
• Python +3.9
• Node JS
• make

Build and Deploy with make

The below table provides more details about the make targets used to build, deploy, and run the application. In order to use them, run the make <Make Target> command in the project's root folder.

Make Target	Description
build-app	Build the images
build-app-no-cache	Build the images without cache
start-app	Start the application (requires a build first)
stop-app	Stop the application

Learning Outcomes

The following is a reflection on the learning outcomes while building this project.

1. Use Vue.js and leverage Vue.js components.
2. Provide Python API for feature extraction of uploaded images.
3. Perform feature engineering on uploaded images using opencv.
4. Use Tesseract OCR to get text from images.
5. Serve the application with Nginx.
6. Proxy API calls from Nginx to Flask.
7. Deploy with Docker as single images.
8. Deploy using docker-compose.
9. Deploy using a manifest on local kubernetes cluster.
10. Deploy using a manifest on to Azure kubernetes cluster.

References

• This project is based on a tutorial for building SPA with Flask and Vue.js, which is a awesome resource to get started with Vue.js and Flask

• This tutorial shows you how to upload files with Vue.js

• This resource is for displaying images in Vue.js

• This resource is great to learn how to install Tesseract-OCR on Linux

Additional Information and Commands

This section contains some helpful commands. Some require npm to be installed on your system.

Client Side Commands

Run the following commands inside the client/ folder

Add a Vue Plugin

vue add <name>

Build the Frontend App

Use command `npm run build`

Run Fontend App

use command `npm run serve` inside the **\src\client**

Run Frontend App in Production Preview Mode

Use command `server -s dist`

image-text-detection-app's Issues

Create Error Response whenever the "Extract Text" is not successful

Fix Intercommunication between Containers

Write setup.py Script for Environment Setup

The script should run only once and setup the following:

Create folders in the server directory:

• feature_images
• output
• uploaded_images

Improve Tesseract Performance with Feature Engineering

Read this guide on Improving the quality of the output to improve text extraction

Let Body of the Website continue to the bottom of the viewport

Landing Page Layout Needs Alignment

The layout needs to be fixed to be aligned in the center of the page.

Configure NGINX to Serve Vue.js

Make the Color Theme consistent across the App

Create Azure Kubernetes Cluster

Create docker-compose File

Create docker-compose file to start the application running as two services in docker

Implement Exception Handling in Python Modules

Use Build-Stages in Docker to Minimize Image Size

Minimize the Image Size from the Server

Things to try:

• Exclude folders not needed
• Review dockerfiles and remove unused packages
• Try to minimize more by using build stages

Fix Flask Docker Run Issue

The flask app is not running when the container starts due to an import error.

Parameterize Hard Coded Values

Create Manifest to Deploy the App to Kubernetes

Create Document Type Classification

Image preprocessing based on the type of document used for OCR, for example:

• Hand written notes
• Scanned Document
• Screenshots
• Picture

Create Makefile for Builds and Deployments

Create List of Environment Variables for Deployments