Update app.py

app.py

@@ -661,12 +661,25 @@ def create_interface():
             box-shadow: 0 0 0 2px rgba(123,97,255,0.2);
         }
         .sort-radio { 
-            display: inline-flex;
-            gap: 15px;
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
             background: #f5f5f5;
             padding: 10px;
             border-radius: 10px;
         }
+        .sort-radio label {
+            flex: 1;
+            text-align: center;
+            padding: 8px;
+            background: white;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .sort-radio label:hover {
+            background: #e0e0e0;
+        }
         .refresh-btn {
             background: linear-gradient(135deg, #7b61ff, #6366f1);
             color: white;
@@ -675,6 +688,7 @@ def create_interface():
             border-radius: 10px;
             cursor: pointer;
             transition: all 0.3s ease;
+            width: 120px;  /* 버튼 너비 조정 */
         }
         .refresh-btn:hover {
             transform: translateY(-2px);
@@ -691,86 +705,87 @@ def create_interface():
         with gr.Tabs() as tabs:
             # Spaces 탭
             with gr.Tab("🎯 Trending Spaces"):
+                gr.Markdown("Shows top 300 trending spaces with AI ratings")                
                 with gr.Row(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"
-                            )
+                    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")
+                spaces_status = gr.Markdown("Loading...")
             
             # Models 탭
             with gr.Tab("🤖 Trending Models"):
+                gr.Markdown("Shows top 300 trending models with AI ratings")                
                 with gr.Row(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"
-                            )
+                    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")
+                models_status = gr.Markdown("Loading...")
             
             # Datasets 탭
             with gr.Tab("📊 Trending Datasets"):
+                gr.Markdown("Shows top 300 trending datasets with AI ratings")
+                
                 with gr.Row(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"
-                            )
+                    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")
+                datasets_status = gr.Markdown("Loading...")
 
-        # Event handlers (나머지 코드는 동일)
+        # Event handlers
         spaces_refresh_btn.click(
             fn=get_trending_spaces,
             inputs=[spaces_search, spaces_sort],
@@ -827,6 +842,23 @@ def create_interface():
             outputs=[datasets_gallery, datasets_status]
         )
 
+        # 초기 데이터 로드
+        interface.load(
+            fn=get_trending_spaces,
+            inputs=[spaces_search, spaces_sort],
+            outputs=[spaces_gallery, spaces_status]
+        )
+        interface.load(
+            fn=get_models,
+            inputs=[models_search, models_sort],
+            outputs=[models_gallery, models_status]
+        )
+        interface.load(
+            fn=get_datasets,
+            inputs=[datasets_search, datasets_sort],
+            outputs=[datasets_gallery, datasets_status]
+        )
+
     return interface
 
 if __name__ == "__main__":