Update app.py

app.py

@@ -2,24 +2,26 @@ from flask import Flask, render_template, request, jsonify
 import requests
 import os
 import time
+import random
+from collections import Counter
 
 app = Flask(__name__)
 
 # Function to fetch trending spaces from Huggingface with pagination
 def fetch_trending_spaces(offset=0, limit=72):
     try:
-        # 단순하게 데이터 가져오기 
+        # Simple data fetching
         url = "https://huggingface.co/api/spaces"
-        params = {"limit": 500}  # 최대 500개 가져오기
+        params = {"limit": 500}  # Get max 500
         
-        # 타임아웃 늘리기
+        # Increase timeout
         response = requests.get(url, params=params, timeout=30)
         
         if response.status_code == 200:
             spaces = response.json()
             filtered_spaces = [space for space in spaces if space.get('owner') != 'None' and space.get('id', '').split('/', 1)[0] != 'None']
             
-            # 요청된 offset과 limit에 맞게 슬라이싱
+            # Slice according to requested offset and limit
             start = min(offset, len(filtered_spaces))
             end = min(offset + limit, len(filtered_spaces))
             
@@ -29,28 +31,31 @@ def fetch_trending_spaces(offset=0, limit=72):
                 'spaces': filtered_spaces[start:end],
                 'total': len(filtered_spaces),
                 'offset': offset,
-                'limit': limit
+                'limit': limit,
+                'all_spaces': filtered_spaces  # Return all spaces for stats calculation
             }
         else:
             print(f"Error fetching spaces: {response.status_code}")
-            # 빈 공간 반환하지만 200개 제한의 가짜 데이터
+            # Return empty spaces with fake 200 limit data
             return {
                 'spaces': generate_dummy_spaces(limit),
                 'total': 200,
                 'offset': offset,
-                'limit': limit
+                'limit': limit,
+                'all_spaces': generate_dummy_spaces(500)  # Dummy data for stats
             }
     except Exception as e:
         print(f"Exception when fetching spaces: {e}")
-        # 가짜 데이터 생성
+        # Generate fake data
         return {
             'spaces': generate_dummy_spaces(limit),
             'total': 200,
             'offset': offset,
-            'limit': limit
+            'limit': limit,
+            'all_spaces': generate_dummy_spaces(500)  # Dummy data for stats
         }
 
-# 오류 시 가짜 데이터 생성
+# Generate dummy spaces in case of error
 def generate_dummy_spaces(count):
     spaces = []
     for i in range(count):
@@ -65,11 +70,11 @@ def generate_dummy_spaces(count):
 
 # Transform Huggingface URL to direct space URL
 def transform_url(owner, name):
-    # 1. '.' 문자를 '-'로 변경
+    # 1. Replace '.' with '-'
     name = name.replace('.', '-')
-    # 2. '_' 문자를 '-'로 변경
+    # 2. Replace '_' with '-'
     name = name.replace('_', '-')
-    # 3. 대소문자 구분 없이 모두 소문자로 변경
+    # 3. Convert to lowercase
     owner = owner.lower()
     name = name.lower()
     
@@ -78,28 +83,28 @@ def transform_url(owner, name):
 # Get space details
 def get_space_details(space_data, index, offset):
     try:
-        # 공통 정보 추출
+        # Extract common info
         if '/' in space_data.get('id', ''):
             owner, name = space_data.get('id', '').split('/', 1)
         else:
             owner = space_data.get('owner', '')
             name = space_data.get('id', '')
         
-        # None이 포함된 경우 무시
+        # Ignore if contains None
         if owner == 'None' or name == 'None':
             return None
         
-        # URL 구성
+        # Construct URLs
         original_url = f"https://huggingface.co/spaces/{owner}/{name}"
         embed_url = transform_url(owner, name)
         
-        # 좋아요 수
+        # Likes count
         likes_count = space_data.get('likes', 0)
         
-        # 제목 추출
+        # Extract title
         title = space_data.get('title', name)
         
-        # 태그
+        # Tags
         tags = space_data.get('tags', [])
         
         return {
@@ -107,14 +112,14 @@ def get_space_details(space_data, index, offset):
             'embedUrl': embed_url,
             'title': title,
             'owner': owner,
-            'name': name,  # Space 이름 추가 저장
+            'name': name,  # Store Space name
             'likes_count': likes_count,
             'tags': tags,
             'rank': offset + index + 1
         }
     except Exception as e:
         print(f"Error processing space data: {e}")
-        # 오류 발생 시에도 기본 객체 반환
+        # Return basic object even if error occurs
         return {
             'url': 'https://huggingface.co/spaces',
             'embedUrl': 'https://huggingface.co/spaces',
@@ -126,6 +131,26 @@ def get_space_details(space_data, index, offset):
             'rank': offset + index + 1
         }
 
+# Get owner statistics from all spaces
+def get_owner_stats(all_spaces):
+    owners = []
+    for space in all_spaces:
+        if '/' in space.get('id', ''):
+            owner, _ = space.get('id', '').split('/', 1)
+        else:
+            owner = space.get('owner', '')
+        
+        if owner != 'None':
+            owners.append(owner)
+    
+    # Count occurrences of each owner
+    owner_counts = Counter(owners)
+    
+    # Get top 30 owners by count
+    top_owners = owner_counts.most_common(30)
+    
+    return top_owners
+
 # Homepage route
 @app.route('/')
 def home():
@@ -136,7 +161,7 @@ def home():
 def trending_spaces():
     search_query = request.args.get('search', '').lower()
     offset = int(request.args.get('offset', 0))
-    limit = int(request.args.get('limit', 72))  # 기본값 72개로 변경
+    limit = int(request.args.get('limit', 72))  # Default 72
     
     # Fetch trending spaces
     spaces_data = fetch_trending_spaces(offset, limit)
@@ -164,11 +189,15 @@ def trending_spaces():
         
         results.append(space_info)
     
+    # Get owner statistics for all spaces
+    top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
+    
     return jsonify({
         'spaces': results,
         'total': spaces_data['total'],
         'offset': offset,
-        'limit': limit
+        'limit': limit,
+        'top_owners': top_owners  # Add top owners data
     })
 
 if __name__ == '__main__':
@@ -184,6 +213,7 @@ if __name__ == '__main__':
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Huggingface Spaces Gallery</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
     
@@ -519,10 +549,19 @@ if __name__ == '__main__':
       text-align: center;
     }
     
-    .error-icon {
-      font-size: 3rem;
+    .error-emoji {
+      font-size: 5rem;
       margin-bottom: 1rem;
-      color: #e53e3e;
+      animation: bounce 1s infinite alternate;
+    }
+    
+    @keyframes bounce {
+      from {
+        transform: translateY(0px);
+      }
+      to {
+        transform: translateY(-10px);
+      }
     }
     
     /* Pagination Styling */
@@ -606,6 +645,58 @@ if __name__ == '__main__':
       font-size: 0.9rem;
     }
     
+    /* Stats window styling */
+    .stats-window {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+    
+    .stats-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+    
+    .stats-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #2d3748;
+    }
+    
+    .stats-toggle {
+      background-color: var(--pastel-blue);
+      border: none;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .stats-toggle:hover {
+      background-color: var(--pastel-purple);
+    }
+    
+    .stats-content {
+      background-color: white;
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: var(--box-shadow);
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.5s ease-out;
+    }
+    
+    .stats-content.open {
+      max-height: 600px;
+    }
+    
+    .chart-container {
+      width: 100%;
+      height: 500px;
+    }
+    
     /* Responsive Design */
     @media (max-width: 768px) {
       body {
@@ -634,6 +725,10 @@ if __name__ == '__main__':
       .pagination {
         flex-wrap: wrap;
       }
+      
+      .chart-container {
+        height: 300px;
+      }
     }
   </style>
 </head>
@@ -655,6 +750,29 @@ if __name__ == '__main__':
           <p>Discover the top 500 trending spaces from the Huggingface</p>
         </div>
         
+        <!-- Stats Section -->
+        <div class="stats-window mac-window">
+          <div class="mac-toolbar">
+            <div class="mac-buttons">
+              <div class="mac-button mac-close"></div>
+              <div class="mac-button mac-minimize"></div>
+              <div class="mac-button mac-maximize"></div>
+            </div>
+            <div class="mac-title">Creator Statistics</div>
+          </div>
+          <div class="mac-content">
+            <div class="stats-header">
+              <div class="stats-title">Top 30 Creators by Number of Spaces</div>
+              <button id="statsToggle" class="stats-toggle">Show Stats</button>
+            </div>
+            <div id="statsContent" class="stats-content">
+              <div class="chart-container">
+                <canvas id="creatorStatsChart"></canvas>
+              </div>
+            </div>
+          </div>
+        </div>
+        
         <div class="search-bar">
           <input type="text" id="searchInput" placeholder="Search by name, owner, or tags..." />
           <button id="refreshButton" class="refresh-btn">
@@ -690,7 +808,10 @@ if __name__ == '__main__':
       loadingError: document.getElementById('loadingError'),
       searchInput: document.getElementById('searchInput'),
       refreshButton: document.getElementById('refreshButton'),
-      pagination: document.getElementById('pagination')
+      pagination: document.getElementById('pagination'),
+      statsToggle: document.getElementById('statsToggle'),
+      statsContent: document.getElementById('statsContent'),
+      creatorStatsChart: document.getElementById('creatorStatsChart')
     };
     
     // Application state
@@ -701,9 +822,122 @@ if __name__ == '__main__':
       itemsPerPage: 72,  // 72 items per page
       totalItems: 0,
       loadingTimeout: null,
-      staticModeAttempted: {} // Track which spaces have attempted static mode
+      staticModeAttempted: {}, // Track which spaces have attempted static mode
+      statsVisible: false,
+      chartInstance: null,
+      topOwners: []
     };
     
+    // Random emoji list for 404 errors
+    const randomEmojis = [
+      '🙈', '🙉', '🙊', '🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', 
+      '🐩', '🐺', '🦊', '🦝', '🐱', '🐈', '🦁', '🐯', '🐅', '🐆', 
+      '🐴', '🐎', '🦄', '🦓', '🦌', '🐮', '🐂', '🐃', '🐄', '🐷', 
+      '🐖', '🐗', '🐏', '🐑', '🐐', '🐪', '🐫', '🦙', '🦒', '🐘', 
+      '🦏', '🦛', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐿️', '🦔', 
+      '🦇', '🐻', '🐨', '🐼', '🦥', '🦦', '🦨', '🦘', '🦡', '🐾', 
+      '🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🕊️', '🦅', 
+      '🦆', '🦢', '🦉', '🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', 
+      '🐍', '🐲', '🐉', '🦕', '🦖', '🐳', '🐋', '🐬', '🐟', '🐠', 
+      '🐡', '🦈', '🐙', '🐚', '🐌', '🦋', '🐛', '🐜', '🐝', '🐞', 
+      '🦗', '🕷️', '🕸️', '🦂', '🦟', '🦠', '💐', '🌸', '💮', '🏵️', 
+      '🌹', '🥀', '🌺', '🌻', '🌼', '🌷', '🌱', '🌲', '🌳', '🌴', 
+      '🌵', '🌾', '🌿', '☘️', '🍀', '🍁', '🍂', '🍃', '🍇', '🍈', 
+      '🍉', '🍊', '🍋', '🍌', '🍍', '🥭', '🍎', '🍏', '🍐', '🍑', 
+      '🍒', '🍓', '🥝', '🍅', '🥥', '🥑', '🍆', '🥔', '🥕', '🌽', 
+      '🌶️', '🥒', '🥬', '🥦', '🧄', '🧅', '🍄', '🥜', '🌰', '🍞', 
+      '🥐', '🥖', '🥨', '🥯', '🥞', '🧇', '🧀', '🍖', '🍗', '🥩', 
+      '🥓', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🌯', '🥙', '🧆', 
+      '🥚', '🍳', '🥘', '🍲', '🥣', '🥗', '🍿', '🧈', '🧂', '🥫', 
+      '🍱', '🍘', '🍙', '🍚', '🍛', '🍜', '🍝', '🍠', '🍢', '🍣', 
+      '🍤', '🍥', '🥮', '🍡', '🥟', '🥠', '🥡', '🦀', '🦞', '🦐', 
+      '🦑', '🦪', '🍦', '🍧', '🍨', '🍩', '🍪', '🎂', '🍰', '🧁', 
+      '🥧', '🍫', '🍬', '🍭', '🍮', '🍯', '🍼', '🥛', '☕', '🍵', 
+      '🍶', '🍾', '🍷', '🍸', '🍹', '🍺', '🍻', '🥂', '🥃', '🥤', 
+      '🧃', '🧉', '🧊', '🥢', '🍽️', '🍴', '🥄', '🔪', '🏺', '🌍', 
+      '🌎', '🌏', '🌐', '🗺️', '🗾', '🧭', '🏔️', '⛰️', '🌋', '🗻', 
+      '🏕️', '🏖️', '🏜️', '🏝️', '🏞️', '🏟️', '🏛️', '🏗️', '🧱', '🏘️', 
+      '🏚️', '🏠', '🏡', '🏢', '🏣', '🏤', '🏥', '🏦', '🏨', '🏩', 
+      '🏪', '🏫', '🏬', '🏭', '🏯', '🏰', '💒', '🗼', '🗽', '⛪', 
+      '🕌', '🛕', '🕍', '⛩️', '🕋', '⛲', '⛺', '🌁', '🌃', '🏙️', 
+      '🌄', '🌅', '🌆', '🌇', '🌉', '♨️', '🎠', '🎡', '🎢', '💈', 
+      '🎪', '🚂', '🚃', '🚄', '🚅', '🚆', '🚇', '🚈', '🚉', '🚊', 
+      '🚝', '🚞', '🚋', '🚌', '🚍', '🚎', '🚐', '🚑', '🚒', '🚓', 
+      '🚔', '🚕', '🚖', '🚗', '🚘', '🚙', '🚚', '🚛', '🚜', '🏎️', 
+      '🏍️', '🛵', '🦽', '🦼', '🛺', '🚲', '🛴', '🛹', '🚏', '🛣️', 
+      '🛤️', '🛢️', '⛽', '🚨', '🚥', '🚦', '🛑', '🚧', '⚓', '⛵', 
+      '🛶', '🚤', '🛳️', '⛴️', '🛥️', '🚢', '✈️', '🛩️', '🛫', '🛬', 
+      '🪂', '💺', '🚁', '🚟', '🚠', '🚡', '🛰️', '🚀', '🛸', '🛎️', 
+      '🧳', '⌛', '⏳', '⌚', '⏰', '⏱️', '⏲️', '🕰️', '🕛', '🕧', 
+      '🕐', '🕜', '🕑', '🕝', '🕒', '🕞', '🕓', '🕟', '🕔', '🕠', 
+      '🕕', '🕡', '🕖', '🕢', '🕗', '🕣', '🕘', '🕤', '🕙', '🕥', 
+      '🕚', '🕦', '🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘', 
+      '🌙', '🌚', '🌛', '🌜', '🌡️', '☀️', '🌝', '🌞', '🪐', '⭐', 
+      '🌟', '🌠', '🌌', '☁️', '⛅', '⛈️', '🌤️', '🌥️', '🌦️', '🌧️', 
+      '🌨️', '🌩️', '🌪️', '🌫️', '🌬️', '🌀', '🌈', '🌂', '☂️', '☔', 
+      '⛱️', '⚡', '❄️', '☃️', '⛄', '☄️', '���', '💧', '🌊', '🎃', 
+      '🎄', '🎆', '🎇', '🧨', '✨', '🎈', '🎉', '🎊', '🎋', '🎍', 
+      '🎎', '🎏', '🎐', '🎑', '🧧', '🎀', '🎁', '🎗️', '🎟️', '🎫', 
+      '🎖️', '🏆', '🏅', '🥇', '🥈', '🥉', '⚽', '⚾', '🥎', '🏀', 
+      '🏐', '🏈', '🏉', '🎾', '🥏', '🎳', '🏏', '🏑', '🏒', '🥍', 
+      '🏓', '🏸', '🥊', '🥋', '🥅', '⛳', '⛸️', '🎣', '🤿', '🎽', 
+      '🎿', '🛷', '🥌', '🎯', '🪀', '🪁', '🎱', '🔮', '🧿', '🎮', 
+      '🕹️', '🎰', '🎲', '🧩', '🧸', '♠️', '♥️', '♦️', '♣️', '♟️', 
+      '🃏', '🀄', '🎴', '🎭', '🖼️', '🎨', '🧵', '🧶', '👓', '🕶️', 
+      '🥽', '🥼', '🦺', '👔', '👕', '👖', '🧣', '🧤', '🧥', '🧦', 
+      '👗', '👘', '🥻', '🩱', '🩲', '🩳', '👙', '👚', '👛', '👜', 
+      '👝', '🛍️', '🎒', '👞', '👟', '🥾', '🥿', '👠', '👡', '🩰', 
+      '👢', '👑', '👒', '🎩', '🎓', '🧢', '⛑️', '📿', '💄', '💍', 
+      '💎', '🔇', '🔈', '🔉', '🔊', '📢', '📣', '📯', '🔔', '🔕', 
+      '🎼', '🎵', '🎶', '🎙️', '🎚️', '🎛️', '🎤', '🎧', '📻', '🎷', 
+      '🎸', '🎹', '🎺', '🎻', '🪕', '🥁', '📱', '📲', '☎️', '📞', 
+      '📟', '📠', '🔋', '🔌', '💻', '🖥️', '🖨️', '⌨️', '🖱️', '🖲️', 
+      '💽', '💾', '💿', '📀', '🧮', '🎥', '🎞️', '📽️', '🎬', '📺', 
+      '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️', '💡', '🔦', '🏮', 
+      '🪔', '📔', '📕', '📖', '📗', '📘', '📙', '📚', '📓', '📒', 
+      '📃', '📜', '📄', '📰', '🗞️', '📑', '🔖', '🏷️', '💰', '💴', 
+      '💵', '💶', '💷', '💸', '💳', '🧾', '💹', '✉️', '📧', '📨', 
+      '📩', '📤', '📥', '📦', '📫', '📪', '📬', '📭', '📮', '🗳️', 
+      '✏️', '✒️', '🖋️', '🖊️', '🖌️', '🖍️', '📝', '💼', '📁', '📂', 
+      '🗂️', '📅', '📆', '🗒️', '🗓️', '📇', '📈', '📉', '📊', '📋', 
+      '📌', '📍', '📎', '🖇️', '📏', '📐', '✂️', '🗃️', '🗄️', '🗑️', 
+      '🔒', '🔓', '🔏', '🔐', '🔑', '🗝️', '🔨', '🪓', '⛏️', '⚒️', 
+      '🛠️', '🗡️', '⚔️', '🔫', '🏹', '🛡️', '🔧', '🔩', '⚙️', '🗜️', 
+      '⚖️', '🦯', '🔗', '⛓️', '🧰', '🧲', '⚗️', '🧪', '🧫', '🧬', 
+      '🔬', '🔭', '📡', '💉', '🩸', '💊', '🩹', '🩺', '🚪', '🛏️', 
+      '🛋️', '🪑', '🚽', '🚿', '🛁', '🪒', '🧴', '🧷', '🧹', '🧺', 
+      '🧻', '🧼', '🧽', '🧯', '🛒', '🚬', '⚰️', '⚱️', '🗿', '🏧', 
+      '🚮', '🚰', '♿', '🚹', '🚺', '🚻', '🚼', '🚾', '🛂', '🛃', 
+      '🛄', '🛅', '⚠️', '🚸', '⛔', '🚫', '🚳', '🚭', '🚯', '🚱', 
+      '🚷', '📵', '🔞', '☢️', '☣️', '⬆️', '↗️', '➡️', '↘️', '⬇️', 
+      '↙️', '⬅️', '↖️', '↕️', '↔️', '↩️', '↪️', '⤴️', '⤵️', '🔃', 
+      '🔄', '🔙', '🔚', '🔛', '🔜', '🔝', '🛐', '⚛️', '🕉️', '✡️', 
+      '☸️', '☯️', '✝️', '☦️', '☪️', '☮️', '🕎', '🔯', '♈', '♉', 
+      '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑', '♒', '♓', '⛎', 
+      '🔀', '🔁', '🔂', '▶️', '⏩', '⏭️', '⏯️', '◀️', '⏪', '⏮️', 
+      '🔼', '⏫', '🔽', '⏬', '⏸️', '⏹️', '⏺️', '⏏️', '🎦', '🔅', 
+      '🔆', '📶', '📳', '📴', '♀️', '♂️', '⚧️', '✖️', '➕', '➖', 
+      '➗', '♾️', '‼️', '⁉️', '❓', '❔', '❕', '❗', '〰️', '💱', 
+      '💲', '⚕️', '♻️', '⚜️', '🔱', '📛', '🔰', '⭕', '✅', '☑️', 
+      '✔️', '❌', '❎', '➰', '➿', '〽️', '✳️', '✴️', '❇️', '©️', 
+      '®️', '™️', '#️⃣', '*️⃣', '0️⃣', '1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', 
+      '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟', '🔠', '🔡', '🔢', '🔣', '🔤', 
+      '🅰️', '🆎', '🅱️', '🆑', '🆒', '🆓', 'ℹ️', '🆔', 'Ⓜ️', '🆕', 
+      '🆖', '🅾️', '🆗', '🅿️', '🆘', '🆙', '🆚', '🈁', '🈂️', '🈷️', 
+      '🈶', '🈯', '🉐', '🈹', '🈚', '🈲', '🉑', '🈸', '🈴', '🈳', 
+      '㊗️', '㊙️', '🈺', '🈵', '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', 
+      '🟤', '⚫', '⚪', '🟥', '🟧', '🟨', '🟩', '🟦', '🟪', '🟫', 
+      '⬛', '⬜', '◼️', '◻️', '◾', '◽', '▪️', '▫️', '🔶', '🔷', 
+      '🔸', '🔹', '🔺', '🔻', '💠', '🔘', '🔳', '🔲', '🏁', '🚩', 
+      '🎌', '🏴', '🏳️', '🏳️‍🌈', '🏴‍☠️', '🇦🇨', '🇦🇩', '🇦🇪', '🇦🇫', '🇦����', 
+      '🇦🇮', '🇦🇱', '🇦🇲', '🇦🇴', '🇦🇶', '🇦🇷', '🇦🇸', '🇦🇹', '🇦🇺', '🇦🇼', 
+      '🇦🇽', '🇦🇿', '🇧🇦', '🇧🇧', '🇧🇩', '🇧🇪', '🇧🇫', '🇧🇬', '🇧🇭', '🇧🇮', 
+      '🇧🇯', '🇧🇱', '🇧🇲', '🇧🇳', '🇧🇴', '🇧🇶', '🇧🇷', '🇧🇸', '🇧🇹', '🇧🇻', 
+      '🇧🇼', '🇧🇾', '🇧🇿', '🇨🇦', '🇨🇨', '🇨🇩', '🇨🇫', '🇨🇬', '🇨🇭', '🇨🇮', 
+      '🇨🇰', '🇨🇱', '🇨🇲', '🇨🇳', '🇨🇴', '🇨🇵', '🇨🇷', '🇨🇺', '🇨🇻', '🇨🇼', 
+      '🇨🇽', '🇨🇾', '🇨🇿'
+    ];
+    
     // Display loading indicator
     function setLoading(isLoading) {
       state.isLoading = isLoading;
@@ -750,6 +984,92 @@ if __name__ == '__main__':
       }
     }
     
+    // Get random emoji for 404 errors
+    function getRandomEmoji() {
+      return randomEmojis[Math.floor(Math.random() * randomEmojis.length)];
+    }
+    
+    // Toggle stats display
+    function toggleStats() {
+      state.statsVisible = !state.statsVisible;
+      elements.statsContent.classList.toggle('open', state.statsVisible);
+      elements.statsToggle.textContent = state.statsVisible ? 'Hide Stats' : 'Show Stats';
+      
+      if (state.statsVisible && state.topOwners.length > 0) {
+        renderCreatorStats();
+      }
+    }
+    
+    // Render creator stats chart
+    function renderCreatorStats() {
+      if (state.chartInstance) {
+        state.chartInstance.destroy();
+      }
+      
+      const ctx = elements.creatorStatsChart.getContext('2d');
+      
+      // Prepare data
+      const labels = state.topOwners.map(item => item[0]);
+      const data = state.topOwners.map(item => item[1]);
+      
+      // Generate colors for bars
+      const colors = [];
+      for (let i = 0; i < labels.length; i++) {
+        const hue = (i * 360 / labels.length) % 360;
+        colors.push(`hsla(${hue}, 70%, 80%, 0.7)`);
+      }
+      
+      // Create chart
+      state.chartInstance = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: 'Number of Spaces',
+            data: data,
+            backgroundColor: colors,
+            borderColor: colors.map(color => color.replace('0.7', '1')),
+            borderWidth: 1
+          }]
+        },
+        options: {
+          indexAxis: 'y',
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false
+            },
+            tooltip: {
+              callbacks: {
+                title: function(tooltipItems) {
+                  return tooltipItems[0].label;
+                },
+                label: function(context) {
+                  return `Spaces: ${context.raw}`;
+                }
+              }
+            }
+          },
+          scales: {
+            x: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: 'Number of Spaces'
+              }
+            },
+            y: {
+              title: {
+                display: true,
+                text: 'Creator ID'
+              }
+            }
+          }
+        }
+      });
+    }
+    
     // Load spaces with timeout
     async function loadSpaces(page = 0) {
       setLoading(true);
@@ -773,9 +1093,15 @@ if __name__ == '__main__':
         state.spaces = data.spaces;
         state.totalItems = data.total;
         state.currentPage = page;
+        state.topOwners = data.top_owners || [];
         
         renderGrid(data.spaces);
         renderPagination();
+        
+        // If stats are visible, update chart
+        if (state.statsVisible && state.topOwners.length > 0) {
+          renderCreatorStats();
+        }
       } catch (error) {
         console.error('Error loading spaces:', error);
         
@@ -854,7 +1180,7 @@ if __name__ == '__main__':
       elements.pagination.appendChild(nextButton);
     }
     
-    // Handle iframe error and provide static site fallback
+    // Handle iframe error and provide static site fallback with random emoji
     function handleIframeError(iframe, owner, name, title) {
       const container = iframe.parentNode;
       
@@ -862,11 +1188,11 @@ if __name__ == '__main__':
       const errorPlaceholder = document.createElement('div');
       errorPlaceholder.className = 'error-placeholder';
       
-      // Error icon
-      const errorIcon = document.createElement('div');
-      errorIcon.className = 'error-icon';
-      errorIcon.textContent = '⚠️';
-      errorPlaceholder.appendChild(errorIcon);
+      // Random emoji instead of error icon
+      const errorEmoji = document.createElement('div');
+      errorEmoji.className = 'error-emoji';
+      errorEmoji.textContent = getRandomEmoji();
+      errorPlaceholder.appendChild(errorEmoji);
       
       // Error message
       const errorMessage = document.createElement('p');
@@ -1008,7 +1334,7 @@ if __name__ == '__main__':
               state.staticModeAttempted[spaceKey] = true;
               iframe.src = directUrl + '/index.html';
             } else {
-              // If static mode also failed, show error
+              // If static mode also failed, show error with random emoji
               handleIframeError(iframe, owner, name, title);
             }
           };
@@ -1023,13 +1349,16 @@ if __name__ == '__main__':
                                  iframeDoc.body.textContent.includes('404') ||
                                  iframeDoc.body.textContent.includes('not found');
               
-              if (isErrorPage && !state.staticModeAttempted[spaceKey]) {
-                // If it's an error page and we haven't tried static mode yet
-                state.staticModeAttempted[spaceKey] = true;
-                iframe.src = directUrl + '/index.html';
-              } else if (isErrorPage) {
-                // If static mode already attempted and still failing
-                handleIframeError(iframe, owner, name, title);
+              if (isErrorPage) {
+                // For 404 errors, show random emoji
+                if (!state.staticModeAttempted[spaceKey]) {
+                  // Try static mode first
+                  state.staticModeAttempted[spaceKey] = true;
+                  iframe.src = directUrl + '/index.html';
+                } else {
+                  // If static mode already attempted and still failing, show random emoji
+                  handleIframeError(iframe, owner, name, title);
+                }
               }
             } catch (e) {
               // Cross-origin errors are expected, this generally means the iframe loaded
@@ -1092,6 +1421,9 @@ if __name__ == '__main__':
     // Refresh button event listener
     elements.refreshButton.addEventListener('click', () => loadSpaces(0));
     
+    // Stats toggle button event listener
+    elements.statsToggle.addEventListener('click', toggleStats);
+    
     // Mac buttons functionality (just for show)
     document.querySelectorAll('.mac-button').forEach(button => {
       button.addEventListener('click', function(e) {