Update app.py

app.py

@@ -11,41 +11,140 @@ def format_timestamp(timestamp):
     return 'N/A'
 
 def get_space_card(space):
-    """Generate HTML card for a space"""
+    """Generate HTML card for a space with colorful design and lots of emojis"""
     space_id = space.get('id', '')
     space_name = space_id.split('/')[-1]
     likes = space.get('likes', 0)
     created_at = format_timestamp(space.get('createdAt'))
     sdk = space.get('sdk', 'N/A')
     
+    # SDK별 이모지 및 관련 이모지 세트
+    sdk_emoji_sets = {
+        'gradio': {
+            'main': '🎨',
+            'related': ['🖼️', '🎭', '🎪', '🎠', '🎡', '🎢', '🎯', '🎲', '🎰', '🎳']
+        },
+        'streamlit': {
+            'main': '⚡',
+            'related': ['💫', '✨', '⭐', '🌟', '💥', '⚡', '🔥', '🌈', '🎆', '🎇']
+        },
+        'docker': {
+            'main': '🐳',
+            'related': ['🐋', '🌊', '🌍', '🚢', '⛴️', '🛥️', '🐠', '🐡', '🦈', '🐬']
+        },
+        'static': {
+            'main': '📄',
+            'related': ['📝', '📰', '📑', '🗂️', '📁', '📂', '📚', '📖', '📒', '📔']
+        },
+        'panel': {
+            'main': '📊',
+            'related': ['📈', '📉', '💹', '📋', '📌', '📍', '🗺️', '🎯', '📐', '📏']
+        },
+        'N/A': {
+            'main': '🔧',
+            'related': ['🔨', '⚒️', '🛠️', '⚙️', '🔩', '⛏️', '⚡', '🔌', '💡', '🔋']
+        }
+    }
+    
+    # 파스텔톤 배경색
+    bg_colors = {
+        'gradio': '#FFE6E6',    # 연한 분홍
+        'streamlit': '#E6FFE6',  # 연한 초록
+        'docker': '#E6E6FF',     # 연한 파랑
+        'static': '#FFE6FF',     # 연한 보라
+        'panel': '#FFFFE6',      # 연한 노랑
+        'N/A': '#E6FFFF'        # 연한 하늘
+    }
+    
+    # SDK에 따른 이모지와 색상 선택
+    sdk_lower = sdk.lower()
+    bg_color = bg_colors.get(sdk_lower, '#FFFFFF')
+    emoji_set = sdk_emoji_sets.get(sdk_lower, sdk_emoji_sets['N/A'])
+    main_emoji = emoji_set['main']
+    
+    # 랜덤하게 3개의 관련 이모지 선택
+    import random
+    decorative_emojis = random.sample(emoji_set['related'], 3)
+    
+    # 추가 장식용 이모지
+    general_emojis = ['🚀', '💫', '⭐', '🌟', '✨', '💥', '🔥', '🌈', '🎯', '🎨', 
+                      '🎭', '🎪', '🎢', '🎡', '🎠', '🎪', '🎭', '🎨', '🎯', '🎲']
+    random_emojis = random.sample(general_emojis, 3)
+    
+    # 좋아요 수에 따른 하트 이모지
+    heart_emoji = '❤️' if likes > 100 else '💖' if likes > 50 else '💝' if likes > 10 else '🤍'
+    
     return f"""
-    <div style='border: 1px solid #ddd; padding: 20px; margin: 10px; border-radius: 12px; 
-                background-color: white; box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
-                transition: transform 0.2s ease-in-out;'
-         onmouseover='this.style.transform="scale(1.02)"'
-         onmouseout='this.style.transform="scale(1)"'>
-        <h3 style='color: #2d2d2d; margin: 0 0 15px 0; font-size: 1.3em;'>
+    <div style='border: none; 
+                padding: 25px; 
+                margin: 15px; 
+                border-radius: 20px; 
+                background-color: {bg_color};
+                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+                transition: all 0.3s ease-in-out;
+                position: relative;
+                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)"'>
+        <div style='position: absolute; top: -15px; right: -15px; font-size: 100px; opacity: 0.1;'>
+            {main_emoji}
+        </div>
+        <div style='position: absolute; top: 10px; right: 10px; font-size: 20px;'>
+            {decorative_emojis[0]}
+        </div>
+        <div style='position: absolute; bottom: 10px; left: 10px; font-size: 20px;'>
+            {decorative_emojis[1]}
+        </div>
+        <div style='position: absolute; top: 50%; right: 10px; font-size: 20px;'>
+            {decorative_emojis[2]}
+        </div>
+        <h3 style='color: #2d2d2d; 
+                   margin: 0 0 20px 0; 
+                   font-size: 1.4em;
+                   display: flex;
+                   align-items: center;
+                   gap: 10px;'>
+            <span style='font-size: 1.3em'>{random_emojis[0]}</span>
             <a href='https://huggingface.co/spaces/{space_id}' target='_blank' 
                style='text-decoration: none; color: #2d2d2d;'>
                 {space_name}
             </a>
+            <span style='font-size: 1.3em'>{random_emojis[1]}</span>
         </h3>
-        <div style='margin: 10px 0; color: #666;'>
-            <p style='margin: 5px 0;'><strong>SDK:</strong> {sdk}</p>
-            <p style='margin: 5px 0;'><strong>Created:</strong> {created_at}</p>
-            <p style='margin: 5px 0;'><strong>Likes:</strong> {likes} ❤️</p>
+        <div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5); 
+                    padding: 15px; border-radius: 12px;'>
+            <p style='margin: 8px 0;'>
+                <strong>SDK:</strong> {main_emoji} {sdk} {decorative_emojis[0]}
+            </p>
+            <p style='margin: 8px 0;'>
+                <strong>Created:</strong> 📅 {created_at} ⏰
+            </p>
+            <p style='margin: 8px 0;'>
+                <strong>Likes:</strong> {heart_emoji} {likes} {random_emojis[2]}
+            </p>
         </div>
-        <div style='margin-top: 15px; display: flex; justify-content: space-between; align-items: center;'>
+        <div style='margin-top: 20px; 
+                    display: flex; 
+                    justify-content: space-between; 
+                    align-items: center;'>
             <a href='https://huggingface.co/spaces/{space_id}' target='_blank' 
-               style='background-color: #0084ff; color: white; padding: 8px 16px; 
-                      border-radius: 6px; text-decoration: none; display: inline-block;
-                      font-weight: 500; transition: background-color 0.2s;'
-               onmouseover='this.style.backgroundColor="#0066cc"'
-               onmouseout='this.style.backgroundColor="#0084ff"'>
-                View Space
+               style='background: linear-gradient(45deg, #0084ff, #00a3ff);
+                      color: white; 
+                      padding: 10px 20px; 
+                      border-radius: 15px; 
+                      text-decoration: none; 
+                      display: inline-flex;
+                      align-items: center;
+                      gap: 8px;
+                      font-weight: 500; 
+                      transition: all 0.3s;
+                      box-shadow: 0 2px 8px rgba(0,132,255,0.3);'
+               onmouseover='this.style.transform="scale(1.05)"; this.style.boxShadow="0 4px 12px rgba(0,132,255,0.4)"'
+               onmouseout='this.style.transform="scale(1)"; this.style.boxShadow="0 2px 8px rgba(0,132,255,0.3)"'>
+                <span>View Space</span> 🚀 {random_emojis[0]}
             </a>
-            <span style='color: #666; font-size: 0.9em;'>
-                ID: {space_id}
+            <span style='color: #666; font-size: 0.9em; opacity: 0.7;'>
+                🆔 {space_id} {decorative_emojis[2]}
             </span>
         </div>
     </div>