Update app.py

app.py

@@ -11,7 +11,7 @@ class PaperManager:
         self.papers = []
         self.total_pages = 1
 
-    def fetch_initial_papers(self):
+    def fetch_papers(self):
         try:
             response = requests.get(f"{API_URL}?limit=50")
             response.raise_for_status()
@@ -19,6 +19,7 @@ class PaperManager:
             # Sort papers by upvotes (descending order)
             self.papers = sorted(data, key=lambda x: x.get('paper', {}).get('upvotes', 0), reverse=True)
             self.total_pages = (len(self.papers) + self.papers_per_page - 1) // self.papers_per_page
+            self.current_page = 1  # Reset to first page after fetching
             return True
         except requests.RequestException as e:
             print(f"Error fetching papers: {e}")
@@ -33,12 +34,17 @@ class PaperManager:
         published_time = datetime.fromisoformat(paper.get('publishedAt', datetime.now(timezone.utc).isoformat()).replace('Z', '+00:00'))
         time_ago = (datetime.now(timezone.utc) - published_time).days
         
-        return f"""<div style='border-bottom: 1px solid #eee; padding: 10px 0;'>
-        <a href='{url}' target='_blank' style='color: #000; text-decoration: none; font-weight: bold;'>{title}</a>
-        <div style='font-size: 0.8em; color: #666; margin-top: 5px;'>
-        {upvotes} upvotes | by {authors} | {time_ago} days ago | {comments} comments
+        return f"""
+        <div class="paper-item">
+            <h3><a href="{url}" target="_blank">{title}</a></h3>
+            <p class="paper-meta">
+                <span class="upvotes">{upvotes} upvotes</span> | 
+                <span class="authors">by {authors}</span> | 
+                <span class="time-ago">{time_ago} days ago</span> | 
+                <span class="comments">{comments} comments</span>
+            </p>
         </div>
-        </div>"""
+        """
 
     def render_papers(self):
         start = (self.current_page - 1) * self.papers_per_page
@@ -46,7 +52,7 @@ class PaperManager:
         current_papers = self.papers[start:end]
         
         if not current_papers:
-            return "<div>No papers available for this page.</div>"
+            return "<div class='no-papers'>No papers available for this page.</div>"
         
         return "".join([self.format_paper(paper) for paper in current_papers])
 
@@ -69,63 +75,98 @@ class PaperManager:
         return self.render_papers(), f"Page {self.current_page} of {self.total_pages}"
 
 css = """
-html, body {
-    height: 100%;
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f0f2f5;
     margin: 0;
     padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f0f0f0;
 }
 .container {
-    font-family: Arial, sans-serif;
     max-width: 800px;
-    width: 100%;
+    margin: 2rem auto;
     background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
 }
-.paper-list { 
-    max-height: 400px; 
-    overflow-y: auto;
-    border: 1px solid #eee;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
+.title {
+    text-align: center;
+    color: #1a202c;
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
 }
 .search-row {
     display: flex;
-    gap: 10px;
-    margin-bottom: 20px;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
 }
-.title {
-    text-align: center;
-    color: #333;
+.paper-list {
+    max-height: 500px;
+    overflow-y: auto;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 1rem;
+}
+.paper-item {
+    border-bottom: 1px solid #e2e8f0;
+    padding: 1rem 0;
+}
+.paper-item:last-child {
+    border-bottom: none;
+}
+.paper-item h3 {
+    margin: 0 0 0.5rem 0;
+}
+.paper-item a {
+    color: #2b6cb0;
+    text-decoration: none;
+    font-weight: 600;
+}
+.paper-item a:hover {
+    text-decoration: underline;
+}
+.paper-meta {
+    font-size: 0.875rem;
+    color: #4a5568;
 }
 .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 10px;
+    margin-top: 1rem;
+}
+button {
+    background-color: #4299e1;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+button:hover {
+    background-color: #3182ce;
+}
+.no-papers {
+    text-align: center;
+    color: #718096;
+    padding: 1rem;
 }
 """
 
 paper_manager = PaperManager()
 
 def initialize_app():
-    if paper_manager.fetch_initial_papers():
+    if paper_manager.fetch_papers():
         return paper_manager.render_papers(), f"Page {paper_manager.current_page} of {paper_manager.total_pages}"
     else:
-        return "<div>Failed to fetch papers. Please try again later.</div>", "Error"
+        return "<div class='no-papers'>Failed to fetch papers. Please try again later.</div>", "Error"
 
 def refresh_papers():
-    paper_manager.current_page = 1
-    if paper_manager.fetch_initial_papers():
+    if paper_manager.fetch_papers():
         return paper_manager.render_papers(), f"Page {paper_manager.current_page} of {paper_manager.total_pages}"
     else:
-        return "<div>Failed to refresh papers. Please try again later.</div>", "Error"
+        return "<div class='no-papers'>Failed to refresh papers. Please try again later.</div>", "Error"
 
 demo = gr.Blocks(css=css)
 
@@ -134,7 +175,7 @@ with demo:
         gr.Markdown("# Daily Papers - HackerNews Style", elem_classes=["title"])
         with gr.Row(elem_classes=["search-row"]):
             search_input = gr.Textbox(label="Search papers", placeholder="Enter search term...")
-            refresh_button = gr.Button("Refresh")
+            refresh_button = gr.Button("Refresh", variant="primary")
         paper_list = gr.HTML(elem_classes=["paper-list"])
         
         with gr.Row(elem_classes=["footer"]):