Update app.py

app.py

@@ -32,15 +32,14 @@ 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 파라미터를 추가하여
-    GPU가 없는(=CPU 전용) 스페이스만 필터링
+    hardware=cpu 파라미터를 추가하여 GPU가 없는(=CPU 전용) 스페이스만 가져옴
     """
     try:
         url = "https://huggingface.co/api/spaces"
         params = {
             "limit": 10000,  # 더 많이 가져오기
             "hardware": "cpu"  # <-- Zero GPU(=CPU) 필터 적용
-            # "sort": "trending",  # 필요시 추가 (HF API 지원 여부에 따라)
+            # "sort": "trending",  # 필요 시 추가
         }
         response = requests.get(url, params=params, timeout=30)
 
@@ -54,7 +53,7 @@ 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))
 
@@ -66,7 +65,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  # 통계 산출용 (전체 CPU 스페이스)
             }
         else:
             print(f"Error fetching spaces: {response.status_code}")
@@ -94,23 +93,17 @@ 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
     """
-    # 1. Replace '.' with '-'
-    name = name.replace('.', '-')
-    # 2. Replace '_' with '-'
-    name = name.replace('_', '-')
-    # 3. Convert to lowercase
+    name = name.replace('.', '-').replace('_', '-')
     owner = owner.lower()
     name = name.lower()
-
     return f"https://{owner}-{name}.hf.space"
 
 # Get space details
 def get_space_details(space_data, index, offset):
     """
-    원본 코드에서 수정:
-    - description, avatar_url, author_name 등 추가 필드를 추출
+    Zero GPU 스페이스에서 필요한 정보(타이틀, owner, description, avatar_url 등)를 추출
     """
     try:
         if '/' in space_data.get('id', ''):
@@ -119,24 +112,17 @@ def get_space_details(space_data, index, offset):
             owner = space_data.get('owner', '')
             name = space_data.get('id', '')
 
-        # Ignore if contains None
+        # Ignore if 'None'
         if owner == 'None' or name == 'None':
             return None
 
-        # Construct URLs
         original_url = f"https://huggingface.co/spaces/{owner}/{name}"
         embed_url = transform_url(owner, name)
 
-        # Likes count
         likes_count = space_data.get('likes', 0)
-
-        # Title
         title = space_data.get('title') or name
-
-        # Description
         short_desc = space_data.get('description', '')
 
-        # User info (avatar, name)
         user_info = space_data.get('user', {})
         avatar_url = user_info.get('avatar_url', '')
         author_name = user_info.get('name') or owner
@@ -155,7 +141,7 @@ def get_space_details(space_data, index, offset):
         }
     except Exception as e:
         print(f"Error processing space data: {e}")
-        # Return basic object even if error occurs
+        # 최소한의 데이터라도 리턴
         return {
             'url': 'https://huggingface.co/spaces',
             'embedUrl': 'https://huggingface.co/spaces',
@@ -172,7 +158,8 @@ def get_space_details(space_data, index, offset):
 # Get owner statistics from all spaces
 def get_owner_stats(all_spaces):
     """
-    모든 스페이스에서 owner 등장 빈도 상위 30명 추출
+    all_spaces: Zero GPU(=CPU) 스페이스 목록(필터된 전체).
+    여기서 owner를 카운트하여 상위 30명 추출.
     """
     owners = []
     for space in all_spaces:
@@ -184,43 +171,36 @@ 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
 
-# Homepage route
 @app.route('/')
 def home():
     """
-    index.html 템플릿 렌더링 (메인 페이지)
+    index.html 템플릿 (프론트엔드) 로드
     """
     return render_template('index.html')
 
-# Zero-GPU spaces API (원본: 'trending-spaces' -> 이제 CPU only)
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
     """
-    hardware=cpu 스페이스 목록을 불러와 검색, 페이징, 통계 등을 적용
+    /api/trending-spaces
+    -> Zero GPU 스페이스 가져와서 검색, 페이징, 통계(오너 상위 30) 반환
     """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
-    limit = int(request.args.get('limit', 72))  # Default 72
+    limit = int(request.args.get('limit', 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()
@@ -230,7 +210,7 @@ def trending_spaces():
 
         results.append(space_info)
 
-    # Get owner statistics for all spaces
+    # 전체 CPU 스페이스를 대상으로 Top 30 오너 추출
     top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
 
     return jsonify({
@@ -245,10 +225,9 @@ if __name__ == '__main__':
     """
     서버 구동 시, templates/index.html 파일을 생성 후 Flask 실행
     """
-    # Create templates folder if not exists
     os.makedirs('templates', exist_ok=True)
 
-    # index.html 전체를 새로 작성
+    # index.html 생성 (깨진 이미지 대신 로봇 이모지 + 기존 전체 코드 유지)
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''<!DOCTYPE html>
 <html lang="en">
@@ -819,70 +798,7 @@ if __name__ == '__main__':
       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;
@@ -909,15 +825,14 @@ if __name__ == '__main__':
       
       <div class="mac-content">
         <div class="header">
-          <!-- 첫 번째 탭 제목을 Zero GPU Spaces로 변경 -->
-          <h1>ZeroGPU Spaces Leaderboard</h1>
-          <p>Discover Zero GPU(Shared A100) spaces from Hugging Face</p>
+          <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 -->
@@ -957,7 +872,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>
@@ -1009,7 +924,7 @@ if __name__ == '__main__':
       iframeStatuses: {}
     };
 
-    // Advanced iframe loader for better error detection
+    // Advanced iframe loader
     const iframeLoader = {
       checkQueue: {},
       maxAttempts: 5,
@@ -1029,29 +944,29 @@ if __name__ == '__main__':
       
       checkIframeStatus: function(spaceKey) {
         if (!this.checkQueue[spaceKey]) return;
-        
         const item = this.checkQueue[spaceKey];
         if (item.status !== 'loading') {
           delete this.checkQueue[spaceKey];
           return;
         }
         item.attempts++;
-        
+
         try {
           if (!item.iframe || !item.iframe.parentNode) {
             delete this.checkQueue[spaceKey];
             return;
           }
 
-          // Check if content loaded
           try {
-            const hasContent = item.iframe.contentWindow && 
-                               item.iframe.contentWindow.document && 
+            const hasContent = item.iframe.contentWindow &&
+                               item.iframe.contentWindow.document &&
                                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 {
@@ -1061,10 +976,9 @@ if __name__ == '__main__':
               return;
             }
           } catch(e) {
-            // Cross-origin issues can happen; not always an error
+            // Cross-origin => not necessarily an error
           }
 
-          // Check if iframe is visible
           const rect = item.iframe.getBoundingClientRect();
           if (rect.width > 50 && rect.height > 50 && item.attempts > 2) {
             item.status = 'success';
@@ -1072,7 +986,6 @@ if __name__ == '__main__':
             return;
           }
 
-          // If max attempts reached
           if (item.attempts >= this.maxAttempts) {
             if (item.iframe.offsetWidth > 0 && item.iframe.offsetHeight > 0) {
               item.status = 'success';
@@ -1083,8 +996,6 @@ if __name__ == '__main__':
             delete this.checkQueue[spaceKey];
             return;
           }
-
-          // Re-check after some delay
           const nextDelay = this.checkInterval * Math.pow(1.5, item.attempts - 1);
           setTimeout(() => this.checkIframeStatus(spaceKey), nextDelay);
 
@@ -1133,7 +1044,7 @@ if __name__ == '__main__':
             label: 'Number of Spaces',
             data: data,
             backgroundColor: colors,
-            borderColor: colors.map(color => color.replace('0.7', '1')),
+            borderColor: colors.map(color => color.replace('0.7','1')),
             borderWidth: 1
           }]
         },
@@ -1303,7 +1214,7 @@ if __name__ == '__main__':
       container.appendChild(errorPlaceholder);
     }
 
-    // 여기서부터 카드 HTML 구조 (Zero-GPU 전용) 렌더링
+    // 카드 목록: 로봇 이모지로 대체
     function renderGrid(spaces) {
       elements.gridContainer.innerHTML = '';
       
@@ -1328,21 +1239,20 @@ if __name__ == '__main__':
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
 
-          // 상단 헤더
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
-          // space-header (로봇 이모지 + 제목 + Zero GPU 배지)
+          // [이모지 + 제목 + 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);
 
-          // 제목+배지
+          // title + badge
           const titleWrapper = document.createElement('div');
           titleWrapper.style.display = 'flex';
           titleWrapper.style.alignItems = 'center';
@@ -1369,9 +1279,7 @@ if __name__ == '__main__':
           metaInfo.style.alignItems = 'center';
           metaInfo.style.marginTop = '6px';
 
-          // 왼쪽: rank + author
           const leftMeta = document.createElement('div');
-
           const rankBadge = document.createElement('div');
           rankBadge.className = 'rank-badge';
           rankBadge.textContent = `#${rank}`;
@@ -1385,7 +1293,6 @@ if __name__ == '__main__':
 
           metaInfo.appendChild(leftMeta);
 
-          // 오른쪽: likes
           const likesDiv = document.createElement('div');
           likesDiv.className = 'likes-wrapper';
           likesDiv.innerHTML = `<span class="likes-heart">♥</span><span>${likes_count}</span>`;
@@ -1394,7 +1301,6 @@ if __name__ == '__main__':
           headerDiv.appendChild(metaInfo);
           gridItem.appendChild(headerDiv);
 
-          // description
           if (description) {
             const descP = document.createElement('p');
             descP.className = 'desc-text';
@@ -1402,7 +1308,6 @@ if __name__ == '__main__':
             gridItem.appendChild(descP);
           }
 
-          // iframe container
           const content = document.createElement('div');
           content.className = 'grid-content';
 
@@ -1410,11 +1315,11 @@ if __name__ == '__main__':
           iframeContainer.className = 'iframe-container';
 
           const iframe = document.createElement('iframe');
-          iframe.src = embedUrl;  // transformed direct URL
+          iframe.src = embedUrl;
           iframe.title = title;
           iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
-          iframe.setAttribute('allowfullscreen', '');
-          iframe.setAttribute('frameborder', '0');
+          iframe.setAttribute('allowfullscreen','');
+          iframe.setAttribute('frameborder','0');
           iframe.loading = 'lazy';
 
           const spaceKey = `${owner}/${name}`;
@@ -1437,7 +1342,6 @@ if __name__ == '__main__':
           iframeContainer.appendChild(iframe);
           content.appendChild(iframeContainer);
 
-          // actions
           const actions = document.createElement('div');
           actions.className = 'grid-actions';
 
@@ -1446,11 +1350,10 @@ 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);
-
           elements.gridContainer.appendChild(gridItem);
 
         } catch (err) {
@@ -1460,7 +1363,6 @@ if __name__ == '__main__':
     }
 
     function renderFixedGrid() {
-      // Fixed Tab 예시용 (원본 코드 예시 유지)
       fixedGridContainer.innerHTML = '';
 
       const staticSpaces = [
@@ -1513,7 +1415,7 @@ 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';
@@ -1563,8 +1465,8 @@ if __name__ == '__main__':
           iframe.src = "https://" + owner.toLowerCase() + "-" + name.toLowerCase() + ".hf.space";
           iframe.title = title;
           iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
-          iframe.setAttribute('allowfullscreen', '');
-          iframe.setAttribute('frameborder', '0');
+          iframe.setAttribute('allowfullscreen','');
+          iframe.setAttribute('frameborder','0');
           iframe.loading = 'lazy';
 
           const spaceKey = `${owner}/${name}`;
@@ -1675,6 +1577,5 @@ if __name__ == '__main__':
 </html>
 ''')
 
-    # Flask 앱 실행 (포트 7860)
+    # Flask run
     app.run(host='0.0.0.0', port=7860)
-