Update app.py

app.py

@@ -42,7 +42,7 @@ target_spaces = {
     "NCSOFT/VARCO_Arena": "https://huggingface.co/spaces/NCSOFT/VARCO_Arena"
 }
 
-def get_trending_spaces(search_query="", sort_by="rank", progress=gr.Progress()):
+def get_trending_spaces(progress=gr.Progress()):
     """트렌딩 스페이스 가져오기"""
     url = "https://huggingface.co/api/spaces"
     
@@ -50,22 +50,64 @@ def get_trending_spaces(search_query="", sort_by="rank", progress=gr.Progress())
         progress(0, desc="Fetching spaces data...")
         params = {
             'full': 'true',
-            'limit': 1000  # 충분한 수의 스페이스를 가져오기 위해 증가
+            'limit': 300  # 상위 300개 스페이스 가져오기
         }
 
         response = requests.get(url, params=params)
         response.raise_for_status()
         all_spaces = response.json()
         
-        # target_spaces에 있는 스페이스만 필터링
-        spaces = [space for space in all_spaces if space.get('id', '') in target_spaces]
+        # 모든 스페이스의 순위 정보 저장
+        space_ranks = {space['id']: idx + 1 for idx, space in enumerate(all_spaces)}
         
-        progress(0.1, desc="Creating visualization...")
+        # target_spaces에 있는 스페이스만 필터링하고 실제 순위 정보 포함
+        spaces = []
+        for space in all_spaces:
+            if space.get('id', '') in target_spaces:
+                space['rank'] = space_ranks.get(space['id'], 'N/A')
+                spaces.append(space)
+        
+        # 순위별로 정렬
+        spaces.sort(key=lambda x: x['rank'])
+        
+        progress(0.3, desc="Creating visualization...")
         
         # 트렌드 시각화 생성
-        plot = create_trend_visualization(spaces)
+        fig = go.Figure()
+        
+        # 순위 데이터 준비
+        ids = [space['id'] for space in spaces]
+        ranks = [space['rank'] for space in spaces]
+        likes = [space.get('likes', 0) for space in spaces]
+        
+        # 막대 그래프 생성
+        fig.add_trace(go.Bar(
+            x=ids,
+            y=ranks,
+            text=[f"Rank: {r}<br>Likes: {l}" for r, l in zip(ranks, likes)],
+            textposition='auto',
+            marker_color='rgb(158,202,225)',
+            opacity=0.8
+        ))
         
-        progress(0.4, desc="Creating space cards...")
+        fig.update_layout(
+            title={
+                'text': 'Hugging Face Spaces Rankings (Top 300)',
+                'y':0.95,
+                'x':0.5,
+                'xanchor': 'center',
+                'yanchor': 'top'
+            },
+            xaxis_title='Space ID',
+            yaxis_title='Rank',
+            yaxis_autorange='reversed',  # 순위가 위에서 아래로 내려가도록
+            height=800,
+            showlegend=False,
+            template='plotly_white',
+            xaxis_tickangle=-45
+        )
+        
+        progress(0.6, desc="Creating space cards...")
         
         # 스페이스 카드 HTML 생성
         html_content = """
@@ -73,8 +115,9 @@ def get_trending_spaces(search_query="", sort_by="rank", progress=gr.Progress())
             <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
         """
         
-        for idx, space in enumerate(spaces):
+        for space in spaces:
             space_id = space.get('id', '')
+            rank = space.get('rank', 'N/A')
             likes = space.get('likes', 0)
             title = space.get('title', 'No Title')
             description = space.get('description', 'No Description')[:100]
@@ -87,7 +130,7 @@ def get_trending_spaces(search_query="", sort_by="rank", progress=gr.Progress())
                 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                 transition: transform 0.2s;
             '>
-                <h3 style='color: #34495e;'>#{idx + 1} - {space_id}</h3>
+                <h3 style='color: #34495e;'>Rank #{rank} - {space_id}</h3>
                 <p style='color: #7f8c8d;'>👍 Likes: {likes}</p>
                 <p style='color: #2c3e50;'>{title}</p>
                 <p style='color: #7f8c8d; font-size: 0.9em;'>{description}...</p>
@@ -106,21 +149,30 @@ def get_trending_spaces(search_query="", sort_by="rank", progress=gr.Progress())
                 </a>
             </div>
             """
-            progress((0.4 + 0.5 * idx/len(spaces)), desc=f"Loading space {idx+1}/{len(spaces)}...")
-            
+            progress((0.6 + 0.3 * spaces.index(space)/len(spaces)), 
+                    desc=f"Loading space {spaces.index(space)+1}/{len(spaces)}...")
+        
         html_content += "</div></div>"
         
         # 데이터 테이블 생성
-        df = create_data_table(spaces)
+        df = pd.DataFrame([{
+            'Rank': space.get('rank', 'N/A'),
+            'Space ID': space.get('id', ''),
+            'Likes': space.get('likes', 'N/A'),
+            'Title': space.get('title', 'N/A'),
+            'URL': target_spaces[space.get('id', '')]
+        } for space in spaces])
         
         progress(1.0, desc="Complete!")
-        return plot, html_content, df
+        return fig, html_content, df
         
     except Exception as e:
         error_html = f'<div style="color: red; padding: 20px;">Error: {str(e)}</div>'
         error_plot = create_error_plot()
         return error_plot, error_html, pd.DataFrame()
 
+# Gradio 인터페이스는 이전과 동일
+
 def create_trend_visualization(spaces_data):
     if not spaces_data:
         return create_error_plot()