Update app.py

app.py

@@ -75,33 +75,56 @@ def process_url_for_iframe(url):
     """URL을 iframe에 표시하기 적합한 형태로 변환합니다."""
     # 허깅페이스 URL 패턴 감지
     is_huggingface = False
+    embed_urls = []
     
-    # huggingface.co/spaces 패턴 처리
+    # 1. huggingface.co/spaces 패턴 처리
     if "huggingface.co/spaces" in url:
         is_huggingface = True
+        
+        # 기본 URL 정규화
+        base_url = url.rstrip("/")
+        
         try:
-            # URL에서 owner와 name 추출
-            parts = url.split('/spaces/')[1].split('/')
-            owner = parts[0]
-            name = parts[1] if len(parts) > 1 else ""
-            
-            # 특수 문자 처리 및 소문자 변환
-            name = name.replace('.', '-').replace('_', '-').lower()
-            owner = owner.lower()
-            
-            # 새 URL 형식 적용
-            return f"https://{owner}-{name}.hf.space", is_huggingface
-        except:
-            # 오류 발생시 원래 URL 사용
-            return url, is_huggingface
+            # /spaces/ 이후의 경로 추출
+            if "/spaces/" in base_url:
+                path = base_url.split("/spaces/")[1]
+                parts = path.split("/")
+                owner = parts[0]
+                
+                # name 부분 추출
+                if len(parts) > 1:
+                    name = parts[1]
+                    
+                    # 특수 문자 변환
+                    clean_name = name.replace('.', '-').replace('_', '-').lower()
+                    clean_owner = owner.lower()
+                    
+                    # 여러 포맷의 URL을 시도하기 위해 목록에 추가
+                    embed_urls.append(f"https://huggingface.co/spaces/{owner}/{name}/embed")  # 공식 embed URL
+                    embed_urls.append(f"https://{clean_owner}-{clean_name}.hf.space")  # 직접 도메인 접근
+                else:
+                    # owner만 있는 경우 공식 URL 사용
+                    embed_urls.append(f"https://huggingface.co/spaces/{owner}/embed")
+        except Exception as e:
+            print(f"허깅페이스 URL 처리 중 오류: {e}")
+            # 기본 embed URL 시도
+            if not base_url.endswith("/embed"):
+                embed_urls.append(f"{base_url}/embed")
+            else:
+                embed_urls.append(base_url)
     
-    # 이미 .hf.space 도메인인 경우
+    # 2. .hf.space 도메인 처리
     elif ".hf.space" in url:
         is_huggingface = True
-        return url, is_huggingface
+        embed_urls.append(url)  # 현재 URL 그대로 시도
+    
+    # 3. 일반 URL은 그대로 반환
+    else:
+        return url, is_huggingface, []
     
-    # 일반 URL은 그대로 반환
-    return url, is_huggingface
+    # 최종 URL과 함께 시도할 대체 URL 목록 반환
+    primary_url = embed_urls[0] if embed_urls else url
+    return primary_url, is_huggingface, embed_urls[1:] if len(embed_urls) > 1 else []
 
 # ───────────────────── 6. HTML 그리드 ───────────────────
 def html(cards, pg, total):
@@ -248,28 +271,163 @@ def html(cards, pg, total):
             height: 350px; /* Adjusted for small screens */
         }
     }
+
+    /* 오류 메시지 관련 CSS */
+    .error-message {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(255, 255, 255, 0.9);
+        z-index: 20;
+        padding: 20px;
+        text-align: center;
+    }
+    .error-icon {
+        font-size: 48px;
+        margin-bottom: 15px;
+    }
+    .error-text {
+        font-weight: bold;
+        margin-bottom: 15px;
+    }
+    .error-link {
+        display: inline-block;
+        padding: 8px 16px;
+        background-color: #f0f0f7;
+        border-radius: 4px;
+        color: #4a6dd8;
+        font-weight: bold;
+        text-decoration: none;
+        transition: background-color 0.2s;
+    }
+    .error-link:hover {
+        background-color: #e0e0f0;
+    }
     </style>"""
     
-    h = css + """
+    js = """
+    <script>
+    // 허깅페이스 iframe 로딩 오류 처리
+    function handleIframeError(iframeId, alternateUrls, originalUrl) {
+        const iframe = document.getElementById(iframeId);
+        if (!iframe) return;
+        
+        // iframe 로드 실패 처리
+        iframe.onerror = function() {
+            tryNextUrl(iframeId, alternateUrls, originalUrl);
+        };
+        
+        // onload 이벤트에서 로드 실패 확인
+        iframe.onload = function() {
+            try {
+                // iframe 내용에 접근 시도 (cross-origin 제한으로 실패할 수 있음)
+                const iframeContent = iframe.contentWindow.document;
+                console.log("iframe loaded successfully: " + iframeId);
+            } catch (e) {
+                // cross-origin 오류는 무시 (정상적인 상황일 수 있음)
+                console.log("Cross-origin iframe loaded (expected): " + iframeId);
+            }
+            
+            // iframe이 제대로 표시되는지 10초 후 확인
+            setTimeout(function() {
+                if (iframe.offsetWidth === 0 || iframe.offsetHeight === 0) {
+                    console.log("iframe not visible, trying alternate URL: " + iframeId);
+                    tryNextUrl(iframeId, alternateUrls, originalUrl);
+                } else {
+                    console.log("iframe appears to be visible: " + iframeId);
+                }
+            }, 5000);
+        };
+    }
+    
+    // 대체 URL 시도
+    function tryNextUrl(iframeId, alternateUrls, originalUrl) {
+        const iframe = document.getElementById(iframeId);
+        if (!iframe) return;
+        
+        // 대체 URL이 있으면 시도
+        if (alternateUrls && alternateUrls.length > 0) {
+            const nextUrl = alternateUrls.shift();
+            console.log("Trying alternate URL: " + nextUrl);
+            iframe.src = nextUrl;
+            
+            // 대체 URL로 다시 오류 처리 설정
+            handleIframeError(iframeId, alternateUrls, originalUrl);
+        } else {
+            // 모든 URL 시도 실패 시 오류 메시지 표시
+            console.log("All URLs failed, showing error for: " + iframeId);
+            const container = iframe.parentNode;
+            
+            // 오류 메시지 표시
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'error-message';
+            
+            errorDiv.innerHTML = `
+                <div class="error-icon">⚠️</div>
+                <p class="error-text">콘텐츠를 로드할 수 없습니다</p>
+                <a href="${originalUrl}" target="_blank" class="error-link">
+                    원본 페이지에서 열기
+                </a>
+            `;
+            
+            // iframe 숨기고 오류 메시지 표시
+            iframe.style.display = 'none';
+            container.appendChild(errorDiv);
+        }
+    }
+    
+    // 페이지 로드 시 모든 허깅페이스 iframe 처리
+    window.addEventListener('load', function() {
+        const iframes = document.querySelectorAll('.huggingface iframe');
+        iframes.forEach(function(iframe) {
+            const id = iframe.id;
+            const alternateUrlsStr = iframe.getAttribute('data-alternate-urls');
+            const alternateUrls = alternateUrlsStr ? alternateUrlsStr.split(',').filter(url => url) : [];
+            const originalUrl = iframe.getAttribute('data-original-url') || iframe.src;
+            
+            if (id && alternateUrls.length > 0) {
+                handleIframeError(id, alternateUrls, originalUrl);
+            }
+        });
+    });
+    </script>
+    """
+    
+    h = css + js + """
     <div class="container">
         <div class="grid">
     """
     
-    for c in cards:
+    for idx, c in enumerate(cards):
         date = datetime.datetime.fromtimestamp(int(c["ts"])).strftime("%Y-%m-%d")
         
         # URL 처리: 허깅페이스 URL인 경우 특별 처리
         url = c['url']
-        iframe_url, is_huggingface = process_url_for_iframe(url)
+        iframe_url, is_huggingface, alt_urls = process_url_for_iframe(url)
         
         # 허깅페이스 URL에 특별 클래스 추가
         frame_class = "frame huggingface" if is_huggingface else "frame"
         
+        # 고유 ID 생성
+        iframe_id = f"iframe-{idx}-{hash(url) % 10000}"
+        
+        # 대체 URL을 데이터 속성으로 추가
+        alternate_urls_attr = ""
+        if alt_urls:
+            alternate_urls_attr = f'data-alternate-urls="{",".join(alt_urls)}"'
+        
         h += f"""
         <div class="card">
           <div class="hdr"><p class="ttl">{c['title']}</p><p class="date">{date}</p></div>
           <div class="{frame_class}">
             <iframe 
+              id="{iframe_id}"
               src="{iframe_url}" 
               loading="lazy"
               frameborder="0"
@@ -277,7 +435,9 @@ def html(cards, pg, total):
               height="100%"
               allowfullscreen="true"
               allow="accelerometer; camera; encrypted-media; gyroscope; geolocation;"
-              sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads">
+              sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
+              data-original-url="{url}"
+              {alternate_urls_attr}>
             </iframe>
           </div>
           <div class="foot"><a class="link" href="{url}" target="_blank">원본↗</a></div>