Update app.py

app.py

@@ -25,9 +25,8 @@ def create_trend_chart(space_id, daily_ranks_df):
             markers=True
         )
         
-        # 차트를 더 크게 설정
         fig.update_layout(
-            height=500,  # 높이 증가
+            height=500,
             xaxis_title="Date",
             yaxis_title="Rank",
             yaxis=dict(
@@ -40,7 +39,7 @@ def create_trend_chart(space_id, daily_ranks_df):
             plot_bgcolor='white',
             paper_bgcolor='white',
             showlegend=False,
-            margin=dict(t=50, r=20, b=40, l=40)  # 여백 조정
+            margin=dict(t=50, r=20, b=40, l=40)
         )
         
         fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='lightgray')
@@ -59,7 +58,9 @@ def create_trend_chart(space_id, daily_ranks_df):
 
 def create_space_card(space_info):
     return f"""
-    <div style="
+    <div class="space-card" 
+         data-space-id="{space_info['id']}"
+         style="
         border: 1px solid #e5e7eb;
         border-radius: 8px;
         padding: 16px;
@@ -69,14 +70,20 @@ def create_space_card(space_info):
         display: inline-block;
         width: 250px;
         vertical-align: top;
-    ">
+        cursor: pointer;
+        transition: all 0.2s;
+    "
+    onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';"
+    onmouseout="this.style.transform='none';this.style.boxShadow='0 1px 3px rgba(0,0,0,0.1)';"
+    >
         <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;">
+               style="color: #2563eb; text-decoration: none;"
+               onclick="event.stopPropagation();">
                 {space_info['id']} 
                 <span style="font-size: 0.8em;">↗</span>
             </a>
@@ -91,7 +98,7 @@ def update_display(selection):
     global daily_ranks_df
     
     if not selection:
-        return None, "Please select a space"
+        return None, gr.HTML(value="<div style='text-align: center; padding: 20px; color: #666;'>Select a space to view details</div>")
     
     try:
         space_id = selection
@@ -100,7 +107,6 @@ def update_display(selection):
             daily_ranks_df['id'] == space_id
         ].sort_values('date').iloc[-1]
         
-        # 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>
@@ -124,47 +130,119 @@ def update_display(selection):
         
     except Exception as e:
         print(f"Error in update_display: {e}")
-        return None, f"Error processing data: {str(e)}"
+        return None, gr.HTML(value=f"<div style='color: red;'>Error processing data: {str(e)}</div>")
 
 def load_and_process_data():
-    # ... (기존 데이터 로딩 함수는 동일하게 유지)
-    pass
+    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) &
+            (daily_ranks_df['rank'] <= 100)
+        ].sort_values('rank').copy()
+        
+        return daily_ranks_df, top_100_spaces
+    except Exception as e:
+        print(f"Error loading data: {e}")
+        return pd.DataFrame(), pd.DataFrame()
 
 # 데이터 로드
 print("Loading initial data...")
 daily_ranks_df, top_100_spaces = load_and_process_data()
-print("Data loaded.")
+print("Data loaded successfully!")
 
 # Gradio 인터페이스 생성
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# Trending Spaces Dashboard")
+    gr.Markdown("""
+    # HF Space Ranking Tracker
     
-    with gr.Row():
-        trend_plot = gr.Plot(
-            label="Daily Rank Trend",
-            container=True
-        )
+    Track, analyze, and discover trending AI applications in the Hugging Face ecosystem. Our service continuously monitors and ranks all Spaces over a 30-day period, providing detailed analytics and daily ranking changes for the top 100 performers.
     
-    with gr.Row():
-        info_box = gr.HTML(
-            label="Space Details",
-            value="Select a space to view details"
-        )
+    ### What We Track
+    - Daily ranking changes for all Hugging Face Spaces
+    - Comprehensive trending scores based on 30-day activity
+    - Detailed performance metrics for top 100 Spaces
+    - Historical ranking data with daily granularity
     
-    # 그리드 형태의 스페이스 카드들
-    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>"
-        )
+    ### Key Features
+    - **Real-time Rankings**: Stay updated with daily rank changes
+    - **Interactive Visualizations**: Track ranking trajectories over time
+    - **Trend Analysis**: Identify emerging popular AI applications
+    - **Direct Access**: Quick links to explore trending Spaces
+    - **Performance Metrics**: Detailed trending scores and statistics
+    """)
+    
+    with gr.Tabs():
+        with gr.Tab("Dashboard"):
+            with gr.Row():
+                trend_plot = gr.Plot(
+                    label="Daily Rank Trend",
+                    container=True
+                )
+            
+            with gr.Row():
+                info_box = gr.HTML(
+                    value="<div style='text-align: center; padding: 20px; color: #666;'>Select a space to view details</div>"
+                )
+            
+            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>"
+                )
+                
+                space_selection = gr.Radio(
+                    choices=[row['id'] for _, row in top_100_spaces.iterrows()],
+                    value=None,
+                    visible=False
+                )
         
-        # 숨겨진 라디오 버튼 (상태 관리용)
-        space_selection = gr.Radio(
-            choices=[row['id'] for _, row in top_100_spaces.iterrows()],
-            value=None,
-            visible=False
-        )
+        with gr.Tab("About"):
+            gr.Markdown("""
+            ### Why Use HF Space Ranking Tracker?
+            - Discover trending AI demos and applications
+            - Monitor your Space's performance and popularity
+            - Identify emerging trends in the AI community
+            - Make data-driven decisions about your AI projects
+            - Stay ahead of the curve in AI application development
+            
+            Our dashboard provides a comprehensive view of the Hugging Face Spaces ecosystem, helping developers, researchers, and enthusiasts track and understand the dynamics of popular AI applications. Whether you're monitoring your own Space's performance or discovering new trending applications, HF Space Ranking Tracker offers the insights you need.
+            
+            Experience the pulse of the AI community through our daily updated rankings and discover what's making waves in the world of practical AI applications.
+            """)
     
     # JavaScript를 통한 카드 클릭 이벤트 처리
     space_grid.click(
@@ -176,7 +254,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             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();
                 }
             });