Update index.html

index.html

@@ -307,8 +307,21 @@
         </div>
 
         <div class="note">
-            ⚠️ CORS 정책으로 인해 일부 데이터가 로드되지 않을 수 있습니다. 
-            프록시 서버나 백엔드 API를 사용하면 모든 데이터를 가져올 수 있습니다.
+            ⚠️ <strong>API 사용 안내:</strong><br>
+            • HuggingFace API: https://huggingface.co/api/models?sort=likes7d (트렌딩), ?sort=created_at (신규)<br>
+            • CORS 에러 발생 시 프록시 서버 사용을 권장합니다<br>
+            • 실제 서비스에서는 백엔드 서버를 통해 API를 호출하는 것이 안정적입니다
+        </div>
+
+        <!-- API URLs Info -->
+        <div style="margin-top: 30px; background: #f8f9fa; padding: 20px; border-radius: 10px;">
+            <h3 style="margin-bottom: 15px; color: #333;">📌 API Endpoints</h3>
+            <div style="display: grid; gap: 10px; font-size: 0.9rem;">
+                <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>
+                <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>
+                <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>
+                <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>
+            </div>
         </div>
     </div>
 
@@ -358,17 +371,34 @@
             container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>모델 로딩 중...</p></div>';
             
             try {
-                // HuggingFace API 사용
-                const sort = filter === 'trending' ? 'likes' : 'created';
-                const response = await fetch(`https://huggingface.co/api/models?sort=${sort}&limit=20`);
+                // HuggingFace API 사용 - trending은 sort 파라미터로 처리
+                let apiUrl;
+                if (filter === 'trending') {
+                    // trending은 likes7d (7일간 좋아요) 또는 likes로 정렬
+                    apiUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';
+                } else {
+                    // 신규는 created_at으로 정렬
+                    apiUrl = 'https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30';
+                }
+                
+                console.log(`📡 API 호출 중: ${apiUrl}`);
+                const response = await fetch(apiUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json',
+                    }
+                });
                 
                 if (!response.ok) throw new Error('API 요청 실패');
                 
                 const data = await response.json();
+                console.log(`✅ ${data.length}개의 모델 로드 완료`);
                 displayHFModels(data, container);
             } catch (error) {
-                // CORS 에러 시 샘플 데이터 표시
-                displaySampleHFModels(filter, container);
+                console.error('❌ API 에러:', error);
+                console.log('🔄 프록시 서버를 통한 요청을 시도합니다...');
+                // CORS 에러 시 프록시 사용 시도
+                tryProxyRequest('models', filter, container);
             }
         }
 
@@ -387,39 +417,102 @@
             
             try {
                 // HuggingFace API 사용
-                const sort = filter === 'trending' ? 'likes' : 'created';
-                const response = await fetch(`https://huggingface.co/api/spaces?sort=${sort}&limit=20`);
+                let apiUrl;
+                if (filter === 'trending') {
+                    // trending은 likes로 정렬
+                    apiUrl = 'https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30';
+                } else {
+                    // 신규는 created_at으로 정렬
+                    apiUrl = 'https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30';
+                }
+                
+                console.log(`📡 API 호출 중: ${apiUrl}`);
+                const response = await fetch(apiUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json',
+                    }
+                });
                 
                 if (!response.ok) throw new Error('API 요청 실패');
                 
                 const data = await response.json();
+                console.log(`✅ ${data.length}개의 스페이스 로드 완료`);
                 displayHFSpaces(data, container);
             } catch (error) {
-                // CORS 에러 시 샘플 데이터 표시
-                displaySampleHFSpaces(filter, container);
+                console.error('❌ API 에러:', error);
+                console.log('🔄 프록시 서버를 통한 요청을 시도합니다...');
+                // CORS 에러 시 프록시 사용 시도
+                tryProxyRequest('spaces', filter, container);
+            }
+        }
+
+        // 프록시를 통한 요청 시도
+        async function tryProxyRequest(type, filter, container) {
+            try {
+                console.log('🔄 프록시를 통한 요청 시도 중...');
+                // 공개 CORS 프록시 사용 (예: cors-anywhere)
+                const proxyUrl = 'https://api.allorigins.win/raw?url=';
+                let targetUrl;
+                
+                if (type === 'models') {
+                    targetUrl = filter === 'trending' 
+                        ? 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30'
+                        : 'https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30';
+                } else {
+                    targetUrl = filter === 'trending'
+                        ? 'https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30'
+                        : 'https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30';
+                }
+                
+                console.log(`📡 프록시 URL: ${proxyUrl + encodeURIComponent(targetUrl)}`);
+                const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
+                const data = await response.json();
+                
+                console.log(`✅ 프록시를 통해 ${data.length}개의 데이터 로드 완료`);
+                if (type === 'models') {
+                    displayHFModels(data, container);
+                } else {
+                    displayHFSpaces(data, container);
+                }
+            } catch (error) {
+                console.error('❌ 프록시 요청도 실패:', error);
+                console.log('📌 샘플 데이터를 표시합니다.');
+                // 모든 시도 실패 시 샘플 데이터 표시
+                if (type === 'models') {
+                    displaySampleHFModels(filter, container);
+                } else {
+                    displaySampleHFSpaces(filter, container);
+                }
             }
         }
 
         // Replicate 모델 로드
         async function loadReplicate() {
+            console.log('🚀 Replicate 모델 로드 시작');
             const container = document.getElementById('replicate-content');
             container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>모델 로딩 중...</p></div>';
             
             // Replicate는 공개 API가 제한적이므로 샘플 데이터 표시
+            console.log('ℹ️ Replicate는 공개 API가 제한적이므로 샘플 데이터를 표시합니다.');
             displaySampleReplicateModels(container);
         }
 
         // HuggingFace Models 표시
         function displayHFModels(models, container) {
             container.innerHTML = '';
-            models.forEach(model => {
+            models.forEach((model, index) => {
                 const card = createModelCard({
-                    title: model.modelId || model.id,
-                    author: model.author || 'Unknown',
+                    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,
-                    url: `https://huggingface.co/${model.modelId || model.id}`,
-                    icon: '🤖'
+                    tags: model.tags || [],
+                    pipeline_tag: model.pipeline_tag || '',
+                    url: `https://huggingface.co/${model.id || model.modelId}`,
+                    icon: '🤖',
+                    updated: model.lastModified || model.created_at
                 });
                 container.appendChild(card);
             });
@@ -428,14 +521,18 @@
         // HuggingFace Spaces 표시
         function displayHFSpaces(spaces, container) {
             container.innerHTML = '';
-            spaces.forEach(space => {
+            spaces.forEach((space, index) => {
                 const card = createModelCard({
-                    title: space.id.split('/')[1] || space.id,
-                    author: space.id.split('/')[0] || 'Unknown',
+                    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: '🎯'
+                    icon: space.emoji || '🎯',
+                    hardware: space.hardware || 'CPU',
+                    updated: space.lastModified || space.created_at
                 });
                 container.appendChild(card);
             });
@@ -447,7 +544,17 @@
             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="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;">
+                    ${data.rank}
+                </div>
                 <div class="item-header">
                     <div class="item-icon">${data.icon}</div>
                     <div class="item-info">
@@ -459,8 +566,15 @@
                     ${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)}</div>` : ''}
                 </div>
+                ${data.tags && data.tags.length > 0 ? `
+                    <div style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px;">
+                        ${data.tags.slice(0, 3).map(tag => `<span style="background: #f0f0f0; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; color: #666;">${tag}</span>`).join('')}
+                    </div>
+                ` : ''}
             `;
             
             return card;
@@ -475,18 +589,24 @@
 
         // 샘플 데이터 표시 함수들
         function displaySampleHFModels(filter, container) {
+            console.log(`📌 ${filter === 'trending' ? '트렌딩' : '신규'} 모델 샘플 데이터를 표시합니다.`);
             const sampleData = filter === 'trending' ? [
-                { title: 'meta-llama/Llama-3.3-70B', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: '🤖' },
-                { title: 'DeepSeek-R1', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: '🤖' },
-                { title: 'Qwen/Qwen3-235B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '🤖' },
-                { title: 'FLUX.1-dev', author: 'black-forest-labs', likes: 29100, downloads: 397000, icon: '🤖' },
-                { title: 'microsoft/Phi-4', author: 'microsoft', likes: 8900, downloads: 156000, icon: '🤖' }
+                { 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'] }
             ] : [
-                { title: 'OmniGen2', author: 'research-lab', likes: 156, downloads: 890, icon: '🤖' },
-                { title: 'VideoGen-Pro', author: 'ai-startup', likes: 89, downloads: 234, icon: '🤖' },
-                { title: 'CodeLLM-7B', author: 'dev-team', likes: 234, downloads: 1200, icon: '🤖' },
-                { title: 'MusicGen-V2', author: 'audio-ai', likes: 67, downloads: 456, icon: '🤖' },
-                { title: 'ImageEdit-XL', author: 'vision-lab', likes: 145, downloads: 789, icon: '🤖' }
+                { rank: 1, title: 'OmniGen2', author: 'BAAI', likes: 156, downloads: 890, icon: '🤖', pipeline_tag: 'image-generation', tags: ['new', 'omnigen'] },
+                { rank: 2, title: 'VideoGen-Pro-2B', author: 'ai-lab', likes: 89, downloads: 234, icon: '🤖', pipeline_tag: 'text-to-video', tags: ['video', 'new'] },
+                { rank: 3, title: 'CodeLLM-7B-Python', author: 'code-ai', likes: 234, downloads: 1200, icon: '🤖', pipeline_tag: 'text-generation', tags: ['code', 'python'] },
+                { rank: 4, title: 'MusicGen-Remix', author: 'audio-ml', likes: 67, downloads: 456, icon: '🤖', pipeline_tag: 'audio-to-audio', tags: ['music', 'remix'] },
+                { rank: 5, title: 'ImageEdit-XL-v2', author: 'vision-lab', likes: 145, downloads: 789, icon: '🤖', pipeline_tag: 'image-to-image', tags: ['editing', 'xl'] }
             ];
             
             container.innerHTML = '';
@@ -497,18 +617,24 @@
         }
 
         function displaySampleHFSpaces(filter, container) {
+            console.log(`📌 ${filter === 'trending' ? '트렌딩' : '신규'} 스페이스 샘플 데이터를 표시합니다.`);
             const sampleData = filter === 'trending' ? [
-                { title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎯' },
-                { title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '🎯' },
-                { title: 'image-to-3d', author: 'research', likes: 8590, sdk: 'Gradio', icon: '🎯' },
-                { title: 'voice-clone', author: 'audio-ml', likes: 5640, sdk: 'Gradio', icon: '🎯' },
-                { title: 'code-generator', author: 'dev-tools', likes: 3210, sdk: 'Streamlit', icon: '🎯' }
+                { 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' }
             ] : [
-                { title: 'new-llm-demo', author: 'researcher', likes: 23, sdk: 'Gradio', icon: '🎯' },
-                { title: 'video-editor', author: 'creator', likes: 45, sdk: 'Streamlit', icon: '🎯' },
-                { title: 'data-viz', author: 'analyst', likes: 67, sdk: 'Streamlit', icon: '🎯' },
-                { title: 'music-mixer', author: 'musician', likes: 34, sdk: 'Gradio', icon: '🎯' },
-                { title: 'text-analyzer', author: 'nlp-dev', likes: 56, sdk: 'Gradio', icon: '🎯' }
+                { rank: 1, title: 'llm-arena', author: 'benchmark', likes: 23, sdk: 'Gradio', icon: '🏆', hardware: 'A100' },
+                { rank: 2, title: 'video-editor-ai', author: 'creator-tools', likes: 45, sdk: 'Streamlit', icon: '🎬', hardware: 'T4 GPU' },
+                { rank: 3, title: 'data-viz-dashboard', author: 'analytics', likes: 67, sdk: 'Streamlit', icon: '📈', hardware: 'CPU' },
+                { rank: 4, title: 'music-mixer-ai', author: 'dj-ai', likes: 34, sdk: 'Gradio', icon: '🎧', hardware: 'CPU' },
+                { rank: 5, title: 'text-analyzer-pro', author: 'nlp-tools', likes: 56, sdk: 'Gradio', icon: '📝', hardware: 'CPU' }
             ];
             
             container.innerHTML = '';
@@ -519,15 +645,18 @@
         }
 
         function displaySampleReplicateModels(container) {
+            console.log('📌 Replicate 인기 모델 샘플 데이터를 표시합니다.');
             const sampleData = [
-                { title: 'FLUX1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '⚡' },
-                { title: 'stable-diffusion-3', author: 'stability-ai', runs: 1750000, icon: '⚡' },
-                { title: 'whisper', author: 'openai', runs: 890000, icon: '⚡' },
-                { title: 'llama-2-70b', author: 'meta', runs: 670000, icon: '⚡' },
-                { title: 'musicgen', author: 'facebook', runs: 450000, icon: '⚡' },
-                { title: 'animate-diff', author: 'lucataco', runs: 320000, icon: '⚡' },
-                { title: 'real-esrgan', author: 'xinntao', runs: 280000, icon: '⚡' },
-                { title: 'rembg', author: 'cjwbw', runs: 210000, icon: '⚡' }
+                { rank: 1, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨' },
+                { rank: 2, title: 'stable-diffusion-3', author: 'stability-ai', runs: 1750000, icon: '🖼️' },
+                { rank: 3, title: 'whisper-large-v3', author: 'openai', runs: 890000, icon: '🎤' },
+                { rank: 4, title: 'llama-3.3-70b', author: 'meta', runs: 670000, icon: '🤖' },
+                { rank: 5, title: 'musicgen-melody', author: 'facebook', runs: 450000, icon: '🎵' },
+                { rank: 6, title: 'animate-diff', author: 'lucataco', runs: 320000, icon: '🎬' },
+                { rank: 7, title: 'real-esrgan', author: 'xinntao', runs: 280000, icon: '🔍' },
+                { rank: 8, title: 'rembg', author: 'cjwbw', runs: 210000, icon: '✂️' },
+                { rank: 9, title: 'gfpgan', author: 'tencentarc', runs: 178000, icon: '👤' },
+                { rank: 10, title: 'codeformer', author: 'sczhou', runs: 156000, icon: '✨' }
             ];
             
             container.innerHTML = '';
@@ -549,7 +678,16 @@
         }
 
         // 초기 로드
-        loadHFModels('trending');
+        window.addEventListener('DOMContentLoaded', () => {
+            console.log('🚀 HuggingFace & Replicate 트렌딩 리스트 로드 시작');
+            console.log('📌 API Endpoints:');
+            console.log('- HF Models (Trending): https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30');
+            console.log('- HF Models (New): https://huggingface.co/api/models?sort=created_at&direction=-1&limit=30');
+            console.log('- HF Spaces (Trending): https://huggingface.co/api/spaces?sort=likes&direction=-1&limit=30');
+            console.log('- HF Spaces (New): https://huggingface.co/api/spaces?sort=created_at&direction=-1&limit=30');
+            
+            loadHFModels('trending');
+        });
     </script>
 </body>
 </html>