Building an Image-to-Text Converter using Flask and PyTesseract

  Welcome to our step-by-step guide on creating an image-to-text converter using Python Flask and PyTesseract. The task of extracting text from images is a common requirement in many applications, be it in document digitization, OCR tasks, or indexing images for search. This tutorial will provide you with a detailed walkthrough on setting up a web-based converter that uses Flask and PyTesseract, a Python binding for Google's Tesseract-OCR Engine.


Photo by Luca Bravo on Unsplash


Prerequisites

Before diving in, ensure that you have the following prerequisites installed or set up:

  • Python (version 3 or above)


Building the Image-to-Text Converter


Step 1: Setting Up a Flask Project

First, let's create a new directory for our Flask project and set up a virtual environment. Open your terminal or command prompt and follow these steps:

  • Create a new directory: `mkdir Image_to_text`
  • Navigate into the directory: `cd Image_to_text`
  • Create a virtual environment: `python3 -m venv venv`
  • Activate the virtual environment:
    • On Windows: `venv\Scripts\activate`
    • On macOS/Linux: `source venv/bin/activate`


Step 2: Installing Dependencies

Once the virtual environment is activated, let's install the required dependencies. We need Flask and Pytesseract for our text extraction implementation from image. Run the following commands:

pip install flask
pip install pytesseract


Step 3: Initializing Flask 

Start by setting up a basic Flask application. If you're new to Flask, consider following their official quickstart guide.:
from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)


Step 4: Integrating PyTesseract and Handling Image Uploads

Incorporate the PyTesseract library and set up an endpoint in your Flask application to handle image uploads. Here, the `upload_image` function handles image uploads and uses PyTesseract to extract text from the uploaded image.
from flask import Flask, request, render_template
from PIL import Image
import pytesseract
import json

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/convert', methods=['POST'])
def upload_image():
    image = request.files['image']
    img = Image.open(image)
    text = pytesseract.image_to_string(img)
    response = json.dumps({'text': text})
    return response

Step 4: Setting Up the Frontend

Our frontend is simple: an HTML form where users can upload images and a textarea to display the extracted text. It includes a form for image uploads and a script to handle form submissions. When an image is uploaded, it calls the `/convert` endpoint of our Flask application, receives the extracted text in response, and displays it in the textarea.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to text converter</title>
</head>
<body>
    <h1>Image to text converter</h1>
    <form id="converter-form">
        <input type="file" name="image" id="image">
        <div>
            <textarea id="text" cols="50" rows="20"></textarea>
        </div>
        <button type="submit">Convert</button>
    </form>
    <script>
        document.getElementById('converter-form').addEventListener('submit', function (event) {
            event.preventDefault();
            var formData = new FormData(this);
            fetch('/convert', {
                method: 'POST',
                body: formData
            }).then(function (response) {
                return response.json();
            }).then(function (data) {
                document.getElementById('text').value = data.text;
            });
        });
    </script>
</body>
</html>

Step 5: Running flask

Now we are done with developement , to run our application run .
    flask --app appname --debug
Congratulations! You have successfully implemented a Image to text converter using Python Flask. Throughout this tutorial, we walked through the step-by-step process of setting up a Flask project, installing dependencies, creating routes etc.You can refer github repo for codebase. Now, you can further enhance this keyword extractor or integrate it into your own projects.


That's it for our tutorial. We hope you found it helpful. If you have any questions or feedback, please let me know. Thank you for reading!



Tags

Post a Comment

0 Comments