Update app.py

app.py

@@ -60,6 +60,7 @@ def get_space_details(space_data):
             'embedUrl': embed_url,
             'title': title,
             'owner': owner,
+            'name': name,  # Space 이름 추가 저장
             'likes_count': likes_count,
             'tags': tags
         }
@@ -282,7 +283,7 @@ if __name__ == '__main__':
     .rank-badge {
       position: absolute;
       top: 10px;
-      left: 10px;
+      right: 10px;  /* 오른쪽으로 이동 */
       background: rgba(0,0,0,0.7);
       color: white;
       padding: 5px 15px;
@@ -308,6 +309,28 @@ if __name__ == '__main__':
       border: none;
     }
     
+    .error-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: #f8f9fa;
+      color: #6c757d;
+      text-align: center;
+      padding: 20px;
+    }
+    
+    .error-placeholder .error-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #dc3545;
+    }
+    
     .loading {
       position: fixed;
       top: 0;
@@ -409,6 +432,11 @@ if __name__ == '__main__':
       return response.json();
     }
     
+    // 직접 URL 생성 함수 (클라이언트 측에서도 구현)
+    function createDirectUrl(owner, name) {
+      return `https://${owner}-${name}.hf.space`;
+    }
+    
     // Load spaces
     async function loadSpaces() {
       setLoading(true);
@@ -429,6 +457,39 @@ if __name__ == '__main__':
       }
     }
     
+    // iframe 로드 에러 처리
+    function handleIframeError(iframe, owner, name, title) {
+      const container = iframe.parentNode;
+      
+      // 에러 메시지 컨테이너 생성
+      const errorPlaceholder = document.createElement('div');
+      errorPlaceholder.className = 'error-placeholder';
+      
+      // 에러 아이콘
+      const errorIcon = document.createElement('div');
+      errorIcon.className = 'error-icon';
+      errorIcon.textContent = '⚠️';
+      errorPlaceholder.appendChild(errorIcon);
+      
+      // 에러 메시지
+      const errorMessage = document.createElement('p');
+      errorMessage.textContent = `"${title}" 스페이스를 로드할 수 없습니다.`;
+      errorPlaceholder.appendChild(errorMessage);
+      
+      // 직접 링크 제공
+      const directLink = document.createElement('a');
+      directLink.href = `https://huggingface.co/spaces/${owner}/${name}`;
+      directLink.target = '_blank';
+      directLink.textContent = '직접 방문하기';
+      directLink.style.color = '#007bff';
+      directLink.style.marginTop = '10px';
+      errorPlaceholder.appendChild(directLink);
+      
+      // iframe 숨기고 에러 메시지 표시
+      iframe.style.display = 'none';
+      container.appendChild(errorPlaceholder);
+    }
+    
     // Render grid
     function renderGrid(spaces) {
       elements.gridContainer.innerHTML = '';
@@ -443,7 +504,7 @@ if __name__ == '__main__':
       }
       
       spaces.forEach((item, index) => {
-        const { url, embedUrl, title, likes_count, owner } = item;
+        const { url, embedUrl, title, likes_count, owner, name } = item;
         
         // Skip if owner is 'None'
         if (owner === 'None') {
@@ -454,7 +515,7 @@ if __name__ == '__main__':
         const gridItem = document.createElement('div');
         gridItem.className = 'grid-item';
         
-        // Rank badge
+        // Rank badge - 오른쪽 상단으로 이동
         const rankBadge = document.createElement('div');
         rankBadge.className = 'rank-badge';
         rankBadge.textContent = `#${index + 1}`;
@@ -507,15 +568,26 @@ if __name__ == '__main__':
         const content = document.createElement('div');
         content.className = 'grid-content';
         
-        // Create iframe to display the content
+        // Create iframe to display the content - 직접 URL 생성
         const iframe = document.createElement('iframe');
-        iframe.src = embedUrl;
+        const directUrl = createDirectUrl(owner, name);
+        iframe.src = directUrl;
         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
         
+        // 로드 에러 처리
+        iframe.onerror = function() {
+          handleIframeError(iframe, owner, name, title);
+        };
+        
+        iframe.onload = function() {
+          // iframe이 로드되었지만 에러 페이지일 수 있음
+          // 여기에 추가 검증 로직 구현 가능
+        };
+        
         content.appendChild(iframe);
         
         // Add content to grid item