Update app.py

app.py

@@ -111,7 +111,8 @@ df['url'] = 'https://huggingface.co/spaces/' + df['id']
 
 # ------------------------------------------------------
 
-def search_spaces(search_text="", category="All Categories", offset=0, page_size=30):
+def search_spaces(search_text="", category="All Categories", offset=0, limit=100):
+    # Filter spaces
     if category == "All Categories":
         spaces_df = df
     else:
@@ -120,22 +121,25 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
     if search_text:
         spaces_df = spaces_df[spaces_df['title'].str.lower().str.contains(search_text.lower())]
     
+    # Sort by likes and get total count
+    spaces_df = spaces_df.sort_values('likes', ascending=False)
     total_spaces = len(spaces_df)
-    spaces = spaces_df.nlargest(total_spaces, 'likes')[['title', 'likes', 'url', 'category']]
+    total_pages = (total_spaces + limit - 1) // limit
+    current_page = (offset // limit) + 1
     
-    # Get category stats
+    # Get the current page of spaces
+    spaces = spaces_df.iloc[offset:offset + limit][['title', 'likes', 'url', 'category']]
     total_likes = spaces_df['likes'].sum()
     
-    # Format the results as HTML with clickable links and stats
+    # Generate HTML content
     html_content = f"""
     <div style='margin-bottom: 20px; padding: 10px; background-color: var(--color-background-primary); 
                 border: 1px solid var(--color-border-primary); border-radius: 5px;'>
         <h3 style='color: var(--color-text-primary);'>Statistics:</h3>
-        <p style='color: var(--color-text-primary);'>Showing {min(offset + page_size, total_spaces)} of {total_spaces} Spaces</p>
+        <p style='color: var(--color-text-primary);'>Page {current_page} of {total_pages}</p>
+        <p style='color: var(--color-text-primary);'>Showing {offset + 1}-{min(offset + limit, total_spaces)} of {total_spaces} Spaces</p>
         <p style='color: var(--color-text-primary);'>Total Likes: {total_likes:,}</p>
     </div>
-    <div style='max-height: 800px; overflow-y: auto;' id='spaces-container'>
-        <div style='display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 10px;'>
     """
     
     # Only show the spaces from offset to offset + page_size
@@ -180,18 +184,15 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
     
     html_content += "</div></div>"
     
-    has_more = offset + page_size < total_spaces
-    return html_content, has_more, total_spaces - (offset + page_size)
+    has_more = offset + limit < total_spaces
+    remaining = total_spaces - (offset + limit) if has_more else 0
+    can_go_back = offset > 0
+    
+    return html_content, has_more, remaining, can_go_back, current_page, total_pages
 
 def create_app():
-    with gr.Blocks(
-        title="Hugging Face Spaces Explorer",
-        theme=gr.themes.Soft(
-            primary_hue="blue",
-            secondary_hue="blue",
-        )
-    ) as app:
-        current_offset = gr.State(value=0)
+    with gr.Blocks(title="Hugging Face Spaces Explorer", theme=gr.themes.Soft()) as app:
+        offset = gr.State(value=0)
         
         gr.Markdown("""
         # 🤗 Hugging Face Spaces Explorer
@@ -202,65 +203,81 @@ def create_app():
         """)
         
         with gr.Row():
-            with gr.Column(scale=1):
-                category_dropdown = gr.Dropdown(
-                    choices=["All Categories"] + sorted(df['category'].unique()),
-                    label="Select Category",
-                    value="All Categories"
-                )
-                search_input = gr.Textbox(
-                    label="Search Spaces",
-                    placeholder="Enter search terms..."
-                )
+            category_dropdown = gr.Dropdown(
+                choices=["All Categories"] + sorted(df['category'].unique()),
+                label="Select Category",
+                value="All Categories"
+            )
+            search_input = gr.Textbox(
+                label="Search Spaces",
+                placeholder="Enter search terms..."
+            )
         
         spaces_display = gr.HTML()
-        load_more_btn = gr.Button("Load More", visible=False)
-        remaining_text = gr.Markdown(visible=False)
         
-        def update_display(search_text, category, offset):
-            content, has_more, remaining = search_spaces(search_text, category, offset)
+        with gr.Row():
+            prev_button = gr.Button("← Previous Page", visible=False)
+            page_info = gr.Markdown("", visible=False)
+            next_button = gr.Button("Next Page →", visible=False)
+        
+        def load_page(search_text, category, current_offset):
+            content, has_more, remaining, can_go_back, current_page, total_pages = search_spaces(
+                search_text, category, current_offset
+            )
             return {
                 spaces_display: content,
-                load_more_btn: gr.update(visible=has_more),  # Changed from gr.Button.update
-                remaining_text: gr.update(                    # Changed from gr.Markdown.update
-                    visible=has_more,
-                    value=f"*{remaining} more spaces available*"
-                )
+                next_button: gr.update(visible=has_more),
+                prev_button: gr.update(visible=can_go_back),
+                page_info: gr.update(
+                    visible=True,
+                    value=f"*Page {current_page} of {total_pages} ({remaining} more spaces available)*"
+                ),
+                offset: current_offset
             }
         
-        def load_more(search_text, category, offset):
-            new_offset = offset + 30
-            return update_display(search_text, category, new_offset) | {'current_offset': new_offset}
+        def next_page(search_text, category, current_offset):
+            return load_page(search_text, category, current_offset + 100)
+        
+        def prev_page(search_text, category, current_offset):
+            new_offset = max(0, current_offset - 100)
+            return load_page(search_text, category, new_offset)
+        
+        def reset_and_search(search_text, category):
+            return load_page(search_text, category, 0)
         
         # Initial load
         app.load(
-            fn=lambda: update_display("", "All Categories", 0),
-            outputs=[spaces_display, load_more_btn, remaining_text]
+            fn=lambda: reset_and_search("", "All Categories"),
+            outputs=[spaces_display, next_button, prev_button, page_info, offset]
         )
         
-        # Update display when category or search changes
+        # Event handlers
         category_dropdown.change(
-            fn=lambda x, y, _: update_display(x, y, 0) | {'current_offset': 0},
-            inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
+            fn=reset_and_search,
+            inputs=[search_input, category_dropdown],
+            outputs=[spaces_display, next_button, prev_button, page_info, offset]
         )
         
         search_input.change(
-            fn=lambda x, y, _: update_display(x, y, 0) | {'current_offset': 0},
-            inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
+            fn=reset_and_search,
+            inputs=[search_input, category_dropdown],
+            outputs=[spaces_display, next_button, prev_button, page_info, offset]
+        )
+        
+        next_button.click(
+            fn=next_page,
+            inputs=[search_input, category_dropdown, offset],
+            outputs=[spaces_display, next_button, prev_button, page_info, offset]
         )
         
-        # Load More button handler
-        load_more_btn.click(
-            fn=load_more,
-            inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
+        prev_button.click(
+            fn=prev_page,
+            inputs=[search_input, category_dropdown, offset],
+            outputs=[spaces_display, next_button, prev_button, page_info, offset]
         )
     
     return app
 
-
 # Launch the app
 app = create_app()
 app.launch(share=True)