Update app.py

app.py

@@ -1,108 +1,101 @@
 from flask import Flask, render_template, request, jsonify
 import requests
 import os
-import random
+import json
+import time
 
 app = Flask(__name__)
 
-# Huggingface URL list
-HUGGINGFACE_URLS = [
-    "https://huggingface.co/spaces/ginipick/Tech_Hangman_Game",
-    "https://huggingface.co/spaces/openfree/deepseek_r1_API",
-    "https://huggingface.co/spaces/ginipick/open_Deep-Research",
-    "https://huggingface.co/spaces/aiqmaster/open-deep-research",
-    "https://huggingface.co/spaces/seawolf2357/DeepSeek-R1-32b-search",
-    "https://huggingface.co/spaces/ginigen/LLaDA",
-    "https://huggingface.co/spaces/VIDraft/PHI4-Multimodal",
-    "https://huggingface.co/spaces/ginigen/Ovis2-8B",
-    "https://huggingface.co/spaces/ginigen/Graph-Mind",
-    "https://huggingface.co/spaces/ginigen/Workflow-Canvas",
-    "https://huggingface.co/spaces/ginigen/Design",
-    "https://huggingface.co/spaces/ginigen/Diagram",
-    "https://huggingface.co/spaces/ginigen/Mockup",
-    "https://huggingface.co/spaces/ginigen/Infographic",
-    "https://huggingface.co/spaces/ginigen/Flowchart",
-    "https://huggingface.co/spaces/aiqcamp/FLUX-Vision",
-    "https://huggingface.co/spaces/ginigen/VoiceClone-TTS",
-    "https://huggingface.co/spaces/openfree/Perceptron-Network",
-    "https://huggingface.co/spaces/openfree/Article-Generator",
-]
+# Function to fetch trending spaces from Huggingface
+def fetch_trending_spaces(limit=100):
+    try:
+        url = "https://huggingface.co/api/spaces"
+        params = {
+            "limit": limit,
+            "sort": "trending",
+            "direction": -1
+        }
+        response = requests.get(url, params=params, timeout=10)
+        
+        if response.status_code == 200:
+            return response.json()
+        else:
+            print(f"Error fetching trending spaces: {response.status_code}")
+            return []
+    except Exception as e:
+        print(f"Exception when fetching trending spaces: {e}")
+        return []
 
 # Transform Huggingface URL to direct space URL
-def transform_url(url):
-    prefix = "https://huggingface.co/spaces/"
-    if url.startswith(prefix):
-        rest = url[len(prefix):]
-        return f"https://{rest.replace('/', '-')}.hf.space"
-    return url
+def transform_url(owner, name):
+    return f"https://{owner}-{name}.hf.space"
 
-# Extract model/space info from URL
-def extract_model_info(url):
-    parts = url.split('/')
-    if len(parts) < 6:
-        return None
-    
-    if parts[3] == 'spaces' or parts[3] == 'models':
-        return {
-            'type': parts[3],
-            'owner': parts[4],
-            'repo': parts[5],
-            'full_id': f"{parts[4]}/{parts[5]}"
-        }
-    elif len(parts) >= 5:
-        # Other URL format
+# Get space details
+def get_space_details(space_data):
+    try:
+        # Basic info
+        owner = space_data.get('owner')
+        name = space_data.get('id')
+        title = space_data.get('title') or name
+        
+        # URL construction
+        original_url = f"https://huggingface.co/spaces/{owner}/{name}"
+        embed_url = transform_url(owner, name)
+        
+        # Get likes count
+        likes_count = space_data.get('likes', 0)
+        
+        # Tags
+        tags = space_data.get('tags', [])
+        
         return {
-            'type': 'models',  # Default
-            'owner': parts[3],
-            'repo': parts[4],
-            'full_id': f"{parts[3]}/{parts[4]}"
+            'url': original_url,
+            'embedUrl': embed_url,
+            'title': title,
+            'owner': owner,
+            'likes_count': likes_count,
+            'tags': tags
         }
-    
-    return None
-
-# Extract title from the last part of URL
-def extract_title(url):
-    parts = url.split("/")
-    title = parts[-1] if parts else ""
-    return title.replace("_", " ").replace("-", " ")
-
-# Generate random likes count (since we're removing the actual likes functionality)
-def generate_likes_count():
-    return random.randint(10, 500)
+    except Exception as e:
+        print(f"Error processing space data: {e}")
+        return None
 
 # Homepage route
 @app.route('/')
 def home():
     return render_template('index.html')
 
-# URL list API
-@app.route('/api/urls', methods=['GET'])
-def get_urls():
+# Trending spaces API
+@app.route('/api/trending-spaces', methods=['GET'])
+def trending_spaces():
     search_query = request.args.get('search', '').lower()
+    limit = int(request.args.get('limit', 100))
+    
+    # Fetch trending spaces
+    spaces_data = fetch_trending_spaces(limit)
     
+    # Process and filter spaces
     results = []
-    for url in HUGGINGFACE_URLS:
-        title = extract_title(url)
-        model_info = extract_model_info(url)
-        transformed_url = transform_url(url)
+    for space_data in spaces_data:
+        space_info = get_space_details(space_data)
         
-        if not model_info:
+        if not space_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(space_info.get('tags', [])).lower()
+            
+            if (search_query not in title and 
+                search_query not in owner and 
+                search_query not in url and 
+                search_query not in tags):
+                continue
         
-        if search_query and search_query not in url.lower() and search_query not in title.lower():
-            continue
-        
-        # Generate random likes count
-        likes_count = generate_likes_count()
-        
-        results.append({
-            'url': url,
-            'embedUrl': transformed_url,
-            'title': title,
-            'model_info': model_info,
-            'likes_count': likes_count,
-            'owner': model_info['owner']  # Include owner ID
-        })
+        results.append(space_info)
     
     return jsonify(results)
 
@@ -118,7 +111,7 @@ if __name__ == '__main__':
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>허깅페이스 스페이스 그리드</title>
+  <title>인기 허깅페이스 스페이스</title>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -159,17 +152,54 @@ if __name__ == '__main__':
       display: flex;
       justify-content: center;
       align-items: center;
+      gap: 10px;
     }
     
     input[type="text"] {
       padding: 0.7rem;
       border: 1px solid #ddd;
       border-radius: 4px;
-      margin-right: 5px;
       font-size: 1rem;
       width: 300px;
     }
     
+    button.refresh-btn {
+      padding: 0.7rem 1.2rem;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: background-color 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    
+    button.refresh-btn:hover {
+      background-color: #45a049;
+    }
+    
+    .refresh-icon {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border: 2px solid white;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    
+    .refreshing .refresh-icon {
+      animation: spin 1s linear infinite;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    
     .grid-container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
@@ -200,6 +230,7 @@ if __name__ == '__main__':
     .grid-header-left {
       display: flex;
       flex-direction: column;
+      max-width: 70%;
     }
     
     .grid-header h3 {
@@ -263,7 +294,7 @@ if __name__ == '__main__':
       right: 0;
       bottom: 0;
       background-color: rgba(255, 255, 255, 0.8);
-      display: none;
+      display: flex;
       justify-content: center;
       align-items: center;
       z-index: 1000;
@@ -279,11 +310,6 @@ if __name__ == '__main__':
       animation: spin 1s linear infinite;
     }
     
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-    
     @media (max-width: 768px) {
       .filter-controls {
         flex-direction: column;
@@ -308,11 +334,15 @@ if __name__ == '__main__':
 <body>
   <div class="container">
     <div class="header">
-      <h1>허깅페이스 스페이스 임베딩 뷰어</h1>
+      <h1>인기 허깅페이스 스페이스 Top 100</h1>
     </div>
     
     <div class="filter-controls">
-      <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" />
+      <input type="text" id="searchInput" placeholder="이름, 태그 등으로 검색" />
+      <button id="refreshButton" class="refresh-btn">
+        <span class="refresh-icon"></span>
+        새로고침
+      </button>
     </div>
     
     <div id="gridContainer" class="grid-container"></div>
@@ -327,18 +357,26 @@ if __name__ == '__main__':
     const elements = {
       gridContainer: document.getElementById('gridContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
-      searchInput: document.getElementById('searchInput')
+      searchInput: document.getElementById('searchInput'),
+      refreshButton: document.getElementById('refreshButton')
     };
     
     // Application state
     const state = {
-      isLoading: false
+      isLoading: false,
+      spaces: []
     };
     
     // Display loading indicator
     function setLoading(isLoading) {
       state.isLoading = isLoading;
       elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
+      
+      if (isLoading) {
+        elements.refreshButton.classList.add('refreshing');
+      } else {
+        elements.refreshButton.classList.remove('refreshing');
+      }
     }
     
     // API error handling
@@ -350,39 +388,40 @@ if __name__ == '__main__':
       return response.json();
     }
     
-    // Load URL list
-    async function loadUrls() {
+    // Load trending spaces
+    async function loadTrendingSpaces() {
       setLoading(true);
       
       try {
         const searchText = elements.searchInput.value;
         
-        const response = await fetch(`/api/urls?search=${encodeURIComponent(searchText)}`);
-        const urls = await handleApiResponse(response);
+        const response = await fetch(`/api/trending-spaces?search=${encodeURIComponent(searchText)}`);
+        const spaces = await handleApiResponse(response);
         
-        renderGrid(urls);
+        state.spaces = spaces;
+        renderGrid(spaces);
       } catch (error) {
-        console.error('URL 목록 로드 오류:', error);
-        alert(`URL 로드 오류: ${error.message}`);
+        console.error('스페이스 목록 로드 오류:', error);
+        alert(`스페이스 로드 오류: ${error.message}`);
       } finally {
         setLoading(false);
       }
     }
     
     // Render grid
-    function renderGrid(urls) {
+    function renderGrid(spaces) {
       elements.gridContainer.innerHTML = '';
       
-      if (!urls || urls.length === 0) {
+      if (!spaces || spaces.length === 0) {
         const noResultsMsg = document.createElement('p');
-        noResultsMsg.textContent = '표시할 URL이 없습니다.';
+        noResultsMsg.textContent = '표시할 스페이스가 없습니다.';
         noResultsMsg.style.padding = '1rem';
         noResultsMsg.style.fontStyle = 'italic';
         elements.gridContainer.appendChild(noResultsMsg);
         return;
       }
       
-      urls.forEach(item => {
+      spaces.forEach(item => {
         const { url, embedUrl, title, likes_count, owner } = item;
         
         // Create grid item
@@ -399,6 +438,7 @@ if __name__ == '__main__':
         
         const titleEl = document.createElement('h3');
         titleEl.textContent = title;
+        titleEl.title = title; // For tooltip on hover
         headerLeft.appendChild(titleEl);
         
         const ownerEl = document.createElement('div');
@@ -458,11 +498,14 @@ if __name__ == '__main__':
     elements.searchInput.addEventListener('input', () => {
       // Debounce input to prevent API calls on every keystroke
       clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(loadUrls, 300);
+      state.searchTimeout = setTimeout(loadTrendingSpaces, 300);
     });
     
+    // Refresh button event listener
+    elements.refreshButton.addEventListener('click', loadTrendingSpaces);
+    
     // Initialize
-    loadUrls();
+    loadTrendingSpaces();
   </script>
 </body>
 </html>