Update app.py

app.py

@@ -1,40 +1,37 @@
 from flask import Flask, render_template, request, jsonify
 import requests
 import os
-import time
-import random
 from collections import Counter
 
 app = Flask(__name__)
 
-# Function to fetch trending models from Huggingface with pagination
+# 1) 트렌딩 모델을 가져오는 함수
 def fetch_trending_models(offset=0, limit=72):
     try:
         url = "https://huggingface.co/api/models"
-        params = {"limit": 10000}  # Fetch more models, up to 10k
+        params = {"limit": 10000}  # 많은 모델을 가져옴
         response = requests.get(url, params=params, timeout=30)
         
         if response.status_code == 200:
             models = response.json()
-            # Filter out malformed data
-            filtered_models = [
-                model for model in models
-                if model.get('owner') != 'None' and model.get('id', '').split('/', 1)[0] != 'None'
+            # 필터링
+            filtered = [
+                m for m in models
+                if m.get('owner') != 'None' and m.get('id', '').split('/', 1)[0] != 'None'
             ]
-            
-            start = min(offset, len(filtered_models))
-            end = min(offset + limit, len(filtered_models))
-            
-            print(f"Fetched {len(filtered_models)} models, returning {end - start} items from {start} to {end}")
+            start = min(offset, len(filtered))
+            end = min(offset + limit, len(filtered))
+            print(f"Fetched {len(filtered)} models, returning {end - start} from {start} to {end}.")
             
             return {
-                'models': filtered_models[start:end],
-                'total': len(filtered_models),
+                'models': filtered[start:end],
+                'total': len(filtered),
                 'offset': offset,
                 'limit': limit,
-                'all_models': filtered_models
+                'all_models': filtered
             }
         else:
+            # 오류 응답 시 더미 모델
             print(f"Error fetching models: {response.status_code}")
             return {
                 'models': generate_dummy_models(limit),
@@ -44,7 +41,7 @@ def fetch_trending_models(offset=0, limit=72):
                 'all_models': generate_dummy_models(500)
             }
     except Exception as e:
-        print(f"Exception when fetching models: {e}")
+        print("Exception when fetching models:", e)
         return {
             'models': generate_dummy_models(limit),
             'total': 200,
@@ -53,31 +50,32 @@ def fetch_trending_models(offset=0, limit=72):
             'all_models': generate_dummy_models(500)
         }
 
-# Generate dummy models in case of error
+# 2) 더미 모델 생성 함수(오류시 사용)
 def generate_dummy_models(count):
-    models = []
+    dummy_list = []
     for i in range(count):
-        models.append({
+        dummy_list.append({
             'id': f'dummy/model-{i}',
             'owner': 'dummy',
             'title': f'Example Model {i+1}',
             'likes': 100 - i,
+            'downloads': 9999 - i,  # 임의의 다운로드 수
             'createdAt': '2023-01-01T00:00:00.000Z',
             'tags': ['dummy', 'fallback']
         })
-    return models
+    return dummy_list
 
-# Transform model ID to direct HF model URL
+# 3) 모델 URL 생성
 def transform_url(owner, name):
     name = name.replace('.', '-').replace('_', '-').lower()
     owner = owner.lower()
     return f"https://huggingface.co/{owner}/{name}"
 
-# Extract model details
+# 4) 모델 상세정보 가공
 def get_model_details(model_data, index, offset):
     try:
         if '/' in model_data.get('id', ''):
-            owner, name = model_data.get('id', '').split('/', 1)
+            owner, name = model_data['id'].split('/', 1)
         else:
             owner = model_data.get('owner', '')
             name = model_data.get('id', '')
@@ -88,9 +86,12 @@ def get_model_details(model_data, index, offset):
         original_url = f"https://huggingface.co/{owner}/{name}"
         embed_url = transform_url(owner, name)
         
+        # 다운로드, 좋아요
         likes_count = model_data.get('likes', 0)
+        downloads_count = model_data.get('downloads', 0)  # 다운로드 수 추가
+        
         title = model_data.get('title', name)
-        tags = model_data.get('tags', [])  # Tags list if available
+        tags = model_data.get('tags', [])
         
         return {
             'url': original_url,
@@ -99,11 +100,12 @@ def get_model_details(model_data, index, offset):
             'owner': owner,
             'name': name,
             'likes_count': likes_count,
+            'downloads_count': downloads_count,  # 다운로드 수
             'tags': tags,
             'rank': offset + index + 1
         }
     except Exception as e:
-        print(f"Error processing model data: {e}")
+        print("Error processing model data:", e)
         return {
             'url': 'https://huggingface.co',
             'embedUrl': 'https://huggingface.co',
@@ -111,74 +113,71 @@ def get_model_details(model_data, index, offset):
             'owner': 'huggingface',
             'name': 'error',
             'likes_count': 0,
+            'downloads_count': 0,
             'tags': [],
             'rank': offset + index + 1
         }
 
-# Gather top owners for stats
+# 5) 오너 통계 (Top 30)
 def get_owner_stats(all_models):
     owners = []
-    for model in all_models:
-        if '/' in model.get('id', ''):
-            owner, _ = model.get('id', '').split('/', 1)
+    for m in all_models:
+        if '/' in m.get('id', ''):
+            o, _ = m['id'].split('/', 1)
         else:
-            owner = model.get('owner', '')
-        
-        if owner != 'None':
-            owners.append(owner)
+            o = m.get('owner', '')
+        if o != 'None':
+            owners.append(o)
     
-    owner_counts = Counter(owners)
-    top_owners = owner_counts.most_common(30)
-    return top_owners
+    c = Counter(owners)
+    return c.most_common(30)
 
 @app.route('/')
 def home():
     return render_template('index.html')
 
-# API route for trending models
+# 6) 트렌딩 모델 API
 @app.route('/api/trending-models', methods=['GET'])
 def trending_models():
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
     limit = int(request.args.get('limit', 72))
     
-    models_data = fetch_trending_models(offset, limit)
-    
+    data = fetch_trending_models(offset, limit)
     results = []
-    for index, model_data in enumerate(models_data['models']):
-        info = get_model_details(model_data, index, offset)
+    for index, md in enumerate(data['models']):
+        info = get_model_details(md, index, offset)
         if not info:
             continue
         
         if search_query:
-            title = info['title'].lower()
-            owner = info['owner'].lower()
-            url = info['url'].lower()
-            tags_str = ' '.join(str(t).lower() for t in info.get('tags', []))
-            
-            # If search_query not in any field, skip
-            if (search_query not in title and
-                search_query not in owner and
-                search_query not in url and
-                search_query not in tags_str):
+            title_l = info['title'].lower()
+            owner_l = info['owner'].lower()
+            url_l = info['url'].lower()
+            tags_l = ' '.join(t.lower() for t in info['tags'])
+            # 검색 조건에 없으면 pass
+            if (search_query not in title_l and
+                search_query not in owner_l and
+                search_query not in url_l and
+                search_query not in tags_l):
                 continue
         
         results.append(info)
     
-    top_owners = get_owner_stats(models_data.get('all_models', []))
-    
+    top_owners = get_owner_stats(data['all_models'])
     return jsonify({
         'models': results,
-        'total': models_data['total'],
+        'total': data['total'],
         'offset': offset,
         'limit': limit,
         'top_owners': top_owners
     })
 
 if __name__ == '__main__':
+    # 템플릿 폴더 생성
     os.makedirs('templates', exist_ok=True)
     
-    # Generate the index.html with fallback for iframe error → pastel tag boxes
+    # index.html 생성
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write("""<!DOCTYPE html>
 <html lang="en">
@@ -188,7 +187,7 @@ if __name__ == '__main__':
   <title>Huggingface Models Gallery</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
     
     :root {
       --pastel-pink: #FFD6E0;
@@ -213,7 +212,6 @@ if __name__ == '__main__':
     * {
       margin: 0; padding: 0; box-sizing: border-box;
     }
-    
     body {
       font-family: 'Nunito', sans-serif;
       color: var(--text-primary);
@@ -221,12 +219,10 @@ if __name__ == '__main__':
       background: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-purple) 100%);
       padding: 2rem;
     }
-    
     .container {
       max-width: 1600px;
       margin: 0 auto;
     }
-    
     .mac-window {
       background-color: var(--mac-window-bg);
       border-radius: 10px;
@@ -237,10 +233,8 @@ if __name__ == '__main__':
       border: 1px solid var(--mac-border);
     }
     .mac-toolbar {
-      display: flex;
-      align-items: center;
-      padding: 10px 15px;
-      background-color: var(--mac-toolbar);
+      display: flex; align-items: center;
+      padding: 10px 15px; background-color: var(--mac-toolbar);
       border-bottom: 1px solid var(--mac-border);
     }
     .mac-buttons {
@@ -257,9 +251,7 @@ if __name__ == '__main__':
       flex-grow: 1; text-align: center;
       font-size: 0.9rem; color: var(--text-secondary);
     }
-    .mac-content {
-      padding: 20px;
-    }
+    .mac-content { padding: 20px; }
     
     .header { text-align: center; margin-bottom: 1.5rem; }
     .header h1 {
@@ -270,19 +262,18 @@ if __name__ == '__main__':
     }
     
     .search-bar {
-      display: flex; align-items: center;
-      background: #fff; border-radius: 30px; padding: 5px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+      display: flex; align-items: center; background: #fff; border-radius: 30px;
+      padding: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
       max-width: 600px; margin: 0.5rem auto 1.5rem 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;
+      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);
@@ -295,7 +286,8 @@ if __name__ == '__main__':
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
-      0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
     }
     
     .grid-container {
@@ -329,19 +321,24 @@ if __name__ == '__main__':
       padding: 4px 8px; border-radius: 50px;
     }
     .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;
+      display: flex; flex-wrap: wrap; align-items: center; font-size: 0.9rem;
+      gap: 12px;
     }
     .owner-info {
       color: var(--text-secondary); font-weight: 500;
     }
     .likes-counter {
-      display: flex; align-items: center; color: #e53e3e; font-weight: 600;
+      color: #e53e3e; font-weight: 600;
+      display: flex; align-items: center;
     }
     .likes-counter span { margin-left: 4px; }
+    .downloads-counter {
+      color: #2f855a; font-weight: 600;
+    }
     
     .grid-actions {
       padding: 10px 15px; text-align: right; background: rgba(255,255,255,0.7);
@@ -353,33 +350,27 @@ if __name__ == '__main__':
       padding: 5px 10px; border-radius: 5px; transition: all 0.2s;
       background: rgba(237,242,247,0.8);
     }
-    .open-link:hover {
-      background: #e2e8f0;
-    }
+    .open-link:hover { background: #e2e8f0; }
     
     .grid-content {
       position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       padding-top: 85px; padding-bottom: 45px;
     }
     .iframe-container {
-      width: 100%; height: 100%; overflow: hidden; position: relative;
+      width: 100%; height: 100%; position: relative; overflow: hidden;
     }
-    /* Scale down iframes - but often won't load due to X-Frame-Options. */
     .grid-content iframe {
       transform: scale(0.7); transform-origin: top left;
       width: 142.857%; height: 142.857%; border: none; border-radius: 0;
     }
     
-    /* Fallback for embed error: Show tags in pastel chips */
+    /* 임베드 실패 시 태그 출력 */
     .tags-fallback {
       position: absolute; top: 0; left: 0; width: 100%; height: 100%;
       background: rgba(255,255,255,0.8); backdrop-filter: blur(5px);
       display: flex; flex-direction: column; justify-content: center; align-items: center;
       text-align: center; padding: 1rem;
     }
-    .tags-fallback h4 {
-      margin-bottom: 1rem; font-size: 1.2rem; color: #444;
-    }
     .tags-list {
       display: flex; flex-wrap: wrap; gap: 10px; max-width: 300px; justify-content: center;
     }
@@ -387,11 +378,10 @@ if __name__ == '__main__':
       padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 600;
       color: #333; background-color: var(--pastel-yellow);
     }
-    /* We'll apply random pastel color later in JS */
     
-    /* Pagination */
     .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: #fff; border: none; padding: 10px 20px; border-radius: 10px;
@@ -408,10 +398,10 @@ if __name__ == '__main__':
       background: #edf2f7; color: #a0aec0; cursor: default; box-shadow: none;
     }
     
-    /* Loading Overlay */
     .loading {
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8);
-      backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000;
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: 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 {
@@ -426,10 +416,8 @@ if __name__ == '__main__':
       display: none; margin-top: 10px; color: #e53e3e; font-size: 0.9rem;
     }
     
-    /* Stats Section */
-    .stats-window {
-      margin-top: 2rem; margin-bottom: 2rem;
-    }
+    /* Stats */
+    .stats-window { margin: 2rem 0; }
     .stats-header {
       display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
     }
@@ -460,6 +448,9 @@ if __name__ == '__main__':
       .chart-container { height: 300px; }
     }
     
+    @keyframes spin {
+      0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
+    }
   </style>
 </head>
 <body>
@@ -473,14 +464,14 @@ if __name__ == '__main__':
         </div>
         <div class="mac-title">Huggingface Explorer</div>
       </div>
+      
       <div class="mac-content">
-        
         <div class="header">
           <h1>HF Model Leaderboard</h1>
-          <p>Discover the top 500 trending models from Huggingface</p>
+          <p>Discover the top trending models from Huggingface</p>
         </div>
         
-        <!-- Stats Section -->
+        <!-- 통계 섹션 -->
         <div class="stats-window mac-window">
           <div class="mac-toolbar">
             <div class="mac-buttons">
@@ -512,11 +503,11 @@ if __name__ == '__main__':
         
         <div id="gridContainer" class="grid-container"></div>
         <div id="pagination" class="pagination"></div>
-        
       </div>
     </div>
   </div>
   
+  <!-- 로딩 인디케이터 -->
   <div id="loadingIndicator" class="loading">
     <div class="loading-content">
       <div class="loading-spinner"></div>
@@ -553,14 +544,16 @@ if __name__ == '__main__':
       iframeStatuses: {}
     };
     
+    // 아이프레임 로딩 체크
     const iframeLoader = {
       checkQueue: {},
       maxAttempts: 3,
       checkInterval: 3000,
-      startChecking(iframe, owner, name, title, modelKey) {
+      startChecking(iframe, modelKey) {
         this.checkQueue[modelKey] = {
-          iframe, owner, name, title,
-          attempts: 0, status: 'loading'
+          iframe,
+          attempts: 0,
+          status: 'loading'
         };
         this.checkIframeStatus(modelKey);
       },
@@ -578,20 +571,24 @@ if __name__ == '__main__':
         item.attempts++;
         
         try {
-          // If iframe is removed from DOM, stop
           if(!iframe || !iframe.parentNode) {
             delete this.checkQueue[modelKey];
             return;
           }
-          
-          // Try reading content
+          // 실제 로딩 여부 체크
           try {
-            const hasBody = iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body;
+            const hasBody = iframe.contentWindow
+                         && iframe.contentWindow.document
+                         && iframe.contentWindow.document.body;
             if(hasBody && iframe.contentWindow.document.body.innerHTML.length > 100) {
-              // Possibly loaded, but check if there's an error text
+              // 일부 텍스트
               const bodyText = iframe.contentWindow.document.body.textContent.toLowerCase();
-              if(bodyText.includes('forbidden') || bodyText.includes('404') ||
-                 bodyText.includes('not found') || bodyText.includes('error')) {
+              if(
+                bodyText.includes('forbidden') ||
+                bodyText.includes('404') ||
+                bodyText.includes('not found') ||
+                bodyText.includes('error')
+              ) {
                 item.status = 'error';
                 handleIframeError(iframe);
               } else {
@@ -601,10 +598,10 @@ if __name__ == '__main__':
               return;
             }
           } catch(e) {
-            // Cross-origin or still loading
+            // 보안 등으로 접근 불가
           }
           
-          // If we reached max attempts
+          // 시도 횟수 초과 시 오류 처리
           if(item.attempts >= this.maxAttempts) {
             item.status = 'error';
             handleIframeError(iframe);
@@ -614,7 +611,7 @@ if __name__ == '__main__':
           
           setTimeout(() => this.checkIframeStatus(modelKey), this.checkInterval);
         } catch(err) {
-          console.error('Error checking iframe status:', err);
+          console.error('checkIframeStatus error:', err);
           if(item.attempts >= this.maxAttempts) {
             item.status = 'error';
             handleIframeError(iframe);
@@ -626,15 +623,15 @@ if __name__ == '__main__':
       }
     };
     
-    // 만약 iframe ��드가 실패하면, 태그를 파스텔톤으로 표시
+    // 아이프레임 오류 => 태그로 대체 (1) "Unable to embed model." 문구 삭제
     function handleIframeError(iframe) {
       const container = iframe.parentNode;
       if(!container) return;
       
-      // Hide the iframe
+      // 아이프레임 숨기기
       iframe.style.display = 'none';
       
-      // Read the dataset tags from the container
+      // 태그 가져오기
       const tagsRaw = container.dataset.tags || '[]';
       let tags = [];
       try {
@@ -643,14 +640,11 @@ if __name__ == '__main__':
         tags = [];
       }
       
-      // Create fallback UI
+      // 대체 UI
       const fallbackDiv = document.createElement('div');
       fallbackDiv.className = 'tags-fallback';
       
-      const fallbackTitle = document.createElement('h4');
-      fallbackTitle.textContent = 'Unable to embed model. Tags:';
-      fallbackDiv.appendChild(fallbackTitle);
-      
+      // 별도 문구 없이 태그만 표시
       const tagsList = document.createElement('div');
       tagsList.className = 'tags-list';
       
@@ -659,20 +653,21 @@ if __name__ == '__main__':
         'var(--pastel-yellow)', 'var(--pastel-green)', 'var(--pastel-orange)'
       ];
       
-      tags.forEach((tag, index) => {
-        const tagSpan = document.createElement('span');
-        tagSpan.className = 'tag-chip';
-        tagSpan.textContent = tag;
-        // assign random color from pastel list
-        const color = pastelColors[index % pastelColors.length];
-        tagSpan.style.backgroundColor = color;
-        tagsList.appendChild(tagSpan);
+      tags.forEach((tag, idx) => {
+        const chip = document.createElement('span');
+        chip.className = 'tag-chip';
+        chip.textContent = tag;
+        // 파스텔 색상 반복
+        const color = pastelColors[idx % pastelColors.length];
+        chip.style.backgroundColor = color;
+        tagsList.appendChild(chip);
       });
       
       fallbackDiv.appendChild(tagsList);
       container.appendChild(fallbackDiv);
     }
     
+    // 통계 표시 토글
     function toggleStats() {
       state.statsVisible = !state.statsVisible;
       elements.statsContent.classList.toggle('open', state.statsVisible);
@@ -717,8 +712,8 @@ if __name__ == '__main__':
             legend: { display: false },
             tooltip: {
               callbacks: {
-                title: (tooltipItems) => tooltipItems[0].label,
-                label: (context) => `Models: ${context.raw}`
+                title: (items) => items[0].label,
+                label: (ctx) => 'Models: ' + ctx.raw
               }
             }
           },
@@ -736,16 +731,17 @@ if __name__ == '__main__':
       });
     }
     
-    async function loadModels(page=0){
+    // 모델 로드
+    async function loadModels(page=0) {
       setLoading(true);
       try {
-        const searchText = elements.searchInput.value;
+        const search = elements.searchInput.value;
         const offset = page * state.itemsPerPage;
         
         const timeoutPromise = new Promise((_, reject) => {
           setTimeout(() => reject(new Error('Request timeout')), 30000);
         });
-        const fetchPromise = fetch(`/api/trending-models?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${state.itemsPerPage}`);
+        const fetchPromise = fetch(`/api/trending-models?search=${encodeURIComponent(search)}&offset=${offset}&limit=${state.itemsPerPage}`);
         
         const response = await Promise.race([fetchPromise, timeoutPromise]);
         const data = await response.json();
@@ -764,15 +760,16 @@ if __name__ == '__main__':
       } catch(error) {
         console.error('Error loading models:', error);
         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 models</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;">
+          <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 models</h3>
+            <p style="color:#666;">Please try refreshing. If it persists, check later.</p>
+            <button id="retryButton"
+                    style="margin-top:20px; padding:10px 20px; background:var(--pastel-purple);
+                           border:none; border-radius:5px; cursor:pointer;">
               Try Again
             </button>
-          </div>
-        `;
+          </div>`;
         document.getElementById('retryButton')?.addEventListener('click', () => loadModels(0));
         renderPagination();
       } finally {
@@ -780,9 +777,8 @@ if __name__ == '__main__':
       }
     }
     
-    function renderGrid(models){
+    function renderGrid(models) {
       elements.gridContainer.innerHTML = '';
-      
       if(!models || models.length===0) {
         const msg = document.createElement('p');
         msg.textContent = 'No models found matching your search.';
@@ -794,14 +790,19 @@ if __name__ == '__main__':
         return;
       }
       
-      models.forEach(item=>{
+      models.forEach((item) => {
         try {
-          const { url, title, likes_count, owner, name, rank, tags } = item;
+          const {
+            url, title, likes_count, downloads_count,
+            owner, name, rank, tags
+          } = item;
+          
           if(owner==='None') return;
           
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
           
+          // 헤더
           const header = document.createElement('div');
           header.className = 'grid-header';
           
@@ -820,6 +821,7 @@ if __name__ == '__main__':
           
           header.appendChild(headerTop);
           
+          // 메타
           const metaInfo = document.createElement('div');
           metaInfo.className = 'grid-meta';
           
@@ -828,52 +830,59 @@ if __name__ == '__main__':
           ownerEl.textContent = `by ${owner}`;
           metaInfo.appendChild(ownerEl);
           
-          const likesCounter = document.createElement('div');
-          likesCounter.className = 'likes-counter';
-          likesCounter.innerHTML = '♥ <span>' + likes_count + '</span>';
-          metaInfo.appendChild(likesCounter);
+          const likesEl = document.createElement('div');
+          likesEl.className = 'likes-counter';
+          likesEl.innerHTML = '♥ <span>' + likes_count + '</span>';
+          metaInfo.appendChild(likesEl);
+          
+          // 다운로드 수 추가
+          const downloadsEl = document.createElement('div');
+          downloadsEl.className = 'downloads-counter';
+          downloadsEl.textContent = 'Downloads: ' + downloads_count;
+          metaInfo.appendChild(downloadsEl);
           
           header.appendChild(metaInfo);
           gridItem.appendChild(header);
           
+          // 콘텐츠 (iframe 시도)
           const content = document.createElement('div');
           content.className = 'grid-content';
           
           const iframeContainer = document.createElement('div');
           iframeContainer.className = 'iframe-container';
-          
-          // 태그 정보를 dataset에 저장 (에러 시 fallback)
           iframeContainer.dataset.tags = JSON.stringify(tags);
           
           const iframe = document.createElement('iframe');
-          const directUrl = createDirectUrl(owner, name);
-          iframe.src = directUrl;
+          // direct url
+          iframe.src = createDirectUrl(owner, name);
           iframe.title = title;
           iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
-          iframe.setAttribute('allowfullscreen','');
-          iframe.setAttribute('frameborder','0');
+          iframe.setAttribute('allowfullscreen', '');
+          iframe.setAttribute('frameborder', '0');
           iframe.loading = 'lazy';
           
           const modelKey = `${owner}/${name}`;
           state.iframeStatuses[modelKey] = 'loading';
           
-          iframe.onload = function(){
-            iframeLoader.startChecking(iframe, owner, name, title, modelKey);
+          iframe.onload = () => {
+            iframeLoader.startChecking(iframe, modelKey);
           };
-          iframe.onerror = function(){
+          iframe.onerror = () => {
             state.iframeStatuses[modelKey] = 'error';
             handleIframeError(iframe);
           };
-          setTimeout(()=>{
+          // 일정 시간 후에도 로딩이면 태그로 대체
+          setTimeout(() => {
             if(state.iframeStatuses[modelKey]==='loading'){
               state.iframeStatuses[modelKey] = 'error';
               handleIframeError(iframe);
             }
-          }, 10000); // 10초 후에도 로딩 중이면 fallback
+          }, 8000);
           
           iframeContainer.appendChild(iframe);
           content.appendChild(iframeContainer);
           
+          // 하단 링크
           const actions = document.createElement('div');
           actions.className = 'grid-actions';
           
@@ -894,7 +903,8 @@ if __name__ == '__main__':
       });
     }
     
-    function renderPagination(){
+    // 페이지네이션
+    function renderPagination() {
       elements.pagination.innerHTML = '';
       const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
       
@@ -910,19 +920,19 @@ if __name__ == '__main__':
       const maxButtons = 7;
       let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons/2));
       let endPage = Math.min(totalPages-1, startPage + maxButtons-1);
-      if(endPage - startPage + 1 < maxButtons){
+      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';
-        if(i===state.currentPage) pageButton.classList.add('active');
-        pageButton.textContent = (i+1);
-        pageButton.addEventListener('click', ()=>{
+        const pageBtn = document.createElement('button');
+        pageBtn.className = 'pagination-button';
+        if(i===state.currentPage) pageBtn.classList.add('active');
+        pageBtn.textContent = i+1;
+        pageBtn.addEventListener('click', () => {
           if(i!==state.currentPage) loadModels(i);
         });
-        elements.pagination.appendChild(pageButton);
+        elements.pagination.appendChild(pageBtn);
       }
       
       const nextButton = document.createElement('button');
@@ -935,23 +945,24 @@ if __name__ == '__main__':
       elements.pagination.appendChild(nextButton);
     }
     
-    function setLoading(isLoading){
+    // 로딩 표시
+    function setLoading(isLoading) {
       state.isLoading = isLoading;
-      elements.loadingIndicator.style.display = isLoading? 'flex':'none';
+      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';
+          elements.loadingError.style.display = 'block';
         },10000);
       } else {
         elements.refreshButton.classList.remove('refreshing');
         clearTimeout(state.loadingTimeout);
-        elements.loadingError.style.display='none';
+        elements.loadingError.style.display = 'none';
       }
     }
     
-    // Create direct HF URL
+    // HF 모델 URL 생성
     function createDirectUrl(owner, name){
       try {
         name = name.replace(/\./g,'-').replace(/_/g,'-').toLowerCase();
@@ -963,6 +974,7 @@ if __name__ == '__main__':
       }
     }
     
+    // 검색박스 이벤트
     elements.searchInput.addEventListener('input', ()=>{
       clearTimeout(state.searchTimeout);
       state.searchTimeout = setTimeout(()=>loadModels(0), 300);
@@ -973,16 +985,18 @@ if __name__ == '__main__':
     elements.refreshButton.addEventListener('click', ()=>loadModels(0));
     elements.statsToggle.addEventListener('click', toggleStats);
     
+    // Mac 버튼 (연출용)
     document.querySelectorAll('.mac-button').forEach(btn=>{
-      btn.addEventListener('click',(e)=>{
-        e.preventDefault();
-      });
+      btn.addEventListener('click', (e)=> e.preventDefault());
     });
     
-    window.addEventListener('load', ()=>{
+    // 페이지 로드시
+    window.addEventListener('load', () => {
       setTimeout(()=>loadModels(0), 500);
     });
-    setTimeout(()=>{
+    
+    // 20초가 지나도 로딩 중이면...
+    setTimeout(() => {
       if(state.isLoading){
         setLoading(false);
         elements.gridContainer.innerHTML = `
@@ -990,19 +1004,20 @@ if __name__ == '__main__':
             <div style="font-size:3rem; margin-bottom:20px;">⏱️</div>
             <h3 style="margin-bottom:10px;">Loading is taking longer than expected</h3>
             <p style="color:#666;">Please try refreshing the page.</p>
-            <button onClick="window.location.reload()" style="margin-top:20px; padding:10px 20px; background:var(--pastel-purple); border:none; border-radius:5px; cursor:pointer;">
+            <button onClick="window.location.reload()"
+                    style="margin-top:20px; padding:10px 20px; background:var(--pastel-purple);
+                           border:none; border-radius:5px; cursor:pointer;">
               Reload Page
             </button>
-          </div>
-        `;
+          </div>`;
       }
     },20000);
     
+    // 즉시 로드 호출
     loadModels(0);
   </script>
 </body>
 </html>
 """)
     
-    # Run Flask
     app.run(host='0.0.0.0', port=7860)