├── README.md ├── heap.js ├── huffman.js ├── index.html ├── index.php ├── sample.txt ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CBHuffman 2 | CB Huffman 3 | -------------------------------------------------------------------------------- /heap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aarnavjindal on 30/03/20. 3 | */ 4 | 5 | export { BinaryHeap } 6 | 7 | class BinaryHeap { 8 | 9 | constructor() { 10 | this.heap = []; 11 | } 12 | 13 | insert(value) { 14 | this.heap.push(value); 15 | this.bubbleUp(); 16 | } 17 | 18 | size() { 19 | return this.heap.length; 20 | } 21 | 22 | empty(){ 23 | return ( this.size()===0 ); 24 | } 25 | 26 | //using iterative approach 27 | bubbleUp() { 28 | let index = this.size() - 1; 29 | 30 | while (index > 0) { 31 | let element = this.heap[index], 32 | parentIndex = Math.floor((index - 1) / 2), 33 | parent = this.heap[parentIndex]; 34 | 35 | if (parent[0] >= element[0]) break; 36 | this.heap[index] = parent; 37 | this.heap[parentIndex] = element; 38 | index = parentIndex 39 | } 40 | } 41 | 42 | extractMax() { 43 | const max = this.heap[0]; 44 | const tmp = this.heap.pop(); 45 | if(!this.empty()) { 46 | this.heap[0] = tmp; 47 | this.sinkDown(0); 48 | } 49 | return max; 50 | } 51 | 52 | sinkDown(index) { 53 | 54 | let left = 2 * index + 1, 55 | right = 2 * index + 2, 56 | largest = index; 57 | const length = this.size(); 58 | 59 | // console.log(this.heap[left], left, length, this.heap[right], right, length, this.heap[largest]); 60 | 61 | if (left < length && this.heap[left][0] > this.heap[largest][0]) { 62 | largest = left 63 | } 64 | if (right < length && this.heap[right][0] > this.heap[largest][0]) { 65 | largest = right 66 | } 67 | // swap 68 | if (largest !== index) { 69 | let tmp = this.heap[largest]; 70 | this.heap[largest] = this.heap[index]; 71 | this.heap[index] = tmp; 72 | this.sinkDown(largest) 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /huffman.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aarnavjindal on 25/04/20. 3 | */ 4 | 5 | import { BinaryHeap } from './heap.js'; 6 | 7 | export { HuffmanCoder } 8 | 9 | class HuffmanCoder{ 10 | 11 | stringify(node){ 12 | if(typeof(node[1])==="string"){ 13 | return '\''+node[1]; 14 | } 15 | 16 | return '0' + this.stringify(node[1][0]) + '1' + this.stringify(node[1][1]); 17 | } 18 | 19 | display(node, modify, index=1){ 20 | if(modify){ 21 | node = ['',node]; 22 | if(node[1].length===1) 23 | node[1] = node[1][0]; 24 | } 25 | 26 | if(typeof(node[1])==="string"){ 27 | return String(index) + " = " + node[1]; 28 | } 29 | 30 | let left = this.display(node[1][0], modify, index*2); 31 | let right = this.display(node[1][1], modify, index*2+1); 32 | let res = String(index*2)+" <= "+index+" => "+String(index*2+1); 33 | return res + '\n' + left + '\n' + right; 34 | } 35 | 36 | destringify(data){ 37 | let node = []; 38 | if(data[this.ind]==='\''){ 39 | this.ind++; 40 | node.push(data[this.ind]); 41 | this.ind++; 42 | return node; 43 | } 44 | 45 | this.ind++; 46 | let left = this.destringify(data); 47 | node.push(left); 48 | this.ind++; 49 | let right = this.destringify(data); 50 | node.push(right); 51 | 52 | return node; 53 | } 54 | 55 | getMappings(node, path){ 56 | if(typeof(node[1])==="string"){ 57 | this.mappings[node[1]] = path; 58 | return; 59 | } 60 | 61 | this.getMappings(node[1][0], path+"0"); 62 | this.getMappings(node[1][1], path+"1"); 63 | } 64 | 65 | encode(data){ 66 | 67 | this.heap = new BinaryHeap(); 68 | 69 | const mp = new Map(); 70 | for(let i=0;i 1){ 83 | const node1 = this.heap.extractMax(); 84 | const node2 = this.heap.extractMax(); 85 | 86 | const node = [node1[0]+node2[0],[node1,node2]]; 87 | this.heap.insert(node); 88 | } 89 | const huffman_encoder = this.heap.extractMax(); 90 | 91 | this.mappings = {}; 92 | this.getMappings(huffman_encoder, ""); 93 | 94 | let binary_string = ""; 95 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 24 |
25 |
26 | 27 | Tree Structure Will Be Displayed Here !! 28 | 29 |
30 |
31 | 32 | Operation info will be shown here !! 33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sample.txt: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 2 | 3 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 4 | 5 | Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 6 | 7 | Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 8 | 9 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 10 | 11 | At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 12 | 13 | Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | import { HuffmanCoder } from './huffman.js'; 2 | 3 | 4 | onload = function () { 5 | // Get reference to elements 6 | const treearea = document.getElementById('treearea'); 7 | const encode = document.getElementById('encode'); 8 | const decode = document.getElementById('decode'); 9 | const temptext = document.getElementById('temptext'); 10 | const upload = document.getElementById('uploadedFile'); 11 | 12 | const coder = new HuffmanCoder(); 13 | 14 | upload.addEventListener('change',()=>{ alert("File uploaded") }); 15 | 16 | encode.onclick = function () { 17 | 18 | const uploadedFile = upload.files[0]; 19 | if(uploadedFile===undefined){ 20 | alert("No file uploaded !"); 21 | return; 22 | } 23 | const fileReader = new FileReader(); 24 | fileReader.onload = function(fileLoadedEvent){ 25 | const text = fileLoadedEvent.target.result; 26 | if(text.length===0){ 27 | alert("Text can not be empty ! Upload another file !"); 28 | return; 29 | } 30 | let [encoded, tree_structure, info] = coder.encode(text); 31 | downloadFile(uploadedFile.name.split('.')[0] +'_encoded.txt', encoded); 32 | treearea.innerText = tree_structure; 33 | treearea.style.marginTop = '2000px'; 34 | temptext.innerText = info; 35 | }; 36 | fileReader.readAsText(uploadedFile, "UTF-8"); 37 | }; 38 | 39 | decode.onclick = function () { 40 | 41 | const uploadedFile = upload.files[0]; 42 | if(uploadedFile===undefined){ 43 | alert("No file uploaded !"); 44 | return; 45 | } 46 | const fileReader = new FileReader(); 47 | fileReader.onload = function(fileLoadedEvent){ 48 | const text = fileLoadedEvent.target.result; 49 | if(text.length===0){ 50 | alert("Text can not be empty ! Upload another file !"); 51 | return; 52 | } 53 | let [decoded, tree_structure, info] = coder.decode(text); 54 | downloadFile(uploadedFile.name.split('.')[0] +'_decoded.txt', decoded); 55 | treearea.innerText = tree_structure; 56 | treearea.style.marginTop = '2000px'; 57 | temptext.innerText = info; 58 | }; 59 | fileReader.readAsText(uploadedFile, "UTF-8"); 60 | }; 61 | 62 | }; 63 | 64 | function downloadFile(fileName, data){ 65 | let a = document.createElement('a'); 66 | a.href = "data:application/octet-stream,"+encodeURIComponent(data); 67 | a.download = fileName; 68 | a.click(); 69 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | .text_box { 7 | padding: 30px; 8 | width: 50%; 9 | height: 100%; 10 | border: 1px solid lightgray; 11 | display: flex; 12 | flex-wrap: wrap; 13 | align-content: center; 14 | } 15 | 16 | #container{ 17 | width: 100%; 18 | height: 70%; 19 | background-color: white; 20 | display: flex; 21 | margin: 0 auto; 22 | } 23 | 24 | .center_buttons{ 25 | margin:auto; 26 | display:block; 27 | } 28 | --------------------------------------------------------------------------------