Update app.py

app.py

@@ -85,20 +85,72 @@ def take_screenshot(url):
         if 'driver' in locals():
             driver.quit()
 
-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), ',')
-    sdk = space.get('sdk', 'N/A')
-    created = space.get('createdAt', '').split('T')[0]
-    url = f"https://huggingface.co/spaces/{space_id}"
-    
-    screenshot = get_cached_screenshot(url)
-    bg_color = f"rgba({random.randint(230,255)}, {random.randint(230,255)}, {random.randint(230,255)}, 0.8)"
+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]
     
+    # 카드 타입별 특수 처리
+    if card_type == "space":
+        url = f"https://huggingface.co/spaces/{item_id}"
+        type_icon = "🎯"
+        type_label = "SPACE"
+        bg_content = f"""
+            background-image: url(data:image/png;base64,{get_cached_screenshot(url) if get_cached_screenshot(url) else ''});
+            background-size: cover;
+            background-position: center;
+        """
+    elif card_type == "model":
+        url = f"https://huggingface.co/{item_id}"
+        type_icon = "🤖"
+        type_label = "MODEL"
+        tags = item.get('tags', [])[:3]  # 상위 3개 태그만 표시
+        bg_content = f"""
+            background: linear-gradient(135deg, #6e8efb, #4a6cf7);
+            display: flex;
+            flex-wrap: wrap;
+            gap: 5px;
+            padding: 15px;
+            align-content: flex-start;
+        """
+        tag_html = ''.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])
+    else:  # dataset
+        url = f"https://huggingface.co/datasets/{item_id}"
+        type_icon = "📊"
+        type_label = "DATASET"
+        tags = item.get('tags', [])[:3]
+        bg_content = f"""
+            background: linear-gradient(135deg, #ff6b6b, #ff8787);
+            display: flex;
+            flex-wrap: wrap;
+            gap: 5px;
+            padding: 15px;
+            align-content: flex-start;
+        """
+        tag_html = ''.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])
+
     return f"""
-    <div class="space-card" style='
+    <div class="card" style='
         position: relative;
         border: none; 
         padding: 0;
@@ -111,18 +163,15 @@ def get_space_card(space: dict, index: int) -> str:
         min-height: 400px;
         cursor: pointer;
         transform-origin: center;'
-        onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.15)';"
-        onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)';"
+        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;
-            background-image: url(data:image/png;base64,{screenshot if screenshot else ''});
-            background-size: cover;
-            background-position: center;
-            border-bottom: 3px solid {bg_color};
+            {bg_content}
             position: relative;'>
             
             <!-- 순위 뱃지 -->
@@ -140,27 +189,24 @@ def get_space_card(space: dict, index: int) -> str:
                 #{index + 1}
             </div>
             
-            <!-- SDK 뱃지 -->
+            <!-- 타입 뱃지 -->
             <div style='
                 position: absolute;
                 top: 10px;
                 right: 10px;
-                background: {bg_color};
+                background: rgba(255,255,255,0.9);
                 padding: 5px 15px;
                 border-radius: 20px;
                 font-weight: bold;
-                font-size: 0.8em;
-                backdrop-filter: blur(5px);'>
-                🛠️ {sdk}
+                font-size: 0.8em;'>
+                {type_icon} {type_label}
             </div>
+
+            {tag_html if card_type != "space" else ""}
         </div>
         
         <!-- 콘텐츠 ���역 -->
-        <div style='
-            padding: 20px;
-            background: white;'>
-            
-            <!-- 제목 -->
+        <div style='padding: 20px;'>
             <h3 style='
                 margin: 0 0 15px 0;
                 color: #333;
@@ -174,88 +220,27 @@ def get_space_card(space: dict, index: int) -> str:
                 {title}
             </h3>
             
-            <!-- 메타 정보 그리드 -->
             <div style='
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
                 gap: 10px;
                 margin-bottom: 20px;
                 font-size: 0.9em;'>
-                
-                <div style='
-                    display: flex;
-                    align-items: center;
-                    color: #666;'>
+                <div style='color: #666;'>
                     <span style='margin-right: 5px;'>👤</span> {author}
                 </div>
-                
-                <div style='
-                    display: flex;
-                    align-items: center;
-                    color: #666;'>
+                <div style='color: #666;'>
                     <span style='margin-right: 5px;'>❤️</span> {likes}
                 </div>
-                
-                <div style='
-                    display: flex;
-                    align-items: center;
-                    color: #666;
-                    grid-column: span 2;'>
+                <div style='color: #666; grid-column: span 2;'>
                     <span style='margin-right: 5px;'>📅</span> {created}
                 </div>
             </div>
-            
-            <!-- 액션 버튼 -->
-            <div style='
-                display: flex;
-                justify-content: space-between;
-                align-items: center;'>
-                
-                <a href='{url}' target='_blank' 
-                   style='
-                    display: inline-flex;
-                    align-items: center;
-                    padding: 8px 20px;
-                    background: linear-gradient(135deg, #6e8efb, #4a6cf7);
-                    color: white;
-                    text-decoration: none;
-                    border-radius: 25px;
-                    font-weight: 500;
-                    transition: all 0.3s ease;
-                    box-shadow: 0 4px 15px rgba(74,108,247,0.2);'
-                   onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(74,108,247,0.3)';"
-                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(74,108,247,0.2)';">
-                    View Space <span style='margin-left: 8px;'>→</span>
-                </a>
-                
-                <div style='
-                    display: flex;
-                    gap: 10px;'>
-                    <div style='
-                        padding: 8px;
-                        background: #f5f5f5;
-                        border-radius: 50%;
-                        cursor: pointer;
-                        transition: all 0.3s ease;'
-                        onmouseover="this.style.background='#ebebeb';"
-                        onmouseout="this.style.background='#f5f5f5';">
-                        ⭐
-                    </div>
-                    <div style='
-                        padding: 8px;
-                        background: #f5f5f5;
-                        border-radius: 50%;
-                        cursor: pointer;
-                        transition: all 0.3s ease;'
-                        onmouseover="this.style.background='#ebebeb';"
-                        onmouseout="this.style.background='#f5f5f5';">
-                        🔗
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
     """
+    
+
 
 def get_trending_spaces(progress=gr.Progress()) -> Tuple[str, str]:
     """트렌딩 스페이스 가져오기"""
@@ -277,54 +262,7 @@ 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 = take_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>
-            """
-            
+            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>"
@@ -350,6 +288,7 @@ def get_models(progress=gr.Progress()) -> Tuple[str, str]:
         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;'>
@@ -365,8 +304,9 @@ def get_models(progress=gr.Progress()) -> Tuple[str, str]:
             url = f"https://huggingface.co/{model_id}"
             
             screenshot = get_cached_screenshot(url)
-            html_content += get_space_card({"id": model_id, "likes": model.get('likes', 0), 
-                                          "sdk": "model", "createdAt": created}, idx)
+            html_content += get_card(model, idx, "model")
+            
+
             
             progress((0.1 + 0.9 * idx/10), desc=f"Loading model {idx+1}/10...")
             
@@ -408,8 +348,9 @@ def get_datasets(progress=gr.Progress()) -> Tuple[str, str]:
             url = f"https://huggingface.co/datasets/{dataset_id}"
             
             screenshot = get_cached_screenshot(url)
-            html_content += get_space_card({"id": dataset_id, "likes": dataset.get('likes', 0), 
-                                          "sdk": "dataset", "createdAt": created}, idx)
+            html_content += get_card(dataset, idx, "dataset")
+            
+
             
             progress((0.1 + 0.9 * idx/10), desc=f"Loading dataset {idx+1}/10...")