Update app.py

app.py

@@ -32,8 +32,7 @@ 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 전용) 스페이스만 필터링
+    Trending용 CPU 스페이스 목록 가져오기 (정렬은 Hugging Face 기본 정렬)
     """
     try:
         url = "https://huggingface.co/api/spaces"
@@ -93,6 +92,70 @@ def fetch_trending_spaces(offset=0, limit=72):
             'all_spaces': generate_dummy_spaces(500)
         }
 
+def fetch_latest_spaces(offset=0, limit=72):
+    """
+    'createdAt' 기준 내림차순으로 최근 스페이스 500개를 추린 뒤,
+    offset ~ offset+limit 개만 반환
+    """
+    try:
+        url = "https://huggingface.co/api/spaces"
+        params = {
+            "limit": 10000,  # 충분히 많이 가져옴
+            "hardware": "cpu"
+        }
+        response = requests.get(url, params=params, timeout=30)
+
+        if response.status_code == 200:
+            spaces = response.json()
+            
+            # owner나 id가 'None'인 경우 제외
+            filtered_spaces = [
+                space for space in spaces
+                if space.get('owner') != 'None'
+                   and space.get('id', '').split('/', 1)[0] != 'None'
+            ]
+            
+            # createdAt 내림차순 정렬
+            # createdAt 예: "2023-01-01T00:00:00.000Z"
+            # 문자열 비교도 가능하지만, 안정성을 위해 time 파싱 후 비교할 수도 있음
+            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} 반환")
+
+            return {
+                'spaces': truncated[start:end],
+                'total': len(truncated),  # 500 이하
+                'offset': offset,
+                'limit': limit
+            }
+        else:
+            print(f"Error fetching spaces: {response.status_code}")
+            return {
+                'spaces': generate_dummy_spaces(limit),
+                'total': 500,
+                'offset': offset,
+                'limit': limit
+            }
+    except Exception as e:
+        print(f"Exception when fetching spaces: {e}")
+        return {
+            'spaces': generate_dummy_spaces(limit),
+            'total': 500,
+            'offset': offset,
+            'limit': limit
+        }
+
 # Transform Huggingface URL to direct space URL
 def transform_url(owner, name):
     """
@@ -112,9 +175,8 @@ def transform_url(owner, name):
 # Get space details
 def get_space_details(space_data, index, offset):
     """
-    - description, avatar_url, author_name 등 추가 필드를 추출
-    - rank는 현재 페이지 내 offset 기반으로 계산
-      (단, Top 500 계산은 global_rank 사용)
+    스페이스 상세 필드 추출
+    - rank는 offset 기반 (현재 페이지)
     """
     try:
         if '/' in space_data.get('id', ''):
@@ -140,7 +202,7 @@ def get_space_details(space_data, index, offset):
         # Description
         short_desc = space_data.get('description', '')
 
-        # User info (avatar, name)
+        # User info
         user_info = space_data.get('user', {})
         avatar_url = user_info.get('avatar_url', '')
         author_name = user_info.get('name') or owner
@@ -155,11 +217,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 basic object even if error occurs
+        # 에러 시 기본 데이터로 대체
         return {
             'url': 'https://huggingface.co/spaces',
             'embedUrl': 'https://huggingface.co/spaces',
@@ -173,7 +235,7 @@ def get_space_details(space_data, index, offset):
             'rank': offset + index + 1
         }
 
-# Get owner statistics from all spaces
+# Get owner statistics from all spaces (for the "Trending" tab's top owners)
 def get_owner_stats(all_spaces):
     """
     상위 500위(global_rank <= 500) 이내에 배치된 스페이스들의 owner를 추출해,
@@ -206,15 +268,15 @@ def home():
     """
     return render_template('index.html')
 
-# Zero-GPU spaces API
+# Zero-GPU spaces API (Trending)
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
     """
-    hardware=cpu 스페이스 목록을 불러와 검색, 페이징, 통계 등을 적용
+    hardware=cpu 스페이스 목록을 불러와 검색, 페이징, 통계 등을 적용 (기존 'Trending')
     """
     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)
@@ -226,7 +288,7 @@ def trending_spaces():
         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()
@@ -236,7 +298,7 @@ def trending_spaces():
 
         results.append(space_info)
 
-    # Get owner statistics (Top 500 → Top 30)
+    # 오너 통계 (Top 500 → Top 30)
     top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
 
     return jsonify({
@@ -247,6 +309,41 @@ def trending_spaces():
         'top_owners': top_owners
     })
 
+# Zero-GPU spaces API (Latest Releases)
+@app.route('/api/latest-spaces', methods=['GET'])
+def latest_spaces():
+    """
+    hardware=cpu 스페이스 중에서 createdAt 기준으로 최신순 500개를 페이징, 검색
+    """
+    search_query = request.args.get('search', '').lower()
+    offset = int(request.args.get('offset', 0))
+    limit = int(request.args.get('limit', 72))
+
+    spaces_data = fetch_latest_spaces(offset, limit)
+
+    results = []
+    for index, space_data in enumerate(spaces_data['spaces']):
+        space_info = get_space_details(space_data, index, offset)
+        if not space_info:
+            continue
+
+        # 검색어 필터
+        if search_query:
+            if (search_query not in space_info['title'].lower()
+                and search_query not in space_info['owner'].lower()
+                and search_query not in space_info['url'].lower()
+                and search_query not in space_info['description'].lower()):
+                continue
+
+        results.append(space_info)
+
+    return jsonify({
+        'spaces': results,
+        'total': spaces_data['total'],
+        'offset': offset,
+        'limit': limit
+    })
+
 if __name__ == '__main__':
     """
     서버 구동 시, templates/index.html 파일을 생성 후 Flask 실행
@@ -826,8 +923,7 @@ if __name__ == '__main__':
     }
 
     /* 추가 레이아웃 수정(아바타, ZERO GPU 뱃지 등)을 위해 
-       아래 클래스들을 일부 추가/수정해도 좋지만 
-       예시는 위 영역에서 이미 충분히 처리하므로 생략 */
+       아래 클래스들을 일부 추가/수정할 수 있으나 여기서는 생략 */
     
     /* 다음 부분은 Zero GPU Spaces용 카드 구조에서 활용 */
     .space-header {
@@ -915,7 +1011,6 @@ 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>
         </div>
@@ -923,6 +1018,7 @@ if __name__ == '__main__':
         <!-- 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>
         
@@ -951,16 +1047,31 @@ if __name__ == '__main__':
           </div>
           
           <div class="search-bar">
-            <input type="text" id="searchInput" placeholder="Search by name, owner, or description..." />
-            <button id="refreshButton" class="refresh-btn">
+            <input type="text" id="searchInputTrending" placeholder="Search by name, owner, or description..." />
+            <button id="refreshButtonTrending" class="refresh-btn">
               <span class="refresh-icon"></span>
               Refresh
             </button>
           </div>
           
-          <div id="gridContainer" class="grid-container"></div>
+          <div id="gridContainerTrending" class="grid-container"></div>
           
-          <div id="pagination" class="pagination"></div>
+          <div id="paginationTrending" class="pagination"></div>
+        </div>
+        
+        <!-- Latest Releases Tab Content -->
+        <div id="latestTab" class="tab-content">
+          <div class="search-bar">
+            <input type="text" id="searchInputLatest" placeholder="Search by name, owner, or description..." />
+            <button id="refreshButtonLatest" class="refresh-btn">
+              <span class="refresh-icon"></span>
+              Refresh
+            </button>
+          </div>
+          
+          <div id="gridContainerLatest" class="grid-container"></div>
+          
+          <div id="paginationLatest" class="pagination"></div>
         </div>
         
         <!-- Fixed Tab Content (기존 예시 유지) -->
@@ -982,40 +1093,65 @@ if __name__ == '__main__':
   </div>
   
   <script>
-    // DOM Elements
-    const elements = {
-      gridContainer: document.getElementById('gridContainer'),
-      loadingIndicator: document.getElementById('loadingIndicator'),
-      loadingError: document.getElementById('loadingError'),
-      searchInput: document.getElementById('searchInput'),
-      refreshButton: document.getElementById('refreshButton'),
-      pagination: document.getElementById('pagination'),
-      statsToggle: document.getElementById('statsToggle'),
-      statsContent: document.getElementById('statsContent'),
-      creatorStatsChart: document.getElementById('creatorStatsChart')
-    };
-    
-    const tabTrendingButton = document.getElementById('tabTrendingButton');
-    const tabFixedButton = document.getElementById('tabFixedButton');
-    const trendingTab = document.getElementById('trendingTab');
-    const fixedTab = document.getElementById('fixedTab');
-    const fixedGridContainer = document.getElementById('fixedGrid');
-
-    const state = {
+    // ------------------------------------
+    // GLOBAL STATE & COMMON FUNCTIONS
+    // ------------------------------------
+    const globalState = {
       isLoading: false,
-      spaces: [],
-      currentPage: 0,
-      itemsPerPage: 72,
-      totalItems: 0,
       loadingTimeout: null,
-      staticModeAttempted: {},
-      statsVisible: false,
-      chartInstance: null,
-      topOwners: [],
-      iframeStatuses: {}
     };
+    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) {
+          btn.classList.add('refreshing');
+        } else {
+          btn.classList.remove('refreshing');
+        }
+      });
+      
+      if (isLoading) {
+        clearTimeout(globalState.loadingTimeout);
+        globalState.loadingTimeout = setTimeout(() => {
+          document.getElementById('loadingError').style.display = 'block';
+        }, 10000);
+      } else {
+        clearTimeout(globalState.loadingTimeout);
+        document.getElementById('loadingError').style.display = 'none';
+      }
+    }
+    function handleIframeError(iframe, owner, name, title) {
+      const container = iframe.parentNode;
+      const errorPlaceholder = document.createElement('div');
+      errorPlaceholder.className = 'error-placeholder';
 
-    // Advanced iframe loader for better error detection
+      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';
+      directLink.textContent = 'Visit HF Space';
+      directLink.style.color = '#3182ce';
+      directLink.style.marginTop = '10px';
+      directLink.style.display = 'inline-block';
+      directLink.style.padding = '8px 16px';
+      directLink.style.background = '#ebf8ff';
+      directLink.style.borderRadius = '5px';
+      directLink.style.fontWeight = '600';
+      errorPlaceholder.appendChild(directLink);
+
+      iframe.style.display = 'none';
+      container.appendChild(errorPlaceholder);
+    }
+
+    // ------------------------------------
+    // IFRAME LOADER (공통)
+    // ------------------------------------
     const iframeLoader = {
       checkQueue: {},
       maxAttempts: 5,
@@ -1107,23 +1243,44 @@ if __name__ == '__main__':
       }
     };
 
-    function toggleStats() {
-      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();
+    // ------------------------------------
+    // TRENDING TAB
+    // ------------------------------------
+    const trendingState = {
+      spaces: [],
+      currentPage: 0,
+      itemsPerPage: 72,
+      totalItems: 0,
+      topOwners: [],
+      iframeStatuses: {}
+    };
+    const trendingElements = {
+      searchInput: document.getElementById('searchInputTrending'),
+      refreshButton: document.getElementById('refreshButtonTrending'),
+      gridContainer: document.getElementById('gridContainerTrending'),
+      pagination: document.getElementById('paginationTrending'),
+      statsToggle: document.getElementById('statsToggle'),
+      statsContent: document.getElementById('statsContent'),
+      creatorStatsChart: document.getElementById('creatorStatsChart')
+    };
+
+    let chartInstance = null;
+
+    trendingElements.statsToggle.addEventListener('click', () => {
+      const isOpen = trendingElements.statsContent.classList.toggle('open');
+      trendingElements.statsToggle.textContent = isOpen ? 'Hide Stats' : 'Show Stats';
+      if (isOpen && trendingState.topOwners.length > 0) {
+        renderCreatorStats(trendingState.topOwners);
       }
-    }
+    });
 
-    function renderCreatorStats() {
-      if (state.chartInstance) {
-        state.chartInstance.destroy();
+    function renderCreatorStats(topOwners) {
+      if (chartInstance) {
+        chartInstance.destroy();
       }
-      const ctx = elements.creatorStatsChart.getContext('2d');
-      const labels = state.topOwners.map(item => item[0]);
-      const data = state.topOwners.map(item => item[1]);
+      const ctx = trendingElements.creatorStatsChart.getContext('2d');
+      const labels = topOwners.map(item => item[0]);
+      const data = topOwners.map(item => item[1]);
 
       const colors = [];
       for (let i = 0; i < labels.length; i++) {
@@ -1131,7 +1288,7 @@ if __name__ == '__main__':
         colors.push(`hsla(${hue}, 70%, 80%, 0.7)`);
       }
 
-      state.chartInstance = new Chart(ctx, {
+      chartInstance = new Chart(ctx, {
         type: 'bar',
         data: {
           labels: labels,
@@ -1188,69 +1345,211 @@ if __name__ == '__main__':
       });
     }
 
-    async function loadSpaces(page = 0) {
+    async function loadTrending(page=0) {
       setLoading(true);
       try {
-        const searchText = elements.searchInput.value;
-        const offset = page * state.itemsPerPage;
+        const searchText = trendingElements.searchInput.value;
+        const offset = page * trendingState.itemsPerPage;
 
         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}`
+          `/api/trending-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${trendingState.itemsPerPage}`
         );
         const response = await Promise.race([fetchPromise, timeoutPromise]);
         const data = await response.json();
 
-        state.spaces = data.spaces;
-        state.totalItems = data.total;
-        state.currentPage = page;
-        state.topOwners = data.top_owners || [];
+        trendingState.spaces = data.spaces || [];
+        trendingState.totalItems = data.total || 0;
+        trendingState.currentPage = page;
+        trendingState.topOwners = data.top_owners || [];
 
-        renderGrid(state.spaces);
-        renderPagination();
+        renderTrendingGrid(trendingState.spaces);
+        renderTrendingPagination();
 
-        if (state.statsVisible && state.topOwners.length > 0) {
-          renderCreatorStats();
+        // 통계창 열려있다면 새 데이터로 갱신
+        if (trendingElements.statsContent.classList.contains('open') && trendingState.topOwners.length > 0) {
+          renderCreatorStats(trendingState.topOwners);
         }
       } catch (error) {
-        console.error('Error loading spaces:', error);
-        elements.gridContainer.innerHTML = `
+        console.error('Error loading trending spaces:', error);
+        trendingElements.gridContainer.innerHTML = `
           <div style="grid-column: 1/-1; text-align: center; padding: 40px;">
             <div style="font-size: 3rem; margin-bottom: 20px;">⚠️</div>
-            <h3 style="margin-bottom: 10px;">Unable to load spaces</h3>
+            <h3 style="margin-bottom: 10px;">Unable to load spaces (Trending)</h3>
             <p style="color: #666;">Please try refreshing the page. If the problem persists, try again later.</p>
-            <button id="retryButton" style="margin-top: 20px; padding: 10px 20px; background: var(--pastel-purple); border: none; border-radius: 5px; cursor: pointer;">
+            <button id="retryTrendingButton" style="margin-top: 20px; padding: 10px 20px; background: var(--pastel-purple); border: none; border-radius: 5px; cursor: pointer;">
               Try Again
             </button>
           </div>
         `;
-        document.getElementById('retryButton')?.addEventListener('click', () => loadSpaces(0));
-        renderPagination();
+        document.getElementById('retryTrendingButton')?.addEventListener('click', () => loadTrending(0));
+        renderTrendingPagination();
       } finally {
         setLoading(false);
       }
     }
 
-    function renderPagination() {
-      elements.pagination.innerHTML = '';
-      const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
+    function renderTrendingGrid(spaces) {
+      trendingElements.gridContainer.innerHTML = '';
+
+      if (!spaces || spaces.length === 0) {
+        const noResultsMsg = document.createElement('p');
+        noResultsMsg.textContent = 'No zero-gpu spaces found matching your search.';
+        noResultsMsg.style.padding = '2rem';
+        noResultsMsg.style.textAlign = 'center';
+        noResultsMsg.style.fontStyle = 'italic';
+        noResultsMsg.style.color = '#718096';
+        trendingElements.gridContainer.appendChild(noResultsMsg);
+        return;
+      }
+
+      spaces.forEach((item) => {
+        try {
+          const {
+            url, title, likes_count, owner, name, rank,
+            description, avatar_url, author_name, embedUrl
+          } = item;
+
+          const gridItem = document.createElement('div');
+          gridItem.className = 'grid-item';
+
+          // 상단 헤더
+          const headerDiv = document.createElement('div');
+          headerDiv.className = 'grid-header';
+
+          const spaceHeader = document.createElement('div');
+          spaceHeader.className = 'space-header';
+
+          const rankBadge = document.createElement('div');
+          rankBadge.className = 'rank-badge';
+          rankBadge.textContent = `#${rank}`;
+          spaceHeader.appendChild(rankBadge);
+
+          const titleWrapper = document.createElement('div');
+          titleWrapper.style.display = 'flex';
+          titleWrapper.style.alignItems = 'center';
+          titleWrapper.style.marginLeft = '8px';
+
+          const titleEl = document.createElement('h3');
+          titleEl.className = 'space-title';
+          titleEl.textContent = title;
+          titleEl.title = title;
+          titleWrapper.appendChild(titleEl);
+
+          const zeroGpuBadge = document.createElement('span');
+          zeroGpuBadge.className = 'zero-gpu-badge';
+          zeroGpuBadge.textContent = 'ZERO GPU';
+          titleWrapper.appendChild(zeroGpuBadge);
+
+          spaceHeader.appendChild(titleWrapper);
+          headerDiv.appendChild(spaceHeader);
+
+          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 authorSpan = document.createElement('span');
+          authorSpan.className = 'author-name';
+          authorSpan.style.marginLeft = '8px';
+          authorSpan.textContent = `by ${author_name}`;
+          leftMeta.appendChild(authorSpan);
+
+          metaInfo.appendChild(leftMeta);
+
+          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);
+
+          if (description) {
+            const descP = document.createElement('p');
+            descP.className = 'desc-text';
+            descP.textContent = description;
+            gridItem.appendChild(descP);
+          }
+
+          const content = document.createElement('div');
+          content.className = 'grid-content';
+
+          const iframeContainer = document.createElement('div');
+          iframeContainer.className = 'iframe-container';
+
+          const iframe = document.createElement('iframe');
+          iframe.src = embedUrl;
+          iframe.title = title;
+          iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
+          iframe.setAttribute('allowfullscreen', '');
+          iframe.setAttribute('frameborder', '0');
+          iframe.loading = 'lazy';
+
+          const spaceKey = `${owner}/${name}`;
+          trendingState.iframeStatuses[spaceKey] = 'loading';
+
+          iframe.onload = function() {
+            iframeLoader.startChecking(iframe, owner, name, title, spaceKey);
+          };
+          iframe.onerror = function() {
+            handleIframeError(iframe, owner, name, title);
+            trendingState.iframeStatuses[spaceKey] = 'error';
+          };
+          setTimeout(() => {
+            if (trendingState.iframeStatuses[spaceKey] === 'loading') {
+              handleIframeError(iframe, owner, name, title);
+              trendingState.iframeStatuses[spaceKey] = 'error';
+            }
+          }, 30000);
+
+          iframeContainer.appendChild(iframe);
+          content.appendChild(iframeContainer);
+
+          const actions = document.createElement('div');
+          actions.className = 'grid-actions';
+
+          const linkEl = document.createElement('a');
+          linkEl.href = url;
+          linkEl.target = '_blank';
+          linkEl.className = 'open-link';
+          linkEl.textContent = 'Open in new window';
+          actions.appendChild(linkEl);
+
+          gridItem.appendChild(content);
+          gridItem.appendChild(actions);
+
+          trendingElements.gridContainer.appendChild(gridItem);
+
+        } catch (err) {
+          console.error('Item rendering error:', err);
+        }
+      });
+    }
+
+    function renderTrendingPagination() {
+      trendingElements.pagination.innerHTML = '';
+      const totalPages = Math.ceil(trendingState.totalItems / trendingState.itemsPerPage);
 
       // Previous page
       const prevButton = document.createElement('button');
       prevButton.className = 'pagination-button';
       prevButton.textContent = 'Previous';
-      prevButton.disabled = (state.currentPage === 0);
+      prevButton.disabled = (trendingState.currentPage === 0);
       prevButton.addEventListener('click', () => {
-        if (state.currentPage > 0) {
-          loadSpaces(state.currentPage - 1);
+        if (trendingState.currentPage > 0) {
+          loadTrending(trendingState.currentPage - 1);
         }
       });
-      elements.pagination.appendChild(prevButton);
+      trendingElements.pagination.appendChild(prevButton);
 
       const maxButtons = 7;
-      let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons / 2));
+      let startPage = Math.max(0, trendingState.currentPage - Math.floor(maxButtons / 2));
       let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
 
       if (endPage - startPage + 1 < maxButtons) {
@@ -1259,59 +1558,89 @@ if __name__ == '__main__':
 
       for (let i = startPage; i <= endPage; i++) {
         const pageButton = document.createElement('button');
-        pageButton.className = 'pagination-button' + (i === state.currentPage ? ' active' : '');
+        pageButton.className = 'pagination-button' + (i === trendingState.currentPage ? ' active' : '');
         pageButton.textContent = (i + 1);
         pageButton.addEventListener('click', () => {
-          if (i !== state.currentPage) {
-            loadSpaces(i);
+          if (i !== trendingState.currentPage) {
+            loadTrending(i);
           }
         });
-        elements.pagination.appendChild(pageButton);
+        trendingElements.pagination.appendChild(pageButton);
       }
 
       // Next page
       const nextButton = document.createElement('button');
       nextButton.className = 'pagination-button';
       nextButton.textContent = 'Next';
-      nextButton.disabled = (state.currentPage >= totalPages - 1);
+      nextButton.disabled = (trendingState.currentPage >= totalPages - 1);
       nextButton.addEventListener('click', () => {
-        if (state.currentPage < totalPages - 1) {
-          loadSpaces(state.currentPage + 1);
+        if (trendingState.currentPage < totalPages - 1) {
+          loadTrending(trendingState.currentPage + 1);
         }
       });
-      elements.pagination.appendChild(nextButton);
+      trendingElements.pagination.appendChild(nextButton);
     }
 
-    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';
-      directLink.textContent = 'Visit HF Space';
-      directLink.style.color = '#3182ce';
-      directLink.style.marginTop = '10px';
-      directLink.style.display = 'inline-block';
-      directLink.style.padding = '8px 16px';
-      directLink.style.background = '#ebf8ff';
-      directLink.style.borderRadius = '5px';
-      directLink.style.fontWeight = '600';
-      errorPlaceholder.appendChild(directLink);
-      
-      iframe.style.display = 'none';
-      container.appendChild(errorPlaceholder);
+    // ------------------------------------
+    // LATEST RELEASES TAB
+    // ------------------------------------
+    const latestState = {
+      spaces: [],
+      currentPage: 0,
+      itemsPerPage: 72,
+      totalItems: 0,
+      iframeStatuses: {}
+    };
+    const latestElements = {
+      searchInput: document.getElementById('searchInputLatest'),
+      refreshButton: document.getElementById('refreshButtonLatest'),
+      gridContainer: document.getElementById('gridContainerLatest'),
+      pagination: document.getElementById('paginationLatest')
+    };
+
+    async function loadLatest(page=0) {
+      setLoading(true);
+      try {
+        const searchText = latestElements.searchInput.value;
+        const offset = page * latestState.itemsPerPage;
+
+        const timeoutPromise = new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Request timeout')), 30000)
+        );
+        const fetchPromise = fetch(
+          `/api/latest-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${latestState.itemsPerPage}`
+        );
+        const response = await Promise.race([fetchPromise, timeoutPromise]);
+        const data = await response.json();
+
+        latestState.spaces = data.spaces || [];
+        latestState.totalItems = data.total || 0;
+        latestState.currentPage = page;
+
+        renderLatestGrid(latestState.spaces);
+        renderLatestPagination();
+      } catch (error) {
+        console.error('Error loading latest spaces:', error);
+        latestElements.gridContainer.innerHTML = `
+          <div style="grid-column: 1/-1; text-align: center; padding: 40px;">
+            <div style="font-size: 3rem; margin-bottom: 20px;">⚠️</div>
+            <h3 style="margin-bottom: 10px;">Unable to load spaces (Latest)</h3>
+            <p style="color: #666;">Please try refreshing the page. If the problem persists, try again later.</p>
+            <button id="retryLatestButton" style="margin-top: 20px; padding: 10px 20px; background: var(--pastel-purple); border: none; border-radius: 5px; cursor: pointer;">
+              Try Again
+            </button>
+          </div>
+        `;
+        document.getElementById('retryLatestButton')?.addEventListener('click', () => loadLatest(0));
+        renderLatestPagination();
+      } finally {
+        setLoading(false);
+      }
     }
 
-    function renderGrid(spaces) {
-      elements.gridContainer.innerHTML = '';
-      
+    function renderLatestGrid(spaces) {
+      latestElements.gridContainer.innerHTML = '';
+
       if (!spaces || spaces.length === 0) {
         const noResultsMsg = document.createElement('p');
         noResultsMsg.textContent = 'No zero-gpu spaces found matching your search.';
@@ -1319,17 +1648,20 @@ if __name__ == '__main__':
         noResultsMsg.style.textAlign = 'center';
         noResultsMsg.style.fontStyle = 'italic';
         noResultsMsg.style.color = '#718096';
-        elements.gridContainer.appendChild(noResultsMsg);
+        latestElements.gridContainer.appendChild(noResultsMsg);
         return;
       }
 
-      spaces.forEach((item) => {
+      spaces.forEach((item, index) => {
         try {
           const {
             url, title, likes_count, owner, name, rank,
             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';
 
@@ -1337,17 +1669,14 @@ if __name__ == '__main__':
           const headerDiv = document.createElement('div');
           headerDiv.className = 'grid-header';
 
-          // space-header (순위 + 제목 + Zero GPU 배지)
           const spaceHeader = document.createElement('div');
           spaceHeader.className = 'space-header';
 
-          // 1) 상단 순위 뱃지
           const rankBadge = document.createElement('div');
           rankBadge.className = 'rank-badge';
-          rankBadge.textContent = `#${rank}`; 
+          rankBadge.textContent = `#${computedRank}`;
           spaceHeader.appendChild(rankBadge);
 
-          // 제목+배지
           const titleWrapper = document.createElement('div');
           titleWrapper.style.display = 'flex';
           titleWrapper.style.alignItems = 'center';
@@ -1367,7 +1696,6 @@ if __name__ == '__main__':
           spaceHeader.appendChild(titleWrapper);
           headerDiv.appendChild(spaceHeader);
 
-          // 하단 메타 정보
           const metaInfo = document.createElement('div');
           metaInfo.className = 'grid-meta';
           metaInfo.style.display = 'flex';
@@ -1375,11 +1703,7 @@ if __name__ == '__main__':
           metaInfo.style.alignItems = 'center';
           metaInfo.style.marginTop = '6px';
 
-          // 왼쪽: (중복 rank 제거)
           const leftMeta = document.createElement('div');
-
-          // ──────────────  ← rankBadge2 부분 제거됨
-
           const authorSpan = document.createElement('span');
           authorSpan.className = 'author-name';
           authorSpan.style.marginLeft = '8px';
@@ -1388,7 +1712,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>`;
@@ -1397,7 +1720,6 @@ if __name__ == '__main__':
           headerDiv.appendChild(metaInfo);
           gridItem.appendChild(headerDiv);
 
-          // description
           if (description) {
             const descP = document.createElement('p');
             descP.className = 'desc-text';
@@ -1405,7 +1727,6 @@ if __name__ == '__main__':
             gridItem.appendChild(descP);
           }
 
-          // iframe container
           const content = document.createElement('div');
           content.className = 'grid-content';
 
@@ -1413,7 +1734,7 @@ 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', '');
@@ -1421,26 +1742,25 @@ if __name__ == '__main__':
           iframe.loading = 'lazy';
 
           const spaceKey = `${owner}/${name}`;
-          state.iframeStatuses[spaceKey] = 'loading';
+          latestState.iframeStatuses[spaceKey] = 'loading';
 
           iframe.onload = function() {
             iframeLoader.startChecking(iframe, owner, name, title, spaceKey);
           };
           iframe.onerror = function() {
             handleIframeError(iframe, owner, name, title);
-            state.iframeStatuses[spaceKey] = 'error';
+            latestState.iframeStatuses[spaceKey] = 'error';
           };
           setTimeout(() => {
-            if (state.iframeStatuses[spaceKey] === 'loading') {
+            if (latestState.iframeStatuses[spaceKey] === 'loading') {
               handleIframeError(iframe, owner, name, title);
-              state.iframeStatuses[spaceKey] = 'error';
+              latestState.iframeStatuses[spaceKey] = 'error';
             }
           }, 30000);
 
           iframeContainer.appendChild(iframe);
           content.appendChild(iframeContainer);
 
-          // actions
           const actions = document.createElement('div');
           actions.className = 'grid-actions';
 
@@ -1449,24 +1769,73 @@ 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);
+          latestElements.gridContainer.appendChild(gridItem);
 
         } catch (err) {
-          console.error('Item rendering error:', err);
+          console.error('Item rendering error (Latest):', err);
         }
       });
     }
 
-############# Picks URL 입력
+    function renderLatestPagination() {
+      latestElements.pagination.innerHTML = '';
+      const totalPages = Math.ceil(latestState.totalItems / latestState.itemsPerPage);
+
+      // Previous page
+      const prevButton = document.createElement('button');
+      prevButton.className = 'pagination-button';
+      prevButton.textContent = 'Previous';
+      prevButton.disabled = (latestState.currentPage === 0);
+      prevButton.addEventListener('click', () => {
+        if (latestState.currentPage > 0) {
+          loadLatest(latestState.currentPage - 1);
+        }
+      });
+      latestElements.pagination.appendChild(prevButton);
+
+      const maxButtons = 7;
+      let startPage = Math.max(0, latestState.currentPage - Math.floor(maxButtons / 2));
+      let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
+
+      if (endPage - startPage + 1 < maxButtons) {
+        startPage = Math.max(0, endPage - maxButtons + 1);
+      }
 
+      for (let i = startPage; i <= endPage; i++) {
+        const pageButton = document.createElement('button');
+        pageButton.className = 'pagination-button' + (i === latestState.currentPage ? ' active' : '');
+        pageButton.textContent = (i + 1);
+        pageButton.addEventListener('click', () => {
+          if (i !== latestState.currentPage) {
+            loadLatest(i);
+          }
+        });
+        latestElements.pagination.appendChild(pageButton);
+      }
 
+      // Next page
+      const nextButton = document.createElement('button');
+      nextButton.className = 'pagination-button';
+      nextButton.textContent = 'Next';
+      nextButton.disabled = (latestState.currentPage >= totalPages - 1);
+      nextButton.addEventListener('click', () => {
+        if (latestState.currentPage < totalPages - 1) {
+          loadLatest(latestState.currentPage + 1);
+        }
+      });
+      latestElements.pagination.appendChild(nextButton);
+    }
+
+    // ------------------------------------
+    // FIXED TAB
+    // ------------------------------------
+    const fixedGridContainer = document.getElementById('fixedGrid');
     function renderFixedGrid() {
-      // Fixed Tab 예시용 (원본 코드 예시 유지)
       fixedGridContainer.innerHTML = '';
 
       const staticSpaces = [
@@ -1573,9 +1942,8 @@ if __name__ == '__main__':
           iframe.setAttribute('frameborder', '0');
           iframe.loading = 'lazy';
 
-          const spaceKey = `${owner}/${name}`;
           iframe.onload = function() {
-            iframeLoader.startChecking(iframe, owner, name, title, spaceKey);
+            iframeLoader.startChecking(iframe, owner, name, title, `${owner}/${name}`);
           };
           iframe.onerror = function() {
             handleIframeError(iframe, owner, name, title);
@@ -1610,42 +1978,82 @@ if __name__ == '__main__':
       });
     }
 
-    // Tab switching
+    // ------------------------------------
+    // TAB HANDLERS
+    // ------------------------------------
+    const tabTrendingButton = document.getElementById('tabTrendingButton');
+    const tabLatestButton = document.getElementById('tabLatestButton');
+    const tabFixedButton = document.getElementById('tabFixedButton');
+
+    const trendingTab = document.getElementById('trendingTab');
+    const latestTab = document.getElementById('latestTab');
+    const fixedTab = document.getElementById('fixedTab');
+
     tabTrendingButton.addEventListener('click', () => {
       tabTrendingButton.classList.add('active');
+      tabLatestButton.classList.remove('active');
       tabFixedButton.classList.remove('active');
       trendingTab.classList.add('active');
+      latestTab.classList.remove('active');
+      fixedTab.classList.remove('active');
+      loadTrending(trendingState.currentPage);
+    });
+
+    tabLatestButton.addEventListener('click', () => {
+      tabLatestButton.classList.add('active');
+      tabTrendingButton.classList.remove('active');
+      tabFixedButton.classList.remove('active');
+      latestTab.classList.add('active');
+      trendingTab.classList.remove('active');
       fixedTab.classList.remove('active');
-      loadSpaces(state.currentPage);
+      loadLatest(latestState.currentPage);
     });
+
     tabFixedButton.addEventListener('click', () => {
       tabFixedButton.classList.add('active');
       tabTrendingButton.classList.remove('active');
+      tabLatestButton.classList.remove('active');
       fixedTab.classList.add('active');
       trendingTab.classList.remove('active');
+      latestTab.classList.remove('active');
       renderFixedGrid();
     });
 
-    elements.searchInput.addEventListener('input', () => {
-      clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(() => loadSpaces(0), 300);
+    // ------------------------------------
+    // EVENT LISTENERS
+    // ------------------------------------
+    trendingElements.searchInput.addEventListener('input', () => {
+      clearTimeout(trendingState.searchTimeout);
+      trendingState.searchTimeout = setTimeout(() => loadTrending(0), 300);
+    });
+    trendingElements.searchInput.addEventListener('keyup', (event) => {
+      if (event.key === 'Enter') {
+        loadTrending(0);
+      }
+    });
+    trendingElements.refreshButton.addEventListener('click', () => loadTrending(0));
+
+    latestElements.searchInput.addEventListener('input', () => {
+      clearTimeout(latestState.searchTimeout);
+      latestState.searchTimeout = setTimeout(() => loadLatest(0), 300);
     });
-    elements.searchInput.addEventListener('keyup', (event) => {
+    latestElements.searchInput.addEventListener('keyup', (event) => {
       if (event.key === 'Enter') {
-        loadSpaces(0);
+        loadLatest(0);
       }
     });
-    elements.refreshButton.addEventListener('click', () => loadSpaces(0));
-    elements.statsToggle.addEventListener('click', toggleStats);
+    latestElements.refreshButton.addEventListener('click', () => loadLatest(0));
 
     window.addEventListener('load', function() {
-      setTimeout(() => loadSpaces(0), 500);
+      // 첫 진입시 Trending 탭 먼저 로드
+      setTimeout(() => loadTrending(0), 500);
     });
 
     setTimeout(() => {
-      if (state.isLoading) {
+      if (globalState.isLoading) {
         setLoading(false);
-        elements.gridContainer.innerHTML = `
+        // 타임아웃 시 메시지 표시
+        trendingElements.gridContainer.innerHTML = `
           <div style="grid-column: 1/-1; text-align: center; padding: 40px;">
             <div style="font-size: 3rem; margin-bottom: 20px;">⏱️</div>
             <h3 style="margin-bottom: 10px;">Loading is taking longer than expected</h3>
@@ -1657,29 +2065,9 @@ if __name__ == '__main__':
         `;
       }
     }, 20000);
-
-    loadSpaces(0);
-
-    function setLoading(isLoading) {
-      state.isLoading = isLoading;
-      elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
-
-      if (isLoading) {
-        elements.refreshButton.classList.add('refreshing');
-        clearTimeout(state.loadingTimeout);
-        state.loadingTimeout = setTimeout(() => {
-          elements.loadingError.style.display = 'block';
-        }, 10000);
-      } else {
-        elements.refreshButton.classList.remove('refreshing');
-        clearTimeout(state.loadingTimeout);
-        elements.loadingError.style.display = 'none';
-      }
-    }
   </script>
 </body>
 </html>
 ''')
 
-    # Flask 앱 실행 (포트 7860)
     app.run(host='0.0.0.0', port=7860)