app added in index.md

Author: jugeshraghav

File Zipper/README.md

@@ -0,0 +1,38 @@
+<h1>File Zipper</h1>
+
+<p>An Awesome encoder and decoder using huffman encoding techniques.</p>
+
+### Use of the Project:
+
+<p>It can encode and decode the text files only and downloads automatically . </p>
+
+<h3>Used Technologies</h3>
+<ul>
+  <li>HTML5</li>
+  <li>CSS3</li>
+  <li>JavaScript</li>
+  <li>php</li>
+
+</ul>
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/soma2000-lang/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file by copying the file path and pasting it in your browser
+- Upload The txt file
+-And there you have your Encoded or decoded file
+
+<h3> ScreenShot </h3> 
+<img width="960" alt="File_Zipper" src="https://github.com/soma2000-lang/File-Zipper/blob/main/WhatsApp%20Image%202021-07-20%20at%2022.04.38%20(1).jpeg">
+
+
+<br>
+

File Zipper/WhatsApp Image 2021-07-20 at 22.04.38 (1).jpeg

@@ -0,0 +1,75 @@
+/**
+ * Created by aarnavjindal on 30/03/20.
+ */
+
+export { BinaryHeap }
+
+class BinaryHeap {
+
+    constructor() {
+        this.heap = [];
+    }
+
+    insert(value) {
+        this.heap.push(value);
+        this.bubbleUp();
+    }
+
+    size() {
+        return this.heap.length;
+    }
+
+    empty(){
+        return ( this.size()===0 );
+    }
+
+    //using iterative approach
+    bubbleUp() {
+        let index = this.size() - 1;
+
+        while (index > 0) {
+            let element = this.heap[index],
+                parentIndex = Math.floor((index - 1) / 2),
+                parent = this.heap[parentIndex];
+
+            if (parent[0] >= element[0]) break;
+            this.heap[index] = parent;
+            this.heap[parentIndex] = element;
+            index = parentIndex
+        }
+    }
+
+    extractMax() {
+        const max = this.heap[0];
+        const tmp = this.heap.pop();
+        if(!this.empty()) {
+            this.heap[0] = tmp;
+            this.sinkDown(0);
+        }
+        return max;
+    }
+
+    sinkDown(index) {
+
+        let left = 2 * index + 1,
+            right = 2 * index + 2,
+            largest = index;
+        const length = this.size();
+
+        // console.log(this.heap[left], left, length, this.heap[right], right, length, this.heap[largest]);
+
+        if (left < length && this.heap[left][0] > this.heap[largest][0]) {
+            largest = left
+        }
+        if (right < length && this.heap[right][0] > this.heap[largest][0]) {
+            largest = right
+        }
+        // swap
+        if (largest !== index) {
+            let tmp = this.heap[largest];
+            this.heap[largest] = this.heap[index];
+            this.heap[index] = tmp;
+            this.sinkDown(largest)
+        }
+    }
+}

File Zipper/heap.js

@@ -0,0 +1,165 @@
+/**
+ * Created by aarnavjindal on 25/04/20.
+ */
+
+import { BinaryHeap } from './heap.js';
+
+export { HuffmanCoder }
+
+class HuffmanCoder{
+
+    stringify(node){
+        if(typeof(node[1])==="string"){
+            return '\''+node[1];
+        }
+
+        return '0' + this.stringify(node[1][0]) + '1' + this.stringify(node[1][1]);
+    }
+
+    display(node, modify, index=1){
+        if(modify){
+            node = ['',node];
+            if(node[1].length===1)
+                node[1] = node[1][0];
+        }
+
+        if(typeof(node[1])==="string"){
+            return String(index) + " = " + node[1];
+        }
+
+        let left = this.display(node[1][0], modify, index*2);
+        let right = this.display(node[1][1], modify, index*2+1);
+        let res = String(index*2)+" <= "+index+" => "+String(index*2+1);
+        return res + '\n' + left + '\n' + right;
+    }
+
+    destringify(data){
+        let node = [];
+        if(data[this.ind]==='\''){
+            this.ind++;
+            node.push(data[this.ind]);
+            this.ind++;
+            return node;
+        }
+
+        this.ind++;
+        let left = this.destringify(data);
+        node.push(left);
+        this.ind++;
+        let right = this.destringify(data);
+        node.push(right);
+
+        return node;
+    }
+
+    getMappings(node, path){
+        if(typeof(node[1])==="string"){
+            this.mappings[node[1]] = path;
+            return;
+        }
+
+        this.getMappings(node[1][0], path+"0");
+        this.getMappings(node[1][1], path+"1");
+    }
+
+    encode(data){
+
+        this.heap = new BinaryHeap();
+
+        const mp = new Map();
+        for(let i=0;i<data.length;i++){
+            if(data[i] in mp){
+                mp[data[i]] = mp[data[i]] + 1;
+            } else{
+                mp[data[i]] = 1;
+            }
+        }
+
+        for(const key in mp){
+            this.heap.insert([-mp[key], key]);
+        }
+
+        while(this.heap.size() > 1){
+            const node1 = this.heap.extractMax();
+            const node2 = this.heap.extractMax();
+
+            const node = [node1[0]+node2[0],[node1,node2]];
+            this.heap.insert(node);
+        }
+        const huffman_encoder = this.heap.extractMax();
+
+        this.mappings = {};
+        this.getMappings(huffman_encoder, "");
+
+        let binary_string = "";
+        for(let i=0;i<data.length;i++) {
+            binary_string = binary_string + this.mappings[data[i]];
+        }
+
+        let rem = (8 - binary_string.length%8)%8;
+        let padding = "";
+        for(let i=0;i<rem;i++)
+            padding = padding + "0";
+        binary_string = binary_string + padding;
+
+        let result = "";
+        for(let i=0;i<binary_string.length;i+=8){
+            let num = 0;
+            for(let j=0;j<8;j++){
+                num = num*2 + (binary_string[i+j]-"0");
+            }
+            result = result + String.fromCharCode(num);
+        }
+
+        let final_res = this.stringify(huffman_encoder) + '\n' + rem + '\n' + result;
+        let info = "Compression Ratio : " + data.length/final_res.length;
+        info = "Compression complete and file sent for download" + '\n' + info;
+        return [final_res, this.display(huffman_encoder, false), info];
+    }
+
+    decode(data){
+        data = data.split('\n');
+        if(data.length===4){
+            // Handling new line
+            data[0] = data[0] + '\n' + data[1];
+            data[1] = data[2];
+            data[2] = data[3];
+            data.pop();
+        }
+
+        this.ind = 0;
+        const huffman_decoder = this.destringify(data[0]);
+        const text = data[2];
+
+        let binary_string = "";
+        for(let i=0;i<text.length;i++){
+            let num = text[i].charCodeAt(0);
+            let bin = "";
+            for(let j=0;j<8;j++){
+                bin = num%2 + bin;
+                num = Math.floor(num/2);
+            }
+            binary_string = binary_string + bin;
+        }
+        binary_string = binary_string.substring(0,binary_string.length-data[1]);
+
+        console.log(binary_string.length);
+
+        let res = "";
+        let node = huffman_decoder;
+        for(let i=0;i<binary_string.length;i++){
+            if(binary_string[i]==='0'){
+                node = node[0];
+            } else{
+                node = node[1];
+            }
+
+            if(typeof(node[0])==="string"){
+                res += node[0];
+                node = huffman_decoder;
+            }
+        }
+        let info = "Decompression complete and file sent for download";
+        return [res, this.display(huffman_decoder, true), info];
+    }
+}

File Zipper/huffman.js

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="style.css">
+    <script src="heap.js"></script>
+    <script src="huffman.js" type="module"></script>
+    <script src="script.js" type="module"></script>
+</head>
+
+<body>
+    <nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: whitesmoke;">
+
+        
+        File Zipper using huffman Encoding and Decoding
+    </nav>
+    <div id="container">
+        <div class="text_box" style="overflow-y: scroll">
+            <span id="treearea" style="width: 100%; text-align: center; font-size: medium;">
+                Tree Structure Will Be Displayed Here !!
+            </span>
+        </div>
+        <div class="text_box" style="overflow-y: scroll">
+            <span id="temptext" style="width: 100%; text-align: center; font-size: x-large;">
+                Operation info will be shown here !!
+            </span>
+        </div>
+    </div>
+
+    <div>
+        <form method="post" enctype="multipart/form-data" style="display: inline-block;">
+            <input type="file" id="uploadedFile"/>
+        </form>
+        <br>
+        <button type="button" class="btn btn-success center_buttons" id="encode">&nbsp;&nbsp;Encode&nbsp;&nbsp;</button>
+        <br>
+        <button type="button" class="btn btn-danger center_buttons" id="decode">&nbsp;&nbsp;Decode&nbsp;&nbsp;</button>
+    </div>
+</body>
+
+</html>

File Zipper/index.html

@@ -0,0 +1 @@
+<?php include_once("index.html"); ?>