Update app.py

app.py

@@ -7,6 +7,19 @@ from collections import Counter
 
 app = Flask(__name__)
 
+# -------------------------------------------------------
+# (1) RUNNING 상태 필터링을 위한 헬퍼 함수 추가
+# -------------------------------------------------------
+def is_running(space):
+    """
+    Hugging Face Space의 runtime.stage 혹은 deploymentStatus.stage 가
+    'RUNNING' 인지 판별한다.
+    """
+    stage = (space.get("runtime", {}) or {}).get("stage", "")
+    if not stage:
+        stage = (space.get("deploymentStatus", {}) or {}).get("stage", "")
+    return stage.upper() == "RUNNING"
+
 # Generate dummy spaces in case of error
 def generate_dummy_spaces(count):
     """
@@ -29,27 +42,31 @@ def generate_dummy_spaces(count):
         })
     return spaces
 
-# Function to fetch Zero-GPU (CPU-based) Spaces from Huggingface with pagination
-def fetch_trending_spaces(offset=0, limit=72):
+# -------------------------------------------------------
+# (2) Fetch Trending Spaces (RUNNING 상태만)
+# -------------------------------------------------------
+def fetch_trending_spaces(offset=0, limit=24):
     """
-    Trending용 CPU 스페이스 목록 가져오기 (정렬은 Hugging Face 기본 정렬)
+    Trending용 CPU 스페이스 목록 가져오기 (정렬은 Hugging Face 기본 정렬).
+    'runtime.stage'가 RUNNING 인 스페이스만 반환.
     """
     try:
         url = "https://huggingface.co/api/spaces"
         params = {
             "limit": 10000,  # 더 많이 가져오기
-            "hardware": "cpu"  # <-- Zero GPU(=CPU) 필터 적용
+            "hardware": "cpu"
         }
         response = requests.get(url, params=params, timeout=30)
 
         if response.status_code == 200:
             spaces = response.json()
 
-            # owner나 id가 'None'인 경우 제외
+            # owner/id가 None이거나, BUILDING/STOPPED 상태인 경우 제외
             filtered_spaces = [
                 space for space in spaces
                 if space.get('owner') != 'None'
                    and space.get('id', '').split('/', 1)[0] != 'None'
+                   and is_running(space)  # RUNNING 상태만!
             ]
 
             # 전체 목록에 대해 "글로벌 랭크"를 매긴다 (1부터 시작)
@@ -60,7 +77,7 @@ def fetch_trending_spaces(offset=0, limit=72):
             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기반(RUNNING) 스페이스 총 {len(filtered_spaces)}개, "
                   f"요청 구간 {start}~{end-1} 반환")
 
             return {
@@ -92,50 +109,51 @@ def fetch_trending_spaces(offset=0, limit=72):
             'all_spaces': generate_dummy_spaces(500)
         }
 
-def fetch_latest_spaces(offset=0, limit=72):
+# -------------------------------------------------------
+# (3) Fetch Latest Spaces (RUNNING 상태만)
+# -------------------------------------------------------
+def fetch_latest_spaces(offset=0, limit=24):
     """
-    'createdAt' 기준 내림차순으로 최근 스페이스 500개를 추린 뒤,
-    offset ~ offset+limit 개만 반환
+    'createdAt' 기준 내림차순으로 최근 스페이스를 가져오고,
+    그 중 RUNNING 상태인 것만 필터링 후 상위 500개를 대상으로 페이징.
     """
     try:
         url = "https://huggingface.co/api/spaces"
         params = {
-            "limit": 10000,  # 충분히 많이 가져옴
+            "limit": 10000,
             "hardware": "cpu"
         }
         response = requests.get(url, params=params, timeout=30)
 
         if response.status_code == 200:
             spaces = response.json()
-            
-            # owner나 id가 'None'인 경우 제외
+
+            # owner/id가 None이거나 RUNNING이 아닌 경우 제외
             filtered_spaces = [
                 space for space in spaces
                 if space.get('owner') != 'None'
                    and space.get('id', '').split('/', 1)[0] != 'None'
+                   and is_running(space)
             ]
-            
-            # createdAt 내림차순 정렬
-            # createdAt 예: "2023-01-01T00:00:00.000Z"
-            # 문자열 비교도 가능하지만, 안정성을 위해 time 파싱 후 비교할 수도 있음
+
+            # createdAt 내림차순
             def parse_time(sp):
                 return sp.get('createdAt') or ''
-            
-            # 내림차순
             filtered_spaces.sort(key=parse_time, reverse=True)
-            
+
             # 상위 500개만 추리기
             truncated = filtered_spaces[:500]
-            
+
             # 필요한 구간 슬라이싱
             start = min(offset, len(truncated))
             end = min(offset + limit, len(truncated))
-            
-            print(f"[fetch_latest_spaces] CPU기반 스페이스 총 {len(spaces)}개 중 필터 후 {len(filtered_spaces)}개, 상위 500개 중 {start}~{end-1} 반환")
+
+            print(f"[fetch_latest_spaces] RUNNING 스페이스 필터 후 {len(filtered_spaces)}개, "
+                  f"상위 500개 중 {start}~{end-1} 반환")
 
             return {
                 'spaces': truncated[start:end],
-                'total': len(truncated),  # 500 이하
+                'total': len(truncated),
                 'offset': offset,
                 'limit': limit
             }
@@ -238,12 +256,10 @@ def get_space_details(space_data, index, offset):
 # Get owner statistics from all spaces (for the "Trending" tab's top owners)
 def get_owner_stats(all_spaces):
     """
-    상위 500위(global_rank <= 500) 이내에 배치된 스페이스들의 owner를 추출해,
-    각 owner가 몇 번 등장했는지 센 뒤 상위 30명만 반환
+    상위 500위(global_rank <= 500) 이내의 RUNNING 스페이스들 중,
+    각 owner가 몇 번 등장하는지 세고, 그 중 상위 30명만 반환
     """
-    # Top 500
     top_500 = [s for s in all_spaces if s.get('global_rank', 999999) <= 500]
-
     owners = []
     for space in top_500:
         if '/' in space.get('id', ''):
@@ -253,10 +269,7 @@ def get_owner_stats(all_spaces):
         if owner and owner != 'None':
             owners.append(owner)
 
-    # Count occurrences of each owner in top 500
     owner_counts = Counter(owners)
-
-    # Get top 30 owners by count
     top_owners = owner_counts.most_common(30)
     return top_owners
 
@@ -272,16 +285,15 @@ def home():
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
     """
-    hardware=cpu 스페이스 목록을 불러와 검색, 페이징, 통계 등을 적용 (기존 'Trending')
+    hardware=cpu 스페이스 중 RUNNING 상태만 검색 + 페이징 + 통계
+    (기존 'Trending')
     """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
-    limit = int(request.args.get('limit', 72))
+    limit = int(request.args.get('limit', 24))  # 24개씩 로드로 변경
 
-    # 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)
@@ -298,7 +310,6 @@ def trending_spaces():
 
         results.append(space_info)
 
-    # 오너 통계 (Top 500 → Top 30)
     top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
 
     return jsonify({
@@ -313,11 +324,11 @@ def trending_spaces():
 @app.route('/api/latest-spaces', methods=['GET'])
 def latest_spaces():
     """
-    hardware=cpu 스페이스 중에서 createdAt 기준으로 최신순 500개를 페이징, 검색
+    hardware=cpu 스페이스 중 RUNNING 상태만, createdAt 기준 최신순 500개 내에서 페이징
     """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
-    limit = int(request.args.get('limit', 72))
+    limit = int(request.args.get('limit', 24))  # 24개씩 로드로 변경
 
     spaces_data = fetch_latest_spaces(offset, limit)
 
@@ -353,6 +364,7 @@ if __name__ == '__main__':
 
     # index.html 전체를 새로 작성
     with open('templates/index.html', 'w', encoding='utf-8') as f:
+        # 아래 HTML/JS에는 iframe 내부 "building" 텍스트를 탐지하도록 수정된 부분이 포함됨
         f.write('''<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -360,9 +372,8 @@ if __name__ == '__main__':
   <title>Huggingface Zero-GPU Spaces</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
-    /* Google Fonts & Base Styling */
+    /* (생략) 기존 CSS 동일하되 itemsPerPage만 수정 */
     @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
-    
     :root {
       --pastel-pink: #FFD6E0;
       --pastel-blue: #C5E8FF;
@@ -370,27 +381,24 @@ if __name__ == '__main__':
       --pastel-yellow: #FFF2CC;
       --pastel-green: #C7F5D9;
       --pastel-orange: #FFE0C3;
-      
+
       --mac-window-bg: rgba(250, 250, 250, 0.85);
       --mac-toolbar: #F5F5F7;
       --mac-border: #E2E2E2;
       --mac-button-red: #FF5F56;
       --mac-button-yellow: #FFBD2E;
       --mac-button-green: #27C93F;
-      
+
       --text-primary: #333;
       --text-secondary: #666;
       --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }
-    
     * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
+      margin: 0; padding: 0; box-sizing: border-box;
     }
-    
     body {
-      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+                   Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       line-height: 1.6;
       color: var(--text-primary);
       background-color: #f8f9fa;
@@ -398,13 +406,10 @@ if __name__ == '__main__':
       min-height: 100vh;
       padding: 2rem;
     }
-    
     .container {
       max-width: 1600px;
       margin: 0 auto;
     }
-    
-    /* Mac OS Window Styling */
     .mac-window {
       background-color: var(--mac-window-bg);
       border-radius: 10px;
@@ -414,587 +419,237 @@ if __name__ == '__main__':
       margin-bottom: 2rem;
       border: 1px solid var(--mac-border);
     }
-    
     .mac-toolbar {
-      display: flex;
-      align-items: center;
+      display: flex; align-items: center;
       padding: 10px 15px;
       background-color: var(--mac-toolbar);
       border-bottom: 1px solid var(--mac-border);
     }
-    
     .mac-buttons {
-      display: flex;
-      gap: 8px;
-      margin-right: 15px;
+      display: flex; gap: 8px; margin-right: 15px;
     }
-    
     .mac-button {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      cursor: default;
+      width: 12px; height: 12px; border-radius: 50%; cursor: default;
     }
-    
-    .mac-close {
-      background-color: var(--mac-button-red);
-    }
-    
-    .mac-minimize {
-      background-color: var(--mac-button-yellow);
-    }
-    
-    .mac-maximize {
-      background-color: var(--mac-button-green);
-    }
-    
+    .mac-close { background-color: var(--mac-button-red); }
+    .mac-minimize { background-color: var(--mac-button-yellow); }
+    .mac-maximize { background-color: var(--mac-button-green); }
     .mac-title {
-      flex-grow: 1;
-      text-align: center;
-      font-size: 0.9rem;
-      color: var(--text-secondary);
+      flex-grow: 1; text-align: center; font-size: 0.9rem; color: var(--text-secondary);
     }
-    
     .mac-content {
       padding: 20px;
     }
-    
-    /* Header Styling */
-    .header {
-      text-align: center;
-      margin-bottom: 1.5rem;
-      position: relative;
-    }
-    
+    .header { text-align: center; margin-bottom: 1.5rem; position: relative; }
     .header h1 {
-      font-size: 2.2rem;
-      font-weight: 700;
-      margin: 0;
-      color: #2d3748;
-      letter-spacing: -0.5px;
-    }
-    
-    .header p {
-      color: var(--text-secondary);
-      margin-top: 0.5rem;
-      font-size: 1.1rem;
-    }
-    
-    /* Tabs Styling */
-    .tab-nav {
-      display: flex;
-      justify-content: center;
-      margin-bottom: 1.5rem;
-    }
-    
+      font-size: 2.2rem; font-weight: 700; margin: 0; color: #2d3748; letter-spacing: -0.5px;
+    }
+    .header p { color: var(--text-secondary); margin-top: 0.5rem; font-size: 1.1rem; }
+    .tab-nav { display: flex; justify-content: center; margin-bottom: 1.5rem; }
     .tab-button {
-      border: none;
-      background-color: #edf2f7;
-      color: var(--text-primary);
-      padding: 10px 20px;
-      margin: 0 5px;
-      cursor: pointer;
-      border-radius: 5px;
-      font-size: 1rem;
-      font-weight: 600;
-    }
-    
-    .tab-button.active {
-      background-color: var(--pastel-purple);
-      color: #fff;
-    }
-    
-    .tab-content {
-      display: none;
-    }
-    
-    .tab-content.active {
-      display: block;
-    }
-    
-    /* Controls Styling */
+      border: none; background-color: #edf2f7; color: var(--text-primary);
+      padding: 10px 20px; margin: 0 5px; cursor: pointer; border-radius: 5px;
+      font-size: 1rem; font-weight: 600;
+    }
+    .tab-button.active { background-color: var(--pastel-purple); color: #fff; }
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
     .search-bar {
-      display: flex;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      background-color: white;
-      border-radius: 30px;
-      padding: 5px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    
+      display: flex; align-items: center; margin-bottom: 1.5rem; background-color: white;
+      border-radius: 30px; padding: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+      max-width: 600px; margin-left: auto; margin-right: auto;
+    }
     .search-bar input {
-      flex-grow: 1;
-      border: none;
-      padding: 12px 20px;
-      font-size: 1rem;
-      outline: none;
-      background: transparent;
-      border-radius: 30px;
-    }
-    
+      flex-grow: 1; border: none; padding: 12px 20px; font-size: 1rem; outline: none;
+      background: transparent; border-radius: 30px;
+    }
     .search-bar .refresh-btn {
-      background-color: var(--pastel-green);
-      color: #1a202c;
-      border: none;
-      border-radius: 30px;
-      padding: 10px 20px;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    
+      background-color: var(--pastel-green); color: #1a202c; border: none; border-radius: 30px;
+      padding: 10px 20px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
+      display: flex; align-items: center; gap: 8px;
+    }
     .search-bar .refresh-btn:hover {
-      background-color: #9ee7c0;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      background-color: #9ee7c0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
-    
     .refresh-icon {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      border: 2px solid #1a202c;
-      border-top-color: transparent;
-      border-radius: 50%;
+      display: inline-block; width: 16px; height: 16px;
+      border: 2px solid #1a202c; border-top-color: transparent; border-radius: 50%;
       animation: none;
     }
-    
-    .refreshing .refresh-icon {
-      animation: spin 1s linear infinite;
-    }
-    
+    .refreshing .refresh-icon { animation: spin 1s linear infinite; }
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
-    
-    /* Grid Styling */
     .grid-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 2rem;
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+      gap: 1.5rem; margin-bottom: 2rem;
     }
-    
     .grid-item {
-      height: 500px;
-      position: relative;
-      overflow: hidden;
-      transition: all 0.3s ease;
-      border-radius: 15px;
+      height: 500px; position: relative; overflow: hidden; transition: all 0.3s ease; border-radius: 15px;
     }
-    
     .grid-item:nth-child(6n+1) { background-color: var(--pastel-pink); }
     .grid-item:nth-child(6n+2) { background-color: var(--pastel-blue); }
     .grid-item:nth-child(6n+3) { background-color: var(--pastel-purple); }
     .grid-item:nth-child(6n+4) { background-color: var(--pastel-yellow); }
     .grid-item:nth-child(6n+5) { background-color: var(--pastel-green); }
     .grid-item:nth-child(6n+6) { background-color: var(--pastel-orange); }
-    
     .grid-item:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+      transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
     }
-    
     .grid-header {
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      background-color: rgba(255, 255, 255, 0.7);
-      backdrop-filter: blur(5px);
+      padding: 15px; display: flex; flex-direction: column;
+      background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px);
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
-    
     .grid-header-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
+      display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
     }
-    
     .rank-badge {
-      background-color: #1a202c;
-      color: white;
-      font-size: 0.8rem;
-      font-weight: 600;
-      padding: 4px 8px;
-      border-radius: 50px;
-      display: inline-block;
-    }
-    
+      background-color: #1a202c; color: white; font-size: 0.8rem; font-weight: 600;
+      padding: 4px 8px; border-radius: 50px; display: inline-block;
+    }
     .grid-header h3 {
-      margin: 0;
-      font-size: 1.2rem;
-      font-weight: 700;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      margin: 0; font-size: 1.2rem; font-weight: 700;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
-    
     .grid-meta {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 0.9rem;
-    }
-    
-    .owner-info {
-      color: var(--text-secondary);
-      font-weight: 500;
+      display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;
     }
-    
+    .owner-info { color: var(--text-secondary); font-weight: 500; }
     .likes-counter {
-      display: flex;
-      align-items: center;
-      color: #e53e3e;
-      font-weight: 600;
+      display: flex; align-items: center; color: #e53e3e; font-weight: 600;
     }
-    
-    .likes-counter span {
-      margin-left: 4px;
-    }
-    
+    .likes-counter span { margin-left: 4px; }
     .grid-actions {
-      padding: 10px 15px;
-      text-align: right;
+      padding: 10px 15px; text-align: right;
       background-color: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(5px);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 10;
-      display: flex;
-      justify-content: flex-end;
-    }
-    
+      position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
+      display: flex; justify-content: flex-end;
+    }
     .open-link {
-      text-decoration: none;
-      color: #2c5282;
-      font-weight: 600;
-      padding: 5px 10px;
-      border-radius: 5px;
-      transition: all 0.2s;
+      text-decoration: none; color: #2c5282; font-weight: 600;
+      padding: 5px 10px; border-radius: 5px; transition: all 0.2s;
       background-color: rgba(237, 242, 247, 0.8);
     }
-    
-    .open-link:hover {
-      background-color: #e2e8f0;
-    }
-    
+    .open-link:hover { background-color: #e2e8f0; }
     .grid-content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       padding-top: 85px; /* Header height */
       padding-bottom: 45px; /* Actions height */
     }
-    
     .iframe-container {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      position: relative;
+      width: 100%; height: 100%; overflow: hidden; position: relative;
     }
-    
-    /* Apply 70% scaling to iframes */
     .grid-content iframe {
-      transform: scale(0.7);
-      transform-origin: top left;
-      width: 142.857%;
-      height: 142.857%;
-      border: none;
-      border-radius: 0;
-    }
-    
+      transform: scale(0.7); transform-origin: top left;
+      width: 142.857%; height: 142.857%; border: none; border-radius: 0;
+    }
     .error-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 20px;
-      background-color: rgba(255, 255, 255, 0.9);
-      text-align: center;
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      display: flex; flex-direction: column; justify-content: center; align-items: center;
+      padding: 20px; background-color: rgba(255, 255, 255, 0.9); text-align: center;
     }
-    
     .error-emoji {
-      font-size: 6rem;
-      margin-bottom: 1.5rem;
-      animation: bounce 1s infinite alternate;
+      font-size: 6rem; margin-bottom: 1.5rem; animation: bounce 1s infinite alternate;
       text-shadow: 0 10px 20px rgba(0,0,0,0.1);
     }
-    
     @keyframes bounce {
-      from {
-        transform: translateY(0px) scale(1);
-      }
-      to {
-        transform: translateY(-15px) scale(1.1);
-      }
+      from { transform: translateY(0px) scale(1); }
+      to { transform: translateY(-15px) scale(1.1); }
     }
-    
-    /* Pagination Styling */
     .pagination {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-      margin: 2rem 0;
+      display: flex; justify-content: center; align-items: center; gap: 10px; margin: 2rem 0;
     }
-    
     .pagination-button {
-      background-color: white;
-      border: none;
-      padding: 10px 20px;
-      border-radius: 10px;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      color: var(--text-primary);
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+      background-color: white; border: none; padding: 10px 20px; border-radius: 10px;
+      font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
+      color: var(--text-primary); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     }
-    
     .pagination-button:hover {
-      background-color: #f8f9fa;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      background-color: #f8f9fa; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }
-    
     .pagination-button.active {
-      background-color: var(--pastel-purple);
-      color: #4a5568;
+      background-color: var(--pastel-purple); color: #4a5568;
     }
-    
     .pagination-button:disabled {
-      background-color: #edf2f7;
-      color: #a0aec0;
-      cursor: default;
-      box-shadow: none;
+      background-color: #edf2f7; color: #a0aec0; cursor: default; box-shadow: none;
     }
-    
-    /* Loading Indicator */
     .loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(5px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
-    
-    .loading-content {
-      text-align: center;
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px);
+      display: flex; justify-content: center; align-items: center; z-index: 1000;
     }
-    
+    .loading-content { text-align: center; }
     .loading-spinner {
-      width: 60px;
-      height: 60px;
-      border: 5px solid #e2e8f0;
-      border-top-color: var(--pastel-purple);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin: 0 auto 15px;
-    }
-    
+      width: 60px; height: 60px;
+      border: 5px solid #e2e8f0; border-top-color: var(--pastel-purple);
+      border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px;
+    }
     .loading-text {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: #4a5568;
+      font-size: 1.2rem; font-weight: 600; color: #4a5568;
     }
-    
     .loading-error {
-      display: none;
-      margin-top: 10px;
-      color: #e53e3e;
-      font-size: 0.9rem;
-    }
-    
-    /* Stats window styling */
-    .stats-window {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
+      display: none; margin-top: 10px; color: #e53e3e; font-size: 0.9rem;
     }
-    
+    .stats-window { margin-top: 2rem; margin-bottom: 2rem; }
     .stats-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1rem;
+      display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
     }
-    
     .stats-title {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: #2d3748;
+      font-size: 1.5rem; font-weight: 700; color: #2d3748;
     }
-    
     .stats-toggle {
-      background-color: var(--pastel-blue);
-      border: none;
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    
-    .stats-toggle:hover {
-      background-color: var(--pastel-purple);
-    }
-    
+      background-color: var(--pastel-blue); border: none; padding: 8px 16px;
+      border-radius: 20px; font-weight: 600; cursor: pointer; transition: all 0.2s;
+    }
+    .stats-toggle:hover { background-color: var(--pastel-purple); }
     .stats-content {
-      background-color: white;
-      border-radius: 10px;
-      padding: 20px;
-      box-shadow: var(--box-shadow);
-      max-height: 0;
-      overflow: hidden;
+      background-color: white; border-radius: 10px; padding: 20px;
+      box-shadow: var(--box-shadow); max-height: 0; overflow: hidden;
       transition: max-height 0.5s ease-out;
     }
-    
-    .stats-content.open {
-      max-height: 600px;
-    }
-    
-    .chart-container {
-      width: 100%;
-      height: 500px;
-    }
-    
-    /* Responsive Design */
+    .stats-content.open { max-height: 600px; }
+    .chart-container { width: 100%; height: 500px; }
     @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;
+      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;
     }
-
-    /* 추가 레이아웃 수정(아바타, ZERO GPU 뱃지 등)을 위해 
-       아래 클래스들을 일부 추가/수정할 수 있으나 여기서는 생략 */
-    
-    /* 다음 부분은 Zero GPU Spaces용 카드 구조에서 활용 */
     .space-header {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 4px;
+      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;
+      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;
+      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;
+      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;
+      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;
+      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; }
   </style>
 </head>
 <body>
@@ -1008,20 +663,20 @@ if __name__ == '__main__':
         </div>
         <div class="mac-title">Huggingface Explorer</div>
       </div>
-      
+
       <div class="mac-content">
         <div class="header">
           <h1>ZeroGPU Spaces Leaderboard</h1>
           <p>Discover 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="tabLatestButton" class="tab-button">Latest Releases</button>
           <button id="tabFixedButton" class="tab-button">Picks</button>
         </div>
-        
+
         <!-- Trending(Zero GPU) Tab Content -->
         <div id="trendingTab" class="tab-content active">
           <div class="stats-window mac-window">
@@ -1045,7 +700,7 @@ if __name__ == '__main__':
               </div>
             </div>
           </div>
-          
+
           <div class="search-bar">
             <input type="text" id="searchInputTrending" placeholder="Search by name, owner, or description..." />
             <button id="refreshButtonTrending" class="refresh-btn">
@@ -1053,12 +708,11 @@ if __name__ == '__main__':
               Refresh
             </button>
           </div>
-          
+
           <div id="gridContainerTrending" class="grid-container"></div>
-          
           <div id="paginationTrending" class="pagination"></div>
         </div>
-        
+
         <!-- Latest Releases Tab Content -->
         <div id="latestTab" class="tab-content">
           <div class="search-bar">
@@ -1068,20 +722,19 @@ if __name__ == '__main__':
               Refresh
             </button>
           </div>
-          
+
           <div id="gridContainerLatest" class="grid-container"></div>
-          
           <div id="paginationLatest" class="pagination"></div>
         </div>
-        
-        <!-- Fixed Tab Content (기존 예시 유지) -->
+
+        <!-- Fixed Tab Content -->
         <div id="fixedTab" class="tab-content">
           <div id="fixedGrid" class="grid-container"></div>
         </div>
       </div>
     </div>
   </div>
-  
+
   <div id="loadingIndicator" class="loading">
     <div class="loading-content">
       <div class="loading-spinner"></div>
@@ -1091,7 +744,7 @@ if __name__ == '__main__':
       </div>
     </div>
   </div>
-  
+
   <script>
     // ------------------------------------
     // GLOBAL STATE & COMMON FUNCTIONS
@@ -1103,7 +756,7 @@ if __name__ == '__main__':
     function setLoading(isLoading) {
       globalState.isLoading = isLoading;
       document.getElementById('loadingIndicator').style.display = isLoading ? 'flex' : 'none';
-      
+
       const refreshButtons = document.querySelectorAll('.refresh-btn');
       refreshButtons.forEach(btn => {
         if (isLoading) {
@@ -1112,7 +765,7 @@ if __name__ == '__main__':
           btn.classList.remove('refreshing');
         }
       });
-      
+
       if (isLoading) {
         clearTimeout(globalState.loadingTimeout);
         globalState.loadingTimeout = setTimeout(() => {
@@ -1123,6 +776,8 @@ if __name__ == '__main__':
         document.getElementById('loadingError').style.display = 'none';
       }
     }
+
+    // iframe 에러 표시
     function handleIframeError(iframe, owner, name, title) {
       const container = iframe.parentNode;
       const errorPlaceholder = document.createElement('div');
@@ -1150,13 +805,13 @@ if __name__ == '__main__':
     }
 
     // ------------------------------------
-    // IFRAME LOADER (공통)
+    // IFRAME LOADER
     // ------------------------------------
     const iframeLoader = {
       checkQueue: {},
       maxAttempts: 5,
       checkInterval: 5000,
-      
+
       startChecking: function(iframe, owner, name, title, spaceKey) {
         this.checkQueue[spaceKey] = {
           iframe: iframe,
@@ -1168,45 +823,59 @@ if __name__ == '__main__':
         };
         this.checkIframeStatus(spaceKey);
       },
-      
+
       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) {
+            if (hasContent) {
               const bodyText = item.iframe.contentWindow.document.body.textContent.toLowerCase();
+
+              // (4) "building" 텍스트가 포함되면 즉시 에러 처리
+              if (bodyText.includes('building')) {
+                item.status = 'error';
+                handleIframeError(item.iframe, item.owner, item.name, item.title);
+                delete this.checkQueue[spaceKey];
+                return;
+              }
+
               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 {
+                delete this.checkQueue[spaceKey];
+                return;
+              }
+
+              // 내용이 어느 정도 있으면 성공 처리
+              if (item.iframe.contentWindow.document.body.innerHTML.length > 100) {
                 item.status = 'success';
+                delete this.checkQueue[spaceKey];
+                return;
               }
-              delete this.checkQueue[spaceKey];
-              return;
             }
           } catch(e) {
-            // Cross-origin issues can happen; not always an error
+            // Cross-origin 등의 이유로 접근이 막힌 경우
+            // => 여러 번 재시도
           }
 
-          // Check if iframe is visible
+          // 아이프레임이 로딩된 듯 보이면
           const rect = item.iframe.getBoundingClientRect();
           if (rect.width > 50 && rect.height > 50 && item.attempts > 2) {
             item.status = 'success';
@@ -1214,7 +883,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';
@@ -1226,7 +894,6 @@ if __name__ == '__main__':
             return;
           }
 
-          // Re-check after some delay
           const nextDelay = this.checkInterval * Math.pow(1.5, item.attempts - 1);
           setTimeout(() => this.checkIframeStatus(spaceKey), nextDelay);
 
@@ -1249,7 +916,7 @@ if __name__ == '__main__':
     const trendingState = {
       spaces: [],
       currentPage: 0,
-      itemsPerPage: 72,
+      itemsPerPage: 24, // (3) 한 페이지 24개로 축소
       totalItems: 0,
       topOwners: [],
       iframeStatuses: {}
@@ -1265,7 +932,6 @@ if __name__ == '__main__':
     };
 
     let chartInstance = null;
-
     trendingElements.statsToggle.addEventListener('click', () => {
       const isOpen = trendingElements.statsContent.classList.toggle('open');
       trendingElements.statsToggle.textContent = isOpen ? 'Hide Stats' : 'Show Stats';
@@ -1368,7 +1034,6 @@ if __name__ == '__main__':
         renderTrendingGrid(trendingState.spaces);
         renderTrendingPagination();
 
-        // 통계창 열려있다면 새 데이터로 갱신
         if (trendingElements.statsContent.classList.contains('open') && trendingState.topOwners.length > 0) {
           renderCreatorStats(trendingState.topOwners);
         }
@@ -1415,7 +1080,6 @@ if __name__ == '__main__':
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
 
-          // 상단 헤더
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
@@ -1587,7 +1251,7 @@ if __name__ == '__main__':
     const latestState = {
       spaces: [],
       currentPage: 0,
-      itemsPerPage: 72,
+      itemsPerPage: 24, // (3) 한 페이지 24개로 축소
       totalItems: 0,
       iframeStatuses: {}
     };
@@ -1659,13 +1323,11 @@ if __name__ == '__main__':
             description, avatar_url, author_name, embedUrl
           } = item;
 
-          // rank가 없으므로 Latest 탭에서는 offset+index+1 형태로 표시
           const computedRank = latestState.currentPage * latestState.itemsPerPage + (index + 1);
 
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
 
-          // 상단 헤더
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
@@ -1844,7 +1506,7 @@ if __name__ == '__main__':
           title: "Spaces Research Analysis",
           likes_count: 0,
           owner: "ginipick",
-          name: "3D-LLAMA",          
+          name: "3D-LLAMA",
           rank: 1
         },
         {
@@ -1852,7 +1514,7 @@ if __name__ == '__main__':
           title: "Spaces Research ",
           likes_count: 0,
           owner: "ginipick",
-          name: "3D-LLAMA",          
+          name: "3D-LLAMA",
           rank: 2
         },
         {
@@ -1888,7 +1550,6 @@ 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';
@@ -2019,9 +1680,6 @@ if __name__ == '__main__':
       renderFixedGrid();
     });
 
-    // ------------------------------------
-    // EVENT LISTENERS
-    // ------------------------------------
     trendingElements.searchInput.addEventListener('input', () => {
       clearTimeout(trendingState.searchTimeout);
       trendingState.searchTimeout = setTimeout(() => loadTrending(0), 300);
@@ -2052,7 +1710,6 @@ if __name__ == '__main__':
     setTimeout(() => {
       if (globalState.isLoading) {
         setLoading(false);
-        // 타임아웃 시 메시지 표시
         trendingElements.gridContainer.innerHTML = `
           <div style="grid-column: 1/-1; text-align: center; padding: 40px;">
             <div style="font-size: 3rem; margin-bottom: 20px;">⏱️</div>
@@ -2070,8 +1727,6 @@ if __name__ == '__main__':
 </html>
 ''')
 
-
-
-if __name__ == '__main__':
     port = int(os.environ.get("PORT", 7860))
+    print(f"===== Application Startup at {time.strftime('%Y-%m-%d %H:%M:%S')} =====")
     app.run(host='0.0.0.0', port=port)