EVEN SEMESTER-2022

COMPRESSION-DECOMPRESSION WEB
TOOL USING HUFFMAN CODING
MTE PROJECT SYNOPSIS
Algorithm Design and Analysis (ADA)
(CO-208)
BACHELOR OF TECHNOLOGY
IN
COMPUTER ENGINEERING

Submitted by: -

Shaurya Wadehra (2K20/CO/424)

Shivam Garg (2K20/CO/429)

Under the supervision

of
Ms. Shikha Mam

DEPARTMENT OF COMPUTER ENGINEERING

DELHI TECHNOLOGICAL UNIVERSITY
(Formerly Delhi College of Engineering)
Bawana road, Delhi-110042
 DEPARTMENT OF COMPUTER ENGINEERING
DELHI TECHNOLOGICAL UNIVERSITY
(Formerly Delhi College of Engineering)
Bawana road, Delhi-110042

STUDENT’S DECLARATION

We, Shaurya Wadehra (2K20/CO/424) & Shivam Garg (2K20/CO/429),

students of B. Tech (Computer Engineering), hereby declare that the innovative
project titled “compression-decompression tool using Huffman coding”,
which is submitted by us to Ms. Shikha Mam, Department of Computer
Science and Engineering, Delhi Technological University for the subject,
Algorithm design and Analysis is complete for the requirement of MTE
Innovative Project Evaluation for the even semester 2021.

Shaurya Wadehra Shivam Garg

(2K20/CO/424) (2K20/CO/429)
 DEPARTMENT OF COMPUTER ENGINEERING
DELHI TECHNOLOGICAL UNIVERSITY
(Formerly Delhi College of Engineering)
Bawana road, Delhi-110042

ACKNOWLEDGEMENT

“Projects not only help a student to learn but to grow as well”. We would like to
express my thanks and gratitude to the faculty at Delhi Technological
University for providing us with the opportunity to work on projects and in the
process learn new technologies and learn practical use of our skills. We express
my sincere thanks to our honourable Ms. Shikha Mam, subject Algorithm
design and Analysis, Delhi Technological University for his constant guidance
and support.

We would like to express my thanks to everyone who guided us through

this project and help us complete it successfully.
 DEPARTMENT OF COMPUTER ENGINEERING
DELHI TECHNOLOGICAL UNIVERSITY
(Formerly Delhi College of Engineering)
Bawana road, Delhi-110042

CONTENT

1) Introduction
2) Need of the project
3) Technology Used
i. ReactJs
ii. TailwindCSS
4) Concepts and Data structures used
i. Huffman Coding
ii. Min Heap and JavaScript Classes
5) Flow of the code
i. Home page and selection of type of file – image or text
ii. Selecting the option either to compress or decompress
iii. Downloading page along with the compression ratio
iv. Decompressing the file back into original form
5) Future Scope
6) GitHub Link
7) References
 Introduction
Compression can be defined as reducing the size of the file. Compression
software works by replacing these repeating patterns with smaller pieces of
data, or code, that take up less room. Whereas Decompression is the process of
restoring compressed data to its original form. Data decompression is required
in almost all cases of compressed data, including lossy and lossless
compression. Decompression is considered important, as compressed data needs
to be restored back to standard state for usage.

Our web-based tool uses Huffman coding which is lossless compression

algorithm. Thus, making our web tool very much efficient.

 Need of the Project

We sometimes face problems related to memory issues while saving or
transferring any image or a file. Hence, there is a need to compress it so that it is
reduced in size and can be transferred and processed easily. Data compression
and decompression provide users to store data in less space and also easier for
the user to transfer over the network. The Compression reduces the file of the
size so that we can share it easily over any network even at a slow speed.

This project aims at compressing and decompressing images and files stored in
our computer system at a particular destination location. We will be using the
Huffman coding for compressing the data and a custom algorithm for
decompressing the same data.

 Technology Used
1) ReactJs
React (also known as React.js or ReactJS) is a free and open-source front-
end JavaScript library for building user interfaces based on UI components. It is
maintained by Meta (formerly Facebook) and a community of individual
developers and companies. React can be used as a base in the development
of single-page or mobile applications. However, ReactJs is only concerned with
state management and rendering that state to the DOM, so creating React
applications usually requires the use of additional libraries for routing, as well
as certain client-side functionality.

2) TailwindCSS
Tailwind CSS is basically a utility-first CSS framework for rapidly building
custom user interfaces. It is a highly customizable, low-level CSS framework
that gives you all of the building blocks you need to build bespoke designs
without any annoying opinionated styles you have to fight to override.

The beauty of this thing called tailwind is it doesn’t impose design specification
or how your site should look like, you simply bring tiny components together to
construct a user interface that is unique. What Tailwind simply does is take a
‘raw’ CSS file, processes this CSS file over a configuration file, and produces
an output.

 Concepts and Data Structures used

The main concept involved behind the compression-decompression is Huffman
coding.

1) Huffman Coding
Huffman coding is a lossless data compression algorithm. The idea is to assign
variable-length codes to input characters, lengths of the assigned codes are
based on the frequencies of corresponding characters. The most frequent
character gets the smallest code and the least frequent character gets the largest
code.

For decompressing the Huffman code, through which we convert the encoded
data into the Huffman tree and from the corresponding values, we convert back
into the original data.

2) Algorithm for Huffman coding using min Heap

A min-heap is a binary tree such as that the data contained in each node is less
than (or equal to) the data in that node's children. It is complete binary tree.
We have used the same for implementing the file compression tool. The
algorithm builds the tree T analogous to the optimal code in a bottom-up
manner. It starts with a set of |C| leaves (C is the number of characters) and
performs |C| - 1 'merging' operations to create the final tree. In the Huffman
algorithm 'n' denotes the quantity of a set of characters, z indicates the parent
node, and x & y are the left & right child of z respectively.

Following is the algorithm using which we have compressed the file: -

Huffman (C)
1. n=|C|
2. Q ← C
3. for i=1 to n-1
4. do
5. z= allocate-Node ()
6. x= left[z]=Extract-Min(Q)
7. y= right[z] =Extract-Min(Q)
8. f [z]=f[x]+f[y]
9. Insert (Q, z)
10. return Extract-Min (Q)

Following is the algorithm using which we have decompressed the file: -

To decode the encoded data, we require the Huffman tree. We iterate through the
binary encoded data.

To find character corresponding to current bits, we use following simple steps:

1. We start from root and do following until a leaf is found.
2. If current bit is 0, we move to left node of the tree.
3. If the bit is 1, we move to right node of the tree.
4. If during traversal, we encounter a leaf node, we print character of that
particular leaf node and then again continue the iteration of the encoded data
starting from step 1.

3) JavaScript classes
A JavaScript class is a blueprint for creating objects. A class encapsulates data
and functions that manipulate data. Unlike other programming languages such
as Java and C #, JavaScript classes are syntactic sugar over the prototypal
inheritance. In other words, ES6 classes are just special functions.
In our project, we have used these classes for creating the min Heap. Also, we
created a custom JavaScript class named Codec, for compressing and
decompressing the text.

For the case of images, we are first converting the uploaded image into its
Base64 string and then, we are compressing the same and now it can be easily
shared in this format.

 Flow of code
The flow of code is as follows: -

1) Home Page
As soon as start the web tool, we are open to the home page with a navbar
containing the options for the type of file which we want to compress or
decompress. User can select ‘compress File’ if he wants to compress text file
else ‘compress image’ if he wishes to compress an image of type
.png/.jpg/.jpeg.

We have named our web tool as ‘wecompress’. After selecting the format of
the file, user have to upload or drop the file which he wishes to compress or
decompress. After that, user has to click next.

2) Alert for wrong file format

If the user uploaded a file which is not as per the format described, then an alert
will be generated and user will be asked to upload the file again.
3) Selection of either compression or decompression
As soon as the user uploads a valid file and clicks next, he will be redirected to
a page containing options of what to do – compression or decompression.

If a user tried to decompress a file which has not been compressed before, then it
will generate an alert and redirect to home page.

3) Compression of file
If the user presses compress button, then the file will be compressed using
Huffman coding and user will directed to a 3rd page where file will be
automatically downloaded. Also, the screen will be showing the compression
ratio.
Here, we have uploaded a file of alibaba.txt having a size of 10.0 mb and after
the compression, the size reduces to 2.5 mb.

The above two screenshots show the compression in the file size.

3) Decompression of file
The compressed file is not in readable form and can be decompressed back into
original form using our same tool.
After decompression, if we open the properties of decompressed file, we get the
original form back.

We have implemented the image compression as well. Here we are converting

the image into base64 string and compress the same into txt file and then large
number images can be sent into reduced form which be later decompressed to
get original image.

 Future Scope
Here, we have considered Huffman coding in which after compression files are
not readable. To make them readable, we have to decompress them. We can
extend our project in which we can compress the files keeping them readable on
the same hand. We can also connect our project to AI- powered OCR so that we
can compress the PDF also. We can also add features like audio and video
compression to our project.

 GitHub Link
https://github.com/Shivam311201/Huffman-File-Compressor

 References
[1] Rhen Anjerome Bedruz and Ana Riza F. Quiros, “Comparison of Huffman
Algorithm and Lempel-Ziv Algorithm for Audio, Image and Text
Compression”, IEEE International Conference Humanoid, Nanotechnology,
Information Technology Communication and Control, Environment and
Management (HNICEM). Philippines, 9-12 December, 2015.
[2] Haoqi Ren, “A data Compression Technique based on Reversed Leading
Bits Coding and Huffman Coding”, International Conference on
Communication and Networking, China, 2015.
[3] K. Ashok Babu and V. Satish Kumar, “Implementation of Data
Compression Using Huffman Coding”, International Conference on Methods
and Models in Computer Science, India, 2010