How To Bring AI Into Your Next Project – Try Our Easy Tutorial

Intro

The 21st century has been marked the dawn of the machine learning age. In the past 2 decades, we’ve witnessed technological advances that have given us self-driving cars, speech recognition and medical diagnoses. Artificial intelligence has gone from an advanced computational concept to a small bot sitting on your kitchen counter beeping when your eggs have finished cooking.

With any promising emerging technology, now is a great time to get involved. And with AI-based salaries in the UK averaging around £62,500, the pay-off will definitely be worth it.

So, What are the options?

When it comes to leveraging the power of AI into a project, we generally have 2 options:

1. Build your own AI

 

The first option is to learn some new technology and build some artificial intelligence that suits your needs. This may sound daunting, but there are plenty of tools our there to help you get started. TensorFlow, for example, is a popular open-sourced machine learning framework that can get your next ai project up and running in a much shorter timespan.  It has an active community and an array of tutorials and guides to help you get started.

Another site worth checking out is Kaggle. Kaggle is a machine learning competition platform that all the big companies use to find innovative solutions to their problems. It’s also a great place to pick up machine learning with a wide variety of (FREE) machine learning courses.

2. Leverage someone else’s AI

 

If picking up all the necessary tools and languages to build your own AI seems like a lot of work, then why not incorporate the AI that someone else has poured their time into? Many of the big cloud computing companies offer a variety of AI’s as well as handy APIs to use them in your next software project. Head over to Google cloud, AWS, or Azure to check these out.

Why don’t we take AI out for a spin? In the remainder of this article, we’ll build a Vue.js application and leverage the clarifai image recognition API to determine the contents of a user uploaded image.

Let’s get stuck into AI!

Getting started

Before we start, we’ll need to install a few prerequisites. Let’s start by installing Node.js. Hit the official site for all the juicy details on how to get this installed. Once it’s correctly set up, we’ll use the node’s package manager (npm) to install all of our other dependencies.

Next on the list is Vue CLI, the easiest way to get started with a new Vue.js project. Let’s install it by typing the following into the console:

npm install -g @vue/cli

We’ll use the Vue CLI to initialise a simple webpack project which contains all of the stuff we need to get started. Simply type:

vue create AIRekognitionApp

Follow through with the setup and hit enter. Our new project still needs a bit of setup – navigate to the new project folder and type npm install. This’ll install all of the dependencies needed by Vue.js.

Finally, type npm run serve to start the development server. This’ll open a new tab in your default browser and display the default Vue home page. Congratulations, you’ve just set up your new Vue.js application!

As standard, it comes with an array of features such as hot reloading. Hot reloading watches the file path for changes in your project files; once a change is detected, the relevant parts of our development server are reloaded and the changes are rendered to the DOM. Handy stuff.

Let’s not re-code the wheel

 

At the moment, we’re working with the basic bones of Vue.js. Any code that we write will have to be styled and developed by us, which turns simple tasks like setting up a toolbar into major feats of engineering. Luckily for us, Vue UI frameworks exist. For this tutorial, we’ll be using Vuetify, a material design framework for Vue.js. However, it’s worth noting there are many alternatives out there.

Simply navigate to the new project directory and install vuetify with the following:

vue add vuetify

And with that, we have all we need to get coding with Vue.js.

Time to Upload

For simplicity, we’ll make a single page application. Let’s delete all the unwanted boilerplate out of our App.vue so we’re left with the bare minimum:

<template>
<v-app>
<v-toolbar
app
color="blue"
>
<v-toolbar-title v-text="title" class="white--text"></v-toolbar-title>
</v-toolbar>
<v-content>
<!-- Our code here -->
</v-content>
<v-footer :fixed="fixed" app>
<span>&copy; 2018</span>
</v-footer>
</v-app>
</template>

<script>

export default {
name: 'App',
data () {
return {
title: 'ai recognition app'
}
}
}
</script>

Our code now gives a simple toolbar with the name of our application, an empty space for new content, and a very boring footer. Let’s get to work!

Handling the data

In order to upload a picture to our picture recognition API, we’ll need a way of allowing the user to select an image. In Vue.js fashion, let’s create a new file upload component that we can pull into our App.vue component. The code for this component can be found on GitHub.

With our component complete, we can import it into App.vue and wire up a couple of methods to handle the selection of a file:

<template>
<v-app>
<v-toolbar
app
color="blue"
>
<v-toolbar-title v-text="title" class="white--text"></v-toolbar-title>
</v-toolbar>
<v-content>
<!-- Our code here -->
<v-layout
column
wrap
class="my-5"
align-center
>
<v-flex xs12 sm12 m12 class="my-3">
<div class="text-xs-center">
<h2 class="display-3">Upload</h2>
<span class="subheading">
This should be a valid image file
</span>
<br><br>
<app-upload v-model="fileName" @formData="getFormData" ></app-upload>
<v-btn @click.native="uploadFiles" class="secondary 1">submit<v-icon right light>cloud_upload</v-icon></v-btn>
</div>
</v-flex>
</v-layout>
</v-content>
<v-footer :fixed="fixed" app>
<span>&copy; 2018</span>
</v-footer>
</v-app>
</template>

<script>

import Upload from './components/FileUpload.vue'

export default {

name: 'App',
data () {
return {
title: 'Vuetify.js',
formData: new FormData(),
fileName: ''
}
},
components: {
AppUpload: Upload
},
methods: {
getFormData(e){
this.formData = e[0];
},
uploadFiles(){
if(this.fileName !== ''){ //quick check the file has been selected
//put the upload magic here
}
}
}
}

</script>
Grabbing an API key

 

To hook our application up to some AI image recognition software, we’ll need to choose a service and get an API key.  There are tons of services to choose from, but I’ve gone for clarifai for it’s simple to use client and it’s 5,000 free requests per month.

To get started, we’ll simply add the clarifai client to our project using npm.

npm install clarifai

Next, we can import it into our App.vue like so:

const Clarifai = require('clarifai')

const app = new Clarifai.App({
apiKey: 'MY_API_KEY'
})
Sending our image

 

Let’s focus on our uploadFiles() method. We have to do three things here:

  1. Get the file from the formData() object emitted from our upload component
  2. Turn this into a Base64 string we can upload to clarifai
  3. use our app object to send the post request to the clarifai API.

Here we go:

uploadFiles(){

if(this.fileName !== ''){ //quick check the file has been selected
//put the upload magic here
const image = this.formData.get('file')
//transform to base64
this.getBase64(image).then(
data => {
//use the clarifai app to send the request
app.models.predict(Clarifai.GENERAL_MODEL, {base64: data.replace('data:image/jpeg;base64,', '')}).then(
function(response) {
// do something with response
console.log(response)
},
function(err) {
// there was an error
console.log(err)
});
}
)

}
},
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}

Nice! When we choose a picture, hit submit and take a look at the developer console, we can see the response from clarifai. By trawling through the JSON we can find the concepts array containing what the AI thinks is inside the image. Let’s upload an image and have a look at what the AI thinks is inside it.

house

The above image gives us the following response from clarifai*:

0{id“ai_x3vjxJsW”name“home”value0.9931201app_id“main”}

1{id“ai_9Dcdh0PK”name“house”value0.99232966app_id“main”}

2{id“ai_TjbmxC6B”name“tree”value0.94773936app_id“main”}

3{id“ai_j09mzT6j”name“family”value0.9477196app_id“main”}

* 4 of 20 concepts from the return response

Making it pretty

What’s the point of an application that just prints to the console? Let’s use our results and present them to our users in a sensible way. How about a chart? We’ll use one of the most popular javascript chart libraries on the web, chart.js – but since we’re using Vue.js we’ll have to work with it’s Vue wrapper vue-chartjs.

Using vue-chartjs

 

Let’s get started by installing the necessary dependencies into our project:

 npm install vue-chartjs chart.js --save

Next, let’s import the bar chart from vue-chart js and set it up in a new bar.js file:

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
this.renderChart(this.chartData, this.options)
}
}
Creating a handy Vue chart component

 

With this setup, we can create a new Vue component to handle all chart related activities. The following code simply works by importing our new bar.js file. We specify props to hand the data to the chart and place a watch on the data object so that our chart renders when the data is changed.

The fillData method simply takes in the data prop and structures in a way that vue-chart.js expects.

<template>
<div>
<v-btn icon slot="widget-header-action">
<v-icon class="text--secondary" @click="fillData()">refresh</v-icon>
</v-btn>
<div slot="widget-content">
<div class="small">
<bar-chart :chart-data="datacollection"
:height="height"
:width="width"
:options="options"
:responsive=true
>
</bar-chart>
</div>
</div>
</div>
</template>

<script>

import BarChart from './bar.js'

export default {
props: ['height', 'width', 'data'],
components: {
BarChart,
},
data () {
return {
yAxisLabel: 'confidence',
datacollection: null,
}
},
mounted () {
this.fillData()
},
watch:{
data: function(){
this.fillData();
}
},
methods: {
fillData () {
let labels = [];
let aidata = [];
this.data.forEach(d => {
labels.push(d.name);
aidata.push(d.value);
})

this.datacollection = {
labels: labels,
datasets: [
{
label: 'Whats in my picture',
backgroundColor: '#4286f4',
data: aidata
}
]
}
}
},
computed: {
options(){
return {
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: this.yAxisLabel
}
}],
xAxes: [
{
ticks: {
autoSkip: false
}
}
]
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false
}
}
}
}
</script>

<style>

</style>
Almost there

 

Now all we need to do is wire-up our new component and pass the chart data from clarifai’s response to our chart component.

First, we need to import and declare our new chart component like so:

 import BarChart from './components/charts/VisionBar.vue'

Next, we’ll register our new component:

components: {
AppUpload: Upload,
AppBarChart: BarChart
}

We’ll also need some new data to hold our chartData:

data () {
return {
.. //all our old data
chartData: [] //new chart data
}
}

Now, we’ll need to find the relevant part of our response and set of chartData equal to it. Here’s our modified uploadFiles method:

uploadFiles(){

if(this.fileName !== ''){ //quick check the file has been selected
//put the upload magic here
console.log('here')
const image = this.formData.get('file')
this.getBase64(image).then(
data => {
app.models.predict(Clarifai.GENERAL_MODEL, {base64: data.replace('data:image/jpeg;base64,', '')}).then(
(response) => {
// do something with response
const array = response.outputs[0].data.concepts;
this.chartData = array;
},
(err) => {
// there was an error
console.log(err)
});
}
)
}
},

All that’s left to do is add our new component to our html.

<app-bar-chart :data="chartData" ></app-bar-chart>

And we’re done! Let’s upload our image and take a look at the output.

Screenshot_2018_10_01_at_20_42_28

Wrapping it up

In this article we discussed how to bring AI into your next project – it may not be as hard as you think.

We created a Vue.js application that leveraged the clarifai image recognition API to determine the contents of our user uploaded images. We also leveraged the chart.js library in Vue.js to present the results to the user.

You can find all the code over on GitHub. Clone the repo, play around with the code and discover how to incorporate AI into your next project!

 

If you're looking for your next job as a software engineer, have companies apply to you by adding your profile to Snap.hr.