Minor improvements

app/summarizer.py

@@ -8,13 +8,13 @@ import logging
 
 class Summarizer:
     ARTICLE_CATEGORIES = [
+        'world',
         'politics',
         'technology',
         'sports',
         'entertainment',
-        'business',
-        'health',
-        'world news'
+        'economy',
+        'health'
     ]
 
 
@@ -45,7 +45,7 @@ class Summarizer:
         return self.embedding_model.encode(sentences)
 
 
-    def summarize(self, content, min_length=30, max_length=130):
+    def summarize(self, content, min_length=30, max_length=200):
         # truncate content if exceeds model capabilities
         max_model_length = self.summarization_model.model.config.max_position_embeddings
         if len(content) > max_model_length:
@@ -74,7 +74,7 @@ class Summarizer:
         return ranked_sentences
 
 
-    def summarize_clusters(self, clusters, top_cluster_count=5):
+    def summarize_clusters(self, clusters, top_cluster_count=20):
         # sort clusters by their length (descending) to find the most important topics
         clusters = sorted(clusters, key=len, reverse=True)
 
@@ -86,7 +86,7 @@ class Summarizer:
         for i, cluster in enumerate(clusters):
             logging.debug(f'Extracting from cluster {i + 1}...')
             top_sentences = Summarizer.rank_cluster_sentences(cluster)
-            content = '\n'.join(top_sentences[:3])
+            content = '\n'.join(top_sentences[:2])
             key_sentences.append(content)
 
         combined = ' '.join(key_sentences)
@@ -96,7 +96,7 @@ class Summarizer:
         summary = self.summarize(
             combined,
             min_length=60,
-            max_length=250
+            max_length=400
         )
         return summary
     

app/templates/index.html

@@ -64,7 +64,7 @@
             <ul class="space-y-2 font-medium">
                 {% for category in categorized_articles.keys() %}
                 <li>
-                    <a href="#"
+                    <a href="#{{ category }}"
                         class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                         <span class="flex-1 ms-3 whitespace-nowrap">{{ category | capitalize }}</span>
                     </a>
@@ -110,24 +110,39 @@
 
     <div class="p-8 sm:ml-64 mt-14">
         {% for category, articles in categorized_articles.items() %}
-        <div href="#{{ category }}" class="block w-full mb-8 rounded-lg border border-gray-300 bg-white p-6">
+        <div id="{{ category }}" class="block w-full mb-8 rounded-lg border border-gray-300 border-l-4 border-l-blue-500 bg-white p-6">
             <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ category | capitalize }}</h1>
 
             {% for article in articles %}
             <article>
                 <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
                 <span class="text-sm text-gray-500">{{ article.date }}</span>
-                <h2 class="mb-4 mt-4 text-xl font-medium tracking-tight text-gray-900">{{ article.title }}</h2>
+                <h2 class="mb-4 mt-4 text-xl font-semibold tracking-tight text-gray-900">{{ article.title }}</h2>
                 <p class="text-base mb-4">
                     {{ article.content }}
                 </p>
-                <button type="button" class="toggle-button text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-semibold rounded-lg text-sm px-3 py-1 me-2 mb-2>
-      <svg class=" w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                    viewBox="0 0 18 21">
-                    <path
-                        d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" />
-                    </svg>
-                    Sources ({{ article.sources | length }})
+                <button type="button"
+                    class="toggle-button flex items-center space-x-2 text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-100 hover:bg-gray-100 font-semibold rounded-lg text-sm px-4 py-2 me-2 mb-2"
+                    aria-expanded="false" aria-controls="content-to-toggle">
+                    <div class="icon-container relative w-4 h-4">
+                        <svg id="chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                            stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-chevron-down w-full h-full transition-opacity duration-300"
+                            aria-hidden="true">
+                            <path d="m6 9 6 6 6-6"></path>
+                        </svg>
+
+                        <svg id="chevron-up" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+                            stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-chevron-up w-full h-full absolute top-0 left-0 opacity-0 transition-opacity duration-300"
+                            aria-hidden="true">
+                            <path d="m18 15-6-6-6 6"></path>
+                        </svg>
+                    </div>
+
+                    <span>Sources ({{ article.sources | length }})</span>
                 </button>
                 <div class="collapsible-content">
                     <div class="bg-gray-100 p-4 rounded-lg mt-4 {% if not article.sources %}hidden{% endif %}">
@@ -135,11 +150,10 @@
                         <ul class="list-inside mb-4">
                             {% for source in article.sources %}
                             <li>
-                                <a href="{{ source.url }}" class="flex justify-start items-center space-x-2">
+                                <a href="{{ source.url }}" class="flex justify-start items-center space-x-2 mb-2">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="h-3 w-3 flex-shrink-0" aria-hidden="true">
+                                        stroke-linejoin="round" class="h-3 w-3 flex-shrink-0" aria-hidden="true">
                                         <path d="M15 3h6v6"></path>
                                         <path d="M10 14 21 3"></path>
                                         <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
@@ -172,16 +186,46 @@
             allToggleButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     const content = this.nextElementSibling;
-                    const plusIcon = this.querySelector('.plus-icon');
-                    const minusIcon = this.querySelector('.minus-icon');
+                    const downChevron = this.querySelector('.plus-icon');
+                    const upChevron = this.querySelector('.minus-icon');
 
                     content.classList.toggle('expanded');
 
-                    plusIcon.classList.toggle('hidden');
-                    minusIcon.classList.toggle('hidden');
+                    downChevron.classList.toggle('hidden');
+                    upChevron.classList.toggle('hidden');
                 });
             });
         });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const toggleButton = document.querySelector('.toggle-button');
+
+            if (toggleButton) {
+                const targetId = toggleButton.getAttribute('aria-controls');
+                const targetContent = document.getElementById(targetId);
+
+                const chevronDown = document.getElementById('chevron-down');
+                const chevronUp = document.getElementById('chevron-up');
+
+                toggleButton.addEventListener('click', () => {
+                    const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
+
+                    toggleButton.setAttribute('aria-expanded', String(!isExpanded));
+
+                    if (targetContent) {
+                        targetContent.classList.toggle('hidden');
+                    }
+
+                    if (!isExpanded) {
+                        chevronDown.classList.add('opacity-0');
+                        chevronUp.classList.remove('opacity-0');
+                    } else {
+                        chevronDown.classList.remove('opacity-0');
+                        chevronUp.classList.add('opacity-0');
+                    }
+                });
+            }
+        });
     </script>
 </body>