Update app.py

app.py

@@ -1,21 +1,13 @@
-from flask import Flask, render_template, request, jsonify, session, Response
+from flask import Flask, render_template, request, redirect, url_for, jsonify, session
 import requests
-from bs4 import BeautifulSoup
 import os
 from datetime import timedelta
-import logging
-import time
-
-# 로깅 설정
-logging.basicConfig(level=logging.INFO, 
-                    format='%(asctime)s - %(levelname)s - %(message)s')
-logger = logging.getLogger(__name__)
 
 app = Flask(__name__)
-app.secret_key = os.urandom(24)
-app.permanent_session_lifetime = timedelta(days=7)
+app.secret_key = os.urandom(24)  # Session encryption key
+app.permanent_session_lifetime = timedelta(days=7)  # Session duration
 
-# Hugging Face URL 목록
+# Huggingface URL list
 HUGGINGFACE_URLS = [
     "https://huggingface.co/spaces/ginipick/Tech_Hangman_Game",
     "https://huggingface.co/spaces/openfree/deepseek_r1_API",
@@ -38,7 +30,7 @@ HUGGINGFACE_URLS = [
     "https://huggingface.co/spaces/openfree/Article-Generator",
 ]
 
-# URL에서 모델/스페이스 정보 추출
+# Extract model/space info from URL
 def extract_model_info(url):
     parts = url.split('/')
     if len(parts) < 6:
@@ -52,8 +44,9 @@ def extract_model_info(url):
             'full_id': f"{parts[4]}/{parts[5]}"
         }
     elif len(parts) >= 5:
+        # Other URL format
         return {
-            'type': 'models',
+            'type': 'models',  # Default
             'owner': parts[3],
             'repo': parts[4],
             'full_id': f"{parts[3]}/{parts[4]}"
@@ -61,162 +54,53 @@ def extract_model_info(url):
     
     return None
 
-# URL의 마지막 부분을 제목으로 추출
+# 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:
-        logger.error(f"토큰 검증 오류: {e}")
-    
-    return False, None
-
-# 웹 스크래핑으로 좋아요 상태 확인
-def check_like_status_by_scraping(url, token):
-    headers = {
-        "Authorization": f"Bearer {token}",
-        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
-    }
+        print(f"whoami-v2 token validation error: {e}")
     
+    # Try the original whoami endpoint
     try:
-        # 페이지 요청
-        response = requests.get(url, headers=headers)
-        if not response.ok:
-            logger.warning(f"페이지 요청 실패: {url}, 상태 코드: {response.status_code}")
-            return False
-        
-        # HTML 파싱
-        soup = BeautifulSoup(response.text, 'html.parser')
-        
-        # 좋아요 버튼 찾기 (다양한 선택자 시도)
-        like_button = None
-        selectors = [
-            '.like-button-container button', 
-            'button[aria-label="Like"]',
-            'button.like-button',
-            'button[data-testid="like-button"]',
-            'button.heart-button'
-        ]
-        
-        for selector in selectors:
-            like_button = soup.select_one(selector)
-            if like_button:
-                break
-        
-        if not like_button:
-            logger.warning(f"좋아요 버튼을 찾을 수 없음: {url}")
-            return False
-        
-        # 좋아요 상태 확인 (클래스, aria-pressed 속성 등으로 확인)
-        is_liked = False
-        
-        # 클래스로 확인
-        if 'liked' in like_button.get('class', []) or 'active' in like_button.get('class', []):
-            is_liked = True
-        
-        # aria-pressed 속성으로 확인
-        elif like_button.get('aria-pressed') == 'true':
-            is_liked = True
-        
-        # 내부 텍스트 또는 아이콘으로 확인
-        elif like_button.find('span', class_='liked') or like_button.find('svg', class_='liked'):
-            is_liked = True
-        
-        logger.info(f"스크래핑 결과: {url} - 좋아요 {is_liked}")
-        return is_liked
-    
+        response = requests.get("https://huggingface.co/api/whoami", headers=headers)
+        if response.ok:
+            return True, response.json()
     except Exception as e:
-        logger.error(f"스크래핑 오류 ({url}): {e}")
-        return False
-
-# 전체 URL 목록의 좋아요 상태 스크래핑
-def scrape_all_like_status(token):
-    like_status = {}
-    
-    for url in HUGGINGFACE_URLS:
-        try:
-            # 과도한 요청 방지를 위한 지연
-            time.sleep(1)
-            
-            is_liked = check_like_status_by_scraping(url, token)
-            like_status[url] = is_liked
-            
-            logger.info(f"좋아요 상태 확인: {url} - {is_liked}")
-        except Exception as e:
-            logger.error(f"URL 처리 중 오류: {url} - {e}")
-            like_status[url] = False
+        print(f"whoami token validation error: {e}")
     
-    return like_status
+    return False, None
 
+# Homepage route
 @app.route('/')
 def home():
     return render_template('index.html')
 
-@app.route('/proxy/<path:url>')
-def proxy(url):
-    try:
-        # URL 디코딩 및 프로토콜 추가 (필요한 경우)
-        if not url.startswith(('http://', 'https://')):
-            url = 'https://' + url
-            
-        # 요청 헤더 설정
-        headers = {
-            'User-Agent': request.headers.get('User-Agent', 'Mozilla/5.0'),
-            'Accept': 'text/html,application/xhtml+xml,application/xml',
-            'Accept-Language': 'ko,en-US;q=0.9,en;q=0.8',
-        }
-        
-        # 토큰이 있으면 추가
-        if 'token' in session:
-            headers['Authorization'] = f"Bearer {session['token']}"
-        
-        # 원격 사이트에 요청
-        response = requests.get(url, headers=headers, stream=True)
-        
-        # 원격 사이트의 응답 헤더를 가져옴
-        response_headers = dict(response.headers)
-        
-        # 프록시 응답에서 제외할 헤더
-        excluded_headers = ['content-encoding', 'content-length', 'transfer-encoding', 'connection', 
-                           'host', 'x-frame-options', 'content-security-policy']
-        
-        # 필요한 헤더만 유지
-        headers = [(name, value) for name, value in response_headers.items()
-                   if name.lower() not in excluded_headers]
-        
-        # X-Frame-Options 및 CSP 헤더 제거/변경
-        headers.append(('X-Frame-Options', 'ALLOWALL'))
-        headers.append(('Content-Security-Policy', "frame-ancestors 'self' *"))
-        
-        # 응답 생성 및 전송
-        return Response(response.iter_content(chunk_size=1024), headers=headers,
-                         status=response.status_code, content_type=response.headers.get('content-type'))
-    except Exception as e:
-        logger.error(f"프록시 오류: {str(e)}")
-        return jsonify({"error": "프록시 요청 처리 중 오류가 발생했습니다."}), 500
-
+# Login API
 @app.route('/api/login', methods=['POST'])
 def login():
     token = request.form.get('token', '')
     
     if not token:
-        return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
+        return jsonify({'success': False, 'message': 'Please enter a token.'})
     
     is_valid, user_info = validate_token(token)
     
     if not is_valid or not user_info:
-        return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
+        return jsonify({'success': False, 'message': 'Invalid token.'})
     
-    # 사용자 이름 찾기
+    # Find username
     username = None
     if 'name' in user_info:
         username = user_info['name']
@@ -225,37 +109,28 @@ def login():
     elif 'username' in user_info:
         username = user_info['username']
     else:
-        username = '인증된 사용자'
+        username = 'Authenticated User'
     
-    # 세션에 저장
+    # Save to session
     session['token'] = token
     session['username'] = username
     
-    # 웹 스크래핑으로 좋아요 상태 확인
-    # 참고: 이 작업이 시간이 오래 걸릴 수 있으므로 비동기로 처리하는 것이 좋습니다
-    # 현재는 예시로 동기 방식으로 구현했습니다
-    try:
-        like_status = scrape_all_like_status(token)
-        session['like_status'] = like_status
-    except Exception as e:
-        logger.error(f"좋아요 상태 스크래핑 중 오류: {e}")
-        session['like_status'] = {}
-    
     return jsonify({
         'success': True, 
         'username': username
     })
 
+# Logout API
 @app.route('/api/logout', methods=['POST'])
 def logout():
     session.pop('token', None)
     session.pop('username', None)
-    session.pop('like_status', None)
     return jsonify({'success': True})
 
+# URL list API
 @app.route('/api/urls', methods=['GET'])
 def get_urls():
-    like_status = session.get('like_status', {})
+    search_query = request.args.get('search', '').lower()
     
     results = []
     for url in HUGGINGFACE_URLS:
@@ -265,156 +140,60 @@ def get_urls():
         if not model_info:
             continue
         
-        # 좋아요 상태 확인
-        is_liked = like_status.get(url, False)
+        if search_query and search_query not in url.lower() and search_query not in title.lower():
+            continue
         
         results.append({
             'url': url,
             'title': title,
-            'model_info': model_info,
-            'is_liked': is_liked
+            'model_info': model_info
         })
     
     return jsonify(results)
 
-@app.route('/api/toggle-like', methods=['POST'])
-def toggle_like():
-    if 'token' not in session:
-        return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
-    
-    data = request.json
-    url = data.get('url')
-    
-    if not url:
-        return jsonify({'success': False, 'message': 'URL이 필요합니다.'})
-    
-    token = session['token']
-    
-    # URL에서 모델 정보 추출
-    model_info = extract_model_info(url)
-    if not model_info:
-        return jsonify({'success': False, 'message': '잘못된 URL 형식입니다.'})
-    
-    # 현재 좋아요 상태 확인
-    like_status = session.get('like_status', {})
-    current_status = like_status.get(url, False)
-    
-    # API 요청을 위한 헤더 및 데이터 설정
-    headers = {
-        "Authorization": f"Bearer {token}",
-        "Content-Type": "application/json"
-    }
-    
-    # API 엔드포인트 및 메서드 결정
-    # Hugging Face API에서 모델/스페이스를 좋아요/취소하는 엔드포인트
-    if model_info['type'] == 'spaces':
-        api_url = f"https://huggingface.co/api/spaces/{model_info['full_id']}/like"
-    else:
-        api_url = f"https://huggingface.co/api/models/{model_info['full_id']}/like"
-    
-    # 현재 상태의 반대로 변경
-    try:
-        if current_status:
-            # 좋아요 취소 (DELETE 요청)
-            response = requests.delete(api_url, headers=headers)
-        else:
-            # 좋아요 추가 (POST 요청)
-            response = requests.post(api_url, headers=headers, json={})
-        
-        # 응답 확인
-        if response.status_code in [200, 201, 204]:
-            # 성공적으로 변경되면 세션 상태 업데이트
-            new_status = not current_status
-            like_status[url] = new_status
-            session['like_status'] = like_status
-            
-            return jsonify({
-                'success': True,
-                'is_liked': new_status,
-                'message': '좋아요를 추가했습니다.' if new_status else '좋아요를 취소했습니다.'
-            })
-        else:
-            # API 응답 오류
-            error_message = f"Hugging Face API 오류 (상태 코드: {response.status_code})"
-            try:
-                error_data = response.json()
-                if 'error' in error_data:
-                    error_message += f": {error_data['error']}"
-            except:
-                pass
-            
-            logger.error(f"{error_message}, 응답: {response.text}")
-            return jsonify({'success': False, 'message': error_message})
-    
-    except Exception as e:
-        logger.error(f"좋아요 상태 변경 중 오류: {e}")
-        return jsonify({
-            'success': False,
-            'message': f'좋아요 상태 변경 중 오류: {str(e)}'
-        })
-
-@app.route('/api/refresh-likes', methods=['POST'])
-def refresh_likes():
-    if 'token' not in session:
-        return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
-    
-    try:
-        # 웹 스크래핑으로 좋아요 상태 새로고침
-        like_status = scrape_all_like_status(session['token'])
-        session['like_status'] = like_status
-        
-        return jsonify({
-            'success': True,
-            'message': '좋아요 상태가 새로고침되었습니다.',
-            'like_status': like_status
-        })
-    except Exception as e:
-        logger.error(f"좋아요 상태 새로고침 중 오류: {e}")
-        return jsonify({
-            'success': False,
-            'message': f'좋아요 상태 새로고침 중 오류: {str(e)}'
-        })
-
+# Session status API
 @app.route('/api/session-status', methods=['GET'])
 def session_status():
     return jsonify({
-        'logged_in': 'username' in session,
+        'logged_in': 'token' in session,
         'username': session.get('username')
     })
 
 if __name__ == '__main__':
+    # Create templates folder
     os.makedirs('templates', exist_ok=True)
     
+    # Create index.html file
     with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''
 <!DOCTYPE html>
-<html lang="ko">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hugging Face URL 그리드</title>
+  <title>Huggingface Spaces Grid</title>
   <style>
     body {
-      font-family: Arial, sans-serif;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       line-height: 1.6;
       margin: 0;
       padding: 0;
       color: #333;
-      background-color: #f4f5f7;
+      background-color: #f5f8fa;
     }
     
     .container {
-      max-width: 1600px;
+      max-width: 1400px;
       margin: 0 auto;
       padding: 1rem;
     }
     
     .header {
-      background-color: #fff;
+      background-color: #ffffff;
       padding: 1rem;
       border-radius: 8px;
       margin-bottom: 1rem;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
     
     .user-controls {
@@ -425,31 +204,31 @@ if __name__ == '__main__':
     }
     
     .filter-controls {
-      background-color: #fff;
+      background-color: #ffffff;
       padding: 1rem;
       border-radius: 8px;
       margin-bottom: 1rem;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
     
     input[type="password"],
     input[type="text"] {
-      padding: 0.5rem;
+      padding: 0.7rem;
       border: 1px solid #ddd;
       border-radius: 4px;
       margin-right: 5px;
+      font-size: 1rem;
+      width: 250px;
     }
     
     button {
-      padding: 0.5rem 1rem;
+      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;
     }
     
@@ -457,14 +236,6 @@ if __name__ == '__main__':
       background-color: #45a049;
     }
     
-    button.refresh {
-      background-color: #2196F3;
-    }
-    
-    button.refresh:hover {
-      background-color: #0b7dda;
-    }
-    
     button.logout {
       background-color: #f44336;
     }
@@ -475,7 +246,7 @@ if __name__ == '__main__':
     
     .token-help {
       margin-top: 0.5rem;
-      font-size: 0.8rem;
+      font-size: 0.9rem;
       color: #666;
     }
     
@@ -488,143 +259,66 @@ if __name__ == '__main__':
       text-decoration: underline;
     }
     
-    /* 그리드 레이아웃 스타일 */
     .grid-container {
       display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 1rem;
+      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+      gap: 1.5rem;
     }
     
     .grid-item {
-      border: 1px solid #ddd;
+      background-color: #ffffff;
       border-radius: 8px;
-      background-color: #fff;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      transition: all 0.3s ease;
-      position: relative;
+      overflow: hidden;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
       display: flex;
       flex-direction: column;
-      overflow: hidden;
-    }
-    
-    .grid-item:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-    }
-    
-    .grid-item.liked {
-      border-color: #ff4757;
-      background-color: #ffebee;
     }
     
     .grid-header {
-      padding: 0.5rem 1rem;
+      padding: 1rem;
       border-bottom: 1px solid #eee;
-      position: relative;
+      background-color: #f9f9f9;
     }
     
-    .grid-title {
-      font-size: 1rem;
+    .grid-header h3 {
       margin: 0;
-      padding-right: 30px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      padding: 0;
+      font-size: 1.2rem;
+      color: #333;
     }
     
     .grid-content {
       flex: 1;
       position: relative;
-      height: 300px;
+      height: 500px;
+      overflow: hidden;
     }
     
-    .iframe-container {
+    .grid-content iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-    }
-    
-    .iframe-container iframe {
-      width: 100%;
-      height: 100%;
       border: none;
     }
     
-    .like-button {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      border: none;
-      background: transparent;
-      font-size: 1.2rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      color: #ddd;
-      padding: 0;
-    }
-    
-    .like-button:hover {
-      transform: scale(1.2);
-    }
-    
-    .like-button.liked {
-      color: #ff4757;
-    }
-    
-    .like-badge {
-      position: absolute;
-      top: -5px;
-      left: -5px;
-      background-color: #ff4757;
-      color: white;
-      padding: 0.2rem 0.5rem;
-      border-radius: 4px;
-      font-size: 0.7rem;
-      font-weight: bold;
-      z-index: 10;
-    }
-    
-    .like-status {
-      background-color: #fff;
-      padding: 1rem;
-      border-radius: 8px;
-      margin-bottom: 1rem;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      display: none;
-    }
-    
-    .like-status strong {
-      color: #ff4757;
-    }
-    
     .status-message {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
       padding: 1rem;
       border-radius: 8px;
+      margin-bottom: 1rem;
       display: none;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      z-index: 1000;
-      max-width: 300px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     }
     
     .success {
-      background-color: #4CAF50;
-      color: white;
+      background-color: #dff0d8;
+      color: #3c763d;
     }
     
     .error {
-      background-color: #f44336;
-      color: white;
+      background-color: #f2dede;
+      color: #a94442;
     }
     
     .loading {
@@ -638,14 +332,15 @@ if __name__ == '__main__':
       justify-content: center;
       align-items: center;
       z-index: 1000;
+      font-size: 1.5rem;
     }
     
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid #f3f3f3;
-      border-top: 4px solid #3498db;
+    .loading-spinner {
+      border: 5px solid #f3f3f3;
+      border-top: 5px solid #4CAF50;
       border-radius: 50%;
+      width: 50px;
+      height: 50px;
       animation: spin 1s linear infinite;
     }
     
@@ -654,21 +349,6 @@ if __name__ == '__main__':
       100% { transform: rotate(360deg); }
     }
     
-    .filter-toggle {
-      display: flex;
-    }
-    
-    .filter-toggle button {
-      margin-right: 0.5rem;
-      background-color: #f0f0f0;
-      color: #333;
-    }
-    
-    .filter-toggle button.active {
-      background-color: #4CAF50;
-      color: white;
-    }
-    
     .login-section {
       margin-top: 1rem;
     }
@@ -678,38 +358,6 @@ if __name__ == '__main__':
       margin-top: 1rem;
     }
     
-    .note {
-      padding: 0.5rem;
-      background-color: #fffde7;
-      border-left: 3px solid #ffd600;
-      margin-bottom: 1rem;
-      font-size: 0.9rem;
-    }
-    
-    .view-toggle {
-      margin-top: 1rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    .view-toggle button {
-      margin-left: 0.5rem;
-    }
-    
-    /* 반응형 설정 */
-    @media (max-width: 1400px) {
-      .grid-container {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-    
-    @media (max-width: 1024px) {
-      .grid-container {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-    
     @media (max-width: 768px) {
       .user-controls {
         flex-direction: column;
@@ -720,14 +368,6 @@ if __name__ == '__main__':
         margin-bottom: 1rem;
       }
       
-      .filter-controls {
-        flex-direction: column;
-      }
-      
-      .filter-controls > div {
-        margin-bottom: 0.5rem;
-      }
-      
       .grid-container {
         grid-template-columns: 1fr;
       }
@@ -739,137 +379,86 @@ if __name__ == '__main__':
     <div class="header">
       <div class="user-controls">
         <div>
-          <span>허깅페이스 계정: </span>
-          <span id="currentUser">로그인되지 않음</span>
+          <span>Huggingface Account: </span>
+          <span id="currentUser">Not logged in</span>
         </div>
         
         <div id="loginSection" class="login-section">
-          <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
-          <button id="loginButton">인증하기</button>
+          <input type="password" id="tokenInput" placeholder="Enter Huggingface API Token" />
+          <button id="loginButton">Authenticate</button>
           <div class="token-help">
-            API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
+            You can generate an API token on the <a href="https://huggingface.co/settings/tokens" target="_blank">Huggingface tokens page</a>.
           </div>
         </div>
         
         <div id="loggedInSection" class="logged-in-section">
-          <button id="refreshButton" class="refresh">새로고침</button>
-          <button id="logoutButton" class="logout">로그아웃</button>
+          <button id="logoutButton" class="logout">Logout</button>
         </div>
       </div>
     </div>
     
-    <div class="note">
-      <p><strong>참고:</strong> 이 페이지는 웹 스크래핑 방식으로 좋아요 상태를 가져옵니다. 좋아요 상태가 정확하지 않거나 지연될 수 있습니다. '새로고침' 버튼을 클릭하여 최신 상태를 가져올 수 있습니다.</p>
-    </div>
-    
-    <div id="likeStatus" class="like-status">
-      <div id="likeStatsText">총 <span id="totalUrlCount">0</span>개 중 <strong><span id="likedUrlCount">0</span>개</strong>의 URL을 좋아요 했습니다.</div>
-    </div>
-    
     <div class="filter-controls">
-      <div>
-        <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 300px;" />
-      </div>
-      <div class="filter-toggle">
-        <button id="allUrlsBtn" class="active">전체 보기</button>
-        <button id="likedUrlsBtn">좋아요만 보기</button>
-      </div>
-    </div>
-    
-    <div class="view-toggle">
-      <div>
-        <input type="checkbox" id="embedToggle" checked />
-        <label for="embedToggle">URL 임베딩 보기</label>
-      </div>
+      <input type="text" id="searchInput" placeholder="Search by URL or title" />
     </div>
     
     <div id="statusMessage" class="status-message"></div>
     
-    <div id="loadingIndicator" class="loading">
-      <div class="spinner"></div>
-    </div>
-    
     <div id="gridContainer" class="grid-container"></div>
   </div>
   
+  <div id="loadingIndicator" class="loading">
+    <div class="loading-spinner"></div>
+  </div>
+  
   <script>
-    // DOM 요소 참조
-// DOM 요소 참조
-const elements = {
-  tokenInput: document.getElementById('tokenInput'),
-  loginButton: document.getElementById('loginButton'),
-  logoutButton: document.getElementById('logoutButton'),
-  refreshButton: document.getElementById('refreshButton'),
-  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'),
-  likeStatus: document.getElementById('likeStatus'),
-  totalUrlCount: document.getElementById('totalUrlCount'),
-  likedUrlCount: document.getElementById('likedUrlCount'),
-  allUrlsBtn: document.getElementById('allUrlsBtn'),
-  likedUrlsBtn: document.getElementById('likedUrlsBtn'),
-  embedToggle: document.getElementById('embedToggle')
-};
-
-
-likeStatus: document.getElementById('likeStatus'),
-      totalUrlCount: document.getElementById('totalUrlCount'),
-      likedUrlCount: document.getElementById('likedUrlCount'),
-      allUrlsBtn: document.getElementById('allUrlsBtn'),
-      likedUrlsBtn: document.getElementById('likedUrlsBtn'),
-      embedToggle: document.getElementById('embedToggle')
+    // 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')
     };
     
-    // 애플리케이션 상태
+    // Application state
     const state = {
       username: null,
-      allURLs: [],
-      isLoading: false,
-      viewMode: 'all', // 'all' 또는 'liked'
-      embedView: true  // iframe 임베딩 여부
+      isLoading: false
     };
     
-    // 로딩 상태 표시 함수
+    // Display loading indicator
     function setLoading(isLoading) {
       state.isLoading = isLoading;
       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';
       
-      // 3초 후 메시지 사라짐
+      // Hide message after 3 seconds
       setTimeout(() => {
         elements.statusMessage.style.display = 'none';
       }, 3000);
     }
     
-    // API 오류 처리 함수
+    // API error handling
     async function handleApiResponse(response) {
       if (!response.ok) {
         const errorText = await response.text();
-        throw new Error(`API 오류 (${response.status}): ${errorText}`);
+        throw new Error(`API error (${response.status}): ${errorText}`);
       }
       return response.json();
     }
     
-    // 좋아요 통계 업데이트
-    function updateLikeStats() {
-      const totalCount = state.allURLs.length;
-      const likedCount = state.allURLs.filter(item => item.is_liked).length;
-      
-      elements.totalUrlCount.textContent = totalCount;
-      elements.likedUrlCount.textContent = likedCount;
-    }
-    
-    // 세션 상태 확인
+    // Check session status
     async function checkSessionStatus() {
       try {
         const response = await fetch('/api/session-status');
@@ -880,20 +469,19 @@ likeStatus: document.getElementById('likeStatus'),
           elements.currentUser.textContent = data.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
-          elements.likeStatus.style.display = 'block';
           
-          // URL 목록 로드
+          // Load URL list
           loadUrls();
         }
       } catch (error) {
-        console.error('세션 상태 확인 오류:', error);
+        console.error('Session status check error:', error);
       }
     }
     
-    // 로그인 처리
+    // Login process
     async function login(token) {
       if (!token.trim()) {
-        showMessage('토큰을 입력해주세요.', true);
+        showMessage('Please enter a token.', true);
         return;
       }
       
@@ -916,24 +504,23 @@ likeStatus: document.getElementById('likeStatus'),
           elements.currentUser.textContent = state.username;
           elements.loginSection.style.display = 'none';
           elements.loggedInSection.style.display = 'block';
-          elements.likeStatus.style.display = 'block';
           
-          showMessage(`${state.username}님으로 로그인되었습니다.`);
+          showMessage(`Logged in as ${state.username}.`);
           
-          // URL 목록 로드
+          // Load URL list
           loadUrls();
         } else {
-          showMessage(data.message || '로그인에 실패했습니다.', true);
+          showMessage(data.message || 'Login failed.', true);
         }
       } catch (error) {
-        console.error('로그인 오류:', error);
-        showMessage(`로그인 오류: ${error.message}`, true);
+        console.error('Login error:', error);
+        showMessage(`Login error: ${error.message}`, true);
       } finally {
         setLoading(false);
       }
     }
     
-    // 로그아웃 처리
+    // Logout process
     async function logout() {
       setLoading(true);
       
@@ -946,363 +533,121 @@ likeStatus: document.getElementById('likeStatus'),
         
         if (data.success) {
           state.username = null;
-          state.allURLs = [];
           
-          elements.currentUser.textContent = '로그인되지 않음';
+          elements.currentUser.textContent = 'Not logged in';
           elements.tokenInput.value = '';
           elements.loginSection.style.display = 'block';
           elements.loggedInSection.style.display = 'none';
-          elements.likeStatus.style.display = 'none';
           
-          showMessage('로그아웃되었습니다.');
+          showMessage('Logged out successfully.');
           
-          // 그리드 초기화
+          // Clear grid
           elements.gridContainer.innerHTML = '';
         }
       } catch (error) {
-        console.error('로그아웃 오류:', error);
-        showMessage(`로그아웃 오류: ${error.message}`, true);
-      } finally {
-        setLoading(false);
-      }
-    }
-    
-    // 좋아요 상태 새로고침
-    async function refreshLikes() {
-      setLoading(true);
-      
-      try {
-        const response = await fetch('/api/refresh-likes', {
-          method: 'POST'
-        });
-        
-        const data = await handleApiResponse(response);
-        
-        if (data.success) {
-          // URL 목록 다시 로드
-          loadUrls();
-          showMessage('좋아요 상태가 새로고침되었습니다.');
-        } else {
-          showMessage(data.message || '좋아요 상태 새로고침에 실패했습니다.', true);
-        }
-      } catch (error) {
-        console.error('좋아요 상태 새로고침 오류:', error);
-        showMessage(`좋아요 상태 새로고침 오류: ${error.message}`, true);
+        console.error('Logout error:', error);
+        showMessage(`Logout error: ${error.message}`, true);
       } finally {
         setLoading(false);
       }
     }
     
-    // URL 목록 로드
+    // Load URL list
     async function loadUrls() {
       setLoading(true);
       
       try {
-        const response = await fetch('/api/urls');
-        const data = await handleApiResponse(response);
+        const searchText = elements.searchInput.value;
         
-        state.allURLs = data;
-        updateLikeStats();
-        renderGrid();
+        const response = await fetch(`/api/urls?search=${encodeURIComponent(searchText)}`);
+        const urls = await handleApiResponse(response);
+        
+        renderGrid(urls);
       } catch (error) {
-        console.error('URL 목록 로드 오류:', error);
-        showMessage(`URL 목록 로드 오류: ${error.message}`, true);
+        console.error('URL list loading error:', error);
+        showMessage(`URL loading error: ${error.message}`, true);
       } finally {
         setLoading(false);
       }
     }
     
-    // 좋아요 토글
-    async function toggleLike(url) {
-      try {
-        const response = await fetch('/api/toggle-like', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({ url })
-        });
-        
-        const data = await handleApiResponse(response);
-        
-        if (data.success) {
-          // URL 객체 찾기
-          const urlObj = state.allURLs.find(item => item.url === url);
-          if (urlObj) {
-            urlObj.is_liked = data.is_liked;
-            updateLikeStats();
-            renderGrid();
-          }
-          
-          showMessage(data.message);
-        } else {
-          showMessage(data.message || '좋아요 상태 변경에 실패했습니다.', true);
-        }
-      } catch (error) {
-        console.error('좋아요 토글 오류:', error);
-        showMessage(`좋아요 토글 오류: ${error.message}`, true);
-      }
-    }
-    
-    // 그리드 렌더링
-    function renderGrid() {
+    // Render grid
+    function renderGrid(urls) {
       elements.gridContainer.innerHTML = '';
       
-      let urlsToShow = state.allURLs;
-      
-      // 검색어로 필터링
-      const searchTerm = elements.searchInput.value.trim().toLowerCase();
-      if (searchTerm) {
-        urlsToShow = urlsToShow.filter(item => 
-          item.url.toLowerCase().includes(searchTerm) || 
-          item.title.toLowerCase().includes(searchTerm)
-        );
-      }
-      
-      // 보기 모드로 필터링 (전체 또는 좋아요만)
-      if (state.viewMode === 'liked') {
-        urlsToShow = urlsToShow.filter(item => item.is_liked);
-      }
-      
-      if (urlsToShow.length === 0) {
-        const emptyMessage = document.createElement('div');
-        emptyMessage.textContent = '표시할 URL이 없습니다.';
-        emptyMessage.style.padding = '1rem';
-        emptyMessage.style.width = '100%';
-        emptyMessage.style.textAlign = 'center';
-        elements.gridContainer.appendChild(emptyMessage);
+      if (!urls || urls.length === 0) {
+        const noResultsMsg = document.createElement('p');
+        noResultsMsg.textContent = 'No URLs to display.';
+        noResultsMsg.style.padding = '1rem';
+        noResultsMsg.style.fontStyle = 'italic';
+        elements.gridContainer.appendChild(noResultsMsg);
         return;
       }
       
-      // 그리드 아이템 생성
-      urlsToShow.forEach(item => {
-        const gridItem = document.createElement('div');
-        gridItem.className = `grid-item ${item.is_liked ? 'liked' : ''}`;
+      urls.forEach(item => {
+        const { url, title } = item;
         
-        if (item.is_liked) {
-          const badge = document.createElement('div');
-          badge.className = 'like-badge';
-          badge.textContent = '좋아요';
-          gridItem.appendChild(badge);
-        }
+        // Create grid item
+        const gridItem = document.createElement('div');
+        gridItem.className = 'grid-item';
         
-        // 헤더 부분
+        // Header with title
         const header = document.createElement('div');
         header.className = 'grid-header';
         
-        const title = document.createElement('h3');
-        title.className = 'grid-title';
-        title.textContent = item.title;
-        
-        const likeButton = document.createElement('button');
-        likeButton.className = `like-button ${item.is_liked ? 'liked' : ''}`;
-        likeButton.innerHTML = '❤';
-        likeButton.dataset.url = item.url;
-        likeButton.addEventListener('click', (e) => {
-          e.preventDefault();
-          toggleLike(item.url);
-        });
+        const titleEl = document.createElement('h3');
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
         
-        header.appendChild(title);
-        header.appendChild(likeButton);
+        // Add header to grid item
+        gridItem.appendChild(header);
         
-        // 컨텐츠 부분 (iframe 임베딩)
+        // Content with iframe
         const content = document.createElement('div');
         content.className = 'grid-content';
         
-        if (state.embedView) {
-          const iframeContainer = document.createElement('div');
-          iframeContainer.className = 'iframe-container';
-          
-          // 로딩 인디케이터
-          const loadingIndicator = document.createElement('div');
-          loadingIndicator.className = 'loading-indicator';
-          loadingIndicator.style.position = 'absolute';
-          loadingIndicator.style.top = '0';
-          loadingIndicator.style.left = '0';
-          loadingIndicator.style.width = '100%';
-          loadingIndicator.style.height = '100%';
-          loadingIndicator.style.backgroundColor = '#f8f9fa';
-          loadingIndicator.style.display = 'flex';
-          loadingIndicator.style.alignItems = 'center';
-          loadingIndicator.style.justifyContent = 'center';
-          loadingIndicator.style.flexDirection = 'column';
-          loadingIndicator.style.zIndex = '10';
-          
-          const spinner = document.createElement('div');
-          spinner.className = 'spinner';
-          spinner.style.width = '40px';
-          spinner.style.height = '40px';
-          spinner.style.border = '4px solid #f3f3f3';
-          spinner.style.borderTop = '4px solid #3498db';
-          spinner.style.borderRadius = '50%';
-          spinner.style.animation = 'spin 1s linear infinite';
-          
-          const loadingText = document.createElement('div');
-          loadingText.textContent = '콘텐츠 로딩 중...';
-          loadingText.style.marginTop = '10px';
-          
-          loadingIndicator.appendChild(spinner);
-          loadingIndicator.appendChild(loadingText);
-          
-          // 프록시를 통한 URL 인코딩
-          const originalUrl = item.url;
-          const proxyUrl = `/proxy/${encodeURIComponent(originalUrl.replace(/^https?:\/\//, ''))}`;
-          
-          // iframe 생성
-          const iframe = document.createElement('iframe');
-          iframe.src = proxyUrl;
-          iframe.title = item.title;
-          iframe.width = '100%';
-          iframe.height = '100%';
-          iframe.style.border = 'none';
-          iframe.style.backgroundColor = 'white';
-          
-          // iframe 로드 이벤트
-          iframe.onload = () => {
-            loadingIndicator.style.display = 'none';
-          };
-          
-          // 로드 타임아웃 - 10초 후에도 로드되지 않으면 대체 UI 표시
-          let loadTimeout = setTimeout(() => {
-            if (loadingIndicator.style.display !== 'none') {
-              loadingIndicator.innerHTML = '';
-              
-              const errorIcon = document.createElement('div');
-              errorIcon.style.fontSize = '32px';
-              errorIcon.textContent = '⚠️';
-              
-              const errorText = document.createElement('div');
-              errorText.textContent = '콘텐츠를 로드할 수 없습니다';
-              errorText.style.margin = '10px 0';
-              errorText.style.fontWeight = 'bold';
-              
-              const errorDesc = document.createElement('div');
-              errorDesc.textContent = '이 콘텐츠는 외부 임베딩을 허용하지 않을 수 있습니다.';
-              errorDesc.style.fontSize = '0.9rem';
-              errorDesc.style.marginBottom = '15px';
-              errorDesc.style.textAlign = 'center';
-              
-              const visitLink = document.createElement('a');
-              visitLink.href = originalUrl;
-              visitLink.target = '_blank';
-              visitLink.textContent = '새 창에서 직접 방문하기';
-              visitLink.style.color = 'white';
-              visitLink.style.backgroundColor = '#3498db';
-              visitLink.style.padding = '8px 16px';
-              visitLink.style.borderRadius = '4px';
-              visitLink.style.textDecoration = 'none';
-              
-              loadingIndicator.appendChild(errorIcon);
-              loadingIndicator.appendChild(errorText);
-              loadingIndicator.appendChild(errorDesc);
-              loadingIndicator.appendChild(visitLink);
-            }
-          }, 10000);
-          
-          // iframe 오류 처리
-          iframe.onerror = () => {
-            clearTimeout(loadTimeout);
-            loadingIndicator.innerHTML = '콘텐츠를 로드할 수 없습니다. <a href="' + originalUrl + '" target="_blank">직접 방문하기</a>';
-          };
-          
-          iframeContainer.appendChild(iframe);
-          iframeContainer.appendChild(loadingIndicator);
-          
-          content.appendChild(iframeContainer);
-        } else {
-          // 임베딩 없는 경우 링크만 표시
-          const linkContainer = document.createElement('div');
-          linkContainer.style.padding = '1rem';
-          
-          const link = document.createElement('a');
-          link.href = item.url;
-          link.textContent = item.url;
-          link.target = '_blank';
-          
-          const owner = document.createElement('div');
-          owner.textContent = `소유자: ${item.model_info.owner}`;
-          owner.style.marginTop = '0.5rem';
-          
-          const repo = document.createElement('div');
-          repo.textContent = `저장소: ${item.model_info.repo}`;
-          
-          const type = document.createElement('div');
-          type.textContent = `유형: ${item.model_info.type}`;
-          
-          linkContainer.appendChild(link);
-          linkContainer.appendChild(owner);
-          linkContainer.appendChild(repo);
-          linkContainer.appendChild(type);
-          
-          content.appendChild(linkContainer);
-        }
+        const iframe = document.createElement('iframe');
+        iframe.src = url;
+        iframe.title = title;
+        iframe.loading = 'lazy'; // Lazy load iframes
         
-        // 그리드 아이템에 추가
-        gridItem.appendChild(header);
+        content.appendChild(iframe);
+        
+        // Add content to grid item
         gridItem.appendChild(content);
         
+        // Add grid item to container
         elements.gridContainer.appendChild(gridItem);
       });
     }
     
-    // 이벤트 리스너 등록
-    function registerEventListeners() {
-      // 로그인 버튼
-      elements.loginButton.addEventListener('click', () => {
+    // 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);
-      });
-      
-      // 엔터 키로 로그인
-      elements.tokenInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-          login(elements.tokenInput.value);
-        }
-      });
-      
-      // 로그아웃 버튼
-      elements.logoutButton.addEventListener('click', logout);
-      
-      // 새로고침 버튼
-      elements.refreshButton.addEventListener('click', refreshLikes);
-      
-      // 검색 입력 필드
-      elements.searchInput.addEventListener('input', renderGrid);
-      
-      // 필터 버튼 - 전체 보기
-      elements.allUrlsBtn.addEventListener('click', () => {
-        elements.allUrlsBtn.classList.add('active');
-        elements.likedUrlsBtn.classList.remove('active');
-        state.viewMode = 'all';
-        renderGrid();
-      });
-      
-      // 필터 버튼 - 좋아요만 보기
-      elements.likedUrlsBtn.addEventListener('click', () => {
-        elements.likedUrlsBtn.classList.add('active');
-        elements.allUrlsBtn.classList.remove('active');
-        state.viewMode = 'liked';
-        renderGrid();
-      });
-      
-      // 임베딩 토글
-      elements.embedToggle.addEventListener('change', () => {
-        state.embedView = elements.embedToggle.checked;
-        renderGrid();
-      });
-    }
+      }
+    });
     
-    // 초기화 함수
-    function init() {
-      registerEventListeners();
-      checkSessionStatus();
-    }
+    // Filter event listener
+    elements.searchInput.addEventListener('input', () => {
+      // Debounce input to prevent API calls on every keystroke
+      clearTimeout(state.searchTimeout);
+      state.searchTimeout = setTimeout(loadUrls, 300);
+    });
     
-    // 애플리케이션 초기화
-    init();
+    // Initialize
+    checkSessionStatus();
   </script>
 </body>
 </html>
 ''')
     
-    app.run(debug=True, host='0.0.0.0', port=7860)      
+    # Use port 7860 for Huggingface Spaces
+    app.run(host='0.0.0.0', port=7860)