Update app.py

app.py

@@ -29,17 +29,19 @@ def generate_dummy_spaces(count):
         })
     return spaces
 
-# Function to fetch Zero-GPU (CPU-based) Spaces from Huggingface with pagination
+# Function to fetch Zero-GPU (CPU-based) Spaces, TRENDING order, top 500
 def fetch_trending_spaces(offset=0, limit=72):
     """
-    hardware=cpu 파라미터를 추가하여 GPU가 없는(=CPU 전용) 스페이스만 가져옴
+    1) hardware=cpu
+    2) sort=trending
+    3) 상위 500개만 남김 (그 이후 offset/limit 페이징)
     """
     try:
         url = "https://huggingface.co/api/spaces"
         params = {
-            "limit": 10000,  # 더 많이 가져오기
-            "hardware": "cpu"  # <-- Zero GPU(=CPU) 필터 적용
-            # "sort": "trending",  # 필요 시 추가
+            "limit": 10000,  # 일단 많이 가져오기
+            "hardware": "cpu",
+            "sort": "trending"  # 트렌딩 정렬
         }
         response = requests.get(url, params=params, timeout=30)
 
@@ -53,19 +55,25 @@ def fetch_trending_spaces(offset=0, limit=72):
                    and space.get('id', '').split('/', 1)[0] != 'None'
             ]
 
-            # 페이징 슬라이싱
-            start = min(offset, len(filtered_spaces))
-            end = min(offset + limit, len(filtered_spaces))
+            # 트렌딩 중 상위 500개만 남김
+            if len(filtered_spaces) > 500:
+                filtered_spaces = filtered_spaces[:500]
 
-            print(f"[fetch_trending_spaces] CPU기반 스페이스 총 {len(filtered_spaces)}개, "
-                  f"요청 구간 {start}~{end-1} 반환")
+            total = len(filtered_spaces)
+
+            # 페이징
+            start = min(offset, total)
+            end = min(offset + limit, total)
+
+            print(f"[fetch_trending_spaces] Zero-GPU TRENDING Spaces: {total}개 중, "
+                  f"{start}~{end-1} 반환")
 
             return {
                 'spaces': filtered_spaces[start:end],
-                'total': len(filtered_spaces),
+                'total': total,
                 'offset': offset,
                 'limit': limit,
-                'all_spaces': filtered_spaces  # 통계 산출용 (전체 CPU 스페이스)
+                'all_spaces': filtered_spaces  # 상위 500 전체
             }
         else:
             print(f"Error fetching spaces: {response.status_code}")
@@ -80,7 +88,6 @@ def fetch_trending_spaces(offset=0, limit=72):
 
     except Exception as e:
         print(f"Exception when fetching spaces: {e}")
-        # 실패 시 더미 데이터 생성
         return {
             'spaces': generate_dummy_spaces(limit),
             'total': 200,
@@ -93,7 +100,7 @@ def fetch_trending_spaces(offset=0, limit=72):
 def transform_url(owner, name):
     """
     Hugging Face Space -> 서브도메인 접근 URL
-    예: huggingface.co/spaces/owner/spaceName -> owner-spacename.hf.space
+    예) huggingface.co/spaces/owner/spaceName -> owner-spacename.hf.space
     """
     name = name.replace('.', '-').replace('_', '-')
     owner = owner.lower()
@@ -103,7 +110,7 @@ def transform_url(owner, name):
 # Get space details
 def get_space_details(space_data, index, offset):
     """
-    Zero GPU 스페이스에서 필요한 정보(타이틀, owner, description, avatar_url 등)를 추출
+    space의 주요 정보(타이틀, likes, owner, url 등) 추출
     """
     try:
         if '/' in space_data.get('id', ''):
@@ -112,7 +119,6 @@ def get_space_details(space_data, index, offset):
             owner = space_data.get('owner', '')
             name = space_data.get('id', '')
 
-        # Ignore if 'None'
         if owner == 'None' or name == 'None':
             return None
 
@@ -137,11 +143,11 @@ def get_space_details(space_data, index, offset):
             'description': short_desc,
             'avatar_url': avatar_url,
             'author_name': author_name,
+            # 'rank'는 (offset + index + 1)로 표시
             'rank': offset + index + 1
         }
     except Exception as e:
         print(f"Error processing space data: {e}")
-        # 최소한의 데이터라도 리턴
         return {
             'url': 'https://huggingface.co/spaces',
             'embedUrl': 'https://huggingface.co/spaces',
@@ -158,8 +164,8 @@ def get_space_details(space_data, index, offset):
 # Get owner statistics from all spaces
 def get_owner_stats(all_spaces):
     """
-    all_spaces: Zero GPU(=CPU) 스페이스 목록(필터된 전체).
-    여기서 owner를 카운트하여 상위 30명 추출.
+    all_spaces: 상위 500개 트렌딩 CPU 스페이스
+    -> owner별로 몇 개인지 세서 상위 30명 반환
     """
     owners = []
     for space in all_spaces:
@@ -175,23 +181,24 @@ def get_owner_stats(all_spaces):
     top_owners = owner_counts.most_common(30)
     return top_owners
 
+from flask import render_template
+
 @app.route('/')
 def home():
-    """
-    index.html 템플릿 (프론트엔드) 로드
-    """
     return render_template('index.html')
 
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
     """
-    /api/trending-spaces
-    -> Zero GPU 스페이스 가져와서 검색, 페이징, 통계(오너 상위 30) 반환
+    1) 상위 500 트렌딩 CPU 스페이스
+    2) offset, limit으로 페이지 나눠서 반환
+    3) top 30 creator stats
     """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
     limit = int(request.args.get('limit', 72))
 
+    # 500개 (CPU+trending) 받아오기
     spaces_data = fetch_trending_spaces(offset, limit)
 
     results = []
@@ -210,7 +217,6 @@ def trending_spaces():
 
         results.append(space_info)
 
-    # 전체 CPU 스페이스를 대상으로 Top 30 오너 추출
     top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
 
     return jsonify({
@@ -223,17 +229,16 @@ def trending_spaces():
 
 if __name__ == '__main__':
     """
-    서버 구동 시, templates/index.html 파일을 생성 후 Flask 실행
+    Flask 실행 시, templates/index.html 생성
     """
     os.makedirs('templates', exist_ok=True)
 
-    # index.html 생성 (깨진 이미지 대신 로봇 이모지 + 기존 전체 코드 유지)
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Huggingface Zero-GPU Spaces</title>
+  <title>Zero-GPU Trending (Top 500)</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     /* Google Fonts & Base Styling */
@@ -266,7 +271,7 @@ if __name__ == '__main__':
     }
     
     body {
-      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      font-family: 'Nunito', sans-serif;
       line-height: 1.6;
       color: var(--text-primary);
       background-color: #f8f9fa;
@@ -755,60 +760,6 @@ if __name__ == '__main__':
       width: 100%;
       height: 500px;
     }
-    
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      body {
-        padding: 1rem;
-      }
-      
-      .grid-container {
-        grid-template-columns: 1fr;
-      }
-      
-      .search-bar {
-        flex-direction: column;
-        padding: 10px;
-      }
-      
-      .search-bar input {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-      
-      .search-bar .refresh-btn {
-        width: 100%;
-        justify-content: center;
-      }
-      
-      .pagination {
-        flex-wrap: wrap;
-      }
-      
-      .chart-container {
-        height: 300px;
-      }
-    }
-    
-    .error-emoji-detector { 
-      position: fixed; 
-      top: -9999px; 
-      left: -9999px;
-      z-index: -1; 
-      opacity: 0;
-    }
-
-    /* 로봇 이모지 대체 */
-    .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;
-    }
   </style>
 </head>
 <body>
@@ -825,8 +776,8 @@ if __name__ == '__main__':
       
       <div class="mac-content">
         <div class="header">
-          <h1>Zero GPU Spaces</h1>
-          <p>Discover 'TOP 1,000' Zero GPU(Shared A100) spaces from Hugging Face</p>
+          <h1>Zero GPU Spaces (Top 500 Trending)</h1>
+          <p>Discover trending CPU-based spaces from Hugging Face. Only top 500 are considered!</p>
         </div>
         
         <!-- Tab Navigation -->
@@ -835,7 +786,7 @@ if __name__ == '__main__':
           <button id="tabFixedButton" class="tab-button">Fixed Tab</button>
         </div>
         
-        <!-- Trending(Zero GPU) Tab Content -->
+        <!-- Trending Tab Content -->
         <div id="trendingTab" class="tab-content active">
           <div class="stats-window mac-window">
             <div class="mac-toolbar">
@@ -848,7 +799,7 @@ if __name__ == '__main__':
             </div>
             <div class="mac-content">
               <div class="stats-header">
-                <div class="stats-title">Top 30 Creators by Count Number of TOP 1000 RANK</div>
+                <div class="stats-title">Top 30 Creators by Space Count (of Top 500)</div>
                 <button id="statsToggle" class="stats-toggle">Show Stats</button>
               </div>
               <div id="statsContent" class="stats-content">
@@ -891,7 +842,7 @@ if __name__ == '__main__':
   </div>
   
   <script>
-    // DOM Elements
+    // DOM References
     const elements = {
       gridContainer: document.getElementById('gridContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
@@ -932,10 +883,7 @@ if __name__ == '__main__':
       
       startChecking: function(iframe, owner, name, title, spaceKey) {
         this.checkQueue[spaceKey] = {
-          iframe: iframe,
-          owner: owner,
-          name: name,
-          title: title,
+          iframe, owner, name, title,
           attempts: 0,
           status: 'loading'
         };
@@ -963,10 +911,8 @@ if __name__ == '__main__':
                                item.iframe.contentWindow.document.body;
             if (hasContent && item.iframe.contentWindow.document.body.innerHTML.length > 100) {
               const bodyText = item.iframe.contentWindow.document.body.textContent.toLowerCase();
-              if (bodyText.includes('forbidden') ||
-                  bodyText.includes('404') ||
-                  bodyText.includes('not found') ||
-                  bodyText.includes('error')) {
+              if (bodyText.includes('forbidden') || bodyText.includes('404') ||
+                  bodyText.includes('not found') || bodyText.includes('error')) {
                 item.status = 'error';
                 handleIframeError(item.iframe, item.owner, item.name, item.title);
               } else {
@@ -976,7 +922,7 @@ if __name__ == '__main__':
               return;
             }
           } catch(e) {
-            // Cross-origin => not necessarily an error
+            // cross-origin => not necessarily an error
           }
 
           const rect = item.iframe.getBoundingClientRect();
@@ -996,6 +942,7 @@ if __name__ == '__main__':
             delete this.checkQueue[spaceKey];
             return;
           }
+
           const nextDelay = this.checkInterval * Math.pow(1.5, item.attempts - 1);
           setTimeout(() => this.checkIframeStatus(spaceKey), nextDelay);
 
@@ -1016,7 +963,7 @@ if __name__ == '__main__':
       state.statsVisible = !state.statsVisible;
       elements.statsContent.classList.toggle('open', state.statsVisible);
       elements.statsToggle.textContent = state.statsVisible ? 'Hide Stats' : 'Show Stats';
-      
+
       if (state.statsVisible && state.topOwners.length > 0) {
         renderCreatorStats();
       }
@@ -1102,9 +1049,7 @@ if __name__ == '__main__':
         const timeoutPromise = new Promise((_, reject) =>
           setTimeout(() => reject(new Error('Request timeout')), 30000)
         );
-        const fetchPromise = fetch(
-          `/api/trending-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${state.itemsPerPage}`
-        );
+        const fetchPromise = fetch(`/api/trending-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${state.itemsPerPage}`);
         const response = await Promise.race([fetchPromise, timeoutPromise]);
         const data = await response.json();
 
@@ -1142,7 +1087,7 @@ if __name__ == '__main__':
       elements.pagination.innerHTML = '';
       const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
 
-      // Previous page
+      // Prev
       const prevButton = document.createElement('button');
       prevButton.className = 'pagination-button';
       prevButton.textContent = 'Previous';
@@ -1154,6 +1099,7 @@ if __name__ == '__main__':
       });
       elements.pagination.appendChild(prevButton);
 
+      // Middle pages
       const maxButtons = 7;
       let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons / 2));
       let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
@@ -1174,7 +1120,7 @@ if __name__ == '__main__':
         elements.pagination.appendChild(pageButton);
       }
 
-      // Next page
+      // Next
       const nextButton = document.createElement('button');
       nextButton.className = 'pagination-button';
       nextButton.textContent = 'Next';
@@ -1189,14 +1135,13 @@ if __name__ == '__main__':
 
     function handleIframeError(iframe, owner, name, title) {
       const container = iframe.parentNode;
-      
       const errorPlaceholder = document.createElement('div');
       errorPlaceholder.className = 'error-placeholder';
-      
+
       const errorMessage = document.createElement('p');
       errorMessage.textContent = `"${title}" space couldn't be loaded`;
       errorPlaceholder.appendChild(errorMessage);
-      
+
       const directLink = document.createElement('a');
       directLink.href = `https://huggingface.co/spaces/${owner}/${name}`;
       directLink.target = '_blank';
@@ -1209,12 +1154,12 @@ if __name__ == '__main__':
       directLink.style.borderRadius = '5px';
       directLink.style.fontWeight = '600';
       errorPlaceholder.appendChild(directLink);
-      
+
       iframe.style.display = 'none';
       container.appendChild(errorPlaceholder);
     }
 
-    // 카드 목록: 로봇 이모지로 대체
+    // renderGrid: 로봇 이모지 제거 -> rankBadge를 그 자리에 배치
     function renderGrid(spaces) {
       elements.gridContainer.innerHTML = '';
       
@@ -1239,75 +1184,64 @@ if __name__ == '__main__':
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
 
+          // 상단 header
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
-          // [이모지 + 제목 + ZERO GPU 배지] 
-          const spaceHeader = document.createElement('div');
-          spaceHeader.className = 'space-header';
-
-          // 🤖 이모지
-          const emojiAvatar = document.createElement('div');
-          emojiAvatar.className = 'emoji-avatar';
-          emojiAvatar.textContent = '🤖';
-          spaceHeader.appendChild(emojiAvatar);
+          // grid-header-top (rank + title + zero gpu)
+          const headerTop = document.createElement('div');
+          headerTop.className = 'grid-header-top';
 
-          // title + badge
-          const titleWrapper = document.createElement('div');
-          titleWrapper.style.display = 'flex';
-          titleWrapper.style.alignItems = 'center';
+          // 왼쪽: rank badge
+          const rankBadge = document.createElement('div');
+          rankBadge.className = 'rank-badge';
+          rankBadge.textContent = `#${rank}`;
+          headerTop.appendChild(rankBadge);
 
+          // 중간: title
           const titleEl = document.createElement('h3');
-          titleEl.className = 'space-title';
           titleEl.textContent = title;
           titleEl.title = title;
-          titleWrapper.appendChild(titleEl);
+          headerTop.appendChild(titleEl);
 
+          // 오른쪽(Zero GPU)
           const zeroGpuBadge = document.createElement('span');
-          zeroGpuBadge.className = 'zero-gpu-badge';
+          zeroGpuBadge.className = 'rank-badge'; 
+          zeroGpuBadge.style.backgroundColor = '#319795';
+          zeroGpuBadge.style.marginLeft = '10px';
           zeroGpuBadge.textContent = 'ZERO GPU';
-          titleWrapper.appendChild(zeroGpuBadge);
+          headerTop.appendChild(zeroGpuBadge);
 
-          spaceHeader.appendChild(titleWrapper);
-          headerDiv.appendChild(spaceHeader);
+          headerDiv.appendChild(headerTop);
 
-          // rank + author + likes
+          // 둘째줄: meta (owner / 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';
 
-          const leftMeta = document.createElement('div');
-          const rankBadge = document.createElement('div');
-          rankBadge.className = 'rank-badge';
-          rankBadge.textContent = `#${rank}`;
-          leftMeta.appendChild(rankBadge);
-
-          const authorSpan = document.createElement('span');
-          authorSpan.className = 'author-name';
-          authorSpan.style.marginLeft = '8px';
-          authorSpan.textContent = `by ${author_name}`;
-          leftMeta.appendChild(authorSpan);
-
-          metaInfo.appendChild(leftMeta);
+          const ownerEl = document.createElement('div');
+          ownerEl.className = 'owner-info';
+          ownerEl.textContent = `by ${author_name}`;
+          metaInfo.appendChild(ownerEl);
 
           const likesDiv = document.createElement('div');
-          likesDiv.className = 'likes-wrapper';
-          likesDiv.innerHTML = `<span class="likes-heart">♥</span><span>${likes_count}</span>`;
+          likesDiv.className = 'likes-counter';
+          likesDiv.innerHTML = '♥ <span>' + likes_count + '</span>';
           metaInfo.appendChild(likesDiv);
 
           headerDiv.appendChild(metaInfo);
-          gridItem.appendChild(headerDiv);
 
           if (description) {
             const descP = document.createElement('p');
-            descP.className = 'desc-text';
+            descP.style.fontSize = '0.9rem';
+            descP.style.marginTop = '6px';
+            descP.style.color = '#444';
             descP.textContent = description;
-            gridItem.appendChild(descP);
+            headerDiv.appendChild(descP);
           }
 
+          gridItem.appendChild(headerDiv);
+
+          // iframe container
           const content = document.createElement('div');
           content.className = 'grid-content';
 
@@ -1342,9 +1276,9 @@ if __name__ == '__main__':
           iframeContainer.appendChild(iframe);
           content.appendChild(iframeContainer);
 
+          // actions
           const actions = document.createElement('div');
           actions.className = 'grid-actions';
-
           const linkEl = document.createElement('a');
           linkEl.href = url;
           linkEl.target = '_blank';
@@ -1354,6 +1288,7 @@ if __name__ == '__main__':
 
           gridItem.appendChild(content);
           gridItem.appendChild(actions);
+
           elements.gridContainer.appendChild(gridItem);
 
         } catch (err) {
@@ -1362,6 +1297,7 @@ if __name__ == '__main__':
       });
     }
 
+    // Fixed Tab (예시)
     function renderFixedGrid() {
       fixedGridContainer.innerHTML = '';
 
@@ -1415,27 +1351,25 @@ if __name__ == '__main__':
           const headerTop = document.createElement('div');
           headerTop.className = 'grid-header-top';
 
-          // 이모지
-          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);
+          // rank
+          const rankBadge = document.createElement('div');
+          rankBadge.className = 'rank-badge';
+          rankBadge.textContent = `#${rank}`;
+          headerTop.appendChild(rankBadge);
 
+          // title
           const titleEl = document.createElement('h3');
           titleEl.textContent = title;
           titleEl.title = title;
-          leftWrapper.appendChild(titleEl);
-
-          headerTop.appendChild(leftWrapper);
+          headerTop.appendChild(titleEl);
 
-          const rankBadge = document.createElement('div');
-          rankBadge.className = 'rank-badge';
-          rankBadge.textContent = `#${rank}`;
-          headerTop.appendChild(rankBadge);
+          // zero gpu (임의)
+          const zeroBadge = document.createElement('div');
+          zeroBadge.className = 'rank-badge';
+          zeroBadge.style.backgroundColor = '#319795';
+          zeroBadge.style.marginLeft = '10px';
+          zeroBadge.textContent = 'ZERO GPU';
+          headerTop.appendChild(zeroBadge);
 
           header.appendChild(headerTop);
 
@@ -1506,7 +1440,6 @@ if __name__ == '__main__':
       });
     }
 
-    // Tab switching
     tabTrendingButton.addEventListener('click', () => {
       tabTrendingButton.classList.add('active');
       tabFixedButton.classList.remove('active');
@@ -1577,5 +1510,5 @@ if __name__ == '__main__':
 </html>
 ''')
 
-    # Flask run
+    # Flask Run
     app.run(host='0.0.0.0', port=7860)