Update app.py

app.py

@@ -111,46 +111,7 @@ df['url'] = 'https://huggingface.co/spaces/' + df['id']
 
 # ------------------------------------------------------
 
-def create_pagination_html(current_page, total_pages):
-    """Create HTML for pagination links"""
-    html = "<div style='text-align: center; margin: 20px 0;'>"
-    
-    # Calculate which page numbers to show
-    if total_pages <= 7:
-        pages_to_show = range(1, total_pages + 1)
-    else:
-        if current_page <= 4:
-            pages_to_show = list(range(1, 6)) + ['...', total_pages]
-        elif current_page >= total_pages - 3:
-            pages_to_show = [1, '...'] + list(range(total_pages - 4, total_pages + 1))
-        else:
-            pages_to_show = [1, '...'] + list(range(current_page - 1, current_page + 2)) + ['...', total_pages]
-    
-    # Generate the HTML for page links
-    for page in pages_to_show:
-        if page == '...':
-            html += f"<span style='margin: 0 5px;'>...</span>"
-        else:
-            if page == current_page:
-                html += f"""
-                <span style='margin: 0 5px; padding: 5px 10px; 
-                           background-color: var(--color-accent-soft); 
-                           border-radius: 5px; font-weight: bold;'>{page}</span>
-                """
-            else:
-                html += f"""
-                <button onclick='handlePageClick({page-1})' 
-                        style='margin: 0 5px; padding: 5px 10px; 
-                               border: 1px solid var(--color-border-primary);
-                               border-radius: 5px; cursor: pointer;
-                               background: none;'>{page}</button>
-                """
-    
-    html += "</div>"
-    return html
-
-def search_spaces(search_text="", category="All Categories", page=1, limit=100):
-    # Filter spaces
+def search_spaces(search_text="", category="All Categories", offset=0, page_size=30):
     if category == "All Categories":
         spaces_df = df
     else:
@@ -159,57 +120,27 @@ def search_spaces(search_text="", category="All Categories", page=1, limit=100):
     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)
-    total_pages = max(1, (total_spaces + limit - 1) // limit)
-    offset = (page - 1) * limit
+    spaces = spaces_df.nlargest(total_spaces, 'likes')[['title', 'likes', 'url', 'category']]
     
-    # Get the current page of spaces
-    spaces = spaces_df.iloc[offset:offset + limit][['title', 'likes', 'url', 'category']]
+    # Get category stats
     total_likes = spaces_df['likes'].sum()
     
-    # Generate HTML content
+    # Format the results as HTML with clickable links and stats
     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);'>Page {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);'>Showing {min(offset + page_size, total_spaces)} of {total_spaces} Spaces</p>
         <p style='color: var(--color-text-primary);'>Total Likes: {total_likes:,}</p>
     </div>
-    
-    <div style='display: flex; justify-content: center; gap: 10px; margin: 20px 0;'>
+    <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;'>
     """
     
-    # Add pagination buttons
-    if page > 1:
-        html_content += f"<button onclick='page_change({page-1})' class='page-btn'>Previous</button>"
-    
-    # Add numeric page buttons
-    for p in range(max(1, page-2), min(total_pages+1, page+3)):
-        if p == page:
-            html_content += f"<button onclick='page_change({p})' class='page-btn active'>{p}</button>"
-        else:
-            html_content += f"<button onclick='page_change({p})' class='page-btn'>{p}</button>"
-    
-    if page < total_pages:
-        html_content += f"<button onclick='page_change({page+1})' class='page-btn'>Next</button>"
-    
-    html_content += "</div>"
-    
-    # Add grid container with responsive design
-    html_content += """
-    <div style='max-height: 800px; overflow-y: auto;'>
-        <div style='display: grid; 
-                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
-                    gap: 15px; 
-                    padding: 10px;
-                    max-width: 100%;'>
-    """
-    
-    # Add space cards
-    for _, row in spaces.iterrows():
+    # Only show the spaces from offset to 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); 
@@ -219,9 +150,8 @@ def search_spaces(search_text="", category="All Categories", page=1, limit=100):
                     display: flex;
                     flex-direction: column;
                     height: 100%;
-                    min-width: 0;
-                    word-wrap: break-word;'>
-            <h3 style='margin-top: 0; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis;'>
+                    position: relative;'>
+            <h3 style='margin-top: 0; margin-bottom: 10px;'>
                 <a href='{row['url']}' target='_blank' 
                    style='color: #2196F3; 
                           text-decoration: none; 
@@ -229,13 +159,13 @@ def search_spaces(search_text="", category="All Categories", page=1, limit=100):
             </h3>
             <div style='height: 2px; 
                         background: var(--color-border-primary);
-                        margin: 10px 0;'></div>
+                        margin: 10px 0;
+                        width: 100%;'></div>
             <p style='color: var(--color-text-primary); margin: 8px 0;'>
                 <span style='background-color: var(--color-accent-soft); 
                            padding: 2px 8px; 
                            border-radius: 12px;
-                           font-size: 0.9em;
-                           display: inline-block;'>
+                           font-size: 0.9em;'>
                     {row['category']}
                 </span>
             </p>
@@ -250,21 +180,18 @@ def search_spaces(search_text="", category="All Categories", page=1, limit=100):
     
     html_content += "</div></div>"
     
-    # Add JavaScript for page navigation
-    html_content += """
-    <script>
-    function page_change(page) {
-        const pageEvent = new CustomEvent('page_change', { detail: page });
-        document.dispatchEvent(pageEvent);
-    }
-    </script>
-    """
-    
-    return html_content
+    has_more = offset + page_size < total_spaces
+    return html_content, has_more, total_spaces - (offset + page_size)
 
 def create_app():
-    with gr.Blocks(title="Hugging Face Spaces Explorer", theme=gr.themes.Soft()) as app:
-        current_page = gr.State(value=1)
+    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)
         
         gr.Markdown("""
         # 🤗 Hugging Face Spaces Explorer
@@ -275,54 +202,65 @@ def create_app():
         """)
         
         with gr.Row():
-            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..."
-            )
+            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..."
+                )
         
         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.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*"
+                )
+            }
         
-        def update_spaces(search_text, category, page):
-            return search_spaces(search_text, category, page)
+        def load_more(search_text, category, offset):
+            new_offset = offset + 30
+            return update_display(search_text, category, new_offset) | {'current_offset': new_offset}
         
-        # Event handlers
+        # 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=update_spaces,
-            inputs=[search_input, category_dropdown, gr.State(1)],
-            outputs=spaces_display
+            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]
         )
         
         search_input.change(
-            fn=update_spaces,
-            inputs=[search_input, category_dropdown, gr.State(1)],
-            outputs=spaces_display
+            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]
         )
         
-        # Add page change handler
-        app.load(js="""
-        function setupPageChangeListener() {
-            document.addEventListener('page_change', function(e) {
-                const page = e.detail;
-                gradioApp().querySelector('#update_page').click();
-            });
-        }
-        setupPageChangeListener();
-        """)
-        
-        update_page = gr.Button(visible=False, elem_id="update_page")
-        update_page.click(
-            fn=update_spaces,
-            inputs=[search_input, category_dropdown, current_page],
-            outputs=spaces_display
+        # 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]
         )
     
     return app
 
+
 # Launch the app
 app = create_app()
 app.launch(share=True)