Update app.py

app.py

@@ -120,8 +120,55 @@ def get_trending_spaces(progress=gr.Progress()) -> Tuple[str, str]:
         """
         
         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 += get_space_card(space, idx)
             
         html_content += "</div></div>"
         
@@ -135,8 +182,8 @@ def get_trending_spaces(progress=gr.Progress()) -> Tuple[str, str]:
 def create_interface():
     """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")
+        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")