Update app.py

app.py

@@ -9,32 +9,133 @@ from functools import lru_cache
 import time
 import requests
 from collections import Counter
+import numpy as np
 
 st.set_page_config(page_title="HF Contributions", layout="wide", initial_sidebar_state="expanded")
 
-# Set custom sidebar width - UPDATED to 40% of the screen
+# 향상된 UI 스타일링
 st.markdown("""
 <style>
+    /* 사이드바 스타일링 */
     [data-testid="stSidebar"] {
-        min-width: 40vw !important;
-        max-width: 40vw !important;
+        min-width: 35vw !important;
+        max-width: 35vw !important;
+        background-color: #f8f9fa;
+        padding: 1rem;
+        border-right: 1px solid #e9ecef;
+    }
+    
+    /* 헤더 스타일링 */
+    h1, h2, h3 {
+        color: #1e88e5;
+        font-weight: 700;
+    }
+    h1 {
+        font-size: 2.5rem;
+        margin-bottom: 1.5rem;
+        border-bottom: 2px solid #e0e0e0;
+        padding-bottom: 0.5rem;
+    }
+    h2 {
+        font-size: 1.8rem;
+        margin-top: 1.5rem;
+    }
+    h3 {
+        font-size: 1.4rem;
+        margin-top: 1rem;
+    }
+    
+    /* 카드 스타일링 */
+    div[data-testid="stMetric"] {
+        background-color: #f1f8fe;
+        border-radius: 10px;
+        padding: 1rem;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        margin-bottom: 1rem;
+    }
+    
+    /* 차트 컨테이너 스타일링 */
+    .chart-container {
+        background-color: white;
+        border-radius: 10px;
+        padding: 1rem;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        margin: 1rem 0;
+    }
+    
+    /* 테이블 스타일링 */
+    div[data-testid="stDataFrame"] {
+        background-color: white;
+        border-radius: 10px;
+        padding: 0.5rem;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    }
+    
+    /* 탭 스타일링 */
+    button[data-baseweb="tab"] {
+        font-weight: 600;
+    }
+    
+    /* 서브헤더 배경 */
+    .subheader {
+        background-color: #f1f8fe;
+        padding: 0.5rem 1rem;
+        border-radius: 5px;
+        margin-bottom: 1rem;
+    }
+    
+    /* 정보 뱃지 */
+    .info-badge {
+        background-color: #e3f2fd;
+        color: #1976d2;
+        padding: 0.3rem 0.7rem;
+        border-radius: 20px;
+        display: inline-block;
+        font-weight: 500;
+        margin-right: 0.5rem;
+    }
+    
+    /* 프로그레스 바 */
+    div[data-testid="stProgress"] {
+        height: 0.5rem !important;
+    }
+    
+    /* 버튼 스타일링 */
+    .stButton button {
+        background-color: #1e88e5;
+        color: white;
+        border: none;
+        font-weight: 500;
+    }
+    
+    /* 경고/성공 메시지 개선 */
+    div[data-testid="stAlert"] {
+        border-radius: 10px;
+        margin: 1rem 0;
+    }
+    
+    /* 카테고리 분석 섹션 */
+    .category-section {
+        background-color: white;
+        border-radius: 10px;
+        padding: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }
 </style>
 """, unsafe_allow_html=True)
-api = HfApi()
 
+api = HfApi()
 
 # Cache for API responses
 @lru_cache(maxsize=1000)
 def cached_repo_info(repo_id, repo_type):
     return api.repo_info(repo_id=repo_id, repo_type=repo_type)
 
-
 @lru_cache(maxsize=1000)
 def cached_list_commits(repo_id, repo_type):
     return list(api.list_repo_commits(repo_id=repo_id, repo_type=repo_type))
 
-
 @lru_cache(maxsize=100)
 def cached_list_items(username, kind):
     if kind == "model":
@@ -45,7 +146,6 @@ def cached_list_items(username, kind):
         return list(api.list_spaces(author=username))
     return []
 
-
 # Function to fetch trending accounts and create stats
 @lru_cache(maxsize=1)
 def get_trending_accounts(limit=100):
@@ -126,7 +226,6 @@ def get_trending_accounts(limit=100):
         fallback_authors = ["ritvik77", "facebook", "google", "stabilityai", "Salesforce", "tiiuae", "bigscience"]
         return fallback_authors, [(author, 0) for author in fallback_authors], [(author, 0) for author in fallback_authors]
 
-
 # Rate limiting
 class RateLimiter:
     def __init__(self, calls_per_second=10):
@@ -140,10 +239,8 @@ class RateLimiter:
             time.sleep((1.0 / self.calls_per_second) - time_since_last_call)
         self.last_call = time.time()
 
-
 rate_limiter = RateLimiter()
 
-
 # Function to fetch commits for a repository (optimized)
 def fetch_commits_for_repo(repo_id, repo_type, username, selected_year):
     try:
@@ -151,7 +248,7 @@ def fetch_commits_for_repo(repo_id, repo_type, username, selected_year):
         # Skip private/gated repos upfront
         repo_info = cached_repo_info(repo_id, repo_type)
         if repo_info.private or (hasattr(repo_info, 'gated') and repo_info.gated):
-            return [], []
+            return [], 0
 
         # Get initial commit date
         initial_commit_date = pd.to_datetime(repo_info.created_at).tz_localize(None).date()
@@ -172,10 +269,9 @@ def fetch_commits_for_repo(repo_id, repo_type, username, selected_year):
                 commit_count += 1
 
         return commit_dates, commit_count
-    except Exception:
+    except Exception as e:
         return [], 0
 
-
 # Function to get commit events for a user (optimized)
 def get_commit_events(username, kind=None, selected_year=None):
     commit_dates = []
@@ -210,7 +306,6 @@ def get_commit_events(username, kind=None, selected_year=None):
         df = df.drop_duplicates()  # Remove any duplicate dates
     return df, items_with_type
 
-
 # Calendar heatmap function (optimized)
 def make_calendar_heatmap(df, title, year):
     if df.empty:
@@ -252,7 +347,7 @@ def make_calendar_heatmap(df, title, year):
     norm = BoundaryNorm(bounds, cmap.N)
 
     # Create plot more efficiently
-    fig, ax = plt.subplots(figsize=(12, 1.2))
+    fig, ax = plt.subplots(figsize=(12, 1.5))
 
     # Convert pivot values to integers to ensure proper color mapping
     pivot_int = pivot.astype(int)
@@ -261,15 +356,19 @@ def make_calendar_heatmap(df, title, year):
     sns.heatmap(pivot_int, ax=ax, cmap=cmap, norm=norm, linewidths=0.5, linecolor="white",
                 square=True, cbar=False, yticklabels=["M", "T", "W", "T", "F", "S", "S"])
 
-    ax.set_title(f"{title}", fontsize=12, pad=10)
+    ax.set_title(f"{title}", fontsize=14, pad=10)
     ax.set_xlabel("")
     ax.set_ylabel("")
     ax.set_xticks(month_positions)
-    ax.set_xticklabels(month_labels, fontsize=8)
-    ax.set_yticklabels(ax.get_yticklabels(), rotation=0, fontsize=8)
+    ax.set_xticklabels(month_labels, fontsize=10)
+    ax.set_yticklabels(ax.get_yticklabels(), rotation=0, fontsize=10)
+    
+    # 시각적 향상을 위한 figure 스타일링
+    fig.tight_layout()
+    fig.patch.set_facecolor('#F8F9FA')
+    
     st.pyplot(fig)
 
-
 # Function to create a fancy contribution radar chart
 def create_contribution_radar(username, models_count, spaces_count, datasets_count, commits_count):
     # Create radar chart for contribution metrics
@@ -286,31 +385,41 @@ def create_contribution_radar(username, models_count, spaces_count, datasets_cou
     
     normalized += normalized[:1]  # Close the loop
     
-    fig, ax = plt.subplots(figsize=(6, 6), subplot_kw={'polar': True})
+    fig, ax = plt.subplots(figsize=(6, 6), subplot_kw={'polar': True}, facecolor='#F8F9FA')
     
-    # Add background grid
+    # Add background grid with improved styling
     ax.set_theta_offset(np.pi / 2)
     ax.set_theta_direction(-1)
-    ax.set_thetagrids(np.degrees(angles[:-1]), categories)
+    ax.set_thetagrids(np.degrees(angles[:-1]), categories, fontsize=12, fontweight='bold')
     
-    # Draw the chart
+    # 그리드 스타일링 개선
+    ax.grid(color='#CCCCCC', linestyle='-', linewidth=0.5, alpha=0.7)
+    
+    # Draw the chart with improved color scheme
     ax.fill(angles, normalized, color='#4CAF50', alpha=0.25)
-    ax.plot(angles, normalized, color='#4CAF50', linewidth=2)
+    ax.plot(angles, normalized, color='#4CAF50', linewidth=3)
     
-    # Add value labels
+    # Add value labels with improved styling
     for i, val in enumerate(values):
         angle = angles[i]
-        x = normalized[i] * np.cos(angle)
-        y = normalized[i] * np.sin(angle)
-        ax.text(angle, normalized[i] + 0.05, str(val), 
-                ha='center', va='center', fontsize=10, 
-                fontweight='bold')
+        x = (normalized[i] + 0.1) * np.cos(angle)
+        y = (normalized[i] + 0.1) * np.sin(angle)
+        ax.text(angle, normalized[i] + 0.1, str(val), 
+                ha='center', va='center', fontsize=12, 
+                fontweight='bold', color='#1976D2')
+    
+    # Add highlight circles
+    circles = [0.25, 0.5, 0.75, 1.0]
+    for circle in circles:
+        ax.plot(angles, [circle] * len(angles), color='gray', alpha=0.3, linewidth=0.5, linestyle='--')
     
-    ax.set_title(f"{username}'s Contribution Profile", fontsize=15, pad=20)
+    ax.set_title(f"{username}'s Contribution Profile", fontsize=16, pad=20, fontweight='bold')
+    
+    # 배경 원 없애기
+    ax.set_facecolor('#F8F9FA')
     
     return fig
 
-
 # Function to create contribution distribution pie chart
 def create_contribution_pie(model_commits, dataset_commits, space_commits):
     labels = ['Models', 'Datasets', 'Spaces']
@@ -323,22 +432,48 @@ def create_contribution_pie(model_commits, dataset_commits, space_commits):
     if not filtered_sizes:
         return None  # No data to show
     
-    fig, ax = plt.subplots(figsize=(6, 6))
+    # Use a more attractive color scheme
     colors = ['#FF9800', '#2196F3', '#4CAF50']
     filtered_colors = [color for color, size in zip(colors, sizes) if size > 0]
     
-    # Create exploded pie chart
-    explode = [0.05] * len(filtered_sizes)  # Explode all slices slightly
+    fig, ax = plt.subplots(figsize=(7, 7), facecolor='#F8F9FA')
     
-    ax.pie(filtered_sizes, labels=filtered_labels, colors=filtered_colors,
-           autopct='%1.1f%%', startangle=90, shadow=True, explode=explode)
-    ax.axis('equal')  # Equal aspect ratio ensures that pie is drawn as a circle
+    # Create exploded pie chart with improved styling
+    explode = [0.1] * len(filtered_sizes)  # Explode all slices for better visualization
     
-    ax.set_title('Distribution of Contributions by Type', fontsize=15)
+    wedges, texts, autotexts = ax.pie(
+        filtered_sizes, 
+        labels=None,  # We'll add custom labels
+        colors=filtered_colors,
+        autopct='%1.1f%%', 
+        startangle=90, 
+        shadow=True, 
+        explode=explode,
+        textprops={'fontsize': 14, 'weight': 'bold'},
+        wedgeprops={'edgecolor': 'white', 'linewidth': 2}
+    )
+    
+    # Customize the percentage text
+    for autotext in autotexts:
+        autotext.set_color('white')
+        autotext.set_fontsize(12)
+        autotext.set_weight('bold')
+    
+    # Add legend with custom styling
+    ax.legend(
+        wedges, 
+        [f"{label} ({size})" for label, size in zip(filtered_labels, filtered_sizes)],
+        title="Contribution Types",
+        loc="center left",
+        bbox_to_anchor=(0.85, 0.5),
+        fontsize=12
+    )
+    
+    ax.set_title('Distribution of Contributions by Type', fontsize=16, pad=20, fontweight='bold')
+    ax.axis('equal')  # Equal aspect ratio ensures that pie is drawn as a circle
     
     return fig
 
-
 # Function to create monthly activity chart
 def create_monthly_activity(df, year):
     if df.empty:
@@ -346,42 +481,58 @@ def create_monthly_activity(df, year):
     
     # Aggregate by month
     df['date'] = pd.to_datetime(df['date'])
-    df['month'] = df['date'].dt.strftime('%b')
-    monthly_counts = df.groupby('month')['date'].count().reindex(
-        pd.date_range(start=f'{year}-01-01', end=f'{year}-12-31', freq='MS').strftime('%b')
-    ).fillna(0)
+    df['month'] = df['date'].dt.month
+    df['month_name'] = df['date'].dt.strftime('%b')
     
-    # Create bar chart
-    fig, ax = plt.subplots(figsize=(12, 5))
-    months = monthly_counts.index
-    counts = monthly_counts.values
+    # Count by month and ensure all months are present
+    month_order = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    counts_by_month = df.groupby('month_name')['date'].count()
+    monthly_counts = pd.Series([counts_by_month.get(m, 0) for m in month_order], index=month_order)
     
-    bars = ax.bar(months, counts, color='#2196F3')
+    # Create bar chart with improved styling
+    fig, ax = plt.subplots(figsize=(14, 6), facecolor='#F8F9FA')
+    
+    # Create bars with gradient colors based on activity level
+    norm = plt.Normalize(0, monthly_counts.max() if monthly_counts.max() > 0 else 1)
+    colors = plt.cm.viridis(norm(monthly_counts.values))
+    
+    bars = ax.bar(monthly_counts.index, monthly_counts.values, color=colors, width=0.7)
     
     # Highlight the month with most activity
-    if counts.max() > 0:
-        max_idx = counts.argmax()
+    if monthly_counts.max() > 0:
+        max_idx = monthly_counts.argmax()
         bars[max_idx].set_color('#FF5722')
+        bars[max_idx].set_edgecolor('black')
+        bars[max_idx].set_linewidth(1.5)
     
-    # Add labels and styling
-    ax.set_title(f'Monthly Activity in {year}', fontsize=15)
-    ax.set_xlabel('Month', fontsize=12)
-    ax.set_ylabel('Number of Contributions', fontsize=12)
+    # Add labels and styling with enhanced design
+    ax.set_title(f'Monthly Activity in {year}', fontsize=18, pad=20, fontweight='bold')
+    ax.set_xlabel('Month', fontsize=14, labelpad=10)
+    ax.set_ylabel('Number of Contributions', fontsize=14, labelpad=10)
     
-    # Add value labels on top of bars
-    for i, count in enumerate(counts):
+    # Add value labels on top of bars with improved styling
+    for i, count in enumerate(monthly_counts.values):
         if count > 0:
-            ax.text(i, count + 0.5, str(int(count)), ha='center', fontsize=10)
+            ax.text(i, count + 0.5, str(int(count)), ha='center', fontsize=12, fontweight='bold')
     
-    # Add grid for better readability
-    ax.grid(axis='y', linestyle='--', alpha=0.7)
+    # Add grid for better readability with improved styling
+    ax.grid(axis='y', linestyle='--', alpha=0.7, color='#CCCCCC')
+    ax.set_axisbelow(True)  # Grid lines behind bars
+    
+    # Style the chart borders and background
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.spines['left'].set_linewidth(0.5)
+    ax.spines['bottom'].set_linewidth(0.5)
+    
+    # Adjust tick parameters for better look
+    ax.tick_params(axis='x', labelsize=12, pad=5)
+    ax.tick_params(axis='y', labelsize=12, pad=5)
     
-    plt.xticks(rotation=45)
     plt.tight_layout()
     
     return fig
 
-
 # Function to render follower growth simulation
 def simulate_follower_data(username, spaces_count, models_count, total_commits):
     # Simulate follower growth based on contribution metrics
@@ -409,73 +560,137 @@ def simulate_follower_data(username, spaces_count, models_count, total_commits):
     # Ensure end value matches our base_followers estimate
     followers[-1] = base_followers
     
-    # Create the chart
-    fig, ax = plt.subplots(figsize=(12, 5))
-    ax.plot(dates, followers, marker='o', linestyle='-', color='#9C27B0', markersize=5)
+    # Create the chart with improved styling
+    fig, ax = plt.subplots(figsize=(14, 6), facecolor='#F8F9FA')
     
-    # Add styling
-    ax.set_title(f"Estimated Follower Growth for {username}", fontsize=15)
-    ax.set_xlabel("Date", fontsize=12)
-    ax.set_ylabel("Followers", fontsize=12)
+    # Create gradient line for better visualization
+    points = np.array([dates, followers]).T.reshape(-1, 1, 2)
+    segments = np.concatenate([points[:-1], points[1:]], axis=1)
     
-    # Add grid for better readability
-    ax.grid(True, linestyle='--', alpha=0.7)
+    from matplotlib.collections import LineCollection
+    norm = plt.Normalize(0, len(segments))
+    lc = LineCollection(segments, cmap='viridis', norm=norm, linewidth=3, alpha=0.8)
+    lc.set_array(np.arange(len(segments)))
+    line = ax.add_collection(lc)
+    
+    # Add markers
+    ax.scatter(dates, followers, s=50, color='#9C27B0', alpha=0.8, zorder=10)
+    
+    # Add styling with enhanced design
+    ax.set_title(f"Estimated Follower Growth for {username}", fontsize=18, pad=20, fontweight='bold')
+    ax.set_xlabel("Date", fontsize=14, labelpad=10)
+    ax.set_ylabel("Followers", fontsize=14, labelpad=10)
+    
+    # Format the axes limits
+    ax.set_xlim(dates.min(), dates.max())
+    ax.set_ylim(0, max(followers) * 1.1)
+    
+    # Add grid for better readability with improved styling
+    ax.grid(True, linestyle='--', alpha=0.7, color='#CCCCCC')
+    ax.set_axisbelow(True)  # Grid lines behind plot
+    
+    # Style the chart borders and background
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.spines['left'].set_linewidth(0.5)
+    ax.spines['bottom'].set_linewidth(0.5)
+    
+    # Adjust tick parameters for better look
+    ax.tick_params(axis='x', labelsize=12, rotation=45)
+    ax.tick_params(axis='y', labelsize=12)
+    
+    # Add annotations for start and end points
+    ax.annotate(f"Start: {followers[0]}", 
+                xy=(dates[0], followers[0]),
+                xytext=(10, 10),
+                textcoords='offset points',
+                fontsize=12,
+                fontweight='bold',
+                color='#9C27B0',
+                bbox=dict(boxstyle="round,pad=0.3", fc="#F3E5F5", ec="#9C27B0", alpha=0.8))
+    
+    ax.annotate(f"Current: {followers[-1]}", 
+                xy=(dates[-1], followers[-1]),
+                xytext=(-10, 10),
+                textcoords='offset points',
+                fontsize=12,
+                fontweight='bold',
+                color='#9C27B0',
+                ha='right',
+                bbox=dict(boxstyle="round,pad=0.3", fc="#F3E5F5", ec="#9C27B0", alpha=0.8))
     
-    # Format date axis
-    plt.xticks(rotation=45)
     plt.tight_layout()
     
     return fig
 
-
 # Function to create ranking position visualization
 def create_ranking_chart(username, overall_rank, spaces_rank, models_rank):
     if not (overall_rank or spaces_rank or models_rank):
         return None
     
-    # Create a horizontal bar chart for rankings
-    fig, ax = plt.subplots(figsize=(10, 4))
+    # Create a horizontal bar chart for rankings with improved styling
+    fig, ax = plt.subplots(figsize=(12, 5), facecolor='#F8F9FA')
     
     categories = []
     positions = []
     colors = []
+    rank_values = []
     
     if overall_rank:
         categories.append('Overall')
         positions.append(101 - overall_rank)  # Invert rank for visualization (higher is better)
         colors.append('#673AB7')
+        rank_values.append(overall_rank)
     
     if spaces_rank:
         categories.append('Spaces')
         positions.append(101 - spaces_rank)
         colors.append('#2196F3')
+        rank_values.append(spaces_rank)
     
     if models_rank:
         categories.append('Models')
         positions.append(101 - models_rank)
         colors.append('#FF9800')
+        rank_values.append(models_rank)
     
-    # Create horizontal bars
-    bars = ax.barh(categories, positions, color=colors, alpha=0.7)
+    # Create horizontal bars with enhanced styling
+    bars = ax.barh(categories, positions, color=colors, alpha=0.8, height=0.6, 
+                  edgecolor='white', linewidth=1.5)
     
-    # Add rank values as text
+    # Add rank values as text with improved styling
     for i, bar in enumerate(bars):
-        rank_val = 0
-        if categories[i] == 'Overall': rank_val = overall_rank
-        elif categories[i] == 'Spaces': rank_val = spaces_rank
-        elif categories[i] == 'Models': rank_val = models_rank
-        
-        ax.text(bar.get_width() + 1, bar.get_y() + bar.get_height()/2, 
-                f'Rank #{rank_val}', va='center', fontsize=10, fontweight='bold')
+        ax.text(bar.get_width() + 2, bar.get_y() + bar.get_height()/2, 
+                f'Rank #{rank_values[i]}', va='center', fontsize=12, 
+                fontweight='bold', color=colors[i])
+    
+    # Set chart properties with enhanced styling
+    ax.set_xlim(0, 105)
+    ax.set_title(f"Ranking Positions for {username} (Top 100)", fontsize=18, pad=20, fontweight='bold')
+    ax.set_xlabel("Percentile (higher is better)", fontsize=14, labelpad=10)
+    
+    # Add explanatory text
+    ax.text(50, -0.6, "← Lower rank (higher number) | Higher rank (lower number) →", 
+            ha='center', va='center', fontsize=10, fontweight='bold', color='#666666')
     
-    # Set chart properties
-    ax.set_xlim(0, 100)
-    ax.set_title(f"Ranking Positions for {username} (Top 100)", fontsize=15)
-    ax.set_xlabel("Percentile (higher is better)", fontsize=12)
+    # Add a vertical line at 90th percentile to highlight top 10 with improved styling
+    ax.axvline(x=90, color='#FF5252', linestyle='--', alpha=0.7, linewidth=2)
+    ax.text(92, len(categories)/2, 'Top 10', color='#D32F2F', fontsize=12, 
+           rotation=90, va='center', fontweight='bold')
     
-    # Add a vertical line at 90th percentile to highlight top 10
-    ax.axvline(x=90, color='red', linestyle='--', alpha=0.5)
-    ax.text(91, 0.5, 'Top 10', color='red', fontsize=10, rotation=90, va='center')
+    # Style the chart borders and background
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.spines['left'].set_linewidth(0.5)
+    ax.spines['bottom'].set_linewidth(0.5)
+    
+    # Adjust tick parameters for better look
+    ax.tick_params(axis='x', labelsize=12)
+    ax.tick_params(axis='y', labelsize=14, pad=5)
+    
+    # Add grid for better readability
+    ax.grid(axis='x', linestyle='--', alpha=0.5, color='#CCCCCC')
+    ax.set_axisbelow(True)  # Grid lines behind bars
     
     # Invert x-axis to show ranking position more intuitively
     ax.invert_xaxis()
@@ -483,30 +698,23 @@ def create_ranking_chart(username, overall_rank, spaces_rank, models_rank):
     plt.tight_layout()
     return fig
 
-
-# Import additional libraries for advanced visualizations
-import numpy as np
-
 # 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)
 
 # Sidebar
 with st.sidebar:
-    st.title("👤 Contributor")
+    st.markdown('<h1 style="text-align: center; color: #1E88E5;">👤 Contributor</h1>', unsafe_allow_html=True)
     
     # Create tabs for Spaces and Models rankings - ONLY SHOWING FIRST TWO TABS
     tab1, tab2 = st.tabs([
-        "Top 100 Overall Contributors", 
-        "Top 100 by Spaces & Models"
+        "Top 100 Overall", 
+        "Top Spaces & Models"
     ])
     
     with tab1:
         # Show combined trending accounts list
-        st.subheader("🔥 Top 100 Overall Contributors")
-        
-        # Display the top 100 accounts list
-        st.markdown("### Combined Contributors Ranking")
+        st.markdown('<div class="subheader"><h3>🔥 Top 100 Contributors</h3></div>', unsafe_allow_html=True)
         
         # Create a data frame for the table
         if trending_accounts:
@@ -532,101 +740,68 @@ with st.sidebar:
                 ranking_data_overall,
                 column_config={
                     "Contributor": st.column_config.TextColumn("Contributor"),
-                    "Spaces Rank": st.column_config.TextColumn("Spaces Rank (top 100)"),
-                    "Models Rank": st.column_config.TextColumn("Models Rank (top 100)")
+                    "Spaces Rank": st.column_config.TextColumn("Spaces Rank"),
+                    "Models Rank": st.column_config.TextColumn("Models Rank")
                 },
                 use_container_width=True,
                 hide_index=False
             )
     
     with tab2:
-        # Show trending accounts list by Spaces
-        st.subheader("🚀 Top 100 by Spaces & Models")
-        
-        # Display the top 100 accounts list
-        st.markdown("### Spaces Contributors Ranking")
+        # Show trending accounts by Spaces & Models
+        st.markdown('<div class="subheader"><h3>🚀 Spaces Leaders</h3></div>', unsafe_allow_html=True)
         
         # Create a data frame for the table
         if top_owners_spaces:
-            ranking_data_spaces = pd.DataFrame(top_owners_spaces[:100], columns=["Contributor", "Spaces Count"])
+            ranking_data_spaces = pd.DataFrame(top_owners_spaces[:50], columns=["Contributor", "Spaces Count"])
             ranking_data_spaces.index = ranking_data_spaces.index + 1  # Start index from 1 for ranking
             
             st.dataframe(
                 ranking_data_spaces,
                 column_config={
                     "Contributor": st.column_config.TextColumn("Contributor"),
-                    "Spaces Count": st.column_config.NumberColumn("Spaces Count (based on top 500 spaces)", format="%d")
+                    "Spaces Count": st.column_config.NumberColumn("Spaces Count", format="%d")
                 },
                 use_container_width=True,
                 hide_index=False
             )
         
-        # Add stats expander with visualization
-        with st.expander("View Top 30 Spaces Contributors Chart"):
-            # Create a bar chart for top 30 contributors
-            if top_owners_spaces:
-                chart_data = pd.DataFrame(top_owners_spaces[:30], columns=["Owner", "Spaces Count"])
-                
-                fig, ax = plt.subplots(figsize=(10, 8))
-                bars = ax.barh(chart_data["Owner"], chart_data["Spaces Count"])
-                
-                # Add color gradient to bars
-                for i, bar in enumerate(bars):
-                    bar.set_color(plt.cm.viridis(i/len(bars)))
-                
-                ax.set_title("Top 30 Contributors by Number of Spaces")
-                ax.set_xlabel("Number of Spaces")
-                plt.tight_layout()
-                st.pyplot(fig)
-        
-        # Display the top 100 Models accounts list (ADDED SECTION)
-        st.markdown("### Models Contributors Ranking")
+        # Display the top Models accounts list
+        st.markdown('<div class="subheader"><h3>🧠 Models Leaders</h3></div>', unsafe_allow_html=True)
         
         # Create a data frame for the Models table
         if top_owners_models:
-            ranking_data_models = pd.DataFrame(top_owners_models[:100], columns=["Contributor", "Models Count"])
+            ranking_data_models = pd.DataFrame(top_owners_models[:50], columns=["Contributor", "Models Count"])
             ranking_data_models.index = ranking_data_models.index + 1  # Start index from 1 for ranking
             
             st.dataframe(
                 ranking_data_models,
                 column_config={
                     "Contributor": st.column_config.TextColumn("Contributor"),
-                    "Models Count": st.column_config.NumberColumn("Models Count (based on top 500 models)", format="%d")
+                    "Models Count": st.column_config.NumberColumn("Models Count", format="%d")
                 },
                 use_container_width=True,
                 hide_index=False
             )
-        
-        # Add stats expander with visualization for Models (ADDED SECTION)
-        with st.expander("View Top 30 Models Contributors Chart"):
-            # Create a bar chart for top 30 models contributors
-            if top_owners_models:
-                chart_data = pd.DataFrame(top_owners_models[:30], columns=["Owner", "Models Count"])
-                
-                fig, ax = plt.subplots(figsize=(10, 8))
-                bars = ax.barh(chart_data["Owner"], chart_data["Models Count"])
-                
-                # Add color gradient to bars
-                for i, bar in enumerate(bars):
-                    bar.set_color(plt.cm.plasma(i/len(bars)))  # Using a different colormap for distinction
-                
-                ax.set_title("Top 30 Contributors by Number of Models")
-                ax.set_xlabel("Number of Models")
-                plt.tight_layout()
-                st.pyplot(fig)
     
-    # Display trending accounts selection dropdown
-    st.subheader("Select Contributor")
+    # Add visual divider
+    st.markdown('<hr style="margin: 2rem 0; border-color: #e0e0e0;">', unsafe_allow_html=True)
+    
+    # Display contributor selection with enhanced styling
+    st.markdown('<div class="subheader"><h3>Select Contributor</h3></div>', unsafe_allow_html=True)
     selected_trending = st.selectbox(
-        "Select trending account",
+        "Choose from trending accounts",
         options=trending_accounts[:100],  # Limit to top 100
         index=0 if trending_accounts else None,
         key="trending_selectbox"
     )
     
-    # Custom account input option
-    st.markdown("<div style='text-align: center; margin: 10px 0;'>OR</div>", unsafe_allow_html=True)
-    custom = st.text_input("Enter username/org", label_visibility="collapsed")
+    # Custom account input option with enhanced styling
+    st.markdown('<div style="text-align: center; margin: 15px 0; font-weight: bold;">- OR -</div>', unsafe_allow_html=True)
+    custom = st.text_input("Enter a username/organization:", placeholder="e.g. facebook, google...")
+    
+    # Add visual divider
+    st.markdown('<hr style="margin: 1.5rem 0; border-color: #e0e0e0;">', unsafe_allow_html=True)
     
     # Set username based on selection or custom input
     if custom.strip():
@@ -636,22 +811,39 @@ with st.sidebar:
     else:
         username = "facebook"  # Default fallback
     
-    # Year selection
-    st.subheader("🗓️ Time Period")
+    # Year selection with enhanced styling
+    st.markdown('<div class="subheader"><h3>🗓️ Time Period</h3></div>', unsafe_allow_html=True)
     year_options = list(range(datetime.now().year, 2017, -1))
-    selected_year = st.selectbox("Select Year", options=year_options)
+    selected_year = st.selectbox("Select Year:", options=year_options)
     
-    # Additional options for customization
-    st.subheader("⚙️ Display Options")
+    # Additional options for customization with enhanced styling
+    st.markdown('<div class="subheader"><h3>⚙️ Display Options</h3></div>', unsafe_allow_html=True)
     show_models = st.checkbox("Show Models", value=True)
     show_datasets = st.checkbox("Show Datasets", value=True)
     show_spaces = st.checkbox("Show Spaces", value=True)
 
 # Main Content
-st.title("🤗 Hugging Face Contributions")
+st.markdown(f'<h1 style="text-align: center; color: #1E88E5; margin-bottom: 2rem;">🤗 Hugging Face Contributions</h1>', unsafe_allow_html=True)
 
 if username:
-    with st.spinner(f"Fetching commit data for {username}..."):
+    # Create a header card with contributor info
+    header_col1, header_col2 = st.columns([1, 2])
+    with header_col1:
+        st.markdown(f'<div style="background-color: #E3F2FD; padding: 20px; border-radius: 10px; border-left: 5px solid #1E88E5;">'
+                  f'<h2 style="color: #1E88E5;">👤 {username}</h2>'
+                  f'<p style="font-size: 16px;">Analyzing contributions for {selected_year}</p>'
+                  f'<p><a href="https://huggingface.co/{username}" target="_blank" style="color: #1E88E5; font-weight: bold;">View Profile</a></p>'
+                  f'</div>', unsafe_allow_html=True)
+    
+    with header_col2:
+        # Add explanation about the app
+        st.markdown(f'<div style="background-color: #F3E5F5; padding: 20px; border-radius: 10px; border-left: 5px solid #9C27B0;">'
+                  f'<h3 style="color: #9C27B0;">About This Analysis</h3>'
+                  f'<p>This dashboard analyzes {username}\'s contributions to Hugging Face in {selected_year}, including models, datasets, and spaces.</p>'
+                  f'<p style="font-style: italic; font-size: 12px;">* Some metrics like follower growth are simulated for visualization purposes.</p>'
+                  f'</div>', unsafe_allow_html=True)
+
+    with st.spinner(f"Fetching contribution data for {username}..."):
         # Initialize variables for tracking
         overall_rank = None
         spaces_rank = None
@@ -663,14 +855,17 @@ if username:
         # Display contributor rank if in top 100
         if username in trending_accounts[:100]:
             overall_rank = trending_accounts.index(username) + 1
-            st.success(f"🏆 {username} is ranked #{overall_rank} in the top trending contributors!")
+            
+            # Create a prominent ranking display
+            st.markdown(f'<div style="background-color: #FFF8E1; padding: 20px; border-radius: 10px; border-left: 5px solid #FFC107; margin: 1rem 0;">'
+                      f'<h2 style="color: #FFA000; text-align: center;">🏆 Ranked #{overall_rank} in Top Contributors</h2>'
+                      f'</div>', unsafe_allow_html=True)
             
             # Find user in spaces ranking
             for i, (owner, count) in enumerate(top_owners_spaces):
                 if owner == username:
                     spaces_rank = i+1
                     spaces_count = count
-                    st.info(f"🚀 Spaces Ranking: #{spaces_rank} with {count} spaces")
                     break
             
             # Find user in models ranking
@@ -678,20 +873,9 @@ if username:
                 if owner == username:
                     models_rank = i+1
                     models_count = count
-                    st.info(f"🧠 Models Ranking: #{models_rank} with {count} models")
                     break
                     
-            # Display combined ranking info
-            combined_info = []
-            if spaces_rank and spaces_rank <= 100:
-                combined_info.append(f"Spaces: #{spaces_rank}")
-            if models_rank and models_rank <= 100:
-                combined_info.append(f"Models: #{models_rank}")
-                
-            if combined_info:
-                st.success(f"Combined Rankings (Top 100): {', '.join(combined_info)}")
-                
-            # Add ranking visualization
+            # Display ranking visualization
             rank_chart = create_ranking_chart(username, overall_rank, spaces_rank, models_rank)
             if rank_chart:
                 st.pyplot(rank_chart)
@@ -713,8 +897,13 @@ if username:
             st.warning("Please select at least one content type to display (Models, Datasets, or Spaces)")
             st.stop()
 
+        # Create a progress container
+        progress_container = st.container()
+        progress_container.markdown('<h3 style="color: #1E88E5;">Fetching Repository Data...</h3>', unsafe_allow_html=True)
+        progress_bar = progress_container.progress(0)
+
         # Fetch commits for each selected type
-        for kind in types_to_fetch:
+        for type_index, kind in enumerate(types_to_fetch):
             try:
                 items = cached_list_items(username, kind)
                 
@@ -728,14 +917,13 @@ if username:
                     
                 repo_ids = [item.id for item in items]
                 
-                st.info(f"Found {len(repo_ids)} {kind}s for {username}")
+                progress_container.info(f"Found {len(repo_ids)} {kind}s for {username}")
 
                 # Process repos in chunks
                 chunk_size = 5
                 total_commits = 0
                 all_commit_dates = []
 
-                progress_bar = st.progress(0)
                 for i in range(0, len(repo_ids), chunk_size):
                     chunk = repo_ids[i:i + chunk_size]
                     with ThreadPoolExecutor(max_workers=min(5, len(chunk))) as executor:
@@ -749,13 +937,12 @@ if username:
                                 all_commit_dates.extend(repo_commits)
                                 total_commits += repo_count
                     
-                    # Update progress
-                    progress = min(1.0, (i + len(chunk)) / max(1, len(repo_ids)))
-                    progress_bar.progress(progress)
+                    # Update progress for all types
+                    progress_per_type = 1.0 / len(types_to_fetch)
+                    current_type_progress = min(1.0, (i + len(chunk)) / max(1, len(repo_ids)))
+                    overall_progress = (type_index * progress_per_type) + (current_type_progress * progress_per_type)
+                    progress_bar.progress(overall_progress)
                 
-                # Complete progress
-                progress_bar.progress(1.0)
-
                 commits_by_type[kind] = all_commit_dates
                 commit_counts_by_type[kind] = total_commits
 
@@ -764,72 +951,86 @@ if username:
                 commits_by_type[kind] = []
                 commit_counts_by_type[kind] = 0
 
+        # Complete progress
+        progress_bar.progress(1.0)
+        progress_container.success("Data fetching complete!")
+        time.sleep(0.5)  # Short pause for visual feedback
+        progress_container.empty()  # Clear the progress indicators
+
         # Calculate total commits across all types
         total_commits = sum(commit_counts_by_type.values())
 
-        st.subheader(f"{username}'s Activity in {selected_year}")
+        # Main dashboard layout with improved structure
+        st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">Activity Overview</h2>', unsafe_allow_html=True)
+        
+        # Profile summary
+        profile_col1, profile_col2 = st.columns([1, 2])
         
-        # Profile information
-        profile_col1, profile_col2 = st.columns([1, 3])
         with profile_col1:
-            # Skip avatar image display since it's causing problems
-            st.info(f"Profile: {username}")
-            st.metric("Total Commits", total_commits)
+            # Create a stats card with key metrics
+            st.markdown(f'<div style="background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">'
+                      f'<h3 style="color: #1E88E5; text-align: center; margin-bottom: 15px;">Contribution Stats</h3>'
+                      f'<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">'
+                      f'<span style="font-weight: bold;">Total Commits:</span><span>{total_commits}</span></div>'
+                      f'<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">'
+                      f'<span style="font-weight: bold;">Models:</span><span>{models_count}</span></div>'
+                      f'<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">'
+                      f'<span style="font-weight: bold;">Datasets:</span><span>{datasets_count}</span></div>'
+                      f'<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">'
+                      f'<span style="font-weight: bold;">Spaces:</span><span>{spaces_count}</span></div>'
+                      f'</div>', unsafe_allow_html=True)
             
-            # Show contributor rank if in top owners
-            for owner, count in top_owners_spaces:
-                if owner.lower() == username.lower():
-                    st.metric("Spaces Count", count)
-                    break
+            # Type breakdown pie chart
+            model_commits = commit_counts_by_type.get("model", 0)
+            dataset_commits = commit_counts_by_type.get("dataset", 0)
+            space_commits = commit_counts_by_type.get("space", 0)
             
-            st.markdown(f"[View Profile on Hugging Face](https://huggingface.co/{username})")
+            pie_chart = create_contribution_pie(model_commits, dataset_commits, space_commits)
+            if pie_chart:
+                st.pyplot(pie_chart)
         
         with profile_col2:
             # Display contribution radar chart
             radar_fig = create_contribution_radar(username, models_count, spaces_count, datasets_count, total_commits)
             st.pyplot(radar_fig)
 
-        # Create DataFrame for all commits
-        all_commits = []
-        for commits in commits_by_type.values():
-            all_commits.extend(commits)
-        all_df = pd.DataFrame(all_commits, columns=["date"])
+            # Create DataFrame for all commits
+            all_commits = []
+            for commits in commits_by_type.values():
+                all_commits.extend(commits)
+            all_df = pd.DataFrame(all_commits, columns=["date"])
+            if not all_df.empty:
+                all_df = all_df.drop_duplicates()  # Remove any duplicate dates
+
+        # Calendar heatmap for all commits in a separate section
+        st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">Contribution Calendar</h2>', unsafe_allow_html=True)
+        
         if not all_df.empty:
-            all_df = all_df.drop_duplicates()  # Remove any duplicate dates
+            make_calendar_heatmap(all_df, "All Contributions", selected_year)
+        else:
+            st.info(f"No contributions found for {username} in {selected_year}")
 
         # Monthly activity chart
-        st.subheader(f"Monthly Activity Pattern ({selected_year})")
+        st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">Monthly Activity</h2>', unsafe_allow_html=True)
+        
         monthly_fig = create_monthly_activity(all_df, selected_year)
         if monthly_fig:
             st.pyplot(monthly_fig)
         else:
             st.info(f"No activity data available for {username} in {selected_year}")
-
-        # Calendar heatmap for all commits
-        st.subheader(f"Contribution Calendar ({selected_year})")
-        make_calendar_heatmap(all_df, "All Commits", selected_year)
-        
-        # Contribution distribution pie chart
-        st.subheader("Contribution Distribution by Type")
-        model_commits = commit_counts_by_type.get("model", 0)
-        dataset_commits = commit_counts_by_type.get("dataset", 0)
-        space_commits = commit_counts_by_type.get("space", 0)
-        
-        pie_chart = create_contribution_pie(model_commits, dataset_commits, space_commits)
-        if pie_chart:
-            st.pyplot(pie_chart)
-        else:
-            st.info("No contribution data available to show distribution")
         
         # Follower growth simulation
-        st.subheader(f"Follower Growth Simulation")
-        st.caption("Based on contribution metrics - for visualization purposes only")
+        st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">Growth Projection</h2>', unsafe_allow_html=True)
+        st.markdown('<div style="background-color: #EDE7F6; padding: 10px; border-radius: 5px; margin-bottom: 15px;">'
+                  '<p style="font-style: italic; margin: 0;">📊 This is a simulation based on contribution metrics - for visualization purposes only</p>'
+                  '</div>', unsafe_allow_html=True)
+        
         follower_chart = simulate_follower_data(username, spaces_count, models_count, total_commits)
         st.pyplot(follower_chart)
         
-        # Add analysis message
+        # Analytics summary section
         if total_commits > 0:
-            st.subheader("📊 Analytics Summary")
+            st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">📊 Analytics Summary</h2>', unsafe_allow_html=True)
             
             # Contribution pattern analysis
             monthly_df = pd.DataFrame(all_commits, columns=["date"])
@@ -840,58 +1041,104 @@ if username:
                 most_active_month = monthly_df['month'].value_counts().idxmax()
                 month_name = datetime(2020, most_active_month, 1).strftime('%B')
                 
-                st.markdown(f"""
-                ### Activity Analysis for {username}
-                
-                - **Total Activity**: {total_commits} contributions in {selected_year}
-                - **Most Active Month**: {month_name} with {monthly_df['month'].value_counts().max()} contributions
-                - **Repository Breakdown**: {models_count} Models, {spaces_count} Spaces, {datasets_count} Datasets
-                """)
+                # Create a summary card
+                st.markdown(f'<div style="background-color: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">'
+                          f'<h3 style="color: #1E88E5; border-bottom: 1px solid #E0E0E0; padding-bottom: 10px;">Activity Analysis for {username}</h3>'
+                          f'<ul style="list-style-type: none; padding-left: 5px;">'
+                          f'<li style="margin: 15px 0; font-size: 16px;">📈 <strong>Total Activity:</strong> {total_commits} contributions in {selected_year}</li>'
+                          f'<li style="margin: 15px 0; font-size: 16px;">🗓️ <strong>Most Active Month:</strong> {month_name} with {monthly_df["month"].value_counts().max()} contributions</li>'
+                          f'<li style="margin: 15px 0; font-size: 16px;">🧩 <strong>Repository Breakdown:</strong> {models_count} Models, {spaces_count} Spaces, {datasets_count} Datasets</li>'
+                          f'</ul>', unsafe_allow_html=True)
                 
                 # Add ranking context if available
                 if overall_rank:
                     percentile = 100 - overall_rank
-                    st.markdown(f"""
-                    ### Ranking Analysis
+                    st.markdown(f'<div style="margin-top: 20px;">'
+                              f'<h3 style="color: #1E88E5; border-bottom: 1px solid #E0E0E0; padding-bottom: 10px;">Ranking Analysis</h3>'
+                              f'<ul style="list-style-type: none; padding-left: 5px;">'
+                              f'<li style="margin: 15px 0; font-size: 16px;">🏆 <strong>Overall Ranking:</strong> #{overall_rank} (Top {percentile}% of contributors)</li>', unsafe_allow_html=True)
                     
-                    - **Overall Ranking**: #{overall_rank} (Top {percentile}% of contributors)
-                    """)
+                    badge_html = '<div style="margin: 20px 0;">'
                     
                     if spaces_rank and spaces_rank <= 10:
-                        st.markdown(f"- 🌟 **Elite Spaces Contributor**: Top 10 ({spaces_rank}) in Spaces contributions")
+                        badge_html += f'<span style="background-color: #FFECB3; color: #FF6F00; padding: 8px 15px; border-radius: 20px; font-weight: bold; margin-right: 10px; display: inline-block; margin-bottom: 10px;">🌟 Elite Spaces Contributor (#{spaces_rank})</span>'
                     elif spaces_rank and spaces_rank <= 30:
-                        st.markdown(f"- ✨ **Outstanding Spaces Contributor**: Top 30 ({spaces_rank}) in Spaces contributions")
+                        badge_html += f'<span style="background-color: #E1F5FE; color: #0277BD; padding: 8px 15px; border-radius: 20px; font-weight: bold; margin-right: 10px; display: inline-block; margin-bottom: 10px;">✨ Outstanding Spaces Contributor (#{spaces_rank})</span>'
                     
                     if models_rank and models_rank <= 10:
-                        st.markdown(f"- 🌟 **Elite Models Contributor**: Top 10 ({models_rank}) in Models contributions")
+                        badge_html += f'<span style="background-color: #FFECB3; color: #FF6F00; padding: 8px 15px; border-radius: 20px; font-weight: bold; margin-right: 10px; display: inline-block; margin-bottom: 10px;">🌟 Elite Models Contributor (#{models_rank})</span>'
                     elif models_rank and models_rank <= 30:
-                        st.markdown(f"- ✨ **Outstanding Models Contributor**: Top 30 ({models_rank}) in Models contributions")
+                        badge_html += f'<span style="background-color: #E1F5FE; color: #0277BD; padding: 8px 15px; border-radius: 20px; font-weight: bold; margin-right: 10px; display: inline-block; margin-bottom: 10px;">✨ Outstanding Models Contributor (#{models_rank})</span>'
+                    
+                    badge_html += '</div>'
+                    
+                    # Add achievement badges
+                    if spaces_rank or models_rank:
+                        st.markdown(badge_html, unsafe_allow_html=True)
+                    
+                    st.markdown('</ul></div></div>', unsafe_allow_html=True)
         
-        # Metrics and heatmaps for each selected type
-        st.subheader("Detailed Category Analysis")
+        # Detailed category analysis section
+        st.markdown(f'<h2 style="color: #1E88E5; border-bottom: 2px solid #E0E0E0; padding-bottom: 8px; margin-top: 2rem;">Detailed Category Analysis</h2>', unsafe_allow_html=True)
+        
+        # Create category cards in columns
         cols = st.columns(len(types_to_fetch)) if types_to_fetch else st.columns(1)
         
-        for i, (kind, emoji, label) in enumerate([
-            ("model", "🧠", "Models"),
-            ("dataset", "📦", "Datasets"),
-            ("space", "🚀", "Spaces")
-        ]):
-            if kind in types_to_fetch:
-                with cols[types_to_fetch.index(kind)]:
-                    try:
-                        total = len(cached_list_items(username, kind))
-                        commits = commits_by_type.get(kind, [])
-                        commit_count = commit_counts_by_type.get(kind, 0)
-                        df_kind = pd.DataFrame(commits, columns=["date"])
-                        if not df_kind.empty:
-                            df_kind = df_kind.drop_duplicates()  # Remove any duplicate dates
-                        st.metric(f"{emoji} {label}", total)
-                        st.metric(f"Commits in {selected_year}", commit_count)
-                        make_calendar_heatmap(df_kind, f"{labels} Commits", selected_year)
-                    except Exception as e:
-                        st.warning(f"Error processing {label}: {str(e)}")
-                        st.metric(f"{emoji} {label}", 0)
-                        st.metric(f"Commits in {selected_year}", 0)
-                        make_calendar_heatmap(pd.DataFrame(), f"{label} Commits", selected_year)
+        category_icons = {
+            "model": "🧠",
+            "dataset": "📦",
+            "space": "🚀"
+        }
+        
+        category_colors = {
+            "model": "#FF9800",
+            "dataset": "#2196F3",
+            "space": "#4CAF50"
+        }
+        
+        for i, kind in enumerate(types_to_fetch):
+            with cols[i]:
+                try:
+                    emoji = category_icons.get(kind, "📊")
+                    label = kind.capitalize() + "s"
+                    color = category_colors.get(kind, "#1E88E5")
+                    
+                    total = len(cached_list_items(username, kind))
+                    commits = commits_by_type.get(kind, [])
+                    commit_count = commit_counts_by_type.get(kind, 0)
+                    
+                    # Create styled card header
+                    st.markdown(f'<div style="background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-top: 5px solid {color};">'
+                              f'<h3 style="color: {color}; text-align: center;">{emoji} {label}</h3>'
+                              f'<div style="display: flex; justify-content: space-between; margin: 15px 0;">'
+                              f'<span style="font-weight: bold;">Total:</span><span>{total}</span></div>'
+                              f'<div style="display: flex; justify-content: space-between; margin-bottom: 15px;">'
+                              f'<span style="font-weight: bold;">Commits:</span><span>{commit_count}</span></div>'
+                              f'</div>', unsafe_allow_html=True)
+                    
+                    # Create calendar for this type
+                    df_kind = pd.DataFrame(commits, columns=["date"])
+                    if not df_kind.empty:
+                        df_kind = df_kind.drop_duplicates()  # Remove any duplicate dates
+                        make_calendar_heatmap(df_kind, f"{label} Commits", selected_year)
+                    else:
+                        st.info(f"No {label.lower()} activity in {selected_year}")
+                        
+                except Exception as e:
+                    st.warning(f"Error processing {kind.capitalize()}s: {str(e)}")
+                    # Show empty placeholder
+                    st.markdown(f'<div style="background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-top: 5px solid #9E9E9E; text-align: center;">'
+                              f'<h3 style="color: #9E9E9E;">⚠️ Error</h3>'
+                              f'<p>Could not load {kind.capitalize()}s data</p>'
+                              f'</div>', unsafe_allow_html=True)
+        
+        # Footer
+        st.markdown('<hr style="margin: 3rem 0 1rem 0;">', unsafe_allow_html=True)
+        st.markdown('<p style="text-align: center; color: #9E9E9E; font-size: 0.8rem;">Hugging Face Contributions Dashboard | Data fetched from Hugging Face API</p>', unsafe_allow_html=True)
 else:
-    st.info("Please select an account from the sidebar to view contributions.")                 
+    # If no username is selected, show welcome screen
+    st.markdown(f'<div style="text-align: center; margin: 50px 0;">'
+              f'<img src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg" style="width: 200px; margin-bottom: 30px;">'
+              f'<h2>Welcome to Hugging Face Contributions Dashboard</h2>'
+              f'<p style="font-size: 1.2rem;">Please select a contributor from the sidebar to view their activity.</p>'
+              f'</div>', unsafe_allow_html=True)