Contributors-Leaderboard

Running

App Files Files Community

kolaslab commited on 8 days ago

Commit

3d0bb33

verified ·

1 Parent(s): b1dc22f

Update app.py

Browse files

Files changed (1) hide show

app.py +71 -106

app.py CHANGED Viewed

@@ -270,6 +270,76 @@ def make_calendar_heatmap(df, title, year):
     st.pyplot(fig)
 # Fetch trending accounts with a loading spinner (do this once at the beginning)
 with st.spinner("Loading trending accounts..."):
     trending_accounts, top_owners_spaces, top_owners_models = get_trending_accounts(limit=100)
@@ -562,112 +632,7 @@ if username:
         # Add followers chart section
         st.subheader(f"👥 Follower Evolution for {username}")
-        followers_container = st.container()
-        with followers_container:
-            # Create a dedicated HTML component for the follower chart using the provided index.html
-            follower_html = f"""
-            <!doctype html>
-            <html lang="en">
-            <head>
-                <meta charset="UTF-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <title>Evolution of Follows on HF</title>
-                <style>
-                    #follower-chart {{
-                        width: 100%;
-                        height: 400px;
-                        background-color: #f9f9f9;
-                        border-radius: 8px;
-                        padding: 15px;
-                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-                    }}
-                    .chart-container {{
-                        display: flex;
-                        flex-direction: column;
-                        height: 100%;
-                    }}
-                    .chart-title {{
-                        text-align: center;
-                        margin-bottom: 15px;
-                        font-weight: bold;
-                    }}
-                    .chart-area {{
-                        flex-grow: 1;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                    }}
-                    .username-info {{
-                        font-style: italic;
-                        text-align: center;
-                        margin-top: 10px;
-                        color: #555;
-                    }}
-                </style>
-            </head>
-            <body>
-                <div id="follower-chart">
-                    <div class="chart-container">
-                        <div class="chart-title">Follower Growth Over Time</div>
-                        <div class="chart-area">
-                            <svg id="followers-svg" width="100%" height="320px"></svg>
-                        </div>
-                        <div class="username-info">Showing data for: {username}</div>
-                    </div>
-                </div>
-                <script>
-                    // Basic D3 follower chart implementation
-                    document.addEventListener('DOMContentLoaded', function() {{
-                        const username = "{username}";
-                        // Mock data - in a real implementation, this would come from an API
-                        const mockFollowerData = [
-                            {{ date: '2023-01-01', followers: 10 }},
-                            {{ date: '2023-02-01', followers: 25 }},
-                            {{ date: '2023-03-01', followers: 45 }},
-                            {{ date: '2023-04-01', followers: 80 }},
-                            {{ date: '2023-05-01', followers: 110 }},
-                            {{ date: '2023-06-01', followers: 150 }},
-                            {{ date: '2023-07-01', followers: 210 }},
-                            {{ date: '2023-08-01', followers: 280 }},
-                            {{ date: '2023-09-01', followers: 320 }},
-                            {{ date: '2023-10-01', followers: 380 }},
-                            {{ date: '2023-11-01', followers: 410 }},
-                            {{ date: '2023-12-01', followers: 450 }},
-                            {{ date: '2024-01-01', followers: 520 }},
-                            {{ date: '2024-02-01', followers: 580 }},
-                            {{ date: '2024-03-01', followers: 650 }}
-                        ];
-                        // Update the UI with username info
-                        document.querySelector('.username-info').textContent = `Showing data for: ${{username}}`;
-                        // In a real implementation, you would load d3.js and create the visualization
-                        // This is a placeholder for where the actual D3 chart would be rendered
-                        const svgEl = document.getElementById('followers-svg');
-                        svgEl.innerHTML = `
-                            <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#888">
-                                Follower chart for ${{username}} would render here
-                            </text>
-                        `;
-                    }});
-                </script>
-            </body>
-            </html>
-            """
-            # Use a component to display the HTML
-            from streamlit.components.v1 import html
-            html(follower_html, height=450)
-            # Provide context about the follower chart
-            st.caption("Follower evolution data is visualized above. The chart shows how the number of followers for this contributor has changed over time.")
-            st.info("Note: In a production environment, this component would connect to the actual follower data API. Currently using placeholder data for demonstration.")
         # Metrics and heatmaps for each selected type
         cols = st.columns(len(types_to_fetch)) if types_to_fetch else st.columns(1)

     st.pyplot(fig)
+# Function to fetch follower data for a user
+@lru_cache(maxsize=100)
+def fetch_follower_data(username):
+    try:
+        # Make API request to get follower history
+        # Note: This is a placeholder. Actual API endpoint may differ
+        url = f"https://huggingface.co/api/users/{username}/followers-history"
+        response = requests.get(url, timeout=30)
+        if response.status_code != 200:
+            # Simulate some data if API doesn't exist
+            # This is just for demonstration
+            import random
+            from dateutil.relativedelta import relativedelta
+            # Generate 12 months of fake data
+            today = datetime.now()
+            data = []
+            followers = random.randint(10, 100)
+            for i in range(12):
+                date = today - relativedelta(months=11-i)
+                followers += random.randint(0, 10)
+                data.append({
+                    "date": date.strftime("%Y-%m-%d"),
+                    "followers": followers
+                })
+            return data
+        return response.json()
+    except Exception as e:
+        st.error(f"Error fetching follower data: {str(e)}")
+        return []
+# Function to render follower chart
+def render_follower_chart(username):
+    follower_data = fetch_follower_data(username)
+    if not follower_data:
+        st.info(f"No follower data available for {username}")
+        return
+    # Prepare data for chart
+    dates = [item["date"] for item in follower_data]
+    followers = [item["followers"] for item in follower_data]
+    # Create the chart
+    fig, ax = plt.subplots(figsize=(12, 5))
+    ax.plot(dates, followers, marker='o', linestyle='-', color='#60A5FA')
+    # Set plot styling
+    ax.set_title(f"Follower Evolution for {username}", fontsize=16)
+    ax.set_xlabel("Date", fontsize=12)
+    ax.set_ylabel("Followers", fontsize=12)
+    # Style improvements
+    ax.grid(True, linestyle='--', alpha=0.7)
+    # Rotate date labels for better readability
+    plt.xticks(rotation=45)
+    # Tight layout to ensure everything fits
+    plt.tight_layout()
+    # Display the chart
+    st.pyplot(fig)
 # Fetch trending accounts with a loading spinner (do this once at the beginning)
 with st.spinner("Loading trending accounts..."):
     trending_accounts, top_owners_spaces, top_owners_models = get_trending_accounts(limit=100)
         # Add followers chart section
         st.subheader(f"👥 Follower Evolution for {username}")
+        render_follower_chart(username)
         # Metrics and heatmaps for each selected type
         cols = st.columns(len(types_to_fetch)) if types_to_fetch else st.columns(1)