Update app.py

app.py

@@ -12,17 +12,20 @@ from io import BytesIO
 from datetime import datetime
 import gradio as gr
 from typing import Tuple
+from pathlib import Path
 
-USERNAME = "openfree"
-SCREENSHOT_CACHE = {}
+# 스크린샷 캐시 디렉토리 설정
+CACHE_DIR = Path("screenshot_cache")
+CACHE_DIR.mkdir(exist_ok=True)
 
-def take_screenshot(url):
-    if url in SCREENSHOT_CACHE:
-        return SCREENSHOT_CACHE[url]
-        
-    if not url.startswith('http'):
-        url = f"https://{url}"
-        
+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')
@@ -36,12 +39,12 @@ def take_screenshot(url):
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
         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
+        
+        # 캐시 파일 저장
+        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
@@ -49,15 +52,8 @@ def take_screenshot(url):
         if 'driver' in locals():
             driver.quit()
 
-def get_pastel_color(index):
-    pastel_colors = [
-        'rgba(255, 230, 230, 0.8)', 'rgba(255, 230, 255, 0.8)', 
-        'rgba(230, 230, 255, 0.8)', 'rgba(230, 255, 255, 0.8)', 
-        'rgba(230, 255, 230, 0.8)'
-    ]
-    return pastel_colors[index % len(pastel_colors)]
-
-def get_space_card(space, index):
+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), ',')
@@ -65,85 +61,82 @@ def get_space_card(space, index):
     created = space.get('createdAt', '').split('T')[0]
     url = f"https://huggingface.co/spaces/{space_id}"
     
-    screenshot = take_screenshot(url)
-    bg_style = f"""
-        background-image: linear-gradient(
-            {get_pastel_color(index)}, 
-            {get_pastel_color(index)}
-        ), url(data:image/png;base64,{screenshot});
-        background-size: cover;
-        background-position: center;
-        background-blend-mode: overlay;
-    """ if screenshot else f"background-color: {get_pastel_color(index)};"
+    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 style='
+    <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);
-        {bg_style}
+        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;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        min-height: 200px;'
-        onclick="window.open('{url}', '_blank')"
-        onmouseover="this.style.transform='scale(1.02)'"
-        onmouseout="this.style.transform='scale(1)'">
+        min-height: 200px;'>
         
         <div style='
-            background: rgba(255, 255, 255, 0.9);
+            background: rgba(255, 255, 255, 0.95);
             padding: 15px;
             border-radius: 10px;
             backdrop-filter: blur(5px);'>
-            <h3 style='margin: 0; color: #333;'>{title}</h3>
-            <p style='margin: 5px 0; color: #666;'>Author: {author}</p>
-            <p style='margin: 5px 0; color: #666;'>SDK: {sdk}</p>
+            <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: {created}</p>
-            <a href='{url}' target='_blank' style='color: blue; text-decoration: none;'>🔗 View</a>
+            <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_user_spaces(progress=gr.Progress()) -> Tuple[str, str]:
-    url = f"https://huggingface.co/api/spaces?author={USERNAME}&limit=500"
+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_data = response.json()
+        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;'>
+        <div style='padding: 20px; background: #f5f5f5;'>
+            <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
         """
         
-        total = len(spaces_data)
-        for idx, space in enumerate(spaces_data):
-            progress((0.1 + 0.9 * idx/total), desc=f"Loading space {idx+1}/{total}...")
+        for idx, space in enumerate(top_spaces):
+            progress((0.1 + 0.9 * idx/10), desc=f"Loading space {idx+1}/10...")
             html_content += get_space_card(space, idx)
             
         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():
-    with gr.Blocks(title="Hugging Face Space Gallery") as interface:
-        gr.Markdown("# 🤗 Hugging Face Space Gallery")
-        gr.Markdown(f"Shows spaces by user: {USERNAME}")
+    """Gradio 인터페이스 생성"""
+    with gr.Blocks(title="Hugging Face Trending Spaces") as interface:
+        gr.Markdown("# 🤗 Hugging Face Trending Spaces")
+        gr.Markdown("Shows top 10 trending spaces on Hugging Face")
         
         with gr.Row():
             refresh_btn = gr.Button("Refresh Gallery", variant="primary")
@@ -151,18 +144,14 @@ def create_interface():
         gallery_html = gr.HTML()
         status = gr.Markdown("Ready")
         
-        def update():
-            html, status_text = get_user_spaces()
-            return [html, status_text]
-        
         refresh_btn.click(
-            fn=update,
+            fn=get_trending_spaces,
             outputs=[gallery_html, status],
             show_progress=True
         )
         
         interface.load(
-            fn=update,
+            fn=get_trending_spaces,
             outputs=[gallery_html, status]
         )