|
|
<!DOCTYPE html> |
|
|
<html lang="ko"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Models Trending Dashboard</title> |
|
|
<style> |
|
|
* { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
text-align: center; |
|
|
color: #2c3e50; |
|
|
margin-bottom: 40px; |
|
|
font-size: 3rem; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.category-tabs { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-bottom: 30px; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
padding: 15px 35px; |
|
|
border: none; |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
color: #555; |
|
|
border-radius: 30px; |
|
|
cursor: pointer; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.tab-button:hover { |
|
|
transform: translateY(-3px) scale(1.05); |
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.content-section { |
|
|
display: none; |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.content-section.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.section-header h2 { |
|
|
color: #667eea; |
|
|
font-size: 2rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.filter-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-bottom: 30px; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.filter-btn { |
|
|
padding: 10px 25px; |
|
|
border: 2px solid #e0e0e0; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
color: #666; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s ease; |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
.filter-btn:hover { |
|
|
border-color: #667eea; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.filter-btn.active { |
|
|
background: #667eea; |
|
|
color: white; |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.items-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); |
|
|
gap: 25px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.item-card { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border-radius: 20px; |
|
|
padding: 25px; |
|
|
padding-top: 35px; |
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.08); |
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.item-card:hover { |
|
|
transform: translateY(-10px) scale(1.02); |
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
.item-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 5px; |
|
|
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.rank-badge { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
right: 15px; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
font-size: 1.1rem; |
|
|
color: white; |
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.badge-label { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
left: 15px; |
|
|
background: rgba(0,0,0,0.8); |
|
|
color: white; |
|
|
padding: 5px 12px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.item-header { |
|
|
display: flex; |
|
|
align-items: start; |
|
|
gap: 15px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.item-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background: linear-gradient(135deg, #f5f7fa, #c3cfe2); |
|
|
border-radius: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.8rem; |
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.item-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.item-title { |
|
|
font-weight: 700; |
|
|
color: #2c3e50; |
|
|
margin-bottom: 5px; |
|
|
font-size: 1.2rem; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.item-author { |
|
|
color: #7f8c8d; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.item-stats { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-top: 15px; |
|
|
font-size: 0.9rem; |
|
|
color: #666; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
background: rgba(102, 126, 234, 0.1); |
|
|
padding: 5px 12px; |
|
|
border-radius: 15px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.tags-container { |
|
|
margin-top: 12px; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
background: linear-gradient(135deg, #e0e7ff, #f0f4ff); |
|
|
padding: 4px 12px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.8rem; |
|
|
color: #667eea; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
text-align: center; |
|
|
padding: 60px; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
display: inline-block; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border: 4px solid rgba(102, 126, 234, 0.2); |
|
|
border-top: 4px solid #667eea; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.refresh-btn { |
|
|
position: fixed; |
|
|
bottom: 40px; |
|
|
right: 40px; |
|
|
width: 70px; |
|
|
height: 70px; |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
font-size: 1.8rem; |
|
|
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 100; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.refresh-btn:hover { |
|
|
transform: scale(1.1) rotate(180deg); |
|
|
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.items-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
padding: 12px 25px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>๐ AI Models Trending Dashboard</h1> |
|
|
|
|
|
<div class="category-tabs"> |
|
|
<button class="tab-button active" onclick="showCategory('hf-models')"> |
|
|
๐ค HF Models |
|
|
</button> |
|
|
<button class="tab-button" onclick="showCategory('hf-spaces')"> |
|
|
๐ฏ HF Spaces |
|
|
</button> |
|
|
<button class="tab-button" onclick="showCategory('replicate')"> |
|
|
โก Replicate |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="hf-models" class="content-section active"> |
|
|
<div class="section-header"> |
|
|
<h2>๐ Trending Models</h2> |
|
|
</div> |
|
|
<div id="hf-models-content" class="items-grid"> |
|
|
<div class="loading"> |
|
|
<div class="loading-spinner"></div> |
|
|
<p>Loading trending models...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="hf-spaces" class="content-section"> |
|
|
<div class="section-header"> |
|
|
<h2>๐ฏ Trending Spaces</h2> |
|
|
</div> |
|
|
<div id="hf-spaces-content" class="items-grid"> |
|
|
<div class="loading"> |
|
|
<div class="loading-spinner"></div> |
|
|
<p>Loading trending spaces...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="replicate" class="content-section"> |
|
|
<div class="section-header"> |
|
|
<h2>โ
Official Collection</h2> |
|
|
<p style="color: #7f8c8d; margin-top: 5px;">from replicate.com/collections/official</p> |
|
|
</div> |
|
|
<div id="replicate-content" class="items-grid"> |
|
|
<div class="loading"> |
|
|
<div class="loading-spinner"></div> |
|
|
<p>Loading official models...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="refresh-btn" onclick="refreshCurrent()">๐</button> |
|
|
|
|
|
<script> |
|
|
let currentCategory = 'hf-models'; |
|
|
|
|
|
|
|
|
const replicateUrls = [ |
|
|
"https://replicate.com/google/imagen-4", |
|
|
"https://replicate.com/google/imagen-3-fast", |
|
|
"https://replicate.com/google/imagen-3", |
|
|
"https://replicate.com/google/lyria-2", |
|
|
"https://replicate.com/luma/ray-flash-2-720p", |
|
|
"https://replicate.com/luma/ray-2-720p", |
|
|
"https://replicate.com/luma/ray-flash-2-540p", |
|
|
"https://replicate.com/luma/ray-2-540p", |
|
|
"https://replicate.com/luma/ray", |
|
|
"https://replicate.com/google/veo-2", |
|
|
"https://replicate.com/black-forest-labs/flux-dev-lora", |
|
|
"https://replicate.com/anthropic/claude-4-sonnet", |
|
|
"https://replicate.com/kwaivgi/kling-v1.6-pro", |
|
|
"https://replicate.com/kwaivgi/kling-v1.6-standard", |
|
|
"https://replicate.com/pixverse/pixverse-v4.5", |
|
|
"https://replicate.com/pixverse/pixverse-v4", |
|
|
"https://replicate.com/openai/o4-mini", |
|
|
"https://replicate.com/openai/o1", |
|
|
"https://replicate.com/openai/o1-mini", |
|
|
"https://replicate.com/openai/gpt-4o", |
|
|
"https://replicate.com/openai/gpt-4o-mini", |
|
|
"https://replicate.com/openai/gpt-4.1", |
|
|
"https://replicate.com/openai/gpt-4.1-nano", |
|
|
"https://replicate.com/kwaivgi/kling-lip-sync", |
|
|
"https://replicate.com/openai/gpt-4.1-mini", |
|
|
"https://replicate.com/kwaivgi/kling-v2.0", |
|
|
"https://replicate.com/kwaivgi/kling-v1.5-pro", |
|
|
"https://replicate.com/kwaivgi/kling-v1.5-standard", |
|
|
"https://replicate.com/pixverse/pixverse-v3.5", |
|
|
"https://replicate.com/openai/dall-e-2", |
|
|
"https://replicate.com/openai/dall-e-3", |
|
|
"https://replicate.com/fofr/color-matcher", |
|
|
"https://replicate.com/minimax/speech-02-turbo", |
|
|
"https://replicate.com/minimax/speech-02-hd", |
|
|
"https://replicate.com/minimax/voice-cloning", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v3-balanced", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v3-turbo", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v3-quality", |
|
|
"https://replicate.com/easel/ai-avatars", |
|
|
"https://replicate.com/black-forest-labs/flux-1.1-pro-ultra-finetuned", |
|
|
"https://replicate.com/black-forest-labs/flux-pro-trainer", |
|
|
"https://replicate.com/openai/gpt-image-1", |
|
|
"https://replicate.com/minimax/image-01", |
|
|
"https://replicate.com/topazlabs/image-upscale", |
|
|
"https://replicate.com/topazlabs/video-upscale", |
|
|
"https://replicate.com/ibm-granite/granite-3.3-8b-instruct", |
|
|
"https://replicate.com/meta/llama-4-maverick-instruct", |
|
|
"https://replicate.com/meta/llama-4-scout-instruct", |
|
|
"https://replicate.com/black-forest-labs/flux-schnell-lora", |
|
|
"https://replicate.com/black-forest-labs/flux-fill-dev", |
|
|
"https://replicate.com/black-forest-labs/flux-1.1-pro-ultra", |
|
|
"https://replicate.com/black-forest-labs/flux-1.1-pro", |
|
|
"https://replicate.com/black-forest-labs/flux-pro", |
|
|
"https://replicate.com/black-forest-labs/flux-fill-pro", |
|
|
"https://replicate.com/black-forest-labs/flux-canny-pro", |
|
|
"https://replicate.com/black-forest-labs/flux-depth-pro", |
|
|
"https://replicate.com/wavespeedai/wan-2.1-t2v-480p", |
|
|
"https://replicate.com/wavespeedai/wan-2.1-t2v-720p", |
|
|
"https://replicate.com/wavespeedai/wan-2.1-i2v-480p", |
|
|
"https://replicate.com/wavespeedai/wan-2.1-i2v-720p", |
|
|
"https://replicate.com/deepseek-ai/deepseek-v3", |
|
|
"https://replicate.com/recraft-ai/recraft-v3", |
|
|
"https://replicate.com/recraft-ai/recraft-v3-svg", |
|
|
"https://replicate.com/recraft-ai/recraft-20b-svg", |
|
|
"https://replicate.com/recraft-ai/recraft-20b", |
|
|
"https://replicate.com/black-forest-labs/flux-redux-schnell", |
|
|
"https://replicate.com/black-forest-labs/flux-redux-dev", |
|
|
"https://replicate.com/black-forest-labs/flux-schnell", |
|
|
"https://replicate.com/black-forest-labs/flux-depth-dev", |
|
|
"https://replicate.com/black-forest-labs/flux-canny-dev", |
|
|
"https://replicate.com/black-forest-labs/flux-dev", |
|
|
"https://replicate.com/easel/advanced-face-swap", |
|
|
"https://replicate.com/ibm-granite/granite-3.2-8b-instruct", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v2a-turbo", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v2a", |
|
|
"https://replicate.com/anthropic/claude-3.7-sonnet", |
|
|
"https://replicate.com/minimax/video-01-director", |
|
|
"https://replicate.com/anthropic/claude-3.5-haiku", |
|
|
"https://replicate.com/anthropic/claude-3.5-sonnet", |
|
|
"https://replicate.com/google/upscaler", |
|
|
"https://replicate.com/deepseek-ai/deepseek-r1", |
|
|
"https://replicate.com/minimax/video-01", |
|
|
"https://replicate.com/recraft-ai/recraft-creative-upscale", |
|
|
"https://replicate.com/recraft-ai/recraft-crisp-upscale", |
|
|
"https://replicate.com/playht/play-dialog", |
|
|
"https://replicate.com/ibm-granite/granite-3.1-8b-instruct", |
|
|
"https://replicate.com/ibm-granite/granite-3.1-2b-instruct", |
|
|
"https://replicate.com/minimax/music-01", |
|
|
"https://replicate.com/minimax/video-01-live", |
|
|
"https://replicate.com/luma/photon-flash", |
|
|
"https://replicate.com/luma/photon", |
|
|
"https://replicate.com/haiper-ai/haiper-video-2", |
|
|
"https://replicate.com/stability-ai/stable-diffusion-3.5-medium", |
|
|
"https://replicate.com/stability-ai/stable-diffusion-3.5-large-turbo", |
|
|
"https://replicate.com/stability-ai/stable-diffusion-3.5-large", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v2-turbo", |
|
|
"https://replicate.com/ideogram-ai/ideogram-v2", |
|
|
"https://replicate.com/ibm-granite/granite-3.0-8b-instruct", |
|
|
"https://replicate.com/ibm-granite/granite-3.0-2b-instruct", |
|
|
"https://replicate.com/ibm-granite/granite-8b-code-instruct-128k", |
|
|
"https://replicate.com/ibm-granite/granite-20b-code-instruct-8k", |
|
|
"https://replicate.com/meta/meta-llama-3.1-405b-instruct", |
|
|
"https://replicate.com/stability-ai/stable-diffusion-3", |
|
|
"https://replicate.com/meta/meta-llama-3-70b", |
|
|
"https://replicate.com/meta/meta-llama-3-70b-instruct", |
|
|
"https://replicate.com/meta/meta-llama-3-8b-instruct" |
|
|
]; |
|
|
|
|
|
|
|
|
function showCategory(category) { |
|
|
currentCategory = category; |
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
}); |
|
|
event.target.classList.add('active'); |
|
|
|
|
|
document.querySelectorAll('.content-section').forEach(section => { |
|
|
section.classList.remove('active'); |
|
|
}); |
|
|
document.getElementById(category).classList.add('active'); |
|
|
|
|
|
if (category === 'hf-models') { |
|
|
loadHFModels(); |
|
|
} else if (category === 'hf-spaces') { |
|
|
loadHFSpaces(); |
|
|
} else if (category === 'replicate') { |
|
|
loadReplicate(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function loadHFModels() { |
|
|
const container = document.getElementById('hf-models-content'); |
|
|
container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading trending models...</p></div>'; |
|
|
|
|
|
try { |
|
|
const response = await fetch('https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=100'); |
|
|
const data = await response.json(); |
|
|
displayHFModels(data, container); |
|
|
} catch (error) { |
|
|
tryProxyRequest('models', container); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function loadHFSpaces() { |
|
|
const container = document.getElementById('hf-spaces-content'); |
|
|
container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading trending spaces...</p></div>'; |
|
|
|
|
|
try { |
|
|
const response = await fetch('https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=100'); |
|
|
const data = await response.json(); |
|
|
displayHFSpaces(data, container); |
|
|
} catch (error) { |
|
|
tryProxyRequest('spaces', container); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadReplicate() { |
|
|
const container = document.getElementById('replicate-content'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
|
|
|
const models = replicateUrls.map((url, index) => { |
|
|
const parts = url.split('/'); |
|
|
const author = parts[parts.length - 2]; |
|
|
const modelName = parts[parts.length - 1]; |
|
|
|
|
|
return { |
|
|
rank: index + 1, |
|
|
title: modelName, |
|
|
author: author, |
|
|
url: url, |
|
|
icon: getModelIcon(modelName), |
|
|
badge: 'โ
Official' |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
models.forEach(model => { |
|
|
const card = createModelCard(model); |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function tryProxyRequest(type, container) { |
|
|
try { |
|
|
const proxyUrl = 'https://api.allorigins.win/raw?url='; |
|
|
const targetUrl = type === 'models' |
|
|
? 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=100' |
|
|
: 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=100'; |
|
|
|
|
|
const response = await fetch(proxyUrl + encodeURIComponent(targetUrl)); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (type === 'models') { |
|
|
displayHFModels(data, container); |
|
|
} else { |
|
|
displayHFSpaces(data, container); |
|
|
} |
|
|
} catch (error) { |
|
|
if (type === 'models') { |
|
|
displaySampleHFModels(container); |
|
|
} else { |
|
|
displaySampleHFSpaces(container); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function displayHFModels(models, container) { |
|
|
container.innerHTML = ''; |
|
|
models.forEach((model, index) => { |
|
|
const card = createModelCard({ |
|
|
rank: index + 1, |
|
|
title: model.id?.split('/')[1] || model.modelId || 'Unknown', |
|
|
author: model.id?.split('/')[0] || model.author || 'Unknown', |
|
|
likes: model.likes || 0, |
|
|
downloads: model.downloads || 0, |
|
|
tags: model.tags || [], |
|
|
pipeline_tag: model.pipeline_tag || '', |
|
|
url: `https://huggingface.co/${model.id || model.modelId}`, |
|
|
icon: '๐ค' |
|
|
}); |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function displayHFSpaces(spaces, container) { |
|
|
container.innerHTML = ''; |
|
|
spaces.forEach((space, index) => { |
|
|
const card = createModelCard({ |
|
|
rank: index + 1, |
|
|
title: space.id?.split('/')[1] || 'Unknown', |
|
|
author: space.id?.split('/')[0] || 'Unknown', |
|
|
likes: space.likes || 0, |
|
|
sdk: space.sdk || 'Unknown', |
|
|
emoji: space.emoji || '๐ฏ', |
|
|
url: `https://huggingface.co/spaces/${space.id}`, |
|
|
icon: space.emoji || '๐ฏ', |
|
|
hardware: space.hardware || 'CPU' |
|
|
}); |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function createModelCard(data) { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'item-card'; |
|
|
card.onclick = () => window.open(data.url, '_blank'); |
|
|
|
|
|
let rankColor = '#999'; |
|
|
if (data.rank === 1) rankColor = '#FFD700'; |
|
|
else if (data.rank === 2) rankColor = '#C0C0C0'; |
|
|
else if (data.rank === 3) rankColor = '#CD7F32'; |
|
|
else if (data.rank <= 10) rankColor = '#667eea'; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="rank-badge" style="background: ${rankColor};"> |
|
|
${data.rank} |
|
|
</div> |
|
|
${data.badge ? `<div class="badge-label">${data.badge}</div>` : ''} |
|
|
<div class="item-header"> |
|
|
<div class="item-icon">${data.icon}</div> |
|
|
<div class="item-info"> |
|
|
<div class="item-title">${data.title}</div> |
|
|
<div class="item-author">@${data.author}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="item-stats"> |
|
|
${data.likes !== undefined ? `<div class="stat">โค๏ธ ${formatNumber(data.likes)}</div>` : ''} |
|
|
${data.downloads !== undefined ? `<div class="stat">โฌ๏ธ ${formatNumber(data.downloads)}</div>` : ''} |
|
|
${data.sdk ? `<div class="stat">๐ ๏ธ ${data.sdk}</div>` : ''} |
|
|
${data.hardware ? `<div class="stat">๐ป ${data.hardware}</div>` : ''} |
|
|
${data.pipeline_tag ? `<div class="stat">๐ท๏ธ ${data.pipeline_tag}</div>` : ''} |
|
|
${data.runs !== undefined ? `<div class="stat">โถ๏ธ ${formatNumber(data.runs)} runs</div>` : ''} |
|
|
</div> |
|
|
${data.tags && data.tags.length > 0 ? ` |
|
|
<div class="tags-container"> |
|
|
${data.tags.slice(0, 3).map(tag => `<span class="tag">${tag}</span>`).join('')} |
|
|
</div> |
|
|
` : ''} |
|
|
`; |
|
|
|
|
|
return card; |
|
|
} |
|
|
|
|
|
|
|
|
function formatNumber(num) { |
|
|
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'; |
|
|
if (num >= 1000) return (num / 1000).toFixed(1) + 'K'; |
|
|
return num.toString(); |
|
|
} |
|
|
|
|
|
|
|
|
function getModelIcon(name) { |
|
|
if (!name) return '๐ค'; |
|
|
const lowerName = name.toLowerCase(); |
|
|
if (lowerName.includes('imagen') || lowerName.includes('dall-e') || lowerName.includes('stable-diffusion') || lowerName.includes('flux') || lowerName.includes('ideogram') || lowerName.includes('recraft')) return '๐จ'; |
|
|
if (lowerName.includes('video') || lowerName.includes('veo') || lowerName.includes('ray') || lowerName.includes('kling') || lowerName.includes('pixverse') || lowerName.includes('wan') || lowerName.includes('haiper')) return '๐ฌ'; |
|
|
if (lowerName.includes('audio') || lowerName.includes('music') || lowerName.includes('speech') || lowerName.includes('voice') || lowerName.includes('lyria') || lowerName.includes('play-dialog')) return '๐ต'; |
|
|
if (lowerName.includes('llama') || lowerName.includes('gpt') || lowerName.includes('claude') || lowerName.includes('granite') || lowerName.includes('mistral') || lowerName.includes('deepseek')) return '๐ฌ'; |
|
|
if (lowerName.includes('upscale') || lowerName.includes('upscaler')) return '๐'; |
|
|
if (lowerName.includes('swap') || lowerName.includes('avatar') || lowerName.includes('face')) return '๐ค'; |
|
|
if (lowerName.includes('svg')) return '๐ฏ'; |
|
|
if (lowerName.includes('color') || lowerName.includes('photon')) return '๐จ'; |
|
|
return '๐ค'; |
|
|
} |
|
|
|
|
|
|
|
|
function displaySampleHFModels(container) { |
|
|
const sampleData = [ |
|
|
{ rank: 1, title: 'Llama-3.3-70B-Instruct', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: '๐ค', pipeline_tag: 'text-generation', tags: ['llama', '70b', 'instruct'] }, |
|
|
{ rank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: '๐ค', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'] }, |
|
|
{ rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '๐ค', pipeline_tag: 'text-generation', tags: ['qwen', 'large'] }, |
|
|
{ rank: 4, title: 'FLUX.1-dev', author: 'black-forest-labs', likes: 29100, downloads: 397000, icon: '๐ค', pipeline_tag: 'text-to-image', tags: ['flux', 'diffusion'] }, |
|
|
{ rank: 5, title: 'Phi-4', author: 'microsoft', likes: 8900, downloads: 156000, icon: '๐ค', pipeline_tag: 'text-generation', tags: ['phi', 'small'] }, |
|
|
{ rank: 6, title: 'stable-diffusion-3.5-large', author: 'stabilityai', likes: 7650, downloads: 234000, icon: '๐ค', pipeline_tag: 'text-to-image', tags: ['sd3', 'large'] }, |
|
|
{ rank: 7, title: 'whisper-large-v3-turbo', author: 'openai', likes: 6780, downloads: 189000, icon: '๐ค', pipeline_tag: 'automatic-speech-recognition', tags: ['whisper', 'asr'] }, |
|
|
{ rank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: '๐ค', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'] }, |
|
|
{ rank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: '๐ค', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'] }, |
|
|
{ rank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: '๐ค', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'] } |
|
|
]; |
|
|
|
|
|
container.innerHTML = ''; |
|
|
sampleData.forEach(model => { |
|
|
model.url = `https://huggingface.co/${model.author}/${model.title}`; |
|
|
container.appendChild(createModelCard(model)); |
|
|
}); |
|
|
} |
|
|
|
|
|
function displaySampleHFSpaces(container) { |
|
|
const sampleData = [ |
|
|
{ rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '๐จ', hardware: 'T4 GPU' }, |
|
|
{ rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '๐ฌ', hardware: 'CPU' }, |
|
|
{ rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: '๐ค', hardware: 'A10G' }, |
|
|
{ rank: 4, title: 'voice-clone-xtts', author: 'coqui', likes: 5640, sdk: 'Gradio', icon: '๐ค', hardware: 'T4 GPU' }, |
|
|
{ rank: 5, title: 'code-llama-playground', author: 'meta', likes: 3210, sdk: 'Gradio', icon: '๐ป', hardware: 'A100' }, |
|
|
{ rank: 6, title: 'image-to-3d-model', author: '3d-ai', likes: 2890, sdk: 'Gradio', icon: '๐ฒ', hardware: 'A10G' }, |
|
|
{ rank: 7, title: 'music-visualizer', author: 'audio-viz', likes: 2340, sdk: 'Streamlit', icon: '๐ต', hardware: 'CPU' }, |
|
|
{ rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: '๐', hardware: 'T4 GPU' }, |
|
|
{ rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '๐', hardware: 'T4 GPU' }, |
|
|
{ rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: '๐', hardware: 'CPU' } |
|
|
]; |
|
|
|
|
|
container.innerHTML = ''; |
|
|
sampleData.forEach(space => { |
|
|
space.url = `https://huggingface.co/spaces/${space.author}/${space.title}`; |
|
|
container.appendChild(createModelCard(space)); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function refreshCurrent() { |
|
|
if (currentCategory === 'hf-models') { |
|
|
loadHFModels(); |
|
|
} else if (currentCategory === 'hf-spaces') { |
|
|
loadHFSpaces(); |
|
|
} else { |
|
|
loadReplicate(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', () => { |
|
|
loadHFModels(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
