Update app.py

app.py

@@ -96,75 +96,100 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
     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":
         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,{get_cached_screenshot(url) if get_cached_screenshot(url) else ''});
+            background-image: url(data:image/png;base64,{screenshot if screenshot else ''});
             background-size: cover;
             background-position: center;
         """
-        meta_html = ""
-    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"
         
-        meta_html = f"""
-        <div style='
-            padding: 15px;
-            background: rgba(255,255,255,0.1);
-            border-radius: 10px;
-            margin-top: 10px;'>
-            
-            <!-- Tags -->
-            <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;
-                        color: white;
-                        font-size: 0.8em;'>
-                        #{tag}
-                    </span>
-                ''' for tag in tags[:5]])}
-            </div>
-            
-            <!-- Pipeline Tag -->
-            {f'''
-            <div style='
-                color: white;
-                margin-bottom: 5px;
-                font-size: 0.9em;'>
-                🔧 Pipeline: {pipeline_tag}
-            </div>
-            ''' if pipeline_tag else ''}
-            
-            <!-- License -->
-            {f'''
+        # 하드웨어 정보 오버레이
+        hardware_overlay = f"""
             <div style='
+                position: absolute;
+                bottom: 10px;
+                left: 10px;
+                right: 10px;
+                background: rgba(0,0,0,0.7);
                 color: white;
-                font-size: 0.9em;'>
-                📜 License: {license}
+                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>
-            ''' if license else ''}
-        </div>
         """
+    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"
         
+        # 태그 기반 배경
         bg_content = f"""
             background: linear-gradient(135deg, {bg_color}, {bg_color}dd);
             padding: 15px;
-            color: white;
+        """
+        
+        # 태그와 메타데이터 표시
+        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>
+            </div>
         """
 
     return f"""
@@ -220,13 +245,13 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
                 {type_icon} {type_label}
             </div>
 
-            {meta_html}
+            {hardware_overlay}
         </div>
         
         <!-- 콘텐츠 영역 -->
         <div style='
             padding: 20px;
-            background: {("#f5f5f5" if card_type == "space" else "white")};
+            background: #f5f5f5;
             border-radius: 0 0 20px 20px;'>
             <h3 style='
                 margin: 0 0 15px 0;