Add files via upload

sahaib · Oct 22, 2024 · dcbdfdd · dcbdfdd
1 parent 60a2fbf
commit dcbdfdd
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 12 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
     "manifest_version": 3,
-    "name": "Polirizer",
-    "version": "2.6.4",
-    "description": "Summarize privacy policies using AI",
+    "name": "Polirizer - Privacy Policy Summarizer",
+    "version": "2.6.5",
+    "description": "Summarize privacy policies and terms of service using AI",
     "permissions": [
         "storage"
     ],

diff --git a/popup.html b/popup.html
@@ -37,6 +37,26 @@
             pointer-events: none;
             z-index: 9999;
         }
+        #progress {
+        width: 100%;
+        height: 7px;
+        /* box-shadow: inset 1px 1px 2px #ccc; */
+        border: 1px solid #bbb;
+        border-radius: 15px;
+        }
+
+        #progress-bar {
+        height: 100%;
+        }
+
+        #remaining-chars {
+        font-size: 11px;
+        color: #b62020;
+        margin-top: 3px;
+        float: right;
+        display: none;
+        }
+
         #settingsBtn {
             background: none;
             border: none;
@@ -50,7 +70,7 @@
         #inputText {
             width: 100%;
             height: 100px;
-            margin-bottom: 15px;
+            margin-bottom: 6px;
             padding: 10px;
             box-sizing: border-box;
             border-radius: 8px;
@@ -63,6 +83,7 @@
             border: 1px solid #ccc;
             background-color: white;
             margin-right: 10px;
+            margin-top: 15px;
         }
 
         #modelSelect option {
@@ -75,6 +96,7 @@
             border: none;
             cursor: pointer;
             border-radius: 6px;
+            margin-top: 15px;
         }
         #summarizeBtn:hover {
             background-color: #7b06ac;
@@ -603,6 +625,12 @@
             white-space: pre-wrap;
             word-wrap: break-word;
         }
+        #loaderContainer {
+        min-height: 30px; /* Adjust this value to match the height of your progress bar */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     </style>
     <script src="purify.min.js"></script>
     <script src="popup.js"></script>
@@ -627,7 +655,15 @@ <h1>Polirizer</h1> <!-- Change the app name -->
     <!-- Add this line right after the header -->
     <div id="freeSummariesCounter"></div>
     <div id="userInfo"></div>
-    <textarea id="inputText" placeholder="Enter URL or paste privacy policy text"></textarea>
+    <div id="inputContainer">
+        <textarea id="inputText" placeholder="Enter URL or paste privacy policy text" maxlength="50000"></textarea>
+        <div id="progressContainer">
+            <div id="progress">
+                <div id="progress-bar"></div>
+            </div>
+            <p id="remaining-chars"></p>
+        </div>
+    </div>
     <select id="modelSelect">
         <!-- Options will be dynamically populated by JavaScript -->
     </select>

diff --git a/popup.js b/popup.js
@@ -69,7 +69,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const modelSelect = document.getElementById('modelSelect');
     const summarizeBtn = document.getElementById('summarizeBtn');
     const resultDiv = document.getElementById('resultDiv');
-    const loaderContainer = document.getElementById('loaderContainer');
     const settingsBtn = document.getElementById('settingsBtn');
     const settingsModal = document.getElementById('settingsModal');
     const closeSettingsBtn = document.getElementById('closeSettingsBtn');
@@ -78,6 +77,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const ttsButton = document.getElementById('ttsButton');
     const ttsVoiceSelect = document.getElementById('ttsVoiceSelect');
     const exportButton = document.getElementById('exportButton');
+    const inputContainer = document.getElementById("inputContainer");
+    const loaderContainer = document.getElementById("loaderContainer");
     let lastInput = '';
     let lastModel = '';
     let currentAudio = null;
@@ -92,6 +93,37 @@ document.addEventListener('DOMContentLoaded', function() {
 
     fetchTtsEndpointUrl();
 
+    function charCounter(inputField) {
+        const maxLength = inputField.getAttribute("maxlength");
+        const currentLength = inputField.value.length;
+        const progressBar = document.getElementById("progress-bar");
+        const remChars = document.getElementById("remaining-chars");
+        const progressContainer = document.getElementById("progressContainer");
+        const progressWidth = (currentLength / maxLength) * 100;
+        progressBar.style.width = `${progressWidth}%`;
+        remChars.style.display = "none";
+
+        if (progressWidth <= 60) {
+            progressBar.style.backgroundColor = "rgb(19, 160, 19)";
+        } else if (progressWidth > 60 && progressWidth < 85) {
+            progressBar.style.backgroundColor = "rgb(236, 157, 8)";
+        } else {
+            progressBar.style.backgroundColor = "rgb(241, 9, 9)";
+            remChars.innerHTML = `${maxLength - currentLength} characters left`;
+            remChars.style.display = "block";
+        }
+
+        // Show progress container only when there's input
+        progressContainer.style.display = currentLength > 0 ? "block" : "none";
+    }
+
+    inputText.oninput = () => charCounter(inputText);
+
+    // Initially hide the progress container
+    const progressContainer = document.getElementById("progressContainer");
+    progressContainer.style.display = "none";
+
+
 // Update the export button event listener
 if (exportButton) {
     exportButton.addEventListener('click', debounce(function() {
@@ -242,27 +274,47 @@ if (exportButton) {
         return htmlParagraphs;
     }
 
+
     function showLoader() {
         if (loaderContainer) {
             loaderContainer.style.display = 'flex';
             // Hide other elements
             document.getElementById('resultContainer').style.display = 'none';
-            document.getElementById('inputText').style.display = 'none';
-            document.getElementById('modelSelect').style.display = 'none';
+            inputContainer.style.display = 'none';
+            progressContainer.style.display = 'none';
+            modelSelect.style.display = 'none';
             summarizeBtn.style.display = 'none';
         }
     }
-
+    
     function hideLoader() {
         if (loaderContainer) {
             loaderContainer.style.display = 'none';
-            // Show other elements™
-            document.getElementById('inputText').style.display = 'block';
-            document.getElementById('modelSelect').style.display = 'inline-block';
+            // Show other elements
+            inputContainer.style.display = 'block';
+            progressContainer.style.display = 'block';
+            modelSelect.style.display = 'inline-block';
             summarizeBtn.style.display = 'inline-block';
             // resultContainer will be shown by displaySummary or displayError
         }
     }
+
+    // Your existing charCounter function remains the same
+
+    // Update your summarize function to use showLoader and hideLoader
+    async function summarize() {
+        showLoader();
+        try {
+            // Your existing summarization logic
+        } catch (error) {
+            // Error handling
+        } finally {
+            hideLoader();
+        }
+    }
+
+    // Make sure to call summarize when the summarize button is clicked
+    document.getElementById('summarizeBtn').addEventListener('click', summarize);
 
     function toggleSummarizeButton(disabled) {
         if (summarizeBtn) {