Update app.py

app.py

@@ -1,41 +1,162 @@
 from flask import Flask, render_template, request, 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)
 
-# Hugging Face URL 목록 - 일부 URL은 미리 좋아요 상태로 설정
-# 'is_liked'를 true로 설정한 URL은 항상 좋아요 상태로 표시됨
+# Hugging Face URL 목록
 HUGGINGFACE_URLS = [
-    {"url": "https://huggingface.co/spaces/ginipick/Tech_Hangman_Game", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/openfree/deepseek_r1_API", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginipick/open_Deep-Research", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/aiqmaster/open-deep-research", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/seawolf2357/DeepSeek-R1-32b-search", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/ginigen/LLaDA", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/VIDraft/PHI4-Multimodal", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/ginigen/Ovis2-8B", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginigen/Graph-Mind", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/ginigen/Workflow-Canvas", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginigen/Design", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/ginigen/Diagram", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginigen/Mockup", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/ginigen/Infographic", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginigen/Flowchart", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/aiqcamp/FLUX-Vision", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/ginigen/VoiceClone-TTS", "is_liked": True},
-    {"url": "https://huggingface.co/spaces/openfree/Perceptron-Network", "is_liked": False},
-    {"url": "https://huggingface.co/spaces/openfree/Article-Generator", "is_liked": True},
+    "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",
 ]
 
+# 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:
+        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):
+    headers = {"Authorization": f"Bearer {token}"}
+    
+    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"
+    }
+    
+    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
+    
+    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
+    
+    return like_status
+
 @app.route('/')
 def home():
     return render_template('index.html')
@@ -47,16 +168,36 @@ def login():
     if not token:
         return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
     
-    # 간단히 토큰 길이만 검사 (실제로는 더 복잡한 검증 필요)
-    if len(token) < 5:
+    is_valid, user_info = validate_token(token)
+    
+    if not is_valid or not user_info:
         return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
     
-    # 토큰의 첫 글자를 사용자 이름으로 설정 (테스트용)
-    username = f"사용자_{token[:3]}"
+    # 사용자 이름 찾기
+    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 = '인증된 사용자'
     
     # 세션에 저장
+    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
@@ -64,20 +205,30 @@ def login():
 
 @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})
 
 @app.route('/api/urls', methods=['GET'])
 def get_urls():
+    like_status = session.get('like_status', {})
+    
     results = []
-    for url_item in HUGGINGFACE_URLS:
-        url = url_item["url"]
-        is_liked = url_item["is_liked"]
+    for url in HUGGINGFACE_URLS:
         title = extract_title(url)
+        model_info = extract_model_info(url)
+        
+        if not model_info:
+            continue
+        
+        # 좋아요 상태 확인
+        is_liked = like_status.get(url, False)
         
         results.append({
             'url': url,
             'title': title,
+            'model_info': model_info,
             'is_liked': is_liked
         })
     
@@ -85,7 +236,7 @@ def get_urls():
 
 @app.route('/api/toggle-like', methods=['POST'])
 def toggle_like():
-    if 'username' not in session:
+    if 'token' not in session:
         return jsonify({'success': False, 'message': '로그인이 필요합니다.'})
     
     data = request.json
@@ -94,19 +245,42 @@ def toggle_like():
     if not url:
         return jsonify({'success': False, 'message': 'URL이 필요합니다.'})
     
-    # URL 목록에서 해당 URL 찾기
-    for url_item in HUGGINGFACE_URLS:
-        if url_item["url"] == url:
-            # 좋아요 상태 토글
-            url_item["is_liked"] = not url_item["is_liked"]
-            
-            return jsonify({
-                'success': True,
-                'is_liked': url_item["is_liked"],
-                'message': '좋아요를 추가했습니다.' if url_item["is_liked"] else '좋아요를 취소했습니다.'
-            })
+    # 현재 좋아요 상태 확인
+    like_status = session.get('like_status', {})
+    current_status = like_status.get(url, False)
+    
+    # 실제로는 여기서 허깅페이스 API를 호출하여 좋아요 상태를 변경해야 합니다
+    # 현재는 예시로 세션에만 상태를 저장합니다
+    like_status[url] = not current_status
+    session['like_status'] = like_status
     
-    return jsonify({'success': False, 'message': '해당 URL을 찾을 수 없습니다.'})
+    return jsonify({
+        'success': True,
+        'is_liked': like_status[url],
+        'message': '좋아요를 추가했습니다.' if like_status[url] else '좋아요를 취소했습니다.'
+    })
+
+@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)}'
+        })
 
 @app.route('/api/session-status', methods=['GET'])
 def session_status():
@@ -190,6 +364,14 @@ if __name__ == '__main__':
       background-color: #45a049;
     }
     
+    button.refresh {
+      background-color: #2196F3;
+    }
+    
+    button.refresh:hover {
+      background-color: #0b7dda;
+    }
+    
     button.logout {
       background-color: #f44336;
     }
@@ -387,6 +569,14 @@ 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;
+    }
+    
     @media (max-width: 768px) {
       .user-controls {
         flex-direction: column;
@@ -429,11 +619,16 @@ if __name__ == '__main__':
         </div>
         
         <div id="loggedInSection" class="logged-in-section">
+          <button id="refreshButton" class="refresh">새로고침</button>
           <button id="logoutButton" class="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>
@@ -463,6 +658,7 @@ if __name__ == '__main__':
       tokenInput: document.getElementById('tokenInput'),
       loginButton: document.getElementById('loginButton'),
       logoutButton: document.getElementById('logoutButton'),
+      refreshButton: document.getElementById('refreshButton'),
       currentUser: document.getElementById('currentUser'),
       cardsContainer: document.getElementById('cardsContainer'),
       loadingIndicator: document.getElementById('loadingIndicator'),
@@ -619,63 +815,54 @@ if __name__ == '__main__':
       }
     }
     
-    // URL 목록 로드
-    async function loadUrls() {
+    // 좋아요 상태 새로고침
+    async function refreshLikes() {
       setLoading(true);
       
       try {
-        const response = await fetch('/api/urls');
-        const urls = await handleApiResponse(response);
-        
-        // URL 및 좋아요 상태 저장
-        state.allURLs = urls;
+        const response = await fetch('/api/refresh-likes', {
+          method: 'POST'
+        });
         
-        // 필터링 및 렌더링
-        filterAndRenderCards();
+        const data = await handleApiResponse(response);
         
-        // 좋아요 통계 업데이트
-        updateLikeStats();
+
+        if (data.success) {
+          // URL 목록 다시 로드
+          loadUrls();
+          showMessage('좋아요 상태가 새로고침되었습니다.');
+        } else {
+          showMessage(data.message || '좋아요 상태 새로고침에 실패했습니다.', true);
+        }
       } catch (error) {
-        console.error('URL 목록 로드 오류:', error);
-        showMessage(`URL 로드 오류: ${error.message}`, true);
+        console.error('좋아요 상태 새로고침 오류:', error);
+        showMessage(`좋아요 상태 새로고침 오류: ${error.message}`, true);
       } finally {
         setLoading(false);
       }
     }
     
-    // 필터링 및 카드 렌더링
-    function filterAndRenderCards() {
-      const searchText = elements.searchInput.value.toLowerCase();
+    // URL 목록 로드
+    async function loadUrls() {
+      setLoading(true);
       
-      // 필터링 적용
-      const filteredUrls = state.allURLs.filter(item => {
-        const { url, title, is_liked } = item;
-        
-        // 좋아요 필터링 (좋아요만 보기 모드)
-        if (state.viewMode === 'liked' && !is_liked) {
-          return false;
-        }
-        
-        // 검색 필터링
-        if (searchText && !url.toLowerCase().includes(searchText) && !title.toLowerCase().includes(searchText)) {
-          return false;
-        }
+      try {
+        const response = await fetch('/api/urls');
+        const data = await handleApiResponse(response);
         
-        return true;
-      });
-      
-      renderCards(filteredUrls);
+        state.allURLs = data;
+        updateLikeStats();
+        renderCards();
+      } catch (error) {
+        console.error('URL 목록 로드 오류:', error);
+        showMessage(`URL 목록 로드 오류: ${error.message}`, true);
+      } finally {
+        setLoading(false);
+      }
     }
     
     // 좋아요 토글
-    async function toggleLike(url, card) {
-      if (!state.username) {
-        showMessage('좋아요를 하려면 허깅페이스 API 토큰으로 인증이 필요합니다.', true);
-        return;
-      }
-      
-      setLoading(true);
-      
+    async function toggleLike(url) {
       try {
         const response = await fetch('/api/toggle-like', {
           method: 'POST',
@@ -688,164 +875,152 @@ if __name__ == '__main__':
         const data = await handleApiResponse(response);
         
         if (data.success) {
-          // 상태 객체에서 URL 찾기
-          const urlItem = state.allURLs.find(item => item.url === url);
-          if (urlItem) {
-            // 좋아요 상태 업데이트
-            urlItem.is_liked = data.is_liked;
-            
-            // 카드 UI 업데이트
-            if (data.is_liked) {
-              card.classList.add('liked');
-              const likeBtn = card.querySelector('.like-button');
-              if (likeBtn) likeBtn.classList.add('liked');
-              
-              // 좋아요 배지 추가
-              if (!card.querySelector('.like-badge')) {
-                const likeBadge = document.createElement('div');
-                likeBadge.className = 'like-badge';
-                likeBadge.textContent = '좋아요';
-                card.appendChild(likeBadge);
-              }
-            } else {
-              card.classList.remove('liked');
-              const likeBtn = card.querySelector('.like-button');
-              if (likeBtn) likeBtn.classList.remove('liked');
-              
-              // 좋아요 배지 제거
-              const likeBadge = card.querySelector('.like-badge');
-              if (likeBadge) card.removeChild(likeBadge);
-            }
+          // URL 객체 찾기
+          const urlObj = state.allURLs.find(item => item.url === url);
+          if (urlObj) {
+            urlObj.is_liked = data.is_liked;
+            updateLikeStats();
+            renderCards();
           }
           
           showMessage(data.message);
-          
-          // 좋아요 통계 업데이트
-          updateLikeStats();
-          
-          // 좋아요만 보기 모드인 경우 목록 다시 필터링
-          if (state.viewMode === 'liked') {
-            filterAndRenderCards();
-          }
         } else {
-          showMessage(data.message || '좋아요 처리에 실패했습니다.', true);
+          showMessage(data.message || '좋아요 상태 변경에 실패했습니다.', true);
         }
       } catch (error) {
         console.error('좋아요 토글 오류:', error);
-        showMessage(`좋아요 처리 오류: ${error.message}`, true);
-      } finally {
-        setLoading(false);
+        showMessage(`좋아요 토글 오류: ${error.message}`, true);
       }
     }
     
     // 카드 렌더링
-    function renderCards(urls) {
+    function renderCards() {
       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);
+      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.cardsContainer.appendChild(emptyMessage);
         return;
       }
       
-      urls.forEach(item => {
-        const { url, title, is_liked } = item;
-        
-        // 카드 생성
+      // 카드 생성
+      urlsToShow.forEach(item => {
         const card = document.createElement('div');
-        card.className = `card ${is_liked ? 'liked' : ''}`;
-        
-        // 카드 헤더
-        const cardHeader = document.createElement('div');
-        cardHeader.className = 'card-header';
+        card.className = `card ${item.is_liked ? 'liked' : ''}`;
         
-        // 제목
-        const titleEl = document.createElement('h3');
-        titleEl.className = 'card-title';
-        titleEl.textContent = title;
-        cardHeader.appendChild(titleEl);
-        
-        card.appendChild(cardHeader);
+        if (item.is_liked) {
+          const badge = document.createElement('div');
+          badge.className = 'like-badge';
+          badge.textContent = '좋아요';
+          card.appendChild(badge);
+        }
         
-        // URL 링크
-        const linkEl = document.createElement('a');
-        linkEl.href = url;
-        linkEl.textContent = url;
-        linkEl.target = '_blank';
-        card.appendChild(linkEl);
+        const cardContent = `
+          <div class="card-header">
+            <h3 class="card-title">${item.title}</h3>
+            <button class="like-button ${item.is_liked ? 'liked' : ''}" data-url="${item.url}">
+              ❤
+            </button>
+          </div>
+          <div class="card-body">
+            <a href="${item.url}" target="_blank">${item.url}</a>
+            <div style="margin-top: 0.5rem;">
+              <span>소유자: ${item.model_info.owner}</span>
+            </div>
+            <div>
+              <span>저장소: ${item.model_info.repo}</span>
+            </div>
+            <div>
+              <span>유형: ${item.model_info.type}</span>
+            </div>
+          </div>
+        `;
         
-        // 좋아요 버튼
-        const likeBtn = document.createElement('button');
-        likeBtn.className = `like-button ${is_liked ? 'liked' : ''}`;
-        likeBtn.innerHTML = '♥';
-        likeBtn.title = is_liked ? '좋아요 취소' : '좋아요';
+        card.innerHTML = cardContent;
+        elements.cardsContainer.appendChild(card);
         
-        likeBtn.addEventListener('click', (e) => {
+        // 좋아요 버튼 이벤트 추가
+        const likeButton = card.querySelector('.like-button');
+        likeButton.addEventListener('click', (e) => {
           e.preventDefault();
-          toggleLike(url, card);
+          const url = e.target.dataset.url;
+          toggleLike(url);
         });
-        
-        card.appendChild(likeBtn);
-        
-        // 좋아요 배지 (좋아요 상태일 때만)
-        if (is_liked) {
-          const likeBadge = document.createElement('div');
-          likeBadge.className = 'like-badge';
-          likeBadge.textContent = '좋아요';
-          card.appendChild(likeBadge);
-        }
-        
-        // 카드 추가
-        elements.cardsContainer.appendChild(card);
       });
     }
     
-    // 뷰 모드 변경
-    function changeViewMode(mode) {
-      state.viewMode = mode;
+    // 이벤트 리스너 등록
+    function registerEventListeners() {
+      // 로그인 버튼
+      elements.loginButton.addEventListener('click', () => {
+        login(elements.tokenInput.value);
+      });
       
-      // 버튼 활성화 상태 업데이트
-      elements.allUrlsBtn.classList.toggle('active', mode === 'all');
-      elements.likedUrlsBtn.classList.toggle('active', mode === 'liked');
+      // 엔터 키로 로그인
+      elements.tokenInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          login(elements.tokenInput.value);
+        }
+      });
+      
+      // 로그아웃 버튼
+      elements.logoutButton.addEventListener('click', logout);
+      
+      // 새로고침 버튼
+      elements.refreshButton.addEventListener('click', refreshLikes);
       
-      // 카드 다시 렌더링
-      filterAndRenderCards();
+      // 검색 입력 필드
+      elements.searchInput.addEventListener('input', renderCards);
+      
+      // 필터 버튼 - 전체 보기
+      elements.allUrlsBtn.addEventListener('click', () => {
+        elements.allUrlsBtn.classList.add('active');
+        elements.likedUrlsBtn.classList.remove('active');
+        state.viewMode = 'all';
+        renderCards();
+      });
+      
+      // 필터 버튼 - 좋아요만 보기
+      elements.likedUrlsBtn.addEventListener('click', () => {
+        elements.likedUrlsBtn.classList.add('active');
+        elements.allUrlsBtn.classList.remove('active');
+        state.viewMode = 'liked';
+        renderCards();
+      });
     }
     
-// 이벤트 리스너 설정
-    elements.loginButton.addEventListener('click', () => {
-      login(elements.tokenInput.value);
-    });
-    
-    elements.logoutButton.addEventListener('click', logout);
-    
-    // 엔터 키로 로그인 가능하게
-    elements.tokenInput.addEventListener('keypress', (event) => {
-      if (event.key === 'Enter') {
-        login(elements.tokenInput.value);
-      }
-    });
-    
-    // 검색 이벤트 리스너
-    elements.searchInput.addEventListener('input', () => {
-      // 디바운싱 (입력 지연 처리)
-      clearTimeout(state.searchTimeout);
-      state.searchTimeout = setTimeout(filterAndRenderCards, 300);
-    });
-    
-    // 필터 버튼 이벤트 리스너
-    elements.allUrlsBtn.addEventListener('click', () => changeViewMode('all'));
-    elements.likedUrlsBtn.addEventListener('click', () => changeViewMode('liked'));
+    // 초기화 함수
+    function init() {
+      registerEventListeners();
+      checkSessionStatus();
+    }
     
-    // 초기화
-    checkSessionStatus();
+    // 애플리케이션 초기화
+    init();
   </script>
 </body>
 </html>
-''')
+'''
+    )
     
-    # 허깅페이스 스페이스에서는 7860 포트 사용
-    app.run(host='0.0.0.0', port=7860)
+    app.run(debug=True, host='0.0.0.0', port=5000)