The month is June 2018

Sharing this just for the fun I had back 5 years ago. I wrote this article a long time back but didn’t publish, finally doing it.

An email pops up.

“We are happy to confirm your attendance at the Google Gurgaon office”.

This made me so much excited and I was already daydreaming about the possible next set of events.

It was a “Tech Intern Connect” event where interns from 100+ different organizations and 50+ campuses were gathered to share knowledge and experience.

I was waiting for the day.

On June 29 2018 evening, I took the train and reached by the next morning. The event was going to start at 8:30AM but I was there 10 mins early 😛.

First, “Badging and Refreshment”.

There was a warm welcome in which the Google interns at the reception were distributing badges and greeting with big smiles.

Upon entering the room where the rest of the interns from Hyderabad, Mumbai and Bangalore were connected live on Hangouts, we received the Google schwag including badges, stickers etc.

Then there was an activity called “Ice Breaker” which was basically a Bingo game with more fun. We had to fill the names of the interns on the Bingo sheet. There was a rush for asking each other’s names and fill the names as fast as possible as the winner was getting extra schwag.

After that, there was a tech talk about “DNA of a product”. It gave intuitive explanations of what a good product is, what needs to be focused upon for a good product etc. An example was given of the recently launched beta “Neighbourly”, an app for crowdsourcing local questions.

After that there was an interesting panel discussion with 5 Googlers who are a part of Google ranging from 1 month to 10–15 years. They shared their experiences, talked about their past and answered a lot of questions asked by us.

Then there was a networking lunch. The time where all the student interns, Google interns, Google engineers and members of TOPs interacted with each other. We shared each other’s experiences, talked about college life, future goals and exchanged contacts. This was really fun.

We ate lunch sitting in groups and then the most exciting part was there. The “Google Theatre Club”. Some Googlers and interns paired up and performed Improv comedy — a form of live theatre. We gave them many different situations and characters which won’t even match up and they performed on them. We didn’t stop laughing at their acts.

At last, it was time for the closing of the event and we were again given chance to ask questions or doubts. The head of TOPs told how to remain engaged with Google, be aware of future Google opportunities and utilize the tons of resources provided by Google.

The event was over at 3:30 PM.

It was one of the best days of my life. I got to meet so many interesting people and hope will be connected further.

And, that was it. A fun, interesting, educational visit to Google Gurgaon Office.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Twitter Instagram LinkedIn Github

Okay, so this search engine will not be a full-fledged one but you’ll get a hand wtih all the capabilities of the OpenAI’s CLIP model and how to use it to your own use cases.

What is CLIP ?

Suppose you want to tag your images to a set of particular words, what you’ll do?

You’ll probably build a classifier that can do this pretty easily right? But what if you want to tag them to a sequence of words or even a sequence of sentences. It is hard to utilize a classifier for this purpose.

Now here CLIP comes into play, it is trained on a pair of a sequence of words and an image. So, it knows whatever it is seeing can be formulated into a sequence of words. It won’t generate those words rather it can tell that this particular image is closely related to these particular set of words.

So you provide your images to the model and a set of sentences to it and it will tell that this image is closely related to these sentences with this similarity.

If you want a full-blown read of CLIP’s working head over to this official article.

The official code implementation of can be found here.

How to use CLIP to build your Search Engine?

The code for this article can be found here.

We’ll do two things here, first

Image Search

1. We’ll go through the images in a particular directory and generate embeddings for them and store it in a DB.
2. Then for a text query, we’ll generate new embeddings and then calculate the similarity between the embeddings stored in DB with the query.
3. Using this similarity we can know, with which image the query resembles more.
4. Now we can sort the results and display them.

Here you can see we are creating embeddings of all the images and storing in DB.

Once it is done, you can calculate text and image similarity using this

Now you can use this similarity metric to sort the images and display them.

The second thing we’ll build is

Reverse Image Search

For this the idea is the same.

1. We already have image embeddings stored, we’ll create new ones for the query image.
2. Then we can calculate similarity, sort and display them.

FastAPI as backend

I wanted to use Flask but we have FastAPI widely getting popular so why not use it then.

FastAPI is a high-performance asynchronous web framework. It is around 10X faster than Flask. So it makes sense to use it for super-fast APIs.

You can refer to the official docs here for more details.

Libraries

We have used the following libraries in the code:

1. FastAPI
2. Sqlite3(I know it’s not ideal but just for experimentation stuff)
3. CLIP model based on PyTorch framework.

Expanding the Engine

To expand the engine you’ll have to index more and more images into the DB and generate embeddings. As theDB will grow the similarity calculation will be slow. So, for that a full fledged database could be useful. I’ll cover more of these things in my next post.

I’ll be adding more features to this project soon and release a new article soon. Please feel free to PR to the Github repo and contribute to the project.

The code repo is available here.

Please click on the 👏 button if you liked the post and hold it for giving more love.

Connect me here:

Github Twitter Instagram LinkedIn

In this story we’ll see how you can deploy your tensorflow model on an Android device using Tflite. Ok, but why do you want to run your models on Android ? For fun ? or testing you model on REAL data ?
Well, for me it’s both.

Training a model on laptop using python is a no brainer. Gather data and boom ! Using Pytorch or Tensorflow you can train it pretty easily. But what about putting your model on an Android device.

You have to understand the limitations of putting you model on phone. First you don’t have numpy there so less flexibility. You can’t just read an image and reshape it and do different operations in 5–6 lines and do inference. You have to do it the Android way. It’s a different experience for an ML engineer.

The code is available on my Github repo.

The Android Way

I have a basic workflow for the app:

1. Create a Imageview on the app.
2. Add a button and add an onclicklistener to it.
3. Write stuff in the onclicklistener to load an image from gallery or camera to the imageview on clicking it.
4. Further in the onclicklistener, add code to load tflite model, get the Image from imageview into a bitmap object and apply preprocessing using tensorflow’s already provided functions or using your own.
5. Feed the bitmap to the model, get the output and do post processing if required. Now feed this output as bitmap into the imageview.

Things to keep a note of

This is the simplest workflow to do inference on an image.

But, we have some differences in the workflow for our app. First, we have 2 model inputs, for a mobilenet and a custom model. So, we have to preprocess the image differently for each model input. Second, for the custom model we are feeding the output from the mobilenet and a separate input, so basically there are two inputs for the custom model. It will generate a colorized image as output.

You can refer to the below image for the model architecture.

Also, the custom model input takes a LAB color format and the mobilenet takes RGB format. But this depends on your model.

Also, you have the following things on Android which can be new at first but they are just the required things to do inference on Android:

1. Tflite Interpreter
2. MappedByteBuffer
3. GpuDelegate

Hope this woud help you in deploying your models on Android device.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Github Twitter Instagram LinkedIn

It’s fun to build apps as personal projects, but what if you want it to deploy it and showcase it to others? And not only that it should be able to handle multiple requests simultaneously. Well, in this article we’ll do this. Create Django apps, use PostgreSQL as a database and use Apache2 for handling multiple requests and some tips for logging and debugging errors.

Setup EC2 instance

Launch a new Instance on AWS EC2 using the following configs:

1. OS: Ubuntu 18.04 LTS
2. Any instance type, we’ll choose t2.medium
3. Add Storage 20GB, it’ll be sufficient for now
4. In Security group, add rule with Type: HTTP, Port Range: 80, Source: Custom and 0.0.0.0/0, ::/0

Launch the instance and SSH into it.

Setup PostgreSQL

1. Install PostgreSQL:

sudo apt-get update

sudo apt-get install python-dev libpq-dev postgresql postgresql-contrib

2. Now, let’s setup PostgreSQL,

sudo su — postgres

psql

CREATE DATABASE djangodemodb;

CREATE USER adesh WITH PASSWORD ‘mysecretpass’;

GRANT ALL PRIVILEGES ON DATABASE djangodemodb TO adesh;

\q

exit

Using these commands sequentially, you’ll create a database named ‘djangodemodb’ and a new user ‘adesh’ with ‘mysercretpass’ as password. You also need to grant privileges to ‘adesh’ user for ‘djangodemodb’ database. Finally, you exit out of the psql shell using \q.

Setup Django

First we’ll set up the virtual environment for Django so that it’s easily deployable on EC2.

1. Create a directory djangodemo and create a virtualenv using python3:

mkdir djangodemo 
cd djangodemo 
virtualenv -p python3 djangodemo

2. Install Django 2.2. We’ll work on this as it’s the LTS version.

source djangodemo/bin/activate 
pip install django==2.2

3. Then create a Django project:

python -m django startproject djangodemo_UI

4. Test if the Django server is running, it will be at 127.0.0.01:8000

python manage.py makemigrations && python manage.py migrate

python manage.py runserver

5. In the settings.py file change the following:

ALLOWED_HOSTS = [‘*’]

Change DATABASES to this:

DATABASES = {

‘default’: {

‘ENGINE’: ‘django.db.backends.postgresql_psycopg2’,

‘NAME’: ‘djangodemodb’,

‘USER’: ‘adesh’,

‘PASSWORD’: ‘mysecretpass’,

‘HOST’: ‘localhost’,

‘PORT’: ‘’,

}

}

6. Install psycopg2 to help Django interact with PostgreSQL.

pip install psycopg2

If you get an error, try

pip install psycopg2-binary

7. Create superuser for the admin dashboard, it will ask for username and password:

python manage.py createsuperuser

Setup Apache2

1. Install Apache2:

sudo apt-get update

sudo apt-get install python3-pip apache2 libapache2-mod-wsgi-py3

2. Change the configs of 000-default.conf:

vim /etc/apache2/sites-available/000-default.conf

File location: /etc/apache2/sites-available/000-default.conf

Change the following in the above config:

Change path/to/your/djangodemo_UI to your root djangodemo directory

Change path/to/your/djangodemo_UI/wsgi/folder to your path containing the wsgi.py file in djangodemo_UI/djangodemo_UI

Change path/to/your/djangodemo/virtualenv to your path to the djangodemo virtual environment we created

3. Enable MPM workers to handle multiple requests in apache2.conf:

vim /etc/apache2/apache2.conf

File location: /etc/apache2/apache2.conf

Add the following lines at the end of the file. These need to be changed as per your Django app memory consumption and traffic.

4. Change the permissions for ‘djangodemo_UI’ directory using:

sudo chown :www-data djangodemo_UI

5. Now, restart the Apache2 server:

sudo service apache2 restart

Now go to the IPv4/Public URL of your EC2 instance and you’ll see you Django app running.

Logging and Debugging

It is very difficult to debug errors on Apache2. For that we’ll configure Django to log errors separately. Add the following to settings.py:

Check this file for potential errors, or you can check the Apache2 logs using:

tail -n 100 /var/log/apache2/error.log

Also, use DEBUG=False in settings.py in production. This could also help in finding errors in the logs.

Notes

1. Check the Security Group rules. Allow port 80 for HTTP
2. Use correct paths in 000-default.conf file
3. Check if correct dependencies are installed in the virtual environment.
4. Check for the correct PostgreSQL configuration.
5. Check for correct ‘static’ and ‘media’ directories.

You can find the Github repo here

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Github Twitter Instagram LinkedIn

Back in 2018, I wrote an article “Django + Angular 4 = A powerful web application” which has over 15k reads. Out of curiosity, I tried Angular 4 and Django. Continuing the series, here is a new article helping you to build amazing apps using - “Vuejs” and “Golang”.

I know, these two aren’t popular to be used along with each other. But, let’s try…

Background

Okay so first, let’s talk about the features these technologies provide.

Golang

1. Binaries — The binaries are generated with all the dependencies built-in. Thus, you need not to install the runtimes to run the application.
2. Static typing — The compiler takes care of the code when you are writing it and not only compile it. The type conversions and compatibility etc are taken care of.
3. Concurrency — The best feature of Golang is that it has first-class support of concurrency built itself in the language.
4. Standard library — The standard library is powerful enough that you mostly won’t need 3rd party libraries.

Vuejs

1. Size — After gzipping it weighs only 18kB as compared to the minified jQuery which sizes to 29kB after gzipping.
2. Readability — The code and syntax of Vuejs is very clear and simple.
3. Documentation — It has thorough documentation which makes it fast and easy to learn.
4. Reactivity — The data binding between HTML and Javascript is very fluid.
5. Vue CLI 3 — It offers a lot of features that makes developers life easy. Just try it and you’ll love it.

Golang and Vuejs both are fast during runtime. Thus, making them work with each other provide a fast single page application.

Ok, let’s start.

Setting up directories

First, set up your directories like below. “LICENSE” and “README.md” for Git.

Now, in backend directory create a file server.go

For frontend, type the following in the terminal to create a new app Calculator,

                      vue create calculator

It will ask you to choose a preset. Choose the default one (babel, eslint).

Now this will be the folder structure.

The skeleton is ready!

Now, let’s see what we are going to build. It’s not a fancy app but will help you get started to build complex apps.

We are going to build a calculator in which you will enter two numbers, they will be grabbed by Vue frontend and sent to the Golang server using a POST request. The server will compute addition, multiplication, subtraction and division and send back the results using a POST request. The frontend will then render the results.

Build the backend

Golang is fast and the reason for it is the compiler, which doesn’t let you declare variables unless you use them. If you declare something or import any package you will have to use it. It is very strict about it. And also whatever you are going to do you have to tell the compiler beforehand like: if you want to grab the POST data, you have to declare the structure of the JSON data beforehand. This is a little tricky but worth the speed.

Coming to the code.

So, we’ll use the encoding/json and net/http packages. Then, we’ll declare the structures for the JSON data.

Now, we’ll write a simple function to do the calculations. Here, we need to specify the return type explicitly.

We need to write a function which will be called when we have to process the JSON data coming to the backend using POST request.

On line 33, we are declaring a JSON decoder to decode the incoming JSON data from therequest's body.

numsData and numsResData are the declared structures.

The incoming data is stored in numsData and is decoded on line 38.

Then we set up the ResponseWriter’s headers and then send the JSON response on line 47 and check for errors.

At last, the main function. Here we can define the HTTP routing. For every URL the respective function can be defined like on line 53. The backend server will run on PORT 8090.

The complete code is below:

Now let’s build the frontend

First cd into the frontend directory and install the dependencies using the below command.

   npm install --save bootstrap-vue bootstrap axios vee-validate

We’ll use axios for handling POST requests, vee-validate for validating the input form data and, bootstrap-vue for pretty interfaces.

In src/Calculator.vue we have to write the frontend part.

From line 17 to 25, we are defining the input boxes and labels to get the data.v-model is used to get the data in Vue.

The lines 30–35 define the UI for displaying the calculations and on line 43 a button, which will trigger the postreq() function which we will be defining next.

In the script tag, we write the javascript. First, we’ll import the requirements.

Lines 54–59 are the necessary stuff, importing axios and vee-validate.

Then, we’ll define the variables which we’ll use on lines 64–69. The data variable stores all the variables for the Calculator component.

In methods, all the functions are defined. We created postreq() function from where we are sending the POST request with JSON data to the url:http://localhost:8090/calc . Remember the calc function we created in server.go file? We are sending the JSON data there. After the data is sent, the response from the backend is stored in the result variable, from which we set the add, mul, sub and div variables which are binded to the HTML using {{ add }} etc. to show the result.

Pretty simple huh? Yes, it is!

And that’s all we need to do. Just remember the points.

• Write the server logic in Golang which will run on a separate PORT.
• Build structures to hold the JSON data. You just can’t store them right away in a variable.
• The Vuejs frontend will communicate to the server using API calls using GET or POST requests.

Run the App

The backend server can be run using

                        go run server.go

It will run on PORT 8090.

The frontend can be run using

                          npm run serve

Congratulations !!! Your app is ready.

The whole code is available on the Github repo.

Also, checkout an app Rocket Engine Designer, I built using Vuejs and Golang here.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Github Twitter Instagram LinkedIn

In the previous part we saw what is Image Processing, how it works and some basics of Matlab/Octave. In this part we’ll see color model, some additional functions in Matlab/Octave and how to do basic image enhancement.

What is Color Model ?

Color model is a mathematical way to represent colors as combination of three or four numbers in a tuple.

Let’s see some of the color models.

RGB (Red Green Blue)

It is an additive color model in which you can see that the mixture of all primary colors Red, Green and Blue gives white and also you can see Cyan, Magenta and Yellow.

CMY (Cyan Magenta Yellow)

Here mixing all the three of them gives black. This model is widely used in printing but as this black is not pure black so K(Key) is added to complete it as CMYK, where K stands for black.

Another color model HSV(Hue Saturation Value) is also used.

Here, you can see that the deeper in the cone towards bottom, the darker is the color(value), on the edges of the cone the color is the brightest (Saturation) and about the circumference you can see different colors (Hue).

Additional functions in Matlab/Octave

First, we’ll see how to read/write images in Matlab and display them.

Reading:

                  img = imread(“lena.png”);

Writing:

                  imwrite(img, “Lena.png”);

Displaying:

                         imshow(img); 

Image Conversion

For converting between images there are built-in functions in Matlab, such as:

RGB → Gray:

                  gray_image = rgb2gray(rgb_image);

RGB →Binary:

                     binary = im2bw(rgb_image);

RGB → HSV:

                   hsv_image = rgb2hsv(rgb_image);

Image Enhancement

The motive of enhancement is to process an image so that the result is more suitable than the original image for a specific application. Image enhancement approaches fall into two broad categories: Spatial domain and Frequency domain.

In spatial domain the image manipulation is done directly on the pixels of an image. It can be denoted as:

                    G(x, y) = T[F(x, y)]

where, (x, y) are the coordinates of the pixels, F is the input image, G is the enhanced image and T is an operator on F.

Now let’s see these operators:

1. Image Negative

The negative of an image is just the subtraction of pixel values from 255 for a gray image. It is of the form:

                           N = (L - 1) - I

where, L-1 = 255, for gray image and I is the image pixels.

Now let’s implement this in Matlab:

clear all; % clear all variables
close all; % close all figures
clc;       % clear command window

% import image package
pkg load image;

% read image
img = imread(“lena.png”);

% convert image into gray and then from uint8 to double
grayscale_img = rgb2gray(img);

% show grayscale image
figure
imshow(grayscale_img);
title(“grayscale image”);
imwrite(grayscale_img, “original.jpg”);

# calculate negative of the image
output = 255 — grayscale_img;

% show output image
figure
imshow(uint8(output));
title(“output image”);
imwrite(uint8(output), “negative_tansformation.jpg”);

The first 3 lines clears the variables in memory, closes all opened windows and clears the terminal.

Then, we import the image package. If you don’t know how to do this, go here and download the package and follow this tutorial.

Now image is read and converted to grayscale. After that a new window is created, image is displayed with title “grayscale image” and written as “original.jpg”.

“output” is the negative of the input image and the same displaying and writing is done.

2. Log Transformation:

It is done using the following operations:

                           s = c log(1+r)

where c is a constant.

It expands the values of dark pixels(near 0) and compresses the higher level values(near 255) i.e., it compresses dynamic range of an image and the image looks washed out.

Code:

c = 45;
output = c * log(1 + grayscale_img);

3. Power Law Transformation

It is also called as Gamma correction. It has the basic form:

                             s = c * r^𝛄

where c and 𝛄 are constants and r is the input image.

This is a plot of s versus 𝛄, where 𝛄 < 1 results in dark values and 𝛄 >1 results in bright values.

Code:

r = double(img)/255;
c = 1;
gamma = 0.6;
s = c * (r) .^ gamma;

4. Contrast Stretching

Contrast is a measure of the “range” of an image; i.e. how spread its intensities are.

            Contrast = ( Imax — Imin ) / ( Imax + Imin )

It maps minimum intensity in the image to the minimum value in the range (0–100) and maximum intensity in the image to the maximum values (200–255). Contrast stretching is all about increasing the difference between the maximum intensity value in an image and the minimum one. All the rest of the intensity values are spread out between this range.

Code:

It can be done in just one line of code using imadjust.

cs = imadjust(gray_img, stretchlim(gray_img),[]);

or doing it using the formula:

a      = min(img(:));            %minimum pixel of image X
b      = max(img(:));            %maximum pixel of image X 
cs_img = (img - a) .* (255 / (b - a));

Next, we’ll see image filtering using MATLAB/Octave.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Github LinkedIn Twitter Instagram

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +442,678 people.

Subscribe to receive our top stories here.

Image Processing using Matlab/Octave — Part 2 was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

Really ? an AI to play F1 race game ? Well kind of. This story is more over as a helper guide rather than a tutorial to build the whole system.

I started it out as a project as an experiment and built some groundwork which you can further improve by contributing.

Link to the Github repo

The F1-race game

So, lets first talk about the game.

The F1-race game was published by Nintendo(NES) in 1984.

The gameplay involves a racing car which can be run on 3 tracks sorted by the difficulty levels 1, 2 and 3.

The objective is to complete the track within the time frame of 40 seconds. The tracks have some sharp turns and there are some more cars that makes the game a bit interesting.

There are 4 controls: FORWARD, BACKWARD, LEFT and RIGHT. Combination of two controls like FORWARD-LEFT, FORWARD-RIGHT are also allowed.

The Plan

We’ll convert the problem into a supervised learning task(Images -> Labels).

The pipeline we’ll build is as such:

1. Collect data(game frames and keyboard presses) using emulators.
2. Prepare data(crop images and prepare labels).
3. Train the CNN model.
4. Test the predictions.
5. Make the model to play the game on emulator.

1. Collect Data

I’ll use the OpenEmu emulator for running the F1-race game on Mac. if you are on another OS you can use this website to run the game in the browser. We’ll use this script for grabbing game screenshots and simultaneously the keyboard presses.

Be careful in setting the window area of the game to grab screenshots.

All of the images will be saved in the pics1 directory and a CSV file will be created with the image path and the keys pressed.

Try to collect more and more data as possible. I tried with just 10k images.

2. Prepare Data

Refer to the script here.

Here, the images will be cropped for getting only the relevant portion of the images.

After that they’ll be resized into 64x64 or 32x32 or your choice of size. Remember that the size of image will reflect upon the computation power used to train the model.

The labels will be converted into one-hot encoding.

Training the model

Now, we’ll train a CNN model on the data we prepared.

This file contains 4 CNN models to experiment with.

And this script trains the model and plots the loss and accuracy graph.

I trained on 10k images using the CNN Model2 in the models.py file and got 81% accuracy on testing data with RGB images of size 32x32.

Playing the game

To play the game refer to this script.

Remember that OpenEmu doesn’t allow direct keyboard inputs from the script to the window. Therefore, we’ll use the browser emulator here.

Be careful in placing the browser window in appropriate positions for taking screenshots.

Despite the accuracy I got of about 81%, the gameplay of the model was not good. It requires a lot of improvement.

But, I tried to set up a pipeline for building the system and also, this can be used for other games where the game problem can be converted into a supervised learning task.

Feel free to fork the repo and contribute to the project.

After any further improvements in the model, I’ll present to you the next part of this story.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Github LinkedIn Twitter Instagram

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +431,678 people.

Subscribe to receive our top stories here.

Build an AI to play F1-race was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

You know how to use Django to make web apps and also, you know how to build beautiful frontends using Angular but you were probably wondering how to integrate them with each other to build a single web app that has benefits of both?

This was the thing that was going in my head when I was learning Django and Angular 4. I wanted both of them in the same application so that I would be having the power of python and goodness of Angular and without learning node.js separately to make a full-fledged Web App. And, I think, you reading this story also have the same motive.

Let’s Start

A little background first.

Django is an all in one pack having various features and functionalities. It is:

1. Fast — It is designed for developers such as to be as fast as possible, helping to make it cost-effective and efficient.
2. Lots of features — Many extras like user authentication, content administration, RSS feeds etc.
3. Secure — A lot of security features to prevent attacks like SQL injection and cross-site scripting.
4. Scalable — It can bear heavy traffic demand making it a good fit for busy websites.

Along with all this, it has python, I mean do I have to tell how much good is that? 😉

But then why we are trying to use Angular along with that?

Because, it is Cross-Platform, fast, helps us to make beautiful UI and the list goes on. For more read here.

And, also the Django template system sucks! Angular could help build a scalable, clean and a single page web application.

Enough of the talks. Let’s build one ourselves.

Setting up Directories

1. Create a directory for our application.

                     mkdir my-app && cd my-app

2. Create two separate folders for our backend(Django) and the frontend(Angular 4)

                   mkdir backend && mkdir frontend

Setting up Django

1. First, download this repo as zip file and copy it to the backend directory. This zip file has the template which is ready for Heroku deployment. So, deploying on Heroku is hassle free now.
2. Unzip and rename the folder to your choice of the app name.
3. In the folder there is another folder, also change its name to your choice, let’s suppose it as “my-app”
4. Rename all the instances of “my-app” (without quotes) with your app name in the following files:

a. Procfile

b. manage.py

c. my-app/wsgi.py

d. my-app/settings.py

4. Now create a new app in Django

                 python3 manage.py startapp new_app

5. A “new_app” named project will be created in the current directory.

6. We’ll be using the DRF (Django REST Framework) for setting up the APIs in our Django app to connect with Angular. Read more about DRF here.

Create a new file “serializers.py” (without quotes) in the “new_app” folder. To correctly use the DRF head on here.

You could change the serializers.py according to the models you have defined in the “models.py” file. We’ll make a dummy model.

The models.py file should look like:

The “serializers.py” file should look like:

Also, don’t forget to update the settings.py file by adding the “new_app” and “rest_framework” and some more necessary changes (See lines 31–41 below).

Update the file as follows:

The settings.py file needs to be updated to use the templates.

Now, create a new folder “templates” and a file “home.html”. Copy the below contents to it.

So, this is an important thing that you need to remember. The “home.html” will use the CSS and Javascript files that Angular will generate every time you will change the Angular app, named:

a. styles.css

b. runtime.js

c. polyfills.js

d. main.js

A point to remember here is that in order to work with Angular, on the Django part we’ll create a home URL as defined below on line 9 and the other URLs will be the REST API which the Angular part will use to connect to Django.

Remember that, the Angular part(frontend) will talk to the Django(backend) using these REST APIs defined in the “urls.py” file.

Now, change the “urls.py” file.

Change the “views.py” as follows. The DRF is being used to handle GET request. Here, we are just returning all the data stored in the database as a JSON response.

You’ll also need to update the “requirements.py” file by adding DRF to it, only required when deploying to Heroku.

Now, this is the bare bones Django setup you’ll need.

This is pretty simple, right? Just set up the Django project and add DRF.

Setting up Angular 4

Now, let’s do the Angular part.

1. Go to the frontend directory, and start a new Angular 4 app.

                         ng new my-app

2. Now, this is the bare bone Angular app, but, we need to use Django as the backend.

So, the idea is that DRF will help us to make APIs(we have defined those URLs earlier in the “urls.py” file) which the Angular app will utilize using HTTP requests. We are replacing Node.js here with Django.

MEAN(Mongo, Express.js, Angular, Node.js) stack is now MAD(Mongo, Angular, Django) stack. But, in this app, we are just using the SQLite database, just for simplicity.

3. Go to this repository to see all the changes that the Angular app needs. I’ll point out the necessary ones here.

First, we’ll see the “app.router.js” file. You can see that on line 13, a “PageNotfoundComponent” is being used to handle the 404 Page not found errors. In Django, this was an in-built feature but now here we need to implement it ourselves.

4. In the “app.module.ts” import the HttpModule and AppRoutingModule.

5. And, else just is the regular Angular stuff.

All of the source code is on my Github repository. Find it at the bottom.

Run the project

To run the Django server, just run

                    python manage.py runserver

And run the Angular app,

ng build --prod --output-path /path-to your-project-directory/backend/my-app-name/my-app/static/ang --watch --output-hashing none

prod is used for generating production-ready version of the app

output-path is the directory where we are placing the Angular App. We are placing the files in the static folder of Django as these files will be served as static files.

watch tell to constantly look for changes in the Angular App you make and then immediately compile and place them in the output-path directory

hashing none removes the hashes generated in the styles.css, runtime.js, polyfills.js and main.js file names.

And that’s all you need to do. Remember the steps:

1. Create a Django project.
2. Use DRF or tastypie or any other API framework of your choice.
3. Remember to define your API in urls.py file.
4. Create an Angular app.
5. Handle the error pages like 404.
6. Create HTTP requests to the API you created for getting and sending data.
7. Done!

Congratulations !!! You now know how to use the power of Django + Angular to build powerful apps.

The code for above: Github repo link.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Twitter Instagram LinkedIn Github

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by + 379,306 people.

Subscribe to receive our top stories here.

Django + Angular 4 = A powerful web application was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the previous part, we saw what an MDP is and what is Q-learning. Now in this part, we’ll see how to solve a finite MDP using Q-learning and code it.

OpenAI gym

As stated on the official website of OpenAI gym:

Gym is a toolkit for developing and comparing reinforcement learning algorithms.

We’ll use this toolkit to solve the FrozenLake environment. There are a wide variety of games available like the Atari 2600 ones, text based games etc. Check out all of them here.

Installation

Install gym using the steps provided here. First install the gym library then, the OS specific packages.

Now, let’s see how to use gym toolkit.

Import gym using:

import gym

Then, specify the game you want to use, we’ll use the FrozenLake game.

env = gym.make('FrozenLake-v0')

The environment of the game can be reset to the default/initial state using:

env.reset()

And, to see the game GUI, use:

env.render()

The official documentation can be found here where you can see the detailed usage and explanation of gym toolkit.

FrozenLake Game

Now, lets see what is the FrozenLake game.

Imagine, you are standing on a frozen lake. The lake is not all frozen, there are some parts where the ice is very thin. You goal is to go from place S to G without falling into the holes.

Here, S is the starting point, G is the goal, F is the solid ice where the agent can stand and H is the hole where if the agent goes, it falls down.

The agent has 4 possible moves which are represented in the environment as 0, 1, 2, 3 for left, right, down, up respectively.

For every state F, the agent gets 0 reward, for state H it gets -1 reward as in state H the agent will die and upon reaching the goal, the agent gets +1 reward.

The game upon rendering in the terminal looks like this:

The states here are F, S and G. That is there are 4x4=16 states and 4 actions.

To solve this game using Q-learning we’ll make use of the theory we saw in the previous part.

This is the code for solving the “FrozenLake-v0” environment using Q-learning. It is pretty straight-forward and you’ll feel comfortable with it till the end of the post.

Let’s dissect it.

Lines 1–3 are importing the libraries we’ll use. Numpy for storing the Q-table and pickle to save our Q-table as “pkl” file.

Line 5 initializes out FrozenLake environment.

Lines 7–12 initializes our variables. epsilon for the epsilon-greedy approach, gamma is the discount factor, max_episodes is the maximum amount of times we’ll run the game, max_steps is the maximum steps we’ll run for every episode and lr_rate is the learning rate.

Line 14 initializes our Q-table as a 16x4 matrix filled with zeros. env.observation-space.n tells the total number of states in the game and env.action-space.n tells the total number of actions.

On line 30, we start running the episodes.

On line 31, the variable state stores the initial state using env.reset().

On Line 32, t is used for storing the number of time steps.

Using line 35, the environment is rendered.

On line 37 the appropriate action is chosen. This is done using the epsilon-greedy approach. See the lines 16–22, here we randomly generate a number between 0 and 1 and see if it’s smaller than epsilon. If it’s smaller, then a random action is chosen using env.action_space.sample() and if it’s greater then we choose the action having the maximum value in the Q-table for state: state. Eg:

Suppose, for the actions 0–3 in state 10, it has the values 0.33, 0.34, 0.79 and 0.23. The maximum Q-value is 0.79, for the action 2 and this action 2 is chosen for state 10.

On line 39, the action we chose is taken in the environment and the next state, reward for the action are returned. done returns true if the episode has terminated and info stores the extra information that is used for debugging.

At this point we have:

1. The previous state, state.

2. The next state, state2.

3. And the action and reward for the state2.

On line 41, we use the above information to update our Q-table using the function learn(state, state2, reward, action) by the following equation:

After updating the Q-table, we set the previous state, state as the current state, state2 on line 43.

The time-steps are increased on Line 45. Line 47–48 checks if done is true that is, if the episode is finished.

On lines 54 and 55 we save our Q-table into “frozenlake_qTable.pkl” file.

And that’s it. Feel free to play around with the code.

FrozenLake in action

Running the code above you’ll see the game in action. But, please be patient as it’ll take some time for 10000 episodes to finish.

You can load the Q-table afterwards and play the game using the code below. It’s fairly simple. Only the training part is removed from the code below.

Stay tuned for more fun with Reinforcement Learning. Happy exploring 😄.

Please click on the 👏 button if you liked the post and hold it for giving more love.

If you wish to connect:

Twitter Instagram LinkedIn Github

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 343,876+ people.

Subscribe to receive our top stories here.

Introduction to Reinforcement Learning (Coding Q-Learning) — Part 3 was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is a how-to for using NTFS formatted external HDD on MacOS using free tools available.

MacOS doesn’t provide write permissions on NTFS format as default. So to mount external drives as Read/Write follow the given steps below:

Step 1

Download FUSE for macOS from here

Step 2

Then we have to install xcode command line tools. For this open terminal and copy paste this.

xcode-select --install

Then click install when the dialogue appears. Click Agree when the License Agreement appears. Once that’s done proceed to step 3.

Step 3

Now we have to install Homebrew which is a package manager for macOS. Copy and paste the following in the terminal.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 4

Paste the following in terminal to install ntfs-3g for mac:

brew install ntfs-3g

Step 5

Now connect your external HDD system and follow the below steps:

a) diskutil list

This will list all the connected drives to your device. There will be the names such as disk2s1, disk2s1 etc. These are the partitions of your external HDD.

Note the names of the External HDD drives.

b) sudo mkdir /Volumes/NTFS1

We have to create a folder for giving a mount point to the disks. This command will create NTFS1 folder for mounting. If you are trying to mount 2 partitions of your HDD then make another folder using:

sudo mkdir /Volumes/NTFS2

The number of folders will depend on the number of drives you want to mount.

c) sudo umount /dev/disk2s1

This command will unmount the disks already mounted by the macOS system as we will again mount them by ntfs-3g in RW mode. Again if there are 2 partitions mounted then use:

sudo umount /dev/disk2s2

disk2s1 and disk2s2 are the names of the disks.

d) Run the below in terminal to mount the disk named as disk2s1 to the pre created folder NTFS1 in RW mode.

sudo /usr/local/bin/ntfs-3g /dev/disk2s1 /Volumes/NTFS1 -olocal -oallow_other

Congratulations you are done !

So lets say you have 2 partitions on your HDD formatted as NTFS, then you will be using the following commands in sequence on terminal.

1. diskutil list
2. sudo mkdir /Volumes/NTFS1
3. sudo mkdir /Volumes/NTFS2
4. sudo umount /dev/disk2s1
5. sudo umount /dev/disk2s2
6. sudo /usr/local/bin/ntfs-3g /dev/disk2s1 /Volumes/NTFS1 -olocal -oallow_other
7. sudo /usr/local/bin/ntfs-3g /dev/disk2s2 /Volumes/NTFS2 -olocal -oallow_other

After this the two drives will be mounted in RW mode on your system.

This is a manual process which needs to be done every time when you’ll connect your external HDD to the system.

Auto mount the NTFS volumes in RW mode

This is not recommended as this will involve the replacement of the Apple’s NTFS mount tool /sbin/mount_ntfs. This will present a security risk for the system.

For replacing the ntfs-3g tool with the Apple’s NTFS mount tool execute the following commands in the terminal. The following commands needs to be executed in the recovery mode. To go into the recovery mode press command+R when the system boots. When in recovery mode go to Utilities and then click on Terminal and enter the following:

sudo mv "/Volumes/Macintosh HD/sbin/mount_ntfs" "/Volumes/Macintosh HD/sbin/mount_ntfs.orig"

sudo ln -s /usr/local/sbin/mount_ntfs "/Volumes/Macintosh HD/sbin/mount_ntfs"

Uninstallation

To uninstall ntfs-3g execute following in terminal:

brew uninstall ntfs-3g

And to restore the Apple’s NTFS mount tool again go to recovery and enter following in the terminal:

sudo mv "/Volumes/Macintosh HD/sbin/mount_ntfs.orig" "/Volumes/Macintosh HD/sbin/mount_ntfs"

This was quite a long process but it involves free tools,but if you want to use a straightforward method then use the Paragon NTFS software which costs $19.95.

The list of commands is provided in the repository here.

Please click on the 👏 button if you liked it and hold it for giving more love.

If you wish to connect:

Twitter Instagram LinkedIn Github

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 340,876+ people.

Subscribe to receive our top stories here.

How to Read/Write on external HDD with NTFS partition on macOS was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.