Update app.py

app.py

@@ -7,68 +7,73 @@ from collections import Counter
 
 app = Flask(__name__)
 
-# Function to fetch trending spaces from Huggingface with pagination
-def fetch_trending_spaces(offset=0, limit=72):
+# 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/spaces"
-        params = {"limit": 10000}  # Get max 10000 to fetch more spaces
+        url = "https://huggingface.co/api/models"
+        params = {"limit": 10000}  # Get max 10000 to fetch more models
         
         # Increase timeout
         response = requests.get(url, params=params, timeout=30)
         
         if response.status_code == 200:
-            spaces = response.json()
-            filtered_spaces = [space for space in spaces if space.get('owner') != 'None' and space.get('id', '').split('/', 1)[0] != 'None']
+            models = response.json()
+            # Filter out any malformed data where owner or model id is 'None'
+            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_spaces))
-            end = min(offset + limit, len(filtered_spaces))
+            start = min(offset, len(filtered_models))
+            end = min(offset + limit, len(filtered_models))
             
-            print(f"Fetched {len(filtered_spaces)} spaces, returning {end-start} items from {start} to {end}")
+            print(f"Fetched {len(filtered_models)} models, returning {end-start} items from {start} to {end}")
             
             return {
-                'spaces': filtered_spaces[start:end],
-                'total': len(filtered_spaces),
+                'models': filtered_models[start:end],
+                'total': len(filtered_models),
                 'offset': offset,
                 'limit': limit,
-                'all_spaces': filtered_spaces  # Return all spaces for stats calculation
+                'all_models': filtered_models  # Return all models for stats calculation
             }
         else:
-            print(f"Error fetching spaces: {response.status_code}")
-            # Return empty spaces with fake 200 limit data
+            print(f"Error fetching models: {response.status_code}")
+            # Return dummy data in case of error
             return {
-                'spaces': generate_dummy_spaces(limit),
+                'models': generate_dummy_models(limit),
                 'total': 200,
                 'offset': offset,
                 'limit': limit,
-                'all_spaces': generate_dummy_spaces(500)  # Dummy data for stats
+                'all_models': generate_dummy_models(500)  # Dummy data for stats
             }
     except Exception as e:
-        print(f"Exception when fetching spaces: {e}")
-        # Generate fake data
+        print(f"Exception when fetching models: {e}")
+        # Generate dummy data
         return {
-            'spaces': generate_dummy_spaces(limit),
+            'models': generate_dummy_models(limit),
             'total': 200,
             'offset': offset,
             'limit': limit,
-            'all_spaces': generate_dummy_spaces(500)  # Dummy data for stats
+            'all_models': generate_dummy_models(500)  # Dummy data for stats
         }
 
-# Generate dummy spaces in case of error
-def generate_dummy_spaces(count):
-    spaces = []
+# Generate dummy models in case of error
+def generate_dummy_models(count):
+    models = []
     for i in range(count):
-        spaces.append({
-            'id': f'dummy/space-{i}',
+        models.append({
+            'id': f'dummy/model-{i}',
             'owner': 'dummy',
-            'title': f'Example Space {i+1}',
+            'title': f'Example Model {i+1}',
             'likes': 100 - i,
             'createdAt': '2023-01-01T00:00:00.000Z'
         })
-    return spaces
+    return models
 
-# Transform Huggingface URL to direct space URL
+# For consistency, we’ll keep a transform_url function.
+# Instead of creating "hf.space" links, we now link to the HF model page directly.
 def transform_url(owner, name):
     # 1. Replace '.' with '-'
     name = name.replace('.', '-')
@@ -78,52 +83,53 @@ def transform_url(owner, name):
     owner = owner.lower()
     name = name.lower()
     
-    return f"https://{owner}-{name}.hf.space"
+    # For models, we just point to huggingface.co/{owner}/{name}
+    return f"https://huggingface.co/{owner}/{name}"
 
-# Get space details
-def get_space_details(space_data, index, offset):
+# Get model details
+def get_model_details(model_data, index, offset):
     try:
         # Extract common info
-        if '/' in space_data.get('id', ''):
-            owner, name = space_data.get('id', '').split('/', 1)
+        if '/' in model_data.get('id', ''):
+            owner, name = model_data.get('id', '').split('/', 1)
         else:
-            owner = space_data.get('owner', '')
-            name = space_data.get('id', '')
+            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/spaces/{owner}/{name}"
+        original_url = f"https://huggingface.co/{owner}/{name}"
         embed_url = transform_url(owner, name)
         
         # Likes count
-        likes_count = space_data.get('likes', 0)
+        likes_count = model_data.get('likes', 0)
         
-        # Extract title
-        title = space_data.get('title', name)
+        # Extract title if available; fallback to model name
+        title = model_data.get('title', name)
         
         # Tags
-        tags = space_data.get('tags', [])
+        tags = model_data.get('tags', [])
         
         return {
             'url': original_url,
             'embedUrl': embed_url,
             'title': title,
             'owner': owner,
-            'name': name,  # Store Space name
+            'name': name,  # Store Model name
             'likes_count': likes_count,
             'tags': tags,
             'rank': offset + index + 1
         }
     except Exception as e:
-        print(f"Error processing space data: {e}")
+        print(f"Error processing model data: {e}")
         # Return basic object even if error occurs
         return {
-            'url': 'https://huggingface.co/spaces',
-            'embedUrl': 'https://huggingface.co/spaces',
-            'title': 'Error Loading Space',
+            'url': 'https://huggingface.co',
+            'embedUrl': 'https://huggingface.co',
+            'title': 'Error Loading Model',
             'owner': 'huggingface',
             'name': 'error',
             'likes_count': 0,
@@ -131,14 +137,14 @@ def get_space_details(space_data, index, offset):
             'rank': offset + index + 1
         }
 
-# Get owner statistics from all spaces
-def get_owner_stats(all_spaces):
+# Get owner statistics from all models
+def get_owner_stats(all_models):
     owners = []
-    for space in all_spaces:
-        if '/' in space.get('id', ''):
-            owner, _ = space.get('id', '').split('/', 1)
+    for model in all_models:
+        if '/' in model.get('id', ''):
+            owner, _ = model.get('id', '').split('/', 1)
         else:
-            owner = space.get('owner', '')
+            owner = model.get('owner', '')
         
         if owner != 'None':
             owners.append(owner)
@@ -156,30 +162,30 @@ def get_owner_stats(all_spaces):
 def home():
     return render_template('index.html')
 
-# Trending spaces API
-@app.route('/api/trending-spaces', methods=['GET'])
-def trending_spaces():
+# Trending models 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))  # Default 72
     
-    # Fetch trending spaces
-    spaces_data = fetch_trending_spaces(offset, limit)
+    # Fetch models
+    models_data = fetch_trending_models(offset, limit)
     
-    # Process and filter spaces
+    # Process and filter models
     results = []
-    for index, space_data in enumerate(spaces_data['spaces']):
-        space_info = get_space_details(space_data, index, offset)
+    for index, model_data in enumerate(models_data['models']):
+        model_info = get_model_details(model_data, index, offset)
         
-        if not space_info:
+        if not model_info:
             continue
             
         # Apply search filter if needed
         if search_query:
-            title = space_info['title'].lower()
-            owner = space_info['owner'].lower()
-            url = space_info['url'].lower()
-            tags = ' '.join([str(tag) for tag in space_info.get('tags', [])]).lower()
+            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()
             
             if (search_query not in title and 
                 search_query not in owner and 
@@ -187,31 +193,31 @@ def trending_spaces():
                 search_query not in tags):
                 continue
         
-        results.append(space_info)
+        results.append(model_info)
     
-    # Get owner statistics for all spaces
-    top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
+    # Get owner statistics for all models
+    top_owners = get_owner_stats(models_data.get('all_models', []))
     
     return jsonify({
-        'spaces': results,
-        'total': spaces_data['total'],
+        'models': results,
+        'total': models_data['total'],
         'offset': offset,
         'limit': limit,
         'top_owners': top_owners  # Add top owners data
     })
 
 if __name__ == '__main__':
-    # Create templates folder
+    # Create templates folder if needed
     os.makedirs('templates', exist_ok=True)
     
-    # Create index.html file
+    # Create index.html file (the same UI, but references changed to "Model" instead of "Space")
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Huggingface Spaces Gallery</title>
+  <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');
@@ -757,8 +763,8 @@ if __name__ == '__main__':
       
       <div class="mac-content">
         <div class="header">
-          <h1>HF Space Leaderboard</h1>
-          <p>Discover the top 500 trending spaces from the Huggingface</p>
+          <h1>HF Model Leaderboard</h1>
+          <p>Discover the top 500 trending models from Huggingface</p>
         </div>
         
         <!-- Stats Section -->
@@ -769,11 +775,11 @@ if __name__ == '__main__':
               <div class="mac-button mac-minimize"></div>
               <div class="mac-button mac-maximize"></div>
             </div>
-            <div class="mac-title">Creator Statistics</div>
+            <div class="mac-title">Owner Statistics</div>
           </div>
           <div class="mac-content">
             <div class="stats-header">
-              <div class="stats-title">Top 30 Creators by Number of Spaces</div>
+              <div class="stats-title">Top 30 Creators by Number of Models</div>
               <button id="statsToggle" class="stats-toggle">Show Stats</button>
             </div>
             <div id="statsContent" class="stats-content">
@@ -804,7 +810,7 @@ if __name__ == '__main__':
   <div id="loadingIndicator" class="loading">
     <div class="loading-content">
       <div class="loading-spinner"></div>
-      <div class="loading-text">Loading amazing spaces...</div>
+      <div class="loading-text">Loading amazing models...</div>
       <div id="loadingError" class="loading-error">
         If this takes too long, try refreshing the page.
       </div>
@@ -828,12 +834,12 @@ if __name__ == '__main__':
     // Application state
     const state = {
       isLoading: false,
-      spaces: [],
+      models: [],
       currentPage: 0,
       itemsPerPage: 72,  // 72 items per page
       totalItems: 0,
       loadingTimeout: null,
-      staticModeAttempted: {}, // Track which spaces have attempted static mode
+      staticModeAttempted: {}, // Track which models have attempted static mode
       statsVisible: false,
       chartInstance: null,
       topOwners: [],
@@ -847,9 +853,9 @@ if __name__ == '__main__':
       checkInterval: 5000, // Check every 5 seconds
       
       // Start checking iframe loading status
-      startChecking: function(iframe, owner, name, title, spaceKey) {
+      startChecking: function(iframe, owner, name, title, modelKey) {
         // Initialize tracking
-        this.checkQueue[spaceKey] = {
+        this.checkQueue[modelKey] = {
           iframe: iframe,
           owner: owner,
           name: name,
@@ -859,19 +865,19 @@ if __name__ == '__main__':
         };
         
         // Start recursive checking
-        this.checkIframeStatus(spaceKey);
+        this.checkIframeStatus(modelKey);
       },
       
       // Check iframe loading status
-      checkIframeStatus: function(spaceKey) {
-        if (!this.checkQueue[spaceKey]) return;
+      checkIframeStatus: function(modelKey) {
+        if (!this.checkQueue[modelKey]) return;
         
-        const item = this.checkQueue[spaceKey];
+        const item = this.checkQueue[modelKey];
         const iframe = item.iframe;
         
         // If already processed, stop checking
         if (item.status !== 'loading') {
-          delete this.checkQueue[spaceKey];
+          delete this.checkQueue[modelKey];
           return;
         }
         
@@ -881,7 +887,7 @@ if __name__ == '__main__':
         try {
           // 1. Check if iframe was removed from DOM
           if (!iframe || !iframe.parentNode) {
-            delete this.checkQueue[spaceKey];
+            delete this.checkQueue[modelKey];
             return;
           }
           
@@ -904,11 +910,11 @@ if __name__ == '__main__':
               } else {
                 item.status = 'success';
               }
-              delete this.checkQueue[spaceKey];
+              delete this.checkQueue[modelKey];
               return;
             }
           } catch(e) {
-            // Cross-origin access errors are expected - might be normal loading
+            // Cross-origin access errors are normal, might be still loading
           }
           
           // 3. Check iframe's visible size
@@ -916,7 +922,7 @@ if __name__ == '__main__':
           if (rect.width > 50 && rect.height > 50 && item.attempts > 2) {
             // If it has sufficient size, mark as success
             item.status = 'success';
-            delete this.checkQueue[spaceKey];
+            delete this.checkQueue[modelKey];
             return;
           }
           
@@ -931,13 +937,13 @@ if __name__ == '__main__':
               item.status = 'error';
               handleIframeError(iframe, item.owner, item.name, item.title);
             }
-            delete this.checkQueue[spaceKey];
+            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(spaceKey), nextDelay);
+          setTimeout(() => this.checkIframeStatus(modelKey), nextDelay);
           
         } catch (e) {
           console.error('Error checking iframe status:', e);
@@ -946,10 +952,10 @@ if __name__ == '__main__':
           if (item.attempts >= this.maxAttempts) {
             item.status = 'error';
             handleIframeError(iframe, item.owner, item.name, item.title);
-            delete this.checkQueue[spaceKey];
+            delete this.checkQueue[modelKey];
           } else {
             // Try again
-            setTimeout(() => this.checkIframeStatus(spaceKey), this.checkInterval);
+            setTimeout(() => this.checkIframeStatus(modelKey), this.checkInterval);
           }
         }
       }
@@ -991,7 +997,7 @@ if __name__ == '__main__':
         data: {
           labels: labels,
           datasets: [{
-            label: 'Number of Spaces',
+            label: 'Number of Models',
             data: data,
             backgroundColor: colors,
             borderColor: colors.map(color => color.replace('0.7', '1')),
@@ -1012,7 +1018,7 @@ if __name__ == '__main__':
                   return tooltipItems[0].label;
                 },
                 label: function(context) {
-                  return `Spaces: ${context.raw}`;
+                  return `Models: ${context.raw}`;
                 }
               }
             }
@@ -1022,7 +1028,7 @@ if __name__ == '__main__':
               beginAtZero: true,
               title: {
                 display: true,
-                text: 'Number of Spaces'
+                text: 'Number of Models'
               }
             },
             y: {
@@ -1034,7 +1040,7 @@ if __name__ == '__main__':
               ticks: {
                 autoSkip: false,
                 font: function(context) {
-                  // Adjust font size to fit all labels if needed
+                  // Adjust font size if needed
                   const defaultSize = 11;
                   return {
                     size: labels.length > 20 ? defaultSize - 1 : defaultSize
@@ -1047,8 +1053,8 @@ if __name__ == '__main__':
       });
     }
     
-    // Load spaces with timeout
-    async function loadSpaces(page = 0) {
+    // Load models with timeout
+    async function loadModels(page = 0) {
       setLoading(true);
       
       try {
@@ -1060,19 +1066,19 @@ if __name__ == '__main__':
           setTimeout(() => reject(new Error('Request timeout')), 30000)
         );
         
-        const fetchPromise = fetch(`/api/trending-spaces?search=${encodeURIComponent(searchText)}&offset=${offset}&limit=${state.itemsPerPage}`);
+        const fetchPromise = fetch(`/api/trending-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.spaces = data.spaces;
+        state.models = data.models;
         state.totalItems = data.total;
         state.currentPage = page;
         state.topOwners = data.top_owners || [];
         
-        renderGrid(data.spaces);
+        renderGrid(data.models);
         renderPagination();
         
         // If stats are visible, update chart
@@ -1080,13 +1086,13 @@ if __name__ == '__main__':
           renderCreatorStats();
         }
       } catch (error) {
-        console.error('Error loading spaces:', 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="font-size: 3rem; margin-bottom: 20px;">⚠️</div>
-            <h3 style="margin-bottom: 10px;">Unable to load spaces</h3>
+            <h3 style="margin-bottom: 10px;">Unable to load 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;">
               Try Again
@@ -1095,7 +1101,7 @@ if __name__ == '__main__':
         `;
         
         // Add event listener to retry button
-        document.getElementById('retryButton')?.addEventListener('click', () => loadSpaces(0));
+        document.getElementById('retryButton')?.addEventListener('click', () => loadModels(0));
         
         // Render simple pagination
         renderPagination();
@@ -1117,7 +1123,7 @@ if __name__ == '__main__':
       prevButton.disabled = state.currentPage === 0;
       prevButton.addEventListener('click', () => {
         if (state.currentPage > 0) {
-          loadSpaces(state.currentPage - 1);
+          loadModels(state.currentPage - 1);
         }
       });
       elements.pagination.appendChild(prevButton);
@@ -1127,7 +1133,7 @@ if __name__ == '__main__':
       let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons / 2));
       let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
       
-      // Adjust start page if the end page is less than maximum buttons
+      // Adjust if not enough pages to fill maxButtons
       if (endPage - startPage + 1 < maxButtons) {
         startPage = Math.max(0, endPage - maxButtons + 1);
       }
@@ -1138,7 +1144,7 @@ if __name__ == '__main__':
         pageButton.textContent = i + 1;
         pageButton.addEventListener('click', () => {
           if (i !== state.currentPage) {
-            loadSpaces(i);
+            loadModels(i);
           }
         });
         elements.pagination.appendChild(pageButton);
@@ -1151,7 +1157,7 @@ if __name__ == '__main__':
       nextButton.disabled = state.currentPage >= totalPages - 1;
       nextButton.addEventListener('click', () => {
         if (state.currentPage < totalPages - 1) {
-          loadSpaces(state.currentPage + 1);
+          loadModels(state.currentPage + 1);
         }
       });
       elements.pagination.appendChild(nextButton);
@@ -1167,14 +1173,14 @@ if __name__ == '__main__':
       
       // Error message
       const errorMessage = document.createElement('p');
-      errorMessage.textContent = `"${title}" space couldn't be loaded`;
+      errorMessage.textContent = `"${title}" model couldn't be loaded`;
       errorPlaceholder.appendChild(errorMessage);
       
       // Direct HF link
       const directLink = document.createElement('a');
-      directLink.href = `https://huggingface.co/spaces/${owner}/${name}`;
+      directLink.href = `https://huggingface.co/${owner}/${name}`;
       directLink.target = '_blank';
-      directLink.textContent = 'Visit HF Space';
+      directLink.textContent = 'Visit HF Model';
       directLink.style.color = '#3182ce';
       directLink.style.marginTop = '10px';
       directLink.style.display = 'inline-block';
@@ -1189,13 +1195,13 @@ if __name__ == '__main__':
       container.appendChild(errorPlaceholder);
     }
     
-    // Render grid
-    function renderGrid(spaces) {
+    // Render grid of models
+    function renderGrid(models) {
       elements.gridContainer.innerHTML = '';
       
-      if (!spaces || spaces.length === 0) {
+      if (!models || models.length === 0) {
         const noResultsMsg = document.createElement('p');
-        noResultsMsg.textContent = 'No spaces found matching your search.';
+        noResultsMsg.textContent = 'No models found matching your search.';
         noResultsMsg.style.padding = '2rem';
         noResultsMsg.style.textAlign = 'center';
         noResultsMsg.style.fontStyle = 'italic';
@@ -1204,7 +1210,7 @@ if __name__ == '__main__':
         return;
       }
       
-      spaces.forEach((item) => {
+      models.forEach((item) => {
         try {
           const { url, title, likes_count, owner, name, rank } = item;
           
@@ -1213,7 +1219,7 @@ if __name__ == '__main__':
             return;
           }
           
-          // Create grid item - Apply rotating pastel colors
+          // Create grid item
           const gridItem = document.createElement('div');
           gridItem.className = 'grid-item';
           
@@ -1228,7 +1234,7 @@ if __name__ == '__main__':
           // Title
           const titleEl = document.createElement('h3');
           titleEl.textContent = title;
-          titleEl.title = title; // For tooltip on hover
+          titleEl.title = title; // For tooltip
           headerTop.appendChild(titleEl);
           
           // Rank badge
@@ -1283,26 +1289,26 @@ if __name__ == '__main__':
           const iframeId = `iframe-${owner}-${name}`;
           iframe.id = iframeId;
           
-          // Track this space
-          const spaceKey = `${owner}/${name}`;
-          state.iframeStatuses[spaceKey] = 'loading';
+          // Track this model
+          const modelKey = `${owner}/${name}`;
+          state.iframeStatuses[modelKey] = 'loading';
           
           // Use the advanced loader for better error detection
           iframe.onload = function() {
-            iframeLoader.startChecking(iframe, owner, name, title, spaceKey);
+            iframeLoader.startChecking(iframe, owner, name, title, modelKey);
           };
           
           // Direct error handling
           iframe.onerror = function() {
             handleIframeError(iframe, owner, name, title);
-            state.iframeStatuses[spaceKey] = 'error';
+            state.iframeStatuses[modelKey] = 'error';
           };
           
           // Final fallback - if nothing has happened after 30 seconds, show error
           setTimeout(() => {
-            if (state.iframeStatuses[spaceKey] === 'loading') {
+            if (state.iframeStatuses[modelKey] === 'loading') {
               handleIframeError(iframe, owner, name, title);
-              state.iframeStatuses[spaceKey] = 'error';
+              state.iframeStatuses[modelKey] = 'error';
             }
           }, 30000);
           
@@ -1330,43 +1336,41 @@ if __name__ == '__main__':
           elements.gridContainer.appendChild(gridItem);
         } catch (error) {
           console.error('Item rendering error:', error);
-          // Continue rendering other items even if one fails
         }
       });
     }
     
-    // Filter event listeners
+    // Input event listeners
     elements.searchInput.addEventListener('input', () => {
       // Debounce input to prevent API calls on every keystroke
       clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(() => loadSpaces(0), 300);
+      state.searchTimeout = setTimeout(() => loadModels(0), 300);
     });
     
     // Enter key in search box
     elements.searchInput.addEventListener('keyup', (event) => {
       if (event.key === 'Enter') {
-        loadSpaces(0);
+        loadModels(0);
       }
     });
     
     // Refresh button event listener
-    elements.refreshButton.addEventListener('click', () => loadSpaces(0));
+    elements.refreshButton.addEventListener('click', () => loadModels(0));
     
-    // Stats toggle button event listener
+    // Stats toggle button
     elements.statsToggle.addEventListener('click', toggleStats);
     
-    // Mac buttons functionality (just for show)
+    // Mac buttons (just for style, no actual window control)
     document.querySelectorAll('.mac-button').forEach(button => {
       button.addEventListener('click', function(e) {
         e.preventDefault();
-        // Mac buttons don't do anything, just for style
       });
     });
     
     // Page load complete event detection
     window.addEventListener('load', function() {
       // Start loading data when page is fully loaded
-      setTimeout(() => loadSpaces(0), 500);
+      setTimeout(() => loadModels(0), 500);
     });
     
     // Safety mechanism to prevent infinite loading
@@ -1387,7 +1391,7 @@ if __name__ == '__main__':
     }, 20000); // Force end loading state after 20 seconds
     
     // Start loading immediately - dual call with window.load for reliability
-    loadSpaces(0);
+    loadModels(0);
     
     // Display loading indicator control
     function setLoading(isLoading) {
@@ -1408,7 +1412,7 @@ if __name__ == '__main__':
       }
     }
     
-    // Create direct URL function with fixes for static sites
+    // Create direct URL for the model (HF website)
     function createDirectUrl(owner, name) {
       try {
         // 1. Replace '.' characters with '-'
@@ -1419,7 +1423,8 @@ if __name__ == '__main__':
         owner = owner.toLowerCase();
         name = name.toLowerCase();
         
-        return `https://${owner}-${name}.hf.space`;
+        // 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';
@@ -1430,5 +1435,5 @@ if __name__ == '__main__':
 </html>
 ''')
     
-    # Use port 7860 for Huggingface Spaces
+    # Use port 7860 (common in HF Spaces, can be changed if needed)
     app.run(host='0.0.0.0', port=7860)