Forem: Brilliance Oparaku

Introduction To Deep Learning

Brilliance Oparaku — Fri, 24 Feb 2023 17:09:23 +0000

If you've been on the internet recently, you must have used or interacted with a deep learning program. One of the more popular ones is "ChatGPT-3" which was released by OpenAI.

In this article, we will be introducing this concept known as "deep learning".

What is deep learning ?

Deep learning is a branch of machine learning that runs on artificial neural networks.
These neural networks mimic the brain and learning patterns associated with it.

The deep learning algorithms are inspired by the structure and function of the brain thereby mitigating explicit programming as it learns to use data it receives over time, much like the human brain.

History

Deep learning has been around for a while. Neural networks were a major area of research in both neuroscience and computer science until 1969. It didn’t thrive as it is now because there wasn’t a lot of sufficient data and processing power for this concept to thrive as we have nowadays.

This tech enjoyed a resurgence in the 1980s but fell into eclipse again in the first decade of the century and has returned once again in what seems like a hype due to the rise in popularity of ground-breaking AI tools like DALL-E and ChatGPT, which are both products by Open AI.

In the past ten years, the best-performing artificial intelligence systems, such as Amazon's "Alexa", Microsoft's "Cortana", Apple's "Siri" and Google's automatic translator, have all resulted from deep learning.

How do neural networks work ?

Neural networks are a means of doing machine learning, in which a computer learns to perform tasks by analyzing past examples or data. Usually, data that is fed into these computers are hand labeled in advance for the computer to use these labels to identify similar patterns.

An example of this is the image-recognition system which is fed with thousands or even millions of images of cars, cats, houses, and so on, depending on the goal to be accomplished with this system. The system will find visual patterns in the image that consistently correlate with specific labels.

How Deep Learning Models Actually Work

Deep learning models have the ability to learn from data continuously, and this makes them well-suited for tasks such as navigation, speech recognition, Natural Language Processing, image recognition, and more.

To put things in perspective, deep learning is a subdomain of machine learning with accelerated computational power and very large data sets, and with this, deep learning algorithms can self-learn hidden patterns within data to make predictions.

The underlying architecture for deep learning was inspired by the structure of the brain. For this reason, quite a few fundamental terminologies within deep learning can be mapped back to neurology. Similar to how neurons form the fundamental building blocks of the brain, deep learning architecture also contains a computational unit that allows the modeling of non-linear functions called perceptron.

A neural network consists of thousands or even millions of simple processing nodes that are densely interconnected. The majority of today's neural networks are organized into layers of nodes and are "feed-forward", meaning that data moves through them in only one direction. An individual node might be connected to several nodes in the layer beneath it, from which it receives data, and several nodes in the layer above it to which it sends data.

To each of its respective incoming connections, a node will assign a "weight". When the network is active, the node receives a different data item i.e., a different number over each of its connections, and multiplies it by the associated weight. It then adds the resulting products together, yielding a single number. If that number is below a particular threshold value, it passes no data to the next layer, and if the number exceeds the threshold value, the node "fires", which in today's neural networks means sending the sum of the weighted inputs along all its outgoing connections.

While a deep learning model is being trained, all its weights and thresholds are initially set to random data to compensate for the unavailability of large data sets at the onset of the training.

The training data is consistently fed from the input layer, passing through the hidden layers, which process most of the data getting multiplied and added together in complex ways to yield unique or highly accurate results according to each input. This process is repeated until the model consistently recognizes data with similar labels and, as such, yields similar outputs.

In its most basic form, a neural network contains three layers: an input layer, a hidden layer, and an output layer.

Applications of Deep Learning

Deep learning as a technology is limitless and can be applied in almost any field. Some of these can include:

Image recognition: it can be used to train models to recognize shapes, images, and objects as well as to understand content and context. This is already being implemented in Gaming, retail, and tourism.
Advanced Map Navigation: Deep learning can be used to train advanced navigation systems. Some of this can be seen in Tesla cars and google's navigation systems.
Automatic text generation: A collection of text can be fed into a deep learning model, word-by-word, or character-by-character. Sequentially, the model is capable of learning to spell, write sentences, punctuate, or even capture a particular style of writing.
Natural Language Processing: Deep learning models are used to understand, generate and translate human languages. This can be done by feeding large amounts of vocal data sets to the model for training, repeating the process until the outputs become accurate and similar.
Robotics: Deep learning models are used to train robots and improve their ability to perceive and interact with the environment.
Finance: Deep learning models are used to analyze past data and make accurate predictions and also detect fraud.

Conclusion

To wrap it up, deep learning is extremely powerful and can be used to achieve great things. There are still plenty of theoretical and moral questions to be answered but armed with the information in this article, you are now ready to go deeper into your deep learning journey. Stay tuned for more articles in this series. Build "Deep" things.

Introduction to Data Structures and Algorithms

Brilliance Oparaku — Mon, 26 Dec 2022 09:31:03 +0000

Data structures can seem complex to grasp at first but understanding the concepts can allow us to write efficient and optimized computer programs. The key to understanding this amazing concept in programming is being consistent with practice as with every other thing.

Learning data structures are also very useful for technical interviews and if you understand the patterns you will be a step ahead of the competition.

In this article, you will understand the fundamentals of data structures.

What is a data structure ?

A data structure is a group of data elements that provide the most efficient ways to store and perform different actions on and with the data stored on a computer. A data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.

The choice of a good data structure makes it possible to perform a wide range of critical operations effectively. An efficient data structure utilizes minimal memory space and processing time.

Data structures serve as the foundation for abstract data types, the abstract data type defines the logical form of the data type, and the data structure implements the physical form of the data type.

The need for data structures

The structure of the data and synthesis of the algorithm are relative to each other. Data structures are necessary for designing efficient algorithms, for provision of reusability and abstraction.

Data structures are critical for time-saving while performing operations such as storage, retrieval, processing, and manipulation of any amount of data. Some of the needs for data structures include: Efficient time utility, easy data representation, easy data organization and reduction in computer memory space requirement.

Types of data structures
There are two types of data structures; the linear data structures and the non-linear data structures. Let’s learn about their differences:

Linear data structures: This is a type of data structure where data is arranged linearly or in a linear pattern. The elements are arranged so that an element is linked directly to the previous and next elements in the data set. Some examples are: arrays, lists, stacks and queues.
Non-linear data structures: In this type of data structure, data is arranged in different dimensions such as one-to-one, one-to-many and many-to-many. Some examples are trees, graphs, and tables.

An image showing the linear and non-linear data structures

Breaking down the data structures

In this section we’ll be going over some linear and non linear data structures.

1. Arrays

Arrays are extremely powerful data structures that store a collection of similar data elements at adjacent memory locations.

This implementation is necessary for the retrieval of elements stored at any particular index and storage of multiple items of the same type at once. This is done by adding an offset to the base value, which in most cases is the memory location of the first element of the array (usually represented by the name of the array).

2. Linked Lists

Just like arrays, linked lists are linear data structures. Linked list elements are not stored at adjacent memory locations rather the elements are linked using pointers from the elements within the list.

A linked list consists of nodes where each node represents a data field and a reference link to the next node in the list. There are different types of linked lists including singly linked lists & doubly linked lists

Singly linked lists: This type of linked list is unidirectional. It contains nodes that have a value field as well as a next field that points to the next node in the list. Some operations that can be performed on a linked list are insertion, removal, and traversal.
Doubly linked lists: In this type of linked list, each node contains a value field, a next field, and a previous field pointing to the previous node in the sequence.

3. Stacks

A stack is a linear data structure that follows a specific order in which operations are running. The order may be LIFO (Last-In-First-Out) or FILO (First-In-Last-Out).

In this type of data structure, all insertion and deletion operations are allowed only on one end, called TOP.

A stack is an abstract data type (ADT) and can be implemented in most programming languages. It is named a stack because it behaves like a real-world stack e.g. a deck of cards or a stack of plates.

The basic operations that can be performed in a stack are:

Initialize: Create an empty stack
Push: Add an item to the stack. If stack is full, return an overflow condition.
Pop: Remove the top item from the stack.
Peek or Top: Return the top element of the stack
isEmpty: Return true if the stack is empty, else return false.
isFull: Check if stack is full.

4. Queues

A queue is a linear list in which elements can only be inserted at one end, called the rear, and deleted only at the other end, called the front. Like a stack, a queue follows a specific order in which the operations are performed. The order is First-in-First-out (FIFO).

A real-world example of a queue would be a consumer queue, where the first consumer is served first, and the next comes.

Stacks and queues are similar, although one major difference is that in stacks, we remove the item that was most recently added, and in queues, we remove the item that was least recently added.

The basic operations that can be performed in a queue are

Enqueue: Insert an element to the queue
Dequeue: Remove an element from the queue. if the queue is empty, then it is said to be an underflow condition
Peek: Retrieves the element at the front node of the queue without deleting it.
isFull: Validates if the queue is full.
isNull: Checks if the queue is empty.
Front: Get the first item from the queue.
Rear: Get the last item from the queue.

5. Binary trees

A binary tree is a tree-type non-linear data structure with a maximum of two children for each parent, referred to as parents. Trees are multi-level data structures with a hierarchical relationship among their elements known as nodes.

A binary tree is denoted by a pointer to the topmost node in the tree. If the tree is empty, that makes the value of the root NULL. A binary tree node contains three main parts: Data element, Left (Pointer to the left child), and Right (Pointer to the right child).

5. Binary search tree

A binary search tree is a binary tree with the following additional properties:

The left part of the root node contains keys less than the root node key
The right part of the root node contains keys greater than the root node key
There is no duplicate key present in the the binary tree

6. Heap

A heap is a special tree-based data structure which is an almost complete tree that satisfies the heap property. Heaps can be of two types:

Max-Heap: In a max heap, the value in each internal node is greater than or equal to the values in the children of that node.
Min-Heap: In a min heap, the value in each internal node is less than or equal to the values in the children of that node.

7. Graph

A graph is a non-linear data structure consisting of vertices and edges. The vertices are sometimes referred to as nodes, and edges are lines or arcs that connect any two nodes in the graph. A graph fundamentally has two parts:

Vertices: These are the fundamental units of the graph. They can also be called nodes or vertexes. Every node/vertex can be labeled or unlabeled.
Edges: These are drawn to connect two nodes in the graph. It can be an ordered pair of nodes in a directed graph. Edges can also be called arcs, and every edge can be labeled or unlabeled.

Graphs are very useful in real-life problems. They can be used to represent networks, and these may include paths in a city or telephone network, or circuit network. They are also used on social networks like LinkedIn and Facebook. On Facebook, each person is represented by a node that contains information like the id, name, gender, etc.

Conclusions
In conclusion, data structures can be very useful and efficient in real world scenarios.

It is very important to understand how data structures work, when and how to implement them to level up your skills and gain access to any esteemed tech companies.

In the next article, I will cover the implementation of these data structures, so stay tuned. In the mean time, you can check out this course by Colt Steele on data structures and algorithms.!

How To Build A Progressive Web Application in 2022

Brilliance Oparaku — Sat, 12 Nov 2022 20:18:10 +0000

Mobile devices now account for over half of the web's traffic. This has led mobile apps to become a staple of usability and as such enforced the need for web applications to provide a native and traditional experience. There comes Progressive Web Apps (PWAs)!

PWAs enable you to provide a mobile-app-like experience to users by implementing modern web technologies. This leads to a superior experience where your website or web app behaves like a mobile app but still runs in the browser under the hood. PWAs give you the ability to install your website on a mobile home screen, access your web app when offline, get push notifications and more.

In this article, I’ll show you how to build a progressive web application. So, let’s get right into it.

Prerequisites

I understand you're excited about this but before you begin this tutorial, you'll need the following:

A web application or website (local or deployed)
Good knowledge of javascript

Setup

In this tutorial, we're going to work with a basic HTML page with simple markup. Create a file named index.html and paste the code snippet below into it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Dev Sprite PWA</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script src="client.js"></script>
  </head>
  <body>
    <div class="toolbar" role="banner">
      <span>You are currently ONLINE</span>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M2 12H22"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
        <path
          d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
          stroke="black"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        ></path>
      </svg>
    </div>
    <div class="online-content">
      <p>This is our website homepage.</p>
      <a href="about.html">About</a>
    </div>
  </body>
</html>

Styling

We'll also need the styling to make our page look good. To do this, create a file named style.css and paste the code snippet below into it.

:host {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.online-content {
  margin: 50px;
  padding: 15px;
  border: 1px solid #333;
}
.online-content a {
  margin-top: 10px;
}

p {
  margin: 0;
}

.toolbar {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.toolbar span {
  margin: 0 30px 0 50px;
}

.toolbar.offline {
  background-color: #ff6969;
}

.content {
  display: flex;
  margin: 82px auto 32px;
  padding: 0 16px;
  max-width: 960px;
  flex-direction: column;
  align-items: center;
}

Create Web App Manifest

The web app manifest is a JSON file we will create at the root of our application that provides metadata to instruct the browser about how our PWA gets rendered on the end user's device.

Register Web App Manifest

The manifest file is generally stored in the root of our application, so we can name it anything.webmanifest or anything.json and serve it with the media type of application/manifest+json. To register the web app manifest we use the <link> tag in the

tag in our HTML document.

<head>
  <link rel="manifest" href="/manifest.webmanifest">
</head>

In case some properties in the file are not set correctly, the user agent will fall back to the document metadata.

The request for the manifest is made without any credentials (even if it is on the same domain). Therefore, if the manifest requires credentials, we have to add the attribute crossorigin="use-credentials"

In our manifest.json

<head>
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
</head>
{
  "name": "Dev'Sprite",
  "short_name": "DevSprite",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

This manifest.json file contains some properties (mandatory and optional) that we'll be breaking down.

name: The name displayed on the splash screen when the browser is launched.
short_name: The name displayed underneath your app icon or shortcut
start_url: The first page displayed when your app is opened
display: This tells the browser how to display the app. Different modes like minimal-ui, fullscreen, standalone and more. In this tutorial, our display mode will be the standalone mode
background_color: This tells the browser the background color of the splash screen
theme_color: This will be the background color of the status bar when we open the app.
orientation: This tells the browser the orientation of the app. Could be portrait or landscape
icons: This will tell the browser what icon to display on the app splash screen.

Now that we have the web app manifest, we can now add it to the HTML file

<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />

Conclusion

This article covers the first step you need to carry out when creating a progressive web application. But there’s more you need to do to make it fully functional. I will cover the next steps in my next article so stay tuned for it. In the mean time, check out this article by Christine Dodrill to learn more about PWAs.