Update app.py

app.py

@@ -5,7 +5,183 @@ from datetime import datetime, timedelta
 import requests
 from io import BytesIO
 
-[이전 함수들은 동일하게 유지...]
+def create_trend_chart(space_id, daily_ranks_df):
+    if space_id is None or daily_ranks_df.empty:
+        return None
+    
+    try:
+        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(
+            space_data,
+            x='date',
+            y='rank',
+            title=f'Daily Rank Trend for {space_id}',
+            labels={'date': 'Date', 'rank': 'Rank'},
+            markers=True
+        )
+        
+        fig.update_layout(
+            height=500,
+            xaxis_title="Date",
+            yaxis_title="Rank",
+            yaxis=dict(
+                range=[100, 1],
+                tickmode='linear',
+                tick0=1,
+                dtick=10
+            ),
+            hovermode='x unified',
+            plot_bgcolor='white',
+            paper_bgcolor='white',
+            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,
+            marker=dict(size=8, color='#2563eb')
+        )
+        
+        return fig
+    except Exception as e:
+        print(f"Error creating chart: {e}")
+        return None
+
+def create_space_card(space_info):
+    # 순위에 따른 파스텔 색상 계산
+    hue = 210  # 파란색 계열
+    saturation = max(30, 90 - (space_info['rank'] / 100 * 60))  # 순위가 높을수록 더 선명한 색상
+    lightness = min(97, 85 + (space_info['rank'] / 100 * 10))  # 순위가 높을수록 더 밝은 색상
+    
+    return f"""
+    <div class="space-card" 
+         data-space-id="{space_info['id']}"
+         style="
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        padding: 16px;
+        margin: 8px;
+        background-color: hsl({hue}, {saturation}%, {lightness}%);
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        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;">
+            {space_info['id']}
+        </div>
+        <div style="color: #666; margin-bottom: 12px;">
+            Score: {space_info['trendingScore']:.2f}
+        </div>
+        <div style="display: flex; gap: 8px;">
+            <a href="https://huggingface.co/spaces/{space_info['id']}" 
+               target="_blank" 
+               style="padding: 6px 12px; background-color: white; color: #2563eb; text-decoration: none; border-radius: 4px; font-size: 0.9em; border: 1px solid #2563eb;"
+               onclick="event.stopPropagation();">
+                View Space ↗
+            </a>
+            <button onclick="event.stopPropagation(); document.querySelector('input[type=\'radio\'][value=\'{space_info['id']}\']').click();"
+                    style="padding: 6px 12px; background-color: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em;">
+                View Trend
+            </button>
+        </div>
+    </div>
+    """
+
+def update_display(selection):
+    global daily_ranks_df
+    
+    if not selection:
+        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
+        
+        latest_data = daily_ranks_df[
+            daily_ranks_df['id'] == space_id
+        ].sort_values('date').iloc[-1]
+        
+        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, gr.HTML(value=info_text)
+        
+    except Exception as e:
+        print(f"Error in update_display: {e}")
+        return None, gr.HTML(value=f"<div style='color: red;'>Error processing data: {str(e)}</div>")
+
+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))
+        
+        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()
+            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)
+        
+        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 successfully!")
 
 # Gradio 인터페이스 생성
 with gr.Blocks(theme=gr.themes.Soft()) as demo: