Update app.py

app.py

@@ -641,55 +641,136 @@ def fetch_items(item_type, search_query="", sort_by="rank", limit=1000):
         print(f"Error fetching items: {e}")
         return []
 
-# 인터페이스 수정
 def create_interface():
-    with gr.Blocks(title="HuggingFace Trending Board") as interface:
-        gr.Markdown("# 🤗 HuggingFace Trending TOP 300 Board")
+    with gr.Blocks(title="HuggingFace Trending Board", css="""
+        .search-sort-container { 
+            background: rgba(255,255,255,0.9);
+            border-radius: 15px;
+            padding: 20px;
+            margin: 10px 0;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .search-box { 
+            border: 2px solid #e1e1e1;
+            border-radius: 10px;
+            padding: 10px;
+            transition: all 0.3s ease;
+        }
+        .search-box:focus { 
+            border-color: #7b61ff;
+            box-shadow: 0 0 0 2px rgba(123,97,255,0.2);
+        }
+        .sort-radio { 
+            display: inline-flex;
+            gap: 15px;
+            background: #f5f5f5;
+            padding: 10px;
+            border-radius: 10px;
+        }
+        .refresh-btn {
+            background: linear-gradient(135deg, #7b61ff, #6366f1);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .refresh-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+        }
+    """) 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;'>
+                Explore, search, and sort through the top AI content from HuggingFace
+            </div>
+        """)
         
         with gr.Tabs() as tabs:
             # Spaces 탭
             with gr.Tab("🎯 Trending Spaces"):
-                with gr.Row():
-                    spaces_search = gr.Textbox(label="Search Spaces", placeholder="Enter search terms...")
-                    spaces_sort = gr.Radio(
-                        choices=["rank", "rising_rate", "popularity"],
-                        value="rank",
-                        label="Sort by",
-                        interactive=True
-                    )
-                    spaces_refresh_btn = gr.Button("Refresh", variant="primary")
+                with gr.Box(elem_classes="search-sort-container"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=2):
+                            spaces_search = gr.Textbox(
+                                label="🔍 Search Spaces",
+                                placeholder="Enter keywords to search...",
+                                elem_classes="search-box"
+                            )
+                        with gr.Column(scale=2):
+                            spaces_sort = gr.Radio(
+                                choices=["rank", "rising_rate", "popularity"],
+                                value="rank",
+                                label="📊 Sort by",
+                                interactive=True,
+                                elem_classes="sort-radio"
+                            )
+                        with gr.Column(scale=1):
+                            spaces_refresh_btn = gr.Button(
+                                "🔄 Refresh",
+                                variant="primary",
+                                elem_classes="refresh-btn"
+                            )
                 spaces_gallery = gr.HTML()
                 spaces_status = gr.Markdown("Ready")
             
             # Models 탭
             with gr.Tab("🤖 Trending Models"):
-                with gr.Row():
-                    models_search = gr.Textbox(label="Search Models", placeholder="Enter search terms...")
-                    models_sort = gr.Radio(
-                        choices=["rank", "rising_rate", "popularity"],
-                        value="rank",
-                        label="Sort by",
-                        interactive=True
-                    )
-                    models_refresh_btn = gr.Button("Refresh", variant="primary")
+                with gr.Box(elem_classes="search-sort-container"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=2):
+                            models_search = gr.Textbox(
+                                label="🔍 Search Models",
+                                placeholder="Enter keywords to search...",
+                                elem_classes="search-box"
+                            )
+                        with gr.Column(scale=2):
+                            models_sort = gr.Radio(
+                                choices=["rank", "rising_rate", "popularity"],
+                                value="rank",
+                                label="📊 Sort by",
+                                interactive=True,
+                                elem_classes="sort-radio"
+                            )
+                        with gr.Column(scale=1):
+                            models_refresh_btn = gr.Button(
+                                "🔄 Refresh",
+                                variant="primary",
+                                elem_classes="refresh-btn"
+                            )
                 models_gallery = gr.HTML()
                 models_status = gr.Markdown("Ready")
             
             # Datasets 탭
             with gr.Tab("📊 Trending Datasets"):
-                with gr.Row():
-                    datasets_search = gr.Textbox(label="Search Datasets", placeholder="Enter search terms...")
-                    datasets_sort = gr.Radio(
-                        choices=["rank", "rising_rate", "popularity"],
-                        value="rank",
-                        label="Sort by",
-                        interactive=True
-                    )
-                    datasets_refresh_btn = gr.Button("Refresh", variant="primary")
+                with gr.Box(elem_classes="search-sort-container"):
+                    with gr.Row(equal_height=True):
+                        with gr.Column(scale=2):
+                            datasets_search = gr.Textbox(
+                                label="🔍 Search Datasets",
+                                placeholder="Enter keywords to search...",
+                                elem_classes="search-box"
+                            )
+                        with gr.Column(scale=2):
+                            datasets_sort = gr.Radio(
+                                choices=["rank", "rising_rate", "popularity"],
+                                value="rank",
+                                label="📊 Sort by",
+                                interactive=True,
+                                elem_classes="sort-radio"
+                            )
+                        with gr.Column(scale=1):
+                            datasets_refresh_btn = gr.Button(
+                                "🔄 Refresh",
+                                variant="primary",
+                                elem_classes="refresh-btn"
+                            )
                 datasets_gallery = gr.HTML()
                 datasets_status = gr.Markdown("Ready")
 
-        # Event handlers
+        # Event handlers (기존 코드와 동일)
         spaces_refresh_btn.click(
             fn=get_trending_spaces,
             inputs=[spaces_search, spaces_sort],