Update app.py

app.py

@@ -246,6 +246,28 @@ def get_card(item: dict, index: int, card_type: str = "space") -> str:
     likes = format(item.get('likes', 0), ',')
     created = item.get('createdAt', '').split('T')[0]
     
+    # short_description 가져오기
+    short_description = item.get('cardData', {}).get('short_description', '')
+    
+    # title과 short_description을 포함한 헤더 HTML
+    title_html = f"""
+        <h3 style='
+            margin: 0 0 15px 0;
+            color: #333;
+            font-size: 1.3em;
+            line-height: 1.4;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-shadow: 1px 1px 1px rgba(255,255,255,0.8);'>
+            {title}
+            {f'<span style="display: block; font-size: 0.7em; color: #666; margin-top: 5px; font-weight: normal; font-style: italic;">{short_description}</span>' if short_description else ''}
+        </h3>
+    """
+
+    
     # URL 정의
     if card_type == "space":
         url = f"https://huggingface.co/spaces/{item_id}"
@@ -664,41 +686,56 @@ def create_interface():
             box-shadow: 0 0 0 2px rgba(123,97,255,0.2);
             background: linear-gradient(135deg, #ffffff, #f0f3ff);
         }
-        /* 정렬 라디오 버튼 컨테이너 스타일 수정 */
+        /* 정렬 라디오 버튼 컨테이너 수정 */
         .sort-radio { 
             display: flex !important;
-            justify-content: space-between !important;
+            justify-content: flex-start !important;
             gap: 10px !important;
             background: linear-gradient(135deg, #f5f5ff, #f0f0ff);
             padding: 12px;
             border-radius: 10px;
-            width: 300% !important;  /* 너비 2배로 증가 */
-            margin-right: -100%;
-            min-width: 400px !important;  /* 최소 너비 설정 */
+            width: 100% !important;
+        }
+        
+        /* 라디오 버튼 그룹 컨테이너 수정 */
+        .sort-radio > div {
+            display: flex !important;
+            gap: 10px !important;
+            width: auto !important;
+        }
+        
+        /* 각 라디오 버튼 항목 수정 */
+        .sort-radio > div > div {
+            width: 100px !important;  /* 고정 너비 설정 */
+            flex: none !important;    /* flex 성장 방지 */
         }
-        /* 정렬 라디오 버튼 레이블 스타일 */
+        
+        /* 라디오 버튼 레이블 수정 */
         .sort-radio label {
-            flex: 1 !important;
+            width: 100px !important;  /* 고정 너비 설정 */
+            padding: 8px 5px !important;
             text-align: center !important;
-            padding: 10px 15px !important;
             background: linear-gradient(135deg, #ffffff, #f8f9ff);
             border-radius: 8px;
             cursor: pointer;
             transition: all 0.3s ease;
             border: 1px solid rgba(123,97,255,0.1);
-            white-space: nowrap !important;  /* 텍스트 줄바꿈 방지 */
-            display: inline-block !important;
-            min-width: 100px !important;  /* 최소 너비 설정 */
+            white-space: nowrap !important;
+            font-size: 0.9em !important;
+            display: block !important;
         }
+        
         .sort-radio label:hover {
             background: linear-gradient(135deg, #f0f3ff, #e8ecff);
             border-color: rgba(123,97,255,0.3);
         }
+        
         .sort-radio input:checked + label {
             background: linear-gradient(135deg, #7b61ff, #6366f1);
             color: white;
             border-color: transparent;
         }
+
         /* 리프레시 버튼 스타일 수정 */
         .refresh-btn {
             background: linear-gradient(135deg, #7b61ff, #6366f1);
@@ -721,17 +758,7 @@ def create_interface():
             box-shadow: 0 4px 12px rgba(99,102,241,0.4);
             background: linear-gradient(135deg, #8b71ff, #7376f1);
         }
-        /* 라디오 버튼 그룹 컨테이너 강제 스타일 */
-        .sort-radio > div {
-            display: flex !important;
-            gap: 10px !important;
-            width: 100% !important;
-        }
-        /* 라디오 버튼 항목 강제 스타일 */
-        .sort-radio > div > div {
-            flex: 1 !important;
-            min-width: 100px !important;
-        }
+
     """) as interface:
         
         gr.Markdown("""