Spaces:

cutechicken
/

good

Running

App Files Files Community

cutechicken commited on Mar 12

Commit

91332db

verified ·

1 Parent(s): 3c3a731

Update index.html

Browse files

Files changed (1) hide show

index.html +209 -72

index.html CHANGED Viewed

@@ -47,8 +47,8 @@
       color: white;
       -webkit-text-stroke: 1px #333;
     }
-    /* 로그인 상태 표시 및 컨트롤 */
-    .user-controls {
       padding: 1rem;
       margin-bottom: 1rem;
       background-color: #f0f0f0;
@@ -57,6 +57,24 @@
       justify-content: space-between;
       align-items: center;
     }
     /* 로딩 표시 */
     .loading {
       position: fixed;
@@ -70,26 +88,42 @@
       align-items: center;
       z-index: 1000;
       font-size: 1.5rem;
-      display: none;
     }
   </style>
 </head>
 <body>
-  <!-- 로그인 상태 및 사용자 컨트롤 -->
-  <div class="user-controls" id="userControls">
     <div>
-      <span>로그인: </span>
-      <span id="loginStatus">로그인되지 않음</span>
     </div>
     <div>
-      <input type="text" id="usernameInput" placeholder="사용자 이름" />
-      <button id="loginButton">로그인</button>
-      <button id="logoutButton" style="display: none;">로그아웃</button>
     </div>
   </div>
   <!-- 로딩 표시 -->
-  <div class="loading" id="loadingIndicator">
     데이터를 불러오는 중...
   </div>
@@ -97,21 +131,26 @@
   <div class="container" id="cardsContainer"></div>
   <script>
     // 상태 관리
     const state = {
-      currentUser: null,
-      likedUrls: {},
       isLoading: false
     };
     // DOM 요소 참조
     const elements = {
-      loginStatus: document.getElementById('loginStatus'),
-      usernameInput: document.getElementById('usernameInput'),
-      loginButton: document.getElementById('loginButton'),
       logoutButton: document.getElementById('logoutButton'),
       cardsContainer: document.getElementById('cardsContainer'),
-      loadingIndicator: document.getElementById('loadingIndicator')
     };
     // Hugging Face의 spaces/models URL 목록
@@ -125,10 +164,18 @@
       "https://huggingface.co/spaces/VIDraft/PHI4-Multimodal",
       "https://huggingface.co/spaces/ginigen/Ovis2-8B",
       "https://huggingface.co/spaces/ginigen/Graph-Mind",
-      // 전체 URL 목록 중 일부만 표시 (실제로는 모든 URL을 포함해야 함)
-      // ... 나머지 URL
     ];
     // URL의 마지막 부분을 제목으로 추출 (언더바, 하이픈을 공백으로 변환)
     function extractTitle(url) {
       const parts = url.split("/");
@@ -142,54 +189,124 @@
       elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
     }
-    // 사용자 좋아요 데이터 저장 (서버 API 호출로 대체 가능)
-    function saveLikes(username, likes) {
-      return new Promise((resolve) => {
-        // 실제 구현에서는 서버 API를 호출하여 DB에 저장
-        // 예시로 localStorage를 사용 (사용자별 좋아요 데이터 저장)
-        localStorage.setItem(`likes_${username}`, JSON.stringify(likes));
-        setTimeout(resolve, 300); // 네트워크 지연 시뮬레이션
-      });
     }
-    // 사용자 좋아요 데이터 로드 (서버 API 호출로 대체 가능)
-    function loadLikes(username) {
-      return new Promise((resolve) => {
-        // 실제 구현에서는 서버 API를 호출하여 DB에서 불러옴
-        // 예시로 localStorage를 사용
-        const likes = JSON.parse(localStorage.getItem(`likes_${username}`)) || {};
-        setTimeout(() => resolve(likes), 300); // 네트워크 지연 시뮬레이션
       });
     }
-    // 로그인 처리
-    async function login(username) {
-      if (!username.trim()) {
-        alert('사용자 이름을 입력해주세요.');
         return;
       }
       setLoading(true);
       try {
-        // 사용자 좋아요 데이터 로드
-        const likes = await loadLikes(username);
-        // 상태 업데이트
-        state.currentUser = username;
-        state.likedUrls = likes;
         // UI 업데이트
-        elements.loginStatus.textContent = `${username}님으로 로그인됨`;
-        elements.usernameInput.style.display = 'none';
-        elements.loginButton.style.display = 'none';
         elements.logoutButton.style.display = 'inline-block';
         // 카드 다시 렌더링
         renderCards();
       } catch (error) {
-        alert('로그인 중 오류가 발생했습니다.');
-        console.error('로그인 오류:', error);
       } finally {
         setLoading(false);
       }
@@ -198,45 +315,54 @@
     // 로그아웃 처리
     function logout() {
       // 상태 초기화
-      state.currentUser = null;
-      state.likedUrls = {};
       // UI 업데이트
-      elements.loginStatus.textContent = '로그인되지 않음';
-      elements.usernameInput.style.display = 'inline-block';
-      elements.usernameInput.value = '';
-      elements.loginButton.style.display = 'inline-block';
       elements.logoutButton.style.display = 'none';
       // 카드 다시 렌더링
       renderCards();
     }
     // 좋아요 토글 처리
     async function toggleLike(url, button) {
-      if (!state.currentUser) {
-        alert('좋아요를 하려면 로그인이 필요합니다.');
         return;
       }
       setLoading(true);
       try {
-        // 좋아요 상태 토글
-        if (state.likedUrls[url]) {
-          delete state.likedUrls[url];
           button.classList.remove("liked");
           button.classList.add("not-liked");
         } else {
-          state.likedUrls[url] = true;
           button.classList.add("liked");
           button.classList.remove("not-liked");
         }
-        // 변경사항 저장
-        await saveLikes(state.currentUser, state.likedUrls);
       } catch (error) {
-        alert('좋아요 처리 중 오류가 발생했습니다.');
         console.error('좋아요 오류:', error);
       } finally {
         setLoading(false);
@@ -269,11 +395,22 @@
         const likeBtn = document.createElement("button");
         likeBtn.className = "like-button";
         likeBtn.textContent = "♥";
-        if (state.likedUrls[url]) {
-          likeBtn.classList.add("liked");
-        } else {
           likeBtn.classList.add("not-liked");
         }
         likeBtn.addEventListener("click", function(e) {
           e.preventDefault();  // 링크 클릭 방지
           toggleLike(url, likeBtn);
@@ -285,16 +422,16 @@
     }
     // 이벤트 리스너 설정
-    elements.loginButton.addEventListener('click', () => {
-      login(elements.usernameInput.value);
     });
     elements.logoutButton.addEventListener('click', logout);
-    // 엔터 키로 로그인 가능하게
-    elements.usernameInput.addEventListener('keypress', (event) => {
       if (event.key === 'Enter') {
-        login(elements.usernameInput.value);
       }
     });

       color: white;
       -webkit-text-stroke: 1px #333;
     }
+    /* 토큰 입력 및 상태 표시 영역 */
+    .auth-controls {
       padding: 1rem;
       margin-bottom: 1rem;
       background-color: #f0f0f0;
       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;
       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/api';
     // 상태 관리
     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 목록
       "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) {
+      const parts = url.split('/');
+      const type = parts[3]; // spaces 또는 models
+      const owner = parts[4];
+      const repo = parts[5];
+      return { type, owner, repo, fullId: `${owner}/${repo}` };
+    }
     // URL의 마지막 부분을 제목으로 추출 (언더바, 하이픈을 공백으로 변환)
     function extractTitle(url) {
       const parts = url.split("/");
       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}`;
+      const headers = {
+        'Authorization': `Bearer ${state.token}`,
+        'Content-Type': 'application/json',
+        ...options.headers
+      };
+      return fetch(url, {
+        ...options,
+        headers
       });
     }
+    // 사용자 정보 가져오기
+    async function fetchUserInfo() {
+      const response = await fetchWithToken('/whoami-v2');
+      if (!response.ok) {
+        throw new Error('사용자 정보를 가져오는데 실패했습니다.');
+      }
+      return response.json();
+    }
+    // 사용자가 좋아요한 모델/스페이스 목록 가져오기
+    async function fetchLikedRepos() {
+      try {
+        // 좋아요한 모델 가져오기
+        const modelsResponse = await fetchWithToken('/me/likes');
+        if (!modelsResponse.ok) {
+          throw new Error('좋아요 목록을 가져오는데 실패했습니다.');
+        }
+        const likedModels = await modelsResponse.json();
+        // 결과를 객체로 변환 (빠른 검색을 위해)
+        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(`/${type}/${owner}/${repo}/like`, {
+          method
+        });
+        if (!response.ok) {
+          throw new Error(`좋아요 ${isLiked ? '취소' : '추가'} 실패`);
+        }
+        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;
+        // 사용자 정보 가져오기
+        const userInfo = await fetchUserInfo();
+        state.username = userInfo.name || userInfo.user.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('인증에 실패했습니다. 토큰을 확인해주세요.', 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);
         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);
     }
     // 이벤트 리스너 설정
+    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);
       }
     });