app.py

import os
import random
import base64
import requests
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import WebDriverException, TimeoutException
from PIL import Image
from io import BytesIO
from datetime import datetime
import gradio as gr
from typing import Tuple
from pathlib import Path

# 스크린샷 캐시 디렉토리 설정
CACHE_DIR = Path("screenshot_cache")
CACHE_DIR.mkdir(exist_ok=True)

def get_cached_screenshot(url: str) -> str:
    """캐시된 스크린샷 가져오기 또는 새로 생성"""
    cache_file = CACHE_DIR / f"{base64.b64encode(url.encode()).decode()}.png"
    
    if cache_file.exists():
        with open(cache_file, "rb") as f:
            return base64.b64encode(f.read()).decode()
            
    options = webdriver.ChromeOptions()
    options.add_argument('--headless')
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-dev-shm-usage')
    options.add_argument('--window-size=1080,720')
    
    try:
        driver = webdriver.Chrome(options=options)
        driver.get(url)
        WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.TAG_NAME, "body"))
        )
        screenshot = driver.get_screenshot_as_png()
        
        # 캐시 파일 저장
        with open(cache_file, "wb") as f:
            f.write(screenshot)
            
        return base64.b64encode(screenshot).decode()
    except Exception as e:
        print(f"Screenshot error for {url}: {str(e)}")
        return None
    finally:
        if 'driver' in locals():
            driver.quit()

def get_space_card(space: dict, index: int) -> str:
    """스페이스 카드 HTML 생성"""
    space_id = space.get('id', '')
    author, title = space_id.split('/', 1)
    likes = format(space.get('likes', 0), ',')
    sdk = space.get('sdk', 'N/A')
    created = space.get('createdAt', '').split('T')[0]
    url = f"https://huggingface.co/spaces/{space_id}"
    
    screenshot = get_cached_screenshot(url)
    bg_color = f"rgba({random.randint(230,255)}, {random.randint(230,255)}, {random.randint(230,255)}, 0.8)"
    
    return f"""
    <div class="space-card" style='
        border: none; 
        padding: 20px; 
        margin: 10px; 
        border-radius: 15px; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        background-image: linear-gradient({bg_color}, {bg_color}), 
            url(data:image/png;base64,{screenshot if screenshot else ''});
        background-size: cover;
        background-position: center;
        background-blend-mode: overlay;
        transition: transform 0.3s ease;
        min-height: 200px;'>
        
        <div style='
            background: rgba(255, 255, 255, 0.95);
            padding: 15px;
            border-radius: 10px;
            backdrop-filter: blur(5px);'>
            <div style='font-size: 1.2em; font-weight: bold; color: #333;'>#{index + 1} {title}</div>
            <p style='margin: 5px 0; color: #666;'>👤 {author}</p>
            <p style='margin: 5px 0; color: #666;'>🛠️ {sdk}</p>
            <p style='margin: 5px 0; color: #666;'>❤️ {likes}</p>
            <p style='margin: 5px 0; color: #666;'>📅 {created}</p>
            <a href='{url}' target='_blank' 
               style='display: inline-block; margin-top: 10px; padding: 5px 10px; 
                      background: #007bff; color: white; text-decoration: none; 
                      border-radius: 5px;'>
                🔗 View Space
            </a>
        </div>
    </div>
    """

def get_trending_spaces(progress=gr.Progress()) -> Tuple[str, str]:
    """트렌딩 스페이스 가져오기"""
    url = "https://huggingface.co/api/spaces"
    
    try:
        progress(0, desc="Fetching spaces data...")
        response = requests.get(url)
        response.raise_for_status()
        spaces = response.json()
        
        # 좋아요 수로 정렬하고 상위 10개만 선택
        spaces.sort(key=lambda x: x.get('likes', 0), reverse=True)
        top_spaces = spaces[:10]
        
        progress(0.1, desc="Creating gallery...")
        html_content = """
        <div style='padding: 20px; background: #f5f5f5;'>
            <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
        """
        
        for idx, space in enumerate(top_spaces):
            author, title = space['id'].split('/', 1)
            space_url = f"https://huggingface.co/spaces/{space['id']}"
            likes = format(space.get('likes', 0), ',')
            created = space.get('createdAt', '').split('T')[0]
            
            screenshot = get_cached_screenshot(space_url)
            bg_color = f"rgba({random.randint(230,255)}, {random.randint(230,255)}, {random.randint(230,255)}, 0.8)"
            
            html_content += f"""
            <div class="space-card" style='
                position: relative;
                border: none; 
                padding: 20px; 
                margin: 10px; 
                border-radius: 15px; 
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                background-image: linear-gradient({bg_color}, {bg_color}), 
                    url(data:image/png;base64,{screenshot if screenshot else ''});
                background-size: cover;
                background-position: center;
                background-blend-mode: overlay;
                transition: transform 0.3s ease;
                min-height: 250px;
                cursor: pointer;'
                onclick="window.open('{space_url}', '_blank')">
                
                <div style='
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: rgba(255, 255, 255, 0.95);
                    padding: 10px;
                    border-radius: 0 0 15px 15px;
                    font-size: 0.8em;'>
                    <div style='font-size: 1.2em; font-weight: bold; color: #333; margin-bottom: 5px;'>
                        #{idx + 1} {title}
                    </div>
                    <div style='display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;'>
                        <div style='color: #666;'>👤 {author}</div>
                        <div style='color: #666;'>🛠️ {space.get('sdk', 'N/A')}</div>
                        <div style='color: #666;'>❤️ {likes}</div>
                        <div style='color: #666;'>📅 {created}</div>
                    </div>
                </div>
            </div>
            """
            
            progress((0.1 + 0.9 * idx/10), desc=f"Loading space {idx+1}/10...")
            
        html_content += "</div></div>"
        
        progress(1.0, desc="Complete!")
        return html_content, "Gallery refresh complete!"
        
    except Exception as e:
        error_html = f'<div style="color: red; padding: 20px;">Error: {str(e)}</div>'
        return error_html, f"Error: {str(e)}"

def create_interface():
    """Gradio 인터페이스 생성"""
    with gr.Blocks(title="Hugging Face Trending Spaces") as interface:
        gr.Markdown("# 🤗 Hugging Face Top 10 Trending Spaces")
        gr.Markdown("Shows top 10 most liked spaces on Hugging Face")
        
        with gr.Row():
            refresh_btn = gr.Button("Refresh Gallery", variant="primary")
        
        gallery_html = gr.HTML()
        status = gr.Markdown("Ready")
        
        refresh_btn.click(
            fn=get_trending_spaces,
            outputs=[gallery_html, status],
            show_progress=True
        )
        
        interface.load(
            fn=get_trending_spaces,
            outputs=[gallery_html, status]
        )
    
    return interface

if __name__ == "__main__":
    try:
        demo = create_interface()
        demo.launch(
            share=True,
            inbrowser=True,
            show_api=False
        )
    except Exception as e:
        print(f"Error launching app: {e}")