Author Archives: Febronei

React, Nextjs, TailwindCSS, Technology

Build Responsive Mobile Navigation With NextJS and TailwindCSS

Posted on by Febronei
01
Nov

NextJS

Next.js is an open-source development framework built on top of React.js. It is React based framework which have various functionalities to power up both server-side rendering and generating client side static websites.

Next.js gives you the best developer experience with all the features it present for any production ready apps. Features such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching give developers a seamless development experience.

TailwindCSS

TailwindCSS is utility-based low level CSS framework intended to ease building web applications much faster and more efficiently. TailwindCSS is so popular nowadays, because it helps build websites without ever leaving your HTML files.

The purpose of this post is to show how easy and intuitive it can be to make a responsive navbar in NextJS with the help of TailwindCSS. So let’s begin. Before we start writing some code, we need to do some initial configuration for tailwind and Nextjs.

Setup and configuration

So, the first thing that we need is install NextJS with NextCli, in our case we prefer to use npm.

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App:

npx create-next-app -e with-tailwindcss responsive-navigation

After creating our boilerplate code, we proceed to install Tailwind and the dependencies:

Setting up Tailwind CSS

To begin with, we install Tailwind. Tailwind CSS requires Node.js so we need to have compatible node version first. After that we can install Tailwind via npm.

Note: Tailwind CSS requires Node.js 12.13.0 or higher.

Install Tailwind via npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Create your configuration files

To generate our tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project. It will also create a postcss.config.js file that includes tailwindCSS and autoprefixer already configured:

Now we need to create Navbar.js in components folder and then call this file directly in Index.js.

import { Navbar } from "../components/Navbar";

export default function Home() {
  return (
    <div>
      <Navbar />
      <div>Responsive Navigations</div>
    </div>
  );
}

Next create navigation bar in the main header. In addition we will proceed to add the hamburger menu that will be responsive for mobile and desktop screens.

import Link from 'next/link';

export const Navbar = () => {
  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-400 p-3 '>
        <Link href='/'>
          <a className='inline-flex items-center p-2 mr-4 '>
            <svg
              viewBox='0 0 24 24'
              xmlns='http://www.w3.org/2000/svg'
              className='fill-current text-white h-8 w-8 mr-2'
            >
              <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
            </svg>
            <span className='text-xl text-white font-bold uppercase tracking-wide'>
              Responsive Navigation
            </span>
          </a>
        </Link>
        <button className=' inline-flex p-3 hover:bg-gray-900 rounded lg:hidden text-white ml-auto hover:text-white outline-none'>
          <svg
            className='w-6 h-6'
            fill='none'
            stroke='currentColor'
            viewBox='0 0 24 24'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth={2}
              d='M4 6h16M4 12h16M4 18h16'
            />
          </svg>
        </button>
        <div className='hidden w-full lg:inline-flex lg:flex-grow lg:w-auto'>
          <div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start  flex flex-col lg:h-auto'>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-gray-600 hover:text-white '>
                Home
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-gray-600 hover:text-white'>
                Services
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-gray-600 hover:text-white'>
                About us
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-gray-600 hover:text-white'>
                Contact
              </a>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
};

Lastly we need a function that hide and show the menu as we click in the hamburger menu. For this we create a state using the useState hook and a function for the button to click the button. We need to call this function when we click the button on the menu.

There is break points which lets, navigation bar to change based on the break points. When it hit small screen sizes such as mobile views, the hamburger menu will be activated. However when we view on large screens the default inline navigation bar activates.

const [active, setActive] = useState(false);

  const handleClick = () => {
    setActive(!active);
  };
<button
    className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'
    onClick={handleClick}
  >
    <svg
      className='w-6 h-6'
      fill='none'
      stroke='currentColor'
      viewBox='0 0 24 24'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
        strokeLinecap='round'
        strokeLinejoin='round'
        strokeWidth={2}
        d='M4 6h16M4 12h16M4 18h16'
      />
    </svg>
</button>

Conclusion

That it’s all. Now we have created a simple responsive responsive menu navigation using NextJS and TailwindCSS.

If you want to learn more on TailwindCSS and NextJS please follow these links of their official sites. Both these technologies are powerful frameworks with great documentation that will allow us to learn more build fun products.

Code Github

Artificial Intelligence, Data science, Machine learning, Technology

How Weight and Bias Impact the Output Value of a Neuron

Posted on by Febronei
09
Oct

Had opportunity to stay one of the finest water villa resorts in Maldives, Gili Lankanfushi (No News No Shoes) for free, Yes for free!

So why not learn something in here. Thanks to Gili team and management.

Let’s begin….

Artificial neurons are digital construct that seeks to simulate the similar behavior of a biological neuron in human brain. Large number of artificial neurons are digitally connected to each other to make up an artificial neural network. Therefore the core fundamental building block of any neural network is artificial neurons.

Artificial Neuron

Artificial neuron is a mathematical model which mimic biological neuron. Each neuron receives one or more inputs and combines them using an activation function to produce an output.

Weights and Biases

Weights and biases are the learnable parameters of a machine learning models. When the inputs are transmitted between each neuron, the weights are applied to the inputs along with the bias.

Weights control strength of the connections between two neurons. It decides how much influence the input will have on the output.

Biases are constant values. Bias units are not influenced by the previous layer but they do have outgoing connections with their own weights.

How Neural Networks Work

At very high level a simple neural network consists input layers, output layers and many hidden layers in between. These layers are connected via series of nodes so they form a complex giant network.

Within each node there are weight and a bias values. As an input enters the node, it gets processed by the value of a weight and bias and then output the result which then passed to the next layer in the neural network. This way, it forms a signals which transmit form one layer to another until it reaches to last output layer.

This complex underlying structures give powers to computers to “think like humans” and produce more sophisticated cognitive results.

So let’s begin with single input neuron’s output with a weight of 1, bias of 0 and input x.

In the second example we will adjust the weight keeping bias unchanged and see how the slop of the function change.

As you see above, if we increase the value of the weight, the slop will get steeper. However, if we reduce weight of one neuron then the slop will decreases.

Now, what if we negate the weight. Obviously the slope turns to a negative.

As mentioned earlier, these graphs visualize how weight causes the output value of a single neuron. Now let’s change a little bit. This time we will keep weight at 1.0 and give different bias values. Let’s start with a weight of 1.0 and a bias of 2.0.

As we increase bias, the function output shifts upward. If we decrease the bias, then the overall function output will move downward as shown below.

Now we have learnt something about artificial neurons. Artificial neurons mimic how human brain works. These complex neurons require weight and bias value to output some result.

React, TailwindCSS, Technology, UI

Add Tailwind CSS to Existing React JS Project

Posted on by Febronei
06
Oct

Sandbanks are everywhere here in Maldives. Today, I went to a sandbank called Vagaath gale hutta (I believe that is the correct location), which is roughly 5 miles north west of Dhevvadhoo. During the trip I took time to write this tutorial.

So without further ado let’s begin…

Front-end technologies are constantly evolving. Some technologies are becoming incredibly popular among the developers while others get less attraction. When it comes to front-end development, now React JS has become number one choice for most of the developers.

When it comes to CSS frameworks, TailwindCSS started to get more stars on Github meaning developers love to use TailwindCSS over other CSS technologies.

React JS

React JS is a JavaScript library developed by Facebook. React JS is efficient, declarative and flexible open-source JavaScript library which lets developers to build scalable frontend web applications much faster and easier. It offers tons of benefits. Compare to other front-end frameworks, React JS is easy to learn, SEO-friendly, helps to build rich user interfaces, able to write custom components and much more.

TailwindCSS

TailwindCSS is utility-based low level CSS framework intended to ease building web applications much faster and efficiently. TailwindCSS helps to build websites without ever leaving your HTML files.

In this tutorial, you will learn how to add tailwindCSS to an existing React JS application. So without further ado let’s create a react app by running the following command.

npx create-react-app react-tailwind
cd react-tailwind

Go to directory of your my-app and run the following command. 

npm i tailwindcss postcss-cli autoprefixer -D

Enter the following command to create the default configuration. This will create a tailwind.js file in the current directory.

npx tailwind init tailwind.js --full

Now, we need to create postcss.config.js file. For that simply run the command below. PostCSS is a tool for transforming styles with JS plugins.

touch postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

Create an assets directory in the src folder. 

mkdir ./src/assets

Then create a file called tailwind.css in ./src/assets.

touch ./src/assets/tailwind.css

Now open tailwind.css and then import the following tailwind files as shown.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Now it is time to modify package.json file just little bit. Simply add the following lines in the scripts tags.

"scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

Lastly import the file ./src/assets/main.css in the App.js file (or the root file of the application).

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
ReactDOM.render(<App />, document.getElementById("root"));

Now run the development server. Simply run: 

npm start

Thats all! Now you can able to use Tailwind classes in your React JS application.

Code: Github

React, Technology

The Must Know Things About useState

Posted on by Febronei
03
Oct

State management is one of the most important parts of any application. Understanding state management is incredibly important as current trend heavily focuses on robust way to manage state of the application as data are constantly read or modified by the users.

In this example we are going make simple counter app with two buttons in order to understand the state management of a react application. We will implement counter button functionality using useState Hooks.

So without further ado let’s create a react app by running the following command.

npx create-react-app my-app
cd my-app
npm start

After little bit of clean up, this is our App.js file looks like as of now. 

import React, { useState } from 'react';'

function Example() {
 

  const [count, setCount] = useState(0);

  return (
    <div>
      <button>-</button>
      <p>You clicked 0 times</p>
      <button>+</button>
    </div>
  );
}

Where can we use useState Hooks?

We can only use useState Hooks inside of a function component. This is not possible in a class components. We can only mix classes and function components with Hooks in a single tree. There for we must to use function components to use Hooks.

Only Hooks at the top level

Do not call Hooks inside loops, conditions or nested functions. Always use Hooks at the top level of your React function before any early returns. Hooks must call in the same order each time a components renders. Thats what allow React to correctly preserve the state of Hooks between multiple useState and useEffect calls. 

function Form() {
  // 1. Use the name state variable
  const [name, setName] = useState('Mary');

  // 2. Use an effect for persisting the form
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. Use the surname state variable
  const [surname, setSurname] = useState('Poppins');

  // 4. Use an effect for updating the title
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

So from this example above, how React knows which State corresponds to which useState call?

Well, React relies on the order in which Hooks are called.

// ------------
// First render
// ------------
useState('Mary')           // 1. Initialize the name state variable with 'Mary'
useEffect(persistForm)     // 2. Add an effect for persisting the form
useState('Poppins')        // 3. Initialize the surname state variable with 'Poppins'
useEffect(updateTitle)     // 4. Add an effect for updating the title

// -------------
// Second render
// -------------
useState('Mary')           // 1. Read the name state variable (argument is ignored)
useEffect(persistForm)     // 2. Replace the effect for persisting the form
useState('Poppins')        // 3. Read the surname state variable (argument is ignored)
useEffect(updateTitle)     // 4. Replace the effect for updating the title

Let’s go back to useState and how to use it.

To use useState Hooks, all we need to do is to call useState function and pass the default state inside the parameter. useState return arrays of values. As we know array always have two values.

Now focus on setCount value and how we set the value inside the component. To do that, we create onClick function inside the button. 

import React, { useState } from 'react';'

function Example() {
 

  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={documentCount}>-</button>
			<span><p>You clicked 0 times</p><span>
			<button>+</button>
    </div>
  );
}

Create documentCount function which will remove one fro our count every time as we click the button.

function documentCount() {
    setCount(prevCount => prevCount - 1)
  }

Now we can able to update our count by decreasing by one each time as we click the button and then render our component for the new value.

That all for now. We will continue writing more tutorials on state management in future.

Full code: ReactStateManagement

Artificial Intelligence, Machine learning, Supervised Learning, Technology

Important Points of Supervised Learning

Posted on by Febronei
25
Jul

For the first time ever I had opportunity to go for a multi-day fishing trip with a group of friends by a local fishing boat. This trip was 6 days long, spent roughly 100 hours in the middle of ocean, within the range of 20-50 nautical miles. This was totally a different experience in my life and during the trip I tried to learn something on supervised learning.

So let’s go…

  • Supervised learning models learn from any given labeled data. They are known as training data.
  • Training data contains different patterns.
  • The algorithm will learn underlying patterns during the training process.
  • In testing phase, training data set helps models to predict a desired outcome for unforeseen data.

Supervised Learning Algorithms

  • k-Nearest Neighbors
  • Linear Regression
    • formula for linear regression, Y= ax+b
  • Logistic Regression
    • formula for logistic regression, y = ln(P/(1-P))
  • Support Vector Machines (SVM)
  • Decision Trees and Random Forests
  • Neural Networks

Advantages of Supervised Learning

  • Supervised learning is easy to understand.
  • Number of classes or parameter will be known before model is deployed.

Challenges of Supervised Learning

  • It requires some amount of expertise to structure accurately.
  • Training a proper models can be very time intensive.
  • Human errors in the datasets can cause poor algorithms.
  • It cannot cluster or classify data on its own.

Supervised Learning Models Can Be Used in:

  • Image and object recognition: Supervised learning algorithms can be used to identify objects in a videos or images.
  • Predictive analytics: It provides deep insights into various business data points. Helps companies to take decisions more easily and accurately.
  • Customer sentiment analysis: Easy to extract and classify important pieces of information from large volumes of data such as emotion, intent and context.
  • Spam detection: Classification algorithms is used to recognize patterns or anomalies in a dataset.
Artificial Intelligence, Machine learning, Technology

A Gentle Introduction to Batch Learning Process

Posted on by Febronei
15
Jul

Introduction

Strategies for machine learning system are classified into two main categories. They are Batch Learning and Online learning. In batch learning, models learn offline while in online learning data flow into the learning algorithm in stream of pipelines. In this article, you will learn:

  • Gentle introduction of batch learning.
  • Problems in batch learning.
  • Solving batch learning problems using online learning method.

So let’s begin…

What is Batch Learning?

Data preprocessing is an important step in machine learning projects. It includes various activities such as data cleaning, data reduction, splitting dataset (training and testing dataset) and data normalization process. To train a well accurate model, a large set of data is required. In batch learning process we use all the data we have for the training process. Therefore, the training process takes time and requires huge computational power.

What is happening under the hood?

After model is fully trained in the development process it will be deployed into the production. Once model is deployed, it will use only the data that we have given to train it. We cannot feed new data directly then let it learn on the fly.

If we want to use new data then we need to start from the scratch. We need to bring down the machine learning model and use new dataset with old data and then train it again. When model trained completely on the new dataset, we then deploy it again to the production.

This is not a complex process perhaps in most of the cases, it might work without any major issues.

If we want to run the machine learning model, in every 24hours or in every week, then training the model from the beginning will be very much time consuming and also expensive. Training a machine learning model with new and old dataset not only requires time and computational power, but also requires large disk space and disk management which may again cost money.

This is fine for small projects but it gets tough in real time where the data is coming from various end points such as IoT devices, computers and from servers.

Training #DatasetDiskspace (TB)
11,000,000100
22,000,000200
33,000,000300

Disadvantages of batch learning

The negative effects of large batch sizes are:

  • Model will not learn in the production. We need to train the model every time with new data.
  • Disk management is costly. As dataset grows then it requires more disk spaces.
  • To train a model with large amount of data set costs time and computational resources.

Online learning

To solve issues we face on batch learning, we use a method called online learning. In online learning, it tends to learn from new data while model is in production. Small batches of data will be used to train the model which are known as mini batches. We will look more into online learning in another article.

Conclusion

In this article we have looked into batch learning strategy and how it works. W’ve highlighted the disadvantages of batch learning and how online learning is used to overcome issues we face in batch learning. Hope you understand something on batch from this article.

Artificial Intelligence, Technology

Important Checklist for Any Machine Learning Project

Posted on by Febronei
23
Jun

There are mainly 8 key steps to consider in machine learning projects.

  1. Frame the problem and understand the big picture.
  2. Get relevant data.
  3. Explore the data set and get insights.
  4. Prepare and clean the data set, expose the underlying data patterns to the algorithms.
  5. Explore different models and identify the best ones.
  6. Fine-tune the models and combine them into a great solution.
  7. Present the solution.
  8. Launch, monitor, and maintain the system.

Let’s understand more…

Frame the Problem and Understand the Big Picture

  1. Define business objective.
  2. How the model could be used?
  3. Identify existing solutions for the problem we want to solve?
  4. Which machine learning method we choose (supervised, unsupervised, reinforcement learning, online or offline, etc.)?
  5. How we measure model performance? Does the model able to achieve our objectives?
  6. Identify the minimum performance needed to reach the business objective?
  7. What are similar problems and use cases? Can we reuse experience or tools?
  8. Does human expertise better than a computer algorithm?
  9. List all the possible assumptions and verify them.

Note: automate as much as possible in every steps in the process.

Get Relevant Data

Note: automate as much as possible so we can easily get fresh data.

  1. List the data you need and how much you need.
  2. Identify the data sources. Where can you get data.
  3. Check how much storage requires and create a workspace.
  4. Check for legal obligations before accessing any data storages. Get authorization if necessary.
  5. Convert the data to a friendly format where we can manipulate easily.
  6. Ensure sensitivity of the information.
  7. Check data type (time series, sample, geographical etc) and its size.
  8. Sample a test set, put it aside, and never look at it.

Explore the Dataset and Get Insights

Note: Having industry expert’s opinion and insights would always be beneficial.

  1. Create a copy of the data sheet. Sampling it down to a manageable size would be greatly helpful for data exploration process.
  2. Keep a record of our data exploration. We can use Jupyter or any other notebook for machine learning projects.
  3. Study each attribute and its characteristics.
  4. Identify the target attributes if the model is supervised learning.
  5. Visualize the data.
  6. Study the correlations between each attributes.
  7. Identify the promising transformations which can be useful.
  8. Identify and collect extra data that would be useful.
  9. Document what we have learned.
NameType% of missing valuesNoisiness and type of noisePossibly useful for the task?Type of distribution
–categorical–stochastic–Gaussian
–int/float–outliers–uniform
–bounded/unbounded–rounding errors,–logarithmic
–text––––
–structured––––

Prepare and Clean the Dataset

Notes: Keep original dataset intact. Work with copies. That way we can keep original dataset safe.

Write functions for all data transformations. So we can:

  • Easily prepare a dataset for fresh data.
  • Apply these transformations in future projects.
  • Clean and prepare test set.
  • Clean and prepare new data instances when our solution is live in production.
  • Make it easy for hyperparameters process.
  1. Data cleaning: Removing outliers is often important even though it is optional. Fill missing values (e.g., with zero, mean, median…) or ignore such columns and rows.
  2. Feature selection is again optional but highly recommended: Drop the attributes (features) that is not useful for the task.
  3. Feature engineering, where appropriate: Discretize continuous features. Decompose features (e.g., categorical, date/time, etc.). Add promising transformations of features (e.g., log(x), sqrt(x), x^2, etc.). Aggregate features into promising new features.
  4. Feature scaling: standardize or normalize features.

Explore Different Models

Notes: If we have huge data set, it is good idea to sample smaller training sets so we can train many different models in a reasonable time (however this could penalizes complex models such as large neural nets or random forests).

  1. Train many quick models from different categories (e.g., linear, naive Bayes, SVM, Random Forests, neural net, etc.) using standard parameters.
  2. Measure and compare their performance. Using N-fold cross-validation compute standard deviation and mean of the performance measure on the N folds.
  3. Analyze the types of errors that the models make. What data would a human have used to avoid these errors?
  4. Have a quick round of feature selection and engineering.
  5. Identify most promising models.

Fine-Tune the System

Notes: Use as much data as possible as you move toward the end of fine-tuning.

Don’t tweak the model after measuring the generalization error: It will start overfitting the test set.

  1. Fine-tune the hyperparameters using cross-validation.
  2. Try Ensemble methods. Combining your best models will often perform better than running them individually.
  3. Once you are confident about your final model, measure its performance on the test set to estimate the generalization error.

Present the Solution

  1. Document everything we have done.
  2. Create a presentation. Highlighting the big picture is important.
  3. Explain the business objective. Mention model performance and also show other models results
  4. Present key learning points in a beautiful visualizations. Describe what worked and what did not. List assumptions and limitations of the model.

Launch the Model

  1. Do proper testing and launch the model in production with production data inputs.
  2. Monitor system performance at regular intervals and trigger alerts when it drops.
    • As data evolve models performance will be affected. Beware of slow degradation too.
    • Measuring performance may require a human pipeline (e.g via a crowdsourcing service).
    • Also monitor inputs’ quality
  3. Retrain models on a regular basis on fresh data.

Learning resources:

  • Learning resources: Hands‑On Machine Learning with Scikit‑Learn, Keras, and TensorFlow: Book by Aurelien Geron
Artificial Intelligence, Technology

A Brief Introduction to Supervised Learning

Posted on by Febronei
21
Jun

What is Supervised Learning?

Supervised learning is one of the most common paradigm for machine learning problems. The algorithms used in supervised learning are easily understandable, so it is more common.

When we teach kids, often we show flash cards, objects and several examples. They try to learn new things during that process. We then show similar things to kids and ask different kind of questions in order to understand the learning progress.

The same procedure will be applied during supervised learning. We train algorithms using large data sets. Some data are labeled with the correct answers. These labels or targets are known as features. Therefore we know the right answer before we train any model.

Supervised learning mostly consists of classification and regression. However there are other variant as well.

Let’s understand more…

Regression

Predicting the price of a car for a given feature set (milage, color, brand etc). Some regression algorithms can be used for classification as well and vice versa. For example, Logistic Regression can be used for classification. It can output a value that corresponds to the probability of belonging to a given class (eg., 20% chance of being spam).

Classification

Classification is the process of predicting the class of given data points. Some examples of classification include spam detection, churn prediction, sentiment analysis, classifying hand written characters and so on.

Sequence Generation

Given a picture, predict a caption describing it. Sequence generation can sometimes be reformulated as a series of classification problems (such as repeatedly predicting a word or token in a sequence).

Object Detection

Given a picture, draw a bounding box around certain objects. This can also be expressed as a classification problem (given many candidate bounding boxes, classify the contents of each one).

Image Segmentation

Given a picture, draw a pixel-level mask on a specific object.

Most Common supervised learning Algorithms are:

  • Logistic Regression
  • Linear Regressions
  • K-nearest neighbors
  • Decision Tree & Random Forest
  • Neural Networks
  • Support Vector Machines

Training Process

Training dataset consists of both inputs and outputs. The model will be trained until it detects the underlying patterns and relationships between the input data and the output labels. The accuracy will be measured through the loss function, adjusting until the error has been sufficiently minimized. That is the point where it reaches to global minima point.

Over time, models try to learn, thus accuracy will normally be improved. When the training process is completed, these models are used to make new predictions on unseen data.

The predicted labels can be either numbers or categories. For instance, if we are predicting house prices, then the output is a number. So we called it regression model. When we are predicting spam emails using email filtering system, we have two choice whether email is spam or not. Therefore the output is categorical. This type model is known as classification model.

Training Process With a Real Example

Let us understand the training process with an example. For example we have a fruit basket which is filled up with different types of fruits. We want to categorize all fruits based on their category.

Our fruit basket is filled with Apples, Mango and Strawberries. For the models we will label fruits with corresponding unique characteristics of each fruits which make them unique by their type.

NoSizeColorShapeName
1BigRedCircular shape with a depression at the topApple
2BigYellowRounded top shape with a curved convergent shaped to the bottom. Mango
3SmallRed and GreenOval shape with rough surfaceStrawberries

Now, the dataset is ready. It consists of different parameters called features and labels. Algorithm will learn the underlying pattern and output the results. Initially the output will not be so accurate but, as training time increase usually the model gets better and better. Once the model reaches to its best accuracy level, we feed new dataset called test dataset. This way we can make sure its learning progress and the accuracy.

Conclusion

In supervised learning, we train a machine learning algorithm using large set of data points. Some of the data points are labeled with target output. Our aim in supervised learning is to learn a model from labeled training data that allows us to make predictions about unseen or future data.

Learning resources: