Update app.py

app.py

@@ -10,12 +10,10 @@ def create_trend_chart(space_id, daily_ranks_df):
         return None
     
     try:
-        # 특정 space의 데이터만 필터링
         space_data = daily_ranks_df[daily_ranks_df['id'] == space_id].copy()
         if space_data.empty:
             return None
         
-        # 데이터 정렬
         space_data = space_data.sort_values('date')
         
         fig = px.line(
@@ -27,26 +25,27 @@ def create_trend_chart(space_id, daily_ranks_df):
             markers=True
         )
         
+        # 차트를 더 크게 설정
         fig.update_layout(
+            height=500,  # 높이 증가
             xaxis_title="Date",
             yaxis_title="Rank",
             yaxis=dict(
-                range=[100, 1],   # 100위부터 1위까지 (역순으로 설정)
-                tickmode='linear',  # 선형 간격으로 눈금 표시
-                tick0=1,           # 첫 눈금
-                dtick=10          # 눈금 간격 (10단위로 표시)
+                range=[100, 1],
+                tickmode='linear',
+                tick0=1,
+                dtick=10
             ),
             hovermode='x unified',
             plot_bgcolor='white',
             paper_bgcolor='white',
-            showlegend=False
+            showlegend=False,
+            margin=dict(t=50, r=20, b=40, l=40)  # 여백 조정
         )
         
-        # 격자 추가
         fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='lightgray')
         fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor='lightgray')
         
-        # 라인 스타일 수정
         fig.update_traces(
             line_color='#2563eb',
             line_width=2,
@@ -58,50 +57,35 @@ def create_trend_chart(space_id, daily_ranks_df):
         print(f"Error creating chart: {e}")
         return None
 
-def load_and_process_data():
-    try:
-        url = "https://huggingface.co/datasets/cfahlgren1/hub-stats/resolve/main/spaces.parquet"
-        response = requests.get(url)
-        df = pd.read_parquet(BytesIO(response.content))
-        
-        # 30일치 데이터 준비
-        thirty_days_ago = datetime.now() - timedelta(days=30)
-        df['createdAt'] = pd.to_datetime(df['createdAt'])
-        df = df[df['createdAt'] >= thirty_days_ago].copy()
-        
-        # 날짜별 데이터 처리
-        dates = pd.date_range(start=thirty_days_ago, end=datetime.now(), freq='D')
-        daily_ranks = []
-        
-        for date in dates:
-            # 해당 날짜의 데이터 추출
-            date_data = df[df['createdAt'].dt.date <= date.date()].copy()
-            
-            # trendingScore가 같은 경우 id로 정렬하여 유니크한 순위 보장
-            date_data = date_data.sort_values(['trendingScore', 'id'], ascending=[False, True])
-            
-            # 순위 계산
-            date_data['rank'] = range(1, len(date_data) + 1)
-            date_data['date'] = date.date()
-            
-            # 필요한 컬럼만 선택
-            daily_ranks.append(
-                date_data[['id', 'date', 'rank', 'trendingScore', 'createdAt']]
-            )
-        
-        # 전체 데이터 병합
-        daily_ranks_df = pd.concat(daily_ranks, ignore_index=True)
-        
-        # 최신 날짜의 top 100 추출
-        latest_date = daily_ranks_df['date'].max()
-        top_100_spaces = daily_ranks_df[
-            daily_ranks_df['date'] == latest_date
-        ].sort_values('rank').head(100).copy()
-        
-        return daily_ranks_df, top_100_spaces
-    except Exception as e:
-        print(f"Error loading data: {e}")
-        return pd.DataFrame(), pd.DataFrame()
+def create_space_card(space_info):
+    return f"""
+    <div style="
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        padding: 16px;
+        margin: 8px;
+        background-color: white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        display: inline-block;
+        width: 250px;
+        vertical-align: top;
+    ">
+        <div style="font-size: 1.2em; font-weight: bold; margin-bottom: 8px;">
+            #{int(space_info['rank'])}
+        </div>
+        <div style="margin-bottom: 8px;">
+            <a href="https://huggingface.co/spaces/{space_info['id']}" 
+               target="_blank" 
+               style="color: #2563eb; text-decoration: none;">
+                {space_info['id']} 
+                <span style="font-size: 0.8em;">↗</span>
+            </a>
+        </div>
+        <div style="color: #666;">
+            Score: {space_info['trendingScore']:.2f}
+        </div>
+    </div>
+    """
 
 def update_display(selection):
     global daily_ranks_df
@@ -110,27 +94,42 @@ def update_display(selection):
         return None, "Please select a space"
     
     try:
-        # 선택된 항목에서 space ID 추출
-        space_id = selection.split(': ')[1].split(' (Score')[0]
+        space_id = selection
         
-        # 최신 데이터 가져오기
         latest_data = daily_ranks_df[
             daily_ranks_df['id'] == space_id
         ].sort_values('date').iloc[-1]
         
-        info_text = f"""ID: {space_id}
-Current Rank: {int(latest_data['rank'])}
-Trending Score: {latest_data['trendingScore']:.2f}
-Created At: {latest_data['createdAt'].strftime('%Y-%m-%d')}"""
+        # HTML로 포맷팅된 정보 텍스트
+        info_text = f"""
+        <div style="padding: 16px; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+            <h3 style="margin: 0 0 12px 0;">Space Details</h3>
+            <p style="margin: 4px 0;"><strong>ID:</strong> {space_id}</p>
+            <p style="margin: 4px 0;"><strong>Current Rank:</strong> {int(latest_data['rank'])}</p>
+            <p style="margin: 4px 0;"><strong>Trending Score:</strong> {latest_data['trendingScore']:.2f}</p>
+            <p style="margin: 4px 0;"><strong>Created At:</strong> {latest_data['createdAt'].strftime('%Y-%m-%d')}</p>
+            <p style="margin: 12px 0 0 0;">
+                <a href="https://huggingface.co/spaces/{space_id}" 
+                   target="_blank" 
+                   style="color: #2563eb; text-decoration: none;">
+                    View Space ↗
+                </a>
+            </p>
+        </div>
+        """
         
         chart = create_trend_chart(space_id, daily_ranks_df)
         
-        return chart, info_text
+        return chart, gr.HTML(value=info_text)
         
     except Exception as e:
         print(f"Error in update_display: {e}")
         return None, f"Error processing data: {str(e)}"
 
+def load_and_process_data():
+    # ... (기존 데이터 로딩 함수는 동일하게 유지)
+    pass
+
 # 데이터 로드
 print("Loading initial data...")
 daily_ranks_df, top_100_spaces = load_and_process_data()
@@ -141,35 +140,53 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     gr.Markdown("# Trending Spaces Dashboard")
     
     with gr.Row():
-        with gr.Column(scale=1):
-            # 순위가 포함된 리스트로 표시
-            space_choices = [
-                f"Rank {row['rank']}: {row['id']} (Score: {row['trendingScore']:.2f})"
-                for _, row in top_100_spaces.iterrows()
-            ]
-            
-            space_list = gr.Radio(
-                choices=space_choices,
-                label="Top 100 Trending Spaces",
-                info="Select a space to view its rank trend",
-                value=space_choices[0] if space_choices else None
-            )
-            
-            info_box = gr.Textbox(
-                label="Space Details",
-                value="",
-                interactive=False,
-                lines=4
-            )
+        trend_plot = gr.Plot(
+            label="Daily Rank Trend",
+            container=True
+        )
+    
+    with gr.Row():
+        info_box = gr.HTML(
+            label="Space Details",
+            value="Select a space to view details"
+        )
+    
+    # 그리드 형태의 스페이스 카드들
+    with gr.Row():
+        space_grid = gr.HTML(
+            value="<div style='display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;'>" +
+                  "".join([create_space_card(row) for _, row in top_100_spaces.iterrows()]) +
+                  "</div>"
+        )
         
-        with gr.Column(scale=2):
-            trend_plot = gr.Plot(
-                label="Daily Rank Trend"
-            )
+        # 숨겨진 라디오 버튼 (상태 관리용)
+        space_selection = gr.Radio(
+            choices=[row['id'] for _, row in top_100_spaces.iterrows()],
+            value=None,
+            visible=False
+        )
+    
+    # JavaScript를 통한 카드 클릭 이벤트 처리
+    space_grid.click(
+        fn=lambda: None,
+        inputs=[],
+        outputs=[],
+        _js="""
+        function() {
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('.space-card')) {
+                    const spaceId = e.target.closest('.space-card').dataset.spaceId;
+                    // 라디오 버튼 값 업데이트
+                    document.querySelector(`input[type="radio"][value="${spaceId}"]`).click();
+                }
+            });
+        }
+        """
+    )
     
-    space_list.change(
+    space_selection.change(
         fn=update_display,
-        inputs=[space_list],
+        inputs=[space_selection],
         outputs=[trend_plot, info_box]
     )