Update app.py

app.py

@@ -16,10 +16,9 @@ class PaperManager:
             response = requests.get(f"{API_URL}?limit=50")
             response.raise_for_status()
             data = response.json()
-            # 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
+            self.current_page = 1
             return True
         except requests.RequestException as e:
             print(f"Error fetching papers: {e}")
@@ -38,10 +37,10 @@ class PaperManager:
         <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>
+                <span class="upvotes">{upvotes} ▲</span> 
+                <span class="authors">{authors}</span>
+                <span class="time-ago">{time_ago}d</span>
+                <span class="comments">{comments}💬</span>
             </p>
         </div>
         """
@@ -76,50 +75,49 @@ class PaperManager:
 
 css = """
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     background-color: #f0f2f5;
     margin: 0;
     padding: 0;
 }
 .container {
-    max-width: 800px;
-    margin: 2rem auto;
+    max-width: 100%;
+    margin: 0 auto;
     background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 2rem;
+    padding: 1rem;
 }
 .title {
     text-align: center;
     color: #1a202c;
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
 }
 .search-row {
     display: flex;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
     align-items: flex-end;
 }
 .search-row > div:first-child {
     flex-grow: 1;
 }
 .paper-list {
-    max-height: 500px;
+    max-height: 70vh;
     overflow-y: auto;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
-    padding: 1rem;
+    padding: 0.5rem;
 }
 .paper-item {
     border-bottom: 1px solid #e2e8f0;
-    padding: 1rem 0;
+    padding: 0.5rem 0;
 }
 .paper-item:last-child {
     border-bottom: none;
 }
 .paper-item h3 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 0.25rem 0;
+    font-size: 1rem;
 }
 .paper-item a {
     color: #2b6cb0;
@@ -130,20 +128,23 @@ body {
     text-decoration: underline;
 }
 .paper-meta {
-    font-size: 0.875rem;
+    font-size: 0.75rem;
     color: #4a5568;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 button, .button {
     background-color: #4299e1;
     color: white;
     border: none;
-    padding: 0.5rem 1rem;
+    padding: 0.25rem 0.5rem;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s;
@@ -167,6 +168,28 @@ button:hover, .button:hover {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
+
+@media (min-width: 640px) {
+    .container {
+        max-width: 640px;
+        padding: 1.5rem;
+    }
+    .title {
+        font-size: 1.75rem;
+    }
+    .paper-item h3 {
+        font-size: 1.125rem;
+    }
+    .paper-meta {
+        font-size: 0.875rem;
+    }
+}
+
+@media (min-width: 768px) {
+    .container {
+        max-width: 768px;
+    }
+}
 """
 
 paper_manager = PaperManager()
@@ -187,16 +210,16 @@ demo = gr.Blocks(css=css)
 
 with demo:
     with gr.Column(elem_classes=["container"]):
-        gr.Markdown("# Daily Papers - HackerNews Style", elem_classes=["title"])
+        gr.Markdown("# Daily Papers", 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", variant="primary")
+            search_input = gr.Textbox(label="", placeholder="Search papers...")
+            refresh_button = gr.Button("↻", variant="primary")
         paper_list = gr.HTML(elem_classes=["paper-list"])
         
         with gr.Row(elem_classes=["footer"]):
-            prev_button = gr.Button("Previous Page")
+            prev_button = gr.Button("← Prev")
             page_info = gr.Markdown()
-            next_button = gr.Button("Next Page")
+            next_button = gr.Button("Next →")
     
     demo.load(initialize_app, outputs=[paper_list, page_info])
     search_input.change(paper_manager.search_papers, inputs=[search_input], outputs=[paper_list])