Hugging Face's logo

Spaces:
openfree
/
AI
Running

App Files Community
openfree commited on
Commit
884b12b
Β·
verified Β·
1 Parent(s): e7dbc33

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +85 -106
index.html CHANGED
@@ -103,6 +103,7 @@
103
  background: white;
104
  border-radius: 12px;
105
  padding: 20px;
 
106
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
107
  transition: all 0.3s ease;
108
  cursor: pointer;
@@ -251,7 +252,7 @@
251
  </head>
252
  <body>
253
  <div class="container">
254
- <h1>πŸš€ AI λͺ¨λΈ & 슀페이슀 μ‹€μ‹œκ°„ νŠΈλ Œλ”©</h1>
255
 
256
  <div class="category-tabs">
257
  <button class="tab-button active" onclick="showCategory('hf-models')">
@@ -267,9 +268,8 @@
267
 
268
  <!-- HuggingFace Models Section -->
269
  <div id="hf-models" class="content-section active">
270
- <div class="filter-buttons">
271
- <button class="filter-btn active" onclick="loadHFModels('trending')">πŸ“ˆ νŠΈλ Œλ”©</button>
272
- <button class="filter-btn" onclick="loadHFModels('new')">πŸ†• μ‹ κ·œ</button>
273
  </div>
274
  <div id="hf-models-content" class="items-grid">
275
  <div class="loading">
@@ -281,9 +281,8 @@
281
 
282
  <!-- HuggingFace Spaces Section -->
283
  <div id="hf-spaces" class="content-section">
284
- <div class="filter-buttons">
285
- <button class="filter-btn active" onclick="loadHFSpaces('trending')">πŸ“ˆ νŠΈλ Œλ”©</button>
286
- <button class="filter-btn" onclick="loadHFSpaces('new')">πŸ†• μ‹ κ·œ</button>
287
  </div>
288
  <div id="hf-spaces-content" class="items-grid">
289
  <div class="loading">
@@ -296,7 +295,8 @@
296
  <!-- Replicate Section -->
297
  <div id="replicate" class="content-section">
298
  <div class="filter-buttons">
299
- <button class="filter-btn active" onclick="loadReplicate()">πŸ”₯ 인기 λͺ¨λΈ</button>
 
300
  </div>
301
  <div id="replicate-content" class="items-grid">
302
  <div class="loading">
@@ -308,9 +308,9 @@
308
 
309
  <div class="note">
310
  ⚠️ <strong>API μ‚¬μš© μ•ˆλ‚΄:</strong><br>
311
- β€’ HuggingFace API: https://huggingface.co/api/models?sort=likes7d (νŠΈλ Œλ”©), ?sort=created_at (μ‹ κ·œ)<br>
312
  β€’ CORS μ—λŸ¬ λ°œμƒ μ‹œ ν”„λ‘μ‹œ μ„œλ²„ μ‚¬μš©μ„ ꢌμž₯ν•©λ‹ˆλ‹€<br>
313
- β€’ μ‹€μ œ μ„œλΉ„μŠ€μ—μ„œλŠ” λ°±μ—”λ“œ μ„œλ²„λ₯Ό 톡해 APIλ₯Ό ν˜ΈμΆœν•˜λŠ” 것이 μ•ˆμ •μ μž…λ‹ˆλ‹€
314
  </div>
315
 
316
  <!-- API URLs Info -->
@@ -318,9 +318,10 @@
318
  <h3 style="margin-bottom: 15px; color: #333;">πŸ“Œ API Endpoints</h3>
319
  <div style="display: grid; gap: 10px; font-size: 0.9rem;">
320
  <div><strong>HF Models (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30</code></div>
321
- <div><strong>HF Models (New):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30</code></div>
322
- <div><strong>HF Spaces (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30</code></div>
323
- <div><strong>HF Spaces (New):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30</code></div>
 
324
  </div>
325
  </div>
326
  </div>
@@ -329,7 +330,6 @@
329
 
330
  <script>
331
  let currentCategory = 'hf-models';
332
- let currentFilter = 'trending';
333
 
334
  // μΉ΄ν…Œκ³ λ¦¬ μ „ν™˜
335
  function showCategory(category) {
@@ -349,37 +349,22 @@
349
 
350
  // 데이터 λ‘œλ“œ
351
  if (category === 'hf-models') {
352
- loadHFModels('trending');
353
  } else if (category === 'hf-spaces') {
354
- loadHFSpaces('trending');
355
  } else if (category === 'replicate') {
356
- loadReplicate();
357
  }
358
  }
359
 
360
  // HuggingFace Models λ‘œλ“œ
361
- async function loadHFModels(filter) {
362
- currentFilter = filter;
363
-
364
- // ν•„ν„° λ²„νŠΌ ν™œμ„±ν™”
365
- document.querySelectorAll('#hf-models .filter-btn').forEach(btn => {
366
- btn.classList.remove('active');
367
- });
368
- event.target.classList.add('active');
369
-
370
  const container = document.getElementById('hf-models-content');
371
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>λͺ¨λΈ λ‘œλ”© 쀑...</p></div>';
372
 
373
  try {
374
- // HuggingFace API μ‚¬μš© - trending은 sort νŒŒλΌλ―Έν„°λ‘œ 처리
375
- let apiUrl;
376
- if (filter === 'trending') {
377
- // trending은 likes7d (7일간 μ’‹μ•„μš”) λ˜λŠ” likes둜 μ •λ ¬
378
- apiUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';
379
- } else {
380
- // μ‹ κ·œλŠ” created_at으둜 μ •λ ¬
381
- apiUrl = 'https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30';
382
- }
383
 
384
  console.log(`πŸ“‘ API 호좜 쀑: ${apiUrl}`);
385
  const response = await fetch(apiUrl, {
@@ -398,33 +383,18 @@
398
  console.error('❌ API μ—λŸ¬:', error);
399
  console.log('πŸ”„ ν”„λ‘μ‹œ μ„œλ²„λ₯Ό ν†΅ν•œ μš”μ²­μ„ μ‹œλ„ν•©λ‹ˆλ‹€...');
400
  // CORS μ—λŸ¬ μ‹œ ν”„λ‘μ‹œ μ‚¬μš© μ‹œλ„
401
- tryProxyRequest('models', filter, container);
402
  }
403
  }
404
 
405
  // HuggingFace Spaces λ‘œλ“œ
406
- async function loadHFSpaces(filter) {
407
- currentFilter = filter;
408
-
409
- // ν•„ν„° λ²„νŠΌ ν™œμ„±ν™”
410
- document.querySelectorAll('#hf-spaces .filter-btn').forEach(btn => {
411
- btn.classList.remove('active');
412
- });
413
- event.target.classList.add('active');
414
-
415
  const container = document.getElementById('hf-spaces-content');
416
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>슀페이슀 λ‘œλ”© 쀑...</p></div>';
417
 
418
  try {
419
- // HuggingFace API μ‚¬μš©
420
- let apiUrl;
421
- if (filter === 'trending') {
422
- // trending은 likes둜 μ •λ ¬
423
- apiUrl = 'https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30';
424
- } else {
425
- // μ‹ κ·œλŠ” created_at으둜 μ •λ ¬
426
- apiUrl = 'https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30';
427
- }
428
 
429
  console.log(`πŸ“‘ API 호좜 쀑: ${apiUrl}`);
430
  const response = await fetch(apiUrl, {
@@ -443,12 +413,12 @@
443
  console.error('❌ API μ—λŸ¬:', error);
444
  console.log('πŸ”„ ν”„λ‘μ‹œ μ„œλ²„λ₯Ό ν†΅ν•œ μš”μ²­μ„ μ‹œλ„ν•©λ‹ˆλ‹€...');
445
  // CORS μ—λŸ¬ μ‹œ ν”„λ‘μ‹œ μ‚¬μš© μ‹œλ„
446
- tryProxyRequest('spaces', filter, container);
447
  }
448
  }
449
 
450
  // ν”„λ‘μ‹œλ₯Ό ν†΅ν•œ μš”μ²­ μ‹œλ„
451
- async function tryProxyRequest(type, filter, container) {
452
  try {
453
  console.log('πŸ”„ ν”„λ‘μ‹œλ₯Ό ν†΅ν•œ μš”μ²­ μ‹œλ„ 쀑...');
454
  // 곡개 CORS ν”„λ‘μ‹œ μ‚¬μš© (예: cors-anywhere)
@@ -456,13 +426,9 @@
456
  let targetUrl;
457
 
458
  if (type === 'models') {
459
- targetUrl = filter === 'trending'
460
- ? 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30'
461
- : 'https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30';
462
  } else {
463
- targetUrl = filter === 'trending'
464
- ? 'https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30'
465
- : 'https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30';
466
  }
467
 
468
  console.log(`πŸ“‘ ν”„λ‘μ‹œ URL: ${proxyUrl + encodeURIComponent(targetUrl)}`);
@@ -480,22 +446,34 @@
480
  console.log('πŸ“Œ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.');
481
  // λͺ¨λ“  μ‹œλ„ μ‹€νŒ¨ μ‹œ μƒ˜ν”Œ 데이터 ν‘œμ‹œ
482
  if (type === 'models') {
483
- displaySampleHFModels(filter, container);
484
  } else {
485
- displaySampleHFSpaces(filter, container);
486
  }
487
  }
488
  }
489
 
490
  // Replicate λͺ¨λΈ λ‘œλ“œ
491
- async function loadReplicate() {
492
- console.log('πŸš€ Replicate λͺ¨λΈ λ‘œλ“œ μ‹œμž‘');
 
 
 
 
 
 
 
 
 
 
 
 
493
  const container = document.getElementById('replicate-content');
494
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>λͺ¨λΈ λ‘œλ”© 쀑...</p></div>';
495
 
496
  // ReplicateλŠ” 곡개 APIκ°€ μ œν•œμ μ΄λ―€λ‘œ μƒ˜ν”Œ 데이터 ν‘œμ‹œ
497
- console.log('ℹ️ ReplicateλŠ” 곡개 APIκ°€ μ œν•œμ μ΄λ―€λ‘œ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.');
498
- displaySampleReplicateModels(container);
499
  }
500
 
501
  // HuggingFace Models ν‘œμ‹œ
@@ -555,6 +533,7 @@
555
  <div class="rank-badge" style="position: absolute; top: 10px; right: 10px; background: ${rankColor}; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;">
556
  ${data.rank}
557
  </div>
 
558
  <div class="item-header">
559
  <div class="item-icon">${data.icon}</div>
560
  <div class="item-info">
@@ -588,9 +567,9 @@
588
  }
589
 
590
  // μƒ˜ν”Œ 데이터 ν‘œμ‹œ ν•¨μˆ˜λ“€
591
- function displaySampleHFModels(filter, container) {
592
- console.log(`πŸ“Œ ${filter === 'trending' ? 'νŠΈλ Œλ”©' : 'μ‹ κ·œ'} λͺ¨λΈ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
593
- const sampleData = filter === 'trending' ? [
594
  { rank: 1, title: 'Llama-3.3-70B-Instruct', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['llama', '70b', 'instruct'] },
595
  { rank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'] },
596
  { rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['qwen', 'large'] },
@@ -601,12 +580,6 @@
601
  { rank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: 'πŸ€–', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'] },
602
  { rank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: 'πŸ€–', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'] },
603
  { rank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'] }
604
- ] : [
605
- { rank: 1, title: 'OmniGen2', author: 'BAAI', likes: 156, downloads: 890, icon: 'πŸ€–', pipeline_tag: 'image-generation', tags: ['new', 'omnigen'] },
606
- { rank: 2, title: 'VideoGen-Pro-2B', author: 'ai-lab', likes: 89, downloads: 234, icon: 'πŸ€–', pipeline_tag: 'text-to-video', tags: ['video', 'new'] },
607
- { rank: 3, title: 'CodeLLM-7B-Python', author: 'code-ai', likes: 234, downloads: 1200, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['code', 'python'] },
608
- { rank: 4, title: 'MusicGen-Remix', author: 'audio-ml', likes: 67, downloads: 456, icon: 'πŸ€–', pipeline_tag: 'audio-to-audio', tags: ['music', 'remix'] },
609
- { rank: 5, title: 'ImageEdit-XL-v2', author: 'vision-lab', likes: 145, downloads: 789, icon: 'πŸ€–', pipeline_tag: 'image-to-image', tags: ['editing', 'xl'] }
610
  ];
611
 
612
  container.innerHTML = '';
@@ -616,9 +589,9 @@
616
  });
617
  }
618
 
619
- function displaySampleHFSpaces(filter, container) {
620
- console.log(`πŸ“Œ ${filter === 'trending' ? 'νŠΈλ Œλ”©' : 'μ‹ κ·œ'} 슀페이슀 μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
621
- const sampleData = filter === 'trending' ? [
622
  { rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨', hardware: 'T4 GPU' },
623
  { rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: 'πŸ’¬', hardware: 'CPU' },
624
  { rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: 'πŸ‘€', hardware: 'A10G' },
@@ -629,12 +602,6 @@
629
  { rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: 'πŸ“„', hardware: 'T4 GPU' },
630
  { rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌', hardware: 'T4 GPU' },
631
  { rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: 'πŸ“Š', hardware: 'CPU' }
632
- ] : [
633
- { rank: 1, title: 'llm-arena', author: 'benchmark', likes: 23, sdk: 'Gradio', icon: 'πŸ†', hardware: 'A100' },
634
- { rank: 2, title: 'video-editor-ai', author: 'creator-tools', likes: 45, sdk: 'Streamlit', icon: '🎬', hardware: 'T4 GPU' },
635
- { rank: 3, title: 'data-viz-dashboard', author: 'analytics', likes: 67, sdk: 'Streamlit', icon: 'πŸ“ˆ', hardware: 'CPU' },
636
- { rank: 4, title: 'music-mixer-ai', author: 'dj-ai', likes: 34, sdk: 'Gradio', icon: '🎧', hardware: 'CPU' },
637
- { rank: 5, title: 'text-analyzer-pro', author: 'nlp-tools', likes: 56, sdk: 'Gradio', icon: 'πŸ“', hardware: 'CPU' }
638
  ];
639
 
640
  container.innerHTML = '';
@@ -644,21 +611,33 @@
644
  });
645
  }
646
 
647
- function displaySampleReplicateModels(container) {
648
- console.log('πŸ“Œ Replicate 인기 λͺ¨λΈ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.');
649
- const sampleData = [
650
- { rank: 1, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨' },
651
- { rank: 2, title: 'stable-diffusion-3', author: 'stability-ai', runs: 1750000, icon: 'πŸ–ΌοΈ' },
652
- { rank: 3, title: 'whisper-large-v3', author: 'openai', runs: 890000, icon: '🎀' },
653
- { rank: 4, title: 'llama-3.3-70b', author: 'meta', runs: 670000, icon: 'πŸ€–' },
654
- { rank: 5, title: 'musicgen-melody', author: 'facebook', runs: 450000, icon: '🎡' },
655
- { rank: 6, title: 'animate-diff', author: 'lucataco', runs: 320000, icon: '🎬' },
656
- { rank: 7, title: 'real-esrgan', author: 'xinntao', runs: 280000, icon: 'πŸ”' },
657
- { rank: 8, title: 'rembg', author: 'cjwbw', runs: 210000, icon: 'βœ‚οΈ' },
658
- { rank: 9, title: 'gfpgan', author: 'tencentarc', runs: 178000, icon: 'πŸ‘€' },
659
- { rank: 10, title: 'codeformer', author: 'sczhou', runs: 156000, icon: '✨' }
 
 
 
 
 
 
 
 
 
 
660
  ];
661
 
 
 
662
  container.innerHTML = '';
663
  sampleData.forEach(model => {
664
  model.url = `https://replicate.com/${model.author}/${model.title}`;
@@ -669,11 +648,13 @@
669
  // μƒˆλ‘œκ³ μΉ¨
670
  function refreshCurrent() {
671
  if (currentCategory === 'hf-models') {
672
- loadHFModels(currentFilter);
673
  } else if (currentCategory === 'hf-spaces') {
674
- loadHFSpaces(currentFilter);
675
  } else {
676
- loadReplicate();
 
 
677
  }
678
  }
679
 
@@ -682,11 +663,9 @@
682
  console.log('πŸš€ HuggingFace & Replicate νŠΈλ Œλ”© 리슀트 λ‘œλ“œ μ‹œμž‘');
683
  console.log('πŸ“Œ API Endpoints:');
684
  console.log('- HF Models (Trending): https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30');
685
- console.log('- HF Models (New): https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30');
686
- console.log('- HF Spaces (Trending): https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30');
687
- console.log('- HF Spaces (New): https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30');
688
 
689
- loadHFModels('trending');
690
  });
691
  </script>
692
  </body>
 
103
  background: white;
104
  border-radius: 12px;
105
  padding: 20px;
106
+ padding-top: 30px;
107
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
108
  transition: all 0.3s ease;
109
  cursor: pointer;
 
252
  </head>
253
  <body>
254
  <div class="container">
255
+ <h1>πŸš€ AI λͺ¨λΈ νŠΈλ Œλ”© 리슀트</h1>
256
 
257
  <div class="category-tabs">
258
  <button class="tab-button active" onclick="showCategory('hf-models')">
 
268
 
269
  <!-- HuggingFace Models Section -->
270
  <div id="hf-models" class="content-section active">
271
+ <div style="text-align: center; margin-bottom: 20px;">
272
+ <h2 style="color: #667eea;">πŸ“ˆ Trending Models</h2>
 
273
  </div>
274
  <div id="hf-models-content" class="items-grid">
275
  <div class="loading">
 
281
 
282
  <!-- HuggingFace Spaces Section -->
283
  <div id="hf-spaces" class="content-section">
284
+ <div style="text-align: center; margin-bottom: 20px;">
285
+ <h2 style="color: #667eea;">πŸ“ˆ Trending Spaces</h2>
 
286
  </div>
287
  <div id="hf-spaces-content" class="items-grid">
288
  <div class="loading">
 
295
  <!-- Replicate Section -->
296
  <div id="replicate" class="content-section">
297
  <div class="filter-buttons">
298
+ <button class="filter-btn active" onclick="loadReplicate('featured')">⭐ Featured Models</button>
299
+ <button class="filter-btn" onclick="loadReplicate('official')">βœ… Official Models</button>
300
  </div>
301
  <div id="replicate-content" class="items-grid">
302
  <div class="loading">
 
308
 
309
  <div class="note">
310
  ⚠️ <strong>API μ‚¬μš© μ•ˆλ‚΄:</strong><br>
311
+ β€’ HuggingFace APIλŠ” `likes7d`둜 7일간 νŠΈλ Œλ”©μ„ μ •ν™•νžˆ μΆ”μΆœν•©λ‹ˆλ‹€<br>
312
  β€’ CORS μ—λŸ¬ λ°œμƒ μ‹œ ν”„λ‘μ‹œ μ„œλ²„ μ‚¬μš©μ„ ꢌμž₯ν•©λ‹ˆλ‹€<br>
313
+ β€’ Replicate의 Featured/Official λͺ¨λΈμ€ 곡식 μ›Ήμ‚¬μ΄νŠΈμ—μ„œ 확인 κ°€λŠ₯ν•©λ‹ˆλ‹€
314
  </div>
315
 
316
  <!-- API URLs Info -->
 
318
  <h3 style="margin-bottom: 15px; color: #333;">πŸ“Œ API Endpoints</h3>
319
  <div style="display: grid; gap: 10px; font-size: 0.9rem;">
320
  <div><strong>HF Models (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30</code></div>
321
+ <div><strong>HF Spaces (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30</code></div>
322
+ <div style="margin-top: 10px; color: #666;">
323
+ <strong>Note:</strong> Replicate Featured/Official λͺ¨λΈμ€ μ›Ή νŽ˜μ΄μ§€ μŠ€ν¬λž˜ν•‘μ΄λ‚˜ 인증된 API μ•‘μ„ΈμŠ€κ°€ ν•„μš”ν•©λ‹ˆλ‹€.
324
+ </div>
325
  </div>
326
  </div>
327
  </div>
 
330
 
331
  <script>
332
  let currentCategory = 'hf-models';
 
333
 
334
  // μΉ΄ν…Œκ³ λ¦¬ μ „ν™˜
335
  function showCategory(category) {
 
349
 
350
  // 데이터 λ‘œλ“œ
351
  if (category === 'hf-models') {
352
+ loadHFModels();
353
  } else if (category === 'hf-spaces') {
354
+ loadHFSpaces();
355
  } else if (category === 'replicate') {
356
+ loadReplicate('featured');
357
  }
358
  }
359
 
360
  // HuggingFace Models λ‘œλ“œ
361
+ async function loadHFModels() {
 
 
 
 
 
 
 
 
362
  const container = document.getElementById('hf-models-content');
363
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>λͺ¨λΈ λ‘œλ”© 쀑...</p></div>';
364
 
365
  try {
366
+ // HuggingFace API μ‚¬μš© - trending (7일간 μ’‹μ•„μš” κΈ°μ€€)
367
+ const apiUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';
 
 
 
 
 
 
 
368
 
369
  console.log(`πŸ“‘ API 호좜 쀑: ${apiUrl}`);
370
  const response = await fetch(apiUrl, {
 
383
  console.error('❌ API μ—λŸ¬:', error);
384
  console.log('πŸ”„ ν”„λ‘μ‹œ μ„œλ²„λ₯Ό ν†΅ν•œ μš”μ²­μ„ μ‹œλ„ν•©λ‹ˆλ‹€...');
385
  // CORS μ—λŸ¬ μ‹œ ν”„λ‘μ‹œ μ‚¬μš© μ‹œλ„
386
+ tryProxyRequest('models', container);
387
  }
388
  }
389
 
390
  // HuggingFace Spaces λ‘œλ“œ
391
+ async function loadHFSpaces() {
 
 
 
 
 
 
 
 
392
  const container = document.getElementById('hf-spaces-content');
393
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>슀페이슀 λ‘œλ”© 쀑...</p></div>';
394
 
395
  try {
396
+ // HuggingFace API μ‚¬μš© - trending (7일간 μ’‹μ•„μš” κΈ°μ€€)
397
+ const apiUrl = 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30';
 
 
 
 
 
 
 
398
 
399
  console.log(`πŸ“‘ API 호좜 쀑: ${apiUrl}`);
400
  const response = await fetch(apiUrl, {
 
413
  console.error('❌ API μ—λŸ¬:', error);
414
  console.log('πŸ”„ ν”„λ‘μ‹œ μ„œλ²„λ₯Ό ν†΅ν•œ μš”μ²­μ„ μ‹œλ„ν•©λ‹ˆλ‹€...');
415
  // CORS μ—λŸ¬ μ‹œ ν”„λ‘μ‹œ μ‚¬μš© μ‹œλ„
416
+ tryProxyRequest('spaces', container);
417
  }
418
  }
419
 
420
  // ν”„λ‘μ‹œλ₯Ό ν†΅ν•œ μš”μ²­ μ‹œλ„
421
+ async function tryProxyRequest(type, container) {
422
  try {
423
  console.log('πŸ”„ ν”„λ‘μ‹œλ₯Ό ν†΅ν•œ μš”μ²­ μ‹œλ„ 쀑...');
424
  // 곡개 CORS ν”„λ‘μ‹œ μ‚¬μš© (예: cors-anywhere)
 
426
  let targetUrl;
427
 
428
  if (type === 'models') {
429
+ targetUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';
 
 
430
  } else {
431
+ targetUrl = 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30';
 
 
432
  }
433
 
434
  console.log(`πŸ“‘ ν”„λ‘μ‹œ URL: ${proxyUrl + encodeURIComponent(targetUrl)}`);
 
446
  console.log('πŸ“Œ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.');
447
  // λͺ¨λ“  μ‹œλ„ μ‹€νŒ¨ μ‹œ μƒ˜ν”Œ 데이터 ν‘œμ‹œ
448
  if (type === 'models') {
449
+ displaySampleHFModels(container);
450
  } else {
451
+ displaySampleHFSpaces(container);
452
  }
453
  }
454
  }
455
 
456
  // Replicate λͺ¨λΈ λ‘œλ“œ
457
+ async function loadReplicate(type) {
458
+ const currentType = type || 'featured';
459
+
460
+ // ν•„ν„° λ²„νŠΌ ν™œμ„±ν™”
461
+ document.querySelectorAll('#replicate .filter-btn').forEach(btn => {
462
+ btn.classList.remove('active');
463
+ });
464
+ if (event && event.target) {
465
+ event.target.classList.add('active');
466
+ } else {
467
+ document.querySelector('#replicate .filter-btn').classList.add('active');
468
+ }
469
+
470
+ console.log(`πŸš€ Replicate ${currentType} λͺ¨λΈ λ‘œλ“œ μ‹œμž‘`);
471
  const container = document.getElementById('replicate-content');
472
  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>λͺ¨λΈ λ‘œλ”© 쀑...</p></div>';
473
 
474
  // ReplicateλŠ” 곡개 APIκ°€ μ œν•œμ μ΄λ―€λ‘œ μƒ˜ν”Œ 데이터 ν‘œμ‹œ
475
+ console.log(`ℹ️ Replicate ${currentType} λͺ¨λΈ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
476
+ displaySampleReplicateModels(container, currentType);
477
  }
478
 
479
  // HuggingFace Models ν‘œμ‹œ
 
533
  <div class="rank-badge" style="position: absolute; top: 10px; right: 10px; background: ${rankColor}; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;">
534
  ${data.rank}
535
  </div>
536
+ ${data.badge ? `<div style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;">${data.badge}</div>` : ''}
537
  <div class="item-header">
538
  <div class="item-icon">${data.icon}</div>
539
  <div class="item-info">
 
567
  }
568
 
569
  // μƒ˜ν”Œ 데이터 ν‘œμ‹œ ν•¨μˆ˜λ“€
570
+ function displaySampleHFModels(container) {
571
+ console.log(`πŸ“Œ νŠΈλ Œλ”© λͺ¨λΈ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
572
+ const sampleData = [
573
  { rank: 1, title: 'Llama-3.3-70B-Instruct', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['llama', '70b', 'instruct'] },
574
  { rank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'] },
575
  { rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['qwen', 'large'] },
 
580
  { rank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: 'πŸ€–', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'] },
581
  { rank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: 'πŸ€–', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'] },
582
  { rank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: 'πŸ€–', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'] }
 
 
 
 
 
 
583
  ];
584
 
585
  container.innerHTML = '';
 
589
  });
590
  }
591
 
592
+ function displaySampleHFSpaces(container) {
593
+ console.log(`πŸ“Œ νŠΈλ Œλ”© 슀페이슀 μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
594
+ const sampleData = [
595
  { rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨', hardware: 'T4 GPU' },
596
  { rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: 'πŸ’¬', hardware: 'CPU' },
597
  { rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: 'πŸ‘€', hardware: 'A10G' },
 
602
  { rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: 'πŸ“„', hardware: 'T4 GPU' },
603
  { rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌', hardware: 'T4 GPU' },
604
  { rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: 'πŸ“Š', hardware: 'CPU' }
 
 
 
 
 
 
605
  ];
606
 
607
  container.innerHTML = '';
 
611
  });
612
  }
613
 
614
+ function displaySampleReplicateModels(container, type) {
615
+ console.log(`πŸ“Œ Replicate ${type} λͺ¨λΈ μƒ˜ν”Œ 데이터λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.`);
616
+
617
+ const featuredData = [
618
+ { rank: 1, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨', badge: '⭐ Featured' },
619
+ { rank: 2, title: 'llama-3.3-70b-versatile', author: 'meta', runs: 1850000, icon: 'πŸ€–', badge: '⭐ Featured' },
620
+ { rank: 3, title: 'stable-video-diffusion', author: 'stability-ai', runs: 890000, icon: '🎬', badge: '⭐ Featured' },
621
+ { rank: 4, title: 'whisper-large-v3-turbo', author: 'openai', runs: 670000, icon: '🎀', badge: '⭐ Featured' },
622
+ { rank: 5, title: 'musicgen-stereo-large', author: 'facebook', runs: 450000, icon: '🎡', badge: '⭐ Featured' },
623
+ { rank: 6, title: 'animate-lcm', author: 'lucataco', runs: 320000, icon: '✨', badge: '⭐ Featured' },
624
+ { rank: 7, title: 'instant-id', author: 'zsxkib', runs: 280000, icon: 'πŸ‘€', badge: '⭐ Featured' },
625
+ { rank: 8, title: 'face-restoration', author: 'tencentarc', runs: 210000, icon: '✨', badge: '⭐ Featured' }
626
+ ];
627
+
628
+ const officialData = [
629
+ { rank: 1, title: 'meta-llama-3.3-70b-instruct', author: 'meta', runs: 3450000, icon: 'πŸ€–', badge: 'βœ… Official' },
630
+ { rank: 2, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨', badge: 'βœ… Official' },
631
+ { rank: 3, title: 'stable-diffusion-3', author: 'stability-ai', runs: 1750000, icon: 'πŸ–ΌοΈ', badge: 'βœ… Official' },
632
+ { rank: 4, title: 'whisper', author: 'openai', runs: 890000, icon: '🎀', badge: 'βœ… Official' },
633
+ { rank: 5, title: 'musicgen', author: 'facebook', runs: 450000, icon: '🎡', badge: 'βœ… Official' },
634
+ { rank: 6, title: 'sdxl', author: 'stability-ai', runs: 380000, icon: '🎨', badge: 'βœ… Official' },
635
+ { rank: 7, title: 'claude-3.7-sonnet', author: 'anthropic', runs: 290000, icon: 'πŸ€–', badge: 'βœ… Official' },
636
+ { rank: 8, title: 'gemma-2-9b-it', author: 'google', runs: 180000, icon: 'πŸ’¬', badge: 'βœ… Official' }
637
  ];
638
 
639
+ const sampleData = type === 'official' ? officialData : featuredData;
640
+
641
  container.innerHTML = '';
642
  sampleData.forEach(model => {
643
  model.url = `https://replicate.com/${model.author}/${model.title}`;
 
648
  // μƒˆλ‘œκ³ μΉ¨
649
  function refreshCurrent() {
650
  if (currentCategory === 'hf-models') {
651
+ loadHFModels();
652
  } else if (currentCategory === 'hf-spaces') {
653
+ loadHFSpaces();
654
  } else {
655
+ const activeBtn = document.querySelector('#replicate .filter-btn.active');
656
+ const type = activeBtn.textContent.includes('Featured') ? 'featured' : 'official';
657
+ loadReplicate(type);
658
  }
659
  }
660
 
 
663
  console.log('πŸš€ HuggingFace & Replicate νŠΈλ Œλ”© 리슀트 λ‘œλ“œ μ‹œμž‘');
664
  console.log('πŸ“Œ API Endpoints:');
665
  console.log('- HF Models (Trending): https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30');
666
+ console.log('- HF Spaces (Trending): https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30');
 
 
667
 
668
+ loadHFModels();
669
  });
670
  </script>
671
  </body>