Bangla Digit Classifier Using CNN

A simple project where I had built a bangla digit classifier using Convolution Neural Network with Tensorflow.

Table of Contents :

• End to End Peoject
• Project Demo
• Tech Stack
• WebApp Structure
• Project Steps
Step 1: Loading Image
Step 2: Image Filtering
Step 3: Convolution Neural Network Architechture
Step 4: Save the Model
Step 5: Read the image as base64 from the canvas(Frontend)
Step 6: Step 6: For prediction using AJAX requests(Connection B/W frontend & backend)
• Run Locally
• Facing Problem While using Opencv
• Run Docker container from Docker Hub
• Azure Deployment
• Potential Error & Solution while deploying
• Further Reading on Neural Network & CNN
• Acknowledgements

End to End Project :

• Image processing/filtering
• Model Building in Tensorflow
• Model Evaluation
• API with Flask
• Frontend
• Dockerfile
• Deployment in Azure

Live website link : https://bangladigitclassifier.azurewebsites.net/

Project Demo

Pc Web browser Demo

Mobile Demo

Tech Stack

Client :

Server :

Deep Learning Framework :

Image Filtering :

Deployment :

WebApp Structure

Project Steps

• Step 1: Loading Image

  • First unzip the image dataset. the dataset will have trainning folders and test folders. Inside those folder there will be all the images. there will be more than one trainning and test folders

  • Build a function which will get the all the trainning folders path and also all the csv files path.

    def find_folders(path,search,csv=False):
    list_of_folders = []
    
    if csv==False:
        for i in os.listdir(path):
            training_folder_ptr = re.search(search,i)                     # search for pattern
            if training_folder_ptr != None:                               # if pattern matches
                if i.endswith('.csv') != True:                            # grabs only the non csv string
                    list_of_folders.append(os.path.join(path,i))          # join and create the path
    else:
        for i in os.listdir(path):
            training_folder_ptr = re.search(search,i)
            if training_folder_ptr != None:
                if i.endswith('.csv') == True:
                    list_of_folders.append(os.path.join(path,i))
    return list_of_folders

    Output:

    ['/home/shoaib/Programming/Project/data/training-e',
    '/home/shoaib/Programming/Project/data/training-b',
    '/home/shoaib/Programming/Project/data/training-a',
    '/home/shoaib/Programming/Project/data/training-d',
    '/home/shoaib/Programming/Project/data/training-c']

  • Now use a python library glob to get all the image path from the folders.

    def grab_all_img(list_of_folders):
    
    all_img_path = []
    all_img_name = []
    for i in range(len(list_of_folders)):
        img_list = glob.glob(list_of_folders[i]+'/*.png')
        all_img_path.extend(img_list)
    
    for i in range(len(all_img_path)):
        all_img_name.append(all_img_path[i].split(sep=os.sep)[-1])   # splitting abc/12av.png into abc,12av.png and -1 return last index value
    
    return all_img_path,all_img_name

  • More details of the code is in the notebook.

• Step 2 : Image Filtering

  • I have filterd the image into 4 parts.

    • first resize the image into 32x32 grid.

      

    • Use gaussian blur to remove the noise from the image.

      

    • Blend the original image and gaussian blured image with the addWeighted of opencv

      

    • Finaly apply the filter with the kernel fuction

      

  • Filter fuction to implement all of thses steps

    def fillter_img(image_obj_list,img_size):
    
        img_np = []
        for i in range(len(image_obj_list)):
            img = cv.resize(image_obj_list[i].get_image(),(img_size,img_size))
            img_guass = cv.GaussianBlur(img,(9,9),10)          # will denoise it
            img_weighted = cv.addWeighted(img, 1.5, img_guass, -0.5, 0,img)  # combining the image with guassian blur
            kernel = np.array([[-1,-1,-1], [-1,9,-1], [-1,-1,-1]]) #filter
            img = cv.filter2D(img_weighted, -1, kernel)  # filter apply
    
            img = img.reshape(img_size,img_size,1).astype('float32')         # reshape the numpy array taking only one color channel
    
            img_np.append(img)
    
    
            # for printing
            print('processed {}/{}'.format(i+1,len(image_obj_list)),end='\r')
    
        img_np = np.array(img_np)
        return img_np

• Step 3: Convolution Neural Nerwork Model Architechture

  

• Step 4: Save the Model

  model.save('./base_model_bangla_digit_classification')

• Step 5: Read the image as base64 from the canvas(**Frontend**)

  • to get the base64 image from the canvas I have use toDataUrl function of the canvas in JavaScript.

    function getURI() {
      const canvas = document.querySelector("canvas");
      const dataURI = canvas.toDataURL();
      return dataURI;
    }

  • read the image as base64 using base64 module in python

    encoded_data = url.split(',')[1]
    nparr = np.fromstring(base64.b64decode(encoded_data),np.uint8)

• Step 6: For prediction using AJAX requests(Connection B/W frontend & backend)

  function ajReq() {
    var xml = new XMLHttpRequest();
    xml.open("POST", "/predict", true);
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xml.onload = function () {
      var dataReply = JSON.parse(this.responseText);
      document.getElementById("inputField").value = dataReply.prediction;
    };
  
    URI = getURI();
  
    dataSend = JSON.stringify({
      url: URI,
    });
    xml.send(dataSend);
  }

  Here /predict is sending request to flask server's predict route.

Run Locally

Clone the project

git clone https://github.com/KillerShoaib/BanglaDigitClassifierCNN

Go to the project directory

cd BanglaDigitClassifierCNN

Create a virtual env (linux)

source python3 -m venv venv

Install dependencies

pip install -r requirements.txt

Start the server

python3 app.py

Facing Problem While using opencv?

uninstall opencv headless from the venv

pip uninstall opencv-python-headless

Install opencv

pip install opencv-python

Note: opencv-python does not work on cloud or docker container properly. Use opencv-python-headless to deploy it on cloud.:

Run Docker container from Docker hub

sudo docker run killershoaib/bangla_digit_classifier

Azure Deployment

• Create a an azure account
• Create a resource group
• Create an app service in the portal and link the GitHub repository and save it. After that the the deployment will start
• Youtube VIdeo Link

Potential Error & Solution while deploying

• ERROR : Could not find a version that satisfies the requirement tensorflow-io-gcs-filesystem==version

• Solution :

  pip uninstall tensorflow-io-gcs-filesystem

• Error After Deploying : Importerror: libgl.so.1: cannot open shared object file: no such file or directory

• Solution :

  pip uninstall opencv-python

  Then :

  pip install opencv-python-headless

Further Reading on Neural Network & CNN

• Machine Learning for Beginners: An Introduction to Neural Networks

• Beginner’s Guide for Convolutional Neural Network (CNN / ConvNets)

Acknowledgements

• Bangla Handwritten Digit Recognizer
• হাতেকলমে পাইথন ডিপ লার্নিং- রকিবুল হাসান(Bangla Book)