Space-Leaderboard

Sleeping

App Files Files Community

seawolf2357 commited on Mar 12

Commit

1bba99b

verified ·

1 Parent(s): 7ff41f1

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +828 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,828 @@

+# app.py의 __main__ 부분 수정 (index.html 템플릿 생성 부분)
+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: 1600px;
+      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;
+    }
+    /* 그리드 레이아웃 스타일 */
+    .grid-container {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1rem;
+    }
+    .grid-item {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      background-color: #fff;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: all 0.3s ease;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .grid-item:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    }
+    .grid-item.liked {
+      border-color: #ff4757;
+      background-color: #ffebee;
+    }
+    .grid-header {
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid #eee;
+      position: relative;
+    }
+    .grid-title {
+      font-size: 1rem;
+      margin: 0;
+      padding-right: 30px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .grid-content {
+      flex: 1;
+      position: relative;
+      height: 300px;
+    }
+    .iframe-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .iframe-container iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+    .like-button {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      border: none;
+      background: transparent;
+      font-size: 1.2rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      color: #ddd;
+      padding: 0;
+    }
+    .like-button:hover {
+      transform: scale(1.2);
+    }
+    .like-button.liked {
+      color: #ff4757;
+    }
+    .like-badge {
+      position: absolute;
+      top: -5px;
+      left: -5px;
+      background-color: #ff4757;
+      color: white;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      z-index: 10;
+    }
+    .like-status {
+      background-color: #fff;
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      display: none;
+    }
+    .like-status strong {
+      color: #ff4757;
+    }
+    .status-message {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      padding: 1rem;
+      border-radius: 8px;
+      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;
+    }
+    .view-toggle {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .view-toggle button {
+      margin-left: 0.5rem;
+    }
+    /* 반응형 설정 */
+    @media (max-width: 1400px) {
+      .grid-container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    @media (max-width: 1024px) {
+      .grid-container {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    @media (max-width: 768px) {
+      .user-controls {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .user-controls > div {
+        margin-bottom: 1rem;
+      }
+      .filter-controls {
+        flex-direction: column;
+      }
+      .filter-controls > div {
+        margin-bottom: 0.5rem;
+      }
+      .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="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 class="view-toggle">
+      <div>
+        <input type="checkbox" id="embedToggle" checked />
+        <label for="embedToggle">URL 임베딩 보기</label>
+      </div>
+    </div>
+    <div id="statusMessage" class="status-message"></div>
+    <div id="loadingIndicator" class="loading">
+      <div class="spinner"></div>
+    </div>
+    <div id="gridContainer" class="grid-container"></div>
+  </div>
+  <script>
+    // DOM 요소 참조
+    const elements = {
+      tokenInput: document.getElementById('tokenInput'),
+      loginButton: document.getElementById('loginButton'),
+      logoutButton: document.getElementById('logoutButton'),
+      refreshButton: document.getElementById('refreshButton'),
+      currentUser: document.getElementById('currentUser'),
+      gridContainer: document.getElementById('gridContainer'),
+      loadingIndicator: document.getElementById('loadingIndicator'),
+      statusMessage: document.getElementById('statusMessage'),
+      searchInput: document.getElementById('searchInput'),
+      loginSection: document.getElementById('loginSection'),
+      loggedInSection: document.getElementById('loggedInSection'),
+      likeStatus: document.getElementById('likeStatus'),
+      totalUrlCount: document.getElementById('totalUrlCount'),
+      likedUrlCount: document.getElementById('likedUrlCount'),
+      allUrlsBtn: document.getElementById('allUrlsBtn'),
+      likedUrlsBtn: document.getElementById('likedUrlsBtn'),
+      embedToggle: document.getElementById('embedToggle')
+    };
+    // 애플리케이션 상태
+    const state = {
+      username: null,
+      allURLs: [],
+      isLoading: false,
+      viewMode: 'all', // 'all' 또는 'liked'
+      embedView: true  // iframe 임베딩 여부
+    };
+    // 로딩 상태 표시 함수
+    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.gridContainer.innerHTML = '';
+        }
+      } catch (error) {
+        console.error('로그아웃 오류:', error);
+        showMessage(`로그아웃 오류: ${error.message}`, true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    // 좋아요 상태 새로고침
+    async function refreshLikes() {
+      setLoading(true);
+      try {
+        const response = await fetch('/api/refresh-likes', {
+          method: 'POST'
+        });
+        const data = await handleApiResponse(response);
+        if (data.success) {
+          // URL 목록 다시 로드
+          loadUrls();
+          showMessage('좋아요 상태가 새로고침되었습니다.');
+        } else {
+          showMessage(data.message || '좋아요 상태 새로고침에 실패했습니다.', true);
+        }
+      } catch (error) {
+        console.error('좋아요 상태 새로고침 오류:', error);
+        showMessage(`좋아요 상태 새로고침 오류: ${error.message}`, true);
+      } 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();
+        renderGrid();
+      } 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();
+            renderGrid();
+          }
+          showMessage(data.message);
+        } else {
+          showMessage(data.message || '좋아요 상태 변경에 실패했습니다.', true);
+        }
+      } catch (error) {
+        console.error('좋아요 토글 오류:', error);
+        showMessage(`좋아요 토글 오류: ${error.message}`, true);
+      }
+    }
+    // 그리드 렌더링
+    function renderGrid() {
+      elements.gridContainer.innerHTML = '';
+      let urlsToShow = state.allURLs;
+      // 검색어로 필터링
+      const searchTerm = elements.searchInput.value.trim().toLowerCase();
+      if (searchTerm) {
+        urlsToShow = urlsToShow.filter(item =>
+          item.url.toLowerCase().includes(searchTerm) ||
+          item.title.toLowerCase().includes(searchTerm)
+        );
+      }
+      // 보기 모드로 필터링 (전체 또는 좋아요만)
+      if (state.viewMode === 'liked') {
+        urlsToShow = urlsToShow.filter(item => item.is_liked);
+      }
+      if (urlsToShow.length === 0) {
+        const emptyMessage = document.createElement('div');
+        emptyMessage.textContent = '표시할 URL이 없습니다.';
+        emptyMessage.style.padding = '1rem';
+        emptyMessage.style.width = '100%';
+        emptyMessage.style.textAlign = 'center';
+        elements.gridContainer.appendChild(emptyMessage);
+        return;
+      }
+      // 그리드 아이템 생성
+      urlsToShow.forEach(item => {
+        const gridItem = document.createElement('div');
+        gridItem.className = `grid-item ${item.is_liked ? 'liked' : ''}`;
+        if (item.is_liked) {
+          const badge = document.createElement('div');
+          badge.className = 'like-badge';
+          badge.textContent = '좋아요';
+          gridItem.appendChild(badge);
+        }
+        // 헤더 부분
+        const header = document.createElement('div');
+        header.className = 'grid-header';
+        const title = document.createElement('h3');
+        title.className = 'grid-title';
+        title.textContent = item.title;
+        const likeButton = document.createElement('button');
+        likeButton.className = `like-button ${item.is_liked ? 'liked' : ''}`;
+        likeButton.innerHTML = '❤';
+        likeButton.dataset.url = item.url;
+        likeButton.addEventListener('click', (e) => {
+          e.preventDefault();
+          toggleLike(item.url);
+        });
+        header.appendChild(title);
+        header.appendChild(likeButton);
+        // 컨텐츠 부분 (iframe 임베딩)
+        const content = document.createElement('div');
+        content.className = 'grid-content';
+        if (state.embedView) {
+          const iframeContainer = document.createElement('div');
+          iframeContainer.className = 'iframe-container';
+          const iframe = document.createElement('iframe');
+          iframe.src = item.url;
+          iframe.title = item.title;
+          iframe.sandbox = 'allow-scripts allow-same-origin allow-forms';
+          iframe.loading = 'lazy';
+          iframeContainer.appendChild(iframe);
+          content.appendChild(iframeContainer);
+        } else {
+          // 임베딩 없는 경우 링크만 표시
+          const linkContainer = document.createElement('div');
+          linkContainer.style.padding = '1rem';
+          const link = document.createElement('a');
+          link.href = item.url;
+          link.textContent = item.url;
+          link.target = '_blank';
+          const owner = document.createElement('div');
+          owner.textContent = `소유자: ${item.model_info.owner}`;
+          owner.style.marginTop = '0.5rem';
+          const repo = document.createElement('div');
+          repo.textContent = `저장소: ${item.model_info.repo}`;
+          const type = document.createElement('div');
+          type.textContent = `유형: ${item.model_info.type}`;
+          linkContainer.appendChild(link);
+          linkContainer.appendChild(owner);
+          linkContainer.appendChild(repo);
+          linkContainer.appendChild(type);
+          content.appendChild(linkContainer);
+        }
+        // 그리드 아이템에 추가
+        gridItem.appendChild(header);
+        gridItem.appendChild(content);
+        elements.gridContainer.appendChild(gridItem);
+      });
+    }
+    // 이벤트 리스너 등록
+    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', renderGrid);
+      // 필터 버튼 - 전체 보기
+      elements.allUrlsBtn.addEventListener('click', () => {
+        elements.allUrlsBtn.classList.add('active');
+        elements.likedUrlsBtn.classList.remove('active');
+        state.viewMode = 'all';
+        renderGrid();
+      });
+      // 필터 버튼 - 좋아요만 보기
+      elements.likedUrlsBtn.addEventListener('click', () => {
+        elements.likedUrlsBtn.classList.add('active');
+        elements.allUrlsBtn.classList.remove('active');
+        state.viewMode = 'liked';
+        renderGrid();
+      });
+      // 임베딩 토글
+      elements.embedToggle.addEventListener('change', () => {
+        state.embedView = elements.embedToggle.checked;
+        renderGrid();
+      });
+    }
+    // 초기화 함수
+    function init() {
+      registerEventListeners();
+      checkSessionStatus();
+    }
+    // 애플리케이션 초기화
+    init();
+  </script>
+</body>
+</html>
+''')
+    app.run(debug=True, host='0.0.0.0', port=5000)