Update app.py

app.py

@@ -111,6 +111,44 @@ 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", offset=0, limit=100):
     # Filter spaces
     if category == "All Categories":
@@ -141,6 +179,9 @@ def search_spaces(search_text="", category="All Categories", offset=0, limit=100
         <p style='color: var(--color-text-primary);'>Total Likes: {total_likes:,}</p>
     </div>
     """
+
+    # Add pagination at the top
+    html_content += create_pagination_html(current_page, total_pages)
     
     # Add grid container
     html_content += """
@@ -184,7 +225,20 @@ 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 += """
+    <script>
+    function handlePageClick(page) {
+        const pageEvent = new CustomEvent('pagination', { detail: { page: page } });
+        document.dispatchEvent(pageEvent);
+    }
+    </script>
+    """
+    # Possibly Delete *Check Here*
     html_content += "</div></div>"
     
     has_more = offset + limit < total_spaces
@@ -217,6 +271,33 @@ 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)