Convolutional Neural Network Visualizer

Project report submitted in partial fulfillment

for the requirement of the Degree of

MASTER OF SCIENCE IN SOFTWARE SYSTEMS

JEGAN PRABHU M
19MSS019

Under the Guidance of

Dr. B Rajesh Kumar MCA., M.Phil., Ph.D.
Assistant Professor

Department of Software Systems

Sri Krishna Arts and Science College

Coimbatore 641 008

APRIL 2024
 Sri Krishna Arts and Science College

Reaccredited by NAAC with ‘A’ Grade

Affiliated To Bharathiar University

Kuniamuthur, Coimbatore -641008

DECLARATION

I hereby declare that the Project report entitled “Convolutional Neural Network
Visualizer” submitted in partial fulfillment of the requirements for the award of
degree of Master of Science in Software Systems is an original work and it has not
previously formed the basis for the award of any Degree, Diploma, Associateship,
Fellowship or similar titles to any other university or body during the period of my
study.

Place: Coimbatore

Date:

Signature of the Candidate

 Sri Krishna Arts and Science College

Reaccredited by NAAC with A' Grade

SRI KRISHNA AMliated to Bharathiar University

INSTITUTIOA
CoIMRAONS
Kuniamuthur, Coimbatore -641008

CERTIFICATE
This is to certify that the project report
entitled "Convolutional Neural Network
Visualizer" submitted in partial fulfillment of
of Science in Software Systems is a
requirements for the degree of Master
record of bonafide work carried out by Jegan
Prabhu M, 19MSSO19 and that no part of this has
been submitted for the award of
any other degree or diploma and the
work has not been published in popular journal
or magazine.

Dr.ITHA
Associate Professor and Head
Depattment of Software Systems
Stri Erishna Arts and Scie nce College
Euniyamuthur, Coimbatore -641 0D8
This Project Report is submitted for the Viva Voce
examination conducted on
13.4 24, at Sri Krishna Arts and Science College.

Internal Examiner dplpulnamy

Extetnal Examiner
 ACKNOWLEDGEMENT

The satisfaction and euphoria of the successful completion of any task would be
incomplete without the mention of the people who made it possible, whose constant
guidance, encouragement, crowned my effort with success.

I have been fortunate enough to secure co-operation, guidance and assistance

from a number of people. I am at a loss of how to express the deep sense of gratitude I
have towards all of them.

I am greatly indebted to the Principal Dr. R. JEGAJEEVAN, MBA., Ph.D., and

Dean Computer Science and Mathematics, Dr. K. S. JEEN MARSELINE, MCA,
,

M.Phil., Ph.D., and Head of the Department Dr. C. SUNITHA, MCA, M.Phil.,
Ph.D., who has given permission for the fulfilment of the venture.

I would like to express my gratitude to Dr. B Rajesh Kumar MCA., M.Phil.,

Ph.D., Assistant Professor, Department of software Systems., and Department of
Software Systems for her invaluable support and guidance throughout my Project.
I owe my gratitude and thanks to Senthil Kumar A.G, CTO and Flexidigit
Technologies for permitting me to carry out the Project.
I would like to express my sincere thanks to the God Almighty for the constant
love and grace that has bestowed upon me.

Finally, I thank my parents, family members, and my beloved friends for their
moral support and encouragement without which I would not have been able to follow
my dreams.

Jegan Prabhu

19MSS019
 TABLE OF CONTENTS
PAGE
S. NO. CONTENTS
NO
1 Introduction
1.1 Project Overview 2
1.2 Project Objective 2
1.3 Organization Profile 3
1.4 Module Description 3
2 Literature Study 5
3 System Specification
3.1 Hardware Specification 9
3.2 Software Specification 9
4 System Study
4.1 Existing System with limitations 12
4.2 Proposed System with advantages 13
5 Dataset
5.1 Dataset Description 14
6 System Design
6.1 Use case Diagram 15
6.2 Data Flow Diagram 16
7 System Testing
7.1 Unit Testing 18
7.2 Verification Testing 20
7.3 Performance Testing 21
7.4 Acceptance Testing 22
8 System Implementation and Maintenance
8.1 Implementation Procedures 23
8.2 Maintenance Procedures 24
9 Conclusion 25
10 Scope for Future Enhancements 26
Bibliography 27
Appendix
A Use Case Diagram 28
B Data Flow Diagram 29
C Dataset Images 30
D Sample Screenshots 32
E Sample Code 36
CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

ABOUT THE COMPANY

Flexidigit's commitment to excellence is exemplified through their continuous pursuit

of innovation and adaptability. With a forward-thinking mindset, they stay at the forefront of
emerging technologies, ensuring that their clients receive forward-compatible solutions. The
company's ethos revolves around collaboration, encouraging an open exchange of ideas and
fostering an environment where creativity flourishes.

Flexidigit is a dynamic software development company specializing in crafting

customized IT solutions for established businesses. Their team of highly skilled professionals
leverages modern technologies and transparent processes to deliver cutting-edge projects
across web, mobile, IoT, and SaaS platforms. They offer unique problem-solving approaches,
embracing diverse skill sets and flexible work environments. Building trust is paramount,
ensuring long-term client relationships based on delivering only what they promise. As a
leading provider in cloud, App Dev, AI, and IoT, Flexidigit empowers businesses to thrive in
the digital era, streamlining operations and unlocking new growth opportunities. Their
innovative, scalable, and secure solutions cater to the diverse needs of clients, enabling them
to not just adapt but thrive in the ever-evolving digital landscape.

M.SC SOFTWARE SYSTEMS 1

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 1

INTRODUCTION

1.1 PROJECT OVERVIEW:

The "Convolutional Neural Network Visualizer" project is an innovative and interactive

platform designed for the analysis and visualization of model classification processes. The
focal point of this endeavour is the meticulous training of categories of input images sourced
from the extensive ImageNet database. Leveraging cutting-edge technologies, the project
incorporates Rectified Linear Unit (ReLU) as an activation function, pooling layers for spatial
subsampling, and SoftMax layers for final classification, resulting in a comprehensive
understanding of the intricate steps involved in image classification.

The user-centric design of the platform allows individuals to effortlessly upload images,
with the ultimate aim of the model classifying them within the pre-trained 10 categories.
Beyond mere classification, the project focusses the significance of visualization to provide
users with insights into the decision-making process of the Convolutional Neural Network
(CNN). Developed entirely in JavaScript, the project provides a user-friendly interface,
complete with detailed network exploration.

The Convolutional Neural Network Visualizer project distinguishes itself by not merely
delivering classification results but by demystifying the intricacies of CNNs. The commitment
to transparency and user engagement is evident in features that allow users to interact with the
classification process actively. The project is a testament to the evolving landscape of artificial
intelligence and image processing, offering a valuable resource for researchers, developers, and
enthusiasts seeking to enhance their understanding of Convolutional Neural Networks.

1.2 PROJECT OBJECTIVE:

The "Convolutional Neural Network Visualizer" project is a multidisciplinary effort

that combines scientific research with practical application to advance the fields of
convolutional neural networks (CNNs) and image classification. From a scientific standpoint,
the study aims to decipher the complex dynamics involved in CNN learning processes when
classifying images. In terms of methodology, a thorough examination of the activation, pooling,

M.SC SOFTWARE SYSTEMS 2

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

and SoftMax layers is conducted, with a particular emphasis on identifying their combined
contributions to the neural network's built-in decision-making processes. The subsequent
scientific analyses include model correctness, performance measures, and the subtle impact of
hyperparameters on convergence.

Concurrently, the project aims to translate its scientific discoveries into concrete
applications in the real world. The project serves as an approachable instrument for smooth
picture categorization, meeting the real-world requirements of people looking for a simple fix
for image recognition problems. The user interface makes it simple to upload images and
receive precise categorizations within previously learned categories. Designed to be an
instructional tool, especially for non-technical users, the project's intuitive interface helps to
deconstruct the complexity of CNNs and foster a deep understanding of picture categorization
procedures. The project provides researchers and image analysis specialists with a wide range
of insights and visualizations that enhance their ability to understand CNN decision-making
dynamics and make well-informed decisions in their respective fields.

1.3 PROJECT OVERVIEW:

The Convolutional Neural Network Visualizer is a benchmarking tool for the

empirical evaluation of image classification models in practical settings, in addition to its
pedagogical and analytical aspects. Its features can be used by academics and developers to
perform comparative assessments of various CNN designs and settings, which will
significantly advance the continuous development of image processing technologies.

1.4 MODULE DISCRIPTION:

Image Upload Module:

Enables uniform data transfer and, crucial for starting the classification pipeline through input
image acquisition, and facilitates user interaction by implementing a secure image upload
mechanism.

M.SC SOFTWARE SYSTEMS 3

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CNN Training Module:

Manages the complexities of training models, coordinating the optimization of weight

parameters and convolutional kernels. It uses backpropagation techniques to gradually improve
the network's capacity to classify a variety of image categories from the ImageNet dataset.

Implementation of Activation Function:

Introduces non-linearity to the model's decision boundaries and optimizes convergence during
the training phase by implementing the Rectified Linear Unit (ReLU) activation function
within the CNN architecture.

Module for the Pooling Layer:

Optimizes the effectiveness of the image classification process by integrating pooling layers
for spatial subsampling and carefully down sampling feature maps to preserve important
information while lowering computational complexity.

Integration of SoftMax Layers:

Utilizes SoftMax layers as the last activation function to convert raw scores into probability
distributions among categories, which makes it easier to make a final classification decision
and confirms that the model's output implies a probabilistic framework.

Visualization Module:

Develops complex visualizations with the D3.js framework to clarify the multi-dimensional
feature maps and activation patterns in the CNN. It improves interpretability and helps identify
features in the image.

Network Exploration Interface:

Builds an interactive and responsive user interface by integrating JavaScript frameworks such
as React.js to allow for the exploration of the architecture, weights, and activations of the neural
network.

Integration of the Tiny VGG Model:

Using deep learning frameworks like TensorFlow, the integration of the Tiny VGG model
architecture captures convolutional and fully connected layers to achieve a balance between
computational efficiency and model expressiveness for image classification tasks.

M.SC SOFTWARE SYSTEMS 4

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 2

LITERATURE SURVEY

2.1 Deep Learning

Deep learning is an aspect of artificial intelligence (AI) that is concerned with emulating the
learning approach that human beings use to gain certain types of knowledge. It is inspired by
the functionality of our brain cells called neurons. At its simplest, deep learning can be thought
of as a way to automate predictive analysis with the collection of algorithms used in machine
learning used to model high-level abstractions in data through the use of model architectures,
which are composed of multiple nonlinear transformations. It is a part of a broad family of
methods used for machine learning that are based on learning representations of data. Deep
learning removes the manual identification of features in data and instead relies on whatever
training process it has in order to discover the useful patterns in the input examples. This makes
training the neural network easier and faster and it can yield a better result that advances the
field of artificial intelligence.

2.1.1 DEEP LEARNING TECHNIQUES

Various deep learning techniques are employed to solve various problems. Some of them are:
❖ Fully Connected Neural networks

❖ Convolutional Neural networks

❖ Recurrent Neural networks

2.1.2 NEURAL NETWORK

A neural network is a series of algorithms that endeavours to recognize underlying relationships
in a set of data through a process that mimics the way the human brain operates. Neural
networks can adapt to changing input so the network generates the best possible results without
needing to redesign the output criteria. The conception of neural networks is swiftly gaining
popularity in the area of trading system development.

A neural network contains layers of interconnected nodes. Each node is a perceptron and is
similar to a multiple line regression. The perceptron feeds signal produced by a multiple linear
regression into an activation function that may be non-linear. In a multi-layered perceptron

M.SC SOFTWARE SYSTEMS 5

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

(MLP), Perceptron’s are arranged in interconnected layers. The input layer collects input
patterns. The output layer has classifications or output signals to which input signals may map.
The hidden layers extrapolate salient features in the input data that have predictive power
regarding the outputs. This describes feature extraction, which accomplishes a utility similar to
statistical techniques such as principal component analysis.

2.2 Convolutional Neural Network

A Convolutional Neural Network (CNN) is a type of artificial neural network used in image
recognition and processing that is specifically designed to process pixel data. CNNs are
powerful image processing, artificial intelligence (AI) that use deep learning to perform both
generative and descriptive tasks, often using machine vision that includes image and video
recognition, along with recommender systems and natural language processing (NLP). A neural
network is a system of hardware or software patterned after the operation of neurons in the
human brain.

Traditional neural networks are not ideal for image processing and must be fed images, in
reduced-resolution pieces. CNN have their neurons arranged more like those of the frontal lobe,
the area responsible for processing visual stimuli in humans and other animals. The layer of
neurons is arranged in such a way as to cover the entire visual field avoiding the piece meal
image processing problem of traditional neural networks.

The layers of a CNN consist of an input layer, an output layer and a hidden layer that includes
multiple convolutional layers, pooling layers, fully connected layers and normalization layers.
The removal of limitations and increase in efficiency for image processing results in a system
that is far more effective, simpler to trans limited for image processing and natural language
processing.

2.3 OVERVIEW ON CONVOLUTIONAL NEURAL NETWORK

Convolutional neural networks are a category of Neural networks that have proven very
effective in areas such as image recognition and classification. ConvNets have been successful
in identifying faces, objects, and traffic signs apart from powering vision in robots and self-
driving cars. In this project, CNN needs to construct three conventional layers and three max-
pooling layers, and a fully connected layer in the convolutional network. Finally, a soft-max
layer is used to aggregate and get the results.

M.SC SOFTWARE SYSTEMS 6

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

❖ Convolutional layer

The convolutional layer is the core building block of a CNN. The layer’s parameters consist of
a set of learnable filters, which have a small receptive field but extend through the full depth
of the input volume. During the forward pass, each filter is convolved across the width and
input volume., computing the dot product between the entries of the filter and the input and
producing a 2-dimensional activation map of that filter. As a result, the network learns filters
that activate when some specific type of feature at some spatial position in the input.

❖ Pooling Layer

Another important concept of CNN is pooling, which is a form of nonlinear down sampling.
There are several non-linear functions to implement pooling among which max pooling is the
most common. It partitions the input image into a set of non-overlapping rectangles and for
each such subregion, outputs the maximum. The intuition is that the exact location of a feature
is less important than the rough location relative to other features. The pooling layer serves to
progressively reduce the spatial size of the representation, to reduce the number of parameters
and amount of computation in the network and hence to control overfitting. It is common to
periodically insert a pooling layer between successive convolutional layers in CNN.

❖ Rectified Linear Unit Layer (ReLU layer)

ReLU layer applies the non-saturating activation function f(x) = max (0, x). It increases the
nonlinear properties of the decision function and of the overall network without affecting the
receptive fields of the convolutional layer. ReLU refers to Rectifier Unit, the most commonly
deployed activation function for the outputs of the CNN neurons. This activation function was
first introduced to a dynamic network by Hahn loser. It has been demonstrated for the first time
in 2011 to enable better training of deeper networks.

❖ Fully Connected Layers

Finally, after several convolutional and max pooling layers, the high-level reasoning in the
neural network is done via fully connected layers. Neurons in a fully connected layer have
connections to all activations in the previous layer, as seen in regular neural networks.

M.SC SOFTWARE SYSTEMS 7

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

❖ Image Recognition

CNN are often used in image recognition system. The ImageNet Large Scale Visual
Recognition Challenge is a benchmark in object classification and detection, with millions of
images and hundreds of object classes. In 2015 as many layered CNN demonstrated the ability
to spot faces from a wide range of angles, including upside down, even when partially occluded,
with competitive performance. The network was trained on a database of 200000 images that
included faces at various angles and orientations and a further 20 million images without faces.
They used batches of 128 images over 50,000 iterations.

M.SC SOFTWARE SYSTEMS 8

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 3

SYSTEM SPECIFICATION

3.1 HARDWARE SPECIFICATION

RAM : 3GB DDR4

PROCESSOR : Intel(R) Core (TM) i5-8265U
HARD DISK : 25gb

3.2 SOFTWARE SPECIFICATION

OPERATING SYSTEM : WINDOWS 11

PROGRAMMING LANGUAGE : JavaScript, Svelte, Python
FRAMEWORKS & DATASETS : D3.js, Tiny VGG model, TensorFlow.

Python

Python is open-source and free software that is easy to learn. Python supports Object oriented
language. GUI can be created using TK in python. Python is a high-level language that can be
integrated with other programming languages like C/C++. Python has a rich set of libraries so
the user does not have to write code for every single thing. Python is a computer language that
supports multiple paradigms. In addition to object-oriented programming and structured
programming, many of its features support functional programming and aspect-oriented
programming. Extensions support a number of paradigms, including design by contract and
logic programming. Python manages memory with dynamic typing, reference counting, and a
cycle detecting garbage collector. It employs late binding (dynamic name resolution) to bind
method and variable names during programme execution.

M.SC SOFTWARE SYSTEMS 9

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

TensorFlow

TensorFlow is an open-source library that allows easier calculations in machine learning.

TensorFlow is easy to debug and can be executed in various applications platforms such as
android, ios, and cloud. TensorFlow allows users to test the samples with enhanced
performance, robustness, and flexibility. It can be used for a variety of applications, but it
focuses on deep neural network training and inference. The Google Brain team created
TensorFlow for internal Google use in research and production. In 2015, the first version was
released under the Apache License 2.0. In September 2019, Google launched TensorFlow 2.0,
an improved version of TensorFlow. TensorFlow features include Auto Differentiation, Eager
execution, Distribute, Losses, Metrics, TF.nn, Optimizers.

JavaScript

JavaScript is an open-source and widely-used programming language that is renowned for its
versatility and ease of learning. As a client-side scripting language, JavaScript is primarily used
for creating dynamic and interactive web pages. It supports object-oriented, imperative, and
functional programming paradigms, offering developers the flexibility to choose the approach
that best suits their needs. JavaScript seamlessly integrates with HTML and CSS, making it an
integral part of front-end web development.

In addition to its role in web development, JavaScript is also employed on the server side
(Node.js) for building scalable and efficient server applications. It has a rich ecosystem of
libraries and frameworks, such as React, Angular, and Vue.js, that facilitate the development
of robust and feature-rich web applications. JavaScript's support for asynchronous
programming, through features like Promises and async/await, enhances the efficiency of
handling concurrent operations.

M.SC SOFTWARE SYSTEMS 10

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Svelte

Svelte, on the other hand, is a modern and innovative front-end framework designed to
streamline the development of web applications. It shifts the burden of heavy lifting from the
client-side to the build process, resulting in smaller and faster applications. Svelte embraces a
component-based architecture, enabling developers to create reusable and modular UI
components effortlessly. It offers a refreshing approach by compiling components into highly
optimized JavaScript at build time, resulting in a more efficient runtime performance.

Svelte's declarative syntax and reactive programming model make it easy for developers to
express complex UI behaviours with minimal code. It eliminates the need for a runtime
framework in the final application, reducing the overall bundle size and enhancing the user
experience. With its focus on simplicity and performance, Svelte has gained popularity among
developers seeking a modern and efficient alternative for building web applications.

M.SC SOFTWARE SYSTEMS 11

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER – 4
SYSTEM STUDY

4.1 Existing System with Limitations

In the context of CNN visualization tools, current solutions exhibit certain limitations that
impact a comprehensive understanding of CNN architectures. Commonly, existing CNN
visualizers lack real-time interactivity, impeding users from dynamically exploring and
manipulating network layers during visualization.

• For instance, Tensor Board demonstrates limitations in providing extensive real-time

features. Similarly, tools like Netron present comprehensive visualizations that may
overwhelm users, making it challenging to focus on specific aspects of CNN
structures.
• Furthermore, some visualizers face challenges in providing effective layer abstraction,
complicating the interpretation of high-level functionality and relationships between
different network layers. Notably, tools like CNNV fall short in delivering clear layer
abstraction. Additionally, several CNN visualizers are specifically tailored for certain
frameworks or models, restricting their versatility. Lucid, designed primarily for
TensorFlow, is an example that limits broader adoption across various architectures.

❖ Limited real-time interactivity

❖ Overwhelming visualization complexity

❖ Ineffective layer abstraction

❖ Framework-specific limitations

M.SC SOFTWARE SYSTEMS 12

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

4.2 Proposed System with advantages

In response to these limitations, our "CNN Visualizer" project is introduced with the aim of
addressing these challenges and offering key advantages to enhance the exploration and
understanding of CNN architectures. The proposed system prioritizes real-time interaction,
allowing users to dynamically manipulate and explore CNN layers, fostering a deeper
understanding of network behaviours. It also incorporates intuitive layer abstraction to
simplify the comprehension of essential elements and relationships within the CNN
architecture. Moreover, the visualizer adapts its complexity based on user preferences,
ensuring a balance between detailed exploration and simplicity. Designed to be framework-
agnostic, the visualizer supports various CNN architectures and models, ensuring
compatibility across different frameworks and promoting widespread adoption.

❖ Real-time interactive exploration

❖ Intuitive layer abstraction

❖ Adaptive visualization complexity

❖ Framework-agnostic versatility

M.SC SOFTWARE SYSTEMS 13

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 5
DATASET

5.1 Dataset Description

On investigating Datasets available on the internet, the best fit data set is Tiny ImageNet. It is
trained on the Tiny ImageNet dataset. The training dataset consists of 200 image classes and
contains 100,000 64×64 RGB images, while the validation dataset contains 10,000 images
across the 200 image classes. The model is trained using TensorFlow [4] on 10 handpicked,
everyday classes: lifeboat, ladybug, bell pepper, pizza, school bus, koala, espresso, red panda,
orange, and sport car. During the training process, the batch size and learning rate are fine-
tuned using a 5-fold-cross-validation scheme. This simple model achieves a 70.8% top-1
accuracy on the validation dataset.

Name of Dataset Tiny ImageNet dataset

Link of the Dataset Click to access dataset
No of Records 10
Size of the record 64×64 RGB images
Software used to store and manipulate Python

Table 5.1 Various details of dataset used

M.SC SOFTWARE SYSTEMS 14

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 6
SYSTEM DESIGN

The process of researching a procedure or business in order to establish its goals, purposes, and
construct systems and procedures that will achieve them in an effective manner, according to
the definition of system design. Another perspective sees system analysis as a problem-solving
technique that disassembles a system into its component elements in order to examine how
well those parts operate together to achieve their goals.

6.1 USE CASE DIAGRAM

A use case diagram is a visual representation of a system's dynamic behaviour. It incorporates

use cases, actors, and their interactions to encapsulate the system's functionality. It represents
the activities, services, and functionalities that an application's system/subsystem requires. It
represents a system's high-level functionality as well as how the user interacts with it. The Use
case diagram of CNN Visualizer is given in appendix A.

Notations

Actor:

Actors are the people or things who interact with a computer system. Although actors are most
often employed to represent system users, they can also represent anything that needs to
communicate information with the system.

M.SC SOFTWARE SYSTEMS 15

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Association:

An actor and a use case can be linked to show that the actor is involved in that use case. As a
result, an association denotes a series of actions taken by the actor and the use case to
accomplish the use case.

Use Case:

High-level functionalities and how the user will interact with the system are represented by use
cases. A use case describes a specific feature of a system, component, package, or class. It's
represented by an oval shape with the name of a use case written inside.

6.2 DATA FLOW DIAGRAM

System flow diagrams represent the flow of data within a system graphically. It shows several
steps that identify where input is coming from and where output is going. By using the diagram,
we can determine the event decisions of the system and how data flows into the system.
Therefore, the system flow diagram is essentially a visual representation of data flow that
excludes minor parts and highlights the significant parts of the system in a sequential manner.
The System Flow diagram of CNN Visualizer is given in appendix B.

M.SC SOFTWARE SYSTEMS 16

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Rectangle:

It is the workhorse of the flowchart diagram, representing any step in the process you're
describing. Rectangles can be used to capture process phases such as fundamental chores or
actions.

Diamond:

The diamond represents the need to make a decision in order to go forward. This could be a
simple yes-or-no decision or a more involved decision with several options.

Arrows:

The viewer is guided along their flowcharting journey by the arrow. While there are numerous
sorts of arrow tips to select from. This not only keeps your diagram tidy, but it also helps you
to highlight specific steps in your process.

M.SC SOFTWARE SYSTEMS 17

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 7
SYSTEM TESTING

Errors can be introduced into a software development project at any point during the process.
Testing is extremely important for software quality and reliability. During testing, the
programme under test is run with a set of test cases, and the program's output for the test cases
is analysed to see if the programme is working as expected. The primary goal of testing is to
find errors in the system. The user must provide accurate data to the system during the
uncovering process. As a result, the user should be more cautious when entering data. It is
critical to provide accurate inputs for effective testing. Testing is the process of running a
software in order to identify a mistake. Testing is an important part of software quality
assurance since it provides the final assessment of the specification, design, and coding. The
phase of system testing is crucial. Testing is an unusual feature of software. Thus, before the
proposed system is ready for user acceptance testing, it must undergo a number of tests. A
excellent test case is one that has a high chance of being identified as an error. A successful test
is one that uncovers a previously unknown flaw.

7.1 UNIT TESTING

In Unit Testing, we have to test the programs making up the system. For this reason, Unit
Testing is sometimes called program testing. The software units in a system are the modules
and routines that are assembled and integrated to perform a specific function. Unit Testing
focuses first on modules, independently of one another, to locate errors. This enables to
detection of errors in coding and logic that are contained within the module alone.

The testing was carried out during the programming stage itself. In the testing step, each
module is found to be working satisfactorily as regards to being expected output from the
module.

The number of input/output operations, global and local variables, scope and validity, call to
other modules, file attributes and database exceptions and expressions are also tested in each
and every module.

M.SC SOFTWARE SYSTEMS 18

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Fig 7.1 Testing the input and output dataset variables

Data Preparation Functions:

create_class_dict() and create_val_class_dict(): These functions involve reading and

processing data from files. Unit tests can be written to check if these functions correctly
generate dictionaries based on input data.

split_val_data(): This function involves copying validation images to different directories. Unit
tests is written to ensure that the splitting logic works as expected.

Model Creation and Training:

The TinyVGG class: Unit tests is be written to ensure that the model is constructed correctly
with the expected layers and configurations.

train_step(), vali_step(), and test_step(): These functions involve training and evaluating the
model. Unit tests is written to check if these functions perform the expected operations and
update metrics correctly.

M.SC SOFTWARE SYSTEMS 19

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

7.2 VERIFICATION TESTING

Verification is the process of evaluating work products of a development phase to determine

whether they meet the specified requirements. Verification ensures that the product is built
according to the requirements and design specifications. V-Model is the greatest tool for
demonstrating verification testing. Test plans, requirement specifications, design, code, and test
cases are among the artefacts that are examined.

Fig 7.2 Evaluation of save and load process

Training and Evaluation Process:

The training loop and associated functions (train_step(), vali_step(), and test_step()):

The training and evaluation process is fundamental to verification testing. It ensures that the
model is being trained according to the specified requirements. Verification would involve
checking if the loss, accuracy, and early stopping mechanisms align with the expected
behaviour.

Model Saving and Loading:

The lines related to saving and loading the model: tiny_vgg.save('trained_tiny_vgg.h5')

Model saving and loading are important aspects of verification testing. It ensures that the
trained model can be saved and loaded correctly, demonstrating that the model's state is
preserved and can be reused as specified in the requirements.

M.SC SOFTWARE SYSTEMS 20

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

7.3 PERFORMANCE TESTING

The amount of executing time spent in various paths of the programme unit, programme
throughput, reaction time, and utilisation by the programme unit are all determined through
performance Testing. The greatest volume of existing data that the system can process with
an effective throughput and efficient use of system resources is the basis for Performance
Testing. This type of software system meets the needs of the users, adheres to the
requirements and design specifications, and is error-free. The final step should be a software
audit, which verifies that the entire software project complies with production management
requirements. This ensures that all requirement documentation is complete, in the correct
format, and of acceptable quality.

Fig 7.3 Determining the performance based on epoch time

• The start_time is recorded before the training loop starts.

• For each epoch, the start and end times are recorded to calculate the time taken for that
epoch and the total training time is also calculated and displayed.
• By introducing these time measurements, you can assess the performance of your training
process and identify any areas that may need optimization

M.SC SOFTWARE SYSTEMS 21

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

7.4 ACCEPTANCE TESTING

Acceptance testing involves planning and executing functional tests, performance tests, and
stress tests in order to demonstrate that the implemented system satisfies its requirements.
Functional test cases involve excising the code with normal input values for which expected
results are known. The final process should be a software audit where the complete software is
checked to ensure that it meets production management requirements. This ensures that all
required documentation have been produced, is in correct format and is of acceptable quality.

M.SC SOFTWARE SYSTEMS 22

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 8
SYSTEM IMPLEMENTATION AND MAINTENANCE

8.1 IMPLEMENTATION PROCEDURES

Implementation is the stage of the project where the theoretical design is turned into a working
system. At this stage, the main workload, the greatest upheaval, and the major impact on the
existing system shift to the user department. If the implementation is not carefully planned a
controlled it can cause chaos and confusion.

Data Processing and Integration:

Implement data loading and preprocessing methods to integrate the Tiny ImageNet dataset into
the training pipeline.
Verify that the data processing methods align with the designed specifications.

Performance Optimization:
Implement performance optimizations, such as caching and prefetching, to enhance the
efficiency of data processing during training.

Training Loop Execution:

Implement the training loop, including forward and backward passes, and incorporate any
necessary metrics for monitoring.

Testing and Evaluation:

Integrate testing procedures within the implementation phase to ensure that the system
functions as expected.

The implementation stage involves the following tasks.

● Careful planning
● Investigating of system and constraints
● Design of methods to achieve changeover
● Training of the staff in the changeover phase
● Evaluation of the changeover method

M.SC SOFTWARE SYSTEMS 23

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

8.2 MAINTAINANCE PROCEDURES

The maintenance phase of the software cycle is the time in which a Software product performs
useful work. After a system is successfully implemented, it should be maintained in a proper
manner. System maintenance is an important aspect is aspect in the software development life
cycle.

Bug Fixes and Updates:

Address any issues or bugs identified during testing or after the initial implementation.
Implement updates or modifications to the system as needed.

Performance Monitoring:
Continuously monitor the performance of the trained model, identifying potential areas for
improvement.
Implement optimizations based on the monitoring results.

Data Updates:
If the Tiny ImageNet dataset is periodically updated, implement procedures to integrate new
data into the system.

Documentation Updates:
Keep documentation, including code comments and user guides, up-to-date with any changes
in the system.

The fourth maintenance activity occurs when software is changed to improve future
maintainability or reliability or to provide a better basis for future enhancements. Often called
preventive maintenance, this activity is characterized by reverse engineering.

M.SC SOFTWARE SYSTEMS 24

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 9

CONCLUSION

In conclusion, the CNN Explainer project has been a journey of exploration and
discovery into the fascinating world of Convolutional Neural Networks. Through this project,
we aimed to create an accessible and informative platform that demystifies the workings of
CNNs and provides users with a deeper understanding of this powerful machine learning
technique.

Throughout the development process, I have delved into the underlying principles of
CNNs, from convolutional layers and pooling operations to activation functions and fully
connected layers. I have broken down complex concepts into digestible explanations,
supplemented with visual aids, interactive examples, and real-world applications to enhance
comprehension.

The CNN Explainer project serves as a valuable resource for students, researchers, and
enthusiasts alike, offering a comprehensive overview of CNNs and their applications across
various domains, including computer vision, natural language processing, and healthcare.

Looking ahead, there are several avenues for future enhancement and expansion of the
CNN Explainer project. I’ve envision incorporating additional features, such as advanced
visualization tools, and case studies, to further enrich the learning experience. Furthermore,
ongoing updates and improvements will be made to keep pace with advancements in CNN
research and technology.

M.SC SOFTWARE SYSTEMS 25

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

CHAPTER 10
SCOPE FOR FUTURE ENHANCEMENT

Exploration of Complex Architectures

Instead of using simpler models, we can try using more complicated ones like ResNet,
DenseNet, or EfficientNet. These models have many layers and are better at understanding
complex patterns in images.

Advanced Data Augmentation Techniques

We can make our training data more varied by changing the images in different ways.
For example, we can rotate, move, stretch, or shrink them. This helps the model learn to
recognize objects in different positions and sizes.

Implement advanced data augmentation techniques such as rotation, translation,

shearing, and scaling to generate more diverse training samples and enhance the model's
robustness.

Multi-Modal Learning

Instead of just using pictures, we can also include other types of information, like text
or sound. This can help the model understand the images better by giving it more context.
Explore multi-modal learning approaches that incorporate additional modalities such as text or
audio data to enhance the model's understanding and performance in multi-modal applications.

M.SC SOFTWARE SYSTEMS 26

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Bibliography
[1] Tiny ImageNet Visual Recognition Challenge. https: //tiny-imagenet.herokuapp.com,
2015.

[2] Backpropagation Algorithm. https:// developers-dot-devsite-v2-prod.appspot.com/

machine-learning/crash-course/backprop-scroll, 2018.

[3] TensorSpace.js: Neural Network 3D Visualization Framework. https: //tensorspace.org,

2018.

[4] M. Abadi, P. Barham, J. Chen, Z. Chen, A. Davis, J. Dean, M. Devin, S. Ghemawat, G.

Irving, M. Isard, M. Kudlur, J. Levenberg, R. Monga, S. Moore, D. G. Murray, B. Steiner, P.
Tucker, V. Vasudevan, P. Warden, M. Wicke, Y. Yu, and X. Zheng. TensorFlow: A System for
Large-Scale Machine Learning. In 12th USENIX Symposium on Operating Systems Design
and Implementation (OSDI), pp. 265–283. Savannah, GA, USA, Nov. 2016.

[5] A. Bilal, A. Jourabloo, M. Ye, X. Liu, and L. Ren. Do Convolutional Neural Networks
Learn Class Hierarchy? IEEE Transactions on Visualization and Computer Graphics,
24(1):152–162, Jan. 2018.

[6] M. Bostock, V. Ogievetsky, and J. Heer. D3 Data-Driven Documents. IEEE Transactions

on Visualization and Computer Graphics, 17(12):2301–2309, Dec. 2011.

[7] M. H. Brown. Algorithm Animation. MIT Press, Cambridge, MA, USA, 1988.

[8] M. D. Byrne, R. Catrambone, and J. T. Stasko. Evaluating animations as student aids in

learning computer algorithms. Computers & Education, 33(4):253–278, Dec. 1999.

M.SC SOFTWARE SYSTEMS 27

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Appendix

A. Use case Diagram

M.SC SOFTWARE SYSTEMS 28

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

B. Data Flow Diagram

M.SC SOFTWARE SYSTEMS 29

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

C. Dataset Images

Koala Train Dataset Red Panda Train Dataset

Life boat Train Dataset School Bus Train Dataset

Sport Car Train Dataset Bell Pepper Train Dataset

M.SC SOFTWARE SYSTEMS 30

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Orange Train Dataset Pizza Train Dataset

Espresso Train Dataset Lady Bug Train Dataset

M.SC SOFTWARE SYSTEMS 31

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

D. Sample Screenshots

Class label prediction for selected image

RGB Channel to “conv_1_1” kernel representation

M.SC SOFTWARE SYSTEMS 32

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

ReLU as an activation function for conv layer (62x62)

ReLU to maxpooling layer (60x60) converted into (30x30)

M.SC SOFTWARE SYSTEMS 33

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Object Identified 13x13 pixel final image for prediction

13x13 images are flatten and merged in SoftMax layer

M.SC SOFTWARE SYSTEMS 34

CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

Prediction of class after final score calculation

M.SC SOFTWARE SYSTEMS 35

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

E. Sample Code

Draw-utl.js

import { overviewConfig } from '../config.js';

// Configs

const nodeLength = overviewConfig.nodeLength;

/**

* Compute the [minimum, maximum] of a 1D or 2D array.

* @param {[number]} array

*/

export const getExtent = (array) => {

let min = Infinity;

let max = -Infinity;

// Scalar

if (array.length === undefined) {

return [array, array];

// 1D array

if (array[0].length === undefined) {

for (let i = 0; i < array[0].length; i++) {

if (array[i] < min) {

min = array[i];

M.SC SOFTWARE SYSTEMS 36

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

} else if (array[i] > max) {

max = array[i];

return [min, max];

// 2D array

for (let i = 0; i < array.length; i++) {

for (let j = 0; j < array[0].length; j++) {

if (array[i][j] < min) {

min = array[i][j];

} else if (array[i][j] > max) {

max = array[i][j];

return [min, max];

/**

* Convert the svg element center coord to document absolute value

* // Inspired by https://github.com/caged/d3-tip/blob/master/index.js#L286

* @param {elem} elem

M.SC SOFTWARE SYSTEMS 37

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

*/

export const getMidCoords = (svg, elem) => {

if (svg !== undefined) {

let targetel = elem;

while (targetel.getScreenCTM == null && targetel.parentNode != null) {

targetel = targetel.parentNode;

// Get the absolute coordinate of the E point of element bbox

let point = svg.node().ownerSVGElement.createSVGPoint();

let matrix = targetel.getScreenCTM();

let tbbox = targetel.getBBox();

// let width = tbbox.width;

let height = tbbox.height;

point.x += 0;

point.y -= height / 2;

let bbox = point.matrixTransform(matrix);

return {

top: bbox.y,

left: bbox.x

};

M.SC SOFTWARE SYSTEMS 38

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

/**

* Return the output knot (right boundary center)

* @param {object} point {x: x, y:y}

*/

export const getOutputKnot = (point) => {

return {

x: point.x + nodeLength,

y: point.y + nodeLength / 2

};

/**

* Return the output knot (left boundary center)

* @param {object} point {x: x, y:y}

*/

export const getInputKnot = (point) => {

return {

x: point.x,

y: point.y + nodeLength / 2

/**

* Compute edge data

* @param {[[[number, number]]]} nodeCoordinate Constructed neuron svg locations

M.SC SOFTWARE SYSTEMS 39

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

* @param {[object]} cnn Constructed CNN model

*/

export const getLinkData = (nodeCoordinate, cnn) => {

let linkData = [];

// Create links backward (starting for the first conv layer)

for (let l = 1; l < cnn.length; l++) {

for (let n = 0; n < cnn[l].length; n++) {

let isOutput = cnn[l][n].layerName === 'output';

let curTarget = getInputKnot(nodeCoordinate[l][n]);

for (let p = 0; p < cnn[l][n].inputLinks.length; p++) {

// Specially handle output layer (since we are ignoring the flatten)

let inputNodeIndex = cnn[l][n].inputLinks[p].source.index;

if (isOutput) {

let flattenDimension = cnn[l-1][0].output.length *

cnn[l-1][0].output.length;

if (inputNodeIndex % flattenDimension !== 0){

continue;

inputNodeIndex = Math.floor(inputNodeIndex / flattenDimension);

let curSource = getOutputKnot(nodeCoordinate[l-1][inputNodeIndex]);

let curWeight = cnn[l][n].inputLinks[p].weight;

linkData.push({

source: curSource,

M.SC SOFTWARE SYSTEMS 40

 CONVOLUTIONAL NEURAL NETWORK VISUALIZER SKASC-2024

target: curTarget,

weight: curWeight,

targetLayerIndex: l,

targetNodeIndex: n,

sourceNodeIndex: inputNodeIndex

});

return linkData;

/**

* Color scale wrapper (support artificially lighter color!)

* @param {function} colorScale D3 color scale function

* @param {number} range Color range (max - min)

* @param {number} value Color value

* @param {number} gap Tail of the color scale to skip

*/

export const gappedColorScale = (colorScale, range, value, gap) => {

if (gap === undefined) { gap = 0; }

let normalizedValue = (value + range / 2) / range;

return colorScale(normalizedValue * (1 - 2 * gap) + gap);

M.SC SOFTWARE SYSTEMS 41