app.py

from flask import Flask, render_template, request, redirect, url_for, jsonify, session
import requests
import os
from datetime import timedelta

app = Flask(__name__)
app.secret_key = os.urandom(24)  # Session encryption key
app.permanent_session_lifetime = timedelta(days=7)  # Session duration

# Huggingface URL list
HUGGINGFACE_URLS = [
    "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",
]

# Transform Huggingface URL to direct space URL
def transform_url(url):
    prefix = "https://huggingface.co/spaces/"
    if url.startswith(prefix):
        rest = url[len(prefix):]
        return f"https://{rest.replace('/', '-')}.hf.space"
    return 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:
        print(f"whoami-v2 token validation error: {e}")
    
    # Try the original whoami endpoint
    try:
        response = requests.get("https://huggingface.co/api/whoami", headers=headers)
        if response.ok:
            return True, response.json()
    except Exception as e:
        print(f"whoami token validation error: {e}")
    
    return False, None

# Homepage route
@app.route('/')
def home():
    return render_template('index.html')

# Login API
@app.route('/api/login', methods=['POST'])
def login():
    token = request.form.get('token', '')
    
    if not token:
        return jsonify({'success': False, 'message': '토큰을 입력해주세요.'})
    
    is_valid, user_info = validate_token(token)
    
    if not is_valid or not user_info:
        return jsonify({'success': False, 'message': '유효하지 않은 토큰입니다.'})
    
    # Find username
    username = None
    if 'name' in user_info:
        username = user_info['name']
    elif 'user' in user_info and 'username' in user_info['user']:
        username = user_info['user']['username']
    elif 'username' in user_info:
        username = user_info['username']
    else:
        username = '인증된 사용자'
    
    # Save to session
    session['token'] = token
    session['username'] = username
    
    return jsonify({
        'success': True, 
        'username': username
    })

# Logout API
@app.route('/api/logout', methods=['POST'])
def logout():
    session.pop('token', None)
    session.pop('username', None)
    return jsonify({'success': True})

# URL list API
@app.route('/api/urls', methods=['GET'])
def get_urls():
    search_query = request.args.get('search', '').lower()
    
    results = []
    for url in HUGGINGFACE_URLS:
        title = extract_title(url)
        transformed_url = transform_url(url)
        
        if search_query and search_query not in url.lower() and search_query not in title.lower():
            continue
        
        results.append({
            'url': url,
            'embedUrl': transformed_url,
            'title': title
        })
    
    return jsonify(results)

# Session status API
@app.route('/api/session-status', methods=['GET'])
def session_status():
    return jsonify({
        'logged_in': 'token' in session,
        'username': session.get('username')
    })

if __name__ == '__main__':
    # Create templates folder
    os.makedirs('templates', exist_ok=True)
    
    # Create index.html file
    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>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f5f8fa;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1rem;
    }
    
    .header {
      background-color: #ffffff;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .user-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    
    .filter-controls {
      background-color: #ffffff;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    input[type="password"],
    input[type="text"] {
      padding: 0.7rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 5px;
      font-size: 1rem;
      width: 250px;
    }
    
    button {
      padding: 0.7rem 1.2rem;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.2s;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    button.logout {
      background-color: #f44336;
    }
    
    button.logout:hover {
      background-color: #d32f2f;
    }
    
    .token-help {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #666;
    }
    
    .token-help a {
      color: #4CAF50;
      text-decoration: none;
    }
    
    .token-help a:hover {
      text-decoration: underline;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      gap: 1.5rem;
    }
    
    .grid-item {
      background-color: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      height: 600px;
    }
    
    .grid-header {
      padding: 0.8rem;
      border-bottom: 1px solid #eee;
      background-color: #f9f9f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .grid-header h3 {
      margin: 0;
      padding: 0;
      font-size: 1.1rem;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .open-link {
      color: #4CAF50;
      text-decoration: none;
      font-size: 0.9rem;
    }
    
    .grid-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    
    .grid-content iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .status-message {
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      display: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .success {
      background-color: #dff0d8;
      color: #3c763d;
    }
    
    .error {
      background-color: #f2dede;
      color: #a94442;
    }
    
    .loading {
      position: fixed;
      top: 0;
      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;
      font-size: 1.5rem;
    }
    
    .loading-spinner {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #4CAF50;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .login-section {
      margin-top: 1rem;
    }
    
    .logged-in-section {
      display: none;
      margin-top: 1rem;
    }
    
    @media (max-width: 768px) {
      .user-controls {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .user-controls > div {
        margin-bottom: 1rem;
      }
      
      .grid-container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="user-controls">
        <div>
          <span>허깅페이스 계정: </span>
          <span id="currentUser">로그인되지 않음</span>
        </div>
        
        <div id="loginSection" class="login-section">
          <input type="password" id="tokenInput" placeholder="허깅페이스 API 토큰 입력" />
          <button id="loginButton">인증하기</button>
          <div class="token-help">
            API 토큰은 <a href="https://huggingface.co/settings/tokens" target="_blank">허깅페이스 토큰 페이지</a>에서 생성할 수 있습니다.
          </div>
        </div>
        
        <div id="loggedInSection" class="logged-in-section">
          <button id="logoutButton" class="logout">로그아웃</button>
        </div>
      </div>
    </div>
    
    <div class="filter-controls">
      <input type="text" id="searchInput" placeholder="URL 또는 제목으로 검색" />
    </div>
    
    <div id="statusMessage" class="status-message"></div>
    
    <div id="gridContainer" class="grid-container"></div>
  </div>
  
  <div id="loadingIndicator" class="loading">
    <div class="loading-spinner"></div>
  </div>
  
  <script>
    // DOM element references
    const elements = {
      tokenInput: document.getElementById('tokenInput'),
      loginButton: document.getElementById('loginButton'),
      logoutButton: document.getElementById('logoutButton'),
      currentUser: document.getElementById('currentUser'),
      gridContainer: document.getElementById('gridContainer'),
      loadingIndicator: document.getElementById('loadingIndicator'),
      statusMessage: document.getElementById('statusMessage'),
      searchInput: document.getElementById('searchInput'),
      loginSection: document.getElementById('loginSection'),
      loggedInSection: document.getElementById('loggedInSection')
    };
    
    // Application state
    const state = {
      username: null,
      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';
      
      // Hide message after 3 seconds
      setTimeout(() => {
        elements.statusMessage.style.display = 'none';
      }, 3000);
    }
    
    // API error handling
    async function handleApiResponse(response) {
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`API 오류 (${response.status}): ${errorText}`);
      }
      return response.json();
    }
    
    // Check session status
    async function checkSessionStatus() {
      try {
        const response = await fetch('/api/session-status');
        const data = await handleApiResponse(response);
        
        if (data.logged_in) {
          state.username = data.username;
          elements.currentUser.textContent = data.username;
          elements.loginSection.style.display = 'none';
          elements.loggedInSection.style.display = 'block';
          
          // Load URL list
          loadUrls();
        }
      } catch (error) {
        console.error('세션 상태 확인 오류:', error);
      }
    }
    
    // Login process
    async function login(token) {
      if (!token.trim()) {
        showMessage('토큰을 입력해주세요.', true);
        return;
      }
      
      setLoading(true);
      
      try {
        const formData = new FormData();
        formData.append('token', token);
        
        const response = await fetch('/api/login', {
          method: 'POST',
          body: formData
        });
        
        const data = await handleApiResponse(response);
        
        if (data.success) {
          state.username = data.username;
          
          elements.currentUser.textContent = state.username;
          elements.loginSection.style.display = 'none';
          elements.loggedInSection.style.display = 'block';
          
          showMessage(`${state.username}님으로 로그인되었습니다.`);
          
          // Load URL list
          loadUrls();
        } else {
          showMessage(data.message || '로그인에 실패했습니다.', true);
        }
      } catch (error) {
        console.error('로그인 오류:', error);
        showMessage(`로그인 오류: ${error.message}`, true);
      } finally {
        setLoading(false);
      }
    }
    
    // Logout process
    async function logout() {
      setLoading(true);
      
      try {
        const response = await fetch('/api/logout', {
          method: 'POST'
        });
        
        const data = await handleApiResponse(response);
        
        if (data.success) {
          state.username = null;
          
          elements.currentUser.textContent = '로그인되지 않음';
          elements.tokenInput.value = '';
          elements.loginSection.style.display = 'block';
          elements.loggedInSection.style.display = 'none';
          
          showMessage('로그아웃되었습니다.');
          
          // Clear grid
          elements.gridContainer.innerHTML = '';
        }
      } catch (error) {
        console.error('로그아웃 오류:', error);
        showMessage(`로그아웃 오류: ${error.message}`, true);
      } finally {
        setLoading(false);
      }
    }
    
    // Load URL list
    async function loadUrls() {
      setLoading(true);
      
      try {
        const searchText = elements.searchInput.value;
        
        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);
      } finally {
        setLoading(false);
      }
    }
    
    // Render grid
    function renderGrid(urls) {
      elements.gridContainer.innerHTML = '';
      
      if (!urls || urls.length === 0) {
        const noResultsMsg = document.createElement('p');
        noResultsMsg.textContent = '표시할 URL이 없습니다.';
        noResultsMsg.style.padding = '1rem';
        noResultsMsg.style.fontStyle = 'italic';
        elements.gridContainer.appendChild(noResultsMsg);
        return;
      }
      
      urls.forEach(item => {
        const { url, embedUrl, title } = item;
        
        // Create grid item
        const gridItem = document.createElement('div');
        gridItem.className = 'grid-item';
        
        // Header with title and link
        const header = document.createElement('div');
        header.className = 'grid-header';
        
        const titleEl = document.createElement('h3');
        titleEl.textContent = title;
        header.appendChild(titleEl);
        
        const linkEl = document.createElement('a');
        linkEl.href = url;
        linkEl.target = '_blank';
        linkEl.className = 'open-link';
        linkEl.textContent = '새 창에서 열기';
        header.appendChild(linkEl);
        
        // Add header to grid item
        gridItem.appendChild(header);
        
        // Content with iframe
        const content = document.createElement('div');
        content.className = 'grid-content';
        
        // Create iframe to display the content
        const iframe = document.createElement('iframe');
        iframe.src = embedUrl;
        iframe.title = title;
        iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi';
        iframe.setAttribute('allowfullscreen', '');
        iframe.setAttribute('frameborder', '0');
        iframe.loading = 'lazy'; // Lazy load iframes for better performance
        
        content.appendChild(iframe);
        
        // Add content to grid item
        gridItem.appendChild(content);
        
        // Add grid item to container
        elements.gridContainer.appendChild(gridItem);
      });
    }
    
    // Event listeners
    elements.loginButton.addEventListener('click', () => {
      login(elements.tokenInput.value);
    });
    
    elements.logoutButton.addEventListener('click', logout);
    
    // Login with Enter key
    elements.tokenInput.addEventListener('keypress', (event) => {
      if (event.key === 'Enter') {
        login(elements.tokenInput.value);
      }
    });
    
    // Filter event listener
    elements.searchInput.addEventListener('input', () => {
      // Debounce input to prevent API calls on every keystroke
      clearTimeout(state.searchTimeout);
      state.searchTimeout = setTimeout(loadUrls, 300);
    });
    
    // Initialize
    checkSessionStatus();
  </script>
</body>
</html>
''')
    
    # Use port 7860 for Huggingface Spaces
    app.run(host='0.0.0.0', port=7860)