Update app.py

app.py

@@ -10,53 +10,47 @@ app = Flask(__name__)
 # Function to fetch trending models from Huggingface with pagination
 def fetch_trending_models(offset=0, limit=72):
     try:
-        # Simple data fetching
         url = "https://huggingface.co/api/models"
-        params = {"limit": 10000}  # Get max 10000 to fetch more models
-        
-        # Increase timeout
+        params = {"limit": 10000}  # Fetch more models, up to 10k
         response = requests.get(url, params=params, timeout=30)
         
         if response.status_code == 200:
             models = response.json()
-            # Filter out any malformed data where owner or model id is 'None'
+            # Filter out malformed data
             filtered_models = [
                 model for model in models
                 if model.get('owner') != 'None' and model.get('id', '').split('/', 1)[0] != 'None'
             ]
             
-            # Slice according to requested offset and limit
             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}")
+            print(f"Fetched {len(filtered_models)} models, returning {end - start} items from {start} to {end}")
             
             return {
                 'models': filtered_models[start:end],
                 'total': len(filtered_models),
                 'offset': offset,
                 'limit': limit,
-                'all_models': filtered_models  # Return all models for stats calculation
+                'all_models': filtered_models
             }
         else:
             print(f"Error fetching models: {response.status_code}")
-            # Return dummy data in case of error
             return {
                 'models': generate_dummy_models(limit),
                 'total': 200,
                 'offset': offset,
                 'limit': limit,
-                'all_models': generate_dummy_models(500)  # Dummy data for stats
+                'all_models': generate_dummy_models(500)
             }
     except Exception as e:
         print(f"Exception when fetching models: {e}")
-        # Generate dummy data
         return {
             'models': generate_dummy_models(limit),
             'total': 200,
             'offset': offset,
             'limit': limit,
-            'all_models': generate_dummy_models(500)  # Dummy data for stats
+            'all_models': generate_dummy_models(500)
         }
 
 # Generate dummy models in case of error
@@ -68,64 +62,48 @@ def generate_dummy_models(count):
             'owner': 'dummy',
             'title': f'Example Model {i+1}',
             'likes': 100 - i,
-            'createdAt': '2023-01-01T00:00:00.000Z'
+            'createdAt': '2023-01-01T00:00:00.000Z',
+            'tags': ['dummy', 'fallback']
         })
     return models
 
-# For consistency, we’ll keep a transform_url function.
-# Instead of creating "hf.space" links, we now link to the HF model page directly.
+# Transform model ID to direct HF model URL
 def transform_url(owner, name):
-    # 1. Replace '.' with '-'
-    name = name.replace('.', '-')
-    # 2. Replace '_' with '-'
-    name = name.replace('_', '-')
-    # 3. Convert to lowercase
+    name = name.replace('.', '-').replace('_', '-').lower()
     owner = owner.lower()
-    name = name.lower()
-    
-    # For models, we just point to huggingface.co/{owner}/{name}
     return f"https://huggingface.co/{owner}/{name}"
 
-# Get model details
+# Extract model details
 def get_model_details(model_data, index, offset):
     try:
-        # Extract common info
         if '/' in model_data.get('id', ''):
             owner, name = model_data.get('id', '').split('/', 1)
         else:
             owner = model_data.get('owner', '')
             name = model_data.get('id', '')
         
-        # Ignore if contains None
         if owner == 'None' or name == 'None':
             return None
         
-        # Construct URLs
         original_url = f"https://huggingface.co/{owner}/{name}"
         embed_url = transform_url(owner, name)
         
-        # Likes count
         likes_count = model_data.get('likes', 0)
-        
-        # Extract title if available; fallback to model name
         title = model_data.get('title', name)
-        
-        # Tags
-        tags = model_data.get('tags', [])
+        tags = model_data.get('tags', [])  # Tags list if available
         
         return {
             'url': original_url,
             'embedUrl': embed_url,
             'title': title,
             'owner': owner,
-            'name': name,  # Store Model name
+            'name': name,
             'likes_count': likes_count,
             'tags': tags,
             'rank': offset + index + 1
         }
     except Exception as e:
         print(f"Error processing model data: {e}")
-        # Return basic object even if error occurs
         return {
             'url': 'https://huggingface.co',
             'embedUrl': 'https://huggingface.co',
@@ -137,7 +115,7 @@ def get_model_details(model_data, index, offset):
             'rank': offset + index + 1
         }
 
-# Get owner statistics from all models
+# Gather top owners for stats
 def get_owner_stats(all_models):
     owners = []
     for model in all_models:
@@ -149,53 +127,44 @@ def get_owner_stats(all_models):
         if owner != 'None':
             owners.append(owner)
     
-    # Count occurrences of each owner
     owner_counts = Counter(owners)
-    
-    # Get top 30 owners by count
     top_owners = owner_counts.most_common(30)
-    
     return top_owners
 
-# Homepage route
 @app.route('/')
 def home():
     return render_template('index.html')
 
-# Trending models API
+# API route for trending models
 @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))  # Default 72
+    limit = int(request.args.get('limit', 72))
     
-    # Fetch models
     models_data = fetch_trending_models(offset, limit)
     
-    # Process and filter models
     results = []
     for index, model_data in enumerate(models_data['models']):
-        model_info = get_model_details(model_data, index, offset)
-        
-        if not model_info:
+        info = get_model_details(model_data, index, offset)
+        if not info:
             continue
-            
-        # Apply search filter if needed
+        
         if search_query:
-            title = model_info['title'].lower()
-            owner = model_info['owner'].lower()
-            url = model_info['url'].lower()
-            tags = ' '.join([str(tag) for tag in model_info.get('tags', [])]).lower()
+            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 title and 
-                search_query not in owner and 
-                search_query not in url and 
-                search_query not in 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):
                 continue
         
-        results.append(model_info)
+        results.append(info)
     
-    # Get owner statistics for all models
     top_owners = get_owner_stats(models_data.get('all_models', []))
     
     return jsonify({
@@ -203,20 +172,19 @@ def trending_models():
         'total': models_data['total'],
         'offset': offset,
         'limit': limit,
-        'top_owners': top_owners  # Add top owners data
+        'top_owners': top_owners
     })
 
 if __name__ == '__main__':
-    # Create templates folder if needed
     os.makedirs('templates', exist_ok=True)
     
-    # Create index.html file (the same UI, but references changed to "Model" instead of "Space")
+    # Generate the index.html with fallback for iframe error → pastel tag boxes
     with open('templates/index.html', 'w', encoding='utf-8') as f:
-        f.write('''<!DOCTYPE html>
+        f.write("""<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Huggingface Models Gallery</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
@@ -243,18 +211,14 @@ if __name__ == '__main__':
     }
     
     * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
+      margin: 0; padding: 0; box-sizing: border-box;
     }
     
     body {
-      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      line-height: 1.6;
+      font-family: 'Nunito', sans-serif;
       color: var(--text-primary);
-      background-color: #f8f9fa;
-      background-image: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-purple) 100%);
       min-height: 100vh;
+      background: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-purple) 100%);
       padding: 2rem;
     }
     
@@ -263,7 +227,6 @@ if __name__ == '__main__':
       margin: 0 auto;
     }
     
-    /* Mac OS Window Styling */
     .mac-window {
       background-color: var(--mac-window-bg);
       border-radius: 10px;
@@ -273,7 +236,6 @@ if __name__ == '__main__':
       margin-bottom: 2rem;
       border: 1px solid var(--mac-border);
     }
-    
     .mac-toolbar {
       display: flex;
       align-items: center;
@@ -281,472 +243,223 @@ if __name__ == '__main__':
       background-color: var(--mac-toolbar);
       border-bottom: 1px solid var(--mac-border);
     }
-    
     .mac-buttons {
-      display: flex;
-      gap: 8px;
-      margin-right: 15px;
+      display: flex; gap: 8px; margin-right: 15px;
     }
-    
     .mac-button {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
+      width: 12px; height: 12px; border-radius: 50%;
       cursor: default;
     }
-    
-    .mac-close {
-      background-color: var(--mac-button-red);
-    }
-    
-    .mac-minimize {
-      background-color: var(--mac-button-yellow);
-    }
-    
-    .mac-maximize {
-      background-color: var(--mac-button-green);
-    }
-    
+    .mac-close    { background-color: var(--mac-button-red); }
+    .mac-minimize { background-color: var(--mac-button-yellow); }
+    .mac-maximize { background-color: var(--mac-button-green); }
     .mac-title {
-      flex-grow: 1;
-      text-align: center;
-      font-size: 0.9rem;
-      color: var(--text-secondary);
+      flex-grow: 1; text-align: center;
+      font-size: 0.9rem; color: var(--text-secondary);
     }
-    
     .mac-content {
       padding: 20px;
     }
     
-    /* Header Styling */
-    .header {
-      text-align: center;
-      margin-bottom: 1.5rem;
-      position: relative;
-    }
-    
+    .header { text-align: center; margin-bottom: 1.5rem; }
     .header h1 {
-      font-size: 2.2rem;
-      font-weight: 700;
-      margin: 0;
-      color: #2d3748;
-      letter-spacing: -0.5px;
+      font-size: 2.2rem; font-weight: 700; color: #2d3748; letter-spacing: -0.5px;
     }
-    
     .header p {
-      color: var(--text-secondary);
-      margin-top: 0.5rem;
-      font-size: 1.1rem;
+      color: var(--text-secondary); margin-top: 0.5rem; font-size: 1.1rem;
     }
     
-    /* Controls Styling */
     .search-bar {
-      display: flex;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      background-color: white;
-      border-radius: 30px;
-      padding: 5px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
+      display: flex; align-items: center;
+      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;
+      background-color: var(--pastel-green); color: #1a202c; border: none; border-radius: 30px;
+      padding: 10px 20px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
+      display: flex; align-items: center; gap: 8px;
     }
-    
     .search-bar .refresh-btn:hover {
-      background-color: #9ee7c0;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      background-color: #9ee7c0; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
-    
     .refresh-icon {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      border: 2px solid #1a202c;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: none;
+      width: 16px; height: 16px; border: 2px solid #1a202c;
+      border-top-color: transparent; border-radius: 50%; animation: none;
     }
-    
     .refreshing .refresh-icon {
       animation: spin 1s linear infinite;
     }
-    
     @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+      0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
     }
     
-    /* Grid Styling */
     .grid-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 2rem;
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+      gap: 1.5rem; margin-bottom: 2rem;
     }
-    
     .grid-item {
-      height: 500px;
-      position: relative;
-      overflow: hidden;
-      transition: all 0.3s ease;
-      border-radius: 15px;
-    }
-    
-    .grid-item:nth-child(6n+1) { background-color: var(--pastel-pink); }
-    .grid-item:nth-child(6n+2) { background-color: var(--pastel-blue); }
-    .grid-item:nth-child(6n+3) { background-color: var(--pastel-purple); }
-    .grid-item:nth-child(6n+4) { background-color: var(--pastel-yellow); }
-    .grid-item:nth-child(6n+5) { background-color: var(--pastel-green); }
-    .grid-item:nth-child(6n+6) { background-color: var(--pastel-orange); }
-    
+      height: 500px; position: relative; overflow: hidden;
+      transition: all 0.3s ease; border-radius: 15px;
+    }
+    .grid-item:nth-child(6n+1) { background: var(--pastel-pink); }
+    .grid-item:nth-child(6n+2) { background: var(--pastel-blue); }
+    .grid-item:nth-child(6n+3) { background: var(--pastel-purple); }
+    .grid-item:nth-child(6n+4) { background: var(--pastel-yellow); }
+    .grid-item:nth-child(6n+5) { background: var(--pastel-green); }
+    .grid-item:nth-child(6n+6) { background: var(--pastel-orange); }
     .grid-item:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+      transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15);
     }
     
     .grid-header {
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      background-color: rgba(255, 255, 255, 0.7);
-      backdrop-filter: blur(5px);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      padding: 15px; display: flex; flex-direction: column;
+      background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);
+      border-bottom: 1px solid rgba(0,0,0,0.05);
     }
-    
     .grid-header-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 8px;
+      display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
     }
-    
     .rank-badge {
-      background-color: #1a202c;
-      color: white;
-      font-size: 0.8rem;
-      font-weight: 600;
-      padding: 4px 8px;
-      border-radius: 50px;
+      background: #1a202c; color: #fff; font-size: 0.8rem; font-weight: 600;
+      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; justify-content: space-between; align-items: center; font-size: 0.9rem;
     }
-    
     .owner-info {
-      color: var(--text-secondary);
-      font-weight: 500;
+      color: var(--text-secondary); font-weight: 500;
     }
-    
     .likes-counter {
-      display: flex;
-      align-items: center;
-      color: #e53e3e;
-      font-weight: 600;
-    }
-    
-    .likes-counter span {
-      margin-left: 4px;
+      display: flex; align-items: center; color: #e53e3e; font-weight: 600;
     }
+    .likes-counter span { margin-left: 4px; }
     
     .grid-actions {
-      padding: 10px 15px;
-      text-align: right;
-      background-color: rgba(255, 255, 255, 0.7);
-      backdrop-filter: blur(5px);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 10;
-      display: flex;
-      justify-content: flex-end;
+      padding: 10px 15px; text-align: right; background: rgba(255,255,255,0.7);
+      backdrop-filter: blur(5px); position: absolute; bottom: 0; left: 0; right: 0;
+      z-index: 10; display: flex; justify-content: flex-end;
     }
-    
     .open-link {
-      text-decoration: none;
-      color: #2c5282;
-      font-weight: 600;
-      padding: 5px 10px;
-      border-radius: 5px;
-      transition: all 0.2s;
-      background-color: rgba(237, 242, 247, 0.8);
+      text-decoration: none; color: #2c5282; font-weight: 600;
+      padding: 5px 10px; border-radius: 5px; transition: all 0.2s;
+      background: rgba(237,242,247,0.8);
     }
-    
     .open-link:hover {
-      background-color: #e2e8f0;
+      background: #e2e8f0;
     }
     
     .grid-content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 85px; /* Header height */
-      padding-bottom: 45px; /* Actions height */
+      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%; overflow: hidden; position: relative;
     }
-    
-    /* Apply 70% scaling to iframes */
+    /* 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;
+      transform: scale(0.7); transform-origin: top left;
+      width: 142.857%; height: 142.857%; border: none; border-radius: 0;
     }
     
-    .error-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 20px;
-      background-color: rgba(255, 255, 255, 0.9);
-      text-align: center;
+    /* 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;
     }
-    
-    .error-emoji {
-      font-size: 6rem;
-      margin-bottom: 1.5rem;
-      animation: bounce 1s infinite alternate;
-      text-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    .tags-fallback h4 {
+      margin-bottom: 1rem; font-size: 1.2rem; color: #444;
     }
-    
-    @keyframes bounce {
-      from {
-        transform: translateY(0px) scale(1);
-      }
-      to {
-        transform: translateY(-15px) scale(1.1);
-      }
+    .tags-list {
+      display: flex; flex-wrap: wrap; gap: 10px; max-width: 300px; justify-content: center;
+    }
+    .tag-chip {
+      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 Styling */
+    /* 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-color: white;
-      border: none;
-      padding: 10px 20px;
-      border-radius: 10px;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      color: var(--text-primary);
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+      background: #fff; border: none; padding: 10px 20px; border-radius: 10px;
+      font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
+      color: var(--text-primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }
-    
     .pagination-button:hover {
-      background-color: #f8f9fa;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      background: #f8f9fa; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
-    
     .pagination-button.active {
-      background-color: var(--pastel-purple);
-      color: #4a5568;
+      background: var(--pastel-purple); color: #4a5568;
     }
-    
     .pagination-button:disabled {
-      background-color: #edf2f7;
-      color: #a0aec0;
-      cursor: default;
-      box-shadow: none;
+      background: #edf2f7; color: #a0aec0; cursor: default; box-shadow: none;
     }
     
-    /* Loading Indicator */
+    /* Loading Overlay */
     .loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(5px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
+      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-content { text-align: center; }
     .loading-spinner {
-      width: 60px;
-      height: 60px;
-      border: 5px solid #e2e8f0;
-      border-top-color: var(--pastel-purple);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin: 0 auto 15px;
+      width: 60px; height: 60px; border: 5px solid #e2e8f0;
+      border-top-color: var(--pastel-purple); border-radius: 50%;
+      animation: spin 1s linear infinite; margin: 0 auto 15px;
     }
-    
     .loading-text {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: #4a5568;
+      font-size: 1.2rem; font-weight: 600; color: #4a5568;
     }
-    
     .loading-error {
-      display: none;
-      margin-top: 10px;
-      color: #e53e3e;
-      font-size: 0.9rem;
+      display: none; margin-top: 10px; color: #e53e3e; font-size: 0.9rem;
     }
     
-    /* Stats window styling */
+    /* Stats Section */
     .stats-window {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
+      margin-top: 2rem; margin-bottom: 2rem;
     }
-    
     .stats-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1rem;
+      display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
     }
-    
     .stats-title {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: #2d3748;
+      font-size: 1.5rem; font-weight: 700; color: #2d3748;
     }
-    
     .stats-toggle {
-      background-color: var(--pastel-blue);
-      border: none;
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
+      background: var(--pastel-blue); border: none; padding: 8px 16px; border-radius: 20px;
+      font-weight: 600; cursor: pointer; transition: all 0.2s;
     }
-    
     .stats-toggle:hover {
-      background-color: var(--pastel-purple);
+      background: var(--pastel-purple);
     }
-    
     .stats-content {
-      background-color: white;
-      border-radius: 10px;
-      padding: 20px;
-      box-shadow: var(--box-shadow);
-      max-height: 0;
-      overflow: hidden;
-      transition: max-height 0.5s ease-out;
-    }
-    
-    .stats-content.open {
-      max-height: 600px;
+      background: #fff; border-radius: 10px; padding: 20px; box-shadow: var(--box-shadow);
+      max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out;
     }
+    .stats-content.open { max-height: 600px; }
+    .chart-container { width: 100%; height: 500px; }
     
-    .chart-container {
-      width: 100%;
-      height: 500px;
+    @media(max-width: 768px) {
+      body { padding: 1rem; }
+      .grid-container { grid-template-columns: 1fr; }
+      .search-bar { flex-direction: column; padding: 10px; }
+      .search-bar input { width: 100%; margin-bottom: 10px; }
+      .search-bar .refresh-btn { width: 100%; justify-content: center; }
+      .pagination { flex-wrap: wrap; }
+      .chart-container { height: 300px; }
     }
     
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      body {
-        padding: 1rem;
-      }
-      
-      .grid-container {
-        grid-template-columns: 1fr;
-      }
-      
-      .search-bar {
-        flex-direction: column;
-        padding: 10px;
-      }
-      
-      .search-bar input {
-        width: 100%;
-        margin-bottom: 10px;
-      }
-      
-      .search-bar .refresh-btn {
-        width: 100%;
-        justify-content: center;
-      }
-      
-      .pagination {
-        flex-wrap: wrap;
-      }
-      
-      .chart-container {
-        height: 300px;
-      }
-    }
-    
-    .error-emoji-detector { 
-      position: fixed; 
-      top: -9999px; 
-      left: -9999px;
-      z-index: -1; 
-      opacity: 0;
-    }
   </style>
 </head>
 <body>
@@ -760,8 +473,8 @@ 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>
@@ -791,18 +504,15 @@ if __name__ == '__main__':
         </div>
         
         <div class="search-bar">
-          <input type="text" id="searchInput" placeholder="Search by name, owner, or tags..." />
+          <input type="text" id="searchInput" placeholder="Search by name, owner, or tags..."/>
           <button id="refreshButton" class="refresh-btn">
-            <span class="refresh-icon"></span>
-            Refresh
+            <span class="refresh-icon"></span> Refresh
           </button>
         </div>
         
         <div id="gridContainer" class="grid-container"></div>
+        <div id="pagination" class="pagination"></div>
         
-        <div id="pagination" class="pagination">
-          <!-- Pagination buttons will be dynamically created by JavaScript -->
-        </div>
       </div>
     </div>
   </div>
@@ -818,7 +528,6 @@ if __name__ == '__main__':
   </div>
   
   <script>
-    // DOM element references
     const elements = {
       gridContainer: document.getElementById('gridContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
@@ -831,82 +540,60 @@ if __name__ == '__main__':
       creatorStatsChart: document.getElementById('creatorStatsChart')
     };
     
-    // Application state
     const state = {
       isLoading: false,
       models: [],
       currentPage: 0,
-      itemsPerPage: 72,  // 72 items per page
+      itemsPerPage: 72,
       totalItems: 0,
       loadingTimeout: null,
-      staticModeAttempted: {}, // Track which models have attempted static mode
       statsVisible: false,
       chartInstance: null,
       topOwners: [],
-      iframeStatuses: {} // Track iframe loading status
+      iframeStatuses: {}
     };
     
-    // Advanced iframe loader for better error detection
     const iframeLoader = {
       checkQueue: {},
-      maxAttempts: 5, // Try multiple times
-      checkInterval: 5000, // Check every 5 seconds
-      
-      // Start checking iframe loading status
-      startChecking: function(iframe, owner, name, title, modelKey) {
-        // Initialize tracking
+      maxAttempts: 3,
+      checkInterval: 3000,
+      startChecking(iframe, owner, name, title, modelKey) {
         this.checkQueue[modelKey] = {
-          iframe: iframe,
-          owner: owner,
-          name: name,
-          title: title,
-          attempts: 0,
-          status: 'loading'
+          iframe, owner, name, title,
+          attempts: 0, status: 'loading'
         };
-        
-        // Start recursive checking
         this.checkIframeStatus(modelKey);
       },
-      
-      // Check iframe loading status
-      checkIframeStatus: function(modelKey) {
-        if (!this.checkQueue[modelKey]) return;
+      checkIframeStatus(modelKey) {
+        if(!this.checkQueue[modelKey]) return;
         
         const item = this.checkQueue[modelKey];
-        const iframe = item.iframe;
+        const { iframe } = item;
         
-        // If already processed, stop checking
-        if (item.status !== 'loading') {
+        if(item.status !== 'loading') {
           delete this.checkQueue[modelKey];
           return;
         }
         
-        // Increment attempt counter
         item.attempts++;
         
         try {
-          // 1. Check if iframe was removed from DOM
-          if (!iframe || !iframe.parentNode) {
+          // If iframe is removed from DOM, stop
+          if(!iframe || !iframe.parentNode) {
             delete this.checkQueue[modelKey];
             return;
           }
           
-          // 2. Check if content has loaded
+          // Try reading content
           try {
-            const hasContent = iframe.contentWindow && 
-                             iframe.contentWindow.document && 
-                             iframe.contentWindow.document.body;
-            
-            // 2.1 If content exists and has actual content loaded
-            if (hasContent && iframe.contentWindow.document.body.innerHTML.length > 100) {
-              // Check if it contains error text
+            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, item.owner, item.name, item.title);
+                handleIframeError(iframe);
               } else {
                 item.status = 'success';
               }
@@ -914,93 +601,111 @@ if __name__ == '__main__':
               return;
             }
           } catch(e) {
-            // Cross-origin access errors are normal, might be still loading
-          }
-          
-          // 3. Check iframe's visible size
-          const rect = iframe.getBoundingClientRect();
-          if (rect.width > 50 && rect.height > 50 && item.attempts > 2) {
-            // If it has sufficient size, mark as success
-            item.status = 'success';
-            delete this.checkQueue[modelKey];
-            return;
+            // Cross-origin or still loading
           }
           
-          // 4. If we've reached max attempts
-          if (item.attempts >= this.maxAttempts) {
-            // Final check: is iframe visible?
-            if (iframe.offsetWidth > 0 && iframe.offsetHeight > 0) {
-              // If visible, mark as success
-              item.status = 'success';
-            } else {
-              // If still not visible, mark as error
-              item.status = 'error';
-              handleIframeError(iframe, item.owner, item.name, item.title);
-            }
+          // If we reached max attempts
+          if(item.attempts >= this.maxAttempts) {
+            item.status = 'error';
+            handleIframeError(iframe);
             delete this.checkQueue[modelKey];
             return;
           }
           
-          // Schedule next check with exponential backoff
-          const nextDelay = this.checkInterval * Math.pow(1.5, item.attempts - 1);
-          setTimeout(() => this.checkIframeStatus(modelKey), nextDelay);
-          
-        } catch (e) {
-          console.error('Error checking iframe status:', e);
-          
-          // If error occurs, try a few more times
-          if (item.attempts >= this.maxAttempts) {
+          setTimeout(() => this.checkIframeStatus(modelKey), this.checkInterval);
+        } catch(err) {
+          console.error('Error checking iframe status:', err);
+          if(item.attempts >= this.maxAttempts) {
             item.status = 'error';
-            handleIframeError(iframe, item.owner, item.name, item.title);
+            handleIframeError(iframe);
             delete this.checkQueue[modelKey];
           } else {
-            // Try again
             setTimeout(() => this.checkIframeStatus(modelKey), this.checkInterval);
           }
         }
       }
     };
     
-    // Toggle stats display
+    // 만약 iframe 로드가 실패하면, 태그를 파스텔톤으로 표시
+    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 {
+        tags = JSON.parse(tagsRaw);
+      } catch(e) {
+        tags = [];
+      }
+      
+      // Create fallback 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';
+      
+      const pastelColors = [
+        'var(--pastel-pink)', 'var(--pastel-blue)', 'var(--pastel-purple)',
+        '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);
+      });
+      
+      fallbackDiv.appendChild(tagsList);
+      container.appendChild(fallbackDiv);
+    }
+    
     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) {
+      if(state.statsVisible && state.topOwners.length > 0) {
         renderCreatorStats();
       }
     }
     
-    // Render creator stats chart
     function renderCreatorStats() {
-      if (state.chartInstance) {
+      if(state.chartInstance) {
         state.chartInstance.destroy();
       }
       
       const ctx = elements.creatorStatsChart.getContext('2d');
+      const labels = state.topOwners.map(o => o[0]);
+      const data = state.topOwners.map(o => o[1]);
       
-      // Prepare data
-      const labels = state.topOwners.map(item => item[0]);
-      const data = state.topOwners.map(item => item[1]);
-      
-      // Generate colors for bars
       const colors = [];
-      for (let i = 0; i < labels.length; i++) {
+      for(let i=0; i<labels.length; i++){
         const hue = (i * 360 / labels.length) % 360;
-        colors.push(`hsla(${hue}, 70%, 80%, 0.7)`);
+        colors.push(`hsla(${hue},70%,80%,0.7)`);
       }
       
-      // Create chart
       state.chartInstance = new Chart(ctx, {
         type: 'bar',
         data: {
-          labels: labels,
+          labels,
           datasets: [{
             label: 'Number of Models',
-            data: data,
+            data,
             backgroundColor: colors,
-            borderColor: colors.map(color => color.replace('0.7', '1')),
+            borderColor: colors.map(c => c.replace('0.7','1')),
             borderWidth: 1
           }]
         },
@@ -1009,70 +714,42 @@ if __name__ == '__main__':
           responsive: true,
           maintainAspectRatio: false,
           plugins: {
-            legend: {
-              display: false
-            },
+            legend: { display: false },
             tooltip: {
               callbacks: {
-                title: function(tooltipItems) {
-                  return tooltipItems[0].label;
-                },
-                label: function(context) {
-                  return `Models: ${context.raw}`;
-                }
+                title: (tooltipItems) => tooltipItems[0].label,
+                label: (context) => `Models: ${context.raw}`
               }
             }
           },
           scales: {
             x: {
               beginAtZero: true,
-              title: {
-                display: true,
-                text: 'Number of Models'
-              }
+              title: { display: true, text: 'Number of Models' }
             },
             y: {
-              title: {
-                display: true,
-                text: 'Creator ID'
-              },
-              // Ensure all labels are shown without gaps
-              ticks: {
-                autoSkip: false,
-                font: function(context) {
-                  // Adjust font size if needed
-                  const defaultSize = 11;
-                  return {
-                    size: labels.length > 20 ? defaultSize - 1 : defaultSize
-                  };
-                }
-              }
+              title: { display: true, text: 'Creator ID' },
+              ticks: { autoSkip: false }
             }
           }
         }
       });
     }
     
-    // Load models with timeout
-    async function loadModels(page = 0) {
+    async function loadModels(page=0){
       setLoading(true);
-      
       try {
         const searchText = elements.searchInput.value;
         const offset = page * state.itemsPerPage;
         
-        // Set timeout (30 seconds)
-        const timeoutPromise = new Promise((_, reject) => 
-          setTimeout(() => reject(new Error('Request timeout')), 30000)
-        );
-        
+        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}`);
         
-        // Use the first Promise that completes
         const response = await Promise.race([fetchPromise, timeoutPromise]);
         const data = await response.json();
         
-        // Update state on successful load
         state.models = data.models;
         state.totalItems = data.total;
         state.currentPage = page;
@@ -1081,16 +758,13 @@ if __name__ == '__main__':
         renderGrid(data.models);
         renderPagination();
         
-        // If stats are visible, update chart
-        if (state.statsVisible && state.topOwners.length > 0) {
+        if(state.statsVisible && state.topOwners.length > 0){
           renderCreatorStats();
         }
-      } catch (error) {
+      } catch(error) {
         console.error('Error loading models:', error);
-        
-        // Show empty grid with error message
         elements.gridContainer.innerHTML = `
-          <div style="grid-column: 1/-1; text-align: center; padding: 40px;">
+          <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>
@@ -1099,145 +773,46 @@ if __name__ == '__main__':
             </button>
           </div>
         `;
-        
-        // Add event listener to retry button
         document.getElementById('retryButton')?.addEventListener('click', () => loadModels(0));
-        
-        // Render simple pagination
         renderPagination();
       } finally {
         setLoading(false);
       }
     }
     
-    // Render pagination
-    function renderPagination() {
-      elements.pagination.innerHTML = '';
-      
-      const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
-      
-      // Previous page button
-      const prevButton = document.createElement('button');
-      prevButton.className = `pagination-button ${state.currentPage === 0 ? 'disabled' : ''}`;
-      prevButton.textContent = 'Previous';
-      prevButton.disabled = state.currentPage === 0;
-      prevButton.addEventListener('click', () => {
-        if (state.currentPage > 0) {
-          loadModels(state.currentPage - 1);
-        }
-      });
-      elements.pagination.appendChild(prevButton);
-      
-      // Page buttons (maximum of 7)
-      const maxButtons = 7;
-      let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons / 2));
-      let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
-      
-      // Adjust if not enough pages to fill 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 ${i === state.currentPage ? 'active' : ''}`;
-        pageButton.textContent = i + 1;
-        pageButton.addEventListener('click', () => {
-          if (i !== state.currentPage) {
-            loadModels(i);
-          }
-        });
-        elements.pagination.appendChild(pageButton);
-      }
-      
-      // Next page button
-      const nextButton = document.createElement('button');
-      nextButton.className = `pagination-button ${state.currentPage >= totalPages - 1 ? 'disabled' : ''}`;
-      nextButton.textContent = 'Next';
-      nextButton.disabled = state.currentPage >= totalPages - 1;
-      nextButton.addEventListener('click', () => {
-        if (state.currentPage < totalPages - 1) {
-          loadModels(state.currentPage + 1);
-        }
-      });
-      elements.pagination.appendChild(nextButton);
-    }
-    
-    // Handle iframe error and provide fallback error message
-    function handleIframeError(iframe, owner, name, title) {
-      const container = iframe.parentNode;
-      
-      // Error message container
-      const errorPlaceholder = document.createElement('div');
-      errorPlaceholder.className = 'error-placeholder';
-      
-      // Error message
-      const errorMessage = document.createElement('p');
-      errorMessage.textContent = `"${title}" model couldn't be loaded`;
-      errorPlaceholder.appendChild(errorMessage);
-      
-      // Direct HF link
-      const directLink = document.createElement('a');
-      directLink.href = `https://huggingface.co/${owner}/${name}`;
-      directLink.target = '_blank';
-      directLink.textContent = 'Visit HF Model';
-      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);
-      
-      // Hide iframe and show error message
-      iframe.style.display = 'none';
-      container.appendChild(errorPlaceholder);
-    }
-    
-    // Render grid of models
-    function renderGrid(models) {
+    function renderGrid(models){
       elements.gridContainer.innerHTML = '';
       
-      if (!models || models.length === 0) {
-        const noResultsMsg = document.createElement('p');
-        noResultsMsg.textContent = 'No models found matching your search.';
-        noResultsMsg.style.padding = '2rem';
-        noResultsMsg.style.textAlign = 'center';
-        noResultsMsg.style.fontStyle = 'italic';
-        noResultsMsg.style.color = '#718096';
-        elements.gridContainer.appendChild(noResultsMsg);
+      if(!models || models.length===0) {
+        const msg = document.createElement('p');
+        msg.textContent = 'No models found matching your search.';
+        msg.style.padding = '2rem';
+        msg.style.textAlign = 'center';
+        msg.style.fontStyle = 'italic';
+        msg.style.color = '#718096';
+        elements.gridContainer.appendChild(msg);
         return;
       }
       
-      models.forEach((item) => {
+      models.forEach(item=>{
         try {
-          const { url, title, likes_count, owner, name, rank } = item;
-          
-          // Skip if owner is 'None'
-          if (owner === 'None') {
-            return;
-          }
+          const { url, title, likes_count, owner, name, rank, tags } = item;
+          if(owner==='None') return;
           
-          // Create grid item
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
           
-          // Header
           const header = document.createElement('div');
           header.className = 'grid-header';
           
-          // Header top part with rank
           const headerTop = document.createElement('div');
           headerTop.className = 'grid-header-top';
           
-          // Title
           const titleEl = document.createElement('h3');
           titleEl.textContent = title;
-          titleEl.title = title; // For tooltip
+          titleEl.title = title;
           headerTop.appendChild(titleEl);
           
-          // Rank badge
           const rankBadge = document.createElement('div');
           rankBadge.className = 'rank-badge';
           rankBadge.textContent = `#${rank}`;
@@ -1245,82 +820,63 @@ if __name__ == '__main__':
           
           header.appendChild(headerTop);
           
-          // Grid meta info
           const metaInfo = document.createElement('div');
           metaInfo.className = 'grid-meta';
           
-          // Owner info
           const ownerEl = document.createElement('div');
           ownerEl.className = 'owner-info';
           ownerEl.textContent = `by ${owner}`;
           metaInfo.appendChild(ownerEl);
           
-          // Likes counter
           const likesCounter = document.createElement('div');
           likesCounter.className = 'likes-counter';
           likesCounter.innerHTML = '♥ <span>' + likes_count + '</span>';
           metaInfo.appendChild(likesCounter);
           
           header.appendChild(metaInfo);
-          
-          // Add header to grid item
           gridItem.appendChild(header);
           
-          // Content area
           const content = document.createElement('div');
           content.className = 'grid-content';
           
-          // iframe container
           const iframeContainer = document.createElement('div');
           iframeContainer.className = 'iframe-container';
           
-          // Create iframe to display the content
+          // 태그 정보를 dataset에 저장 (에러 시 fallback)
+          iframeContainer.dataset.tags = JSON.stringify(tags);
+          
           const iframe = document.createElement('iframe');
           const directUrl = createDirectUrl(owner, name);
           iframe.src = directUrl;
           iframe.title = title;
-          // Remove microphone permission
           iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
-          iframe.setAttribute('allowfullscreen', '');
-          iframe.setAttribute('frameborder', '0');
-          iframe.loading = 'lazy'; // Lazy load iframes for better performance
-          
-          // Unique ID for this iframe
-          const iframeId = `iframe-${owner}-${name}`;
-          iframe.id = iframeId;
+          iframe.setAttribute('allowfullscreen','');
+          iframe.setAttribute('frameborder','0');
+          iframe.loading = 'lazy';
           
-          // Track this model
           const modelKey = `${owner}/${name}`;
           state.iframeStatuses[modelKey] = 'loading';
           
-          // Use the advanced loader for better error detection
-          iframe.onload = function() {
+          iframe.onload = function(){
             iframeLoader.startChecking(iframe, owner, name, title, modelKey);
           };
-          
-          // Direct error handling
-          iframe.onerror = function() {
-            handleIframeError(iframe, owner, name, title);
+          iframe.onerror = function(){
             state.iframeStatuses[modelKey] = 'error';
+            handleIframeError(iframe);
           };
-          
-          // Final fallback - if nothing has happened after 30 seconds, show error
-          setTimeout(() => {
-            if (state.iframeStatuses[modelKey] === 'loading') {
-              handleIframeError(iframe, owner, name, title);
+          setTimeout(()=>{
+            if(state.iframeStatuses[modelKey]==='loading'){
               state.iframeStatuses[modelKey] = 'error';
+              handleIframeError(iframe);
             }
-          }, 30000);
+          }, 10000); // 10초 후에도 로딩 중이면 fallback
           
-          // Add iframe to container
           iframeContainer.appendChild(iframe);
           content.appendChild(iframeContainer);
           
-          // Actions section at bottom
           const actions = document.createElement('div');
           actions.className = 'grid-actions';
           
-          // Open link
           const linkEl = document.createElement('a');
           linkEl.href = url;
           linkEl.target = '_blank';
@@ -1328,112 +884,125 @@ if __name__ == '__main__':
           linkEl.textContent = 'Open in new window';
           actions.appendChild(linkEl);
           
-          // Add content and actions to grid item
           gridItem.appendChild(content);
           gridItem.appendChild(actions);
           
-          // Add grid item to container
           elements.gridContainer.appendChild(gridItem);
-        } catch (error) {
-          console.error('Item rendering error:', error);
+        } catch(err) {
+          console.error('Item rendering error:', err);
         }
       });
     }
     
-    // Input event listeners
-    elements.searchInput.addEventListener('input', () => {
-      // Debounce input to prevent API calls on every keystroke
-      clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(() => loadModels(0), 300);
-    });
+    function renderPagination(){
+      elements.pagination.innerHTML = '';
+      const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
+      
+      const prevButton = document.createElement('button');
+      prevButton.className = 'pagination-button';
+      prevButton.textContent = 'Previous';
+      prevButton.disabled = (state.currentPage===0);
+      prevButton.addEventListener('click', ()=>{
+        if(state.currentPage>0) loadModels(state.currentPage-1);
+      });
+      elements.pagination.appendChild(prevButton);
+      
+      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){
+        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', ()=>{
+          if(i!==state.currentPage) loadModels(i);
+        });
+        elements.pagination.appendChild(pageButton);
+      }
+      
+      const nextButton = document.createElement('button');
+      nextButton.className = 'pagination-button';
+      nextButton.textContent = 'Next';
+      nextButton.disabled = (state.currentPage >= totalPages-1);
+      nextButton.addEventListener('click', ()=>{
+        if(state.currentPage < totalPages-1) loadModels(state.currentPage+1);
+      });
+      elements.pagination.appendChild(nextButton);
+    }
     
-    // Enter key in search box
-    elements.searchInput.addEventListener('keyup', (event) => {
-      if (event.key === 'Enter') {
-        loadModels(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';
       }
-    });
+    }
     
-    // Refresh button event listener
-    elements.refreshButton.addEventListener('click', () => loadModels(0));
+    // Create direct HF URL
+    function createDirectUrl(owner, name){
+      try {
+        name = name.replace(/\./g,'-').replace(/_/g,'-').toLowerCase();
+        owner = owner.toLowerCase();
+        return `https://huggingface.co/${owner}/${name}`;
+      } catch(e){
+        console.error(e);
+        return 'https://huggingface.co';
+      }
+    }
     
-    // Stats toggle button
+    elements.searchInput.addEventListener('input', ()=>{
+      clearTimeout(state.searchTimeout);
+      state.searchTimeout = setTimeout(()=>loadModels(0), 300);
+    });
+    elements.searchInput.addEventListener('keyup', (e)=>{
+      if(e.key==='Enter') loadModels(0);
+    });
+    elements.refreshButton.addEventListener('click', ()=>loadModels(0));
     elements.statsToggle.addEventListener('click', toggleStats);
     
-    // Mac buttons (just for style, no actual window control)
-    document.querySelectorAll('.mac-button').forEach(button => {
-      button.addEventListener('click', function(e) {
+    document.querySelectorAll('.mac-button').forEach(btn=>{
+      btn.addEventListener('click',(e)=>{
         e.preventDefault();
       });
     });
     
-    // Page load complete event detection
-    window.addEventListener('load', function() {
-      // Start loading data when page is fully loaded
-      setTimeout(() => loadModels(0), 500);
+    window.addEventListener('load', ()=>{
+      setTimeout(()=>loadModels(0), 500);
     });
-    
-    // Safety mechanism to prevent infinite loading
-    setTimeout(() => {
-      if (state.isLoading) {
+    setTimeout(()=>{
+      if(state.isLoading){
         setLoading(false);
         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;">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;">
+          <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>
+            <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;">
               Reload Page
             </button>
           </div>
         `;
       }
-    }, 20000); // Force end loading state after 20 seconds
+    },20000);
     
-    // Start loading immediately - dual call with window.load for reliability
     loadModels(0);
-    
-    // Display loading indicator control
-    function setLoading(isLoading) {
-      state.isLoading = isLoading;
-      elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
-      
-      if (isLoading) {
-        elements.refreshButton.classList.add('refreshing');
-        // Show error message if loading takes too long
-        clearTimeout(state.loadingTimeout);
-        state.loadingTimeout = setTimeout(() => {
-          elements.loadingError.style.display = 'block';
-        }, 10000); // Show error message after 10 seconds
-      } else {
-        elements.refreshButton.classList.remove('refreshing');
-        clearTimeout(state.loadingTimeout);
-        elements.loadingError.style.display = 'none';
-      }
-    }
-    
-    // Create direct URL for the model (HF website)
-    function createDirectUrl(owner, name) {
-      try {
-        // 1. Replace '.' characters with '-'
-        name = name.replace(/\./g, '-');
-        // 2. Replace '_' characters with '-'
-        name = name.replace(/_/g, '-');
-        // 3. Convert everything to lowercase
-        owner = owner.toLowerCase();
-        name = name.toLowerCase();
-        
-        // For models, direct embed = huggingface.co/owner/name
-        return `https://huggingface.co/${owner}/${name}`;
-      } catch (error) {
-        console.error('URL creation error:', error);
-        return 'https://huggingface.co';
-      }
-    }
   </script>
 </body>
 </html>
-''')
+""")
     
-    # Use port 7860 (common in HF Spaces, can be changed if needed)
+    # Run Flask
     app.run(host='0.0.0.0', port=7860)