Blog

Computer Vision in iOS – Object Detection

What is Object Detection?

In the past, I wrote a blog post on ‘Object Recognition’ and how to implement it in real-time on an iPhone (Computer Vision in iOS – Object Recognition). Now, what is this blog about? In this blog, I will be discussing about Object Detection.

In object recognition problem, the deep neural network is trained to recognise what objects are present in that image. In object detection, the deep neural network not only recognises what objects are present in the image, but also detects where they are located in the image. If object detection can be applied real-time, many problems in the autonomous driving can be solved very easily.

In this blog, let us take a sneak peek into how we can use Apple’s CoreML and implement Object Detection app on iPhone-7. We will start by becoming familiar with the coremltools and this might be a little confusing at first but follow through and you shall reap the reward.

Apple has done an amazing job in giving us the best tool to easily convert any model from the library of our choice to CoreML model. So, I would like thank the CoreML team before starting this blog for making whatever task that I once felt would take one year into one weekend project.

The theme for this blog is to use an object detection pipeline which runs real-time (on iPhone 7) and can be embedded into a driving application. So, when I say I want to detect objects that might appear in front of my car, it will be either car, pedestrian, trucks, etc. Among them I only want to detect cars for today. Thanks to Udacity’s Self Driving Car Nanodegree, because of which some students of their nanodegree program have open-sourced their amazing projects on github.

Object Detection has caught amazing attention in the deep-learning research and as a result there were some amazing papers published on this topic. While some papers solely focused on accuracy, some papers focused on real-time performance. If you want to explore more about this area, you can read the papers on: R-CNN, Fast R-CNN, Faster R-CNN, YOLO, YOLO-9000, SSD, MobileNet SSD. 🙂

What is the best network?

I have nearly mentioned 7 different types of networks above! Which network among those is the best one to implement? 🤔 Huh! it is a very difficult question, especially when you don’t want to waste your time on implementing every network by brute-force and check the results. So, let us do some analysis for selecting the best network to implement. What actually happens in an object detection pipeline?

  • Pre-processing: Fetch frame from the camera, and do some image processing (scale and resize) operations before sending it into the network.
  • Processing: This is the inference stage. We will pass the pre-processed image into the CoreML model and fetch the results generated by it.
  • Post-processing: The results generated by the CoreML model will be in MLMultiArray format and we need to do some processing on that array of doubles for getting the bounding box location and it’s class prediction+accuracy.

When I am targeting mobile phone, I should be concentrating on the real-time networks. So, I can stop considering all those networks that are not performing at decent FPS on a GPU equipped machine.

Rule 1:

If a network can run real-time on computer (GPU or CPU), then it is worth giving it a shot.

This rule strikes out R-CNN and Fast-RCNN from the above list. Though there are 5 networks now, they can be broadly classified into Faster R-CNN, YOLO and SSD. Both YOLO and SSD showed better performance when compared to Faster-RCNN (check their papers for run-time of those models). Now we are left out with two major options: YOLO and SSD. I started this object detection project when Apple’s coremltools v0.3.0 was in market. There hasn’t been extensive documentation and it used to support Keras 1.2.2 (with TensorFlow v1.0 & v1.1 as backend), and Caffe v1.0 only for neural networks. The CoreML team is constantly releasing new updates of coremltools and currently it is v0.4.0 with Keras 2.0.4 support. So, I should wisely choose a network with simple layers (only convolutions) and not fancy operations such as Deconvolutions, Dilated convolutions and Depth-wise convolutions. In this way, YOLO won over my personal favourite – SSD.

YOLO – You Only Look Once:

In this blog, I will be implementing Tiny YOLO v1 and I am keeping YOLO v2 implementation for some other time in the future. Let us familiarise with the network that we are going to use 😉 The Tiny YOLO v1 consists of 9 convolutional layers followed by 3 fully connected layers summing to ~45 million parameters.

mode_yolo_plot

It is quite big when compared to Tiny Yolo v2 which has only ~15 million parameters. The input to this network is a 448 x 448 x 3 RGB image and the output is a vector of length 1470. The vector is divided into three parts: probability, confidence and box coordinates. Each of these three parts is again divided into 49 small regions which correspond to predictions at each cell on the image.

net_output

Enough of theory, now let us make our hands dirty by doing some coding.

Pre-requisites: If you are reading this blog for the first time, please visit my previous blog – Computer Vision in iOS – CoreML+Keras+MNIST – for setting up working environment on your Mac machines. As training the YOLO network takes a lot of time and effort, we are going to use a pre-trained network weights for designing CoreML Tiny YOLO v1 model. You can download the weights from the following link.

After you downloaded the weights from above, create a master directory with the name of your choice, and move the weights-file that you downloaded into that directory.

  • Let us import some necessary libraries.
# Import necessary libraries
import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline
import cv2

import keras
from keras.models import Sequential
from keras.layers.convolutional import Conv2D, MaxPooling2D
from keras.layers.advanced_activations import LeakyReLU
from keras.layers.core import Flatten, Dense, Activation, Reshape
  • Define the Tiny YOLO v1 model.
def yolo(shape):
    model = Sequential()
    model.add(Conv2D(16,(3,3),strides=(1,1),input_shape=shape,padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2)))
    model.add(Conv2D(32,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(64,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(128,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(256,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(512,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Flatten())
    model.add(Dense(256))
    model.add(Dense(4096))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Dense(1470))
    return model
  • Now let us write a helper function to load the weights from the ‘yolo-tiny.weights’ file into the model.
# Helper function to load weights from weights-file into YOLO model
def load_weights(model,yolo_weight_file):
    data = np.fromfile(yolo_weight_file,np.float32)
    data=data[4:]

    index = 0
    for layer in model.layers:
        shape = [w.shape for w in layer.get_weights()]
        if shape != []:
            kshape,bshape = shape
            bia = data[index:index+np.prod(bshape)].reshape(bshape)
            index += np.prod(bshape)
            ker = data[index:index+np.prod(kshape)].reshape(kshape)
            index += np.prod(kshape)
            layer.set_weights([ker,bia])
  • The model to which we are using pre-trained weights is having Theano as backend for image dimension ordering. So, we have to set the Theano as backend and then load the weights into the model.
# Load the initial model
keras.backend.set_image_dim_ordering('th')
shape = (3,448,448)
model = yolo(shape)
print "Theano mode summary: \n",model.summary()
load_weights(model,'./yolo-tiny.weights')

Layer dimensions:

I mentioned above that the model is following Theano’s Image dimension ordering. If you wonder what is this all about, then let me introduce you to 3D visualisations! A general 1D signal is represented using vectors or 1D arrays and its size is nothing but length of the array/vector. Images are nothing but 2D signals which are represented in 2D arrays or matrices. The size of the image is given by width x height of matrix. When we say convolutional layers, we are talking about 3D data-structures. Convolutional layers are nothing but a 2D matrices stacked behind one another. This new dimension is called the depth of the layer. For analogy, an RGB image is the combination of three 2D matrices placed behind one another (width x height x 3). In images, we refer them as channels and in convolutional layers this is mentioned as depth. Ok, this makes sense , but why are we discussing about image dimension ordering 😐 ? The two major libraries used for Deep Learning are Theano and TensorFlow. Keras is wrapper built over both of them and gives us flexibility to use any of those libraries. Apple’s coremltools support Keras with TensorFlow backend. The image dimension ordering of TensorFlow is width x height x depth, while that of Theano is depth x width x height. So, if we want to convert our model from Keras with Theano backend to CoreML model, we need to first convert it to Keras with TensorFlow backend. The complexity in understanding about the dimensions of weight matrix is higher when compared to image dimensions but transforming those weights from one model to another model is taken care inside Keras 2.0.4.

The real challenge is converting this model from theano backend to tensor flow backend is not straight forward! Fortunately, I found a helper code that can help in transferring the weights from a theano layer to tensorflow layer. But if we closely observe the model, it is a combination of convolutional layers and fully connected layers. So, before moving into fully connected layers we are flattening the output from the convolutional layer. This can become tricky and cannot be automated unless our brain can visualise the 3D and 4D dimensions very easily. For simplicity and for easy debugging, let us break this one single model into 3 separate chunks.

  • Part 1 – Consists of all convolutional layers.
  • Part 2 – Consists the operations required for flattening the output of Part 1.
  • Part 3 – Consists of fully connected layers applied on the output of Part 2.

Let us first define the models for Part 1 and Part 3.

# YOLO Part 1
def yoloP1(shape):
    model = Sequential()
    model.add(Conv2D(16,(3,3),strides=(1,1),input_shape=shape,padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2)))
    model.add(Conv2D(32,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(64,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(128,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(256,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(512,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),padding='valid'))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Conv2D(1024,(3,3),padding='same'))
    model.add(LeakyReLU(alpha=0.1))
    return model

# YOLO Part 3
def yoloP3():
    model = Sequential()
    model.add(Dense(256,input_shape=(50176,)))
    model.add(Dense(4096))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Dense(1470))
    return model
  • Let us initialise three networks in keras with TensorFlow as backend. They are: YOLO Part 1 (model_p1), YOLO Part 3 (model_p3), and YOLO Full (model_full). Also for testing whether these networks are working correctly are not, let us also initialise Part 1 and Part 3 models with Theano backend.
# Let us get Theano backend edition of Yolo Parts 1 and 3
model_p1_th = yoloP1(shape)
model_p3_th = yoloP3()
# Tensorflow backend edition
keras.backend.set_image_dim_ordering('tf')
shape = (448,448,3)
model_p1 = yoloP1(shape)
model_p3 = yoloP3()
model_full = yolo(shape)
  • In our earlier discussion I mentioned that the dimensions of convolutional layers differ in Theano and TensorFlow. So let us write a program to convert weights from Theano’s ‘model’ to TensorFlow’s ‘model_full’.
# Transfer weights from Theano model to TensorFlow model_full
for th_layer,tf_layer in zip(model.layers,model_full.layers):
    if th_layer.__class__.__name__ == 'Convolution2D':
        kernel, bias = th_layer.get_weights()
        kernel = np.transpose(kernel,(2,3,1,0))
        tf_layer.set_weights([kernel,bias])
    else:
        tf_layer.set_weights(th_layer.get_weights())
  • Before moving into next phase, let us do a simple test to find out whether the outputs of Theano’s model and TensorFlow’s model_full are matching or not. For doing this, let us read an image, pre-process it and pass it into the models to predict the output.
# Read an image and pre-process it
im = cv2.imread('test1.jpg')
plt.imshow(im[:,:,::-1])
plt.show()
im = cv2.resize(im,(448,448))
im = 2*im.astype(np.float32)/255. - 1
im = np.reshape(im,(1,448,448,3))
im_th = np.transpose(im,(0,3,1,2))

# Theano
output_th = model.predict(im_th)
# TensorFlow
output_tf = model_full.predict(im)

# Distance between two predictions
print 'Difference between two outputs:\nSum of Difference =', np.sum(output_th-output_tf),'\n2-norm of difference =',np.linalg.norm(output_th-output_tf)
  • By running the above code, I found out that for a given image, the outputs of theano and tensor flow are varying a lot. If the outputs match, the ‘Sum of Difference’ and ‘2-norm of difference’ should be equal to 0.
  • Since the direct conversion is not helping, let us move to parts based model designing. First, let us start with Tiny YOLO Part 1.
# Theano
model_p1_th.layers[0].set_weights(model.layers[0].get_weights())
model_p1_th.layers[3].set_weights(model.layers[3].get_weights())
model_p1_th.layers[6].set_weights(model.layers[6].get_weights())
model_p1_th.layers[9].set_weights(model.layers[9].get_weights())
model_p1_th.layers[12].set_weights(model.layers[12].get_weights())
model_p1_th.layers[15].set_weights(model.layers[15].get_weights())
model_p1_th.layers[18].set_weights(model.layers[18].get_weights())
model_p1_th.layers[20].set_weights(model.layers[20].get_weights())
model_p1_th.layers[22].set_weights(model.layers[22].get_weights())

# TensorFlow
model_p1.layers[0].set_weights(model_full.layers[0].get_weights())
model_p1.layers[3].set_weights(model_full.layers[3].get_weights())
model_p1.layers[6].set_weights(model_full.layers[6].get_weights())
model_p1.layers[9].set_weights(model_full.layers[9].get_weights())
model_p1.layers[12].set_weights(model_full.layers[12].get_weights())
model_p1.layers[15].set_weights(model_full.layers[15].get_weights())
model_p1.layers[18].set_weights(model_full.layers[18].get_weights())
model_p1.layers[20].set_weights(model_full.layers[20].get_weights())
model_p1.layers[22].set_weights(model_full.layers[22].get_weights())

# Theano
output_th = model_p1_th.predict(im_th)
# TensorFlow
output_tf = model_p1.predict(im)

# Dimensions of output_th and output_tf are different, so apply transpose on output_th
output_thT = np.transpose(output_th,(0,2,3,1))

# Distance between two predictions
print 'Difference between two outputs:\nSum of Difference =', np.sum(output_thT-output_tf),'\n2-norm of difference =',np.linalg.norm(output_thT-output_tf)
  • By running the above code, we can find that the outputs of both the models match exactly. So we successfully completed designing the part 1 of our model! Now let us move to Part 3 of the model. By carefully observing the model summaries of model_p3 and model_p3_th, it is quite obvious to find that both the models are similar. Hence, for a given input both the models should give us the same fixed output. But what is the input for these models? Ideally the input for these models should come from Yolo Part 2. But Yolo Part 2 is just a flatten() layer, which means given any multi-dimensional input, the output will be a serialised 1D vector. Assuming we have serialised the output from model_p1_th, both model_p3 and model_p3_th should give us similar results.
# Theano
model_p3_th.layers[0].set_weights(model.layers[25].get_weights())
model_p3_th.layers[1].set_weights(model.layers[26].get_weights())
model_p3_th.layers[3].set_weights(model.layers[28].get_weights())

# TensorFlow
model_p3.layers[0].set_weights(model_full.layers[25].get_weights())
model_p3.layers[1].set_weights(model_full.layers[26].get_weights())
model_p3.layers[3].set_weights(model_full.layers[28].get_weights())

# Design the input
input_p3 = np.reshape(np.ndarray.flatten(output_th),(1,50176))

# Theano
output_th = model_p3_th.predict(input_p3)
# TensorFlow
output_tf = model_p3.predict(input_p3)

# Distance between two predictions
print 'Difference between two outputs:\nSum of Difference =', np.sum(output_th-output_tf),'\n2-norm of difference =',np.linalg.norm(output_th-output_tf)
  • We can observe that we get exactly the same results for both model_p3 and model_p3_th by running the above code.
  • Where is YOLO Part 2? Be patient, we are going to design it now 😅. Before designing YOLO Part 2, let us discuss some more about dimensions. I have already mentioned above that YOLO Part 2 is nothing but a simple flatten layer. What makes this so hard? If you remember, the whole network was designed with Theano as backend and we are just using those weights for our model with TensorFlow backend. For understanding the operation of flatten layer, I am adding some code for you to play and understand. By running the code below you can find out why our model_full gives weird results when compared to model.
# Let us build a simple 3(width) x 3(height) x 3(depth) matrix and assume it as an output from Part 1
A = np.reshape(np.asarray([i for i in range(1,10)]),(3,3))
B = A + 10
C = A + 100

print 'A =\n',A,'\n\nB =\n',B,'\n\nC =\n',C

part1_output_tf = np.dstack((A,B,C))
print '\n\nTensorFlow\'s model_p1 output (assume) = \n',part1_output_tf

part1_output_th = np.transpose(part1_output_tf,(2,0,1))
print '\n\nTheano\'s model_p1_th output (assume) = \n',part1_output_th

print '\n\nDesired input for model_p3 =\n', part1_output_th.flatten()
print '\n\nActual input for model_p3 =\n', part1_output_tf.flatten()
  • Now we understood that applying flatten layer is not that much easy as expected. There are few ideas on how we can implement this flatten layer:
    • Idea 1 – Fetch the output from Part 1 as MLMultiArray and apply a custom flatten operation on CPU of iOS app. Too costly operation!
    • Idea 2 – Design a model with Permute layer + Flatten layer using Keras and convert it to CoreML model. Can be done and if succeeded can be designed  into one single model.
    • Idea 3 – See what coremltools’ Neural Network Builder has to offer and try to implement the flatten layer with them. Enough documentation to implement flatten layer but can’t combine three models into one single Pipeline with current documentation support. For each image frame, there will be three fetches of memory from GPU to CPU and three passes from CPU to GPU. Not an effective implementation.
  • One interesting thing that I observed with Apple’s CoreML is that the output dimensions of MLMultiArray, though CoreML supports only Keras with TensorFlow backend, looks similar to the image dimensions supported by Theano. That means, MLMultiArray dimensions of YOLO Part 1’s output will be 1024 x 7 x 7 instead of 7 x 7 x 1024. This observed can be used while designing the Permute Layer of Part 2.
# Keras equivalent of YOLO Part 2
def yoloP2():
    model = Sequential()
    model.add(Permute((2,3,1),input_shape=(7,7,1024)))
    model.add(Flatten())
    return model

model_p2 = yoloP2()
  • With this, we have all the three parts that can be combined to form one complete network. So, let us re-write the Tiny YOLO v1 network.
def yoloP1P2P3(shape):
    model = Sequential()
    model.add(Convolution2D(16, 3, 3,input_shape=shape,border_mode='same',subsample=(1,1)))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2)))
    model.add(Convolution2D(32,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),border_mode='valid'))
    model.add(Convolution2D(64,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),border_mode='valid'))
    model.add(Convolution2D(128,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),border_mode='valid'))
    model.add(Convolution2D(256,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),border_mode='valid'))
    model.add(Convolution2D(512,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(MaxPooling2D(pool_size=(2, 2),border_mode='valid'))
    model.add(Convolution2D(1024,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Convolution2D(1024,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Convolution2D(1024,3,3 ,border_mode='same'))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Permute((2,3,1)))
    model.add(Flatten())
    model.add(Dense(256))
    model.add(Dense(4096))
    model.add(LeakyReLU(alpha=0.1))
    model.add(Dense(1470))
    return model

model_p1p2p3 = yoloP1P2P3(shape)

# TensorFlow
model_p1p2p3.layers[0].set_weights(model_full.layers[0].get_weights())
model_p1p2p3.layers[3].set_weights(model_full.layers[3].get_weights())
model_p1p2p3.layers[6].set_weights(model_full.layers[6].get_weights())
model_p1p2p3.layers[9].set_weights(model_full.layers[9].get_weights())
model_p1p2p3.layers[12].set_weights(model_full.layers[12].get_weights())
model_p1p2p3.layers[15].set_weights(model_full.layers[15].get_weights())
model_p1p2p3.layers[18].set_weights(model_full.layers[18].get_weights())
model_p1p2p3.layers[20].set_weights(model_full.layers[20].get_weights())
model_p1p2p3.layers[22].set_weights(model_full.layers[22].get_weights())
model_p1p2p3.layers[26].set_weights(model_full.layers[25].get_weights())
model_p1p2p3.layers[27].set_weights(model_full.layers[26].get_weights())
model_p1p2p3.layers[29].set_weights(model_full.layers[28].get_weights())
  • If we go back to our conversation on three tasks that are needed to be done (Pre-processing, processing, post-processing), the process of converting the model from Keras to CoreML is the processing part. How are we going to do pre-processing then? The pre-processing of the image consists of fetching the frame from the camera, resize the image, change the format of the image into CVPixelBuffer format, scale the intensity values of the image from 0-255 to -1 to 1 and pass it into the model. But the scaling of the intensity values can be done directly inside the CoreML model. So, let us include during our conversion.
scale = 2/255.
coreml_model_p1p2p3 = coremltools.converters.keras.convert(model_p1p2p3,
                                                       input_names = 'image',
                                                       output_names = 'output',
                                                       image_input_names = 'image',
                                                       image_scale = scale,
                                                       red_bias = -1.0,
                                                       green_bias = -1.0,
                                                       blue_bias = -1.0)

coreml_model_p1p2p3.author = 'Sri Raghu Malireddi'
coreml_model_p1p2p3.license = 'MIT'
coreml_model_p1p2p3.short_description = 'Yolo - Object Detection'
coreml_model_p1p2p3.input_description['image'] = 'Images from camera in CVPixelBuffer'
coreml_model_p1p2p3.output_description['output'] = 'Output to compute boxes during Post-processing'
coreml_model_p1p2p3.save('TinyYOLOv1.mlmodel')
  • With this step, our Tiny YOLO v1 model is ready. The general computation of this model runs at an average of 17.8 FPS on iPhone 7. And the output of this network is a vector of size 1470. I adopted some techniques stated in some references cited below and used the power of GCD and Session Queues inside iOS to make the post-processing real-time.

Source Code & Results:

The whole source code for this project can be found at the following Github Link. All the necessary files for converting the model, creating the environment, and a step-by-step tutorial are available. I also provided the iOS app in case you are interested in testing it on your iPhones. Here are some results:

This slideshow requires JavaScript.

This app wouldn’t have been completed without the following wonderful previous works:

  1. https://github.com/xslittlegrass/CarND-Vehicle-Detection
  2. https://github.com/cvjena/darknet
  3. https://pjreddie.com/darknet/yolo/
  4. http://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Redmon_You_Only_Look_CVPR_2016_paper.pdf

Though the app is giving decent results at a reasonable speed, there is always a room for improvement in the app for improving the performance and if you have any suggestions related to it, please feel free to comment your thoughts. 🙂

Computer Vision in iOS – CoreML+Keras+MNIST

Hello world! It has been quite a while since my last blog on Object Recognition on iPhone – Computer Vision in iOS – Object Recognition. I have been experimenting a lot on YOLO implementation on iPhone 7 and got lost in time. I will be discussing about how to implement YOLO (Object Detection) in my next blog but this blog, though just number recognition, will help you to understand how to write your own custom network from scratch using Keras and convert it to CoreML model. Since you will be learning and experimenting a lot of new things, I felt it is better to stick with a simple network with predictable results than working with deep(errrr….) networks.

Problem Statement:

Given a 28×28 image of hand written digit, find the model that can predict the digit with high accuracy.

Pipeline Setup:

Before reading this blog further, you require a machine with MacOS 10.13, iOS 11 and Xcode 9.

We need to setup a working environment on our machines for training, testing and converting the custom deep learning models to CoreML models. If you read the documentation of coremltools – link – they suggest to use virtualenv. I personally recommend using Anaconda over virtualenv. If you prefer to use Anaconda, check this past blog of mine which will help you to go through a step-by-step process of setting up a conda environment for deep learning on Mac machines – TensorFlow Diaries- Intro and Setup. At present, Apple’s coremltools require Python 2.7 for environment setup. Open Terminal and type the following commands for setting up the environment.

$ conda create -n coreml python=2.7
$ source activate coreml
(coreml) $ conda install pandas matplotlib jupyter notebook scipy scikit-learn opencv
(coreml) $ pip install tensorflow==1.1
(coreml) $ pip install keras==2.0.4
(coreml) $ pip install h5py
(coreml) $ pip install coremltools

Designing & Training the network:

For this part of the code, you can either create a python file and follow along or check the jupyter notebook I wrote for code+documentation.

  • First let us import some necessary libraries, and make sure that keras backend in TensorFlow.
import numpy as np

import keras

from keras.datasets import mnist
from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers.convolutional import Conv2D, MaxPooling2D
from keras.utils import np_utils

# (Making sure) Set backend as tensorflow
from keras import backend as K
K.set_image_dim_ordering('tf')
  • Now let us prepare the dataset for training and testing.
# Define some variables
num_rows = 28
num_cols = 28
num_channels = 1
num_classes = 10

# Import data
(X_train, y_train), (X_test, y_test) = mnist.load_data()

X_train = X_train.reshape(X_train.shape[0], num_rows, num_cols, num_channels).astype(np.float32) / 255
X_test = X_test.reshape(X_test.shape[0], num_rows, num_cols, num_channels).astype(np.float32) / 255

y_train = np_utils.to_categorical(y_train)
y_test = np_utils.to_categorical(y_test)
  • Design the model for training.
# Model
model = Sequential()

model.add(Conv2D(32, (5, 5), input_shape=(28, 28, 1), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.5))
model.add(Conv2D(64, (3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.2))
model.add(Conv2D(128, (1, 1), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.2))
model.add(Flatten())
model.add(Dense(128, activation='relu'))
model.add(Dense(num_classes, activation='softmax'))

model.compile(loss='categorical_crossentropy', optimizer='adam', metrics=['accuracy'])
  • Train the model.
# Training
model.fit(X_train, y_train, validation_data=(X_test, y_test), epochs=10, batch_size=200, verbose=2)
  • Prepare model for inference by removing dropout layers.
# Prepare model for inference
for k in model.layers:
    if type(k) is keras.layers.Dropout:
        model.layers.remove(k)
  • Finally save the model.
model.save('mnistCNN.h5')

Keras to CoreML:

To convert your model from Keras to CoreML, we need to do few more additional steps. Our deep learning model expects a 28×28 normalised grayscale image, and gives probabilities for the class predictions as output. Also, let us add little more information to our model such as license, author etc.

import coremltools

output_labels = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
scale = 1/255.
coreml_model = coremltools.converters.keras.convert('./mnistCNN.h5',
                                                   input_names='image',
                                                   image_input_names='image',
                                                   output_names='output',
                                                   class_labels=output_labels,
                                                   image_scale=scale)

coreml_model.author = 'Sri Raghu Malireddi'
coreml_model.license = 'MIT'
coreml_model.short_description = 'Model to classify hand written digit'

coreml_model.input_description['image'] = 'Grayscale image of hand written digit'
coreml_model.output_description['output'] = 'Predicted digit'

coreml_model.save('mnistCNN.mlmodel')
  • By executing the above code, you should observe a file named ‘mnistCNN.mlmodel’ in your current directory.

Congratulations! You have designed your first CoreML model. With this information, you can design any custom model using Keras and convert it into CoreML model.

iOS app:

Most of the contents from here are focused towards app development and I will be explaining only few important things. If you want to go through a step-by-step process of pipeline setup for using CoreML in an iOS app, then I would suggest you to visit my previous blog – Computer Vision in iOS – Object Recognition – before reading further. The whole code is available online at – github repoSimilar to Object Recognition app, I added a custom view named DrawView for writing digits through finger swipe (most of the code for this view has been taken with inspiration from Apple’s Metal example projects). I added two buttons named ‘Clear’ and ‘Detect’ whose names represent their functionality. As we discussed in our previous blog, CoreML requires image in CVPixelBuffer format, so I added the helper code that converts it into required format. If you use Vision API of Apple, it can take care of all this complex conversions among image formats automatically but that consumes an additional 20% CPU when compared to the method I propose. This 20% CPU usage will matter when you are designing a heavy ML oriented real-time application 😛 .Here are the results of the working prototype of my app-

This slideshow requires JavaScript.

Source Code:

If you like this blog and want to play with the app, the code for this app is available here – iOS-CoreML-MNIST.

 

Computer Vision in iOS – Object Recognition

Problem Statement: Given an image, can a machine accurately predict what is there in that image?

Why is this so hard? If I show an image to a human and ask him/her what is there in that image, (s)he can predict exactly what objects are present in the image, where is that picture taken, what is the speciality of the image, (if people are present in the image) what is the action being done by them and what are they going to do etc. For a computer, a picture is nothing but a bunch of numbers. Hence, it can’t easily understand the semantics of it as a human does. Even after telling this if the question – Why is it so hard? – is ringing in your head, then let me ask you to write an algorithm to detect (just) cat!

Having basic assumptions – every cat has two ears, an oval face with whiskers on it, a cylindrical body, four legs and a curvy tail! Perfect 🙂 We have our initial assumptions to start writing code! Assume we have written the code (per say, 50 lines of if-else statements) to find primitives in an image which when combined form a cat that looks nearly as shown in the figure below (PS: Don’t laugh 😛 )

Screen Shot 2017-06-08 at 8.00.50 PM

Ok let us test the performance on some real world images. Can our algorithm accurately predict the cat in this picture?

tabby-cat-names

If you think the answer is yes, I would suggest you to think again. If you carefully observe the cat image with primitive shapes, we have actually coded to find the cat that is turning towards its left. Ok! No worries! Write exact same if-else conditions for a cat turning towards its right 😎 . Just an extra 50 lines of conditions. Good! Now we have the cat detector! Can we detect the cat in this image? 😛

maxresdefault

Well, the answer is no 😦 . So, for tackling these type of problems we move from basic conditionals to Machine Learning/Deep Learning. Machine Learning is a field where machines learn how to do some specific tasks which only humans are capable of doing it before. Deep Learning is a subset of Machine Learning in which we train very deep neural network architectures. A lot of researchers have already solved this problem and there are some popular neural network architectures which do this specific task.

The real problem lies in importing this network into a mobile architecture and making it run real-time. This is not an easy task. First of all convolutions in a CNN is a costly step and the size of the neural network (forget about it 😛 ). The industries like Google, Apple etc and few research labs have put heavy focus on optimizing the size and performance of neural networks and at last we are having some decent results making neural networks work with decent speed on mobile phones. Still there is a lot of amazing research that needs to be done in this field. After Apple’s WWDC-’17 keynote, the whole app development for solving this particular problem has turned from a 1 year effort to single night effort. Enough of theory and facts, let us dive into the code!

For following this blog from here you need to have the following things ready:

  1. MacOS 10.13 (a.k.a MacOS High Sierra)
  2. Xcode 9
  3. iOS 11 on your iPhone/iPad.
  4. Download pre-trained Inception-v3 model from Apple’s developer website – https://developer.apple.com/machine-learning/
  5. (Optional) Follow my previous blog to setup camera in your app – Computer Vision in iOS – Core Camera

Once you have satisfied all the above requirements, let us move to adding Machine Learning model into our app.

  • First of all, create a new Xcode ‘Single View App’ Project, select language as ‘Swift’ and set you project name and wait for Xcode to create project. Go to Build Settings of the app and change the Swift Compiler – Language – Swift Language version from Swift 4 to Swift 3.2.

Screen Shot 2017-06-12 at 10.54.28 AM

  • In this particular project, I am moving from my traditional CameraBuffer pipeline to a newer one to make the object detection run constantly at 30 FPS asynchronously. We are using this approach to make sure that the user won’t feel any lag in the system (Hence, better user experience!). First add a new Swift file name ‘PreviewView.swift’ and add the following code to it.
import UIKit
import AVFoundation

class PreviewView: UIView {
    var videoPreviewLayer: AVCaptureVideoPreviewLayer {
        return layer as! AVCaptureVideoPreviewLayer
    }

    var session: AVCaptureSession? {
        get {
            return videoPreviewLayer.session
        }
        set {
            videoPreviewLayer.session = newValue
        }
    }

    override class var layerClass: AnyClass {
        return AVCaptureVideoPreviewLayer.self
    }
}
  • Now let us add camera functionality to our app. If you followed my previous blog under optional pre-requisite. Most of the content here will look pretty obvious and easy. First go to Main.storyboard and add ‘View’ as a child object to existing View.

Screen Shot 2017-06-15 at 7.28.33 AM

  • After dragging and dropping into the existing View, go to ‘Show the Identity Inspector’ in the right side inspector of Xcode and under ‘Custom Class’ change class  from UIView to ‘PreviewView’. If you recall, PreviewView is nothing but the new swift file we added in one of the previous steps in which we inherit few properties from UIView.

Screen Shot 2017-06-15 at 7.44.09 AM

  • Make the View full screen with its content mode to ‘Aspect Fill’ and add a Label View under it as a child to see the prediction classes. Add IBOutlets to both View and LabelView in ViewController.swift file.
  • Your current ViewController.swift file should look like this –
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var previewView: PreviewView!
    @IBOutlet weak var predictLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
  • Le us initialise some parameters for session. The session should use frames from camera, it should start running when the view appears and stop running when the view disappears. Also we need to make sure that we have permissions to use camera and if permissions were not given, we should ask for permission before session starts. Hence, we should make the following changes to our code!
import UIKit
import AVFoundation

class ViewController: UIViewController {

    @IBOutlet weak var previewView: PreviewView!
    @IBOutlet weak var predictLabel: UILabel!

    // Session - Initialization
    private let session = AVCaptureSession()
    private var isSessionRunning = false
    private let sessionQueue = DispatchQueue(label: "session queue", attributes: [], target: nil)
    private var permissionGranted = false

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // Set some features for PreviewView
        previewView.videoPreviewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill
        previewView.session = session

        // Check for permissions
        checkPermission()

        // Configure Session in session queue
        sessionQueue.async { [unowned self] in
            self.configureSession()
        }
    }

    // Check for camera permissions
    private func checkPermission() {
        switch AVCaptureDevice.authorizationStatus(forMediaType: AVMediaTypeVideo) {
        case .authorized:
            permissionGranted = true
        case .notDetermined:
            requestPermission()
        default:
            permissionGranted = false
        }
    }

    // Request permission if not given
    private func requestPermission() {
        sessionQueue.suspend()
        AVCaptureDevice.requestAccess(forMediaType: AVMediaTypeVideo) { [unowned self] granted in
            self.permissionGranted = granted
            self.sessionQueue.resume()
        }
    }

    // Start session
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        sessionQueue.async {
            self.session.startRunning()
            self.isSessionRunning = self.session.isRunning
        }
    }

    // Stop session
    override func viewWillDisappear(_ animated: Bool) {
        sessionQueue.async { [unowned self] in
            if self.permissionGranted {
                self.session.stopRunning()
                self.isSessionRunning = self.session.isRunning
            }
        }
        super.viewWillDisappear(animated)
    }

    // Configure session properties
    private func configureSession() {
        guard permissionGranted else { return }

        session.beginConfiguration()
        session.sessionPreset = AVCaptureSessionPreset1280x720

        guard let captureDevice = AVCaptureDevice.defaultDevice(withDeviceType: .builtInWideAngleCamera, mediaType: AVMediaTypeVideo, position: .back) else { return }
        guard let captureDeviceInput = try? AVCaptureDeviceInput(device: captureDevice) else { return }
        guard session.canAddInput(captureDeviceInput) else { return }
        session.addInput(captureDeviceInput)

        let videoOutput = AVCaptureVideoDataOutput()

        videoOutput.setSampleBufferDelegate(self, queue: DispatchQueue(label: "sample buffer"))
        videoOutput.videoSettings = [kCVPixelBufferPixelFormatTypeKey as String : kCVPixelFormatType_32BGRA]
        videoOutput.alwaysDiscardsLateVideoFrames = true
        guard session.canAddOutput(videoOutput) else { return }
        session.addOutput(videoOutput)

        session.commitConfiguration()
        videoOutput.setSampleBufferDelegate(self, queue: sessionQueue)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

extension ViewController: AVCaptureVideoDataOutputSampleBufferDelegate {
    func captureOutput(_ output: AVCaptureOutput!, didOutputSampleBuffer sampleBuffer: CMSampleBuffer!, from connection: AVCaptureConnection!) {

    }
}
  • Don’t forget to add ‘Privacy-Camera Usage Description’ in Info.plist and run the app on your device. The app should show camera frames on screen with just 5% CPU usage 😉 Not bad! Now, let us add Inception v3 model to our app.
  • If you didn’t download the Inception v3 model yet, download it from the link provided above. By this step, you will be having a file named ‘Inceptionv3.mlmodel’.

Screen Shot 2017-06-12 at 11.01.47 AM

  • Drag and drop the ‘Inceptionv3.mlmodel’ file into your Xcode Project. After importing the model into your project, click on the model and this is how your ‘*.mlmodel’ file looks like in Xcode.

Screen Shot 2017-06-12 at 11.05.28 AM

  • What information does ‘*.mlmodel’ file convey? At the starting of the file, you can observe some information about the file such as name of the file, size of it, author and license information, and description about the network. Then comes the  ‘Model Evaluation Parameters’ which explains us what should be the input of the model and how our output looks like. Now let us setup our ViewController.swift file to send images into the model for predictions.
  • Apple has made Machine Learning very easy through its CoreML Framework. All we have to do is ‘import CoreML’ and initialise model variable with ‘*.mlmodel’ file name.
import UIKit
import AVFoundation
import CoreML

class ViewController: UIViewController {

    @IBOutlet weak var previewView: PreviewView!
    @IBOutlet weak var predictLabel: UILabel!

    // Session - Initialization
    private let session = AVCaptureSession()
    private var isSessionRunning = false
    private let sessionQueue = DispatchQueue(label: "session queue", attributes: [], target: nil)
    private var permissionGranted = false

    // Model
    let model = Inceptionv3()

    override func viewDidLoad() { //...
  • The fun part begins now 🙂 . If we consider every Machine Learning/Deep Learning model as a black box (i.e., we don’t know what is happening inside), then all we should care about is given certain inputs to the black box, are we getting desired outputs? (PC: Wikipedia). But, we can’t any type of input to the model and expect desired output. If the model is trained for a 1D signal, then input should be tweaked to 1D before sending into the model. If the model is trained for 2D (e.g.: CNNs), then input should be a 2D signal. The dimensions and size of the input should match with the model’s input parameters.

Blackbox3D-withGraphs

  • The Inception v3 model takes input a 3 channel RGB image of size 299x299x3. So, we should resize our image before passing it into the model. Add the following code at the end of the ViewController.swift file that will resize the image to our desired dimensions 😉 .
extension UIImage {
    func resize(_ size: CGSize)-> UIImage? {
        UIGraphicsBeginImageContext(size)
        draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}
  • In order to pass the image into the CoreML model, we need to convert it from UIImage format to CVPixelBuffer. For doing the same, I am adding some Objective-C code and linking it to swift code using a Bridging Header. If you have no clue about the Bridging header and combing objective-C with Swift code, I would suggest to check out this blog – Computer Vision in iOS – Swift+OpenCV
  • ImageConverter.h
#import <Foundation/Foundation.h>
#import <AVFoundation/AVFoundation.h>

@interface ImageConverter : NSObject

+ (CVPixelBufferRef) pixelBufferFromImage: (CGImageRef) image;

@end
  • ImageConverter.m
#import "ImageConverter.h"

@implementation ImageConverter
+ (CVPixelBufferRef)pixelBufferFromImage:(CGImageRef)image {

    CGSize frameSize = CGSizeMake(CGImageGetWidth(image), CGImageGetHeight(image));
    CVPixelBufferRef pixelBuffer = NULL;
    CVReturn status = CVPixelBufferCreate(kCFAllocatorDefault, frameSize.width, frameSize.height, kCVPixelFormatType_32BGRA, nil, &pixelBuffer);
    if (status != kCVReturnSuccess) {
        return NULL;
    }

    CVPixelBufferLockBaseAddress(pixelBuffer, 0);
    void *data = CVPixelBufferGetBaseAddress(pixelBuffer);
    CGColorSpaceRef rgbColorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(data, frameSize.width, frameSize.height, 8, CVPixelBufferGetBytesPerRow(pixelBuffer), rgbColorSpace, (CGBitmapInfo) kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
    CGContextDrawImage(context, CGRectMake(0, 0, CGImageGetWidth(image), CGImageGetHeight(image)), image);

    CGColorSpaceRelease(rgbColorSpace);
    CGContextRelease(context);
    CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);

    return pixelBuffer;
}
@end
  • iOS-CoreML-Inceptionv3-Bridging-Header.h
//
//  Use this file to import your target's public headers that you would like to expose to Swift.
//

#import "ImageConverter.h"
  • Now make some final changes to the file ViewController.swift. In this step, we resize the input image, convert it into CVPixelBuffer and pass it to CoreML model to predict the results.
extension ViewController: AVCaptureVideoDataOutputSampleBufferDelegate {
    func captureOutput(_ output: AVCaptureOutput!, didOutputSampleBuffer sampleBuffer: CMSampleBuffer!, from connection: AVCaptureConnection!) {
        guard let imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer) else { return }
        let ciImage = CIImage(cvImageBuffer: imageBuffer)
        guard let uiImage = UIImage(ciImage: ciImage).resize(modelInputSize),
            let cgImage = uiImage.cgImage,
            let pixelBuffer = ImageConverter.pixelBuffer(from: cgImage)?.takeRetainedValue(),
            let output = try? model.prediction(image: pixelBuffer) else {
                return
        }
        DispatchQueue.main.async {
            self.predictLabel.text = output.classLabel
        }
    }
}
  • Here are some results of the app running on iPhone 7.
  • The results look convincing, but I should not judge the results as the network is not trained by me. What I care for is the performance of the app on the mobile phone! With the current implementation of the pipeline, while profiling the application, the CPU usage of the app is always <30%. Thanks to CoreML as the whole Deep Learning computations have been moved to GPU and the only task of CPU is to do some basic Image Processing and pass the image into the GPU, and fetch predictions from there. There is still a lot of scope to improve the coding style of the app, and I welcome any suggestions/advice from you. 🙂 

    Source code:

    If you like this blog and want to play with the app, the code for this app is available here – iOS-CoreML-Inceptionv3

Computer Vision in iOS – Swift+OpenCV

Hello all, I realised that it has been quite a while since I posted my last blog –  Computer Vision in iOS – Core Camera. In my last blog, I discussed about how we can setup Camera in our app without using OpenCV. Since the app has been designed in Swift 3, it is very easy for many budding iOS developers to understand what is going on in that code. I thought of going a step further and design some basic image processing algorithms from scratch. After designing few algorithms, I realised that it is quite hard for me to explain even simple RGB to grayscale conversion without scaring the readers. So, I thought of taking a few steps back and integrate OpenCV into the swift version of our Computer Vision app in hope that it can help the readers during their speed prototyping of proof-of-concepts. But many people have already discussed about how to integrate OpenCV into Swift based apps. The main purpose of this blog post is to introduce you to the data structure of the image and to explain why we are implementing certain things the way they are.

Before starting this blog, it is advised that you read this blog on setting up Core Camera using Swift.

  • Start by creating a new Xcode Project, select Single View Application. Name your project and organisation, set language as Swift.
  • For removing some constraints related to UI/UX and since most of the real-time performance apps in Vision either fix to Portrait or Landscape Left/Right orientation through out its usage, go to General -> Deployment Info and uncheck all unnecessary orientations of the app.

Screen Shot 2017-06-04 at 1.25.13 PM

  • Go to Main.storyboard and add the Image View to your app by drag-and-drop from the following menu to the storyboard.

Screen Shot 2017-06-04 at 1.29.39 PM

  • Go to “Show the Size Inspector” on the top-right corner and make the following changes.

Screen Shot 2017-06-04 at 1.35.40 PM

  • Now add some constraints to the Image View.

Screen Shot 2017-06-04 at 1.37.37 PM

  • After the above settings, you can observe that the Image View fills the whole screen on the app. Now go to ‘Show the attributes inspector’ on the top right corner and change ‘Content Mode’ from Scale To Fill to ‘Aspect Fill’.

Screen Shot 2017-06-04 at 1.40.18 PM

  • Now add an IBOutlet to the ImageView in ViewController.swift file. Also add the new swift file named ‘CameraBuffer.swift’ file and copy paste the code shown in the previous blog. Also change your ViewController.swift file as shown in previous blog. Now if you run your app, you can see a portrait mode camera app with ~30 FPS. (Note: Don’t forget to add permissions to use camera in Info.plist).
  • Let us dive into adding OpenCV into our app. First let us add the OpenCV Framework into our app. If you are following my blogs from starting, it should be easy for you.
  • Let us get into some theoretical discussion. (Disclaimer: It is totally fine to skip this bullet point if you only want the app working). What is an Image? From the signals and systems perspective, an Image is defined as a 2D discrete signal where each pixel signifies a value between 0-255 representing a specific gray level (0 represents black and 255 corresponds to white). To understand this better refer to the picture shown below (PC: Link). Now you might be wondering what is adding color to the image if each pixel is storing only the gray values. If you observe any documentation online you can see that the color image is actually referred as RGB image or RGBA image. The R,G, B in RGB image refers to the Red, Green and Blue Channels of the image and where each channel corresponds to the 2D grayscale signal with values between 0-255. The A channel in RGBA image represents the alpha channel or the opacity of that pixel. In OpenCV, the image is generally represented as a Matrix in BGR or BGRA format. In our code, we are getting access to the every single frame captured by camera in UIImage format. Hence, in order to do any image processing on these images we have to convert them from UIImage to cv::Mat and do all the processing that is required and send them back as UIImage to view it on the screen.

lincoln_pixel_values

1

  • Add a new file -> ‘Cocoa Touch Class’, name it ‘OpenCVWrapper’ and set language to Objective-C. Click Next and select Create. When it prompted to create bridging header click on the ‘Create Bridging Header’ button. Now you can observe that there are 3 files created with names: OpenCVWrapper.h, OpenCVWrapper.mm, and -Bridging-Header.h. Open ‘-Bridging-Header.h’ and add the following line: #import “OpenCVWrapper.h”
  • Go to ‘OpenCVWrapper.h’ file and add the following lines of code. In this tutorial, let us do the simple RGB to Grayscale conversion.
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface OpenCVWrapper : NSObject

- (UIImage *) makeGray: (UIImage *) image;

@end

  • Rename OpenCVWrapper.m to “OpenCVWrapper.mm” for C++ support and add the following code.
#import "OpenCVWrapper.h"

// import necessary headers
#import <opencv2/core.hpp>
#import <opencv2/imgcodecs/ios.h>
#import <opencv2/imgproc/imgproc.hpp>

using namespace cv;

@implementation OpenCVWrapper

- (UIImage *) makeGray: (UIImage *) image {
    // Convert UIImage to cv::Mat
    Mat inputImage; UIImageToMat(image, inputImage);
    // If input image has only one channel, then return image.
    if (inputImage.channels() == 1) return image;
    // Convert the default OpenCV's BGR format to GrayScale.
    Mat gray; cvtColor(inputImage, gray, CV_BGR2GRAY);
    // Convert the GrayScale OpenCV Mat to UIImage and return it.
    return MatToUIImage(gray);
}

@end

  • Now make some final changes to the ViewController.mm to see the grey scale image on screen.
import UIKit

class ViewController: UIViewController, CameraBufferDelegate {

    var cameraBuffer: CameraBuffer!
    let opencvWrapper = OpenCVWrapper();
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        cameraBuffer = CameraBuffer()
        cameraBuffer.delegate = self
    }

    func captured(image: UIImage) {
        imageView.image = opencvWrapper.makeGray(image)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
  • Here are the final screenshots of the working app. Hope you enjoyed this blog post. 🙂

Computer Vision in iOS – Core Camera

Computer Vision on mobile is fun! Here are the few reasons why I personally love computer vision on mobile when compared to traditional desktop based systems.

  1. You need not have to buy a web camera or high resolution camera which should be connected to computer through USB cable.
  2. You generally connect your webcam through a USB cable, so the application you are designing is restricted for testing only inside the circumference of the circle whose radius == length of the cable 😛 .
  3. If you want your system portable you might have to buy a Raspberry Pi or Arduino and connect your webcam to it for doing some processing on the frames it fetches. (My roommates & besties during my bachelors has done some extensive coding on microprocessors and micro controllers, and I clearly know how hard it is.)
  4. If I want to escape the above mentioned step and still want to make my system portable, I literally have to carry the CPU with me 😛

While discussing about the disadvantages of doing CV algorithms on traditional desktop systems you might be already inferring the advantages of mobile based pipelines. Mobiles are easily portable, it is fully equipped with CPU, GPU and various DSP modules which can be utilised based upon the application, and it has a high resolution camera 😉 The only disadvantage with the current mobile computer vision is that you can’t directly take the algorithm you designed that works almost real-time on a computer on to a mobile and expect the same results. Optimisation plays a key role in mobile computer vision. Mobile battery is limited, hence energy usage of your algorithm matters! If you are designing a heavy CV based system, you can’t schedule the whole operations on CPU. You might need to come up with some new strategies that can reduce the CPU usage!

By halting the discussion I started for no specific reason 🙄 , let us get into the topic that this blog is actually dedicated to 😀 .

In this blog, I will be designing an application using Swift and initialise the camera without using the OpenCV. The main idea has been taken inspiration from the following article by Boris Ohayon. In this blog I am developing over his idea and customising it for the applications that I will be designing in future. At any point of this blog, if you are clueless about the Camera pipeline, you can read the article (link provided above) and follow along this tutorial.

  • Without wasting any more time create a new ‘Single View Application’ with your desired product name and set the language as ‘Swift’.
  • Add an Image View in the Main.storyboard and reference it in ViewController.swift.
  • Create a new file named CameraBuffer.swift and add the following code
import UIKit
import AVFoundation

protocol CameraBufferDelegate: class {
    func captured(image: UIImage)
}

class CameraBuffer: NSObject, AVCaptureVideoDataOutputSampleBufferDelegate {
    // Initialise some variables
    private var permissionGranted = false
    private let sessionQueue = DispatchQueue(label: "session queue")

    private var position = AVCaptureDevicePosition.back
    private let quality = AVCaptureSessionPreset640x480
    private let captureSession = AVCaptureSession()
    private let context = CIContext()

    weak var delegate: CameraBufferDelegate?

    override init() {
        super.init()
        checkPermission()
        sessionQueue.async { [unowned self] in
            self.configureSession()
            self.captureSession.startRunning()
        }
    }

    private func checkPermission() {
        switch AVCaptureDevice.authorizationStatus(forMediaType: AVMediaTypeVideo) {
        case .authorized:
            permissionGranted = true
        case .notDetermined:
            requestPermission()
        default:
            permissionGranted = false
        }
    }

    private func requestPermission() {
        sessionQueue.suspend()
        AVCaptureDevice.requestAccess(forMediaType: AVMediaTypeVideo) { [unowned self] granted in
            self.permissionGranted = granted
            self.sessionQueue.resume()
        }
    }

    private func configureSession() {
        guard permissionGranted else { return }
        captureSession.sessionPreset = quality
        guard let captureDevice = selectCaptureDevice() else { return }
        guard let captureDeviceInput = try? AVCaptureDeviceInput(device: captureDevice) else { return }
        guard captureSession.canAddInput(captureDeviceInput) else { return }
        captureSession.addInput(captureDeviceInput)

        do {
            var finalFormat = AVCaptureDeviceFormat()
            var maxFps: Double = 0
            let maxFpsDesired: Double = 0 //Set it at own risk of CPU Usage
            for vFormat in captureDevice.formats {
                var ranges      = (vFormat as AnyObject).videoSupportedFrameRateRanges as!  [AVFrameRateRange]
                let frameRates  = ranges[0]
                
                if frameRates.maxFrameRate >= maxFps && frameRates.maxFrameRate <= maxFpsDesired {
                    maxFps = frameRates.maxFrameRate
                    finalFormat = vFormat as! AVCaptureDeviceFormat
                }
            }
            if maxFps != 0 {
                let timeValue = Int64(1200.0 / maxFps)
                let timeScale: Int32 = 1200
                try captureDevice.lockForConfiguration()
                captureDevice.activeFormat = finalFormat
                captureDevice.activeVideoMinFrameDuration = CMTimeMake(timeValue, timeScale)
                captureDevice.activeVideoMaxFrameDuration = CMTimeMake(timeValue, timeScale)
                captureDevice.focusMode = AVCaptureFocusMode.autoFocus
                captureDevice.unlockForConfiguration()
            }
            print(maxFps)
        }
        catch {
            print("Something was wrong")
        }
        
        let videoOutput = AVCaptureVideoDataOutput()
        videoOutput.setSampleBufferDelegate(self, queue: DispatchQueue(label: "sample buffer"))
        guard captureSession.canAddOutput(videoOutput) else { return }
        captureSession.addOutput(videoOutput)
        guard let connection = videoOutput.connection(withMediaType: AVFoundation.AVMediaTypeVideo) else { return }
        guard connection.isVideoOrientationSupported else { return }
        guard connection.isVideoMirroringSupported else { return }
        connection.videoOrientation = .portrait
        connection.isVideoMirrored = position == .front
    }
    
    private func selectCaptureDevice() -> AVCaptureDevice? {
        return AVCaptureDevice.defaultDevice(withDeviceType: .builtInWideAngleCamera, mediaType: AVMediaTypeVideo, position: position)
    }
    
    private func imageFromSampleBuffer(sampleBuffer: CMSampleBuffer) -> UIImage? {
        guard let imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer) else { return nil }
        let ciImage = CIImage(cvPixelBuffer: imageBuffer)
        guard let cgImage = context.createCGImage(ciImage, from: ciImage.extent) else { return nil }
        return UIImage(cgImage: cgImage)
    }
    
    func captureOutput(_ captureOutput: AVCaptureOutput!, didOutputSampleBuffer sampleBuffer: CMSampleBuffer!, from connection: AVCaptureConnection!) {
        guard let uiImage = imageFromSampleBuffer(sampleBuffer: sampleBuffer) else { return }
        DispatchQueue.main.async { [unowned self] in
            self.delegate?.captured(image: uiImage)
        }
    }
}
  • And the ViewController.swift file should like this:
import UIKit

class ViewController: UIViewController, CameraBufferDelegate {

    var cameraBuffer: CameraBuffer!

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        cameraBuffer = CameraBuffer()
        cameraBuffer.delegate = self
    }

    func captured(image: UIImage) {
        imageView.image = image
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
  • After this, you can build and run the app on your mobile and see that it works like a charm.
  • So what new thing(s) did I implement in the above code? I converted the code into Swift 3.0 supporting format, added a block through which you can set your FPS from 30 to as high as 240. And did rigorous tests to make sure that the camera pipeline will never go beyond the 10% CPU Usage on the iPhone for any realistic application.
  • If your application needs higher FPS, you can set it by changing the variable ‘maxFPSDesired. But change it only if you need FPS greater than 30. By default, the FPS will be between 24-30 (fluctuating) and if you want to force the FPS to a fixed number, it won’t be exactly equal to the number you fix and also the CPU usage increases drastically. But if the application you want to try doesn’t have any other costly computations, you can play with higher FPS.
  • How to count FPS of your app? You can go fancy and code the FPS counter to use in your app. I would suggest you to run the app in profiling mode and choose ‘Core Animation’ in Instruments to check the FPS of your app 😉

TensorFlow Diaries- Intro and Setup

Why a blog that focuses on Computer Vision suddenly shifted to Machine Learning? This might be ringing in the heads of many active readers of my blog. So let me start my blog by answering the above question 😉

It is quite funny to note that Computer Vision was actually started as a summer project in MIT (1966) by Prof. Marvin Minsky. He laid out some tasks to are to be completed as a part of the summer project and it has been what the field is working on for the past 40-50 years. In Computer Vision, we are trying to teach computers how to see and perceive the environment like a human does. This includes recognising objects, understanding complex scenes, locomotion in an environment avoiding obstacles, 3D reconstruction etc., and a lot of these require Machine Learning algorithms along with 3D Geometry and applied mathematics. So, Computer Vision actually requires knowledge of Machine Learning! Even if you observe the top conference publications in Computer Vision such as CVPR and ICCV, you can see a lot of papers using Machine Learning and Deep Learning tasks to produce some state of the results. Rest is History! Assuming you all know what Deep Learning is, let us dive into the Intro to TensorFlow and how to setup your machine.

Why TensorFlow?

You might be wondering why I chose this specific library over other existing libraries such as Keras, Theano, Torch etc. Though TensorFlow is launched as an open-source software recently into the market, it has been accepted by the community in huge numbers. Many people are using it in their development environments/pipeline to design and train custom networks for solving complex real-world problems, researchers have also started using it because of its flexibility to design and test new types of networks, some universities have already included TensorFlow in their Machine Learning course curriculum and so on. The reason why I chose TensorFlow is the following: Once I design the network in Python+TensorFlow, I can easily export it to any platform or production level software (in my case, Android and iOS apps) and test them in real time.

But for doing any of those fancy tasks, the first thing to begin with is setting up your development environment for TensorFlow. I have carefully tested every possible scenario and documenting the best and easiest way to setup environment by keeping in view that you will be playing with the state-of-the-art networks.

In order to proceed further, you should be having a Linux based system with Ubuntu 16.04 OS on it. Sorry Windows and Mac users, you can also follow the steps given below but I can’t guarantee any solutions to any problems that might rise during installation. 🙂

  • Install Anaconda: Download Anaconda for Python 3.6 version (64 Bit installer) from this link and follow the instructions on their webpage to install it on your OS. After the whole process is completed you might have to restart your system to check that installation has been successfully completed. Open Terminal and type ‘python’ and check the output:
$ python
Python 3.5.2 |Anaconda 4.2.0 (x86_64)| (default, Jul  2 2016, 17:52:12)
[GCC 4.2.1 Compatible Apple LLVM 4.2 (clang-425.0.28)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>>
  • The main advantage of Anaconda is that it comes with a list of packages during the time of installation. And we can also create separate working environment for every project that we work so that we can overcome the package version conflict. So let us start creating the environment for our Deep Learning projects. Open terminal and create an environment named ‘dl’ (or you can use any name of your choice). Note: To use TensorFlow you need to use Python 3.5. The speciality of Anaconda is that you can specify your python version for the environment while creating it (even if your anaconda version is Python 3.6)
$ conda create -n dl python=3.5
  • Enter environment and download the necessary packages:
$ source activate dl
(dl)$ conda install pandas matplotlib jupyter notebook scipy scikit-learn
  • If you observe, I didn’t include ‘numpy’ in the list of packages that I installed in the environment. This is because TensorFlow installs the Numpy along with its installation. Now installing TensorFlow is two types. You can either install TensorFlow with CPU support or GPU support. Enter the below command in the terminal to install TensorFlow CPU version:
(dl)$ pip install --upgrade \
https://storage.googleapis.com/tensorflow/linux/cpu/tensorflow-1.1.0-cp35-cp35m-linux_x86_64.whl
  • If you want to install TensorFlow GPU version, please make sure that you have the CUDA 8.0 and CuDNN 5.1 setup in your machine along with their environment variables. Then write the following command instead of the above command:
(dl)$ pip install --upgrade \
https://storage.googleapis.com/tensorflow/linux/gpu/tensorflow_gpu-1.1.0-cp35-cp35m-linux_x86_64.whl
  • With this you will have the system ready for your Machine Learning/Deep Learning development. For Computer Vision + Machine Learning, you might need to install OpenCV package in python. Follow these instructions in case you want to develop computer vision applications using OpenCV and Python.
(dl)$ conda install -c https://conda.binstar.org/menpo opencv3
  • For people who love playing with depth sensors and want to do real-time deep learning, stay tuned to my next blog post on librealsense and Intel Realsense cameras. For starters, if you have already installed librealsense from source, you can integrate inside python using the pyrealsense package. You can easily integrate it in your anaconda environment using the following command.
(dl)$ pip install pyrealsense
  • Finally you can exit from your environment using ‘source deactivate’ and enter it using ‘source activate ‘ commands.

In this blog, you have created your work environment for working on Machine Learning using TensorFlow. In my next series of blogs, I will give you introduction to some basic networks in Computer Vision so that you can learn how to code networks in TensorFlow along with implementing Deep Learning to Computer Vision.

OpenCV in Android – Native Development (C++)

Hello World!

In my previous blogs, I introduced you to how you can setup the OpenCV for doing Computer Vision Applications in Android platform. In this post, let us do some C++ coding to develop our own custom filters to apply on the images we capture. In case if you are visiting this blog for the first time, and want to learn how to setup development pipeline for Android platform, you can visit my previous blogs (links provided below):

  1. OpenCV in Android – An Introduction (Part 1/2)
  2. OpenCV in Android – An Introduction (Part 2/2)

If you don’t want to read those blogs and start diving into developing computer vision applications, then you can download the source code for this blog from the following link: https://github.com/r4ghu/OpenCVAndroid-AnIntroduction.

Get ready to code!

  • Let us first warm-up our-selves by implementing a very simple edge detection filter.
  • Create a new empty activity named ‘EdgeDetection’ and add most of the code from the OpenCVCamera.java file into it. At the end, the EdgeDetection.java file should look like this:
package com.example.sriraghu95.opencvandroid_anintroduction;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.SurfaceView;
import android.view.WindowManager;

import org.opencv.android.BaseLoaderCallback;
import org.opencv.android.CameraBridgeViewBase;
import org.opencv.android.LoaderCallbackInterface;
import org.opencv.android.OpenCVLoader;
import org.opencv.core.Mat;

public class EdgeDetection extends AppCompatActivity implements CameraBridgeViewBase.CvCameraViewListener2 {

    private static final String TAG = "EdgeDetection";
    private CameraBridgeViewBase cameraBridgeViewBase;

    private BaseLoaderCallback baseLoaderCallback = new BaseLoaderCallback(this) {
        @Override
        public void onManagerConnected(int status) {
            switch (status) {
                case LoaderCallbackInterface.SUCCESS:
                    cameraBridgeViewBase.enableView();
                    break;
                default:
                    super.onManagerConnected(status);
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setContentView(R.layout.activity_opencv_camera);
        cameraBridgeViewBase = (CameraBridgeViewBase) findViewById(R.id.camera_view);
        cameraBridgeViewBase.setVisibility(SurfaceView.VISIBLE);
        cameraBridgeViewBase.setCvCameraViewListener(this);
    }

    @Override
    public void onPause() {
        super.onPause();
        if (cameraBridgeViewBase != null)
            cameraBridgeViewBase.disableView();
    }

    @Override
    public void onResume(){
        super.onResume();
        if (!OpenCVLoader.initDebug()) {
            Log.d(TAG, "Internal OpenCV library not found. Using OpenCV Manager for initialization");
            OpenCVLoader.initAsync(OpenCVLoader.OPENCV_VERSION_3_1_0, this, baseLoaderCallback);
        } else {
            Log.d(TAG, "OpenCV library found inside package. Using it!");
            baseLoaderCallback.onManagerConnected(LoaderCallbackInterface.SUCCESS);
        }
    }

    public void onDestroy() {
        super.onDestroy();
        if (cameraBridgeViewBase != null)
            cameraBridgeViewBase.disableView();
    }

    @Override
    public void onCameraViewStarted(int width, int height) {

    }

    @Override
    public void onCameraViewStopped() {

    }

    @Override
    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) {
        return inputFrame.gray();
    }
}
  • The only change we did until now in the above code is that we replaced ‘return inputFrame.rgba()’ in onCameraFrame method into ‘return inputFrame.gray()’. Now add the following code into ‘activity_edge_detection.xml’ file for setting the layout of the window in our app.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      xmlns:opencv="http://schemas.android.com/apk/res-auto"      android:id="@+id/activity_opencv_camera"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context="com.example.sriraghu95.opencvandroid_anintroduction.EdgeDetection">

    <org.opencv.android.JavaCameraView          android:layout_width="match_parent"          android:layout_height="match_parent"          android:visibility="gone"          android:id="@+id/camera_view"          opencv:show_fps="true"          opencv:camera_id="any"/>

</RelativeLayout>
  • Add the following lines of code to ‘AndroidManifest.xml’ to specify the theme of our activity.
<activity android:name=".EdgeDetection"      android:screenOrientation="landscape"      android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen">
</activity>
  • Now, just add a button to the MainActivity which opens EdgeDetection activity and run the app on your mobile and test it. Now you should be seeing a grayscale image at ~30 FPS running on your mobile 🙂
    Screenshot_20170420-043738
  • But wait, we didn’t code any C++ until now! Let us write our first custom function in ‘native-lib.cpp’ file. In high level understanding, this function should take an image, do some processing on it and return it to show us on the screen. The general skeleton of a C++ native code looks like this:
extern "C"
JNIEXPORT void JNICALL Java_com_example_sriraghu95_opencvandroid_1anintroduction_EdgeDetection_detectEdges(
        JNIEnv*, jobject /* this */,
        jlong gray) {
    cv::Mat& edges = *(cv::Mat *) gray;
    cv::Canny(edges, edges, 50, 250);
}
  • It starts with a linkage specification extern “C”, JNIEXPORT & JNICALL, return data-types (here, void), method name (), and input data-types (here, jlong). In this scenario, we are passing memory location of the image to reduce the unnecessary duplication. We then applied the cv::Canny to do the edge detection on the image. Feel free to browse through the hyper-links and read more about them. Explaining those concepts is beyond the scope of this blog and I might explain them in detail in my future blogs.
  • We need to add few lines of code inside the onCameraFrame method of EdgeDetection.java to apply the edge detection on every frame of the image. Also, add a line below the OnCameraFrame method referring to detectEdges method.
    @Override
    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) {
        Mat edges = inputFrame.gray();
        detectEdges(edges.getNativeObjAddr());
        return edges;
    }

    public native void detectEdges(long matGray);
  • Now, build the project and test it on your mobile! The results should look like this!

Screenshot_20170420-050722

  • With this, you have the basic setup for C++ development in Android using OpenCV. Let us go a step further and design a simple filter that will produce a Cartoon effect of the image. Without explaining much details, the C++ code for the same should look like this.
extern "C"
JNIEXPORT void JNICALL Java_com_example_sriraghu95_opencvandroid_1anintroduction_EdgeDetection_cartoonify(
        JNIEnv*, jobject /* this */,
        jlong gray, jlong rgb) {
    const int MEDIAN_BLUR_FILTER_SIZE = 7;
    const int LAPLACIAN_FILTER_SIZE = 5;
    const int EDGES_THRESHOLD = 30;
    int repetitions = 5;
    int kSize = 9;
    double sigmaColor = 9;
    double sigmaSpace = 7;

    cv::Mat& edges = *(cv::Mat *) gray;
    cv::medianBlur(edges, edges, MEDIAN_BLUR_FILTER_SIZE);
    cv::Laplacian(edges, edges, CV_8U, LAPLACIAN_FILTER_SIZE);
    cv::Mat mask; cv::threshold(edges, mask, EDGES_THRESHOLD, 255, CV_THRESH_BINARY_INV);

    cv::Mat& src = *(cv::Mat *) rgb;
    cv::cvtColor(src,src,CV_RGBA2RGB);
    cv::Size size = src.size();
    cv::Size smallSize;
    smallSize.width = size.width/4;
    smallSize.height = size.height/4;
    cv::Mat smallImg = cv::Mat(smallSize, CV_8UC3);
    resize(src, smallImg, smallSize, 0, 0, CV_INTER_LINEAR);

    cv::Mat tmp = cv::Mat(smallSize, CV_8UC3);

    for(int i=0; i<repetitions;i++){
        bilateralFilter(smallImg, tmp, kSize, sigmaColor, sigmaSpace);
        bilateralFilter(tmp, smallImg, kSize, sigmaColor, sigmaSpace);
    }

    cv::Mat bigImg;
    resize(smallImg, bigImg, size, 0, 0, CV_INTER_LINEAR);
    cv::Mat dst; bigImg.copyTo(dst,mask);
    cv::medianBlur(dst, src, MEDIAN_BLUR_FILTER_SIZE-4);
}
  • After writing the above piece of code in native-lib.cpp file you can call it in your own custom class and see the results. Here is a screenshot of the above code’s result:

Screenshot_20170425-134718.png

  • The above filter is actually trying to create a cartoon effect of the captured image.

Things to ponder:

In this blog you have seen how to integrate custom C++ code into your application. But if you carefully observe, the simple cartoon filter is consuming a lot of computation time and frame-rate for the same is ~1.2 FPS. Can you think of how to speed up algorithm and come up with a better algorithm to do the same task in real-time? Think about it 😉

 

OpenCV in Android – An Introduction (Part 2/2)

In my previous post, I explained how to integrate OpenCV on Android. In this post, let us integrate camera into our app to do some live testing in future. If you are visiting this blog for the first time, I recommend you to read OpenCV in Android – An Introduction (Part 1/2) before reading the current blog. By the end of this blog you will be having your basic app ready for testing any of your Computer Vision Algorithms on the images that you acquire from camera!

  • In order to use camera in our app, we need to give permissions for our app to access camera in the mobile. Open ‘app/src/main/AndroidManifest.xml’ and add the following lines of code.
    <uses-permission android:name="android.permission.CAMERA" />

    <supports-screens android:resizeable="true"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:anyDensity="true" />

    <uses-feature
        android:name="android.hardware.camera"
        android:required="false" />
    <uses-feature
        android:name="android.hardware.camera.autofocus"
        android:required="false" />
    <uses-feature
        android:name="android.hardware.camera.front"
        android:required="false" />
    <uses-feature
        android:name="android.hardware.camera.front.autofocus"
        android:required="false" />
  • Let us add a button in our main activity to navigate to a new activity that uses a camera. Add the following code to ‘src/main/res/layout/activity_main.xml’
    <Button
        android:text="OpenCV Camera"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:id="@+id/cameraInit"/>
  • After adding the button, create an intent to a new activity named ‘OpenCVCamera’ in your  MainActivity class by adding the following code.
        // Button to call OpenCV Camera Activity
        Button cameraInit = (Button) findViewById(R.id.cameraInit);
        cameraInit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(getApplicationContext(),OpenCVCamera.class);
                startActivity(i);
            }
        });
  • Now add a new Empty Activity by Right Click -> New -> Activity -> Empty Activity. Name the activity as OpenCVCamera. Edit the layout of your new activity to add camera view by using the code below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:opencv="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_opencv_camera"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.sriraghu95.opencvandroid_anintroduction.OpenCVCamera">

    <org.opencv.android.JavaCameraView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        android:id="@+id/camera_view"
        opencv:show_fps="true"
        opencv:camera_id="any"/>

</RelativeLayout>

  • Now add the following code into your OpenCVCamera.java file to see some action. After adding the following code try running the app on your device. I will explain the specifics in the later part of this blog.
package com.example.sriraghu95.opencvandroid_anintroduction;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.SurfaceView;
import android.view.WindowManager;

import org.opencv.android.BaseLoaderCallback;
import org.opencv.android.CameraBridgeViewBase;
import org.opencv.android.LoaderCallbackInterface;
import org.opencv.android.OpenCVLoader;
import org.opencv.core.Mat;

public class OpenCVCamera extends AppCompatActivity implements CameraBridgeViewBase.CvCameraViewListener2 {

    private static final String TAG = "OpenCVCamera";
    private CameraBridgeViewBase cameraBridgeViewBase;

    private BaseLoaderCallback baseLoaderCallback = new BaseLoaderCallback(this) {
        @Override
        public void onManagerConnected(int status) {
            switch (status) {
                case LoaderCallbackInterface.SUCCESS:
                    cameraBridgeViewBase.enableView();
                    break;
                default:
                    super.onManagerConnected(status);
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setContentView(R.layout.activity_opencv_camera);
        cameraBridgeViewBase = (CameraBridgeViewBase) findViewById(R.id.camera_view);
        cameraBridgeViewBase.setVisibility(SurfaceView.VISIBLE);
        cameraBridgeViewBase.setCvCameraViewListener(this);
    }

    @Override
    public void onResume(){
        super.onResume();
        if (!OpenCVLoader.initDebug()) {
            Log.d(TAG, "Internal OpenCV library not found. Using OpenCV Manager for initialization");
            OpenCVLoader.initAsync(OpenCVLoader.OPENCV_VERSION_3_1_0, this, baseLoaderCallback);
        } else {
            Log.d(TAG, "OpenCV library found inside package. Using it!");
            baseLoaderCallback.onManagerConnected(LoaderCallbackInterface.SUCCESS);
        }
    }
    @Override
    public void onCameraViewStarted(int width, int height) {

    }

    @Override
    public void onCameraViewStopped() {

    }

    @Override
    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) {
        return inputFrame.rgba();
    }
}
  • If everything works fine, your screen should like the figure below. If your app shows a warning related to Camera Permissions, try going to settings and make sure that the camera permissions for the app is enabled. 🙂
  • But what is exaclty happening here? First you imported some necessary android and OpenCV classes for your app. To allow OpenCV to communicate with android camera functionalities, we implmented CvCameraViewListener2. The variable ‘CameraBridgeViewBase cameraBridgeViewBase’ acts as a bridge between camera and OpenCV. BaseLoaderCallback will give us information about whether OpenCV is loaded in our app or not. We also need some helper functions onResume, onCameraViewStarted, onCameraViewStopped and onCameraFrame to handle the events of the app.
  • With this you are ready with the basic set up of your development environment for Computer Vision application development in Android. I made some final edits to the app to make the camera view into Full Screen Activity and added some more event handlers. The code for the same can be accessed through the following github repo – LINK !

What’s next? In the next blog, I will discuss about how we can write our own custom C++ code for doing fun computer vision experiments using OpenCV on Android!

OpenCV in Android – An Introduction (Part 1/2)

Hello world! I am very excited to write this particular blog on the setup of OpenCV in Android Studio. There are many solutions there online which include setting up OpenCV using Eclipse, Android NDK etc but I didn’t find a single reliable source for doing the same setup using Android Studio. So, we (Me and V.Avinash) finally came up with a feasible solution with which you can setup Native Development setup in Android environment for designing Computer Vision applications using OpenCV and C++!!!

A quick intro about me, I am a Computer Vision enthusiast with nearly 4 years of theoretical and practical experience in the field. That said, I am quite good at implementing CV algorithms on Matlab and Python. But with years, the same field has been developing rapidly from the mere academic interest to industrial interest. But most of the standard algorithms in this field are not really optimized to run in real-time (60 FPS) or not designed specifically for the mobile platform. This has caught my interest and I have been working on this since the Summer 2016. I think about various techniques and hacks for optimizing the existing algorithms for mobile platform and how to acquire (and play with) 3D data from the 2D camera during my free time from being a research assistant.

Before starting this project, I am assuming that you already have basic setup of Android Studio up and running on your machines and you have decent experience working on it.

  • If you don’t already have Android Studio, you can download and install it from the following link.
  • Once you have the Android Studio up and running, you can download OpenCV for Android from the following link. After downloading, extract the contents from the zip file and move it to a specific location. Let it be ‘/Users/user-name/OpenCV-android-sdk’. I am currently using Android Studio v2.2.3 and OpenCV v3.2
  • Now start the Android Studio and click on ‘Start a new Android Studio project’. This will open a new window. Specify your ‘Application Name’, ‘Company Domain’ and ‘Project Location’. Make sure you select the checkbox ‘Include C++ Support‘. Now click Next!
  • In the ‘Targeted Android Devices’ window, select ‘Phone and Tablet’ with Minimum SDK: ‘API 21: Android 5.0 (Lollipop)’. Click Next.screen-shot-2017-02-27-at-6-07-56-pm
  • In the Activity selection window select ‘Empty Activity’ and click Next.screen-shot-2017-02-27-at-6-34-08-pm
  • In the Activity customization window leave everything as it is without any edits and click Next.screen-shot-2017-02-27-at-6-37-17-pm
  • In the Customize C++ Support, select C++ Standard: Toolchain Default and leave all the other checkboxes unchecked (for now, but you are free to experiment) and click Finish!
  • The Android Studio will take some time to load the project with necessary settings. Since you are developing an app that depends on Camera of your mobile, you can’t test these apps on an emulator. You need to connect your Android Phone (with developer options enabled) to computer and select the device when you pressed the debug option. After running the application, you should see the following on your mobile if everything works fine!screenshot_20170227-184805
  • At this point of the project you have your basic native-development (C++ support) enabled in your app. Now let us start integrating OpenCV into your application.
  • Click on File -> New -> Import Module. In the pop-up window, give path to your ‘OpenCV-android-sdk/sdk/java’ directory and click on OK. You can find the module name as ‘openCVLibrary320’ and click Next, Finish to complete the importing.
  • Now, go to “openCVLibrary320/build.gradle” and change the following variables to those in the “app/build.gradle”: compileSdkVersion, buildToolsVersion, minSdkVersion, and targetSdkVersion. Sync the project after editing the gradle files. My “openCVLibrary320/build.gradle” file looks like this!
apply plugin: 'com.android.library'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"

    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 25
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}
  • Add a new folder named ‘jniLibs’ to “app/src/main/” by right click -> New -> Directory. Copy and paste the directories in the ‘OpenCV-android-sdk/sdk/native/libs/’ to jniLibs folder in your app. After the import, remove all *.a files from your imported directories. At the end, you should have 7 directories with libopencv_java3.so files in them.Screen Shot 2017-02-28 at 8.08.39 AM.png
  • Now go to ‘app/CMakeLists.txt’ and link the OpenCV by doing the following (Refer to those lines following the [EDIT] block for quick changes):
# library. You should either keep the default value or only pass a
# value of 3.4.0 or lower.

cmake_minimum_required(VERSION 3.4.1)

# [EDIT] Set Path to OpenCV and include the directories
# pathToOpenCV is just an example to how to write in Mac.
# General format: /Users/user-name/OpenCV-android-sdk/sdk/native
set(pathToOpenCV /Users/sriraghu95/OpenCV-android-sdk/sdk/native)
include_directories(${pathToOpenCV}/jni/include)

# Creates and names a library, sets it as either STATIC
# or SHARED, and provides the relative paths to its source code.
# You can define multiple libraries, and CMake builds it for you.
# Gradle automatically packages shared libraries with your APK.

add_library( # Sets the name of the library.
             native-lib

             # Sets the library as a shared library.
             SHARED

             # Provides a relative path to your source file(s).
             # Associated headers in the same location as their source
             # file are automatically included.
             src/main/cpp/native-lib.cpp )

# [EDIT] Similar to above lines, add the OpenCV library
add_library( lib_opencv SHARED IMPORTED )
set_target_properties(lib_opencv PROPERTIES IMPORTED_LOCATION /Users/sriraghu95/Documents/Projects/ComputerVision/OpenCVAndroid-AnIntroduction/app/src/main/jniLibs/${ANDROID_ABI}/libopencv_java3.so)

# Searches for a specified prebuilt library and stores the path as a
# variable. Because system libraries are included in the search path by
# default, you only need to specify the name of the public NDK library
# you want to add. CMake verifies that the library exists before
# completing its build.

find_library( # Sets the name of the path variable.
              log-lib

              # Specifies the name of the NDK library that
              # you want CMake to locate.
              log )

# Specifies libraries CMake should link to your target library. You
# can link multiple libraries, such as libraries you define in the
# build script, prebuilt third-party libraries, or system libraries.

target_link_libraries( # Specifies the target library.
                       native-lib

                       # Links the target library to the log library
                       # included in the NDK.
                       ${log-lib} lib_opencv) #EDIT

  • Edit the ‘app/build.gradle’ set the cppFlags and refer to jniLibs source directories and some other minor changes, you can refer to the code below and replicate the same for your project. All new changes made on the pre-existing code are followed by comments “//EDIT”.
apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.example.sriraghu95.opencvandroid_anintroduction"
        minSdkVersion 21
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        externalNativeBuild {
            cmake {
                cppFlags "-std=c++11 -frtti -fexceptions" //EDIT
                abiFilters 'x86', 'x86_64', 'armeabi', 'armeabi-v7a', 'arm64-v8a', 'mips', 'mips64' //EDIT
            }
        }
    }

    //EDIT
    sourceSets {
        main {
            jniLibs.srcDirs = ['/Users/sriraghu95/Documents/Projects/ComputerVision/OpenCVAndroid-AnIntroduction/app/src/main/jniLibs'] //EDIT: Use your custom location to jniLibs. Path given is only for example purposes.
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    externalNativeBuild {
        cmake {
            path "CMakeLists.txt"
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.1.1'
    testCompile 'junit:junit:4.12'
    compile project(':openCVLibrary320') //EDIT
}
  • Once you are done with all the above steps, do sync the gradle and go to src/main/cpp/native-lib.cpp . To make sure that the project setup is done properly, start including OpenCV files in native-lib.cpp and it should not raise any errors.
#include <jni.h>
#include <string>
#include <opencv2/core/core.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/features2d/features2d.hpp>

extern "C"
jstring
Java_com_example_sriraghu95_opencvandroid_1anintroduction_MainActivity_stringFromJNI(
        JNIEnv *env,
        jobject /* this */) {
    std::string hello = "Hello from C++";
    return env->NewStringUTF(hello.c_str());
}
  • Now make sure all your gradle files are in perfect sync and Rebuild the project once to check there are no errors in your setup.

By the end of this blog, we finished setting up OpenCV in your android project. This is a pre-requisite for any type of android application you want to build using OpenCV. Considering that there will be two types of possibilities using OpenCV in your application: a) Doing processing on images from your own personal library on mobiles and b) Doing real-time processing on live-feed from camera, I think this is best place to stop this part of the blog.

In my next post, I will be focusing on how to use camera in your application and do some simple processing on the data that you acquire from it.

Next: OpenCV in Android – An Introduction (Part 2/2)

Source Code: Link

[New] Android Application: Link

OpenCV in iOS – Face Detection

Hi, after a quite break I am back to my blog to post some new things related to optimized computer vision algorithms on mobile platform. I have been experimenting with android recently to come up with an easiest setup for OpenCV to start developing (I will be posting about it in my next blog). In this post, I will be explaining how to do Face detection in almost real time using OpenCV’s Haar cascades. This is not an advanced tutorial on detection/object recognition but it will help you to start working on your custom classification problems. Let us dive in!

A quick note before diving in, this blog expects that you have already read my previous blogs on OpenCV in iOS (An Introduction, The Camera)so that you can have the starter code up and running.

In this blog post, we are going to detect the faces and eyes from live video stream of your iOS device’s camera. Now start following the steps mentioned below!

  1. Import necessary frameworks into the project: opencv2, AVFoundation, Accelerate, CoreGraphics, CoreImage, QuartzCore, AssetsLibrary, CoreMedia, and UIKit frameworks.
  2. Rename ViewController.m to ViewController.mm to start coding in Objective-C++.
  3. Add necessary haarcascade files from ‘<opencv-folder>/data/haarcascades/’ directory into your supporting files directory of Project. You can do this by right-click on Supporting Files and select ‘Add files to <your-project name>’
  4. Open ViewController.mm and start adding the following lines of code for enabling Objective-C++ and let us also define some colors to draw to identify faces and eyes on the image.screen-shot-2017-02-24-at-3-30-57-pm
  5. Now you need to edit the ViewController interface to initialise the parameters for live view, OpenCV wrappers to get camera access through AVFoundation and Cascade Classifiers.screen-shot-2017-02-24-at-3-34-34-pm
  6. In the ViewController implementation’s viewDidLoad method write the following code to setup the OpenCV view.screen-shot-2017-02-24-at-3-40-07-pm
  7. The tricky part is reading the Cascade classifiers inside the project. Follow the steps suggested below to do the same and start the videoCamera!screen-shot-2017-02-24-at-3-45-32-pm
  8. Once the videoCamera is started, each image has to be processed inside the processImage method! Screen Shot 2017-02-25 at 7.27.15 PM.png
  9. Now the code is complete! Please note that I am not covering specific math topics behind the Haar-Cascades detection as I feel there are so many blogs out there which can explain it really good. For code related to this blog, you can contact me via E-mail (Contact). The screenshot of the execution of my code is placed below!

    img_1742
    Screen Shot