app.py

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 목록
HUGGINGFACE_URLS = [
    "https://huggingface.co/spaces/ginipick/Tech_Hangman_Game",
    "https://huggingface.co/spaces/openfree/deepseek_r1_API",
    "https://huggingface.co/spaces/ginipick/open_Deep-Research",
    "https://huggingface.co/spaces/aiqmaster/open-deep-research",
    "https://huggingface.co/spaces/seawolf2357/DeepSeek-R1-32b-search",
    "https://huggingface.co/spaces/ginigen/LLaDA",
    "https://huggingface.co/spaces/VIDraft/PHI4-Multimodal",
    "https://huggingface.co/spaces/ginigen/Ovis2-8B",
    "https://huggingface.co/spaces/ginigen/Graph-Mind",
    "https://huggingface.co/spaces/ginigen/Workflow-Canvas",
    "https://huggingface.co/spaces/ginigen/Design",
    "https://huggingface.co/spaces/ginigen/Diagram",
    "https://huggingface.co/spaces/ginigen/Mockup",
    "https://huggingface.co/spaces/ginigen/Infographic",
    "https://huggingface.co/spaces/ginigen/Flowchart",
    "https://huggingface.co/spaces/aiqcamp/FLUX-Vision",
    "https://huggingface.co/spaces/ginigen/VoiceClone-TTS",
    "https://huggingface.co/spaces/openfree/Perceptron-Network",
    "https://huggingface.co/spaces/openfree/Article-Generator",
]

# 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')

@app.route('/api/login', methods=['POST'])
def login():
    token = request.form.get('token', '')
    
    if not token:
        return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
    
    is_valid, user_info = validate_token(token)
    
    if not is_valid or not user_info:
        return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
    
    # 사용자 이름 찾기
    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
    })

@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 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
        })
    
    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이 필요합니다.'})
    
    # 현재 좋아요 상태 확인
    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': 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():
    return jsonify({
        'logged_in': 'username' in session,
        'username': session.get('username')
    })

if __name__ == '__main__':
    os.makedirs('templates', exist_ok=True)
    
    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>Hugging Face URL 카드 리스트</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f4f5f7;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
    }
    
    .header {
      background-color: #fff;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .user-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    
    .filter-controls {
      background-color: #fff;
      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;
    }
    
    input[type="password"],
    input[type="text"] {
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 5px;
    }
    
    button {
      padding: 0.5rem 1rem;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    button.refresh {
      background-color: #2196F3;
    }
    
    button.refresh:hover {
      background-color: #0b7dda;
    }
    
    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 #ddd;
      border-radius: 8px;
      padding: 1rem;
      width: 300px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: relative;
      background-color: #fff;
      transition: all 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .card.liked {
      border-color: #ff4757;
      background-color: #ffebee;
    }
    
    .card-header {
      margin-bottom: 0.5rem;
      padding-right: 40px; /* 좋아요 버튼 공간 */
    }
    
    .card-title {
      font-size: 1.2rem;
      margin: 0 0 0.5rem 0;
      color: #333;
    }
    
    .card a {
      text-decoration: none;
      color: #2980b9;
      word-break: break-all;
      display: block;
      font-size: 0.9rem;
    }
    
    .card a:hover {
      text-decoration: underline;
    }
    
    .like-button {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      background: transparent;
      font-size: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #ddd;
    }
    
    .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;
    }
    
    .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;
      display: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 1000;
      max-width: 300px;
    }
    
    .success {
      background-color: #4CAF50;
      color: white;
    }
    
    .error {
      background-color: #f44336;
      color: white;
    }
    
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      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;
    }
    
    .logged-in-section {
      display: none;
      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;
        align-items: flex-start;
      }
      
      .user-controls > div {
        margin-bottom: 1rem;
      }
      
      .filter-controls {
        flex-direction: column;
      }
      
      .filter-controls > div {
        margin-bottom: 0.5rem;
      }
      
      .card {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="user-controls">
        <div>
          <span>허깅페이스 계정: </span>
          <span id="currentUser">로그인되지 않음</span>
        </div>
        
        <div id="loginSection" class="login-section">
          <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
          <button id="loginButton">인증하기</button>
          <div class="token-help">
            API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
          </div>
        </div>
        
        <div id="loggedInSection" class="logged-in-section">
          <button id="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>
    
    <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 id="statusMessage" class="status-message"></div>
    
    <div id="loadingIndicator" class="loading">
      <div class="spinner"></div>
    </div>
    
    <div id="cardsContainer" class="cards-container"></div>
  </div>
  
  <script>
    // DOM 요소 참조
    const elements = {
      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'),
      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')
    };
    
    // 애플리케이션 상태
    const state = {
      username: null,
      allURLs: [],
      isLoading: false,
      viewMode: 'all' // 'all' 또는 'liked'
    };
    
    // 로딩 상태 표시 함수
    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';
      
      // 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();
    }
    
    // 좋아요 통계 업데이트
    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;
    }
    
    // 세션 상태 확인
    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';
          elements.likeStatus.style.display = 'block';
          
          // URL 목록 로드
          loadUrls();
        }
      } catch (error) {
        console.error('세션 상태 확인 오류:', error);
      }
    }
    
    // 로그인 처리
    async function login(token) {
      if (!token.trim()) {
        showMessage('토큰을 입력해주세요.', true);
        return;
      }
      
      setLoading(true);
      
      try {
        const formData = new FormData();
        formData.append('token', token);
        
        const response = await fetch('/api/login', {
          method: 'POST',
          body: formData
        });
        
        const data = await handleApiResponse(response);
        
        if (data.success) {
          state.username = data.username;
          
          elements.currentUser.textContent = state.username;
          elements.loginSection.style.display = 'none';
          elements.loggedInSection.style.display = 'block';
          elements.likeStatus.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.allURLs = [];
          
          elements.currentUser.textContent = '로그인되지 않음';
          elements.tokenInput.value = '';
          elements.loginSection.style.display = 'block';
          elements.loggedInSection.style.display = 'none';
          elements.likeStatus.style.display = 'none';
          
          showMessage('로그아웃되었습니다.');
          
          // 카드 초기화
          elements.cardsContainer.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);
      } finally {
        setLoading(false);
      }
    }
    
    // URL 목록 로드
    async function loadUrls() {
      setLoading(true);
      
      try {
        const response = await fetch('/api/urls');
        const data = await handleApiResponse(response);
        
        state.allURLs = data;
        updateLikeStats();
        renderCards();
      } catch (error) {
        console.error('URL 목록 로드 오류:', error);
        showMessage(`URL 목록 로드 오류: ${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();
            renderCards();
          }
          
          showMessage(data.message);
        } else {
          showMessage(data.message || '좋아요 상태 변경에 실패했습니다.', true);
        }
      } catch (error) {
        console.error('좋아요 토글 오류:', error);
        showMessage(`좋아요 토글 오류: ${error.message}`, true);
      }
    }
    
    // 카드 렌더링
    function renderCards() {
      elements.cardsContainer.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.cardsContainer.appendChild(emptyMessage);
        return;
      }
      
      // 카드 생성
      urlsToShow.forEach(item => {
        const card = document.createElement('div');
        card.className = `card ${item.is_liked ? 'liked' : ''}`;
        
        if (item.is_liked) {
          const badge = document.createElement('div');
          badge.className = 'like-badge';
          badge.textContent = '좋아요';
          card.appendChild(badge);
        }
        
        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>
        `;
        
        card.innerHTML = cardContent;
        elements.cardsContainer.appendChild(card);
        
        // 좋아요 버튼 이벤트 추가
        const likeButton = card.querySelector('.like-button');
        likeButton.addEventListener('click', (e) => {
          e.preventDefault();
          const url = e.target.dataset.url;
          toggleLike(url);
        });
      });
    }
    
    // 이벤트 리스너 등록
    function registerEventListeners() {
      // 로그인 버튼
      elements.loginButton.addEventListener('click', () => {
        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', 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();
      });
    }
    
    // 초기화 함수
    function init() {
      registerEventListeners();
      checkSessionStatus();
    }
    
    // 애플리케이션 초기화
    init();
  </script>
</body>
</html>
'''
    )
    
    app.run(debug=True, host='0.0.0.0', port=7860)