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=30):
+    # Filter spaces
     if category == "All Categories":
         spaces_df = df
     else:
@@ -120,27 +121,32 @@ 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']]
     
-    # 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);'>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'>
+    """
+    
+    # Add grid container
+    html_content += """
+    <div style='max-height: 800px; overflow-y: auto;'>
         <div style='display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 10px;'>
     """
     
-    # Only show the spaces from offset to offset + page_size
-    visible_spaces = spaces.iloc[offset:offset + page_size]
-    for _, row in visible_spaces.iterrows():
+    # Add space cards
+    for _, row in spaces.iterrows():
         html_content += f"""
         <div style='padding: 15px; 
                     border: 2px solid var(--color-border-primary); 
@@ -149,8 +155,7 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
                     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                     display: flex;
                     flex-direction: column;
-                    height: 100%;
-                    position: relative;'>
+                    height: 100%;'>
             <h3 style='margin-top: 0; margin-bottom: 10px;'>
                 <a href='{row['url']}' target='_blank' 
                    style='color: #2196F3; 
@@ -159,8 +164,7 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
             </h3>
             <div style='height: 2px; 
                         background: var(--color-border-primary);
-                        margin: 10px 0;
-                        width: 100%;'></div>
+                        margin: 10px 0;'></div>
             <p style='color: var(--color-text-primary); margin: 8px 0;'>
                 <span style='background-color: var(--color-accent-soft); 
                            padding: 2px 8px; 
@@ -180,18 +184,14 @@ 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
+    
+    return html_content, has_more, remaining
 
 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 +202,66 @@ 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)
+        load_more_button = gr.Button("Load More", visible=False)
+        remaining_count = gr.Markdown(visible=False)
         
-        def update_display(search_text, category, offset):
-            content, has_more, remaining = search_spaces(search_text, category, offset)
+        def load_more(search_text, category, current_offset):
+            new_offset = current_offset + 30
+            content, has_more, remaining = search_spaces(search_text, category, new_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*"
-                )
+                load_more_button: gr.update(visible=has_more),
+                remaining_count: gr.update(visible=has_more, value=f"*{remaining} more spaces available*"),
+                offset: new_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 reset_and_search(search_text, category):
+            content, has_more, remaining = search_spaces(search_text, category, 0)
+            return {
+                spaces_display: content,
+                load_more_button: gr.update(visible=has_more),
+                remaining_count: gr.update(visible=has_more, value=f"*{remaining} more spaces available*"),
+                offset: 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, load_more_button, remaining_count, 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, load_more_button, remaining_count, 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, load_more_button, remaining_count, offset]
         )
         
-        # Load More button handler
-        load_more_btn.click(
+        load_more_button.click(
             fn=load_more,
-            inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, load_more_btn, remaining_text, current_offset]
+            inputs=[search_input, category_dropdown, offset],
+            outputs=[spaces_display, load_more_button, remaining_count, offset]
         )
     
     return app
 
-
 # Launch the app
 app = create_app()
 app.launch(share=True)