Update app.py

app.py

@@ -23,7 +23,7 @@ def generate_dummy_spaces(count):
             'createdAt': '2023-01-01T00:00:00.000Z',
             'hardware': 'cpu',
             'user': {
-                'avatar_url': None,  # 어차피 안 쓰임 (이모지 대체)
+                'avatar_url': 'https://huggingface.co/front/thumbnails/huggingface/default-avatar.svg',
                 'name': 'dummyUser'
             }
         })
@@ -32,15 +32,15 @@ def generate_dummy_spaces(count):
 # Function to fetch Zero-GPU (CPU-based) Spaces from Huggingface with pagination
 def fetch_trending_spaces(offset=0, limit=72):
     """
-    hardware=cpu & sort=trending 파라미터로:
-    - GPU 없는 스페이스만, 트렌딩 순 정렬로 최대 10000개
+    원본 코드에서 수정: hardware=cpu 파라미터를 추가하여
+    GPU가 없는(=CPU 전용) 스페이스만 필터링
     """
     try:
         url = "https://huggingface.co/api/spaces"
         params = {
-            "limit": 10000,
-            "hardware": "cpu",
-            "sort": "trending"  # 트렌딩 기준
+            "limit": 10000,  # 더 많이 가져오기
+            "hardware": "cpu"  # <-- Zero GPU(=CPU) 필터 적용
+            # "sort": "trending",  # 필요시 추가 (HF API 지원 여부에 따라)
         }
         response = requests.get(url, params=params, timeout=30)
 
@@ -54,10 +54,11 @@ def fetch_trending_spaces(offset=0, limit=72):
                    and space.get('id', '').split('/', 1)[0] != 'None'
             ]
 
+            # Slice according to requested offset and limit
             start = min(offset, len(filtered_spaces))
             end = min(offset + limit, len(filtered_spaces))
 
-            print(f"[fetch_trending_spaces] CPU기반 스페이스 총 {len(filtered_spaces)}개(트렌딩 정렬), "
+            print(f"[fetch_trending_spaces] CPU기반 스페이스 총 {len(filtered_spaces)}개, "
                   f"요청 구간 {start}~{end-1} 반환")
 
             return {
@@ -65,7 +66,7 @@ def fetch_trending_spaces(offset=0, limit=72):
                 'total': len(filtered_spaces),
                 'offset': offset,
                 'limit': limit,
-                'all_spaces': filtered_spaces  # 통계용 (전체)
+                'all_spaces': filtered_spaces  # 통계 산출용
             }
         else:
             print(f"Error fetching spaces: {response.status_code}")
@@ -108,8 +109,8 @@ def transform_url(owner, name):
 # Get space details
 def get_space_details(space_data, index, offset):
     """
-    Zero-GPU 스페이스 상세 정보 추출
-    (description, user info 등) + rank 계산
+    원본 코드에서 수정:
+    - description, avatar_url, author_name 등 추가 필드를 추출
     """
     try:
         if '/' in space_data.get('id', ''):
@@ -135,9 +136,9 @@ def get_space_details(space_data, index, offset):
         # Description
         short_desc = space_data.get('description', '')
 
-        # User info
+        # User info (avatar, name)
         user_info = space_data.get('user', {})
-        # avatar_url = user_info.get('avatar_url', '')  # <-- 사용하지 않음 (이모지로 대체)
+        avatar_url = user_info.get('avatar_url', '')
         author_name = user_info.get('name') or owner
 
         return {
@@ -148,7 +149,7 @@ def get_space_details(space_data, index, offset):
             'name': name,
             'likes_count': likes_count,
             'description': short_desc,
-            # 'avatar_url': avatar_url,  # 이모지로 대체
+            'avatar_url': avatar_url,
             'author_name': author_name,
             'rank': offset + index + 1
         }
@@ -163,7 +164,7 @@ def get_space_details(space_data, index, offset):
             'name': 'error',
             'likes_count': 0,
             'description': '',
-            # 'avatar_url': '',
+            'avatar_url': '',
             'author_name': 'huggingface',
             'rank': offset + index + 1
         }
@@ -171,15 +172,10 @@ def get_space_details(space_data, index, offset):
 # Get owner statistics from all spaces
 def get_owner_stats(all_spaces):
     """
-    all_spaces는 이미 트렌딩 순으로 정렬된 상태.
-    -> 상위 1000개만 골라서(owner) 개수를 세어
-       상위 30명을 산출.
+    모든 스페이스에서 owner 등장 빈도 상위 30명 추출
     """
-    # TOP 1000만 추려서 rank<=1000로 간주
-    top_1000_spaces = all_spaces[:1000]
-
     owners = []
-    for space in top_1000_spaces:
+    for space in all_spaces:
         if '/' in space.get('id', ''):
             owner, _ = space.get('id', '').split('/', 1)
         else:
@@ -188,7 +184,10 @@ def get_owner_stats(all_spaces):
         if owner != 'None':
             owners.append(owner)
 
+    # Count occurrences of each owner
     owner_counts = Counter(owners)
+
+    # Get top 30 owners by count
     top_owners = owner_counts.most_common(30)
 
     return top_owners
@@ -196,28 +195,32 @@ def get_owner_stats(all_spaces):
 # Homepage route
 @app.route('/')
 def home():
+    """
+    index.html 템플릿 렌더링 (���인 페이지)
+    """
     return render_template('index.html')
 
-# Zero-GPU spaces API
+# Zero-GPU spaces API (원본: 'trending-spaces' -> 이제 CPU only)
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
     """
-    hardware=cpu & sort=trending 로 가져온 리스트에서
-    검색, 페이징 적용 + top 1000 집계
+    hardware=cpu 스페이스 목록을 불러와 검색, 페이징, 통계 등을 적용
     """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
     limit = int(request.args.get('limit', 72))  # Default 72
 
+    # Fetch zero-gpu (cpu) spaces
     spaces_data = fetch_trending_spaces(offset, limit)
 
+    # Process and filter spaces
     results = []
     for index, space_data in enumerate(spaces_data['spaces']):
         space_info = get_space_details(space_data, index, offset)
         if not space_info:
             continue
 
-        # 검색 필터
+        # Apply search filter if needed
         if search_query:
             if (search_query not in space_info['title'].lower()
                 and search_query not in space_info['owner'].lower()
@@ -227,7 +230,7 @@ def trending_spaces():
 
         results.append(space_info)
 
-    # 상위 1000 기준 top 30 owner 집계
+    # Get owner statistics for all spaces
     top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
 
     return jsonify({
@@ -245,7 +248,7 @@ if __name__ == '__main__':
     # Create templates folder if not exists
     os.makedirs('templates', exist_ok=True)
 
-    # index.html 전체 작성 (이모지로 대체, 상위 1000 랭크 통계)
+    # index.html 전체를 새로 작성
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''<!DOCTYPE html>
 <html lang="en">
@@ -808,20 +811,88 @@ if __name__ == '__main__':
       }
     }
     
-    /* 이모지로 대체하기 위한 클래스 (아바타 대신) */
-    .emoji-avatar {
-      font-size: 1.5rem;
+    .error-emoji-detector { 
+      position: fixed; 
+      top: -9999px; 
+      left: -9999px;
+      z-index: -1; 
+      opacity: 0;
+    }
+
+    /* 추가 레이아웃 수정(아바타, ZERO GPU 뱃지 등)을 위해 
+       아래 클래스들을 일부 추가/수정해도 좋지만 
+       예시는 위 영역에서 이미 충분히 처리하므로 생략 */
+    
+    /* 다음 부분은 Zero GPU Spaces용 카드 구조에서 활용 */
+    .space-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 4px;
+    }
+    .avatar-img {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      object-fit: cover;
       border: 1px solid #ccc;
+    }
+    .space-title {
+      font-size: 1rem;
+      font-weight: 600;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+    }
+    .zero-gpu-badge {
+      font-size: 0.7rem;
+      background-color: #e6fffa;
+      color: #319795;
+      border: 1px solid #81e6d9;
+      border-radius: 6px;
+      padding: 2px 6px;
+      font-weight: 600;
+      margin-left: 8px;
+    }
+    .desc-text {
+      font-size: 0.85rem;
+      color: #444;
+      margin: 4px 0;
+      line-clamp: 2;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .author-name {
+      font-size: 0.8rem;
+      color: #666;
+    }
+    .likes-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: #e53e3e;
+      font-weight: bold;
+      font-size: 0.85rem;
+    }
+    .likes-heart {
+      font-size: 1rem;
+      line-height: 1rem;
+      color: #f56565;
+    }
+    /* 이모지 전용 스타일 (선택사항) */
+    .emoji-avatar {
+      font-size: 1.2rem;
       width: 32px;
       height: 32px;
       border-radius: 50%;
+      border: 1px solid #ccc;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 8px;
     }
-
-    /* 기존 아바타 관련 CSS는 제거/미사용 */
   </style>
 </head>
 <body>
@@ -838,14 +909,15 @@ if __name__ == '__main__':
       
       <div class="mac-content">
         <div class="header">
-          <h1>ZeroGPU Spaces Leaderboard</h1>
-          <p>Discover CPU-based (No GPU) spaces from Hugging Face</p>
+          <!-- 첫 번째 탭 제목을 Zero GPU Spaces로 변경 -->
+          <h1>Zero GPU Spaces</h1>
+          <p>Discover 'TOP 1,000' Zero GPU(Shared A100) spaces from Hugging Face</p>
         </div>
         
         <!-- Tab Navigation -->
         <div class="tab-nav">
-          <button id="tabTrendingButton" class="tab-button active">Trending</button>
-          <button id="tabFixedButton" class="tab-button">Picks</button>
+          <button id="tabTrendingButton" class="tab-button active">Zero GPU Spaces</button>
+          <button id="tabFixedButton" class="tab-button">Fixed Tab</button>
         </div>
         
         <!-- Trending(Zero GPU) Tab Content -->
@@ -861,8 +933,7 @@ if __name__ == '__main__':
             </div>
             <div class="mac-content">
               <div class="stats-header">
-                <!-- 변경된 타이틀(Top 30 Creators by Count Number of TOP 1000 RANK) -->
-                <div class="stats-title">Top 30 Creators by Count Number of TOP 1000 Rank</div>
+                <div class="stats-title">Top 30 Creators by Count Number of TOP 1000 RANK</div>
                 <button id="statsToggle" class="stats-toggle">Show Stats</button>
               </div>
               <div id="statsContent" class="stats-content">
@@ -886,7 +957,7 @@ if __name__ == '__main__':
           <div id="pagination" class="pagination"></div>
         </div>
         
-        <!-- Fixed Tab Content -->
+        <!-- Fixed Tab Content (기존 예시 유지) -->
         <div id="fixedTab" class="tab-content">
           <div id="fixedGrid" class="grid-container"></div>
         </div>
@@ -1232,7 +1303,7 @@ if __name__ == '__main__':
       container.appendChild(errorPlaceholder);
     }
 
-    // (1) Trending Tab(Zero GPU) - 이모지로 대체
+    // 여기서부터 카드 HTML 구조 (Zero-GPU 전용) 렌더링
     function renderGrid(spaces) {
       elements.gridContainer.innerHTML = '';
       
@@ -1251,7 +1322,7 @@ if __name__ == '__main__':
         try {
           const {
             url, title, likes_count, owner, name, rank,
-            description, author_name, embedUrl
+            description, avatar_url, author_name, embedUrl
           } = item;
 
           const gridItem = document.createElement('div');
@@ -1261,49 +1332,64 @@ if __name__ == '__main__':
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
-          // 첫줄: 이모지 아바타 + 제목 + ZERO GPU 배지
-          // => 이 코드에서는 ZERO GPU 배지 대신, 본래 코드를 약간 단순화
-          const headerTop = document.createElement('div');
-          headerTop.className = 'grid-header-top';
+          // space-header (로봇 이모지 + 제목 + Zero GPU 배지)
+          const spaceHeader = document.createElement('div');
+          spaceHeader.className = 'space-header';
 
-          // 왼쪽: 이모지
-          const leftWrapper = document.createElement('div');
-          leftWrapper.style.display = 'flex';
-          leftWrapper.style.alignItems = 'center';
-          
+          // 로봇 이모지 대체
           const emojiAvatar = document.createElement('div');
           emojiAvatar.className = 'emoji-avatar';
-          emojiAvatar.textContent = '🤖';  // 이모지
-          leftWrapper.appendChild(emojiAvatar);
+          emojiAvatar.textContent = '🤖';
+          spaceHeader.appendChild(emojiAvatar);
+
+          // 제목+배지
+          const titleWrapper = document.createElement('div');
+          titleWrapper.style.display = 'flex';
+          titleWrapper.style.alignItems = 'center';
 
           const titleEl = document.createElement('h3');
+          titleEl.className = 'space-title';
           titleEl.textContent = title;
           titleEl.title = title;
-          leftWrapper.appendChild(titleEl);
+          titleWrapper.appendChild(titleEl);
 
-          headerTop.appendChild(leftWrapper);
+          const zeroGpuBadge = document.createElement('span');
+          zeroGpuBadge.className = 'zero-gpu-badge';
+          zeroGpuBadge.textContent = 'ZERO GPU';
+          titleWrapper.appendChild(zeroGpuBadge);
+
+          spaceHeader.appendChild(titleWrapper);
+          headerDiv.appendChild(spaceHeader);
+
+          // rank + author + likes
+          const metaInfo = document.createElement('div');
+          metaInfo.className = 'grid-meta';
+          metaInfo.style.display = 'flex';
+          metaInfo.style.justifyContent = 'space-between';
+          metaInfo.style.alignItems = 'center';
+          metaInfo.style.marginTop = '6px';
+
+          // 왼쪽: rank + author
+          const leftMeta = document.createElement('div');
 
-          // 오른쪽: rank
           const rankBadge = document.createElement('div');
           rankBadge.className = 'rank-badge';
           rankBadge.textContent = `#${rank}`;
-          headerTop.appendChild(rankBadge);
+          leftMeta.appendChild(rankBadge);
 
-          headerDiv.appendChild(headerTop);
+          const authorSpan = document.createElement('span');
+          authorSpan.className = 'author-name';
+          authorSpan.style.marginLeft = '8px';
+          authorSpan.textContent = `by ${author_name}`;
+          leftMeta.appendChild(authorSpan);
 
-          // 둘째줄: owner + likes
-          const metaInfo = document.createElement('div');
-          metaInfo.className = 'grid-meta';
+          metaInfo.appendChild(leftMeta);
 
-          const ownerEl = document.createElement('div');
-          ownerEl.className = 'owner-info';
-          ownerEl.textContent = `by ${author_name}`;
-          metaInfo.appendChild(ownerEl);
-
-          const likesCounter = document.createElement('div');
-          likesCounter.className = 'likes-counter';
-          likesCounter.innerHTML = `♥ <span>${likes_count}</span>`;
-          metaInfo.appendChild(likesCounter);
+          // 오른쪽: likes
+          const likesDiv = document.createElement('div');
+          likesDiv.className = 'likes-wrapper';
+          likesDiv.innerHTML = `<span class="likes-heart">♥</span><span>${likes_count}</span>`;
+          metaInfo.appendChild(likesDiv);
 
           headerDiv.appendChild(metaInfo);
           gridItem.appendChild(headerDiv);
@@ -1311,10 +1397,7 @@ if __name__ == '__main__':
           // description
           if (description) {
             const descP = document.createElement('p');
-            descP.style.padding = '0 15px';
-            descP.style.fontSize = '0.85rem';
-            descP.style.color = '#444';
-            descP.style.marginTop = '6px';
+            descP.className = 'desc-text';
             descP.textContent = description;
             gridItem.appendChild(descP);
           }
@@ -1327,7 +1410,7 @@ if __name__ == '__main__':
           iframeContainer.className = 'iframe-container';
 
           const iframe = document.createElement('iframe');
-          iframe.src = embedUrl;
+          iframe.src = embedUrl;  // transformed direct URL
           iframe.title = title;
           iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
           iframe.setAttribute('allowfullscreen', '');
@@ -1376,8 +1459,8 @@ if __name__ == '__main__':
       });
     }
 
-    // (2) Fixed Tab - 이모지로 대체
     function renderFixedGrid() {
+      // Fixed Tab 예시용 (원본 코드 예시 유지)
       fixedGridContainer.innerHTML = '';
 
       const staticSpaces = [
@@ -1421,17 +1504,16 @@ if __name__ == '__main__':
       staticSpaces.forEach((item) => {
         try {
           const { url, title, likes_count, owner, name, rank } = item;
-          
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
 
           const header = document.createElement('div');
           header.className = 'grid-header';
 
-          // 첫줄(top): 이모지 + 제목 + rank
           const headerTop = document.createElement('div');
           headerTop.className = 'grid-header-top';
 
+          // 로봇 이모지 + 타이틀 함께 표시
           const leftWrapper = document.createElement('div');
           leftWrapper.style.display = 'flex';
           leftWrapper.style.alignItems = 'center';
@@ -1455,7 +1537,6 @@ if __name__ == '__main__':
 
           header.appendChild(headerTop);
 
-          // 둘째줄(meta): owner + likes
           const metaInfo = document.createElement('div');
           metaInfo.className = 'grid-meta';
 
@@ -1510,12 +1591,13 @@ if __name__ == '__main__':
           linkEl.target = '_blank';
           linkEl.className = 'open-link';
           linkEl.textContent = 'Open in new window';
-
           actions.appendChild(linkEl);
+
           gridItem.appendChild(content);
           gridItem.appendChild(actions);
 
           fixedGridContainer.appendChild(gridItem);
+
         } catch (error) {
           console.error('Fixed tab rendering error:', error);
         }