Create app.py

app.py

@@ -0,0 +1,323 @@
+import gradio as gr
+import pandas as pd
+import plotly.express as px
+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,
+            height=400
+        )
+        
+        fig.update_layout(
+            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 get_duplicate_spaces(top_100_spaces):
+    # ID별 등장 횟수 계산
+    id_counts = top_100_spaces['id'].value_counts()
+    # 2회 이상 등장하는 ID만 필터링하고 내림차순 정렬
+    duplicates = id_counts[id_counts >= 2].sort_values(ascending=False)
+    return duplicates
+
+def create_duplicates_chart(duplicates):
+    if duplicates.empty:
+        return None
+    
+    # 데이터프레임으로 변환하여 그래프 생성
+    df = pd.DataFrame({'id': duplicates.index, 'count': duplicates.values}).reset_index(drop=True)
+    
+    fig = px.bar(
+        df,
+        x='count',
+        y='id',
+        orientation='h',  # 수평 막대 그래프
+        title="Spaces with Multiple Entries in Top 100",
+        labels={'count': 'Number of Entries', 'id': 'Space ID'},
+        height=400,
+        text='count'  # 값 표시
+    )
+    
+    fig.update_layout(
+        showlegend=False,
+        margin=dict(t=50, r=20, b=40, l=200),  # 왼쪽 여백 증가
+        plot_bgcolor='white',
+        paper_bgcolor='white',
+        yaxis={'categoryorder': 'total ascending'},  # ID를 값에 따라 정렬
+        xaxis_title="Number of Entries",
+        yaxis_title="Space ID",
+        hoverlabel=dict(bgcolor="white"),
+        hovermode='y'
+    )
+    
+    fig.update_traces(
+        marker_color='#4CAF50',
+        textposition='outside',
+        textfont=dict(size=12)
+    )
+    
+    # 그리드 추가
+    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor='lightgray')
+    
+    return fig
+
+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:
+    gr.Markdown("""
+    # HF Space Ranking Tracker
+    
+    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.Tabs():
+        with gr.Tab("Dashboard"):
+            with gr.Row(variant="panel"):
+                with gr.Column(scale=7):
+                    trend_plot = gr.Plot(
+                        label="Daily Rank Trend",
+                        container=True
+                    )
+                with gr.Column(scale=3):
+                    duplicates_chart = create_duplicates_chart(get_duplicate_spaces(top_100_spaces))
+                    duplicates_plot = gr.Plot(
+                        value=duplicates_chart,
+                        label="Multiple Entries Analysis",
+                        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>"
+                )
+            
+            # 라디오 버튼을 먼저 정의
+            space_selection = gr.Radio(
+                choices=[row['id'] for _, row in top_100_spaces.iterrows()],
+                value=None,
+                visible=False
+            )
+            
+            # HTML에서 JavaScript 이벤트를 직접 처리
+            html_content = """
+            <div style='display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;'>
+            """ + "".join([
+                f"""
+                <div class="space-card" 
+                     data-space-id="{row['id']}"
+                     style="
+                    border: 1px solid #e5e7eb;
+                    border-radius: 8px;
+                    padding: 16px;
+                    margin: 8px;
+                    background-color: hsl(210, {max(30, 90 - (row['rank'] / 100 * 60))}%, {min(97, 85 + (row['rank'] / 100 * 10))}%);
+                    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(row['rank'])}
+                    </div>
+                    <div style="margin-bottom: 8px;">
+                        {row['id']}
+                    </div>
+                    <div style="color: #666; margin-bottom: 12px;">
+                        Score: {row['trendingScore']:.2f}
+                    </div>
+                    <div style="display: flex; gap: 8px;">
+                        <a href="https://huggingface.co/spaces/{row['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.preventDefault(); gradioEvent('{row['id']}');"
+                                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>
+                """
+                for _, row in top_100_spaces.iterrows()
+            ]) + """
+            </div>
+            <script>
+            function gradioEvent(spaceId) {
+                const radio = document.querySelector(`input[type="radio"][value="${spaceId}"]`);
+                if (radio) {
+                    radio.checked = true;
+                    const event = new Event('change');
+                    radio.dispatchEvent(event);
+                }
+            }
+            </script>
+            """
+            
+            with gr.Row():
+                space_grid = gr.HTML(value=html_content)
+        
+        with gr.Tab("About"):
+            gr.Markdown("""
+            ### Our Tracking System
+            
+            #### 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
+            
+            #### 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
+            
+            ### 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.
+            """)
+    
+    # 라디오 버튼 변경 이벤트 연결
+    space_selection.change(
+        fn=update_display,
+        inputs=[space_selection],
+        outputs=[trend_plot, info_box],
+        api_name="update_display"
+    )
+
+if __name__ == "__main__":
+    demo.launch(share=True)