Update app.py

app.py

@@ -3,158 +3,339 @@ import requests
 import os
 import json
 from datetime import timedelta
-import logging
-
-# 로깅 설정
-logging.basicConfig(level=logging.DEBUG, 
-                   format='%(asctime)s - %(name)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)  # 세션 유지 기간 설정
 
-# 허깅페이스 URL 목록 (간략화)
+# 허깅페이스 URL 목록
 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/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",
 ]
 
-# 허깅페이스 인증 확인 (디버깅 개선)
+# 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:
+        # 다른 형식의 URL
+        return {
+            'type': 'models',  # 기본값
+            'owner': parts[3],
+            'repo': parts[4],
+            'full_id': f"{parts[3]}/{parts[4]}"
+        }
+    
+    return None
+
+# URL의 마지막 부분을 제목으로 추출
+def extract_title(url):
+    parts = url.split("/")
+    title = parts[-1] if parts else ""
+    return title.replace("_", " ").replace("-", " ")
+
+# 허깅페이스 인증 확인 - 수정된 버전
 def validate_token(token):
-    logger.debug(f"토큰 검증 시도 (토큰 일부: {token[:4]}...)")
     headers = {"Authorization": f"Bearer {token}"}
     
-    # 여러 엔드포인트 시도
-    api_endpoints = [
-        "https://huggingface.co/api/whoami",
-        "https://huggingface.co/api/whoami-v2"
+    # 수정: 테스트 결과를 바탕으로 whoami-v2 엔드포인트 먼저 시도
+    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 토큰 검증 오류: {e}")
+    
+    # 기존 whoami 엔드포인트도 시도
+    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 토큰 검증 오류: {e}")
+    
+    return False, None
+
+# 좋아요 목록 가져오기
+def get_liked_repos(token):
+    headers = {"Authorization": f"Bearer {token}"}
+    endpoints = [
+        "/api/me/likes",
+        "/api/me/liked-repos",
+        "/api/me/favorites"
     ]
     
-    for endpoint in api_endpoints:
+    liked_models = {}
+    
+    for endpoint in endpoints:
         try:
-            logger.debug(f"API 엔드포인트 시도: {endpoint}")
-            response = requests.get(endpoint, headers=headers)
-            
-            # 응답 로깅
-            logger.debug(f"API 응답 상태 코드: {response.status_code}")
-            logger.debug(f"API 응답 헤더: {response.headers}")
-            
+            response = requests.get(f"https://huggingface.co{endpoint}", headers=headers)
             if response.ok:
-                logger.debug("토큰 검증 성공!")
-                return True, response.json()
-            else:
-                logger.debug(f"토큰 검증 실패 - 응답: {response.text}")
+                data = response.json()
+                if isinstance(data, list):
+                    for model in data:
+                        if isinstance(model, dict):
+                            if 'owner' in model and 'name' in model:
+                                liked_models[f"{model['owner']}/{model['name']}"] = True
+                            elif 'id' in model:
+                                liked_models[model['id']] = True
+                elif isinstance(data, dict):
+                    for key in data:
+                        liked_models[key] = True
+                
+                print(f"좋아요 목록 가져오기 성공 (엔드포인트: {endpoint})")
+                return liked_models
         except Exception as e:
-            logger.error(f"API 호출 중 오류 발생: {str(e)}")
+            print(f"좋아요 목록 가져오기 오류 (엔드포인트: {endpoint}): {e}")
     
-    # 모든 API 호출 실패
-    return False, None
+    return liked_models
+
+# 좋아요 토글 API 호출
+def toggle_like(token, type_name, owner, repo, is_liked):
+    headers = {"Authorization": f"Bearer {token}"}
+    normalized_type = "spaces" if type_name == "spaces" else "models"
+    method = "DELETE" if is_liked else "POST"
+    url = f"https://huggingface.co/api/{normalized_type}/{owner}/{repo}/like"
+    
+    try:
+        if method == "DELETE":
+            response = requests.delete(url, headers=headers)
+        else:
+            response = requests.post(url, headers=headers)
+        
+        return response.ok, response.status_code
+    except Exception as e:
+        print(f"좋아요 토글 오류: {e}")
+        return False, 500
 
-# 토큰 검증 테스트 API
-@app.route('/api/test-token', methods=['POST'])
-def test_token():
+# 홈페이지 라우트
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+# 로그인 처리 API
+@app.route('/api/login', methods=['POST'])
+def login():
     token = request.form.get('token', '')
     
     if not token:
         return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
     
-    # 상세 디버깅 정보 수집
-    debug_info = {}
+    is_valid, user_info = validate_token(token)
     
-    # 토큰 형식 확인
-    is_valid_format = token.startswith('hf_')
-    debug_info['token_format'] = 'hf_ 접두사 있음' if is_valid_format else '접두사 없음'
+    if not is_valid or not user_info:
+        return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
     
-    # 직접 API 호출 테스트
-    test_endpoints = [
-        "https://huggingface.co/api/whoami",
-        "https://huggingface.co/api/whoami-v2",
-        "https://huggingface.co/api/models/meta/llama"
-    ]
+    # 사용자 이름 찾기
+    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 = '인증된 사용자'
     
-    endpoint_results = {}
+    # 좋아요 목록 가져오기
+    liked_models = get_liked_repos(token)
     
-    for endpoint in test_endpoints:
-        try:
-            headers = {"Authorization": f"Bearer {token}"}
-            response = requests.get(endpoint, headers=headers, timeout=5)
-            
-            endpoint_results[endpoint] = {
-                'status_code': response.status_code,
-                'success': response.ok,
-                'content_type': response.headers.get('Content-Type', 'unknown'),
-                'response_sample': str(response.text)[:100] + '...' if response.text else 'Empty response'
-            }
-        except Exception as e:
-            endpoint_results[endpoint] = {'error': str(e)}
+    # 세션에 저장
+    session['token'] = token
+    session['username'] = username
+    session['liked_models'] = liked_models
     
-    debug_info['endpoint_tests'] = endpoint_results
+    return jsonify({
+        'success': True, 
+        'username': username,
+        'liked_models': liked_models
+    })
+
+# 로그아웃 처리 API
+@app.route('/api/logout', methods=['POST'])
+def logout():
+    session.pop('token', None)
+    session.pop('username', None)
+    session.pop('liked_models', None)
+    return jsonify({'success': True})
+
+# URL 목록 가져오기 API
+@app.route('/api/urls', methods=['GET'])
+def get_urls():
+    search_query = request.args.get('search', '').lower()
+    show_only_liked = request.args.get('liked', 'false').lower() == 'true'
+    
+    liked_models = session.get('liked_models', {})
+    
+    results = []
+    for url in HUGGINGFACE_URLS:
+        title = extract_title(url)
+        model_info = extract_model_info(url)
+        
+        if not model_info:
+            continue
+        
+        is_liked = model_info['full_id'] in liked_models
+        
+        # 필터링 적용
+        if show_only_liked and not is_liked:
+            continue
+        
+        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
+        })
     
-    # 최종 판단
-    is_valid = any(result.get('success', False) for result in endpoint_results.values())
+    return jsonify(results)
+
+# 좋아요 토글 API
+@app.route('/api/toggle-like', methods=['POST'])
+def api_toggle_like():
+    if 'token' not in session:
+        return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
+    
+    data = request.json
+    url = data.get('url')
+    current_liked = data.get('currentLiked', False)
+    
+    if not url:
+        return jsonify({'success': False, 'message': 'URL이 필요합니다.'})
+    
+    model_info = extract_model_info(url)
+    if not model_info:
+        return jsonify({'success': False, 'message': '유효하지 않은 URL입니다.'})
+    
+    success, status_code = toggle_like(
+        session['token'], 
+        model_info['type'], 
+        model_info['owner'], 
+        model_info['repo'], 
+        current_liked
+    )
+    
+    liked_models = session.get('liked_models', {})
     
+    if success:
+        # 세션의 좋아요 상태 업데이트
+        if current_liked:
+            if model_info['full_id'] in liked_models:
+                del liked_models[model_info['full_id']]
+        else:
+            liked_models[model_info['full_id']] = True
+        
+        session['liked_models'] = liked_models
+        
+        return jsonify({
+            'success': True, 
+            'new_state': not current_liked,
+            'message': f"{'좋아요 취소' if current_liked else '좋아요'} 성공"
+        })
+    else:
+        return jsonify({
+            'success': False, 
+            'message': f"API 오류 (상태 코드: {status_code})"
+        })
+
+# 세션 상태 확인 API
+@app.route('/api/session-status', methods=['GET'])
+def session_status():
     return jsonify({
-        'success': is_valid,
-        'debug_info': debug_info,
-        'message': '토큰이 유효합니다.' if is_valid else '유효하지 않은 토큰입니다.'
+        'logged_in': 'token' in session,
+        'username': session.get('username'),
+        'liked_count': len(session.get('liked_models', {}))
     })
 
-# 기본 홈페이지 (디버깅 화면 포함)
-@app.route('/')
-def home():
-    return render_template('debug_index.html')
-
 if __name__ == '__main__':
     # templates 폴더 생성
     os.makedirs('templates', exist_ok=True)
     
-    # 디버깅용 HTML 생성
-    with open('templates/debug_index.html', 'w', encoding='utf-8') as f:
+    # index.html 파일 생성
+    with open('templates/index.html', 'w', encoding='utf-8') as f:
         f.write('''
 <!DOCTYPE html>
 <html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>허깅페이스 토큰 디버거</title>
+  <title>Hugging Face URL 카드 리스트</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       line-height: 1.6;
       margin: 0;
-      padding: 20px;
-      color: #333;
-    }
-    
-    h1, h2 {
+      padding: 0;
       color: #333;
     }
     
     .container {
-      max-width: 800px;
+      max-width: 1200px;
       margin: 0 auto;
+      padding: 1rem;
     }
     
-    .card {
-      border: 1px solid #ddd;
+    .header {
+      background-color: #f0f0f0;
+      padding: 1rem;
       border-radius: 5px;
-      padding: 20px;
-      margin-bottom: 20px;
-      background-color: #f9f9f9;
+      margin-bottom: 1rem;
+    }
+    
+    .user-controls {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    
+    .filter-controls {
+      background-color: #f8f9fa;
+      padding: 1rem;
+      border-radius: 5px;
+      margin-bottom: 1rem;
     }
     
-    input[type="password"] {
-      width: 100%;
-      padding: 10px;
-      margin: 10px 0;
+    input[type="password"],
+    input[type="text"] {
+      padding: 0.5rem;
       border: 1px solid #ccc;
       border-radius: 4px;
+      margin-right: 5px;
     }
     
     button {
-      padding: 10px 15px;
+      padding: 0.5rem 1rem;
       background-color: #4CAF50;
       color: white;
       border: none;
@@ -166,10 +347,75 @@ if __name__ == '__main__':
       background-color: #45a049;
     }
     
-    .result {
-      margin-top: 20px;
-      padding: 15px;
+    button.logout {
+      background-color: #f44336;
+    }
+    
+    button.logout:hover {
+      background-color: #d32f2f;
+    }
+    
+    .token-help {
+      margin-top: 0.5rem;
+      font-size: 0.8rem;
+      color: #666;
+    }
+    
+    .token-help a {
+      color: #4CAF50;
+      text-decoration: none;
+    }
+    
+    .token-help a:hover {
+      text-decoration: underline;
+    }
+    
+    .cards-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    
+    .card {
+      border: 1px solid #ccc;
       border-radius: 5px;
+      padding: 1rem;
+      width: 300px;
+      box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+      position: relative;
+      background-color: #f9f9f9;
+    }
+    
+    .card a {
+      text-decoration: none;
+      color: #333;
+      word-break: break-all;
+    }
+    
+    .like-button {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      border: none;
+      background: transparent;
+      font-size: 1.5rem;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+    
+    .like-button.liked {
+      color: red;
+    }
+    
+    .like-button.not-liked {
+      color: white;
+      -webkit-text-stroke: 1px #333;
+    }
+    
+    .status-message {
+      padding: 1rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
       display: none;
     }
     
@@ -183,116 +429,376 @@ if __name__ == '__main__':
       color: #a94442;
     }
     
-    pre {
-      background-color: #f5f5f5;
-      padding: 10px;
-      border-radius: 5px;
-      overflow-x: auto;
-      white-space: pre-wrap;
+    .loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(255, 255, 255, 0.7);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      font-size: 1.5rem;
     }
     
-    .loading {
+    .login-section {
+      margin-top: 1rem;
+    }
+    
+    .logged-in-section {
       display: none;
-      margin-top: 10px;
+      margin-top: 1rem;
+    }
+    
+    @media (max-width: 768px) {
+      .user-controls {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      
+      .user-controls > div {
+        margin-bottom: 1rem;
+      }
+      
+      .card {
+        width: 100%;
+      }
     }
   </style>
 </head>
 <body>
   <div class="container">
-    <h1>허깅페이스 토큰 디버거</h1>
-    
-    <div class="card">
-      <h2>토큰 테스트</h2>
-      <p>허깅페이스 API 토큰을 입력하여 유효성을 테스트합니다.</p>
-      
-      <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력 (hf_로 시작)" />
-      <button id="testButton">토큰 테스트</button>
-      
-      <div id="loading" class="loading">테스트 중...</div>
-      
-      <div id="result" class="result">
-        <h3>테스트 결과</h3>
-        <p id="resultMessage"></p>
-        <div id="detailsContainer">
-          <h4>상세 정보</h4>
-          <pre id="resultDetails"></pre>
+    <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>
     </div>
     
-    <div class="card">
-      <h2>디버깅 팁</h2>
-      <ul>
-        <li>토큰은 <code>hf_</code>로 시작해야 합니다.</li>
-        <li>토큰은 공백 없이 입력해야 합니다.</li>
-        <li>토큰이 만료되지 않았는지 확인하세요.</li>
-        <li>토큰에 적절한 권한(최소 READ)이 있는지 확인하세요.</li>
-        <li>네트워크 제한이 있는 환경인지 확인하세요.</li>
-      </ul>
+    <div class="filter-controls">
+      <label>
+        <input type="checkbox" id="showOnlyLiked" />
+        내가 좋아요한 URL만 보기
+      </label>
+      <label style="margin-left: 1rem;">
+        <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" style="width: 250px;" />
+      </label>
     </div>
+    
+    <div id="statusMessage" class="status-message"></div>
+    
+    <div id="loadingIndicator" class="loading">처리 중...</div>
+    
+    <div id="cardsContainer" class="cards-container"></div>
   </div>
   
   <script>
-    // 요소 참조
-    const tokenInput = document.getElementById('tokenInput');
-    const testButton = document.getElementById('testButton');
-    const loading = document.getElementById('loading');
-    const result = document.getElementById('result');
-    const resultMessage = document.getElementById('resultMessage');
-    const resultDetails = document.getElementById('resultDetails');
-    
-    // 토큰 테스트 함수
-    async function testToken() {
-      const token = tokenInput.value.trim();
+    // DOM 요소 참조
+    const elements = {
+      tokenInput: document.getElementById('tokenInput'),
+      loginButton: document.getElementById('loginButton'),
+      logoutButton: document.getElementById('logoutButton'),
+      currentUser: document.getElementById('currentUser'),
+      cardsContainer: document.getElementById('cardsContainer'),
+      loadingIndicator: document.getElementById('loadingIndicator'),
+      statusMessage: document.getElementById('statusMessage'),
+      showOnlyLiked: document.getElementById('showOnlyLiked'),
+      searchInput: document.getElementById('searchInput'),
+      loginSection: document.getElementById('loginSection'),
+      loggedInSection: document.getElementById('loggedInSection')
+    };
+    
+    // 애플리케이션 상태
+    const state = {
+      username: null,
+      likedModels: {},
+      isLoading: false
+    };
+    
+    // 로딩 상태 표시 함수
+    function setLoading(isLoading) {
+      state.isLoading = isLoading;
+      elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
+    }
+    
+    // 상태 메시지 표시 함수
+    function showMessage(message, isError = false) {
+      elements.statusMessage.textContent = message;
+      elements.statusMessage.className = `status-message ${isError ? 'error' : 'success'}`;
+      elements.statusMessage.style.display = 'block';
       
-      if (!token) {
-        alert('토큰을 입력해주세요.');
+      // 3초 후 메시지 사라짐
+      setTimeout(() => {
+        elements.statusMessage.style.display = 'none';
+      }, 3000);
+    }
+    
+    // API 오류 처리 함수
+    async function handleApiResponse(response) {
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`API 오류 (${response.status}): ${errorText}`);
+      }
+      return response.json();
+    }
+    
+    // 세션 상태 확인
+    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';
+          
+          // URL 목록 로드
+          loadUrls();
+        }
+      } catch (error) {
+        console.error('세션 상태 확인 오류:', error);
+      }
+    }
+    
+    // 로그인 처리
+    async function login(token) {
+      if (!token.trim()) {
+        showMessage('토큰을 입력해주세요.', true);
         return;
       }
       
-      // UI 업데이트
-      loading.style.display = 'block';
-      result.style.display = 'none';
+      setLoading(true);
       
       try {
-        // FormData 생성
         const formData = new FormData();
         formData.append('token', token);
         
-        // API 호출
-        const response = await fetch('/api/test-token', {
+        const response = await fetch('/api/login', {
           method: 'POST',
           body: formData
         });
         
-        const data = await response.json();
+        const data = await handleApiResponse(response);
+        
+        if (data.success) {
+          state.username = data.username;
+          state.likedModels = data.liked_models || {};
+          
+          elements.currentUser.textContent = state.username;
+          elements.loginSection.style.display = 'none';
+          elements.loggedInSection.style.display = 'block';
+          
+          showMessage(`${state.username}님으로 로그인되었습니다.`);
+          
+          // URL 목록 로드
+          loadUrls();
+        } else {
+          showMessage(data.message || '로그인에 실패했습니다.', true);
+        }
+      } catch (error) {
+        console.error('로그인 오류:', error);
+        showMessage(`로그인 오류: ${error.message}`, true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    // 로그아웃 처리
+    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;
+          state.likedModels = {};
+          
+          elements.currentUser.textContent = '로그인되지 않음';
+          elements.tokenInput.value = '';
+          elements.loginSection.style.display = 'block';
+          elements.loggedInSection.style.display = 'none';
+          
+          showMessage('로그아웃되었습니다.');
+          
+          // 카드 초기화
+          elements.cardsContainer.innerHTML = '';
+        }
+      } catch (error) {
+        console.error('로그아웃 오류:', error);
+        showMessage(`로그아웃 오류: ${error.message}`, true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    // URL 목록 로드
+    async function loadUrls() {
+      setLoading(true);
+      
+      try {
+        const showOnlyLiked = elements.showOnlyLiked.checked;
+        const searchText = elements.searchInput.value;
+        
+        const response = await fetch(`/api/urls?liked=${showOnlyLiked}&search=${encodeURIComponent(searchText)}`);
+        const urls = await handleApiResponse(response);
+        
+        renderCards(urls);
+      } catch (error) {
+        console.error('URL 목록 로드 오류:', error);
+        showMessage(`URL 로드 오류: ${error.message}`, true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    // 좋아요 토글
+    async function toggleLike(url, button, currentLiked) {
+      if (!state.username) {
+        showMessage('좋아요를 하려면 허깅페이스 API 토큰으로 인증이 필요합니다.', true);
+        return;
+      }
+      
+      setLoading(true);
+      
+      try {
+        const response = await fetch('/api/toggle-like', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            url: url,
+            currentLiked: currentLiked
+          })
+        });
+        
+        const data = await handleApiResponse(response);
         
-        // 결과 표시
-        result.className = `result ${data.success ? 'success' : 'error'}`;
-        resultMessage.textContent = data.message;
-        resultDetails.textContent = JSON.stringify(data.debug_info, null, 2);
-        result.style.display = 'block';
+        if (data.success) {
+          if (currentLiked) {
+            button.classList.remove('liked');
+            button.classList.add('not-liked');
+          } else {
+            button.classList.add('liked');
+            button.classList.remove('not-liked');
+          }
+          
+          showMessage(data.message);
+          
+          // 필터링된 경우 목록 다시 로드
+          if (elements.showOnlyLiked.checked) {
+            loadUrls();
+          }
+        } else {
+          showMessage(data.message, true);
+        }
       } catch (error) {
-        result.className = 'result error';
-        resultMessage.textContent = `오류 발생: ${error.message}`;
-        resultDetails.textContent = error.stack || '상세 정보 없음';
-        result.style.display = 'block';
+        console.error('좋아요 토글 오류:', error);
+        showMessage(`좋아요 처리 오류: ${error.message}`, true);
       } finally {
-        loading.style.display = 'none';
+        setLoading(false);
       }
     }
     
-    // 이벤트 리스너
-    testButton.addEventListener('click', testToken);
-    tokenInput.addEventListener('keypress', (event) => {
+    // 카드 렌더링
+    function renderCards(urls) {
+      elements.cardsContainer.innerHTML = '';
+      
+      if (!urls || urls.length === 0) {
+        const noResultsMsg = document.createElement('p');
+        noResultsMsg.textContent = '표시할 URL이 없습니다.';
+        noResultsMsg.style.padding = '1rem';
+        noResultsMsg.style.fontStyle = 'italic';
+        elements.cardsContainer.appendChild(noResultsMsg);
+        return;
+      }
+      
+      urls.forEach(item => {
+        const { url, title, is_liked } = item;
+        
+        // 카드 생성
+        const card = document.createElement('div');
+        card.className = 'card';
+        
+        // 제목
+        const titleEl = document.createElement('h3');
+        titleEl.textContent = title;
+        card.appendChild(titleEl);
+        
+        // URL 링크
+        const linkEl = document.createElement('a');
+        linkEl.href = url;
+        linkEl.textContent = url;
+        linkEl.target = '_blank';
+        card.appendChild(linkEl);
+        
+        // 좋아요 버튼 (♥ 아이콘)
+        const likeBtn = document.createElement('button');
+        likeBtn.className = `like-button ${is_liked ? 'liked' : 'not-liked'}`;
+        likeBtn.textContent = '♥';
+        
+        likeBtn.addEventListener('click', function(e) {
+          e.preventDefault();
+          toggleLike(url, likeBtn, is_liked);
+        });
+        card.appendChild(likeBtn);
+        
+        // 카드 추가
+        elements.cardsContainer.appendChild(card);
+      });
+    }
+    
+    // 이벤트 리스너 설정
+    elements.loginButton.addEventListener('click', () => {
+      login(elements.tokenInput.value);
+    });
+    
+    elements.logoutButton.addEventListener('click', logout);
+    
+    // 엔터 키로 로그인 가능하게
+    elements.tokenInput.addEventListener('keypress', (event) => {
       if (event.key === 'Enter') {
-        testToken();
+        login(elements.tokenInput.value);
       }
     });
+    
+    // 필터링 이벤트 리스너
+    elements.showOnlyLiked.addEventListener('change', loadUrls);
+    elements.searchInput.addEventListener('input', () => {
+      // 입력 지연 처리 (타이핑할 때마다 API 호출 방지)
+      clearTimeout(state.searchTimeout);
+      state.searchTimeout = setTimeout(loadUrls, 300);
+    });
+    
+    // 초기화
+    checkSessionStatus();
   </script>
 </body>
 </html>
 ''')
     
     # 허깅페이스 스페이스에서는 7860 포트 사용
-    app.run(host='0.0.0.0', port=7860, debug=True)
+    app.run(host='0.0.0.0', port=7860)