Enhanced UI for summarization

NewClient/public/scripts/background/eventPage.js

@@ -275,20 +275,30 @@ chrome.contextMenus.onClicked.addListener(function(clickData){
   // ############################# summarizar ############################
   if (clickData.menuItemId === 'summarizar') {
     let targetUrl = clickData.selectionText;
+
     fetch(`${CONFIG.SUMMARIZE_API_URL}/pred?text=` + encodeURIComponent(targetUrl))
-      .then(response => response.json())
-      .then(data => {
-        // Extract the result from the response
-        let resultText = data.Result;
-
-        chrome.windows.create({
-          url: 'scripts/content/summarizar/summarizar.html?summary=' + encodeURIComponent(resultText),
-          focused: true,
-          type: 'popup'
-        });
-      })
-      .catch(error => console.error('Error fetching the summary:', error));
-  }
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Failed to fetch the summary. Server responded with ' + response.status);
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.Result) {
+                // Extract the result from the response
+                let resultText = data.Result;
+
+                chrome.windows.create({
+                    url: 'scripts/content/summarizar/summarizar.html?summary=' + encodeURIComponent(resultText),
+                    focused: true,
+                    type: 'popup'
+                });
+            } else {
+                console.error('No summary result found:', data);
+            }
+        })
+        .catch(error => console.error('Error fetching the summary:', error));
+}
 
   // // ######################### Fake News New API ##################################
 

NewClient/public/scripts/content/summarizar/populateContent.js

@@ -1,9 +1,28 @@
-// Function to get the query parameter from the URL
+// Function to get query parameter
 function getQueryParam(param) {
-    let urlParams = new URLSearchParams(window.location.search);
+    const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get(param);
 }
 
-// Get the summary from the URL and display it
-let summaryText = getQueryParam('summary');
-document.getElementById('summary').textContent = decodeURIComponent(summaryText);
+// Function to parse markdown and render HTML
+function parseMarkdown(markdown) {
+    return markdown
+        .replace(/^# (.*$)/gim, '<h1>$1</h1>') // H1
+        .replace(/^## (.*$)/gim, '<h2>$1</h2>') // H2
+        .replace(/^### (.*$)/gim, '<h3>$1</h3>') // H3
+        .replace(/^\* (.*$)/gim, '<ul><li>$1</li></ul>') // Bullet list
+        .replace(/^\d+\. (.*$)/gim, '<ol><li>$1</li></ol>') // Numbered list
+        .replace(/`([^`]+)`/g, '<code>$1</code>') // Inline code
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // Bold
+        .replace(/\*(.*?)\*/g, '<em>$1</em>') // Italics
+        .replace(/\n/gim, '<br>'); // Line breaks
+}
+
+// Render the parsed content
+const summaryText = getQueryParam('summary');
+if (summaryText) {
+    const parsedHTML = parseMarkdown(decodeURIComponent(summaryText));
+    document.getElementById('content').innerHTML = parsedHTML;
+} else {
+    document.getElementById('content').innerHTML = "<p>No summary content provided.</p>";
+}

NewClient/public/scripts/content/summarizar/style.css

@@ -0,0 +1,75 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f6f9;
+    color: #333;
+    line-height: 1.6;
+    padding: 20px;
+}
+
+/* Header */
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    color: #2c3e50;
+}
+
+header .tagline {
+    font-size: 1.2rem;
+    color: #7f8c8d;
+    margin-top: 5px;
+}
+
+/* Content Styling */
+main {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+}
+
+main h2 {
+    color: #34495e;
+    margin-bottom: 10px;
+}
+
+main ul {
+    list-style: disc inside;
+    margin-bottom: 20px;
+    padding-left: 20px;
+}
+
+main ol {
+    list-style: decimal inside;
+    margin-bottom: 20px;
+    padding-left: 20px;
+}
+
+main li {
+    margin-bottom: 5px;
+}
+
+main pre {
+    background: #ecf0f1;
+    padding: 15px;
+    border-radius: 5px;
+    overflow-x: auto;
+    font-family: monospace;
+}
+
+main code {
+    font-family: monospace;
+    background: #e8f7ff;
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: #2c3e50;
+}

NewClient/public/scripts/content/summarizar/summarizar.html

@@ -3,20 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Summary</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            padding: 20px;
-        }
-        #summary {
-            white-space: pre-wrap; /* Preserve newlines */
-        }
-    </style>
+    <title>Social Street Smart: Summary</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Summary</h1>
-    <div id="summary"></div>
-    <script src="populateContent.js"></script> <!-- External script -->
+    <header>
+        <h1>Social Street Smart</h1>
+        <p class="tagline">A Safer Internet Experience</p>
+    </header>
+    <main>
+        <section id="content"></section>
+    </main>
+    <script src="populateContent.js"></script>
 </body>
-</html>
+</html>