Update app.py

app.py

@@ -5,7 +5,7 @@ from datetime import datetime, timezone
 API_URL = "https://huggingface.co/api/daily_papers"
 
 class PaperManager:
-    def __init__(self, papers_per_page=10):
+    def __init__(self, papers_per_page=30):
         self.papers_per_page = papers_per_page
         self.current_page = 1
         self.papers = []
@@ -13,10 +13,10 @@ class PaperManager:
 
     def fetch_papers(self):
         try:
-            response = requests.get(f"{API_URL}?limit=50")
+            response = requests.get(f"{API_URL}?limit=100")
             response.raise_for_status()
             data = response.json()
-            
+
             # Sort papers primarily by 'publishedAt' descending, then by 'upvotes' descending
             self.papers = sorted(
                 data,
@@ -28,7 +28,7 @@ class PaperManager:
                 ),
                 reverse=True  # Ensures descending order
             )
-            
+
             self.total_pages = (len(self.papers) + self.papers_per_page - 1) // self.papers_per_page
             self.current_page = 1
             return True
@@ -39,7 +39,7 @@ class PaperManager:
             print(f"Unexpected error: {e}")
             return False
 
-    def format_paper(self, paper):
+    def format_paper(self, paper, rank):
         title = paper.get('title', 'No title')
         paper_id = paper.get('paper', {}).get('id', '')
         url = f"https://huggingface.co/papers/{paper_id}"
@@ -50,224 +50,196 @@ class PaperManager:
             paper.get('publishedAt', datetime.now(timezone.utc).isoformat()).replace('Z', '+00:00')
         )
         time_ago_days = (datetime.now(timezone.utc) - published_time).days
+        time_ago = f"{time_ago_days} days ago" if time_ago_days > 0 else "today"
 
+        # Return HTML similar to Hacker News
         return f"""
-        <div class="paper-item">
-            <h3><a href="{url}" target="_blank">{title}</a></h3>
-            <p class="paper-meta">
-                <span class="upvotes">{upvotes} ▲</span> 
-                <span class="comments">{comments}💬</span>
-                <span class="authors">{authors}</span>
-                <span class="time-ago">{time_ago_days}d</span>
-            </p>
-        </div>
+        <tr class="athing">
+            <td align="right" valign="top" class="title"><span class="rank">{rank}.</span></td>
+            <td valign="top" class="votelinks">
+                <center><a href="#"><div class="votearrow"></div></a></center>
+            </td>
+            <td class="title">
+                <a href="{url}" class="storylink" target="_blank">{title}</a>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2"></td>
+            <td class="subtext">
+                <span class="score">{upvotes} points</span> by {authors} | {time_ago} | <a href="#">{comments} comments</a>
+            </td>
+        </tr>
+        <tr style="height:5px"></tr>
         """
 
     def render_papers(self):
         start = (self.current_page - 1) * self.papers_per_page
         end = start + self.papers_per_page
         current_papers = self.papers[start:end]
-        
+
         if not current_papers:
             return "<div class='no-papers'>No papers available for this page.</div>"
-        
-        return "".join([self.format_paper(paper) for paper in current_papers])
+
+        papers_html = "".join([self.format_paper(paper, idx + start + 1) for idx, paper in enumerate(current_papers)])
+        return f"""
+        <table border="0" cellpadding="0" cellspacing="0" class="itemlist">
+            {papers_html}
+        </table>
+        """
 
     def next_page(self):
         if self.current_page < self.total_pages:
             self.current_page += 1
-        return self.render_papers(), f"Page {self.current_page} of {self.total_pages}"
+            return self.render_papers()
+        else:
+            return self.render_papers() + "<center class='more'><span>No more papers.</span></center>"
 
-    def prev_page(self):
-        if self.current_page > 1:
-            self.current_page -= 1
-        return self.render_papers(), f"Page {self.current_page} of {self.total_pages}"
+paper_manager = PaperManager()
+
+def initialize_app():
+    if paper_manager.fetch_papers():
+        return paper_manager.render_papers()
+    else:
+        return "<div class='no-papers'>Failed to fetch papers. Please try again later.</div>"
 
 css = """
-/* Your existing CSS */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    background-color: #f0f2f5;
+    background-color: white;
+    font-family: Verdana, Geneva, sans-serif;
     margin: 0;
     padding: 0;
 }
-.container {
-    max-width: 100%;
-    margin: 0 auto;
-    background-color: white;
-    padding: 1rem;
-}
-.title {
-    text-align: center;
-    color: #1a202c;
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
+
+a {
+    color: #0000ff;
+    text-decoration: none;
 }
-.paper-list {
-    max-height: 60vh;
-    overflow-y: auto;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 0.5rem;
+
+a:visited {
+    color: #551A8B;
 }
-.paper-item {
-    border-bottom: 1px solid #e2e8f0;
-    padding: 0.5rem 0;
+
+.container {
+    width: 85%;
+    margin: auto;
 }
-.paper-item:last-child {
-    border-bottom: none;
+
+table {
+    width: 100%;
 }
-.paper-item h3 {
-    margin: 0 0 0.25rem 0;
-    font-size: 1rem;
+
+.title {
+    background-color: #ff6600;
+    padding: 2px 10px;
 }
-.paper-item a {
-    color: #2b6cb0;
-    text-decoration: none;
-    font-weight: 600;
+
+.title a {
+    color: black;
+    font-weight: bold;
+    font-size: 14pt;
 }
-.paper-item a:hover {
-    text-decoration: underline;
+
+.itemlist .athing {
+    background-color: #f6f6ef;
 }
-.paper-meta {
-    font-size: 0.75rem;
-    color: #4a5568;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+
+.rank {
+    font-size: 14pt;
+    color: #828282;
+    padding-right: 5px;
 }
-.footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 0.5rem;
-    position: relative;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+
+.votelinks {
+    width: 10px;
 }
 
-/* Target Gradio button elements more specifically */
-#component-5, #component-7, #component-9 {
-    background-color: #3498db !important;  /* Mobile-friendly blue */
-    color: white !important;
-    border: none !important;
-    padding: 0.5rem 1rem !important;
-    border-radius: 4px !important;
-    cursor: pointer !important;
-    transition: background-color 0.3s !important;
-    font-size: 0.875rem !important;
-    line-height: 1.25rem !important;
-    width: auto !important;
-    max-width: 100% !important;
+.votearrow {
+    width: 0; 
+    height: 0; 
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 10px solid #828282;
+    margin: auto;
 }
 
-#component-5:hover, #component-7:hover, #component-9:hover {
-    background-color: #2980b9 !important;  /* Darker blue on hover */
+.storylink {
+    font-size: 10pt;
 }
 
-/* Style for the refresh button */
-#component-11 {
-    background-color: #2ecc71 !important;  /* More visible green */
-    color: white !important;
-    border: none !important;
-    padding: 0.5rem !important;
-    border-radius: 4px !important;
-    cursor: pointer !important;
-    transition: background-color 0.3s !important;
-    font-size: 1rem !important;
-    width: auto !important;
-    max-width: 100% !important;
-    height: auto !important;
-    line-height: 1 !important;
+.subtext {
+    font-size: 8pt;
+    color: #828282;
+    padding-left: 40px;
 }
 
-#component-11:hover {
-    background-color: #27ae60 !important;  /* Darker green on hover */
+.subtext a {
+    color: #828282;
+    text-decoration: none;
 }
 
-/* Make sure the page info doesn't break the layout */
-#component-8 {
-    flex: 1;
-    text-align: center;
-    min-width: 100px;
+.more {
+    padding: 10px;
 }
 
 .no-papers {
     text-align: center;
-    color: #718096;
+    color: #828282;
     padding: 1rem;
+    font-size: 14pt;
 }
 
-/* Responsive adjustments */
 @media (max-width: 640px) {
-    #component-5, #component-7, #component-9, #component-11 {
-        font-size: 0.75rem !important;
-        padding: 0.4rem 0.8rem !important;
-    }
-    
-    .footer {
-        justify-content: center;
+    .title a {
+        font-size: 12pt;
     }
-}
 
-@media (min-width: 640px) {
-    .container {
-        max-width: 640px;
-        padding: 1.5rem;
-    }
-    .title {
-        font-size: 1.75rem;
-    }
-    .paper-item h3 {
-        font-size: 1.125rem;
+    .storylink {
+        font-size: 9pt;
     }
-    .paper-meta {
-        font-size: 0.875rem;
-    }
-}
 
-@media (min-width: 768px) {
-    .container {
-        max-width: 768px;
-    }
-    .footer {
-        position: sticky;
-        bottom: 0;
-        background-color: white;
+    .subtext {
+        font-size: 7pt;
     }
 }
 """
 
-paper_manager = PaperManager()
-
-def initialize_app():
-    if paper_manager.fetch_papers():
-        return paper_manager.render_papers(), f"Page {paper_manager.current_page} of {paper_manager.total_pages}"
-    else:
-        return "<div class='no-papers'>Failed to fetch papers. Please try again later.</div>", "Error"
-
-def refresh_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 class='no-papers'>Failed to refresh papers. Please try again later.</div>", "Error"
-
 demo = gr.Blocks(css=css)
 
 with demo:
     with gr.Column(elem_classes=["container"]):
-        gr.Markdown("# Daily Papers - Hacker News Style", elem_classes=["title"])
-        refresh_button = gr.Button("↻ Refresh", variant="primary", elem_classes=["refresh-btn"])
-        with gr.Row(elem_classes=["footer"]):
-            prev_button = gr.Button("← Prev")
-            page_info = gr.Markdown(elem_classes=["page-info"])
-            next_button = gr.Button("Next →")
-        
-        paper_list = gr.HTML(elem_classes=["paper-list"])
-
-    demo.load(initialize_app, outputs=[paper_list, page_info])
-    refresh_button.click(refresh_papers, outputs=[paper_list, page_info])
-    prev_button.click(paper_manager.prev_page, outputs=[paper_list, page_info])
-    next_button.click(paper_manager.next_page, outputs=[paper_list, page_info])
+        # Header
+        gr.HTML("""
+        <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ff6600">
+            <tr>
+                <td style="padding: 8px;">
+                    <span class="pagetop">
+                        <b class="hnname"><a href="#" style="color: black; text-decoration: none;">Daily Papers</a></b>
+                    </span>
+                </td>
+            </tr>
+        </table>
+        """)
+        # Paper list
+        paper_list = gr.HTML()
+        # Footer
+        more_button = gr.HTML("""
+        <center class='more'>
+            <a href="#" id="more-button">More</a>
+        </center>
+        """)
+
+    demo.load(initialize_app, outputs=[paper_list])
+
+    # JavaScript to handle the "More" link click
+    demo.add_script("""
+    document.getElementById('more-button').addEventListener('click', function(e) {
+        e.preventDefault();
+        gradioApp().querySelector('#component-2 button').click();
+    });
+    """)
+
+    # Hidden button to trigger next page
+    hidden_next_button = gr.Button(visible=False)
+    hidden_next_button.click(paper_manager.next_page, outputs=[paper_list])
 
 demo.launch()