Introduction to AI for Ionic developers: Synaptic training

As promised in the previous AI tutorial, we are going to use Synaptic this time.
In the previous tutorial, we trained our AI to influence an Ionic application. However, we used the easiest way. Brain.js has many abstractions that help us, we are now going to use Synaptic and go deeper in the AI.We are going to see how manual training is done in AI.

This time we need the Synaptic library:

We already have our working code in the home.ts file.

We start with some small modifications:

We don’t require the brain library anymore, but the synaptic one.
We create a perceptron property for later use.

When we talk about Perceptron, you might think about:

ionic ai for developers synaptic training perceptron fun

In fact, it’s not that cool…

As the official documentation states:

Multilayer perceptrons, also known as feed-forward neural networks. They consist of a sequence of layers, each fully connected to the next one.

It’s not the leader of the Decepticons, but that’s still cool … right?

We can now go to the train method:

This will create a network which has 3 input layers, 60 hidden layers and 5 output layers. Since you already have some knowledge in AI, the only mystery here is the hidden layers. This is also a mystery for researchers. We know that the more hidden layers we have, the better results we will get. However, we don’t know why!

There is a common assumption that the information travels through more layers allowing to have better granularity, ex:

  1. Layer 1 knows that we are analyzing a pixel
  2. Layer 2 knows that it’s a form
  3. Layer 3 knows that it’s a square
  4. etc.

In the previous tutorial, we just used a train method with some parameters:

Today, we will use the grandfather of training: a good old loop.

We will train 6000 times (1000* 6 inputs) our network by triggering the following trainPerceptron method:

The activate method will ask the following question: “What do you say when I tell you this?”.

The propagate method will backpropagate the right answer. Gently forcing the AI to learn.

This training is as simple as this:

ionic ai for developers synaptic training perceptron fun 2

Finally we update the changeButtons method:

Now that our network is trained, the perceptron property will give us a correct answer if we use the activate method.

And Voila!

Our Ionic application is still working correctly:

Ionic AI intro final result

Enter your email address in the box below to get access to this tutorial (and others) source code.


We, human beings are very inventive.
We recently invented Programming, Algorithm and now we are moving toward Artificial Intelligence.
Many fields switched their focus from human made algorithms to AI-driven breakthrough. We are using AIs, but have little understanding of how things work.
All we do is provide data through the input layers, the AI will create its own algorithm in the hidden layers and show us the result in the output layers.

1 Comment

  1. françois françois
    November 12, 2017    

    It looks like it doesn’t work well for the case that are not in data :
    if i click input: [1, 1, 1], or input: [1, 0, 1] , i get output: [0,0,0,0,0]
    instead of :
    { input: [1, 1, 1], output: [1, 1, 1, 1, 1] },
    { input: [1, 0, 1], output: [1, 1, 0, 1, 1] }

    I had to add this two cases in data so that it works.
    So i wonder if the ai plays a real role here …

Leave a Reply

Your email address will not be published. Required fields are marked *