Update app.py

app.py

@@ -107,101 +107,83 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
         gpu_memory = gpu_info.get('memory', 'N/A')
         gpu_info = f"{gpu_type} ({gpu_memory}GB)"
 
-    # 카드 타입별 특수 처리
+    # 카드 타입별 그라데이션 설정
     if card_type == "space":
-        url = f"https://huggingface.co/spaces/{item_id}"
-        type_icon = "🎯"
-        type_label = "SPACE"
-        
-        # 스크린샷 배경
-        screenshot = get_cached_screenshot(url)
-        bg_content = f"""
-            background-image: url(data:image/png;base64,{screenshot if screenshot else ''});
-            background-size: cover;
-            background-position: center;
-        """
-        
-        # 하드웨어 정보 오버레이
-        hardware_overlay = f"""
-            <div style='
-                position: absolute;
-                bottom: 10px;
-                left: 10px;
-                right: 10px;
-                background: rgba(0,0,0,0.7);
-                color: white;
-                padding: 8px 15px;
-                border-radius: 10px;
-                font-size: 0.8em;
-                backdrop-filter: blur(5px);
-                display: flex;
-                justify-content: space-between;
-                gap: 10px;'>
-                <span>💻 {cpu_info}</span>
-                <span>🎮 {gpu_info}</span>
-                <span>🛠️ {sdk}</span>
-            </div>
+        gradient_colors = """
+            rgba(255, 182, 193, 0.7),    /* 파스텔 핑크 */
+            rgba(173, 216, 230, 0.7),    /* 파스텔 블루 */
+            rgba(255, 218, 185, 0.7)     /* 파스텔 피치 */
         """
-        
-        # Spaces용 파스텔톤 그라데이션 배경
-        content_bg = """
-            background: linear-gradient(135deg, 
-                rgba(255, 182, 193, 0.7),    /* 파스텔 핑크 */
-                rgba(173, 216, 230, 0.7),    /* 파스텔 블루 */
-                rgba(255, 218, 185, 0.7)     /* 파스텔 피치 */
-            );
-            backdrop-filter: blur(10px);
+    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:
-        # Models와 Datasets 처리
-        url = f"https://huggingface.co/{item_id}" if card_type == "model" else f"https://huggingface.co/datasets/{item_id}"
-        type_icon = "🤖" if card_type == "model" else "📊"
-        type_label = "MODEL" if card_type == "model" else "DATASET"
-        bg_color = "#6e8efb" if card_type == "model" else "#ff6b6b"
-        content_bg = "background: #f5f5f5;"
-        
-        # 태그 기반 배경
-        bg_content = f"""
-            background: linear-gradient(135deg, {bg_color}, {bg_color}dd);
-            padding: 15px;
+    else:  # dataset
+        gradient_colors = """
+            rgba(255, 107, 107, 0.7),    /* 데이터셋 레드 */
+            rgba(255, 127, 127, 0.7),
+            rgba(255, 147, 147, 0.7)
         """
-        
-        # 태그와 메타데이터 표시
-        hardware_overlay = f"""
-            <div style='
-                padding: 15px;
-                background: rgba(255,255,255,0.1);
-                border-radius: 10px;
-                color: white;'>
-                
-                <div style='
-                    display: flex;
-                    flex-wrap: wrap;
-                    gap: 5px;
-                    margin-bottom: 10px;'>
-                    {' '.join([f'''
-                        <span style='
-                            background: rgba(255,255,255,0.2);
-                            padding: 5px 10px;
-                            border-radius: 15px;
-                            font-size: 0.8em;'>
-                            #{tag}
-                        </span>
-                    ''' for tag in tags[:5]])}
-                </div>
-                
-                <div style='
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    gap: 8px;
-                    font-size: 0.9em;'>
-                    <div>💻 {cpu_info}</div>
-                    <div>🎮 {gpu_info}</div>
-                    {f'<div>🔧 Pipeline: {pipeline_tag}</div>' if pipeline_tag else ''}
-                    {f'<div>📜 License: {license}</div>' if license else ''}
-                </div>
+
+    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='
@@ -256,7 +238,7 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
                 {type_icon} {type_label}
             </div>
 
-            {hardware_overlay}
+            {tags_html}
         </div>
         
         <!-- 콘텐츠 영역 -->
@@ -283,7 +265,6 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
                 gap: 10px;
-                margin-bottom: 20px;
                 font-size: 0.9em;
                 background: rgba(255,255,255,0.3);
                 padding: 10px;
@@ -298,6 +279,8 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
                     <span style='margin-right: 5px;'>📅</span> {created}
                 </div>
             </div>
+
+            {hardware_info}
         </div>
     </div>
     """
@@ -432,7 +415,7 @@ def create_interface():
         with gr.Tabs() as tabs:
             # Spaces 탭
             with gr.Tab("🎯 Trending Spaces"):
-                gr.Markdown("Shows top 10 trending spaces on Hugging Face")
+                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()