app.py

import gradio as gr
import pandas as pd
from huggingface_hub import HfApi
from collections import defaultdict

# ------------------------------------------------------
# Get spaces with more details
api = HfApi()
spaces = api.list_spaces(limit=60000)  # Limiting to 60000 for now

# Create a DataFrame
data = []
for space in spaces:
    data.append({
        'id': space.id,
        'title': space.id.split('/')[-1],
        'author': space.author if space.author else space.id.split('/')[0],
        'likes': space.likes,
        'tags': space.tags if hasattr(space, 'tags') else [],
    })

df = pd.DataFrame(data)
print("Total spaces collected:", len(df))
print("\nSample of the data:")
print(df.head())

# ------------------------------------------------------

# Define categories and their keywords
categories = {
    'Text-to-Speech': ['tts', 'speech', 'voice', 'audio', 'kokoro'],
    'Transcription': ['transcribe', 'transcription'],
    'Agents': ['agent', 'agents', 'smol', 'multi-step', 'autobot', 'autoGPT' 'agentic'],
    'Image Gen/Editing': ['stable-diffusion', 'diffusion', 'flux', 'dalle', 'CLIP', 
                         'comic', 'gan', 'sdxl', 'pic', 'img', 'stable', 'midjourney', 
                         'diffusion', 'image', 'ControlNet', 'Control Net', 'dreambooth', 'blip', 'LoRA', 'img2img', 'style', 'art'],
    'Video': ['video', 'animation', 'motion', 'sora'],
    'Face/Portrait': ['face', 'portrait', 'gaze', 'facial'],
    'Chat/LLM': ['chat', 'llm', 'gpt', 'llama', 'text', 'language'],
    '3D': ['3d', 'mesh', 'point-cloud', 'depth'],
    'Audio': ['audio', 'tts', 'music', 'whisper', 'sound', 'voice'],
    'Vision': ['vision', 'detection', 'recognition', 'classifier'],
    'CLIP': ['image-to-text', 'describe-image'],
    'Games': ['game', 'games', 'play', 'playground'],
    'Finance': ['finance', 'stock', 'money', 'currency', 'bank', 'market'],
    'SAM': ['sam', 'segmentation', 'mask'],
    'Science': ['science', 'physics', 'chemistry', 'biology', 'math', 'astronomy', 'geology', 'meteorology', 'engineering', 'medicine', 'health', 'nutrition', 'environment', 'ecology', 'geography', 'geology', 'geophysics'],
    'Education': ['education', 'school', 'university', 'college', 'teaching', 'learning', 'study', 'research'],
    'Graph': ['graph', 'network', 'node', 'edge', 'path', 'tree', 'cycle', 'flow', 'matching', 'coloring', 'swarm'],
    'Research': ['research', 'study', 'experiment', 'paper', 'discovery', 'innovation', 'exploration', 'analysis'],
    'Document Analyis': ['pdf', 'RAG', 'idefecs'],
    'WebGPU': ['localModel', 'webGPU'],
    'Point Tracking': ['CoTracker', 'tapir', 'tapnet', 'point', 'track'],
    'Games': ['game', 'Unity', 'UE5', 'Unreal'],
    'Leaderboard': ['arena', 'leaderboard', 'timeline'],
    'Other': []  # Default category
}

def categorize_space(title, tags):
    title_lower = title.lower()
    # Convert tags to lowercase if tags exist
    tags_lower = [t.lower() for t in tags] if tags else []
    
    for category, keywords in categories.items():
        # Check both title and tags for keywords
        if any(keyword in title_lower for keyword in keywords) or \
           any(keyword in tag for keyword in keywords for tag in tags_lower):
            return category
    return 'Other'

# Add category to DataFrame
df['category'] = df.apply(lambda x: categorize_space(x['title'], x['tags']), axis=1)

# Show category distribution
category_counts = df['category'].value_counts()
print("\nCategory Distribution:")
print(category_counts)

# Show sample spaces from each category
print("\nSample spaces from each category:")
for category in categories.keys():
    print(f"\n{category}:")
    sample = df[df['category'] == category].head(3)
    print(sample[['title', 'likes']].to_string())
    
# ------------------------------------------------------
# Add total likes per category
category_likes = df.groupby('category')['likes'].sum().sort_values(ascending=False)
print("Total likes per category:")
print(category_likes)

print("\nTop 10 spaces in each category (sorted by likes):")
for category in categories.keys():
    print(f"\n=== {category} ===")
    top_10 = df[df['category'] == category].nlargest(10, 'likes')[['title', 'likes']]
    # Format output with padding for better readability
    print(top_10.to_string(index=False))

# ------------------------------------------------------

# Add space URLs
df['url'] = 'https://huggingface.co/spaces/' + df['id']

# Show the top 10 spaces from each category with their links
# print("Top 10 spaces in each category with links:")
# for category in categories.keys():
    # print(f"\n=== {category} ===")
    # top_10 = df[df['category'] == category].nlargest(10, 'likes')[['title', 'likes', 'url']]
    # Format output with padding for better readability
    # print(top_5.to_string(index=False))

# ------------------------------------------------------

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
    if category == "All Categories":
        spaces_df = df
    else:
        spaces_df = df[df['category'] == category]
    
    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
    
    # Get the current page of spaces
    spaces = spaces_df.iloc[offset:offset + limit][['title', 'likes', 'url', 'category']]
    total_likes = spaces_df['likes'].sum()
    
    # 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);'>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 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():
        html_content += f"""
        <div style='padding: 15px; 
                    border: 2px solid var(--color-border-primary); 
                    border-radius: 5px; 
                    background-color: var(--color-background-primary);
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    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;'>
                <a href='{row['url']}' target='_blank' 
                   style='color: #2196F3; 
                          text-decoration: none; 
                          font-weight: bold;'>{row['title']}</a>
            </h3>
            <div style='height: 2px; 
                        background: var(--color-border-primary);
                        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; 
                           border-radius: 12px;
                           font-size: 0.9em;
                           display: inline-block;'>
                    {row['category']}
                </span>
            </p>
            <p style='color: var(--color-text-primary); 
                      margin-top: auto; 
                      padding-top: 10px;
                      border-top: 1px solid var(--color-border-primary);'>
                ❤️ {row['likes']:,} likes
            </p>
        </div>
        """
    
    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

def create_app():
    with gr.Blocks(title="Hugging Face Spaces Explorer", theme=gr.themes.Soft()) as app:
        current_page = gr.State(value=1)
        
        gr.Markdown("""
        # 🤗 Hugging Face Spaces Explorer
        Explore and discover popular Hugging Face Spaces by category. 
        Any currently uncategorized spaces will be listed under "Other" or "All Categories", 
        if you would like to help make Spaces easier to search and filter through feel free 
        to add on to my project or recommend additional filters!
        """)
        
        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..."
            )
        
        spaces_display = gr.HTML()
        
        def update_spaces(search_text, category, page):
            return search_spaces(search_text, category, page)
        
        # Event handlers
        category_dropdown.change(
            fn=update_spaces,
            inputs=[search_input, category_dropdown, gr.State(1)],
            outputs=spaces_display
        )
        
        search_input.change(
            fn=update_spaces,
            inputs=[search_input, category_dropdown, gr.State(1)],
            outputs=spaces_display
        )
        
        # 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
        )
    
    return app

# Launch the app
app = create_app()
app.launch(share=True)