Update app.py

app.py

@@ -7,72 +7,50 @@ from collections import Counter
 
 app = Flask(__name__)
 
-###################
-# 1) 최대 50개만 가져오기 위해 limit=50으로 수정
-###################
+
+##########################################
+# 1) 첫 번째 탭용: VIDraft/SanaSprint 6개
+##########################################
 def fetch_trending_spaces(offset=0, limit=50):
+    """
+    원래 Hugging Face /api/spaces를 호출하던 부분을
+    직접 더미 데이터(동일한 URL 6개)만 반환하도록 수정.
+    """
     try:
-        url = "https://huggingface.co/api/spaces"
-        # 여기서는 최대 10000개를 가져오지만, slicing 시에 우리가 limit=50 을 적용
-        params = {"limit": 10000}
-        
-        response = requests.get(url, params=params, timeout=30)
+        # 여기서는 6개만 만들어 반환
+        # (실제로 offset/limit 처리하지 않고, 6개만 반환)
+        my_spaces = []
+        for i in range(6):
+            my_spaces.append({
+                'id': 'VIDraft/SanaSprint',
+                'owner': 'VIDraft',
+                'title': f'SanaSprint #{i+1}',
+                'likes': 100 + i,
+                'createdAt': '2023-01-01T00:00:00.000Z'
+            })
         
-        if response.status_code == 200:
-            spaces = response.json()
-            filtered_spaces = [space for space in spaces 
-                               if space.get('owner') != 'None'
-                               and space.get('id', '').split('/', 1)[0] != 'None']
-            
-            # offset 및 limit 적용
-            start = min(offset, len(filtered_spaces))
-            end = min(offset + limit, len(filtered_spaces))
-            
-            print(f"Fetched {len(filtered_spaces)} spaces, returning {end - start} items from {start} to {end}")
-            
-            return {
-                'spaces': filtered_spaces[start:end],
-                'total': min(len(filtered_spaces), 50),  # 최대 50까지만 총합으로 반영
-                'offset': offset,
-                'limit': limit,
-                'all_spaces': filtered_spaces[:50]  # 전체 통계 계산도 50개만
-            }
-        else:
-            print(f"Error fetching spaces: {response.status_code}")
-            return {
-                'spaces': generate_dummy_spaces(limit),
-                'total': 50,
-                'offset': offset,
-                'limit': limit,
-                'all_spaces': generate_dummy_spaces(50)
-            }
+        return {
+            'spaces': my_spaces,
+            'total': 6,         # 총 6개
+            'offset': 0,
+            'limit': 6,
+            'all_spaces': my_spaces  # 통계 계산용(여기서는 6개만 그대로)
+        }
     except Exception as e:
         print(f"Exception when fetching spaces: {e}")
+        # 문제 발생시, 혹은 빈 배열 주어도 됨
         return {
-            'spaces': generate_dummy_spaces(limit),
-            'total': 50,
-            'offset': offset,
-            'limit': limit,
-            'all_spaces': generate_dummy_spaces(50)
+            'spaces': [],
+            'total': 0,
+            'offset': 0,
+            'limit': 6,
+            'all_spaces': []
         }
 
-def generate_dummy_spaces(count):
-    spaces = []
-    for i in range(count):
-        spaces.append({
-            'id': f'dummy/space-{i}',
-            'owner': 'dummy',
-            'title': f'Example Space {i+1}',
-            'likes': 100 - i,
-            'createdAt': '2023-01-01T00:00:00.000Z'
-        })
-    return spaces
-
 def transform_url(owner, name):
-    name = name.replace('.', '-')
-    name = name.replace('_', '-')
+    # 점(.) -> 대쉬(-), 언더바(_) -> 대쉬(-), 소문자화
+    name = name.replace('.', '-').replace('_', '-').lower()
     owner = owner.lower()
-    name = name.lower()
     return f"https://{owner}-{name}.hf.space"
 
 def get_space_details(space_data, index, offset):
@@ -130,37 +108,24 @@ def get_owner_stats(all_spaces):
     top_owners = owner_counts.most_common(30)
     return top_owners
 
-###########################
-# 2) 두 번째 탭을 위한 "고정된" Huggingface URL 목록 예시
-#    (원하는 스페이스들을 추가하세요)
-###########################
-CUSTOM_SPACES = [
-    {
-        'owner': 'huggingface',
-        'name': 'diffuse-the-rest',
-        'title': 'Diffuse The Rest Demo',
-        'likes': 999,
-    },
-    {
-        'owner': 'openai',
-        'name': 'whisper',
-        'title': 'Whisper Demo',
-        'likes': 777,
-    },
-    {
-        'owner': 'HuggingFaceH4',
-        'name': 'Chat-UI',
-        'title': 'Chat UI (HuggingFaceH4)',
-        'likes': 450,
-    },
-]
+##########################################
+# 2) 두 번째 탭용: VIDraft/SanaSprint
+#    (원하는 개수만큼 - 여기선 예시로 6개)
+##########################################
+CUSTOM_SPACES = []
+for i in range(6):
+    CUSTOM_SPACES.append({
+        'owner': 'VIDraft',
+        'name': 'SanaSprint',
+        'title': f'SanaSprint Demo #{i+1}',
+        'likes': 500 + i,
+    })
 
-###########################
-# 2) 두 번째 탭 API 라우트
-###########################
 @app.route('/api/custom-spaces', methods=['GET'])
 def custom_spaces():
-    # 필요하다면 검색 기능 등 추가 가능. 여기서는 단순히 전체 반환
+    """
+    두 번째 탭에서 표시할 Space들을 반환 (여기서도 6개).
+    """
     results = []
     for index, item in enumerate(CUSTOM_SPACES):
         owner = item['owner']
@@ -168,7 +133,6 @@ def custom_spaces():
         title = item.get('title', name)
         likes_count = item.get('likes', 0)
         
-        # rank는 임의로 index+1
         results.append({
             'url': f"https://huggingface.co/spaces/{owner}/{name}",
             'embedUrl': transform_url(owner, name),
@@ -192,9 +156,12 @@ def home():
 
 @app.route('/api/trending-spaces', methods=['GET'])
 def trending_spaces():
+    """
+    첫 번째 탭: 위에서 만든 fetch_trending_spaces()의 결과를
+    그대로 렌더링 (실제로는 6개 짜리 더미 데이터를 반환).
+    """
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
-    # 여기서도 limit=50으로 고정
     limit = int(request.args.get('limit', 50))
 
     spaces_data = fetch_trending_spaces(offset, limit)
@@ -205,7 +172,7 @@ def trending_spaces():
         if not space_info:
             continue
         
-        # 검색어 필터
+        # 검색어가 있으면 필터링(사용 안 하셔도 됨)
         if search_query:
             title = space_info['title'].lower()
             owner = space_info['owner'].lower()
@@ -233,7 +200,6 @@ def trending_spaces():
 if __name__ == '__main__':
     os.makedirs('templates', exist_ok=True)
     
-    # index.html 생성 (원본에서 탭 기능만 추가)
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''<!DOCTYPE html>
 <html lang="en">
@@ -242,7 +208,7 @@ if __name__ == '__main__':
   <title>Huggingface Spaces Gallery</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
-    /* (중략) — 원본 CSS 그대로 유지 */
+    /* 기존 스타일 동일 (생략 가능) */
     @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
     
     :root {
@@ -321,6 +287,23 @@ if __name__ == '__main__':
       margin-top: 0.5rem;
       font-size: 1.1rem;
     }
+    .tab-nav {
+      display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;
+    }
+    .tab-button {
+      padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer;
+      background-color: #ffffffcc; font-weight: 600; transition: 0.2s;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+    .tab-button:hover {
+      background-color: var(--pastel-green);
+    }
+    .tab-button.active {
+      background-color: var(--pastel-purple);
+      color: #4a5568;
+    }
+    .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;
@@ -496,24 +479,6 @@ if __name__ == '__main__':
       .pagination { flex-wrap: wrap; }
       .chart-container { height: 300px; }
     }
-    /* 탭 스타일 추가 */
-    .tab-nav {
-      display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;
-    }
-    .tab-button {
-      padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer;
-      background-color: #ffffffcc; font-weight: 600; transition: 0.2s;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    }
-    .tab-button:hover {
-      background-color: var(--pastel-green);
-    }
-    .tab-button.active {
-      background-color: var(--pastel-purple);
-      color: #4a5568;
-    }
-    .tab-content { display: none; }
-    .tab-content.active { display: block; }
   </style>
 </head>
 <body>
@@ -531,18 +496,17 @@ if __name__ == '__main__':
       <div class="mac-content">
         <div class="header">
           <h1>HF Space Leaderboard</h1>
-          <p>Discover the top 50 trending spaces from Huggingface</p>
+          <p>첫 번째 탭: 동일한 URL 6개 / 두 번째 탭: 동일한 URL 6개</p>
         </div>
         
         <!-- 탭 네비게이션 -->
         <div class="tab-nav">
-          <button class="tab-button active" data-tab="leaderboardTab">리더보드</button>
+          <button class="tab-button active" data-tab="leaderboardTab">첫 번째 탭</button>
           <button class="tab-button" data-tab="customTab">두 번째 탭</button>
         </div>
         
-        <!-- 리더보드 탭 -->
+        <!-- 첫 번째 탭 (리더보드) -->
         <div id="leaderboardTab" class="tab-content active">
-          <!-- Stats Section (원본) -->
           <div class="stats-window mac-window">
             <div class="mac-toolbar">
               <div class="mac-buttons">
@@ -576,12 +540,11 @@ if __name__ == '__main__':
           <div id="pagination" class="pagination"></div>
         </div>
         
-        <!-- 두 번째 탭(커스텀 스페이스) -->
+        <!-- 두 번째 탭 (커스텀) -->
         <div id="customTab" class="tab-content">
-          <h2 style="text-align:center; margin-bottom:1rem;">지정된 Huggingface URL 리스트</h2>
+          <h2 style="text-align:center; margin-bottom:1rem;">두 번째 탭: 동일한 URL 6개</h2>
           <div id="customGridContainer" class="grid-container"></div>
         </div>
-        
       </div>
     </div>
   </div>
@@ -614,7 +577,7 @@ if __name__ == '__main__':
       isLoading: false,
       spaces: [],
       currentPage: 0,
-      itemsPerPage: 50, // 50개
+      itemsPerPage: 50,
       totalItems: 0,
       loadingTimeout: null,
       staticModeAttempted: {},
@@ -622,7 +585,6 @@ if __name__ == '__main__':
       chartInstance: null,
       topOwners: [],
       iframeStatuses: {},
-      // 두 번째 탭용
       customSpaces: []
     };
     
@@ -655,7 +617,6 @@ if __name__ == '__main__':
             delete this.checkQueue[spaceKey];
             return;
           }
-          
           try {
             const hasContent = iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body;
             if (hasContent && iframe.contentWindow.document.body.innerHTML.length > 100) {
@@ -749,7 +710,7 @@ if __name__ == '__main__':
             tooltip: {
               callbacks: {
                 title: function(tooltipItems) { return tooltipItems[0].label; },
-                label: function(context) { return `Spaces: ${context.raw}`; }
+                label: function(context) { return \`Spaces: \${context.raw}\`; }
               }
             }
           },
@@ -783,7 +744,7 @@ if __name__ == '__main__':
         const timeoutPromise = new Promise((_, reject) => 
           setTimeout(() => reject(new Error('Request timeout')), 30000)
         );
-        const fetchPromise = fetch(`/api/trending-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${state.itemsPerPage}`);
+        const fetchPromise = fetch(\`/api/trending-spaces?search=\${encodeURIComponent(searchText)}&offset=\${offset}&limit=\${state.itemsPerPage}\`);
         const response = await Promise.race([fetchPromise, timeoutPromise]);
         const data = await response.json();
         
@@ -800,7 +761,7 @@ if __name__ == '__main__':
         }
       } catch(e) {
         console.error(e);
-        elements.gridContainer.innerHTML = `
+        elements.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>
@@ -809,7 +770,7 @@ if __name__ == '__main__':
               Try Again
             </button>
           </div>
-        `;
+        \`;
         document.getElementById('retryButton')?.addEventListener('click', () => loadSpaces(0));
         renderPagination();
       } finally {
@@ -820,8 +781,9 @@ if __name__ == '__main__':
     function renderPagination() {
       elements.pagination.innerHTML = '';
       const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
+      
       const prevButton = document.createElement('button');
-      prevButton.className = `pagination-button ${state.currentPage === 0 ? 'disabled' : ''}`;
+      prevButton.className = \`pagination-button \${state.currentPage === 0 ? 'disabled' : ''}\`;
       prevButton.textContent = 'Previous';
       prevButton.disabled = state.currentPage === 0;
       prevButton.addEventListener('click', () => {
@@ -837,7 +799,7 @@ 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 === state.currentPage ? 'active' : ''}\`;
         pageButton.textContent = i + 1;
         pageButton.addEventListener('click', () => {
           if (i !== state.currentPage) {
@@ -848,7 +810,7 @@ if __name__ == '__main__':
       }
       
       const nextButton = document.createElement('button');
-      nextButton.className = `pagination-button ${state.currentPage >= totalPages - 1 ? 'disabled' : ''}`;
+      nextButton.className = \`pagination-button \${state.currentPage >= totalPages - 1 ? 'disabled' : ''}\`;
       nextButton.textContent = 'Next';
       nextButton.disabled = state.currentPage >= totalPages - 1;
       nextButton.addEventListener('click', () => {
@@ -865,11 +827,11 @@ if __name__ == '__main__':
       errorPlaceholder.className = 'error-placeholder';
       
       const errorMessage = document.createElement('p');
-      errorMessage.textContent = `"${title}" space couldn't be loaded`;
+      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.href = \`https://huggingface.co/spaces/\${owner}/\${name}\`;
       directLink.target = '_blank';
       directLink.textContent = 'Visit HF Space';
       directLink.style.color = '#3182ce';
@@ -919,7 +881,7 @@ if __name__ == '__main__':
           
           const rankBadge = document.createElement('div');
           rankBadge.className = 'rank-badge';
-          rankBadge.textContent = `#${rank}`;
+          rankBadge.textContent = \`#\${rank}\`;
           headerTop.appendChild(rankBadge);
           header.appendChild(headerTop);
           
@@ -928,7 +890,7 @@ if __name__ == '__main__':
           
           const ownerEl = document.createElement('div');
           ownerEl.className = 'owner-info';
-          ownerEl.textContent = `by ${owner}`;
+          ownerEl.textContent = \`by \${owner}\`;
           metaInfo.appendChild(ownerEl);
           
           const likesCounter = document.createElement('div');
@@ -954,7 +916,7 @@ if __name__ == '__main__':
           iframe.setAttribute('frameborder', '0');
           iframe.loading = 'lazy';
           
-          const spaceKey = `${owner}/${name}`;
+          const spaceKey = \`\${owner}/\${name}\`;
           state.iframeStatuses[spaceKey] = 'loading';
           
           iframe.onload = function() {
@@ -1005,17 +967,17 @@ if __name__ == '__main__':
       }
     }
     
-    elements.searchInput.addEventListener('input', () => {
-      clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(() => loadSpaces(0), 300);
-    });
-    elements.searchInput.addEventListener('keyup', (event) => {
-      if (event.key === 'Enter') {
-        loadSpaces(0);
+    async function loadCustomSpaces() {
+      try {
+        const resp = await fetch('/api/custom-spaces');
+        const data = await resp.json();
+        state.customSpaces = data.spaces || [];
+        renderGrid(state.customSpaces, elements.customGridContainer);
+      } catch(e) {
+        console.error(e);
+        elements.customGridContainer.innerHTML = '<p style="text-align:center; color:red;">Error loading custom spaces.</p>';
       }
-    });
-    elements.refreshButton.addEventListener('click', () => loadSpaces(0));
-    elements.statsToggle.addEventListener('click', toggleStats);
+    }
     
     document.querySelectorAll('.mac-button').forEach(button => {
       button.addEventListener('click', (e) => {
@@ -1039,7 +1001,7 @@ if __name__ == '__main__':
       }
     }
     
-    // 탭 전환 기능
+    // 탭 전환
     const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
     tabButtons.forEach(btn => {
@@ -1052,28 +1014,15 @@ if __name__ == '__main__':
       });
     });
     
-    // 두 번째 탭(커스텀 스페이스) 불러오기
-    async function loadCustomSpaces() {
-      try {
-        const resp = await fetch('/api/custom-spaces');
-        const data = await resp.json();
-        state.customSpaces = data.spaces || [];
-        renderGrid(state.customSpaces, elements.customGridContainer);
-      } catch(e) {
-        console.error(e);
-        elements.customGridContainer.innerHTML = '<p style="text-align:center; color:red;">Error loading custom spaces.</p>';
-      }
-    }
-    
     // 초기 실행
     window.addEventListener('load', function() {
-      // 리더보드 로드
+      // 첫 번째 탭 로드
       loadSpaces(0);
-      // 두 번째 탭(커스텀)도 같이 로드
+      // 두 번째 탭도 로드
       loadCustomSpaces();
     });
     
-    // 안전장치
+    // 혹시나 로딩이 너무 오래 걸릴 때 안전장치
     setTimeout(() => {
       if (state.isLoading) {
         setLoading(false);
@@ -1094,5 +1043,5 @@ if __name__ == '__main__':
 </html>
 ''')
     
-    # Huggingface Spaces에서 보통 port=7860 을 많이 씁니다.
+    # Huggingface Spaces에서 일반적으로 7860 포트 사용
     app.run(host='0.0.0.0', port=7860)