Update app.py

app.py

@@ -14,8 +14,14 @@ import gradio as gr
 
 USERNAME = "openfree"
 
+# 스크린샷 캐시 저장소
+SCREENSHOT_CACHE = {}
+
 def take_screenshot(url):
     """웹사이트 스크린샷 촬영"""
+    if url in SCREENSHOT_CACHE:
+        return SCREENSHOT_CACHE[url]
+        
     if not url.startswith('http'):
         url = f"https://{url}"
         
@@ -35,9 +41,11 @@ def take_screenshot(url):
         img = Image.open(BytesIO(screenshot))
         buffered = BytesIO()
         img.save(buffered, format="PNG")
-        return base64.b64encode(buffered.getvalue()).decode()
+        base64_image = base64.b64encode(buffered.getvalue()).decode()
+        SCREENSHOT_CACHE[url] = base64_image
+        return base64_image
     except Exception as e:
-        print(f"Screenshot error: {str(e)}")
+        print(f"Screenshot error for {url}: {str(e)}")
         return None
     finally:
         if 'driver' in locals():
@@ -46,8 +54,9 @@ def take_screenshot(url):
 def get_pastel_color(index):
     """인덱스 기반 파스텔 색상 생성"""
     pastel_colors = [
-        '#FFE6E6', '#FFE6FF', '#E6E6FF', '#E6FFFF', '#E6FFE6',
-        '#FFFFE6', '#FFF0E6', '#F0E6FF', '#FFE6F0', '#E6FFF0'
+        'rgba(255, 230, 230, 0.8)', 'rgba(255, 230, 255, 0.8)', 
+        'rgba(230, 230, 255, 0.8)', 'rgba(230, 255, 255, 0.8)', 
+        'rgba(230, 255, 230, 0.8)'
     ]
     return pastel_colors[index % len(pastel_colors)]
 
@@ -57,15 +66,46 @@ def get_space_card(space, index):
     space_name = space_id.split('/')[-1]
     likes = space.get('likes', 0)
     sdk = space.get('sdk', 'N/A')
-    bg_color = get_pastel_color(index)
+    url = f"https://huggingface.co/spaces/{space_id}"
+    
+    # 스크린샷 가져오기
+    screenshot = take_screenshot(url)
+    bg_style = f"""
+        background-image: linear-gradient(
+            {get_pastel_color(index)}, 
+            {get_pastel_color(index)}
+        ), url(data:image/png;base64,{screenshot});
+        background-size: cover;
+        background-position: center;
+        background-blend-mode: overlay;
+    """ if screenshot else f"background-color: {get_pastel_color(index)};"
     
     return f"""
-    <div style='border: none; padding: 20px; margin: 10px; border-radius: 15px; 
-                background-color: {bg_color}; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'>
-        <h3>{space_name}</h3>
-        <p>SDK: {sdk}</p>
-        <p>Likes: {likes}</p>
-        <a href='https://huggingface.co/spaces/{space_id}' target='_blank'>Visit Space</a>
+    <div style='
+        border: none; 
+        padding: 20px; 
+        margin: 10px; 
+        border-radius: 15px; 
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        {bg_style}
+        transition: transform 0.3s ease;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        min-height: 200px;'
+        onclick="window.open('{url}', '_blank')"
+        onmouseover="this.style.transform='scale(1.02)'"
+        onmouseout="this.style.transform='scale(1)'">
+        
+        <div style='
+            background: rgba(255, 255, 255, 0.9);
+            padding: 15px;
+            border-radius: 10px;
+            backdrop-filter: blur(5px);'>
+            <h3 style='margin: 0; color: #333;'>{space_name}</h3>
+            <p style='margin: 10px 0; color: #666;'>SDK: {sdk}</p>
+            <p style='margin: 10px 0; color: #666;'>❤️ {likes}</p>
+        </div>
     </div>
     """
 
@@ -76,9 +116,17 @@ def get_user_spaces():
         response = requests.get(url)
         if response.status_code == 200:
             spaces_data = response.json()
-            html_content = "<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>"
+            html_content = """
+            <div style='
+                padding: 20px;
+                background: #f5f5f5;'>
+                <div style='
+                    display: grid;
+                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                    gap: 20px;'>
+            """
             html_content += "".join(get_space_card(space, idx) for idx, space in enumerate(spaces_data))
-            html_content += "</div>"
+            html_content += "</div></div>"
             return html_content
         return "<p>Failed to fetch spaces</p>"
     except Exception as e:
@@ -89,7 +137,11 @@ demo = gr.Interface(
     fn=lambda: get_user_spaces(),
     inputs=None,
     outputs=gr.HTML(),
-    title="Hugging Face Spaces Gallery"
+    title="Hugging Face Spaces Gallery",
+    css="""
+        .container { max-width: 1200px; margin: 0 auto; }
+        .gradio-container { font-family: 'Arial', sans-serif; }
+    """
 )
 
 if __name__ == "__main__":