Spaces:

cutechicken
/

good

Running

File size: 15,346 Bytes

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Hugging Face URL 카드 리스트</title>
  <style>
    /* 카드들을 담을 컨테이너 */
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem;
    }
    /* 각 카드 스타일 */
    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 1rem;
      width: 300px;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
      position: relative;
      background-color: #f9f9f9;
    }
    /* 카드 내부 링크 스타일 */
    .card a {
      text-decoration: none;
      color: #333;
      word-break: break-all;
    }
    /* 좋아요 버튼 기본 스타일 */
    .like-button {
      position: absolute;
      top: 1rem;
      right: 1rem;
      border: none;
      background: transparent;
      font-size: 1.5rem;
      cursor: pointer;
      transition: color 0.2s;
    }
    /* 좋아요 한 상태: 빨간색 */
    .like-button.liked {
      color: red;
    }
    /* 좋아요 안한 상태: 흰색 (테두리 효과) */
    .like-button.not-liked {
      color: white;
      -webkit-text-stroke: 1px #333;
    }
    /* 토큰 입력 및 상태 표시 영역 */
    .auth-controls {
      padding: 1rem;
      margin-bottom: 1rem;
      background-color: #f0f0f0;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .auth-controls input {
      padding: 0.5rem;
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .auth-controls button {
      padding: 0.5rem 1rem;
      margin-left: 0.5rem;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .auth-controls button:hover {
      background-color: #45a049;
    }
    /* 로딩 표시 */
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      font-size: 1.5rem;
    }
    /* 상태 메시지 */
    .status-message {
      margin: 1rem;
      padding: 1rem;
      border-radius: 4px;
    }
    .success {
      background-color: #dff0d8;
      color: #3c763d;
    }
    .error {
      background-color: #f2dede;
      color: #a94442;
    }
  </style>
</head>
<body>
  <!-- 토큰 입력 및 인증 컨트롤 -->
  <div class="auth-controls" id="authControls">
    <div>
      <span>Hugging Face 인증: </span>
      <span id="authStatus">인증되지 않음</span>
    </div>
    <div>
      <input type="password" id="tokenInput" placeholder="Hugging Face API 토큰 입력" />
      <button id="authButton">인증하기</button>
      <button id="logoutButton" style="display: none; background-color: #f44336;">로그아웃</button>
    </div>
  </div>
  
  <!-- 상태 메시지 -->
  <div id="statusMessage" class="status-message" style="display: none;"></div>
  
  <!-- 로딩 표시 -->
  <div class="loading" id="loadingIndicator" style="display: none;">
    데이터를 불러오는 중...
  </div>
  
  <!-- 카드 컨테이너 -->
  <div class="container" id="cardsContainer"></div>
  
  <script>
    // API 엔드포인트
    const HF_API_BASE = 'https://huggingface.co';
    
    // 상태 관리
    const state = {
      token: null,
      username: null,
      likedModels: {},
      isLoading: false
    };
    
    // DOM 요소 참조
    const elements = {
      tokenInput: document.getElementById('tokenInput'),
      authButton: document.getElementById('authButton'),
      logoutButton: document.getElementById('logoutButton'),
      authStatus: document.getElementById('authStatus'),
      cardsContainer: document.getElementById('cardsContainer'),
      loadingIndicator: document.getElementById('loadingIndicator'),
      statusMessage: document.getElementById('statusMessage')
    };
    
    // Hugging Face의 spaces/models URL 목록
    const 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",
      // 나머지 URL 목록... 실제로는 모든 URL을 포함해야 함
    ];
    
    // URL에서 모델/스페이스 ID 추출
    function extractModelInfo(url) {
      try {
        const parts = url.split('/');
        let type, owner, repo;
        
        // URL 형식에 따라 다른 처리
        if (parts[3] === 'spaces' || parts[3] === 'models') {
          type = parts[3];
          owner = parts[4];
          repo = parts[5];
        } else {
          // 형식이 다른 경우 (예: https://huggingface.co/deepseek/deepseek-ai)
          type = 'models'; // 기본값으로 models 사용
          owner = parts[3];
          repo = parts[4];
        }
        
        // 없는 값이 있으면 기본값 설정
        type = type || 'models';
        owner = owner || '';
        repo = repo || '';
        
        return { type, owner, repo, fullId: `${owner}/${repo}` };
      } catch (e) {
        console.error('URL 파싱 오류:', e, url);
        return { type: 'models', owner: '', repo: '', fullId: '' };
      }
    }
    
    // URL의 마지막 부분을 제목으로 추출 (언더바, 하이픈을 공백으로 변환)
    function extractTitle(url) {
      const parts = url.split("/");
      let title = parts[parts.length - 1];
      return title.replace(/[_-]/g, " ");
    }
    
    // 로딩 상태 표시 함수
    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);
    }
    
    // Hugging Face API 호출 함수
    async function fetchWithToken(endpoint, options = {}) {
      if (!state.token) {
        throw new Error('인증 토큰이 없습니다.');
      }
      
      const url = `${HF_API_BASE}${endpoint}`;
      console.log('API 호출:', url, options.method || 'GET');
      
      const headers = {
        'Authorization': `Bearer ${state.token}`,
        'Content-Type': 'application/json',
        ...options.headers
      };
      
      try {
        const response = await fetch(url, {
          ...options,
          headers
        });
        
        // 디버깅을 위한 응답 정보 출력
        console.log('API 응답 상태:', response.status, response.statusText);
        return response;
      } catch (error) {
        console.error('API 호출 오류:', error);
        throw error;
      }
    }
    
    // 사용자 정보 가져오기
    async function fetchUserInfo() {
      const response = await fetchWithToken('/api/whoami-v2');
      if (!response.ok) {
        throw new Error('사용자 정보를 가져오는데 실패했습니다. 상태 코드: ' + response.status);
      }
      return response.json();
    }
    
    // 사용자가 좋아요한 모델/스페이스 목록 가져오기
    async function fetchLikedRepos() {
      try {
        // 좋아요한 모델 가져오기
        const modelsResponse = await fetchWithToken('/api/me/likes');
        
        if (!modelsResponse.ok) {
          console.error('좋아요 목록 가져오기 응답:', modelsResponse.status, modelsResponse.statusText);
          throw new Error('좋아요 목록을 가져오는데 실패했습니다. 상태 코드: ' + modelsResponse.status);
        }
        
        const likedModels = await modelsResponse.json();
        console.log('가져온 좋아요 목록:', likedModels);
        
        // 결과를 객체로 변환 (빠른 검색을 위해)
        const likedMap = {};
        likedModels.forEach(model => {
          likedMap[`${model.owner}/${model.name}`] = true;
        });
        
        return likedMap;
      } catch (error) {
        console.error('좋아요 목록 가져오기 오류:', error);
        throw error;
      }
    }
    
    // 좋아요 토글 API 호출
    async function toggleLikeAPI(type, owner, repo, isLiked) {
      try {
        const method = isLiked ? 'DELETE' : 'POST';
        const response = await fetchWithToken(`/api/${type}/${owner}/${repo}/like`, {
          method
        });
        
        if (!response.ok) {
          console.error('좋아요 토글 응답:', response.status, response.statusText);
          throw new Error(`좋아요 ${isLiked ? '취소' : '추가'} 실패. 상태 코드: ${response.status}`);
        }
        
        return response.ok;
      } catch (error) {
        console.error('좋아요 토글 API 오류:', error);
        throw error;
      }
    }
    
          // 인증 처리
    async function authenticate(token) {
      if (!token.trim()) {
        showMessage('토큰을 입력해주세요.', true);
        return;
      }
      
      setLoading(true);
      
      try {
        // 토큰 저장
        state.token = token;
        console.log('인증 시도 (토큰 일부):', token.substring(0, 4) + '...');
        
        // 사용자 정보 가져오기
        const userInfo = await fetchUserInfo();
        console.log('사용자 정보:', userInfo);
        
        // 사용자 이름 추출 (API 응답 구조에 따라 다를 수 있음)
        if (userInfo.name) {
          state.username = userInfo.name;
        } else if (userInfo.user && userInfo.user.username) {
          state.username = userInfo.user.username;
        } else if (userInfo.username) {
          state.username = userInfo.username;
        } else {
          state.username = '인증된 사용자';
        }
        
        // 실제 좋아요 목록 가져오기
        state.likedModels = await fetchLikedRepos();
        
        // UI 업데이트
        elements.authStatus.textContent = `${state.username}님으로 인증됨`;
        elements.tokenInput.style.display = 'none';
        elements.authButton.style.display = 'none';
        elements.logoutButton.style.display = 'inline-block';
        
        showMessage('인증 성공! 좋아요 정보를 불러왔습니다.');
        
        // 카드 다시 렌더링
        renderCards();
      } catch (error) {
        console.error('인증 오류:', error);
        showMessage(`인증에 실패했습니다: ${error.message}`, true);
        state.token = null;
      } finally {
        setLoading(false);
      }
    }
    
    // 로그아웃 처리
    function logout() {
      // 상태 초기화
      state.token = null;
      state.username = null;
      state.likedModels = {};
      
      // UI 업데이트
      elements.authStatus.textContent = '인증되지 않음';
      elements.tokenInput.style.display = 'inline-block';
      elements.tokenInput.value = '';
      elements.authButton.style.display = 'inline-block';
      elements.logoutButton.style.display = 'none';
      
      showMessage('로그아웃되었습니다.');
      
      // 카드 다시 렌더링
      renderCards();
    }
    
    // 좋아요 토글 처리
    async function toggleLike(url, button) {
      if (!state.token) {
        showMessage('좋아요를 하려면 HF 토큰으로 인증이 필요합니다.', true);
        return;
      }
      
      const modelInfo = extractModelInfo(url);
      const modelId = modelInfo.fullId;
      const isCurrentlyLiked = state.likedModels[modelId] || false;
      
      setLoading(true);
      
      try {
        // 실제 API 호출로 좋아요 상태 토글
        await toggleLikeAPI(modelInfo.type, modelInfo.owner, modelInfo.repo, isCurrentlyLiked);
        
        // 상태 업데이트
        if (isCurrentlyLiked) {
          delete state.likedModels[modelId];
          button.classList.remove("liked");
          button.classList.add("not-liked");
          showMessage(`${modelInfo.repo}에 대한 좋아요를 취소했습니다.`);
        } else {
          state.likedModels[modelId] = true;
          button.classList.add("liked");
          button.classList.remove("not-liked");
          showMessage(`${modelInfo.repo}를 좋아요 했습니다.`);
        }
      } catch (error) {
        showMessage('좋아요 처리 중 오류가 발생했습니다.', true);
        console.error('좋아요 오류:', error);
      } finally {
        setLoading(false);
      }
    }
    
    // 카드 렌더링
    function renderCards() {
      // 카드 컨테이너 초기화
      elements.cardsContainer.innerHTML = '';
      
      // 각 URL에 대해 카드 생성
      urls.forEach(url => {
        const card = document.createElement("div");
        card.className = "card";
        
        // 제목
        const titleEl = document.createElement("h3");
        titleEl.textContent = extractTitle(url);
        card.appendChild(titleEl);
        
        // URL 링크
        const linkEl = document.createElement("a");
        linkEl.href = url;
        linkEl.textContent = url;
        linkEl.target = "_blank";
        card.appendChild(linkEl);
        
        // 좋아요 버튼 (♥ 아이콘)
        const likeBtn = document.createElement("button");
        likeBtn.className = "like-button";
        likeBtn.textContent = "♥";
        
        // 좋아요 상태 설정
        try {
          const modelInfo = extractModelInfo(url);
          const isLiked = state.token && state.likedModels[modelInfo.fullId];
          
          if (isLiked) {
            likeBtn.classList.add("liked");
          } else {
            likeBtn.classList.add("not-liked");
          }
        } catch (e) {
          // URL 파싱 오류 등 예외 처리
          likeBtn.classList.add("not-liked");
        }
        
        likeBtn.addEventListener("click", function(e) {
          e.preventDefault();  // 링크 클릭 방지
          toggleLike(url, likeBtn);
        });
        card.appendChild(likeBtn);
        
        elements.cardsContainer.appendChild(card);
      });
    }
    
    // 이벤트 리스너 설정
    elements.authButton.addEventListener('click', () => {
      authenticate(elements.tokenInput.value);
    });
    
    elements.logoutButton.addEventListener('click', logout);
    
    // 엔터 키로 인증 가능하게
    elements.tokenInput.addEventListener('keypress', (event) => {
      if (event.key === 'Enter') {
        authenticate(elements.tokenInput.value);
      }
    });
    
    // 초기 렌더링
    renderCards();
  </script>
</body>
</html>