ZeroGPU-Leader / app.py
openfree's picture
Update app.py
331da74 verified
raw
history blame
38.1 kB
from flask import Flask, render_template, request, jsonify
import requests
import os
import time
import random
from collections import Counter
app = Flask(__name__)
##########################################
# 1) ์ฒซ ๋ฒˆ์งธ ํƒญ์šฉ: VIDraft/SanaSprint 6๊ฐœ
##########################################
def fetch_trending_spaces(offset=0, limit=50):
"""
์›๋ž˜ Hugging Face /api/spaces๋ฅผ ํ˜ธ์ถœํ•˜๋˜ ๋ถ€๋ถ„์„
์ง์ ‘ ๋”๋ฏธ ๋ฐ์ดํ„ฐ(๋™์ผํ•œ URL 6๊ฐœ)๋งŒ ๋ฐ˜ํ™˜ํ•˜๋„๋ก ์ˆ˜์ •.
"""
try:
# ์—ฌ๊ธฐ์„œ๋Š” 6๊ฐœ๋งŒ ๋งŒ๋“ค์–ด ๋ฐ˜ํ™˜
# (์‹ค์ œ๋กœ offset/limit ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ , 6๊ฐœ๋งŒ ๋ฐ˜ํ™˜)
my_spaces = []
for i in range(6):
my_spaces.append({
'id': 'VIDraft/SanaSprint',
'owner': 'VIDraft',
'title': f'SanaSprint #{i+1}',
'likes': 100 + i,
'createdAt': '2023-01-01T00:00:00.000Z'
})
return {
'spaces': my_spaces,
'total': 6, # ์ด 6๊ฐœ
'offset': 0,
'limit': 6,
'all_spaces': my_spaces # ํ†ต๊ณ„ ๊ณ„์‚ฐ์šฉ(์—ฌ๊ธฐ์„œ๋Š” 6๊ฐœ๋งŒ ๊ทธ๋Œ€๋กœ)
}
except Exception as e:
print(f"Exception when fetching spaces: {e}")
# ๋ฌธ์ œ ๋ฐœ์ƒ์‹œ, ํ˜น์€ ๋นˆ ๋ฐฐ์—ด ์ฃผ์–ด๋„ ๋จ
return {
'spaces': [],
'total': 0,
'offset': 0,
'limit': 6,
'all_spaces': []
}
def transform_url(owner, name):
# ์ (.) -> ๋Œ€์‰ฌ(-), ์–ธ๋”๋ฐ”(_) -> ๋Œ€์‰ฌ(-), ์†Œ๋ฌธ์žํ™”
name = name.replace('.', '-').replace('_', '-').lower()
owner = owner.lower()
return f"https://{owner}-{name}.hf.space"
def get_space_details(space_data, index, offset):
try:
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', '')
if owner == 'None' or name == 'None':
return None
original_url = f"https://huggingface.co/spaces/{owner}/{name}"
embed_url = transform_url(owner, name)
likes_count = space_data.get('likes', 0)
title = space_data.get('title', name)
tags = space_data.get('tags', [])
return {
'url': original_url,
'embedUrl': embed_url,
'title': title,
'owner': owner,
'name': name,
'likes_count': likes_count,
'tags': tags,
'rank': offset + index + 1
}
except Exception as e:
print(f"Error processing space data: {e}")
return {
'url': 'https://huggingface.co/spaces',
'embedUrl': 'https://huggingface.co/spaces',
'title': 'Error Loading Space',
'owner': 'huggingface',
'name': 'error',
'likes_count': 0,
'tags': [],
'rank': offset + index + 1
}
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)
owner_counts = Counter(owners)
top_owners = owner_counts.most_common(30)
return top_owners
##########################################
# 2) ๋‘ ๋ฒˆ์งธ ํƒญ์šฉ: VIDraft/SanaSprint
# (์›ํ•˜๋Š” ๊ฐœ์ˆ˜๋งŒํผ - ์—ฌ๊ธฐ์„  ์˜ˆ์‹œ๋กœ 6๊ฐœ)
##########################################
CUSTOM_SPACES = []
for i in range(6):
CUSTOM_SPACES.append({
'owner': 'VIDraft',
'name': 'SanaSprint',
'title': f'SanaSprint Demo #{i+1}',
'likes': 500 + i,
})
@app.route('/api/custom-spaces', methods=['GET'])
def custom_spaces():
"""
๋‘ ๋ฒˆ์งธ ํƒญ์—์„œ ํ‘œ์‹œํ•  Space๋“ค์„ ๋ฐ˜ํ™˜ (์—ฌ๊ธฐ์„œ๋„ 6๊ฐœ).
"""
results = []
for index, item in enumerate(CUSTOM_SPACES):
owner = item['owner']
name = item['name']
title = item.get('title', name)
likes_count = item.get('likes', 0)
results.append({
'url': f"https://huggingface.co/spaces/{owner}/{name}",
'embedUrl': transform_url(owner, name),
'title': title,
'owner': owner,
'name': name,
'likes_count': likes_count,
'tags': [],
'rank': index + 1
})
return jsonify({
'spaces': results,
'total': len(results),
})
@app.route('/')
def home():
return render_template('index.html')
@app.route('/api/trending-spaces', methods=['GET'])
def trending_spaces():
"""
์ฒซ ๋ฒˆ์งธ ํƒญ: ์œ„์—์„œ ๋งŒ๋“  fetch_trending_spaces()์˜ ๊ฒฐ๊ณผ๋ฅผ
๊ทธ๋Œ€๋กœ ๋ Œ๋”๋ง (์‹ค์ œ๋กœ๋Š” 6๊ฐœ ์งœ๋ฆฌ ๋”๋ฏธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜).
"""
search_query = request.args.get('search', '').lower()
offset = int(request.args.get('offset', 0))
limit = int(request.args.get('limit', 50))
spaces_data = fetch_trending_spaces(offset, limit)
results = []
for index, space_data in enumerate(spaces_data['spaces']):
space_info = get_space_details(space_data, index, offset)
if not space_info:
continue
# ๊ฒ€์ƒ‰์–ด๊ฐ€ ์žˆ์œผ๋ฉด ํ•„ํ„ฐ๋ง(์‚ฌ์šฉ ์•ˆ ํ•˜์…”๋„ ๋จ)
if search_query:
title = space_info['title'].lower()
owner = space_info['owner'].lower()
url = space_info['url'].lower()
tags = ' '.join([str(tag) for tag in space_info.get('tags', [])]).lower()
if (search_query not in title
and search_query not in owner
and search_query not in url
and search_query not in tags):
continue
results.append(space_info)
top_owners = get_owner_stats(spaces_data.get('all_spaces', []))
return jsonify({
'spaces': results,
'total': spaces_data['total'],
'offset': offset,
'limit': limit,
'top_owners': top_owners
})
if __name__ == '__main__':
os.makedirs('templates', exist_ok=True)
with open('templates/index.html', 'w', encoding='utf-8') as f:
f.write('''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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');
:root {
--pastel-pink: #FFD6E0;
--pastel-blue: #C5E8FF;
--pastel-purple: #E0C3FC;
--pastel-yellow: #FFF2CC;
--pastel-green: #C7F5D9;
--pastel-orange: #FFE0C3;
--mac-window-bg: rgba(250, 250, 250, 0.85);
--mac-toolbar: #F5F5F7;
--mac-border: #E2E2E2;
--mac-button-red: #FF5F56;
--mac-button-yellow: #FFBD2E;
--mac-button-green: #27C93F;
--text-primary: #333;
--text-secondary: #666;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
* {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
line-height: 1.6;
color: var(--text-primary);
background-color: #f8f9fa;
background-image: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-purple) 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1600px;
margin: 0 auto;
}
.mac-window {
background-color: var(--mac-window-bg);
border-radius: 10px;
box-shadow: var(--box-shadow);
backdrop-filter: blur(10px);
overflow: hidden;
margin-bottom: 2rem;
border: 1px solid var(--mac-border);
}
.mac-toolbar {
display: flex;
align-items: center;
padding: 10px 15px;
background-color: var(--mac-toolbar);
border-bottom: 1px solid var(--mac-border);
}
.mac-buttons {
display: flex; gap: 8px; margin-right: 15px;
}
.mac-button {
width: 12px; height: 12px; border-radius: 50%; cursor: default;
}
.mac-close { background-color: var(--mac-button-red); }
.mac-minimize { background-color: var(--mac-button-yellow); }
.mac-maximize { background-color: var(--mac-button-green); }
.mac-title {
flex-grow: 1; text-align: center; font-size: 0.9rem; color: var(--text-secondary);
}
.mac-content { padding: 20px; }
.header {
text-align: center;
margin-bottom: 1.5rem; position: relative;
}
.header h1 {
font-size: 2.2rem; font-weight: 700; margin: 0; color: #2d3748; letter-spacing: -0.5px;
}
.header p {
color: var(--text-secondary);
margin-top: 0.5rem;
font-size: 1.1rem;
}
.tab-nav {
display: flex; gap: 20px; justify-content: center; margin-bottom: 20px;
}
.tab-button {
padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer;
background-color: #ffffffcc; font-weight: 600; transition: 0.2s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tab-button:hover {
background-color: var(--pastel-green);
}
.tab-button.active {
background-color: var(--pastel-purple);
color: #4a5568;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.search-bar {
display: flex; align-items: center; margin-bottom: 1.5rem;
background-color: white; border-radius: 30px; padding: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); max-width: 600px;
margin-left: auto; margin-right: auto;
}
.search-bar input {
flex-grow: 1; border: none; padding: 12px 20px; font-size: 1rem;
outline: none; background: transparent; border-radius: 30px;
}
.search-bar .refresh-btn {
background-color: var(--pastel-green); color: #1a202c; border: none;
border-radius: 30px; padding: 10px 20px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px;
}
.search-bar .refresh-btn:hover {
background-color: #9ee7c0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.refresh-icon {
display: inline-block; width: 16px; height: 16px; border: 2px solid #1a202c;
border-top-color: transparent; border-radius: 50%; animation: none;
}
.refreshing .refresh-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.grid-item {
height: 500px; position: relative; overflow: hidden;
transition: all 0.3s ease; border-radius: 15px;
}
.grid-item:nth-child(6n+1) { background-color: var(--pastel-pink); }
.grid-item:nth-child(6n+2) { background-color: var(--pastel-blue); }
.grid-item:nth-child(6n+3) { background-color: var(--pastel-purple); }
.grid-item:nth-child(6n+4) { background-color: var(--pastel-yellow); }
.grid-item:nth-child(6n+5) { background-color: var(--pastel-green); }
.grid-item:nth-child(6n+6) { background-color: var(--pastel-orange); }
.grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.grid-header {
padding: 15px;
display: flex; flex-direction: column;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.grid-header-top {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.rank-badge {
background-color: #1a202c; color: white; font-size: 0.8rem; font-weight: 600;
padding: 4px 8px; border-radius: 50px;
}
.grid-header h3 {
margin: 0; font-size: 1.2rem; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid-meta {
display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;
}
.owner-info { color: var(--text-secondary); font-weight: 500; }
.likes-counter {
display: flex; align-items: center; color: #e53e3e; font-weight: 600;
}
.likes-counter span { margin-left: 4px; }
.grid-actions {
padding: 10px 15px; text-align: right; background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px); position: absolute; bottom: 0; left: 0; right: 0;
z-index: 10; display: flex; justify-content: flex-end;
}
.open-link {
text-decoration: none; color: #2c5282; font-weight: 600;
padding: 5px 10px; border-radius: 5px; transition: all 0.2s;
background-color: rgba(237, 242, 247, 0.8);
}
.open-link:hover { background-color: #e2e8f0; }
.grid-content {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
padding-top: 85px; padding-bottom: 45px;
}
.iframe-container {
width: 100%; height: 100%; overflow: hidden; position: relative;
}
.grid-content iframe {
transform: scale(0.7); transform-origin: top left;
width: 142.857%; height: 142.857%; border: none; border-radius: 0;
}
.error-placeholder {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: 20px; background-color: rgba(255, 255, 255, 0.9);
text-align: center;
}
.error-emoji {
font-size: 6rem; margin-bottom: 1.5rem;
animation: bounce 1s infinite alternate;
text-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
@keyframes bounce {
from { transform: translateY(0px) scale(1); }
to { transform: translateY(-15px) scale(1.1); }
}
.pagination {
display: flex; justify-content: center; align-items: center; gap: 10px;
margin: 2rem 0;
}
.pagination-button {
background-color: white; border: none; padding: 10px 20px; border-radius: 10px;
font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
color: var(--text-primary); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.pagination-button:hover {
background-color: #f8f9fa; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.pagination-button.active {
background-color: var(--pastel-purple); color: #4a5568;
}
.pagination-button:disabled {
background-color: #edf2f7; color: #a0aec0;
cursor: default; box-shadow: none;
}
.loading {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px);
display: flex; justify-content: center; align-items: center; z-index: 1000;
}
.loading-content { text-align: center; }
.loading-spinner {
width: 60px; height: 60px; border: 5px solid #e2e8f0;
border-top-color: var(--pastel-purple); border-radius: 50%;
animation: spin 1s linear infinite; margin: 0 auto 15px;
}
.loading-text {
font-size: 1.2rem; font-weight: 600; color: #4a5568;
}
.loading-error {
display: none; margin-top: 10px; color: #e53e3e; font-size: 0.9rem;
}
.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; }
@media (max-width: 768px) {
body { padding: 1rem; }
.grid-container { grid-template-columns: 1fr; }
.search-bar { flex-direction: column; padding: 10px; }
.search-bar input { width: 100%; margin-bottom: 10px; }
.search-bar .refresh-btn { width: 100%; justify-content: center; }
.pagination { flex-wrap: wrap; }
.chart-container { height: 300px; }
}
</style>
</head>
<body>
<div class="container">
<div class="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">Huggingface Explorer</div>
</div>
<div class="mac-content">
<div class="header">
<h1>HF Space Leaderboard</h1>
<p>์ฒซ ๋ฒˆ์งธ ํƒญ: ๋™์ผํ•œ URL 6๊ฐœ / ๋‘ ๋ฒˆ์งธ ํƒญ: ๋™์ผํ•œ URL 6๊ฐœ</p>
</div>
<!-- ํƒญ ๋„ค๋น„๊ฒŒ์ด์…˜ -->
<div class="tab-nav">
<button class="tab-button active" data-tab="leaderboardTab">์ฒซ ๋ฒˆ์งธ ํƒญ</button>
<button class="tab-button" data-tab="customTab">๋‘ ๋ฒˆ์งธ ํƒญ</button>
</div>
<!-- ์ฒซ ๋ฒˆ์งธ ํƒญ (๋ฆฌ๋”๋ณด๋“œ) -->
<div id="leaderboardTab" class="tab-content active">
<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">
<span class="refresh-icon"></span>
Refresh
</button>
</div>
<div id="gridContainer" class="grid-container"></div>
<div id="pagination" class="pagination"></div>
</div>
<!-- ๋‘ ๋ฒˆ์งธ ํƒญ (์ปค์Šคํ…€) -->
<div id="customTab" class="tab-content">
<h2 style="text-align:center; margin-bottom:1rem;">๋‘ ๋ฒˆ์งธ ํƒญ: ๋™์ผํ•œ URL 6๊ฐœ</h2>
<div id="customGridContainer" class="grid-container"></div>
</div>
</div>
</div>
</div>
<div id="loadingIndicator" class="loading" style="display:none;">
<div class="loading-content">
<div class="loading-spinner"></div>
<div class="loading-text">Loading amazing spaces...</div>
<div id="loadingError" class="loading-error">
If this takes too long, try refreshing the page.
</div>
</div>
</div>
<script>
const elements = {
gridContainer: document.getElementById('gridContainer'),
customGridContainer: document.getElementById('customGridContainer'),
loadingIndicator: document.getElementById('loadingIndicator'),
loadingError: document.getElementById('loadingError'),
searchInput: document.getElementById('searchInput'),
refreshButton: document.getElementById('refreshButton'),
pagination: document.getElementById('pagination'),
statsToggle: document.getElementById('statsToggle'),
statsContent: document.getElementById('statsContent'),
creatorStatsChart: document.getElementById('creatorStatsChart')
};
const state = {
isLoading: false,
spaces: [],
currentPage: 0,
itemsPerPage: 50,
totalItems: 0,
loadingTimeout: null,
staticModeAttempted: {},
statsVisible: false,
chartInstance: null,
topOwners: [],
iframeStatuses: {},
customSpaces: []
};
const iframeLoader = {
checkQueue: {},
maxAttempts: 5,
checkInterval: 5000,
startChecking: function(iframe, owner, name, title, spaceKey) {
this.checkQueue[spaceKey] = {
iframe, owner, name, title,
attempts: 0,
status: 'loading'
};
this.checkIframeStatus(spaceKey);
},
checkIframeStatus: function(spaceKey) {
if (!this.checkQueue[spaceKey]) return;
const item = this.checkQueue[spaceKey];
const iframe = item.iframe;
if (item.status !== 'loading') {
delete this.checkQueue[spaceKey];
return;
}
item.attempts++;
try {
if (!iframe || !iframe.parentNode) {
delete this.checkQueue[spaceKey];
return;
}
try {
const hasContent = iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body;
if (hasContent && iframe.contentWindow.document.body.innerHTML.length > 100) {
const bodyText = iframe.contentWindow.document.body.textContent.toLowerCase();
if (bodyText.includes('forbidden') ||
bodyText.includes('404') ||
bodyText.includes('not found') ||
bodyText.includes('error')) {
item.status = 'error';
handleIframeError(iframe, item.owner, item.name, item.title);
} else {
item.status = 'success';
}
delete this.checkQueue[spaceKey];
return;
}
} catch(e) {}
const rect = iframe.getBoundingClientRect();
if (rect.width > 50 && rect.height > 50 && item.attempts > 2) {
item.status = 'success';
delete this.checkQueue[spaceKey];
return;
}
if (item.attempts >= this.maxAttempts) {
if (iframe.offsetWidth > 0 && iframe.offsetHeight > 0) {
item.status = 'success';
} else {
item.status = 'error';
handleIframeError(iframe, item.owner, item.name, item.title);
}
delete this.checkQueue[spaceKey];
return;
}
const nextDelay = this.checkInterval * Math.pow(1.5, item.attempts - 1);
setTimeout(() => this.checkIframeStatus(spaceKey), nextDelay);
} catch(e) {
console.error('Error checking iframe status:', e);
if (item.attempts >= this.maxAttempts) {
item.status = 'error';
handleIframeError(iframe, item.owner, item.name, item.title);
delete this.checkQueue[spaceKey];
} else {
setTimeout(() => this.checkIframeStatus(spaceKey), this.checkInterval);
}
}
}
};
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();
}
}
function renderCreatorStats() {
if (state.chartInstance) {
state.chartInstance.destroy();
}
const ctx = elements.creatorStatsChart.getContext('2d');
const labels = state.topOwners.map(item => item[0]);
const data = state.topOwners.map(item => item[1]);
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)`);
}
state.chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Number of Spaces',
data: data,
backgroundColor: colors,
borderColor: colors.map(c => c.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' },
ticks: {
autoSkip: false,
font: function(context) {
const defaultSize = 11;
return {
size: labels.length > 20 ? defaultSize - 1 : defaultSize
};
}
}
}
}
}
});
}
async function loadSpaces(page=0) {
setLoading(true);
try {
const searchText = elements.searchInput.value;
const offset = page * state.itemsPerPage;
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timeout')), 30000)
);
const fetchPromise = fetch(\`/api/trending-spaces?search=\${encodeURIComponent(searchText)}&offset=\${offset}&limit=\${state.itemsPerPage}\`);
const response = await Promise.race([fetchPromise, timeoutPromise]);
const data = await response.json();
state.spaces = data.spaces;
state.totalItems = data.total;
state.currentPage = page;
state.topOwners = data.top_owners || [];
renderGrid(data.spaces, elements.gridContainer);
renderPagination();
if (state.statsVisible && state.topOwners.length > 0) {
renderCreatorStats();
}
} catch(e) {
console.error(e);
elements.gridContainer.innerHTML = \`
<div style="grid-column: 1/-1; text-align: center; padding: 40px;">
<div style="font-size: 3rem; margin-bottom: 20px;">โš ๏ธ</div>
<h3 style="margin-bottom: 10px;">Unable to load spaces</h3>
<p style="color: #666;">Please try refreshing the page.</p>
<button id="retryButton" style="margin-top: 20px; padding: 10px 20px; background: var(--pastel-purple); border: none; border-radius: 5px; cursor: pointer;">
Try Again
</button>
</div>
\`;
document.getElementById('retryButton')?.addEventListener('click', () => loadSpaces(0));
renderPagination();
} finally {
setLoading(false);
}
}
function renderPagination() {
elements.pagination.innerHTML = '';
const totalPages = Math.ceil(state.totalItems / state.itemsPerPage);
const prevButton = document.createElement('button');
prevButton.className = \`pagination-button \${state.currentPage === 0 ? 'disabled' : ''}\`;
prevButton.textContent = 'Previous';
prevButton.disabled = state.currentPage === 0;
prevButton.addEventListener('click', () => {
if (state.currentPage > 0) loadSpaces(state.currentPage - 1);
});
elements.pagination.appendChild(prevButton);
const maxButtons = 7;
let startPage = Math.max(0, state.currentPage - Math.floor(maxButtons / 2));
let endPage = Math.min(totalPages - 1, startPage + maxButtons - 1);
if (endPage - startPage + 1 < maxButtons) {
startPage = Math.max(0, endPage - maxButtons + 1);
}
for (let i = startPage; i <= endPage; i++) {
const pageButton = document.createElement('button');
pageButton.className = \`pagination-button \${i === state.currentPage ? 'active' : ''}\`;
pageButton.textContent = i + 1;
pageButton.addEventListener('click', () => {
if (i !== state.currentPage) {
loadSpaces(i);
}
});
elements.pagination.appendChild(pageButton);
}
const nextButton = document.createElement('button');
nextButton.className = \`pagination-button \${state.currentPage >= totalPages - 1 ? 'disabled' : ''}\`;
nextButton.textContent = 'Next';
nextButton.disabled = state.currentPage >= totalPages - 1;
nextButton.addEventListener('click', () => {
if (state.currentPage < totalPages - 1) {
loadSpaces(state.currentPage + 1);
}
});
elements.pagination.appendChild(nextButton);
}
function handleIframeError(iframe, owner, name, title) {
const container = iframe.parentNode;
const errorPlaceholder = document.createElement('div');
errorPlaceholder.className = 'error-placeholder';
const errorMessage = document.createElement('p');
errorMessage.textContent = \`"\${title}" space couldn't be loaded\`;
errorPlaceholder.appendChild(errorMessage);
const directLink = document.createElement('a');
directLink.href = \`https://huggingface.co/spaces/\${owner}/\${name}\`;
directLink.target = '_blank';
directLink.textContent = 'Visit HF Space';
directLink.style.color = '#3182ce';
directLink.style.marginTop = '10px';
directLink.style.display = 'inline-block';
directLink.style.padding = '8px 16px';
directLink.style.background = '#ebf8ff';
directLink.style.borderRadius = '5px';
directLink.style.fontWeight = '600';
errorPlaceholder.appendChild(directLink);
iframe.style.display = 'none';
container.appendChild(errorPlaceholder);
}
function renderGrid(spaces, containerEl) {
containerEl.innerHTML = '';
if (!spaces || spaces.length === 0) {
const noResultsMsg = document.createElement('p');
noResultsMsg.textContent = 'No spaces found.';
noResultsMsg.style.padding = '2rem';
noResultsMsg.style.textAlign = 'center';
noResultsMsg.style.fontStyle = 'italic';
noResultsMsg.style.color = '#718096';
containerEl.appendChild(noResultsMsg);
return;
}
spaces.forEach(item => {
try {
const { url, title, likes_count, owner, name, rank } = item;
if (owner === 'None') return;
const gridItem = document.createElement('div');
gridItem.className = 'grid-item';
const header = document.createElement('div');
header.className = 'grid-header';
const headerTop = document.createElement('div');
headerTop.className = 'grid-header-top';
const titleEl = document.createElement('h3');
titleEl.textContent = title;
titleEl.title = title;
headerTop.appendChild(titleEl);
const rankBadge = document.createElement('div');
rankBadge.className = 'rank-badge';
rankBadge.textContent = \`#\${rank}\`;
headerTop.appendChild(rankBadge);
header.appendChild(headerTop);
const metaInfo = document.createElement('div');
metaInfo.className = 'grid-meta';
const ownerEl = document.createElement('div');
ownerEl.className = 'owner-info';
ownerEl.textContent = \`by \${owner}\`;
metaInfo.appendChild(ownerEl);
const likesCounter = document.createElement('div');
likesCounter.className = 'likes-counter';
likesCounter.innerHTML = 'โ™ฅ <span>' + likes_count + '</span>';
metaInfo.appendChild(likesCounter);
header.appendChild(metaInfo);
gridItem.appendChild(header);
const content = document.createElement('div');
content.className = 'grid-content';
const iframeContainer = document.createElement('div');
iframeContainer.className = 'iframe-container';
const iframe = document.createElement('iframe');
const directUrl = createDirectUrl(owner, name);
iframe.src = directUrl;
iframe.title = title;
iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope;';
iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('frameborder', '0');
iframe.loading = 'lazy';
const spaceKey = \`\${owner}/\${name}\`;
state.iframeStatuses[spaceKey] = 'loading';
iframe.onload = function() {
iframeLoader.startChecking(iframe, owner, name, title, spaceKey);
};
iframe.onerror = function() {
handleIframeError(iframe, owner, name, title);
state.iframeStatuses[spaceKey] = 'error';
};
setTimeout(() => {
if (state.iframeStatuses[spaceKey] === 'loading') {
handleIframeError(iframe, owner, name, title);
state.iframeStatuses[spaceKey] = 'error';
}
}, 30000);
iframeContainer.appendChild(iframe);
content.appendChild(iframeContainer);
const actions = document.createElement('div');
actions.className = 'grid-actions';
const linkEl = document.createElement('a');
linkEl.href = url;
linkEl.target = '_blank';
linkEl.className = 'open-link';
linkEl.textContent = 'Open in new window';
actions.appendChild(linkEl);
gridItem.appendChild(content);
gridItem.appendChild(actions);
containerEl.appendChild(gridItem);
} catch(e) {
console.error('Item rendering error:', e);
}
});
}
function createDirectUrl(owner, name) {
try {
name = name.replace(/\\./g, '-').replace(/_/g, '-').toLowerCase();
owner = owner.toLowerCase();
return \`https://\${owner}-\${name}.hf.space\`;
} catch(e) {
console.error(e);
return 'https://huggingface.co';
}
}
async function loadCustomSpaces() {
try {
const resp = await fetch('/api/custom-spaces');
const data = await resp.json();
state.customSpaces = data.spaces || [];
renderGrid(state.customSpaces, elements.customGridContainer);
} catch(e) {
console.error(e);
elements.customGridContainer.innerHTML = '<p style="text-align:center; color:red;">Error loading custom spaces.</p>';
}
}
document.querySelectorAll('.mac-button').forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
});
});
function setLoading(isLoading) {
state.isLoading = isLoading;
elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
if (isLoading) {
elements.refreshButton.classList.add('refreshing');
clearTimeout(state.loadingTimeout);
state.loadingTimeout = setTimeout(() => {
elements.loadingError.style.display = 'block';
}, 10000);
} else {
elements.refreshButton.classList.remove('refreshing');
clearTimeout(state.loadingTimeout);
elements.loadingError.style.display = 'none';
}
}
// ํƒญ ์ „ํ™˜
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(btn => {
btn.addEventListener('click', () => {
tabButtons.forEach(b => b.classList.remove('active'));
tabContents.forEach(tc => tc.classList.remove('active'));
btn.classList.add('active');
const tabId = btn.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// ์ดˆ๊ธฐ ์‹คํ–‰
window.addEventListener('load', function() {
// ์ฒซ ๋ฒˆ์งธ ํƒญ ๋กœ๋“œ
loadSpaces(0);
// ๋‘ ๋ฒˆ์งธ ํƒญ๋„ ๋กœ๋“œ
loadCustomSpaces();
});
// ํ˜น์‹œ๋‚˜ ๋กœ๋”ฉ์ด ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ฆด ๋•Œ ์•ˆ์ „์žฅ์น˜
setTimeout(() => {
if (state.isLoading) {
setLoading(false);
elements.gridContainer.innerHTML = \`
<div style="grid-column: 1/-1; text-align: center; padding: 40px;">
<div style="font-size: 3rem; margin-bottom: 20px;">โฑ๏ธ</div>
<h3 style="margin-bottom: 10px;">Loading is taking longer than expected</h3>
<p style="color: #666;">Please try refreshing the page.</p>
<button onClick="window.location.reload()" style="margin-top: 20px; padding: 10px 20px; background: var(--pastel-purple); border: none; border-radius: 5px; cursor: pointer;">
Reload Page
</button>
</div>
\`;
}
}, 20000);
</script>
</body>
</html>
''')
# Huggingface Spaces์—์„œ ์ผ๋ฐ˜์ ์œผ๋กœ 7860 ํฌํŠธ ์‚ฌ์šฉ
app.run(host='0.0.0.0', port=7860)