Update app.py

app.py

@@ -149,7 +149,7 @@ def create_pagination_html(current_page, total_pages):
     html += "</div>"
     return html
 
-def search_spaces(search_text="", category="All Categories", offset=0, limit=100):
+def search_spaces(search_text="", category="All Categories", page=1, limit=100):
     # Filter spaces
     if category == "All Categories":
         spaces_df = df
@@ -162,8 +162,8 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
     # Sort by likes and get total count
     spaces_df = spaces_df.sort_values('likes', ascending=False)
     total_spaces = len(spaces_df)
-    total_pages = (total_spaces + limit - 1) // limit
-    current_page = (offset // limit) + 1
+    total_pages = max(1, (total_spaces + limit - 1) // limit)
+    offset = (page - 1) * limit
     
     # Get the current page of spaces
     spaces = spaces_df.iloc[offset:offset + limit][['title', 'likes', 'url', 'category']]
@@ -174,19 +174,38 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
     <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 {current_page} of {total_pages}</p>
+        <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);'>Total Likes: {total_likes:,}</p>
     </div>
+    
+    <div style='display: flex; justify-content: center; gap: 10px; margin: 20px 0;'>
     """
-
-    # Add pagination at the top
-    html_content += create_pagination_html(current_page, total_pages)
     
-    # Add grid container
+    # 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(3, 1fr); gap: 15px; padding: 10px;'>
+        <div style='display: grid; 
+                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
+                    gap: 15px; 
+                    padding: 10px;
+                    max-width: 100%;'>
     """
     
     # Add space cards
@@ -199,8 +218,10 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
                     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                     display: flex;
                     flex-direction: column;
-                    height: 100%;'>
-            <h3 style='margin-top: 0; margin-bottom: 10px;'>
+                    height: 100%;
+                    min-width: 0;
+                    word-wrap: break-word;'>
+            <h3 style='margin-top: 0; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis;'>
                 <a href='{row['url']}' target='_blank' 
                    style='color: #2196F3; 
                           text-decoration: none; 
@@ -213,7 +234,8 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
                 <span style='background-color: var(--color-accent-soft); 
                            padding: 2px 8px; 
                            border-radius: 12px;
-                           font-size: 0.9em;'>
+                           font-size: 0.9em;
+                           display: inline-block;'>
                     {row['category']}
                 </span>
             </p>
@@ -225,31 +247,24 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
             </p>
         </div>
         """
-
-    # Add pagination at the bottom
-    html_content += create_pagination_html(current_page, total_pages)
-
-    # Add JavaScript for handling page clicks
+    
+    html_content += "</div></div>"
+    
+    # Add JavaScript for page navigation
     html_content += """
     <script>
-    function handlePageClick(page) {
-        const pageEvent = new CustomEvent('pagination', { detail: { page: page } });
+    function page_change(page) {
+        const pageEvent = new CustomEvent('page_change', { detail: page });
         document.dispatchEvent(pageEvent);
     }
     </script>
     """
-    # Possibly Delete *Check Here*
-    html_content += "</div></div>"
-    
-    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
+    return html_content
 
 def create_app():
     with gr.Blocks(title="Hugging Face Spaces Explorer", theme=gr.themes.Soft()) as app:
-        offset = gr.State(value=0)
+        current_page = gr.State(value=1)
         
         gr.Markdown("""
         # 🤗 Hugging Face Spaces Explorer
@@ -271,93 +286,39 @@ def create_app():
             )
         
         spaces_display = gr.HTML()
-        #____________________________________________________________________________________
-        page_info = gr.Markdown("", visible=False)
-
-        def go_to_page(search_text, category, page_num):
-            new_offset = page_num * 100
-            return load_page(search_text, category, new_offset)
-
-            # Add JavaScript event listener for pagination
-        app.load(js="""
-        function addPaginationListener() {
-            document.addEventListener('pagination', function(e) {
-                const page = e.detail.page;
-                // Call the Python function through Gradio's API
-                document.querySelector('gradio-app').querySelector('#go_to_page_btn').click();
-            });
-        }
-        addPaginationListener();
-        """)
-        
-        # Hidden button for JavaScript to trigger
-        go_to_page_btn = gr.Button(visible=False, elem_id="go_to_page_btn")
-        go_to_page_btn.click(
-            fn=go_to_page,
-            inputs=[search_input, category_dropdown, gr.State(lambda evt: evt.detail.page)],
-            outputs=[spaces_display, page_info, 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,
-                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 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: reset_and_search("", "All Categories"),
-            outputs=[spaces_display, next_button, prev_button, page_info, offset]
-        )
+        def update_spaces(search_text, category, page):
+            return search_spaces(search_text, category, page)
         
         # Event handlers
         category_dropdown.change(
-            fn=reset_and_search,
-            inputs=[search_input, category_dropdown],
-            outputs=[spaces_display, next_button, prev_button, page_info, offset]
+            fn=update_spaces,
+            inputs=[search_input, category_dropdown, gr.State(1)],
+            outputs=spaces_display
         )
         
         search_input.change(
-            fn=reset_and_search,
-            inputs=[search_input, category_dropdown],
-            outputs=[spaces_display, next_button, prev_button, page_info, offset]
+            fn=update_spaces,
+            inputs=[search_input, category_dropdown, gr.State(1)],
+            outputs=spaces_display
         )
         
-        next_button.click(
-            fn=next_page,
-            inputs=[search_input, category_dropdown, offset],
-            outputs=[spaces_display, next_button, prev_button, page_info, 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();
+        """)
         
-        prev_button.click(
-            fn=prev_page,
-            inputs=[search_input, category_dropdown, offset],
-            outputs=[spaces_display, next_button, prev_button, page_info, offset]
+        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
         )
     
     return app