Optical Character Recognition (OCR) is a powerful tool that allows you to extract text from images. It has a wide range of applications, from digitizing printed documents to reading text from signs and billboards in images. In this blog, we'll walk through the creation of a simple web application that extracts text from an uploaded image using Flask and Tesseract.
Introduction
The goal of this project is to develop a web application where users can upload an image, and the application will extract and display the text found within the image. We will be using Flask as the web framework, Tesseract for the OCR (Optical Character Recognition) process, and OpenCV for image processing. This project will guide you through setting up the application, processing the image, and extracting text.
What You Will Learn
By the end of this tutorial, you will have learned:
How to set up a Flask web application.
How to integrate Tesseract OCR with Python using the pytesseract library.
How to process images using OpenCV.
How to build a user-friendly web interface for uploading images and displaying extracted text.
Prerequisites
Before you begin, make sure you have the following installed:
Flask (pip install flask)
OpenCV (pip install opencv-python)
pytesseract (pip install pytesseract)
Tesseract-OCR installed on your machine (instructions here)
Understanding the Provided Code
Let's go through the provided code in detail, explaining each part and its role in the overall application.
1. Importing Required Libraries
from flask import Flask, render_template, request
import cv2
import pytesseract
import numpy as np
import base64Here, we import the essential libraries:
flask: For creating the web application and handling HTTP requests.
cv2: OpenCV for image processing.
pytesseract: A Python wrapper for Google’s Tesseract-OCR Engine.
numpy: For handling numerical operations, particularly image data in array form.
base64: For encoding images to be rendered in HTML.
2. Tesseract OCR Function
def read_text(image) -> str:
# Load the image
img_bytes = image.read()
img_arr = np.frombuffer(img_bytes, np.uint8)
img = cv2.imdecode(img_arr, cv2.IMREAD_COLOR)
img_str = cv2.imencode('.jpg', img)[1]
img_str = base64.b64encode(img_str).decode('utf-8')
# Convert the image to grayscale
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
# Apply thresholding to remove noise
gray = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY | cv2.THRESH_OTSU)[1]
# Apply OCR using Tesseract
pytesseract.pytesseract.tesseract_cmd = r'Tesseract-OCR/tesseract'
text = pytesseract.image_to_string(gray)
# Return the extracted text and the image string for rendering
return text, img_strThis function, read_text, processes the image and extracts the text using Tesseract OCR:
Image Loading: The image is read from the uploaded file and converted into a NumPy array, which is then decoded into an image format using OpenCV.
Grayscale Conversion: The image is converted to grayscale to improve the OCR accuracy, as Tesseract works better on high-contrast images.
Thresholding: The grayscale image is thresholded to remove noise and create a binary image, making the text more distinguishable from the background.
OCR Application: Tesseract OCR is applied to the processed image to extract text.
Image Encoding: The processed image is encoded to a base64 string so it can be rendered on the web page.
Return: The function returns the extracted text and the encoded image string.
3. Setting Up Flask Application
app = Flask(__name__)This line initializes the Flask application, which will manage routing, rendering templates, and handling user requests.
4. Defining Flask Routes
a) Home Route
@app.route('/')
def home():
return render_template('home.html')This route renders the home.html template when the user accesses the root URL. The template provides the form where users can upload their image files.
b) Prediction Route
@app.route('/predict', methods=['GET', 'POST'])
def get_predict():
if request.method == 'POST':
if 'image' not in request.files:
return render_template('predict.html', text='No image file selected', img_str=None)
file = request.files['image']
if file.filename == '':
return render_template('predict.html', text='No image file selected', img_str=None)
# Get text from the image
image_text, img_str = read_text(file)
return render_template('predict.html', text=image_text, img_str=img_str)
else:
return render_template('predict.html', text='GET', img_str=None)This route handles both GET and POST requests:
POST Request:
Checks if the image file is uploaded.
If an image is provided, it extracts the text using the read_text function.
The extracted text and image are then passed to the predict.html template for display.
GET Request: Simply renders the predict.html template with a placeholder text.
5. Running the Application
if __name__ == '__main__':
app.run(debug=True)This block ensures that the Flask application runs when the script is executed directly. Setting debug=True allows for easy debugging during development.
The User Interface
The application includes two HTML templates: home.html and predict.html.
a) Home Page (home.html)
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<title>Image Text Extraction App</title>
</head>
<body>
<nav class="nav navbar p-2">
<a class="nav navbar-brand" href="/">Image_Text</a>
</nav>
<div class="container mx-auto text-center">
<h1>Text Extraction from image</h1>
<form action="{{ url_for('get_predict') }}" method="POST" enctype="multipart/form-data">
<div class="mb-3">
<label for="image" class="form-label">Select an image:</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<button type="submit" class="btn btn-secondary">Predict</button>
</form>
</div>
</body>
</html>This template provides the main interface where users can upload an image for text extraction:
Navbar: A simple navigation bar with the app's title.
Form: Allows users to upload an image file and submit it for processing.
Styling: Bootstrap is used for responsive design and styling.
b) Prediction Page (predict.html)
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<title>Document</title>
</head>
<body>
<nav class="nav navbar p-2">
<a class="nav navbar-brand" href="/">Image_Text</a>
</nav>
<div class="container py-5">
<div class="row">
<div class="col-md-6">
{% if img_str %}
<h2>Image:</h2>
<img src="data:image/jpeg;base64,{{ img_str }}" alt="Image">
{% endif %}
</div>
<div class="col-md-6" style="background-color: lightcyan;">
<h2>Text from the image</h2>
<p>{{ text }}</p>
</div>
</div>
</div>
</body>
</html>This template displays the results after the image is processed:
Left Column: Shows the uploaded image.
Right Column: Displays the text extracted from the image.
Styling: Uses Bootstrap for layout and styling.
Running the Application
To run the application, save the code and HTML files in the appropriate directory. Ensure your Tesseract-OCR installation is correctly set up and accessible by the pytesseract library. Then, start the Flask server by running:
python ocr_page.pyOnce the server is running, open your web browser and navigate to http://127.0.0.1:5000/ to access the web app.
Complete Code
ocr_page.py
from flask import Flask, render_template, request
# tesseract files
import cv2
import pytesseract
import numpy as np
import base64
# tesseract function
def read_text(image) -> str:
# Load the image
# read the file contents and convert to NumPy array
img_bytes = image.read()
img_arr = np.frombuffer(img_bytes, np.uint8)
# decode the NumPy array into an image using OpenCV
img = cv2.imdecode(img_arr, cv2.IMREAD_COLOR)
img_str = cv2.imencode('.jpg', img)[1]
img_str = base64.b64encode(img_str).decode('utf-8')
# Convert the image to grayscale
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
# Apply thresholding to remove noise
gray = cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY | cv2.THRESH_OTSU)[1]
# Apply OCR using Tesseract
pytesseract.pytesseract.tesseract_cmd = r'Tesseract-OCR/tesseract'
text = pytesseract.image_to_string(gray)
# Print the extracted text
return text, img_str
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/predict', methods=['GET', 'POST'])
def get_predict():
if request.method == 'POST':
if 'image' not in request.files:
return render_template('predict.html', text='No image file selected', img_str=None)
file = request.files['image']
if file.filename == '':
return render_template('predict.html', text='No image file selected', img_str=None)
# getting text from the image
image_text, img_str = read_text(file)
return render_template('predict.html', text=image_text, img_str=img_str)
else:
return render_template('predict.html', text='GET', img_str=None)
if __name__ == '__main__':
app.run(debug=True)index.html
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<title>Image Text Extraction App</title>
</head>
<body>
<nav class=" nav navbar p-2">
<a class=" nav navbar-brand" href="/">Image_Text</a>
</nav>
<div class="container mx-auto text-center">
<h1> Text Extraction from image</h1>
<form action="{{ url_for('get_predict') }}" method="POST" enctype="multipart/form-data">
<div class="mb-3">
<label for="image" class="form-label">Select an image:</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<button type="submit" class="btn btn-secondary">Predict</button>
</form>
</div>
</body>
</html>predict.html
<!DOCTYPE html>
<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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<title>Document</title>
</head>
<body>
<nav class=" nav navbar p-2">
<a class=" nav navbar-brand" href="/">Image_Text</a>
</nav>
<div class="container py-5">
<div class="row">
<div class="col-md-6">
{% if img_str %}
<h2>Image:</h2>
<img src="data:image/jpeg;base64,{{ img_str }}" alt="Image">
{% endif %}
</div>
<div class="col-md-6" style="background-color: lightcyan;">
<h2>Text from the image</h2>
<p>{{ text }}</p>
</div>
</div>
</div>
</body>
</html>Now you can see we have successfully built a web application that can extract text from images using Flask and Tesseract. This application demonstrates how powerful OCR technology can be when integrated with web frameworks, allowing users to easily upload images and retrieve the embedded text.
Project Demo Video
This project can be extended with additional features, such as support for multiple languages, better image preprocessing techniques, or even deploying the application to a cloud platform for broader accessibility.
For any assistance with building an Image Text Extraction Web Application using Flask and Tesseract, feel free to contact us.
Comments