Edit design | Add 2 logo's | Fix some bugs'

.gitignore

@@ -1 +1,2 @@
-__pycache__/
+__pycache__/
+copy.bat

static/404.html

@@ -106,13 +106,8 @@
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
 
-                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
-                        onclick="change_theme()">
-                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
-                                fill="currentColor"></path>
-                        </svg>
+                    <button id="theme-btn" class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40">
+                        <img id="img-theme" src="images/sun.svg" width="24" height="24">
                         <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
                     </button>
                 </div>
@@ -260,28 +255,6 @@
         </div>
     </div>
 
-    <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            document.getElementById('theme-span').innerText = 'Set Light Theme';
-        } else {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            document.getElementById('theme-span').innerText = 'Set Dark Theme';
-        }
-
-        function change_theme() {
-            if (localStorage.theme === 'dark') {
-                localStorage.theme = 'light';
-                document.documentElement.classList.remove('dark');
-                document.getElementById('theme-span').innerText = 'Set Dark Theme';
-            } else {
-                localStorage.theme = 'dark';
-                document.documentElement.classList.add('dark');
-                document.getElementById('theme-span').innerText = 'Set Light Theme';
-            }
-        }
-    </script>
+    <script src="js/theme.js"></script>
 </body>
 </html>

static/css/main.css

@@ -2404,10 +2404,20 @@ select {
     background-color: #282828;
 } */
 
+#submit {
+    background-color: #ffa116;
+}
+#submit:hover {
+    background-color: #fcb140;
+}
+#submit:focus {
+    box-shadow: 0 0 5px 2px rgb(255, 188, 87);
+}
+
 .dark {
-    filter: invert(90%);
+    filter: invert(92%);
 }
 
 .dark .no-invert {
-    filter: invert(90%);
+    filter: invert(92%);
 }

static/emotion_detection.html

@@ -105,13 +105,8 @@
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
 
-                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
-                        onclick="change_theme()">
-                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
-                                fill="currentColor"></path>
-                        </svg>
+                    <button id="theme-btn" class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40">
+                        <img id="img-theme" src="images/sun.svg" width="24" height="24">
                         <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
                     </button>
                 </div>
@@ -119,7 +114,7 @@
         </div>
 
         <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
-            <header class="bg-white border-b border-gray-100">
+            <header class="static bg-white border-b border-gray-100">
                 <div class="flex items-center justify-between px-4 py-4 sm:px-6">
                     <div class="flex items-center">
                         <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
@@ -234,60 +229,28 @@
                             <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Upload text</h1>
 
                             <form id='sum-form' class="mt-6 space-y-5" onsubmit="return false;">
-                                <div>
-                                    <label for="sum-type" class="block text-sm text-gray-700 capitalize">Select Type</label>
-                                    <select id="sum-type"
-                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
-                                        <option value="sum-text">Identify Text</option>
-                                        <option value="sum-file">Identify File</option>
-                                    </select>
-                                </div>
-
                                 <div id="sum-text-div">
-                                    <label for="description"
-                                        class="block text-sm text-gray-700 capitalize">description</label>
                                     <textarea id="sum-text-input" required class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
-                                    style="min-height: 300px;"></textarea>
+                                    style="min-height: 250px;" placeholder="Enter or upload your text and press &quot;Detect&quot;"></textarea>
                                 </div>
 
-                                <div id="sum-file-div" class="hidden">
-                                    <label for="image" class="block text-sm text-gray-700 capitalize">file</label>
-                                    <label  
-                                        class="flex flex-col items-center justify-center w-full h-32 mt-2 text-gray-500 border-2 border-dashed rounded-md cursor-pointer hover:text-gray-600">
-                                        <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                <p id='sum-err' class="no-invert hidden mt-2 text-sm text-red-500"></p>
+
+                                <div class="flex justify-between no-invert">
+                                    <label id="word-counter" class="hidden flex items-center py-2 px-4 text-gray-500 rounded">Words:</label>
+                                    <label id="sum-file-div" class="flex items-center py-2 px-4 text-gray-500 rounded cursor-pointer hover:text-gray-700">
+                                        <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 20 20">
                                             <path
                                                 d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z">
                                             </path>
                                         </svg>
-                                        <span class="mt-4">Select File</span>
+                                        <span class="px-2">Upload</span>
                                         <input id="sum-file-input" type="file" accept=".pdf, .txt" class="hidden">
                                     </label>
-                                </div>
-
-                                <p id='sum-err' class="hidden mt-2 text-sm text-red-500">Your password is too short.</p>
-
-                                <div class="flex justify-end">
-                                    <style>
-                                        #submit {
-                                            background-color: #ffa116;
-                                        }
-                                        #submit:hover {
-                                            background-color: #fcb140;
-                                        }
-                                        #submit:focus {
-                                            box-shadow: 0 0 5px 2px rgb(255, 188, 87);
-                                        }
-                                    </style>
-                                    <button id="submit" type="button" class="no-invert w-full flex items-center justify-center px-2 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform rounded-md focus:outline-none">
-                                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                                            <g id="SVGRepo_iconCarrier">
-                                              <path d="M7 10L12 15L17 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                                            </g>
-                                          </svg>
-                                        <span class="mx-1">Detect</span>
+                                    <button id="submit" class="w-32 sm:w-80 flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full"
+                                        style="max-height: 2.5rem;">
+                                        Detect
                                     </button>
                                 </div>
                             </form>
@@ -297,12 +260,11 @@
                             <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Result</h1>
 
                             <div class="md:flex gap-8">
-                                <div class="w-full md:w-1/2 grid-cols-2 mt-6">
+                                <div class="hidden w-full md:w-1/2 grid-cols-2 mt-6">
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Extracted Text</label>
                                     <textarea id="extracted-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
-                                        style="min-height: 250px;"></textarea>
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"></textarea>
                                 </div>
 
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
@@ -320,30 +282,8 @@
         </div>
     </div>
 
-    <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            document.getElementById('theme-span').innerText = 'Set Light Theme';
-        } else {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            document.getElementById('theme-span').innerText = 'Set Dark Theme';
-        }
-
-        function change_theme() {
-            if (localStorage.theme === 'dark') {
-                localStorage.theme = 'light';
-                document.documentElement.classList.remove('dark');
-                document.getElementById('theme-span').innerText = 'Set Dark Theme';
-            } else {
-                localStorage.theme = 'dark';
-                document.documentElement.classList.add('dark');
-                document.getElementById('theme-span').innerText = 'Set Light Theme';
-            }
-        }
-    </script>
 
+    <script src="js/theme.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
     <script src="js/detection.js"></script>
 </body>

static/index.html

@@ -105,13 +105,8 @@
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
 
-                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
-                        onclick="change_theme()">
-                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
-                                fill="currentColor"></path>
-                        </svg>
+                    <button id="theme-btn" class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40">
+                        <img id="img-theme" src="images/sun.svg" width="24" height="24">
                         <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
                     </button>
                 </div>
@@ -793,29 +788,7 @@
         </div>
     </div>
 
-    <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            document.getElementById('theme-span').innerText = 'Set Light Theme';
-        } else {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            document.getElementById('theme-span').innerText = 'Set Dark Theme';
-        }
-
-        function change_theme() {
-            if (localStorage.theme === 'dark') {
-                localStorage.theme = 'light';
-                document.documentElement.classList.remove('dark');
-                document.getElementById('theme-span').innerText = 'Set Dark Theme';
-            } else {
-                localStorage.theme = 'dark';
-                document.documentElement.classList.add('dark');
-                document.getElementById('theme-span').innerText = 'Set Light Theme';
-            }
-        }
-    </script>
+    <script src="js/theme.js"></script>
 </body>
 
 </html>

static/js/detection.js

@@ -1,35 +1,35 @@
 // Form Divs
-const form = document.getElementById("sum-form");
-const sumText  = document.getElementById("sum-text-div");
-const sumFile  = document.getElementById("sum-file-div");
-const sumVideo = document.getElementById("sum-video-div");
+const form = document.getElementById('sum-form');
+const sumText  = document.getElementById('sum-text-div');
+const sumFile  = document.getElementById('sum-file-div')
 
 // Form Data
-const selectOption  = document.getElementById("sum-type");
-const sumTextInput  = document.getElementById("sum-text-input");
-const sumFileInput  = document.getElementById("sum-file-input");
-const sumVideoInput = document.getElementById("sum-video-input");
+const sumTextInput  = document.getElementById('sum-text-input');
+const sumFileInput  = document.getElementById('sum-file-input');
 
 // Error Output Section
-const sumError = document.getElementById("sum-err");
+const sumError = document.getElementById('sum-err');
 
 // Result Section
-const extractText = document.getElementById("extracted-text");
-const summaryText = document.getElementById("summarized-text");
+const extractText = document.getElementById('extracted-text');
+const summaryText = document.getElementById('summarized-text');
 
-const MAX_SIZE = 5000;
+// Word Counter
+const wordsCount = document.getElementById('word-counter');
 
+const MAX_SIZE = 20000;
 
-function _summarize() {
+
+function _detect() {
     var xhr = new XMLHttpRequest();
-    xhr.open("POST", "/predict_emotion", true);
-    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.open('POST', '/predict_emotion', true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
  
-    var data = JSON.stringify({ "sum_type": selectOption.value, "text": extractText.value });
+    var data = JSON.stringify({ 'sum_type': 'sum-text', 'text': extractText.value });
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
-            result = xhr.responseText.split("\\n").join("\n");
+            result = xhr.responseText.split('\\n').join('\n');
             summaryText.value = result.slice(1, -1);
         }
     };
@@ -43,12 +43,12 @@ function _extractFile() {
     if (file.type === 'text/plain') {
         const reader = new FileReader();
         reader.onload = function() {
-            extractText.value = reader.result.slice(0, MAX_SIZE);
+            sumTextInput.value = reader.result.slice(0, MAX_SIZE);
         };
         reader.readAsText(file, 'CP1251');
         return;
     } else if (file.type === 'application/pdf') {
-        extractText.value = '';
+        sumTextInput.value = '';
         const reader = new FileReader();
         reader.onload = function (e) {
             const pdfData = e.target.result;
@@ -56,14 +56,14 @@ function _extractFile() {
                 for (let pageNum = 1; pageNum <= pdfDocument.numPages; pageNum++) {
                     pdfDocument.getPage(pageNum).then(function (pdfPage) {
                       pdfPage.getTextContent().then(function (textContent) {
-                        let size = extractText.value.length;
+                        let size = sumTextInput.value.length;
                         let pageText = [];
                         for (const textItem of textContent.items) {
                             pageText.push(textItem.str);
                             size += textItem.str.length;
                             if (size > MAX_SIZE) break;
                         }
-                        extractText.value += pageText.join(' ');
+                        sumTextInput.value += pageText.join(' ');
                       });
                     });
                   }
@@ -74,101 +74,63 @@ function _extractFile() {
     return;
 }
 
-// In progress...
-function _getCaptions(src) {
-    return src;
-}
-
 
 async function summarize(event) {
     event.preventDefault();
 
-    switch (selectOption.value) {
-        case 'sum-text':
-            let value = sumTextInput.value
-            if (value === '') {
-                sumError.innerText = `You need to input some text`;
-                sumError.classList.remove('hidden');
-                return;
-            }
-            break;
-        case 'sum-file':
-            const allowedTypes = ['application/pdf', 'text/plain'];
-            const file = sumFileInput.files[0];
-
-            if (!file) {
-                sumError.innerText = 'There is no File';
-                sumError.classList.remove('hidden');
-                return;
-            }
-
-            if (!allowedTypes.includes(file.type)) {
-                sumError.innerText = 'Not supported type (Only `.pdf` or `.txt`)';
-                sumError.classList.remove('hidden');
-                return;
-            }
-        case 'sum-video':
-            regex = /^((((http)s?:\/\/)?((www\.)|(m\.))?youtube.com\/watch\?([^\?]*&)?v=.+)|(((http)s?:\/\/)?youtu.be\/([^\?=]+)(\?[^?]+)?))$/
-            if (!sumVideoInput.value.match(regex)) {
-                sumError.innerText = 'Invalid youtube link';
-                sumError.classList.remove('hidden');
-                return;
-            }
+    let value = sumTextInput.value.trim()
+    if (value === '') {
+        sumError.innerText = `You need to input some text`;
+        sumError.classList.remove('hidden');
+        return;
     }
 
     sumError.classList.add('hidden');
 
     // Here we can finally summarize data
     summaryText.value = 'Please wait...';
-    switch (selectOption.value) {
-        case 'sum-text':
-            extractText.value = sumTextInput.value.slice(0, MAX_SIZE);
-            break;
-        case 'sum-file':
-            _extractFile();
-            await (new Promise(resolve => setTimeout(resolve, 1000)));
-            break;
-        case 'sum-video':
-            extractText.value = sumVideoInput.value.slice(0, MAX_SIZE);
-            break;
+    extractText.value = sumTextInput.value.trim().slice(0, MAX_SIZE);
+    _detect();
+}
+
+function _update_counter() {
+    let text = sumTextInput.value.trim()
+    if (text === '') {
+        sumFile.classList.remove('hidden');
+        wordsCount.classList.add('hidden');
+        return;
     }
-    _summarize();
+
+    sumFile.classList.add('hidden');
+    wordsCount.classList.remove('hidden');
+    wordsCount.innerHTML = `Words: ${text.split(/\s+/).length} | Chars: ${text.length}`
 }
 
+document.addEventListener('DOMContentLoaded', function () {
+    var submitButton = document.getElementById('submit');
+    submitButton.addEventListener('click', summarize);
+
+    sumFileInput.addEventListener('change', async function() {
+        const allowedTypes = ['application/pdf', 'text/plain'];
+        const file = sumFileInput.files[0];
+
+        if (!file) {
+            sumError.classList.remove('hidden');
+            return;
+        }
 
-document.addEventListener("DOMContentLoaded", function () {
-    selectOption.addEventListener("change", function () {
-        switch (selectOption.value) {
-            case 'sum-text':
-                sumText.classList.remove('hidden');
-                sumFile.classList.add('hidden');
-                sumVideo.classList.add('hidden');
-
-                sumTextInput.setAttribute("required", "");
-                sumVideoInput.removeAttribute("required");
-                break;
-            case 'sum-file':
-                sumText.classList.add('hidden');
-                sumFile.classList.remove('hidden');
-                sumVideo.classList.add('hidden');
-
-                sumTextInput.removeAttribute("required");
-                sumVideoInput.removeAttribute("required");
-                break;
-            case 'sum-video':
-                sumText.classList.add('hidden');
-                sumFile.classList.add('hidden');
-                sumVideo.classList.remove('hidden');
-
-                sumTextInput.removeAttribute("required");
-                sumVideoInput.setAttribute("required", "");
-                break;
+        if (!allowedTypes.includes(file.type)) {
+            sumError.innerText = 'Not supported type (Only `.pdf` or `.txt`)';
+            sumError.classList.remove('hidden');
+            return;
         }
+
+        _extractFile();
+
+        await (new Promise(resolve => setTimeout(resolve, 1000)));
+        _update_counter();
         sumError.classList.add('hidden');
     });
-});
 
-document.addEventListener("DOMContentLoaded", function () {
-    var submitButton = document.getElementById("submit");
-    submitButton.addEventListener("click", summarize);
-  });
+    sumTextInput.addEventListener('input', _update_counter);
+});

static/js/summarizer.js

@@ -1,36 +1,38 @@
 // Form Divs
-const form = document.getElementById("sum-form");
-const sumText  = document.getElementById("sum-text-div");
-const sumFile  = document.getElementById("sum-file-div");
-const sumVideo = document.getElementById("sum-video-div");
+const form = document.getElementById('sum-form');
+const sumText  = document.getElementById('sum-text-div');
+const sumFile  = document.getElementById('sum-file-div')
+const sumVideo = document.getElementById('sum-video-div');
 
 // Form Data
-const selectOption  = document.getElementById("sum-type");
-const sumTextInput  = document.getElementById("sum-text-input");
-const sumFileInput  = document.getElementById("sum-file-input");
-const sumVideoInput = document.getElementById("sum-video-input");
+const selectOption  = document.getElementById('sum-type');
+const sumTextInput  = document.getElementById('sum-text-input');
+const sumFileInput  = document.getElementById('sum-file-input');
+const sumVideoInput = document.getElementById('sum-video-input');
 
 // Error Output Section
-const sumError = document.getElementById("sum-err");
+const sumError = document.getElementById('sum-err');
 
 // Result Section
-const extractText = document.getElementById("extracted-text");
-const summaryText = document.getElementById("summarized-text");
+const extractText = document.getElementById('extracted-text');
+const summaryText = document.getElementById('summarized-text');
+
+// Word Counter
+const wordsCount = document.getElementById('word-counter');
 
 const MAX_SIZE = 20000;
 
 
-// In progress...
 function _summarize() {
     var xhr = new XMLHttpRequest();
-    xhr.open("POST", "/predict_summarization", true);
-    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.open('POST', '/predict_summarization', true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
  
-    var data = JSON.stringify({ "sum_type": selectOption.value, "text": extractText.value });
+    var data = JSON.stringify({ 'sum_type': selectOption.value, 'text': extractText.value });
 
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
-            result = xhr.responseText.split("\\n").join("\n");
+            result = xhr.responseText.split('\\n').join('\n');
             summaryText.value = result.slice(1, -1);
         }
     };
@@ -44,11 +46,12 @@ function _extractFile() {
     if (file.type === 'text/plain') {
         const reader = new FileReader();
         reader.onload = function() {
-            extractText.value = reader.result.slice(0, MAX_SIZE);
+            sumTextInput.value = reader.result.slice(0, MAX_SIZE);
         };
         reader.readAsText(file, 'CP1251');
+        return;
     } else if (file.type === 'application/pdf') {
-        extractText.value = '';
+        sumTextInput.value = '';
         const reader = new FileReader();
         reader.onload = function (e) {
             const pdfData = e.target.result;
@@ -56,14 +59,14 @@ function _extractFile() {
                 for (let pageNum = 1; pageNum <= pdfDocument.numPages; pageNum++) {
                     pdfDocument.getPage(pageNum).then(function (pdfPage) {
                       pdfPage.getTextContent().then(function (textContent) {
-                        let size = extractText.value.length;
+                        let size = sumTextInput.value.length;
                         let pageText = [];
                         for (const textItem of textContent.items) {
                             pageText.push(textItem.str);
                             size += textItem.str.length;
                             if (size > MAX_SIZE) break;
                         }
-                        extractText.value += pageText.join(' ');
+                        sumTextInput.value += pageText.join(' ');
                       });
                     });
                   }
@@ -80,25 +83,9 @@ async function summarize(event) {
 
     switch (selectOption.value) {
         case 'sum-text':
-            len = sumTextInput.value.length
+            len = sumTextInput.value.trim().length
             if (len < 250) {
-                sumError.innerText = `The text size should be at least 100 characters (${len} < 250)`;
-                sumError.classList.remove('hidden');
-                return;
-            }
-            break;
-        case 'sum-file':
-            const allowedTypes = ['application/pdf', 'text/plain'];
-            const file = sumFileInput.files[0];
-
-            if (!file) {
-                sumError.innerText = 'There is no File';
-                sumError.classList.remove('hidden');
-                return;
-            }
-
-            if (!allowedTypes.includes(file.type)) {
-                sumError.innerText = 'Not supported type (Only `.pdf` or `.txt`)';
+                sumError.innerText = `The text size should be at least 250 characters (${len} < 250)`;
                 sumError.classList.remove('hidden');
                 return;
             }
@@ -119,11 +106,7 @@ async function summarize(event) {
     summaryText.value = 'Please wait...';
     switch (selectOption.value) {
         case 'sum-text':
-            extractText.value = sumTextInput.value.slice(0, MAX_SIZE);
-            break;
-        case 'sum-file':
-            _extractFile();
-            await (new Promise(resolve => setTimeout(resolve, 1000)));
+            extractText.value = sumTextInput.value.trim().slice(0, MAX_SIZE);
             break;
         case 'sum-video':
             extractText.value = sumVideoInput.value.slice(0, MAX_SIZE);
@@ -133,39 +116,70 @@ async function summarize(event) {
 }
 
 
-document.addEventListener("DOMContentLoaded", function () {
-    selectOption.addEventListener("change", function () {
-        switch (selectOption.value) {
-            case 'sum-text':
-                sumText.classList.remove('hidden');
-                sumFile.classList.add('hidden');
-                sumVideo.classList.add('hidden');
-
-                sumTextInput.setAttribute("required", "");
-                sumVideoInput.removeAttribute("required");
-                break;
-            case 'sum-file':
-                sumText.classList.add('hidden');
-                sumFile.classList.remove('hidden');
-                sumVideo.classList.add('hidden');
-
-                sumTextInput.removeAttribute("required");
-                sumVideoInput.removeAttribute("required");
-                break;
-            case 'sum-video':
-                sumText.classList.add('hidden');
-                sumFile.classList.add('hidden');
-                sumVideo.classList.remove('hidden');
-
-                sumTextInput.removeAttribute("required");
-                sumVideoInput.setAttribute("required", "");
-                break;
+function _update_option() {
+    switch (selectOption.value) {
+        case 'sum-text':
+            sumText.classList.remove('hidden');
+            sumVideo.classList.add('hidden');
+
+            sumTextInput.setAttribute('required', '');
+            sumVideoInput.removeAttribute('required');
+            break;
+        case 'sum-video':
+            sumText.classList.add('hidden');
+            sumVideo.classList.remove('hidden');
+
+            sumTextInput.removeAttribute('required');
+            sumVideoInput.setAttribute('required', '');
+            break;
+    }
+    sumError.classList.add('hidden');
+}
+
+function _update_counter() {
+    let text = sumTextInput.value.trim()
+    if (text === '') {
+        sumFile.classList.remove('hidden');
+        wordsCount.classList.add('hidden');
+        return;
+    }
+
+    sumFile.classList.add('hidden');
+    wordsCount.classList.remove('hidden');
+    wordsCount.innerHTML = `Words: ${text.split(/\s+/).length} | Chars: ${text.length}`
+}
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    selectOption.addEventListener('change', _update_option);
+
+    var submitButton = document.getElementById('submit');
+    submitButton.addEventListener('click', summarize);
+
+    sumFileInput.addEventListener('change', async function() {
+        const allowedTypes = ['application/pdf', 'text/plain'];
+        const file = sumFileInput.files[0];
+
+        if (!file) {
+            sumError.classList.remove('hidden');
+            return;
         }
+
+        if (!allowedTypes.includes(file.type)) {
+            sumError.innerText = 'Not supported type (Only `.pdf` or `.txt`)';
+            sumError.classList.remove('hidden');
+            return;
+        }
+
+        // Back to main option
+        selectOption.options[0].selected = true;
+        _update_option();
+        _extractFile();
+
+        await (new Promise(resolve => setTimeout(resolve, 1000)));
+        _update_counter();
         sumError.classList.add('hidden');
     });
-});
 
-document.addEventListener("DOMContentLoaded", function () {
-    var submitButton = document.getElementById("submit");
-    submitButton.addEventListener("click", summarize);
-  });
+    sumTextInput.addEventListener('input', _update_counter);
+});

static/js/theme.js

@@ -0,0 +1,26 @@
+if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    localStorage.theme = 'dark';
+    document.documentElement.classList.add('dark');
+    document.getElementById('img-theme').src = 'images/sun.svg'
+    document.getElementById('theme-span').innerText = 'Set Light Theme';
+} else {
+    localStorage.theme = 'light';
+    document.documentElement.classList.remove('dark');
+    document.getElementById('img-theme').src = 'images/moon.svg'
+    document.getElementById('theme-span').innerText = 'Set Dark Theme';
+}
+
+const theme_btn = document.getElementById('theme-btn');
+theme_btn.addEventListener('click', function() {
+    if (localStorage.theme === 'dark') {
+        localStorage.theme = 'light';
+        document.documentElement.classList.remove('dark');
+        document.getElementById('img-theme').src = 'images/moon.svg'
+        document.getElementById('theme-span').innerText = 'Set Dark Theme';
+    } else {
+        localStorage.theme = 'dark';
+        document.documentElement.classList.add('dark');
+        document.getElementById('img-theme').src = 'images/sun.svg'
+        document.getElementById('theme-span').innerText = 'Set Light Theme';
+    }
+})

static/text_summarizer.html

@@ -105,13 +105,8 @@
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
 
-                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
-                        onclick="change_theme()">
-                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
-                                fill="currentColor"></path>
-                        </svg>
+                    <button id="theme-btn" class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40">
+                        <img id="img-theme" src="images/sun.svg" width="24" height="24">
                         <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
                     </button>
                 </div>
@@ -119,7 +114,7 @@
         </div>
 
         <div class="flex flex-col flex-1 overflow-hidden bg-gray-100">
-            <header class="bg-white border-b border-gray-100">
+            <header class="static bg-white border-b border-gray-100">
                 <div class="flex items-center justify-between px-4 py-4 sm:px-6">
                     <div class="flex items-center">
                         <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 lg:hidden focus:outline-none">
@@ -239,7 +234,6 @@
                                     <select id="sum-type"
                                         class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
                                         <option value="sum-text">Summarize Text</option>
-                                        <option value="sum-file">Summarize File</option>
                                         <option value="sum-video">Summarize Youtube Video</option>
                                     </select>
                                 </div>
@@ -248,52 +242,32 @@
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">description</label>
                                     <textarea id="sum-text-input" required class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
-                                    style="min-height: 300px;"></textarea>
+                                    style="min-height: 250px;" placeholder="Enter or upload your text and press &quot;Summarize&quot;"></textarea>
+                                </div>
+
+                                <div id="sum-video-div" class="hidden">
+                                    <label for="video" class="block text-sm text-gray-700 capitalize">Youtube link</label>
+                                    <input id="sum-video-input" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="url"
+                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
                                 </div>
 
-                                <div id="sum-file-div" class="hidden">
-                                    <label for="image" class="block text-sm text-gray-700 capitalize">file</label>
-                                    <label  
-                                        class="flex flex-col items-center justify-center w-full h-32 mt-2 text-gray-500 border-2 border-dashed rounded-md cursor-pointer hover:text-gray-600">
-                                        <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                                <p id='sum-err' class="no-invert hidden mt-2 text-sm text-red-500"></p>
+
+                                <div class="flex justify-between no-invert">
+                                    <label id="word-counter" class="hidden flex items-center py-2 px-4 text-gray-500 rounded">Words:</label>
+                                    <label id="sum-file-div" class="flex items-center py-2 px-4 text-gray-500 rounded cursor-pointer hover:text-gray-700">
+                                        <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 20 20">
                                             <path
                                                 d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z">
                                             </path>
                                         </svg>
-                                        <span class="mt-4">Select File</span>
+                                        <span class="px-2">Upload</span>
                                         <input id="sum-file-input" type="file" accept=".pdf, .txt" class="hidden">
                                     </label>
-                                </div>
-
-                                <div id="sum-video-div" class="hidden">
-                                    <label for="video" class="block text-sm text-gray-700 capitalize">Youtube link</label>
-                                    <input id="sum-video-input" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="url"
-                                        class="block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
-                                </div>
-                                <p id='sum-err' class="hidden mt-2 text-sm text-red-500">Your password is too short.</p>
-
-                                <div class="flex justify-end">
-                                    <style>
-                                        #submit {
-                                            background-color: #ffa116;
-                                        }
-                                        #submit:hover {
-                                            background-color: #fcb140;
-                                        }
-                                        #submit:focus {
-                                            box-shadow: 0 0 5px 2px rgb(255, 188, 87);
-                                        }
-                                    </style>
-                                    <button id="submit" type="button" class="no-invert w-full flex items-center justify-center px-2 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform rounded-md focus:outline-none">
-                                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                                            <g id="SVGRepo_iconCarrier">
-                                              <path d="M7 10L12 15L17 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                                            </g>
-                                          </svg>
-                                        <span class="mx-1">Summarize</span>
+                                    <button id="submit" class="w-32 sm:w-80 flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full"
+                                        style="max-height: 2.5rem;">
+                                        Summarize
                                     </button>
                                 </div>
                             </form>
@@ -307,8 +281,7 @@
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Extracted Text</label>
                                     <textarea id="extracted-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
-                                        style="min-height: 300px;"></textarea>
+                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"></textarea>
                                 </div>
 
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
@@ -316,7 +289,7 @@
                                         class="block text-sm text-gray-700 capitalize">Summarized Text</label>
                                     <textarea id="summarized-text"
                                         class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
-                                        style="min-height: 300px;"></textarea>
+                                        style="min-height: 250px;"></textarea>
                                 </div>
                             </div>
                         </div>
@@ -326,30 +299,7 @@
         </div>
     </div>
 
-    <script>
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            document.getElementById('theme-span').innerText = 'Set Light Theme';
-        } else {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            document.getElementById('theme-span').innerText = 'Set Dark Theme';
-        }
-
-        function change_theme() {
-            if (localStorage.theme === 'dark') {
-                localStorage.theme = 'light';
-                document.documentElement.classList.remove('dark');
-                document.getElementById('theme-span').innerText = 'Set Dark Theme';
-            } else {
-                localStorage.theme = 'dark';
-                document.documentElement.classList.add('dark');
-                document.getElementById('theme-span').innerText = 'Set Light Theme';
-            }
-        }
-    </script>
-
+    <script src="js/theme.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
     <script src="js/summarizer.js"></script>
 </body>