Build a web app to Extract Text From Image using Flask and Azure’s Computer Vision API

4 min readAug 26, 2021

Text recognition is of utmost importance in several applications. This helps in preserving the information, easy storage and also permits retrieval of information as and when required.

One can easily integrate optical image recognition functionality using Azure’s Computer Vision API to extract printed text (in several languages), handwritten text (English only), digits, and currency symbols from images and multi-page PDF documents.

In this article, I will show how easily one can build an web app to Extract Text from Image using Flask and Azure’s Computer Vision API. Then we will also deploy that app on Heroku.

The web app will look like-

https://image-to-text-computer-vision.herokuapp.com/

You can see all the codes from this repo-

shoaib6174/Extract-Text-from-Image-using-Azure-s-Computer-Vision (github.com)

Let’s get started-

Get key and endpoint of Azure’s Computer Vision Service

First you have to take Azure’s subscription if you don’t have any. Create one for free and you will get some credits for practicing.

Once you have your Azure subscription, create a Computer Vision resource in the Azure portal to get your key and endpoint. Use the free pricing tier (F0) to try the service.

After it deploys, click Go to resource and Get the key and endpoint . You will need it later to connect your application to the Computer Vision service.

Now let’s build the web app.

Create the project directory

For Windows :

$ md FlaskAiApp
$ cd FlaskAiApp

For mac or linux :

$ mkdir FlaskAiApp
$ cd FlaskAiApp

Creating the Python virtual environment

For Windows :

# Create the environment
$ python -m venv venv# Activate the environment
$ venv\\scripts\\activate

For macOS and Linux :

# Create the environment
$ python3 -m venv venv# Activate the environment
$ source ./venv/bin/activate

Installing Flask and other libraries

Open the project directory in Visual Studio Code and create the requirements.txt file and insert the following text:

Flask
azure-cognitiveservices-vision-computervision
msrest

Return to the command prompt or terminal window and perform the installation by using pip to run the following command :-

$ pip install -r requirements.txt

Creating app.py

Create a file name app.py in the project directory and insert the following code :

from flask import Flask, render_template, request
from azure.cognitiveservices.vision.computervision import ComputerVisionClient
from azure.cognitiveservices.vision.computervision.models import OperationStatusCodes
from msrest.authentication import CognitiveServicesCredentials
import time
import os
from dotenv import load_dotenvload_dotenv()app = Flask(__name__)

Now let us insert the route method by using the following code.

# routes
@app.route(“/”, methods=[‘GET’, ‘POST’])
def main():
    return render_template(“index.html”)

Create the HTML template

First, create the folder name templates and create the index.html file inside the templates folder. Add the following code-

index.html

Let’s test the Flask app. From the terminal, run:

For Windows:

set FLASK_ENV=development
flask run

For macOS/Linux:

export FLASK_ENV=development
flask run

Read printed and handwritten text

Now we will use the Computer Vision API service of Azure for extracting visible text from images and returning it as structured strings.

Instantiate a client

In app.py instantiate a client with the endpoint and the key you got earlier.

subscription_key = "Your_Subscription_Key"
endpoint = "Your_EndPoint"computervision_client = ComputerVisionClient(endpoint,CognitiveServicesCredentials(subscription_key))

Call the Read API

After initiating the client, write a function to call Read API. This function will take image_url as argument and return the extracted text from the image.

Add a route to `app.py`

Create a route in your Flask app that calls the extractTextFromImage function whenever users submit an image URL. Then render_template to show the returned result.

@app.route("/submit", methods = ['GET', 'POST'])
def get_output():
    if request.method == 'POST':
        image_url = request.form.get('image_url')
    result = extractTextFromImage(image_url)
    return render_template("index.html", prediction = result, img_path = image_url)

Now the web app is ready. The app.py file will look like this-

app.py (github.com)

Deployment

Now we will deploy the web app. But before that we need to hide our key and end point from public.

Hiding Subscription Key and Endpoint

Create a .env file in the directory of app.py and insert the subscription key and endpoint there.

subscription_key = 'Your_Subscription_Key'
endpoint = 'Your_Endpoint'

In app.py load the variable from .env file using os-

# Variables
subscription_key = os.getenv('subscription_key')
endpoint = os.getenv('endpoint')

Deploying the flask app in Heroku

Install gunicorn and create a requirement.txt file-

$ pip install gunicorn
$ pip freeze > requirements.txt

In the directory of of app.py create a file named Procfile and insert the following line.

web: gunicorn app:app

Download Heroku CLI

Sing up on Heroku if you don’t have an account and then download and install Heroku CLI from this link- The Heroku CLI | Heroku Dev Center

Initialize Git and Push Your code to Heroku:

Initialize an empty repo and Login to Heroku-

$ git init 
$ heroku login

Now press any key to open browser and login to your Heroku account.

After logging in go back to Terminal/Command Prompt and run the following code to add the files in the repo and commit all the changes. Then create a unique named Web app and then push your code from local to the Heroku remote

$ git add .
$ git commit -m initial_commit
$ heroku create Your_Unique_App_Name
$ git push heroku master

It will take some time. Once it’s done you will get a link like this-