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
import time
from pathlib import Path  # 추가

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

# 전역 변수로 스크린샷 캐시 선언
SCREENSHOT_CACHE = {}

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()
            
    return take_screenshot(url)
    
def take_screenshot(url):
    """웹사이트 스크린샷 촬영 함수 (로딩 대기 시간 추가)"""
    if url in SCREENSHOT_CACHE:
        return SCREENSHOT_CACHE[url]
        
    if not url.startswith('http'):
        url = f"https://{url}"
        
    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)
        
        # 명시적 대기: body 요소가 로드될 때까지 대기 (최대 10초)
        try:
            WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.TAG_NAME, "body"))
            )
        except TimeoutException:
            print(f"페이지 로딩 타임아웃: {url}")
        
        # 추가 대기 시간을 2초로 증가
        time.sleep(2)  # 1초에서 2초로 변경
        
        # JavaScript 실행 완료 대기
        driver.execute_script("return document.readyState") == "complete"
        
        # 스크린샷 촬영
        screenshot = driver.get_screenshot_as_png()
        img = Image.open(BytesIO(screenshot))
        buffered = BytesIO()
        img.save(buffered, format="PNG")
        base64_image = base64.b64encode(buffered.getvalue()).decode()
        
        # 캐시에 저장
        SCREENSHOT_CACHE[url] = base64_image
        return base64_image
        
    except WebDriverException as e:
        print(f"스크린샷 촬영 실패: {str(e)} for URL: {url}")
        return None
    except Exception as e:
        print(f"예상치 못한 오류: {str(e)} for URL: {url}")
        return None
    finally:
        if 'driver' in locals():
            driver.quit()

def get_card(item: dict, index: int, card_type: str = "space") -> str:
    """통합 카드 HTML 생성"""
    item_id = item.get('id', '')
    author, title = item_id.split('/', 1)
    likes = format(item.get('likes', 0), ',')
    created = item.get('createdAt', '').split('T')[0]
    
    # 메타데이터 처리
    tags = item.get('tags', [])
    pipeline_tag = item.get('pipeline_tag', '')
    license = item.get('license', '')
    sdk = item.get('sdk', 'N/A')
    
    # 하드웨어 요구사항 처리
    hardware = item.get('hardware', {})
    cpu_info = hardware.get('cpu', 'Standard')
    gpu_info = hardware.get('gpu', 'None')
    if isinstance(gpu_info, dict):
        gpu_type = gpu_info.get('type', 'N/A')
        gpu_memory = gpu_info.get('memory', 'N/A')
        gpu_info = f"{gpu_type} ({gpu_memory}GB)"

    # 카드 타입별 그라데이션 설정
    if card_type == "space":
        gradient_colors = """
            rgba(255, 182, 193, 0.7),    /* 파스텔 핑크 */
            rgba(173, 216, 230, 0.7),    /* 파스텔 블루 */
            rgba(255, 218, 185, 0.7)     /* 파스텔 피치 */
        """
    elif card_type == "model":
        gradient_colors = """
            rgba(110, 142, 251, 0.7),    /* 모델 블루 */
            rgba(130, 158, 251, 0.7),
            rgba(150, 174, 251, 0.7)
        """
    else:  # dataset
        gradient_colors = """
            rgba(255, 107, 107, 0.7),    /* 데이터셋 레드 */
            rgba(255, 127, 127, 0.7),
            rgba(255, 147, 147, 0.7)
        """

    content_bg = f"""
        background: linear-gradient(135deg, {gradient_colors});
        backdrop-filter: blur(10px);
    """

    # 하드웨어 정보 HTML (모든 카드 타입에 대해 동일하게 적용)
    hardware_info = f"""
    <div style='
        margin-top: 15px;
        padding: 10px;
        background: rgba(255,255,255,0.3);
        border-radius: 10px;
        font-size: 0.9em;'>
        <div style='
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;'>
            <div style='color: #444;'>
                <span style='margin-right: 5px;'>💻</span> {cpu_info}
            </div>
            <div style='color: #444;'>
                <span style='margin-right: 5px;'>🎮</span> {gpu_info}
            </div>
            <div style='color: #444;'>
                <span style='margin-right: 5px;'>🛠️</span> {sdk}
            </div>
        </div>
    </div>
    """

    # 태그 표시 (models와 datasets용)
    if card_type != "space":
        tags_html = f"""
        <div style='
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
            width: 90%;'>
            {' '.join([f'''
                <span style='
                    background: rgba(255,255,255,0.2);
                    padding: 5px 10px;
                    border-radius: 15px;
                    color: white;
                    font-size: 0.8em;'>
                    #{tag}
                </span>
            ''' for tag in tags[:5]])}
        </div>
        """
    else:
        tags_html = ""

    return f"""
    <div class="card" style='
        position: relative;
        border: none; 
        padding: 0;
        margin: 10px;
        border-radius: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        background: white;
        transition: all 0.3s ease;
        overflow: hidden;
        min-height: 400px;
        cursor: pointer;
        transform-origin: center;'
        onmouseover="this.style.transform='scale(0.98) translateY(5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2)';"
        onmouseout="this.style.transform='scale(1) translateY(0)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)';"
        onclick="window.open('{url}', '_blank')">
        
        <!-- 상단 영역 -->
        <div style='
            width: 100%;
            height: 200px;
            {bg_content}
            position: relative;'>
            
            <!-- 순위 뱃지 -->
            <div style='
                position: absolute;
                top: 10px;
                left: 10px;
                background: rgba(0,0,0,0.7);
                color: white;
                padding: 5px 15px;
                border-radius: 20px;
                font-weight: bold;
                font-size: 0.9em;
                backdrop-filter: blur(5px);'>
                #{index + 1}
            </div>
            
            <!-- 타입 뱃지 -->
            <div style='
                position: absolute;
                top: 10px;
                right: 10px;
                background: rgba(255,255,255,0.9);
                padding: 5px 15px;
                border-radius: 20px;
                font-weight: bold;
                font-size: 0.8em;'>
                {type_icon} {type_label}
            </div>

            {tags_html}
        </div>
        
        <!-- 콘텐츠 영역 -->
        <div style='
            padding: 20px;
            {content_bg}
            border-radius: 0 0 20px 20px;
            border-top: 1px solid rgba(255,255,255,0.5);'>
            <h3 style='
                margin: 0 0 15px 0;
                color: #333;
                font-size: 1.3em;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                text-shadow: 1px 1px 1px rgba(255,255,255,0.8);'>
                {title}
            </h3>
            
            <div style='
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                font-size: 0.9em;
                background: rgba(255,255,255,0.3);
                padding: 10px;
                border-radius: 10px;'>
                <div style='color: #444;'>
                    <span style='margin-right: 5px;'>👤</span> {author}
                </div>
                <div style='color: #444;'>
                    <span style='margin-right: 5px;'>❤️</span> {likes}
                </div>
                <div style='color: #444; grid-column: span 2;'>
                    <span style='margin-right: 5px;'>📅</span> {created}
                </div>
            </div>

            {hardware_info}
        </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개만 선택 (원본 순서 유지)
        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):
            html_content += get_card(space, idx, "space")
            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 get_models(progress=gr.Progress()) -> Tuple[str, str]:
    """인기 모델 가져오기"""
    url = "https://huggingface.co/api/models"
    
    try:
        progress(0, desc="Fetching models data...")
        response = requests.get(url)
        response.raise_for_status()
        models = response.json()
        
        # 상위 10개만 선택
        top_models = models[: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, model in enumerate(top_models):
            model_id = model.get('id', '')
            author = model_id.split('/')[0]
            title = model_id.split('/')[-1]
            likes = format(model.get('likes', 0), ',')
            downloads = format(model.get('downloads', 0), ',')
            created = model.get('createdAt', '').split('T')[0]
            url = f"https://huggingface.co/{model_id}"
            
            screenshot = get_cached_screenshot(url)
            html_content += get_card(model, idx, "model")
            

            
            progress((0.1 + 0.9 * idx/10), desc=f"Loading model {idx+1}/10...")
            
        html_content += "</div></div>"
        
        progress(1.0, desc="Complete!")
        return html_content, "Models 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 get_datasets(progress=gr.Progress()) -> Tuple[str, str]:
    """인기 데이터셋 가져오기"""
    url = "https://huggingface.co/api/datasets"
    
    try:
        progress(0, desc="Fetching datasets data...")
        response = requests.get(url)
        response.raise_for_status()
        datasets = response.json()
        
        # 상위 10개만 선택
        top_datasets = datasets[: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, dataset in enumerate(top_datasets):
            dataset_id = dataset.get('id', '')
            author = dataset_id.split('/')[0]
            title = dataset_id.split('/')[-1]
            likes = format(dataset.get('likes', 0), ',')
            downloads = format(dataset.get('downloads', 0), ',')
            created = dataset.get('createdAt', '').split('T')[0]
            url = f"https://huggingface.co/datasets/{dataset_id}"
            
            screenshot = get_cached_screenshot(url)
            html_content += get_card(dataset, idx, "dataset")
            

            
            progress((0.1 + 0.9 * idx/10), desc=f"Loading dataset {idx+1}/10...")
            
        html_content += "</div></div>"
        
        progress(1.0, desc="Complete!")
        return html_content, "Datasets 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="HuggingFace Trending Board") as interface:
        gr.Markdown("# 🤗 HuggingFace Trending Board")
        
        with gr.Tabs() as tabs:
            # Spaces 탭
            with gr.Tab("🎯 Trending Spaces"):
                gr.Markdown("Shows top 300 trending spaces on Hugging Face")
                with gr.Row():
                    spaces_refresh_btn = gr.Button("Refresh Spaces", variant="primary")
                spaces_gallery = gr.HTML()
                spaces_status = gr.Markdown("Ready")
            
            # Models 탭
            with gr.Tab("🤖 Trending Models"):
                gr.Markdown("Shows top 10 trending models on Hugging Face")
                with gr.Row():
                    models_refresh_btn = gr.Button("Refresh Models", variant="primary")
                models_gallery = gr.HTML()
                models_status = gr.Markdown("Ready")
            
            # Datasets 탭
            with gr.Tab("📊 Trending Datasets"):
                gr.Markdown("Shows top 10 trending datasets on Hugging Face")
                with gr.Row():
                    datasets_refresh_btn = gr.Button("Refresh Datasets", variant="primary")
                datasets_gallery = gr.HTML()
                datasets_status = gr.Markdown("Ready")
        
        # Event handlers
        spaces_refresh_btn.click(
            fn=get_trending_spaces,
            outputs=[spaces_gallery, spaces_status],
            show_progress=True
        )
        
        models_refresh_btn.click(
            fn=get_models,
            outputs=[models_gallery, models_status],
            show_progress=True
        )
        
        datasets_refresh_btn.click(
            fn=get_datasets,
            outputs=[datasets_gallery, datasets_status],
            show_progress=True
        )
        
        # 초기 로드
        interface.load(
            fn=get_trending_spaces,
            outputs=[spaces_gallery, spaces_status]
        )
        interface.load(
            fn=get_models,
            outputs=[models_gallery, models_status]
        )
        interface.load(
            fn=get_datasets,
            outputs=[datasets_gallery, datasets_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}")