Update app.py

app.py

@@ -644,7 +644,7 @@ def fetch_items(item_type, search_query="", sort_by="rank", limit=1000):
 def create_interface():
     with gr.Blocks(title="HuggingFace Trending Board", css="""
         .search-sort-container { 
-            background: rgba(255,255,255,0.9);
+            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,240,255,0.95));
             border-radius: 15px;
             padding: 20px;
             margin: 10px 0;
@@ -653,32 +653,45 @@ def create_interface():
         .search-box { 
             border: 2px solid #e1e1e1;
             border-radius: 10px;
-            padding: 10px;
+            padding: 12px;
             transition: all 0.3s ease;
+            background: linear-gradient(135deg, #ffffff, #f8f9ff);
+            width: 150%;  /* 너비 증가 */
+            margin-right: -50%;  /* 오른쪽 여백 조정 */
         }
         .search-box:focus { 
             border-color: #7b61ff;
             box-shadow: 0 0 0 2px rgba(123,97,255,0.2);
+            background: linear-gradient(135deg, #ffffff, #f0f3ff);
         }
         .sort-radio { 
             display: flex;
             justify-content: space-between;
             gap: 10px;
-            background: #f5f5f5;
-            padding: 10px;
+            background: linear-gradient(135deg, #f5f5ff, #f0f0ff);
+            padding: 12px;
             border-radius: 10px;
+            width: 150%;  /* 너비 증가 */
+            margin-right: -50%;  /* 오른쪽 여백 조정 */
         }
         .sort-radio label {
             flex: 1;
             text-align: center;
-            padding: 8px;
-            background: white;
+            padding: 10px 15px;
+            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);
         }
         .sort-radio label:hover {
-            background: #e0e0e0;
+            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);
@@ -688,13 +701,20 @@ def create_interface():
             border-radius: 10px;
             cursor: pointer;
             transition: all 0.3s ease;
-            width: 120px;  /* 버튼 너비 조정 */
+            width: 120px;  /* 버튼 너비 */
+            height: 40px;  /* 버튼 높이 */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: auto;  /* 오른쪽 정렬 */
         }
         .refresh-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+            background: linear-gradient(135deg, #8b71ff, #7376f1);
         }
     """) as interface:
+        
         gr.Markdown("""
             # 🤗 HuggingFace Trending TOP 300 Board
             <div style='margin-bottom: 20px; padding: 10px; background: linear-gradient(135deg, rgba(123,97,255,0.1), rgba(99,102,241,0.1)); border-radius: 10px;'>
@@ -715,7 +735,7 @@ def create_interface():
                         )
                     with gr.Column(scale=2):
                         spaces_sort = gr.Radio(
-                            choices=["Rank", "Rising_Rate", "Popularity"],
+                            choices=["rank", "rising_rate", "popularity"],
                             value="rank",
                             label="📊 Sort by",
                             interactive=True,
@@ -742,7 +762,7 @@ def create_interface():
                         )
                     with gr.Column(scale=2):
                         models_sort = gr.Radio(
-                            choices=["Rank", "Rising_Rate", "Popularity"],
+                            choices=["rank", "rising_rate", "popularity"],
                             value="rank",
                             label="📊 Sort by",
                             interactive=True,
@@ -770,7 +790,7 @@ def create_interface():
                         )
                     with gr.Column(scale=2):
                         datasets_sort = gr.Radio(
-                            choices=["Rank", "Rising_Rate", "Popularity"],
+                            choices=["rank", "rising_rate", "popularity"],
                             value="rank",
                             label="📊 Sort by",
                             interactive=True,