Update app.py

app.py

@@ -111,7 +111,7 @@ df['url'] = 'https://huggingface.co/spaces/' + df['id']
 
 # ------------------------------------------------------
 
-def search_spaces(search_text="", category="All Categories", offset=0, page_size=100):
+def search_spaces(search_text="", category="All Categories", offset=0, page_size=30):
     if category == "All Categories":
         spaces_df = df
     else:
@@ -121,7 +121,7 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
         spaces_df = spaces_df[spaces_df['title'].str.lower().str.contains(search_text.lower())]
     
     total_spaces = len(spaces_df)
-    spaces = spaces_df.nlargest(offset + page_size, 'likes')[['title', 'likes', 'url', 'category']]
+    spaces = spaces_df.nlargest(total_spaces, 'likes')[['title', 'likes', 'url', 'category']]
     
     # Get category stats
     total_likes = spaces_df['likes'].sum()
@@ -139,7 +139,8 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
     """
     
     # Only show the spaces from offset to offset + page_size
-    for _, row in list(spaces.iterrows())[offset:offset + page_size]:
+    visible_spaces = spaces.iloc[offset:offset + page_size]
+    for _, row in visible_spaces.iterrows():
         html_content += f"""
         <div style='padding: 15px; 
                     border: 2px solid var(--color-border-primary); 
@@ -177,24 +178,12 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
         </div>
         """
     
-    html_content += "</div>"
+    html_content += "</div></div>"
     
-    # Add Load More button if there are more spaces
-    if offset + page_size < total_spaces:
-        html_content += f"""
-        <div style='text-align: center; padding: 20px;'>
-            <p style='color: var(--color-text-primary);'>
-                {total_spaces - (offset + page_size)} more spaces available
-            </p>
-        </div>
-        """
-    
-    html_content += "</div>"
-    return html_content
+    has_more = offset + page_size < total_spaces
+    return html_content, has_more, total_spaces - (offset + page_size)
 
 def create_app():
-    current_offset = gr.State(value=0)
-    
     with gr.Blocks(
         title="Hugging Face Spaces Explorer",
         theme=gr.themes.Soft(
@@ -202,6 +191,8 @@ def create_app():
             secondary_hue="blue",
         )
     ) as app:
+        current_offset = gr.State(value=0)
+        
         gr.Markdown("""
         # 🤗 Hugging Face Spaces Explorer
         Explore and discover popular Hugging Face Spaces by category. 
@@ -221,31 +212,50 @@ def create_app():
                     label="Search Spaces",
                     placeholder="Enter search terms..."
                 )
-            
-        spaces_display = gr.HTML(value=search_spaces("", "All Categories"))
+        
+        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)
+            return {
+                spaces_display: content,
+                load_more_btn: gr.Button.update(visible=has_more),
+                remaining_text: gr.Markdown.update(
+                    visible=has_more,
+                    value=f"*{remaining} more spaces available*"
+                )
+            }
         
         def load_more(search_text, category, offset):
             new_offset = offset + 30
-            return search_spaces(search_text, category, new_offset), new_offset
+            return update_display(search_text, category, new_offset) | {'current_offset': new_offset}
+        
+        # Initial load
+        app.load(
+            fn=lambda: update_display("", "All Categories", 0),
+            outputs=[spaces_display, load_more_btn, remaining_text]
+        )
         
         # Update display when category or search changes
         category_dropdown.change(
-            fn=lambda x, y, _: (search_spaces(x, y), 0),
+            fn=lambda x, y, _: update_display(x, y, 0) | {'current_offset': 0},
             inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, current_offset]
+            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
         )
+        
         search_input.change(
-            fn=lambda x, y, _: (search_spaces(x, y), 0),
+            fn=lambda x, y, _: update_display(x, y, 0) | {'current_offset': 0},
             inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, current_offset]
+            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
         )
         
         # Load More button handler
         load_more_btn.click(
             fn=load_more,
             inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, current_offset]
+            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
         )
     
     return app