Update app.py

app.py

@@ -131,15 +131,14 @@ def search_spaces(search_text, category):
     <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);'>Total Spaces: {total_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='max-height: 800px; overflow-y: auto;'>
+    <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;'>
     """
     
     for _, row in spaces.iterrows():
-        # In the search_spaces function, update the card HTML template:
         html_content += f"""
         <div style='padding: 15px; 
                     border: 2px solid var(--color-border-primary); 
@@ -177,11 +176,31 @@ def search_spaces(search_text, category):
         </div>
         """
     
-    html_content += "</div></div>"
+    html_content += "</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;'>
+            <button onclick='window.loadMore()' 
+                    style='padding: 10px 20px;
+                           background-color: #2196F3;
+                           color: white;
+                           border: none;
+                           border-radius: 5px;
+                           cursor: pointer;
+                           font-size: 1em;'>
+                Load More ({total_spaces - (offset + page_size)} remaining)
+            </button>
+        </div>
+        """
+    
+    html_content += "</div>"
     return html_content
 
-# Create the Gradio interface
 def create_app():
+    current_offset = gr.State(value=0)
+    
     with gr.Blocks(
         title="Hugging Face Spaces Explorer",
         theme=gr.themes.Soft(
@@ -213,21 +232,42 @@ def create_app():
             
         # Display area for spaces
         spaces_display = gr.HTML(value=search_spaces("", "All Categories"))
+
+        def load_more(search_text, category, offset):
+            new_offset = offset + 30
+            return search_spaces(search_text, category, new_offset), new_offset
+
+        # JavaScript for handling the Load More button
+        app.load(None, None, None, _js="""
+        function loadMore() {
+            const event = new CustomEvent('load_more');
+            document.dispatchEvent(event);
+        }
+        """)
         
         # Update display when category or search changes
         category_dropdown.change(
-            fn=search_spaces,
-            inputs=[search_input, category_dropdown],
-            outputs=spaces_display
+            fn=lambda x, y, _: (search_spaces(x, y), 0),
+            inputs=[search_input, category_dropdown, current_offset],
+            outputs=[spaces_display, current_offset]
         )
         search_input.change(
-            fn=search_spaces,
-            inputs=[search_input, category_dropdown],
-            outputs=spaces_display
+            fn=lambda x, y, _: (search_spaces(x, y), 0),
+            inputs=[search_input, category_dropdown, current_offset],
+            outputs=[spaces_display, current_offset]
+        )
+        
+        # Load More event handler
+        app.load(
+            fn=load_more,
+            inputs=[search_input, category_dropdown, current_offset],
+            outputs=[spaces_display, current_offset],
+            _js="(x) => document.addEventListener('load_more', () => x())"
         )
     
     return app
 
+
 # Launch the app
 app = create_app()
-app.launch(share=True)
+app.launch('share=True')