Update app.py

app.py

@@ -1,11 +1,9 @@
-from flask import Flask, render_template, request, redirect, url_for, jsonify, session
+from flask import Flask, render_template, request, jsonify
 import requests
 import os
-from datetime import timedelta
+import random
 
 app = Flask(__name__)
-app.secret_key = os.urandom(24)  # Session encryption key
-app.permanent_session_lifetime = timedelta(days=7)  # Session duration
 
 # Huggingface URL list
 HUGGINGFACE_URLS = [
@@ -38,79 +36,45 @@ def transform_url(url):
         return f"https://{rest.replace('/', '-')}.hf.space"
     return url
 
+# 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
+        return {
+            'type': 'models',  # Default
+            'owner': parts[3],
+            'repo': parts[4],
+            'full_id': f"{parts[3]}/{parts[4]}"
+        }
+    
+    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("-", " ")
 
-# Huggingface token validation
-def validate_token(token):
-    headers = {"Authorization": f"Bearer {token}"}
-    
-    # Try whoami-v2 endpoint first
-    try:
-        response = requests.get("https://huggingface.co/api/whoami-v2", headers=headers)
-        if response.ok:
-            return True, response.json()
-    except Exception as e:
-        print(f"whoami-v2 token validation error: {e}")
-    
-    # Try the original whoami endpoint
-    try:
-        response = requests.get("https://huggingface.co/api/whoami", headers=headers)
-        if response.ok:
-            return True, response.json()
-    except Exception as e:
-        print(f"whoami token validation error: {e}")
-    
-    return False, None
+# Generate random likes count (since we're removing the actual likes functionality)
+def generate_likes_count():
+    return random.randint(10, 500)
 
 # Homepage route
 @app.route('/')
 def home():
     return render_template('index.html')
 
-# Login API
-@app.route('/api/login', methods=['POST'])
-def login():
-    token = request.form.get('token', '')
-    
-    if not token:
-        return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
-    
-    is_valid, user_info = validate_token(token)
-    
-    if not is_valid or not user_info:
-        return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
-    
-    # Find username
-    username = None
-    if 'name' in user_info:
-        username = user_info['name']
-    elif 'user' in user_info and 'username' in user_info['user']:
-        username = user_info['user']['username']
-    elif 'username' in user_info:
-        username = user_info['username']
-    else:
-        username = '인증된 사용자'
-    
-    # Save to session
-    session['token'] = token
-    session['username'] = username
-    
-    return jsonify({
-        'success': True, 
-        'username': username
-    })
-
-# Logout API
-@app.route('/api/logout', methods=['POST'])
-def logout():
-    session.pop('token', None)
-    session.pop('username', None)
-    return jsonify({'success': True})
-
 # URL list API
 @app.route('/api/urls', methods=['GET'])
 def get_urls():
@@ -119,27 +83,29 @@ def get_urls():
     results = []
     for url in HUGGINGFACE_URLS:
         title = extract_title(url)
+        model_info = extract_model_info(url)
         transformed_url = transform_url(url)
         
+        if not model_info:
+            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
+            'title': title,
+            'model_info': model_info,
+            'likes_count': likes_count,
+            'owner': model_info['owner']  # Include owner ID
         })
     
     return jsonify(results)
 
-# Session status API
-@app.route('/api/session-status', methods=['GET'])
-def session_status():
-    return jsonify({
-        'logged_in': 'token' in session,
-        'username': session.get('username')
-    })
-
 if __name__ == '__main__':
     # Create templates folder
     os.makedirs('templates', exist_ok=True)
@@ -175,13 +141,13 @@ if __name__ == '__main__':
       border-radius: 8px;
       margin-bottom: 1rem;
       box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+      text-align: center;
     }
     
-    .user-controls {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
+    .header h1 {
+      margin: 0;
+      color: #2c3e50;
+      font-size: 1.8rem;
     }
     
     .filter-controls {
@@ -190,54 +156,18 @@ if __name__ == '__main__':
       border-radius: 8px;
       margin-bottom: 1rem;
       box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
     
-    input[type="password"],
     input[type="text"] {
       padding: 0.7rem;
       border: 1px solid #ddd;
       border-radius: 4px;
       margin-right: 5px;
       font-size: 1rem;
-      width: 250px;
-    }
-    
-    button {
-      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;
-    }
-    
-    button:hover {
-      background-color: #45a049;
-    }
-    
-    button.logout {
-      background-color: #f44336;
-    }
-    
-    button.logout:hover {
-      background-color: #d32f2f;
-    }
-    
-    .token-help {
-      margin-top: 0.5rem;
-      font-size: 0.9rem;
-      color: #666;
-    }
-    
-    .token-help a {
-      color: #4CAF50;
-      text-decoration: none;
-    }
-    
-    .token-help a:hover {
-      text-decoration: underline;
+      width: 300px;
     }
     
     .grid-container {
@@ -254,6 +184,7 @@ if __name__ == '__main__':
       display: flex;
       flex-direction: column;
       height: 600px;
+      position: relative;
     }
     
     .grid-header {
@@ -263,6 +194,12 @@ if __name__ == '__main__':
       display: flex;
       justify-content: space-between;
       align-items: center;
+      z-index: 2;
+    }
+    
+    .grid-header-left {
+      display: flex;
+      flex-direction: column;
     }
     
     .grid-header h3 {
@@ -275,10 +212,33 @@ if __name__ == '__main__':
       text-overflow: ellipsis;
     }
     
+    .owner-info {
+      font-size: 0.85rem;
+      color: #666;
+      margin-top: 3px;
+    }
+    
+    .grid-actions {
+      display: flex;
+      align-items: center;
+    }
+    
     .open-link {
       color: #4CAF50;
       text-decoration: none;
       font-size: 0.9rem;
+      margin-left: 10px;
+    }
+    
+    .likes-counter {
+      display: flex;
+      align-items: center;
+      font-size: 0.9rem;
+      color: #e91e63;
+    }
+    
+    .likes-counter span {
+      margin-left: 4px;
     }
     
     .grid-content {
@@ -296,24 +256,6 @@ if __name__ == '__main__':
       border: none;
     }
     
-    .status-message {
-      padding: 1rem;
-      border-radius: 8px;
-      margin-bottom: 1rem;
-      display: none;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    }
-    
-    .success {
-      background-color: #dff0d8;
-      color: #3c763d;
-    }
-    
-    .error {
-      background-color: #f2dede;
-      color: #a94442;
-    }
-    
     .loading {
       position: fixed;
       top: 0;
@@ -342,60 +284,37 @@ if __name__ == '__main__':
       100% { transform: rotate(360deg); }
     }
     
-    .login-section {
-      margin-top: 1rem;
-    }
-    
-    .logged-in-section {
-      display: none;
-      margin-top: 1rem;
-    }
-    
     @media (max-width: 768px) {
-      .user-controls {
+      .filter-controls {
         flex-direction: column;
         align-items: flex-start;
       }
       
-      .user-controls > div {
-        margin-bottom: 1rem;
+      .filter-controls > * {
+        margin-bottom: 0.5rem;
+        width: 100%;
       }
       
       .grid-container {
         grid-template-columns: 1fr;
       }
+      
+      input[type="text"] {
+        width: 100%;
+      }
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="header">
-      <div class="user-controls">
-        <div>
-          <span>허깅페이스 계정: </span>
-          <span id="currentUser">로그인되지 않음</span>
-        </div>
-        
-        <div id="loginSection" class="login-section">
-          <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
-          <button id="loginButton">인증하기</button>
-          <div class="token-help">
-            API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
-          </div>
-        </div>
-        
-        <div id="loggedInSection" class="logged-in-section">
-          <button id="logoutButton" class="logout">로그아웃</button>
-        </div>
-      </div>
+      <h1>허깅페이스 스페이스 임베딩 뷰어</h1>
     </div>
     
     <div class="filter-controls">
       <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" />
     </div>
     
-    <div id="statusMessage" class="status-message"></div>
-    
     <div id="gridContainer" class="grid-container"></div>
   </div>
   
@@ -406,21 +325,13 @@ if __name__ == '__main__':
   <script>
     // DOM element references
     const elements = {
-      tokenInput: document.getElementById('tokenInput'),
-      loginButton: document.getElementById('loginButton'),
-      logoutButton: document.getElementById('logoutButton'),
-      currentUser: document.getElementById('currentUser'),
       gridContainer: document.getElementById('gridContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
-      statusMessage: document.getElementById('statusMessage'),
-      searchInput: document.getElementById('searchInput'),
-      loginSection: document.getElementById('loginSection'),
-      loggedInSection: document.getElementById('loggedInSection')
+      searchInput: document.getElementById('searchInput')
     };
     
     // Application state
     const state = {
-      username: null,
       isLoading: false
     };
     
@@ -430,18 +341,6 @@ if __name__ == '__main__':
       elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
     }
     
-    // Display status message
-    function showMessage(message, isError = false) {
-      elements.statusMessage.textContent = message;
-      elements.statusMessage.className = `status-message ${isError ? 'error' : 'success'}`;
-      elements.statusMessage.style.display = 'block';
-      
-      // Hide message after 3 seconds
-      setTimeout(() => {
-        elements.statusMessage.style.display = 'none';
-      }, 3000);
-    }
-    
     // API error handling
     async function handleApiResponse(response) {
       if (!response.ok) {
@@ -451,100 +350,6 @@ if __name__ == '__main__':
       return response.json();
     }
     
-    // Check session status
-    async function checkSessionStatus() {
-      try {
-        const response = await fetch('/api/session-status');
-        const data = await handleApiResponse(response);
-        
-        if (data.logged_in) {
-          state.username = data.username;
-          elements.currentUser.textContent = data.username;
-          elements.loginSection.style.display = 'none';
-          elements.loggedInSection.style.display = 'block';
-          
-          // Load URL list
-          loadUrls();
-        }
-      } catch (error) {
-        console.error('세션 상태 확인 오류:', error);
-      }
-    }
-    
-    // Login process
-    async function login(token) {
-      if (!token.trim()) {
-        showMessage('토큰을 입력해주세요.', true);
-        return;
-      }
-      
-      setLoading(true);
-      
-      try {
-        const formData = new FormData();
-        formData.append('token', token);
-        
-        const response = await fetch('/api/login', {
-          method: 'POST',
-          body: formData
-        });
-        
-        const data = await handleApiResponse(response);
-        
-        if (data.success) {
-          state.username = data.username;
-          
-          elements.currentUser.textContent = state.username;
-          elements.loginSection.style.display = 'none';
-          elements.loggedInSection.style.display = 'block';
-          
-          showMessage(`${state.username}님으로 로그인되었습니다.`);
-          
-          // Load URL list
-          loadUrls();
-        } else {
-          showMessage(data.message || '로그인에 실패했습니다.', true);
-        }
-      } catch (error) {
-        console.error('로그인 오류:', error);
-        showMessage(`로그인 오류: ${error.message}`, true);
-      } finally {
-        setLoading(false);
-      }
-    }
-    
-    // Logout process
-    async function logout() {
-      setLoading(true);
-      
-      try {
-        const response = await fetch('/api/logout', {
-          method: 'POST'
-        });
-        
-        const data = await handleApiResponse(response);
-        
-        if (data.success) {
-          state.username = null;
-          
-          elements.currentUser.textContent = '로그인되지 않음';
-          elements.tokenInput.value = '';
-          elements.loginSection.style.display = 'block';
-          elements.loggedInSection.style.display = 'none';
-          
-          showMessage('로그아웃되었습니다.');
-          
-          // Clear grid
-          elements.gridContainer.innerHTML = '';
-        }
-      } catch (error) {
-        console.error('로그아웃 오류:', error);
-        showMessage(`로그아웃 오류: ${error.message}`, true);
-      } finally {
-        setLoading(false);
-      }
-    }
-    
     // Load URL list
     async function loadUrls() {
       setLoading(true);
@@ -558,7 +363,7 @@ if __name__ == '__main__':
         renderGrid(urls);
       } catch (error) {
         console.error('URL 목록 로드 오류:', error);
-        showMessage(`URL 로드 오류: ${error.message}`, true);
+        alert(`URL 로드 오류: ${error.message}`);
       } finally {
         setLoading(false);
       }
@@ -578,26 +383,50 @@ if __name__ == '__main__':
       }
       
       urls.forEach(item => {
-        const { url, embedUrl, title } = item;
+        const { url, embedUrl, title, likes_count, owner } = item;
         
         // Create grid item
         const gridItem = document.createElement('div');
         gridItem.className = 'grid-item';
         
-        // Header with title and link
+        // Header with title and actions
         const header = document.createElement('div');
         header.className = 'grid-header';
         
+        // Left side of header (title and owner)
+        const headerLeft = document.createElement('div');
+        headerLeft.className = 'grid-header-left';
+        
         const titleEl = document.createElement('h3');
         titleEl.textContent = title;
-        header.appendChild(titleEl);
+        headerLeft.appendChild(titleEl);
+        
+        const ownerEl = document.createElement('div');
+        ownerEl.className = 'owner-info';
+        ownerEl.textContent = `by: ${owner}`;
+        headerLeft.appendChild(ownerEl);
+        
+        header.appendChild(headerLeft);
+        
+        // Actions container
+        const actionsDiv = document.createElement('div');
+        actionsDiv.className = 'grid-actions';
         
+        // Likes count
+        const likesCounter = document.createElement('div');
+        likesCounter.className = 'likes-counter';
+        likesCounter.innerHTML = '♥ <span>' + likes_count + '</span>';
+        actionsDiv.appendChild(likesCounter);
+        
+        // Open link
         const linkEl = document.createElement('a');
         linkEl.href = url;
         linkEl.target = '_blank';
         linkEl.className = 'open-link';
         linkEl.textContent = '새 창에서 열기';
-        header.appendChild(linkEl);
+        actionsDiv.appendChild(linkEl);
+        
+        header.appendChild(actionsDiv);
         
         // Add header to grid item
         gridItem.appendChild(header);
@@ -625,21 +454,7 @@ if __name__ == '__main__':
       });
     }
     
-    // Event listeners
-    elements.loginButton.addEventListener('click', () => {
-      login(elements.tokenInput.value);
-    });
-    
-    elements.logoutButton.addEventListener('click', logout);
-    
-    // Login with Enter key
-    elements.tokenInput.addEventListener('keypress', (event) => {
-      if (event.key === 'Enter') {
-        login(elements.tokenInput.value);
-      }
-    });
-    
-    // Filter event listener
+    // Filter event listeners
     elements.searchInput.addEventListener('input', () => {
       // Debounce input to prevent API calls on every keystroke
       clearTimeout(state.searchTimeout);
@@ -647,7 +462,7 @@ if __name__ == '__main__':
     });
     
     // Initialize
-    checkSessionStatus();
+    loadUrls();
   </script>
 </body>
 </html>