Article photos

app/database.py

@@ -19,6 +19,7 @@ class Article(Base):
     content: Mapped[str] = mapped_column(UnicodeText)
     date: Mapped[datetime.datetime] = mapped_column(DateTime(timezone=True), server_default=func.now())
     category: Mapped[str] = mapped_column(UnicodeText, server_default='news')
+    image_url: Mapped[str] = mapped_column(UnicodeText, nullable=True, server_default=None)
 
     sources = relationship('Source', backref='article')
 

app/news_fetcher.py

@@ -8,15 +8,16 @@ from datetime import datetime
 
 def topic_summary(summarizer: Summarizer, query: str, max_results: int = 5, min_cluster_size: int = 2) -> str:
     logging.debug(f'Beginning search for \'{query}\'...')
-    articles_and_urls = get_articles(query, max_results=max_results)
-    logging.debug(f'Retrieved {len(articles_and_urls)} articles')
-    
-    articles = [item[0] for item in articles_and_urls]
-    urls = [item[1] for item in articles_and_urls]
+    articles, urls, images = get_articles(query, max_results=max_results)
+    logging.debug(f'Retrieved {len(urls)} articles')
     
+    # create summary of all articles
     summary = summarizer.multisource_summary(articles, min_cluster_size=min_cluster_size)
 
-    return summary, urls
+    # grab an arbitrary image for article
+    image = next((image for image in images if image is not None), None)
+
+    return summary, urls, image
 
 
 def fetch_headlines(summarizer: Summarizer, rss_feed_urls: list[str], max_articles=50) -> list[str]:
@@ -49,7 +50,7 @@ def news_summary(summarizer: Summarizer, rss_feed_urls: list[str]):
 
     # summarize each topic and yield articles
     for headline in headlines:
-        summary, source_urls = topic_summary(summarizer, headline)
+        summary, source_urls, article_image = topic_summary(summarizer, headline)
 
         # no articles were found
         if not summary:
@@ -62,7 +63,8 @@ def news_summary(summarizer: Summarizer, rss_feed_urls: list[str]):
             title=headline,
             content=summary,
             date=datetime.now(),
-            category=category
+            category=category,
+            image_url=article_image
         )
 
         sources = [Source(url=s_url, article_id=article.id) for s_url in source_urls]

app/scraper.py

@@ -25,7 +25,19 @@ def get_articles(query, max_results=5, min_article_length=100) -> list[tuple[str
     # get article urls
     urls = set([r['url'] for r in search_results])
 
-    # try to retrieve articles (filter inaccessible and short articles)
-    articles = [(article, url) for url in urls if (article := retrieve_article(url)) is not None and len(article) > min_article_length]
+    # try to retrieve articles
+    texts = []
+    urls = []
+    images = []
+    for result in search_results:
+        article_url = result['url']
+        article_image = result['image']
+        article_text = retrieve_article(article_url)
 
-    return articles
+        # filter short and inaccessible articles
+        if article_text and len(article_text) > min_article_length:
+            texts.append(article_text)
+            urls.append(article_url)
+            images.append(article_image)
+
+    return texts, urls, images

app/static/style.css

@@ -1,4 +1,3 @@
-/* Focal Stylesheet */
 /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
@@ -317,6 +316,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -344,6 +346,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
   .h-full {
     height: 100%;
   }
@@ -535,6 +540,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -691,6 +699,9 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -970,6 +981,59 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1011,6 +1075,19 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
     }
   }

app/templates/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Focal</title>
-    <link rel="stylesheet" type="text/css" href="static/style.css">
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
     <style>
         .collapsible-content {
             max-height: 0;
@@ -123,6 +123,9 @@
                 <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-semibold tracking-tight text-gray-900">{{ article.title }}</h2>
+                {% if article.image_url %}
+                <img class="w-full h-48 object-cover rounded-lg mb-4 mt-4" src="{{ article.image_url }}" />
+                {% endif %}
                 <p class="text-base mb-4">
                     {{ article.content }}
                 </p>