Update app.py

app.py

@@ -6,29 +6,35 @@ from selenium import webdriver
 from selenium.common.exceptions import WebDriverException
 from PIL import Image
 from io import BytesIO
+import base64
 
 def take_screenshot(url):
     """웹사이트 스크린샷 촬영 함수"""
+    if not url.startswith('http'):
+        url = f"https://{url}"
+        
     options = webdriver.ChromeOptions()
     options.add_argument('--headless')
     options.add_argument('--no-sandbox')
     options.add_argument('--disable-dev-shm-usage')
+    options.add_argument('--window-size=1080,720')
     
     try:
         driver = webdriver.Chrome(options=options)
-        driver.set_window_size(1080, 720)  # 스크린샷 크기 설정
         driver.get(url)
         driver.implicitly_wait(10)
         screenshot = driver.get_screenshot_as_png()
-        return Image.open(BytesIO(screenshot))
+        img = Image.open(BytesIO(screenshot))
+        buffered = BytesIO()
+        img.save(buffered, format="PNG")
+        return base64.b64encode(buffered.getvalue()).decode()
     except WebDriverException as e:
         print(f"스크린샷 촬영 실패: {str(e)}")
-        return Image.new('RGB', (1, 1))  # 오류 시 빈 이미지 반환
+        return None
     finally:
-        if driver:
+        if 'driver' in locals():
             driver.quit()
 
-
 USERNAME = "openfree"
 
 def format_timestamp(timestamp):
@@ -279,7 +285,7 @@ def get_vercel_deployments():
         print(f"Error fetching Vercel deployments: {str(e)}")
         return []
 
-def get_vercel_card(deployment, index):
+def get_vercel_card(deployment, index, is_top_best=False):
     """Vercel 배포 카드 HTML 생성 함수"""
     raw_url = deployment.get('url', '')
     
@@ -295,61 +301,27 @@ def get_vercel_card(deployment, index):
     
     # 카드 ID 생성
     card_id = f"vercel-card-{url.replace('.', '-').replace('/', '-')}"
-
-    
-    # 스크린샷 이미지 가져오기
-    try:
-        screenshot = take_screenshot(url)
-        screenshot_html = f"""
-            <div style="width: 100%; height: 200px; overflow: hidden; border-radius: 10px; margin-bottom: 15px;">
-                <img src="data:image/png;base64,{screenshot}" 
-                     style="width: 100%; height: 100%; object-fit: cover;"
-                     alt="{name} 스크린샷"/>
-            </div>
-        """
-    except Exception as e:
-        print(f"스크린샷 처리 오류: {str(e)}")
-        screenshot_html = ""  # 오류 시 스크린샷 영역 생략
-
-    # 나머지 카드 스타일링 코드는 기존과 동일...
-    return f"""
-    <div id="{card_id}" class="vercel-card"
-         style='border: none; 
-                padding: 25px; 
-                margin: 15px; 
-                border-radius: 20px; 
-                background-color: {get_pastel_color(index)};
-                box-shadow: 0 4px 15px rgba(0,0,0,0.1);'>
-        {screenshot_html}
-        <h3>{name}</h3>
-        <div style='margin: 15px 0;'>
-            <p>상태: {state}</p>
-            <p>생성일: {created}</p>
-            <p>URL: <a href="{url}" target="_blank">{url}</a></p>
-        </div>
-    </div>
-    """    
-    
-    # Hugging Face 스페이스 URL인 경우 직접 사용
-    if 'huggingface.co' in url:
-        final_url = url
-    else:
-        final_url = f"https://{url}" if not url.startswith('http') else url
-    
-    created = format_timestamp(deployment.get('created'))
-    name = deployment.get('name', 'Unnamed Project')
-    state = deployment.get('state', 'N/A')
-    
-    # 고유 ID 생성 (카드 식별용)
-    card_id = f"vercel-card-{url.replace('.', '-').replace('/', '-')}"
     
-
+    # Top Best 항목일 경우만 스크린샷 추가
+    screenshot_html = ""
+    if is_top_best:
+        try:
+            screenshot_base64 = take_screenshot(raw_url)
+            if screenshot_base64:
+                screenshot_html = f"""
+                    <div style="width: 100%; height: 200px; overflow: hidden; border-radius: 10px; margin-bottom: 15px;">
+                        <img src="data:image/png;base64,{screenshot_base64}" 
+                             style="width: 100%; height: 100%; object-fit: cover;"
+                             alt="{name} 스크린샷"/>
+                    </div>
+                """
+        except Exception as e:
+            print(f"스크린샷 처리 오류: {str(e)}")
     
-    bg_color = get_pastel_color(index + 20)
+    bg_color = get_pastel_color(index + (20 if not is_top_best else 0))
     tech_emojis = ['⚡', '🚀', '🌟', '✨', '💫', '🔥', '🌈', '🎯', '🎨', '🔮']
     random_emojis = random.sample(tech_emojis, 3)
 
-
     return f"""
     <div id="{card_id}" class="vercel-card"
          data-likes="0"
@@ -364,7 +336,7 @@ def get_vercel_card(deployment, index):
                 overflow: hidden;'
          onmouseover='this.style.transform="translateY(-5px) scale(1.02)"; this.style.boxShadow="0 8px 25px rgba(0,0,0,0.15)"'
          onmouseout='this.style.transform="translateY(0) scale(1)"; this.style.boxShadow="0 4px 15px rgba(0,0,0,0.1)"'>
-         <!-- ... (이전 코드와 동일) ... -->
+         {screenshot_html}
          <h3 style='color: #2d2d2d; 
                     margin: 0 0 20px 0; 
                     font-size: 1.4em;
@@ -372,7 +344,7 @@ def get_vercel_card(deployment, index):
                     align-items: center;
                     gap: 10px;'>
              <span style='font-size: 1.3em'>{random_emojis[0]}</span>
-             <a href='{final_url}' target='_blank' 
+             <a href='{url}' target='_blank' 
                 style='text-decoration: none; color: #2d2d2d;'>
                  {name}
              </a>
@@ -388,7 +360,7 @@ def get_vercel_card(deployment, index):
                 <strong>Created:</strong> 📅 {created}
             </p>
             <p style='margin: 8px 0;'>
-                <strong>URL:</strong> 🔗 https://{url}
+                <strong>URL:</strong> 🔗 {url}
             </p>
         </div>
          <div style='margin-top: 20px; display: flex; justify-content: space-between; align-items: center;'>
@@ -399,7 +371,7 @@ def get_vercel_card(deployment, index):
                  </button>
                  <span class="like-count" style="font-size: 1.2em; color: #666;">0</span>
              </div>
-             <a href='{final_url}' target='_blank' 
+             <a href='{url}' target='_blank' 
                 style='background: linear-gradient(45deg, #0084ff, #00a3ff);
                        color: white; 
                        padding: 10px 20px; 
@@ -634,9 +606,8 @@ def get_user_spaces():
         # TOP_BEST_URLS 항목 수
         top_best_count = len(TOP_BEST_URLS)
         
-        # Vercel API를 통한 실제 배포 수 (디버깅을 위한 출력 추가)
+        # Vercel API를 통한 실제 배포 수
         vercel_deployments = get_vercel_deployments()
-        print(f"Debug - Vercel API response: {vercel_deployments}")  # 디버깅 로그
         actual_vercel_count = len(vercel_deployments) if vercel_deployments else 0
 
         html_content = f"""
@@ -659,8 +630,11 @@ def get_user_spaces():
             <!-- Top Best -->
             <h3 style='color: #333; margin: 20px 0;'>🏆 Top Best</h3>
             <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
-                {"".join(get_vercel_card({"url": url["url"], "created": url["created"], "name": url["name"], "state": url["state"]}, idx) 
-                        for idx, url in enumerate(TOP_BEST_URLS))}
+                {"".join(get_vercel_card(
+                    {"url": url["url"], "created": url["created"], "name": url["name"], "state": url["state"]}, 
+                    idx,
+                    is_top_best=True
+                ) for idx, url in enumerate(TOP_BEST_URLS))}
             </div>
             
             <!-- Vercel Deployments -->
@@ -731,7 +705,6 @@ def get_user_spaces():
         </script>
         """
 
-        
         return html_content
 
     except Exception as e:
@@ -743,15 +716,14 @@ def get_user_spaces():
             <p>Please try again later.</p>
         </div>
         """
+
         
 # Creating the Gradio interface
 demo = gr.Blocks()
 
 with demo:
-    html_output = gr.HTML(value=get_user_spaces())  # 초기 로드 시 직접 함수 호출
+    html_output = gr.HTML(value=get_user_spaces())
 
 if __name__ == "__main__":
-    demo = gr.Blocks()
-    with demo:
-        gr.HTML(value=get_user_spaces())
-    demo.launch()
+    demo.launch()
+