Adding the file zipper files

Author: soma2000-lang

assets/Images/File_Zipper.jpeg

@@ -0,0 +1,27 @@
+html,
+body {
+    height: 100%;
+}
+
+.text_box {
+    padding: 30px;
+    width: 50%;
+    height: 100%;
+    border: 1px solid lightgray;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+#container{
+    width: 100%;
+    height: 70%;
+    background-color: white;
+    display: flex;
+    margin: 0 auto;
+}
+
+.center_buttons{
+    margin:auto;
+    display:block;
+}

assets/css/File_Zipper.css

@@ -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)
+        }
+    }
+}

assets/js/File_Zipper_js/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];
+    }
+}

assets/js/File_Zipper_js/huffman.js

@@ -0,0 +1,69 @@
+import { HuffmanCoder } from './huffman.js';
+
+
+onload = function () {
+    // Get reference to elements
+    const treearea = document.getElementById('treearea');
+    const encode = document.getElementById('encode');
+    const decode = document.getElementById('decode');
+    const temptext = document.getElementById('temptext');
+    const upload = document.getElementById('uploadedFile');
+
+    const coder = new HuffmanCoder();
+
+    upload.addEventListener('change',()=>{ alert("File uploaded") });
+
+    encode.onclick = function () {
+
+        const uploadedFile = upload.files[0];
+        if(uploadedFile===undefined){
+            alert("No file uploaded !");
+            return;
+        }
+        const fileReader = new FileReader();
+        fileReader.onload = function(fileLoadedEvent){
+            const text = fileLoadedEvent.target.result;
+            if(text.length===0){
+                alert("Text can not be empty ! Upload another file !");
+                return;
+            }
+            let [encoded, tree_structure, info] = coder.encode(text);
+            downloadFile(uploadedFile.name.split('.')[0] +'_encoded.txt', encoded);
+            treearea.innerText = tree_structure;
+            treearea.style.marginTop = '2000px';
+            temptext.innerText = info;
+        };
+        fileReader.readAsText(uploadedFile, "UTF-8");
+    };
+
+    decode.onclick = function () {
+
+        const uploadedFile = upload.files[0];
+        if(uploadedFile===undefined){
+            alert("No file uploaded !");
+            return;
+        }
+        const fileReader = new FileReader();
+        fileReader.onload = function(fileLoadedEvent){
+            const text = fileLoadedEvent.target.result;
+            if(text.length===0){
+                alert("Text can not be empty ! Upload another file !");
+                return;
+            }
+            let [decoded, tree_structure, info] = coder.decode(text);
+            downloadFile(uploadedFile.name.split('.')[0] +'_decoded.txt', decoded);
+            treearea.innerText = tree_structure;
+            treearea.style.marginTop = '2000px';
+            temptext.innerText = info;
+        };
+        fileReader.readAsText(uploadedFile, "UTF-8");
+    };
+
+};
+
+function downloadFile(fileName, data){
+    let a = document.createElement('a');
+    a.href = "data:application/octet-stream,"+encodeURIComponent(data);
+    a.download = fileName;
+    a.click();
+}

assets/js/File_Zipper_js/script.js

@@ -0,0 +1,46 @@
+<!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='../assets/css/File_Zipper.css'>
+    <script src='../assets/css/File_Zipper.css'></script>
+    <script src="../assets/js/File_Zipper_js.js" type="module"></script>
+    <script src="../assets/js/File_Zipper_js.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>